/* SECTION 0
---------------------------------------------Document standart settings-------------------------------------------------
*/

/* SECTION 0
--------------------------------------------- owned Font-------------------------------------------------
*/

@font-face {
    font-family: KozGoPro-Light;
    src:url(../font/KozGoPro-Light.otf);
}

@font-face {
    font-family: KozGoPro-Regular;
    src:url(../font/KozGoPro-Regular.otf);
}

@font-face {
    font-family: KozGoPro-Medium;
    src:url(../font/KozGoPro-Medium.otf);
}

@font-face {
    font-family: KozGoPro-Bold;
    src:url(../font/KozGoPro-Bold.otf);
}
@font-face {
    font-family: KozGoPro-Heavy;
    src:url(../font/KozGoPro-Heavy.otf);
}
/* SECTION 0
--------------------------------------------- owned Font End-------------------------------------------------
*/

/* SECTION 0
--------------------------------------------- standart formating-------------------------------------------------
*/
*	{
	padding:0;
	margin:0;
	border:0;
	font-family: 'KozGoPro-Light', sans-serif;
	font-size:10pt;
	font-weight:400; /* thin=100 ligth=300 regular=400 medium=500 Bold=700 black=900*/
	color: var(--gray);
	line-height: 1.5;
	}

::selection		{
				background: rgba(77,77,77,1);
				color:rgba(242,242,242,1);
				}


:root
{
	--white6:rgba(255,255,255,0.6);
	--white8:rgba(255,255,255,0.8);
	--white:rgba(255,255,255,1);
	--blacks: rgba(0,0,0,0.2);
	--gray6: rgba(77,77,77,0.6);
	--gray8: rgba(77,77,77,0.8);
	--gray: rgba(77,77,77,1);
	--shadowBox: rgba(77,77,77,0.2);
	--red: rgba(230,45,0,1);
	
	
	--MenuFontsize:10pt;

	--max_height: 600px;
	--max_width: 1200px;
	
}

html{
	overflow: hidden;
}

body{
	height: 100%;
	width: 100%;
	display:flex;
	flex-direction:column;
	cursor:default;
	
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	


}

.user_selectable {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
	
}


/* SECTION 0
--------------------------------------------- standart formating END-------------------------------------------------
*/


/* SECTION 0
--------------------------------------------- formating -------------------------------------------------
*/

/*
----------------------------------------- Backgorund Display Media  and Canvas-------------------------------------------------
*/

#background{
	display: flex;
	flex-direction: column;
	
	height: 100vh;
	width: 100vw;
	
	opacity: 1;
	
	position: relative;
	overflow: hidden;

/*	min-height:var(--max_height);
	min-width: var(--max_width);
*/
	 
}


#background_area{
	position: absolute;
	display: flex;
	
	height: 100vh;
	width: 100vw;
	
	opacity: 1;

}


.background_display{
	
	position:absolute;
	display: flex;
	
	height: inherit;
	width: inherit;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	
	opacity: 0;
	transition: opacity 1.0s ease-in-out;
	
}


#imgTagPic{
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
}

#background_ram_space{
	position: absolute;
	display: flex;
	
	height: 100vh;
	width: 100vw;
	
	justify-content: center;
	align-content: center;
	
	opacity: 0;
}



canvas {
	position: absolute;
	
	opacity: 0;
	visibility: hidden;
	
	align-self: center;
}

#canvas_holder
{
	position: absolute;
	display: flex;
	
	height: 100vh;
	width: 100vw;
	
	justify-content: center;
}

#canvas_subholder{
	display: flex;
	flex-direction: column;
	
	height: 100vh;

	
	justify-content: center;
	overflow:hidden;
}

:root{	--pointSize:14px;	}


/*
----------------------------------------- Backgorund, display media and Canvas END-------------------------------------------------
*/


#pic_point_area_holder{
	display: flex;
	
	justify-content: center;
	padding: 0px 0px 5vh 0px;
}


