/**
 * Theme Name: Wehrgasse
 * Template:   weta
 * Version: 1.0
 * Author: Juma Hauser, Roman Richter, Heli Ammann
 */
 
@font-face {
	font-family:Yeseva One;src:url(fonts/YesevaOne-Regular.eot);src:url(fonts/YesevaOne-Regular.eot?#iefix) format("embedded-opentype"),url(fonts/YesevaOne-Regular.woff2) format("woff2"),url(fonts/YesevaOne-Regular.woff) format("woff"),url(fonts/YesevaOne-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-stretch:normal;
}
@font-face {
	font-family:Poppins;src:url(fonts/Poppins-Regular.eot);src:url(fonts/Poppins-Regular.eot?#iefix) format("embedded-opentype"),url(fonts/Poppins-Regular.woff2) format("woff2"),url(fonts/Poppins-Regular.woff) format("woff"),url(fonts/Poppins-Regular.ttf) format("truetype");font-weight:500;font-style:normal;font-stretch:normal;
}
body.intro {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background-color:#000;
}
#full-image {
	position:fixed;
	width:100%;
	height:100%;
	overflow:hidden;
}
#full-image-wrapper {
	width:100%;
	height:100%;
	overflow:hidden;
}
#full-image img#first {
	width:100%;
	height:auto;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-1;
	animation: ease-in-out;	
	animation: firstimg 25s infinite;
}
#full-image img#second {
	width:100%;
	height:auto;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-2;
	animation: ease-in-out;	
	animation: secondimg 25s infinite;
}
#full-image img#third {
	width:100%;
	height:auto;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-3;
	scale:1.25;
	animation: ease-in-out;
	animation: thirdimg 25s infinite;
}
@-webkit-keyframes firstimg {
  0% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
  10% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
  25% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:1;
  }
  33% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:0;
  }
  50% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:0;
  }
  67% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:0;
  }
  75% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:0;
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
}
@-webkit-keyframes secondimg {
  0% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:0;
  }
  25% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
	opacity:1;
  }
  33% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
	opacity:1;
  }
  50% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
	opacity:1;
  }
  67% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:0;
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:0;
  }
}
@-webkit-keyframes thirdimg {
  0% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:0;
  }
  33% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:0;
  }
  50% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
  67% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
  75% {
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
	opacity:1;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-50%, -50%);
    transform: scale(1.25) translate(-50%, -50%);
	opacity:0;
  }
}
#intro-text {
	position:absolute;
	z-index:99;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#first-text {
	font-family: 'Yeseva One', sans-serif;
	font-weight:400;
	font-size: 90px;
	color: #fff;
	margin-bottom: 50px;
	filter: drop-shadow(0px 0px 5px rgb(60,70,51));
	text-align:center;
	letter-spacing:1;
}
#second-text {
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	font-size:42px;
	color:#fff;
	filter: drop-shadow(0px 0px 5px rgb(60,70,51));
	text-align:center;
	white-space: nowrap;
	letter-spacing:0.3;
}
#continue {
	position:absolute;
	z-index:99;
	left:50%;
	transform: translateX(-50%);
	bottom:5%;
}
#continue span a,
#continue span a:visited {
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	font-size:26px;
	padding:5px 10px;
	background-color:#cbd6c7;
	text-decoration:none;
	color:#80966d;
	border-radius:10px;
	-webkit-transition: all .5s ease-out,all .5s ease-out;
	-moz-transition: all .5s ease-out,all .5s ease-out;
	-o-transition: all .5s ease-out,all .5s ease-out;
	-ms-transition: all .5s ease-out,all .5s ease-out;
	transition: all .5s ease-out,all .5s ease-out;
}
#continue span a:hover,
#continue span a:active {
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	font-size:26px;
	padding:5px 10px;
	background-color:#80966d;
	text-decoration:none;
	color:#fff;
	border-radius:10px;
}
@media only screen and (max-width: 1240px){
#full-image img#first {
	width:auto;
	height:100%;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-1;
	animation: ease-in-out;	
	animation: firstimg 25s infinite;
}
#full-image img#second {
	width:auto;
	height:100%;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-2;
	animation: ease-in-out;	
	animation: secondimg 25s infinite;
}
#full-image img#third {
	width:auto;
	height:100%;
	top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index:-3;
	scale:1.25;
	animation: ease-in-out;
	animation: thirdimg 25s infinite;
}
#first-text {
	font-size: 7.5vw;
}
#second-text {
	font-size:4.75vw;
}
}
@media only screen and (max-width: 440px){
#first-text {
	font-size: 10vw;
	white-space: nowrap;
}
#second-text {
	font-size:6vw;
	white-space: wrap;
}
}
#audio {
	position: absolute;
	z-index: 999;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
}
#audio svg {
	width: 100%;
	height: auto;
}
#audio svg:hover {
	cursor:pointer;
}
#audio svg #speaker {
	fill: #fff;
	stroke:none;
}
#audio svg #wave {
	fill: none;
	stroke:#fff;
	stroke-width:15px;
	display:none;
}
#audio.audio-on-off svg #wave {
	fill: none;
	stroke:#fff;
	display:block;
}