@charset "UTF-8";
/* CSS Document */

:root {
	--color-light-shades: #F7F0F2;
	--color-dark-shades: #3D3938;
	--color-light-accent: #8FA9AB;
	--color-dark-accent: #8D7053;
	--color-main-brand: #C3922C;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
}

.light-shades{
	background-color: var(--color-light-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
}

.dark-accent{
	background-color: var(--color-dark-accent);
}

.section{
	padding-bottom: 10vh;
	min-height: 50vh;
}

.headline{
	position: relative;
	top: -2vh;
	left: 5vw;
	background-color: var(--color-main-brand);
	color: var(--color-light-shades);
	padding-left: 5px;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
}

.headline2{
	position: relative;
	top: -2vh;
	left: 5vw;
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
	padding-left: 5px;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);

}

h5{
	padding: 3px;
}

a{
	color: var(--color-main-brand);
}

.content{
	margin-left: 5vw;
}

.anchor{
	position: relative; 
	top: -25vh;
}

.background{
	overflow: hidden;
}

.background img{
	width: 100%;
	height: auto;
}

@media (min-width:769px){
	.background img{
	margin-top: -40vh;
	}
} 

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

body{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: var(--color-dark-shades);
	margin: 0; 
	padding: 0;
}



#headmenu{
	border-bottom: .5px solid var(--color-dark-shades);
	padding-top: 3vh;
	display: flex;
	
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);

}

@media (min-width:769px){
	#headmenu{
		padding-top: 0;

	}
} 

#logo{
	width: 20vw;
	float: left;
	padding: 2vh;
    animation: scale1 0.05s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes scale1 {
  to {
    	width: 10vw;
		height: auto;
  }
}


#mainmenu{
	width: 80vw;
	float: left;	
	
    animation: scale2 0.05s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes scale2 {
  to {
    width: 90vw;
	height: auto;
  }
}

@media (max-width:960px){
	#logo{
		width: 80vw;
		float: left;
		padding: 2vh;
		animation: scale3 0.05s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
	
	#mainmenu{
		width: 20vw;
		float: left;	

		animation: scale4 0.05s linear infinite;
		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
	}	
}	 

@keyframes scale3 {
  to {
    width: 40vw;
	height: auto;
  }
}

@keyframes scale4 {
  to {
    width: 60vw;
	height: auto;
  }
}


#mainmenu .container-fluid{
	justify-content: flex-end;
}

.navbar{
	
}

.navbar-brand{
	color: var(--color-main-brand);
}

.nav-link{
	color: var(--color-dark-shades);
}

.nav-link:hover{
	color: var(--color-main-brand);	
}

.offcanvas{
	color: var(--color-light-shades);
	background-color: var(--color-main-brand);
	max-width: 70%;
}

.offcanvas-logo{
	padding: 20px;
	border: 1px solid var(--color-dark-shades);
}


#mainpic{
	height: 75vh;
	background-image:url("https://www.ftbau.tirol/images/bus.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: center center; 
	background-size: 100% auto;
}

@media (max-width:960px){
	#mainpic{
	height: 65vh;
	background-image:url("https://www.ftbau.tirol/images/bus.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: top center; 
	background-size: auto 100%;
	}
} 

#intro{

	
}

#intro a{
	text-decoration: none;
}

#intro .teaser{
	color: var(--color-dark-shades);
	background-color: var(--color-light-shades);
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 2vh;
	width: 50%;
	
	animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
}

@keyframes fadeInAnimation {
    0% {
        position: relative;
		left: 110vw;
    }
    100% {
        position: relative;
		left: 0;
     }
}

#intro .teaser1{
	margin-left: 5vw;
}

#intro .teaser2{
	margin-left: 10vw;
}

#intro .teaser3{
	margin-left: 15vw;
}

#intro .teaser4{
	margin-left: 20vw;
}

#intro .teaser5{
	margin-left: 25vw;
}

#socialsmobile{
	height: 10vh;
	position: fixed;
	bottom: 0;
	width: 100%;
}

#introcontact{
	color: var(--color-light-shades);
	border: 2px solid var(--color-light-shades);
	border-radius: 10px;
	text-align: center;
	padding: 20px;
	
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
}

#pic1{
	height: 40vh;
	background-image:url("https://www.ftbau.tirol/images/hintergrund_1.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: top center; background-size: auto 140%;
}

@media (min-width:769px){
	#pic1{
		height: 60vh;
	}
} 

#portfolio .portfolio-section{
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
	padding: 2vh;
	margin-top: 5vh;
	margin-bottom: 10vh;
	border-radius: 10px;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
}

#portfolio .portfolio-section h5{
	color: var(--color-dark-shades);
	background-color: var(--color-light-shades);
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 2vh;
	margin-left: -2vw;
	padding-left: 2vw;
	width: 40%;
}

#portfolio .contactus{
	position: relative;
	bottom: -20vh;
	margin-top: -15vh;
	color: var(--color-light-shades);
	padding: 5vw;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
}

#portfolio .btn-primary{
	color: var(--color-light-shades);
	background-color: var(--color-main-brand);
	border-color: var(--color-main-brand);
}

#portfolio .btn-primary:hover{
	margin-bottom: 2px;
}

#pic2{
	height: 40vh;
	background-image:url("https://www.ftbau.tirol/images/hintergrund_2.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: bottom center; background-size: auto 130%;
}

@media (min-width:961px){
	#pic2{
		height: 60vh;
	}
} 

#referenzen{
	
}

#referenzen .referenz-items{
	padding-left: 5vw;
}

#referenzen .referenz-item{
	margin-bottom: 3vh;
	height: 30vh;
	overflow: hidden;
	border: 2px solid var(--color-light-shades);
	border-radius: 5px;
	
}

#referenzen .referenz-item img{
	height: 100%;
	width: auto;
	position: relative;
    	left: -10%;

}

#pic3{
	height: 40vh;
	background-image:url("https://www.ftbau.tirol/images/hintergrund_3.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: top center; background-size: auto 130%;
}

@media (min-width:961px){
	#pic3{
		height: 60vh;
	}
} 

#about .picture1{
	width: 40vw;
	height: auto;
	margin: 2vh;
	float: right;
	
}

#kontaktformular iframe{
	width: 100%;
	height: 220vh;
}

#footer{
	color: var(--color-light-shades);
	padding-top: 5vh;
}

#footer .footer_social{
	width: 25%;
	float: left; 
}

#footer .footer_social p{
	font-size: 2em;
}

#footer .footer_social a{
	color: var(--color-light-shades);
}

#socialsmobile{
	height: 7vh;
}

.socialsmobileicon{
	width: 25%;
	float: left;
}

.socialsmobileicon p{
	text-align: center;
	font-size: 2em;
}

.socialsmobileicon a{
	color: var(--color-light-shades);
}


@media (max-width:960px){
	#mainpic, #pic1, #pic2, #pic3{
		background-attachment: inherit;
		  background-position: center center; background-size: auto 120%;
	}
	
	#about .picture1{
	width: 100%;
	margin: 0;
	margin-bottom: 2vh;
	

	
}
}

#arrow-up{
	width: 7vh;
	height: 7vh;
	border-radius: 10px;
	border: 1px solid var(--color-dark-shades);
	
	position: fixed;
	bottom: 8vh;
	right: 3vh;
	
	background-color: var(--color-light-shades);
}

#arrow-up p{
	color: var(--color-dark-shades);
	font-size: 2em;
	text-align: center;
	font-weight: 900;
	
}