#pic_point_area{
	position: relative;
	display: flex;
	
	align-self: flex-end;
}


#pic_point_area_sub_container{
	display: flex;
}


#pic_point_subarea{
	display: flex;
	justify-content: center;
}

.pic_point_holder{
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: calc(var(--pointSize) + 24px );
	width: calc(var(--pointSize) + 24px );
	
	margin: 0px 2px 0px 2px;
	border-radius: 50%;
	cursor: pointer;
	
	
}

.pic_point_border_w,
.pic_point_border_g
{
	position: absolute;
	border-radius: 50%;
	height: 100%;
	width: 100%;	
	margin: -1px;
	
	transition: opacity 0.6s ease-in-out;
	
}

.pic_point_border_w {
						border: 1px solid white;
						opacity: 1;
					}
.pic_point_border_g {	border: 1px solid var(--gray);
						opacity: 1;
						}


.pic_point_fill_w,
.pic_point_fill_g {
	position: absolute;
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transition: opacity 1s ease-in-out;
}

.pic_point_fill_w {
						background-color:  var(--white6);
						opacity: 1;
					}
.pic_point_fill_g {	background-color: var(--gray6);
						opacity: 1;
						}



.pic_point{
	position: absolute;
	height: var(--pointSize);
	width: var(--pointSize);
	border-radius: 50%;
	background-color: "";
	transition:	animationStart 0.6s ease-in-out 0s 0 forwards;
	/* animation:pointAnimation 0.6s ease 0s 1 normal ---->on Javascript */
}


@keyframes pointAnimation {
  						0%  {	height: var(--pointSize);
								width: 	var(--pointSize);
							}
	  					20% {	height: calc(var(--pointSize) - 4px);
								width: 	calc(var(--pointSize) - 4px);
							}
						50% {	height: calc(var(--pointSize) + 8px);
								width: 	calc(var(--pointSize) + 8px);
							}
						80% {	height: calc(var(--pointSize) - 4px);
								width: 	calc(var(--pointSize) - 4px);
							}
						100%{	height: var(--pointSize);
								width: 	var(--pointSize);
							}
}	


/*
----------------------------------------- Backgorund Display Media END-------------------------------------------------
*/


#body_main{
	display: flex;
	flex-direction: column;
	position: absolute;
	height: 100%;
	width: 100%;
/*	
	min-height:var(--max_height);
	min-width: var(--max_width);
*/
	box-shadow:0px 0px 100em 0px rgba(0,0,0,0.5) inset;
}


/*
----------------------------------------- Menu Area -------------------------------------------------
*/
#top_area{	
	
	
	display: flex;
	flex-direction:row;
	justify-content: space-between;
	flex-wrap: wrap;

	width: 100vw;
}


@media (max-width: 880px) {
  		#top_area {
    			flex-direction: column;
  					}
						}

#logo_group{
	display: flex;
	visibility: hidden;
	align-self: flex-start;
	
	flex-direction:row;
}



:root
{
	--logo_h_top: 80px;
	--arch_logo_h: 42px;
}



#logo_top_area{
	position: relative;
	display: flex;
	
	opacity: 0;
	
	width: calc((var(--logo_h_top)*(3.6)));
	height: var(--logo_h_top);
	
	transition: opacity 0.5s ease-in-out 0s;
	cursor: pointer;
	
	padding: 1vh 0px 0px 1vw;
}

#logo_top_area_sub_holder{
	display: flex;
}


#arch_logo_top_area{
	position: relative;	
	display: flex;
	align-self: flex-end;
	

	
	opacity: 0;	
	
	width: calc(var(--arch_logo_h)*5);
	height: var(--arch_logo_h);
	
	transition: opacity 0.5s ease-in-out 0s;
	cursor: pointer;
	padding: 0px 0px 10px 0px;
}

#arch_logo_top_area_sub_holder{
	display: flex;
}


