/* =============================================================================
   Typography
   ========================================================================== */

/* ROOT TEXT */
html 			{ font-size: 18px; line-height: 1.5; letter-spacing: 0.03em;}


/* HEADLINES */
h1 				{ font-size: 2.4rem; line-height: 1.1; }							/* Seitentitel */ 
h2 				{ font-size: 1.4rem; line-height: 1.4; }							/* Rubrikentitel */ 
h3 				{ font-size: 1.0rem; line-height: 1.4; padding-bottom: 10px; }		/* Absatztitel */ 

/* TEXTE */
.ch_notes,
.ch_notes_title { font-size: 0.9rem; line-height: 1.2; letter-spacing: 1px; }		/* Marginalien 	(0.9) */



/* =============================================================================
   Links
   ========================================================================== */
   
/* NOTES */
.linknotes		{ font-size: 12pt; line-height: 1.2; }			/*Marginalien*/

/* NAVIGATION */
.linknav		{ font-size: 12pt; line-height: 1.2; }			/*Navigation*/

.touch .linknav				{ font-family: 'Gilroy-Regular', Arial, sans-serif; font-size: 2.4rem; line-height: 1.2; }
.touch .linknav:hover		{ }
.touch .linknav:visited 	{ }
.touch .linknav:active		{ }




/* =============================================================================
   Buttons
   ========================================================================== */

   

/* =============================================================================
   Other Elements
   ========================================================================== */



/* =============================================================================
   Embedded Content
   ========================================================================== */




/*-------------------------------*/
/*            Header             */
/*-------------------------------*/

#header{
	position: 			fixed;
	width: 				100%;
	height: 			auto;
	padding: 			3vw;
	z-index: 			1001;

	/*border: 			solid 1px #00F;*/
}
	#header .lrg-logo,
	#header .sml-logo{
		display: 			inline-block;
		width: 				180px;
		height: 			70px;
		
		background-size: 	auto 100%;
		background-position:left bottom;
	    background-repeat:	no-repeat;
		/*border: 			solid 1px #F00;*/
	}
	#header .lrg-logo{
		background-image:	url('../images/stw_logo.png');
	}
	#header .sml-logo{
	    background-image:	url('../images/stw_logo-icon.png');
		background-position:0 bottom;
	}
	#header .sml-logo-white{
	    background-image:	url('../images/stw_logo-icon-white.png');
		background-position:0 bottom;
	}
	#header .bt_back{
		display: 			inline-block;

		float: 				right;
		width: 				30px;
		height: 			45px;
		
		background: 		url("../images/bt_back.svg");
		background-size: 	auto 30px;
		background-position:right bottom;
	    background-repeat:	no-repeat;
		
		/*border: 			solid 1px #F00;*/
	}



/*-------------------------------*/
/*           Footer              */
/*-------------------------------*/

#footer{
	position: 			fixed;
	width:				160px;
	height:				40px;
	float: 				left;
	left: 				calc(-52px + 3vw );
	bottom:				calc( 52px + 3vw );

	-moz-transform: 	rotate(-90deg);
	-ms-transform: 		rotate(-90deg);
	-o-transform: 		rotate(-90deg);
	-webkit-transform: 	rotate(-90deg);
	transform: 			rotate(-90deg);
	
	z-index: 			1002;

	/*border: 			solid 1px #F00;*/
}
#footer #title{
	/*color: #E53012;*/
}
#footer #fields{
	/*color: #E53012;*/
}




/*-------------------------------*/
/*         Slideshow BG          */
/*-------------------------------*/

#home			{ background-image: url('../images/slideshow/heroimage_intro.gif');}
#projekte		{ background-color:	#FFFFFF; }
#leistungen		{ background-color: var(--color3); }
#buero			{ background-color: var(--color3); }
#kontakt		{ background-color: var(--color1); }


.slideshow{
	position:	fixed;
	top:		0;
	left:		0;
	width: 		100vw;
	height: 	100vh;
}
	.slideshow .slide{
		z-index: 	1;
		position: 	absolute;
		
		top: 		0;
		left: 		0;
		width: 		100%;
		height: 	100%;
		
		transition: 		opacity 1s ease-in-out;
		background-position:center center;
		background-repeat:	no-repeat;
		background-size:	cover;
		
		opacity: 	0;
	}
	.slideshow .show {
		opacity: 	1;
	}



/*-------------------------------*/
/*           Sections            */
/*-------------------------------*/

.cd-section {
  	position:	relative;
	min-height:	85vh;
	padding: 	15vh 15vw 0 15vw;

	/*border: solid 1px #0F0;*/
}

#section1{ }
#section2{ min-height: 100vh; }
#section3{ }
#section4{ }
#section5{ }

.cd-scroll-down {
	position:			absolute;
	left: 				calc( 50% - 18px );
	right: 				auto;
	bottom:				3vw;

	/*
	width: 100%;
	display:inline;
	float: left;
	*/
	width: 				50px;
	height: 			50px;
	
	background: 		url("../images/bt_scroll.svg");
	background-size: 	100% auto;
	background-position:center bottom;
    background-repeat:	no-repeat;

	/*
    background-color: red;
    -webkit-mask-image: url("../images/bt_scroll.svg");
    mask-image: url("../images/bt_scroll.svg");
	border: solid 1px #0F0;*/
}



/*-------------------------------*/
/*           Inhalte			 */
/*-------------------------------*/


.cd-content {
  	position:			relative;
	padding: 			30vh 15vw 0 15vw;
	background-color: 	var(--color3);	
	float: 				left;
}

/* PROJEKTE */
#section2 {  }
	.projektGallery{
		position: absolute;
		width: 100%;
		left: 0;
		top: 30vh;

		/*width: calc(100% + 30vw); 
		left: -15vw;*/
		/*background-color: 	var(--color3);*/
	}


/* IMPRINT & DATENSCHUTZ */