#logo_alone_holder{
	display: flex;
	height: var(--logo_h_top);
	width: calc(var(--logo_h_top)*(1.2));
}

#logo_text_holder{
	display: flex;
	height: var(--logo_h_top);
	width: calc(var(--logo_h_top)*(2.4));
}


#logo_alone_top_holder_gray,
#logo_alone_top_holder_white,
#logo_alone_top_holder_red
{
	position: absolute;
	display: flex;
	
	height: var(--logo_h_top);
	width: calc(var(--logo_h_top)*(1.2));
	
	opacity: 0;
	
	background-size: contain;
	transition: opacity 0.5s ease-in-out 0s;
}

#logo_top_area:hover #logo_alone_top_holder_red{opacity: 1}


#logo_text_top_holder_gray,
#logo_text_top_holder_white
{
	position: absolute;
	display: flex;
	
	height: var(--logo_h_top);
	width: calc(var(--logo_h_top)*(2.4));
	margin: -3px 0px 0px -15px;
	
	opacity: 0;
	
	background-size: contain;
	transition: opacity 0.5s ease-in-out 0s;
}


#arch_logo_top_holder{
	display: flex;
	
	width: calc(var(--arch_logo_h));
	height: var(--arch_logo_h);
}

#arch_text_top_holder{
	display: flex;
	
	width: calc(var(--arch_logo_h)*4);
	height: var(--arch_logo_h);
	
}


#arch_logo_top_holder_white,
#arch_logo_top_holder_gray,
#arch_logo_top_holder_color
{
	position: absolute;
	display: flex;
	
	width: var(--arch_logo_h);
	height: var(--arch_logo_h);
	
	opacity: 0;
	
	background-size: contain;
	transition: opacity 0.5s ease-in-out 0s;
}


#arch_text_top_holder_white,
#arch_text_top_holder_gray
{
	position: absolute;
	display: flex;
	
	width: calc(var(--arch_logo_h)*(4));
	height: var(--arch_logo_h);
	
	opacity: 0;
	
	background-size: contain;
	transition: opacity 0.5s ease-in-out 0s;
}


#arch_logo_top_area:hover #arch_logo_top_holder_white{opacity: 0;}
#arch_logo_top_area:hover #arch_logo_top_holder_gray{opacity: 0;}
#arch_logo_top_area:hover #arch_logo_top_holder_color{opacity: 1;}

.arch_logo_color		{	background-image: url(../images/logo/architektenkammer-bw_logo_125px_125px_color.png);	}
.arch_logo_gray			{	background-image: url(../images/logo/architektenkammer-bw_logo_125px_125px_gray.png);	}
.arch_logo_white		{	background-image: url(../images/logo/architektenkammer-bw_logo_125px_125px_white.png);	}


.arch_text_white		{	background-image: url(../images/logo/architektenkammer-bw_text_500px_125px_white.png);	}
.arch_text_gray			{	background-image: url(../images/logo/architektenkammer-bw_text_500px_125px_gray.png);	}






#menu_area{
	visibility: hidden;
	
	display: flex;
	align-self:center;
	align-content: center;
	
	padding: 3vh 3vw 0px 0px;
	opacity: 0;
	transition: opacity 0.5s ease-in-out 0s;
	
}




#menu_sub_area{
	display: flex;
	align-content: center;
}

:root{	--icoSize:50px;	}

.icon_holder
{
	display: flex;
	height: calc(var(--icoSize) + 8px );
	width: calc(var(--icoSize) + 8px );
	justify-content: center;
	align-items: center;
	margin: 0px 5px 0px 5px;
	color:var(--gray);
	transition: color 0.5s ease-in-out 0s;
	
}


/*
----------------------------------------- Hover Text Message on menu icons-------------------------------------------------
*/

.icon_box
{
	
}

.icon_text
{
	justify-content: center;
	display: flex;
	margin: -10px 0px 0px 0px;
	color: var(--gray);
	
	opacity: 0;
	transition: opacity 0.5s ease-in-out 0s;	
	
	
}

.icon_holder:hover + .icon_text
								{
								opacity: 1;
								}

/*
----------------------------------------- Hover Text Message on menu icons end-------------------------------------------------
*/


.icons_white,
.icons_gray
{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: inherit;
	height: inherit;
	
	cursor: pointer;
	transform: scale(0.8, 0.8);
	transition: opacity 0.5s ease-in-out 0s;
}

.icon_fill
{
	opacity: 0;
}

#icon_picture_border_w,
#icon_picture_fill_w,

#icon_picture_border_g,
#icon_picture_fill_g,

#icon_office_border_w,
#icon_office_fill_w,

#icon_office_border_g,
#icon_office_fill_g,

#icon_work_border_w,
#icon_work_fill_w,

#icon_work_border_g,
#icon_work_fill_g,

#icon_phone_border_w,
#icon_phone_fill_w,

#icon_phone_border_g,
#icon_phone_fill_g,

#icon_menu_border_w,
#icon_menu_fill_w,

#icon_menu_border_g,
#icon_menu_fill_g

{
	background-size: var(--icoSize) var(--icoSize);
	position: absolute;
	
	height:var(--icoSize);
	width:var(--icoSize);
	
	transition: opacity 0.4s;
		/* animation: iconAnimation 0.6s ease 0s 1 normal ---->on Javascript */

}

#icon_picture_border_w{background-image: url(../images/menu/picture_icon_border_w.png);}
#icon_picture_fill_w{background-image: url(../images/menu/picture_icon_fill_w.png);}

#icon_picture_border_g{background-image: url(../images/menu/picture_icon_border_g.png);}
#icon_picture_fill_g{background-image: url(../images/menu/picture_icon_fill_g.png);}

#icon_office_border_w{background-image: url(../images/menu/office_icon_border_w.png);}
#icon_office_fill_w{background-image: url(../images/menu/office_icon_fill_w.png);}

#icon_office_border_g{background-image: url(../images/menu/office_icon_border_g.png);}
#icon_office_fill_g{background-image: url(../images/menu/office_icon_fill_g.png);}

#icon_work_border_w{background-image: url(../images/menu/work_icon_border_w.png);}
#icon_work_fill_w{background-image: url(../images/menu/work_icon_fill_w.png);}

#icon_work_border_g{background-image: url(../images/menu/work_icon_border_g.png);}
#icon_work_fill_g{background-image: url(../images/menu/work_icon_fill_g.png);}

#icon_phone_border_w{background-image: url(../images/menu/phone_icon_border_w.png)}
#icon_phone_fill_w{background-image: url(../images/menu/phone_icon_fill_w.png)}

#icon_phone_border_g{background-image: url(../images/menu/phone_icon_border_g.png)}
#icon_phone_fill_g{background-image: url(../images/menu/phone_icon_fill_g.png)}

#icon_menu_border_w{background-image: url(../images/menu/menu_icon_border_w.png)}
#icon_menu_fill_w{background-image: url(../images/menu/menu_icon_fill_w.png)}

#icon_menu_border_g{background-image: url(../images/menu/menu_icon_border_g.png)}
#icon_menu_fill_g{background-image: url(../images/menu/menu_icon_fill_g.png)}



#icon_picture_fill_w,
#icon_office_fill_w,
#icon_work_fill_w,
#icon_phone_fill_w,
#icon_menu_fill_w
	
						{opacity: 0;}

#icon_picture_fill_g,
#icon_office_fill_g,
#icon_work_fill_g,
#icon_phone_fill_g,
#icon_menu_fill_g
						{opacity: 0;}



@keyframes icoAnimation {
  						0%  {	transform: scale(0.8, 0.8);
							}
	  					20% {	transform: scale(0.6, 0.6);
							}
						50% {	transform: scale(1.0, 1.0);
							}
						80% {	transform: scale(0.7, 0.7);
							}
						100%{	transform: scale(0.8, 0.8);
							}

						}


@keyframes icoAnimationB {
  						0%  {	transform: scale(0.84, 0.84);
							}
	  					20% {	transform: scale(0.74, 0.74);
							}
						50% {	transform: scale(1.0, 1.0);
							}
						80% {	transform: scale(0.74, 0.74);
							}
						100%{	transform: scale(0.84, 0.84);
							}

						}
/*
----------------------------------------- Menu Area END-------------------------------------------------
*/


/*
----------------------------------------- Backgorund Logo Area BIG SMAL-------------------------------------------------
*/

#main_area{
	display: flex;
	
	justify-content: center;
	flex-direction: column;
	
	height: 100%;	
	
	}

#main_area_box{
	display: flex;
	height: 100%;
	margin: 5% 8% 3% 8%;
	align-items: center;
	justify-content:space-evenly; 
	}


#input_area_holder{
	
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;

	height: 100%;
	
	opacity: 1;
	visibility: visible;
	
	transition: opacity 0.5s ease-in-out 0s;
	flex-grow: 3;

	
}


.input_area{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white8);
	box-shadow:0px 0px 50px 0px var(--shadowBox);
	cursor: pointer;
	z-index: 2;
	
}




.logo_alone_red			{	background-image: url(../images/logo/schneck-logo-alone-300px_250px_red.png);		}
.logo_alone_gray		{	background-image: url(../images/logo/schneck-logo-alone-300px_250px_gray.png);		}
.logo_alone_white		{	background-image: url(../images/logo/schneck-logo-alone-300px_250px_white.png);		}

.logo_text_gray			{	background-image: url(../images/logo/schneck-text-alone-600px_250px_gray.png);		}
.logo_text_white		{	background-image: url(../images/logo/schneck-text-alone-600px_250px_white.png);		}



#start_logo_area{
	display: flex;
	
	flex-direction: row;
	background-size: contain;
	background-position: center;
	position: relative;
	
	opacity: 1;
	height: 100%;
	width: 100%;
}


#start_logo_holder,
#start_logo_holder_background
{
	
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	
	width: 100%;
	height: 100%;
	
	align-items: center;
	
	opacity: 1;
	z-index: 2;
	transition: opacity 0.4s ease-in-out 0s;
	
}


:root 	{--start_logo_h: 160px;}
:root 	{--divide_2: 2;}

.start_logo_alone{
	
	display: flex;
	position: relative;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
	
	
	height: 100%;
	width: 30%;
	
}

.start_logo_text{
	display: flex;
	position: relative;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
	

	height: 100%;
	width: 60%;
	
}


#start_logo_holder_background{
	opacity: 0;
}


#start_logo_area:hover #start_logo_holder_background{opacity: 1;}


#start_phone_area{
	opacity: 1;
	height: 100%;
	width: 25%;
	margin: 0px 0px 0px 20px;
}

#start_phone_area:hover #icon_phone_start_background
{
	opacity: 1;
}

#icon_phone_start{
	background-image: url(../images/menu/phone_icon_border_g_tinn.png);
	
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: relative;
	
	width: 100%;
	height: 100%;
	
	max-height: 100px;
	max-width: 100px;
	
	opacity: 1;
}

#icon_phone_start_background{
	background-image: url(../images/menu/phone_icon_fill_g.png);

	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
	position: relative;
	
	width: 100%;
	height: 100%;
	
	max-height: 100px;
	max-width: 100px;
	
	opacity: 0;
	transition: opacity 0.4s ease-in-out 0s;
	z-index: 2;
}

#welcome_window{
	opacity: 1;
	display: flex;
	position: absolute;
	align-content: center;
	align-self: center;
	height: 35%;
	width: 100vh;
	

}




/*
----------------------------------------- Navigation On Main Screen-------------------------------------------------
*/

:root{	--naviArrowSize:100px;	}

.pic_area_holder
{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 100%;
	margin: 0% 5%;
	flex-grow: 1;

}

.pic_navi_holder
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	
	height: 100%;
	width: 100%;
	max-height: 100px;
	max-width: 100px;
	
	
	cursor: pointer;
	visibility: hidden;
	
	z-index: 2;
	
}


.pic_navi_subholder
{
	position: relative;
	display: flex;
	
	width: 100%;
	height: 100%;
	
	justify-content: center;
	align-items: center;
	
	opacity: 0;
	transition: opacity 0.5s ease-in-out 0s;


}

.pic_navi_border
{
	display: flex;
	position: relative;
	
	height:100%;
	width: 100%;
}

.pic_navi_white,
.pic_navi_gray
{
	position: absolute;
	display: flex;
	flex-direction: column;
	
	justify-content: center;
	align-items: center;

	height: 100%;
	width: 100%;
	
	transform: scale(0.84, 0.84);
	transition: opacity 0.5s ease-in-out 0s;

}

.pic_navi_fill
{
	opacity: 0;
}

#pic_navigation_forward_border_w,
#pic_navigation_forward_fill_w,

#pic_navigation_forward_border_g,
#pic_navigation_forward_fill_g,

#pic_navigation_back_border_w,
#pic_navigation_back_fill_w,

#pic_navigation_back_border_g,
#pic_navigation_back_fill_g

{
	position: absolute;
	
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
	
	width: 100%;
	height: 100%;
	
	transition: opacity 0.4s;
	/* animation: iconAnimation 0.6s ease 0s 1 normal ---->on Javascript */
}

#pic_navigation_forward_border_w{background-image: url(../images/menu/forward_icon_w_150px-150px_border.png);}
#pic_navigation_forward_fill_w{background-image: url(../images/menu/forward_icon_w_150px-150px_fill.png);}	
	
#pic_navigation_forward_border_g{background-image: url(../images/menu/forward_icon_g_150px-150px_border.png);}
#pic_navigation_forward_fill_g{background-image: url(../images/menu/forward_icon_g_150px-150px_fill.png);}	

#pic_navigation_back_border_w{background-image: url(../images/menu/back_icon_w_150px-150px_border.png);}
#pic_navigation_back_fill_w{background-image: url(../images/menu/back_icon_w_150px-150px_fill.png);}	
	
#pic_navigation_back_border_g{background-image: url(../images/menu/back_icon_g_150px-150px_border.png);}
#pic_navigation_back_fill_g{background-image: url(../images/menu/back_icon_g_150px-150px_fill.png);}	



/*
----------------------------------------- MAIN INFOMRATION AREA-------------------------------------------------
*/



#input_area_center{
	flex-direction:column;
	display: flex;
	opacity: 0;
	visibility: hidden;
	
	width: 100%;
	background-color: var(--white8);
	box-shadow:0px 0px 50px 0px var(--shadowBox);
	transition: opacity 0.5s ease-in-out 0s;
}


#input_area_center_subcontainer{
	flex-direction:row;
	
	display: flex;
	opacity: 1;

	height: 100%;
	width: 100%;
	
	transition: opacity 0.5s ease-in-out 0s;

}



.input_container{
	position: relative;
	align-items: flex-start;
	justify-content:flex-start;
	display: flex;
	transition: opacity 0.5s ease-in-out 0s;
	
}


/*
----------------------------------------- Scroller controlls-------------------------------------------------
*/


#controller_partition{
	position: relative;
	display:flex;
	
	flex-direction: column;
	height: 100%;
	
	z-index: 2;
}


#scroller_container{
	position: relative;
	
	display: flex;
	opacity: 0;
	
	justify-content: center;
	align-content: center;
	flex-direction: column;
	
	height: 100%;
	z-index: 2;

	transition: opacity 0.5s ease-in-out;
	/*border: 1px solid pink;*/
}


#scroll_bar{
	position: relative;
	display: flex;
	
	height: 100%;
	width: 100%;
}

#scroll_holder{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 15%;
	width: 100%;
	
	transition: top 0s ease;
	cursor: pointer;

}


.scroller{
		display: flex;
		position: absolute;
		flex-direction: row;

		height:100%;
		width: 10px;
	
		transition: opacity 0.2s ease-in-out;

}

#scroller_normal{
	border: 1px solid var(--gray8);
	opacity: 1;
}

#scroller_hover{
	background-color: var(--gray6);
	opacity: 0;
}

#scroll_holder:hover #scroller_hover		{opacity: 1;}
#scroll_holder:active #scroller_hover		{opacity: 1;}






#input_navigation_container{
	position:relative;
	
	display: flex;
	justify-content: flex-end;

	
	opacity: 1;

	height: 18px;
	width: 100%;
	/*border:1px solid purple;*/
	
	transition: opacity 0.5s ease-in-out;
}

#input_navigation_subcontainer{
									position:absolute;
									display: flex;
									flex-flow: row-reverse;
									 
									
}



#close_holder,
#back_holder,
#forward_holder
{
	display: flex;
	position: relative;
	cursor: pointer;
}

#close_holder{margin: 0px 0px 0px 0px;}
#forward_holder{margin: 0px 0px 0px 8px;}
#back_holder{margin: 0px 0px 0px 8px;}


#scroll_container,
#arrow_up_container,
#arrow_down_container {
	display:flex;
	justify-content: center;
	align-items: center;
	cursor:pointer;
	
	height: 18px;
	width: 18px;
	
}

#arrow_up_container,
#arrow_down_container {	margin: 5px 0px 5px 0px;}

#close_icon_thin,
#close_icon_fat,
#arrow_up_thin,
#arrow_up_fat,
#arrow_down_thin,
#arrow_down_fat,
#arrow_back_thin,
#arrow_back_fat,
#arrow_forward_thin,
#arrow_forward_fat

{
	display: flex;
	background-size: contain;
	height: 18px;
	width: 18px;
	transition: opacity 0.2s ease-in-out;

}

#close_icon_thin,
#arrow_up_thin,
#arrow_down_thin,
#arrow_back_thin,
#arrow_forward_thin
{
				opacity: 1;
				position: relative;		
}


#close_icon_fat,
#arrow_up_fat,
#arrow_down_fat,
#arrow_back_fat,
#arrow_forward_fat
{
					opacity: 0;
					position: absolute;
}



#close_icon_thin	{ background-image: url(../images/scroller/close_icon_g_50px-50px_thin.png); }
#close_icon_fat		{ background-image: url(../images/scroller/close_icon_g_50px-50px_fat.png);  }

#arrow_up_thin 		{ background-image: url(../images/scroller/arrow_up_icon_g_50px-50px_thin.png);  }
#arrow_up_fat		{ background-image: url(../images/scroller/arrow_up_icon_g_50px-50px_fat.png);	 }

#arrow_down_thin 	{ background-image: url(../images/scroller/arrow_down_icon_g_50px-50px_thin.png);	}
#arrow_down_fat		{ background-image: url(../images/scroller/arrow_down_icon_g_50px-50px_fat.png);	}

#arrow_back_thin 	{ background-image: url(../images/scroller/arrow_back_icon_g_50px-50px_thin.png);	}
#arrow_back_fat		{ background-image: url(../images/scroller/arrow_back_icon_g_50px-50px_fat.png);	}

#arrow_forward_thin 	{ background-image: url(../images/scroller/arrow_forward_icon_g_50px-50px_thin.png);	}
#arrow_forward_fat		{ background-image: url(../images/scroller/arrow_forward_icon_g_50px-50px_fat.png);	}

#close_holder:hover #close_icon_fat{opacity: 1;}
#arrow_up_container:hover #arrow_up_fat {opacity: 1;}
#arrow_down_container:hover #arrow_down_fat {opacity: 1;}
#back_holder:hover #arrow_back_fat{opacity: 1;}
#forward_holder:hover #arrow_forward_fat{opacity: 1;}

#arrow_up_container:active #arrow_up_fat {opacity: 1;}
#arrow_down_container:active #arrow_down_fat {opacity: 1;}





/*
----------------------------------------- mein information imput -------------------------------------------------
*/



#text_presentation_partition{
	position: relative;
	
	display: flex;
	opacity: 1;
	
	
	align-self: center;
	height: 100%;
	width: 100%;
	margin: 0% 10% 0% 10%;
	
	overflow: hidden;
	
}


.text_area{
	position: absolute;
	flex-direction: column;
	
	display: flex;
	opacity: 0;
	
	padding: 5% 0% 10% 0%;
	
	width: 100%;
	z-index: 1;
	transition: opacity 0.5s ease-in-out 0s;
}






.title	{
		display: flex;
		align-self: center;
		line-height: 1.5;
		margin: 0vh 0px 4vh 0px;
}
.text	{
	display: flex;
	flex-direction: column;
}

.text_centered-justified{
	align-self: center;
}

.text_centered{
	text-align: center;
}







.text_block_subholder{
	
	display:flex;
	flex-direction: column;
	margin: 2em;
}


:root 	{--director_signatur_h: 250px;}

#text_img_director_signatur	{
	display: flex;
	position: relative;
	
	background-repeat: no-repeat;
	background-size: contain;
	
	background-image: url(../menu/director/erik_schaufelberger_signature_89px-250px.png);
	
	height: 60px;
	width: inherit;
	
	margin: 2em;
	
}


#submenu_input_block_holder{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	justify-content: center;

}


.block_image_holder{
	display: flex;
	justify-content: center;
		
}


#img_director	{
	display: flex;
	position: relative;
	
	background-repeat: no-repeat;
	background-size: contain;
	
	margin: 2em;
	

	
}


#img_director
{
	height: calc(640px/3);
	width: calc(480px/3);
	background-image: url(../menu/director/erik_schaufelberger_portrait_480px-640px.png);
}







.text_for_blocks	{
	display: flex;
	flex-direction: column;
	
}

/*
----------------------------------------- Text on Menu -------------------------------------------------
*/
.text_20pt{font-size:14pt;}
.text_20pt_bold{font-size:14pt; font-family:'KozGoPro-Heavy';}

.flex_text{display:flex;}

.text_10pt{font-size:10pt;}
.text_10pt_bold{font-size:10pt; font-family:'KozGoPro-Bold';}




h1	{ font-size:16pt; font-family:'KozGoPro-Medium';}

.text_h_140 {line-height: 140%;}

.highlight {margin: 3px 0px 0px 0px;}


.link{
	display: flex;
	position: absolute;
	opacity: 1;
}

.link_hover{
	display: flex;
	opacity: 0;
	padding: 2px 0px 0px 0px;
}


.link_container{
	display: flex;
	cursor: pointer;
}

.link_container_centered{
	justify-content: center;
	align-items: center;
}


.link_container:hover .link_hover{opacity:1}
.link_container:hover .link{opacity:0}	

.link_centered{justify-content: center;}




.text_holder{
	display: flex;
	padding: 0px 0px 5px 0px;
}

.text_group{
	display: flex;
	flex-direction: column;
	margin: 0px 0px 0px 0px; 
}

.text_group_centered{
	width: 100%;
	justify-content: center;
	align-items: center;
}

.text_container{
	display: flex;
}

.text_container_centered{
	text-align: center;
}


.group_title_container{
	display: flex;
	margin: 0px 0px 6px 0px;   /* 0px 0px 6px -20px */
	padding: 10px 0px 0px 0px;	
	border-bottom: 1px solid var(--gray);
}

.group_title_container_centered{
	width: 100%;
	justify-content: center;
}

.group_title{
	padding: 0px 0px 0px 0px;
	line-height: 1.5;
}



/*
----------------------------------------- Backgorund Logo Area BIG SMAL END-------------------------------------------------
*/