@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'Creepster';
    src: url('Creepster-Regular.woff2') format('woff2'),
        url('Creepster-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Regular.woff2') format('woff2'),
        url('OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Bold.woff2') format('woff2'),
        url('OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

		body{font-size:2vw;background-color: #F5D700;font-family: "Arial" ;margin: 0;padding: 0;font-family: 'Open Sans';    font-weight: normal;    font-style: normal;}
		strong{font-weight: bold;}
		.fl{float:left;}
		.fr{float:right;}
		.cf{clear:both;}
		.tl{text-align:left;}
		.tc{text-align:center;}
		.tr{text-align:right;}
		#topSection{font-size:1vw;position: relative;margin-top:0em;margin-bottom:-37em;width:100em;height:84em;border: 0px #111 solid;overflow: hidden;}
		#topSection div {transition: 0.1s;}
		#topSection div img{width:100%;}
		#topSection div div img{width:100%;}
		
		.title1{ 			position: absolute;       top: 1.6em;  			font-size: 4em;			font-family: 'Creepster';			font-weight: normal;			font-style: normal;			width:100%;			text-align: center;		line-height: 0.9em;}
		h2{font-family: 'Creepster';			font-weight: normal;			font-style: normal;		}
		.text1{		position: absolute;       top: 36em;  			font-size: 1em;width: 66vw;margin: 0 17vw 0 17vw;}
		.ball{position: absolute; width: 1em!important;    top: 14.2em;    left: 80.7em;animation-name: ball;animation-duration: 5s;animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation-timing-function: linear;}
		
		
		.topVideo{position: absolute; width:100em;top:-7em;height:56.4em;background-color: #000;}
		.homeVideo {    position: absolute;    top: 0px;    width: 100vw;    height: 56.4vw; opacity: 0.4;}
		.vmargin{margin-top: 1em;}
		
		.logoOut .logoCircle{position: absolute;     width: 14.5em;    top: 6.4em;    left: 42.8em;    height: 20em;animation-name: none;}
		.logoOut .cirlceBottom{position: absolute;        width: 6.7em;    top: 17.7em;    left: 46.6em;animation-name: none;}
		.logoOut .cirlceZ{position: absolute;       width: 6.7em;top: 9.1em;left: 46.6em;overflow: hidden;}
		.logoOut .cirlceZ img{animation-name: none;}
		.logoOut .zombie{position: absolute;           width: 22.7em;    top: 22.4em;    left: 38.6em;animation-name: none;}
		.logoOut .zombieDots{position: absolute;      width: 15.7em;    top: 22.4em;    left: 42.6em;animation-name: none;}
		.logoOut .busters{position: absolute;           width: 22.7em;    top: 27.7em;    left: 38.6em;animation-name: none;}
		.logoOut .aa{position: absolute;        width: 3.5em;   top: 38.9em;    left: 30.3em;animation-name: none;}
		.logoOut .deadWithIdea{position: absolute;          width: 12.9em;    top: 38.9em;    left: 36.3em;animation-name: none;}
		.logoOut .story{position: absolute;       width: 18.7em;    top: 38.8em;    left: 51.3em;animation-name: none;}
		
		.logoIn .logoCircle{position: absolute;     width: 14.5em;    top: 6.4em;    left: 42.8em;    height: 20em;animation-name: logoCircle;animation-duration: 3s;animation-fill-mode: backwards; animation-iteration-count: 1;}
		.logoIn .cirlceBottom{position: absolute;        width: 6.7em;    top: 17.7em;    left: 46.6em;animation-name: cirlceBottom;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .cirlceZ{position: absolute;       width: 6.7em;top: 9.1em;left: 46.6em;overflow: hidden;}
		.logoIn .cirlceZ img{animation-name: zAnim;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .zombie{position: absolute;           width: 22.7em;    top: 22.4em;    left: 38.6em;animation-name: zombie;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .zombieDots{position: absolute;      width: 15.7em;    top: 22.4em;    left: 42.6em;animation-name: zombieDots;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .busters{position: absolute;           width: 22.7em;    top: 27.7em;    left: 38.6em;animation-name: busters;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .aa{position: absolute;        width: 3.5em;   top: 38.9em;    left: 30.3em;animation-name: aa;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .deadWithIdea{position: absolute;          width: 12.9em;    top: 38.9em;    left: 36.3em;animation-name: deadWithIdea;animation-duration: 3s;animation-iteration-count: 1;}
		.logoIn .story{position: absolute;       width: 18.7em;    top: 38.8em;    left: 51.3em;animation-name: story;animation-duration: 3s;animation-iteration-count: 1;}
		
		em;height:56.4em;background-color: #000;}
		
		.eyeGrowIn{transform: scale(1) rotate(-180deg); }
		.eyeGrowOut{transform: scale(0) rotate(0deg);}
		
		.anTrig {margin-left: 10em;width:40em!important;height:1px;overflow:visible;/*background-color:#FF555599;*/border-top:0px solid ;padding-bottom:20em;position: relative;left:0; top:-20em;}
		
		#section1,#section2,#section3,#section3 {position: absolute; width:100%;}
		#section1 div img, #section2 div img{width:100%;}
		#section2 {background-color: #000;position: absolute;top:98.7em;color:#F5D700;z-index:1;}
		#section2 h1{font-size: 4em;font-family: 'Creepster';font-weight: normal;font-style: normal;width:100%;text-align: center;	margin: 0.5em 0em 0.1em 0em;}		
		#section2 h2{font-size: 1.5em;font-family: 'Open Sans';font-weight: normal;font-style: normal;width:100%;text-align: center;color:#F5D700;font-weight: bold;padding: 0;margin: 0;    position: relative;
    top: -2.6em;}
		#section2 h3{font-size: 2.25em;font-family: 'Creepster';font-weight: normal;font-style: normal;width:100%;text-align: center;color:#FFF;padding: 0;margin: 0 0 -1em 0;    position: relative;
    top: -1.8em;}
		#section3 {/*background-color: #F5D700;*/position: absolute; top: 263.2em;color:#000;}
		.line1{position: absolute;top:-0.4em;width:100vw;}
		.line1 img{width:100%;}
		.line2{position: absolute;top:-1em;width:100vw;}
		.video{position: relative;    top: 0em;    left: 8em;    width: 34em;    height: 25em;filter: drop-shadow(0.5em 0.5em 0px #F5D700);margin-bottom: -1em;z-index:20;}
		.videoplay{position: relative;       top: -17.5em;   left: 23.1em;   width: 5em;z-index: 10;height:0;overflow: visible;z-index: 21;}
		#vid7{position: absolute;    top: 16em;    left: 8em;    width: 34em;filter: drop-shadow(0.5em 0.5em 0px #000);margin-bottom: 10em;}
		.video0play{position: relative;       top: 22.8em;   left: 23.1em;   width: 5em;}
		#eye1{position: absolute;       top: 12em;   left: 0em;   width: 100%;transition: 0s; transform-origin: 50% 50%;z-index: 1;}
		#eye1:hover{transition: 0.2s; transform:rotate(360deg);}
		.container {	border:0px #F11 solid;position: absolute;       top: -5em;		  height: 56vw;		  width: 100vw;		  display: block;z-index: 3;	}
		.box {		  border: 0px solid red;		  height: 4em;		  width: 4em;		  position: absolute;			left:37em;		    transform: rotate(5deg);z-index: 2;}
		.ray{position: absolute;      top: 65em;    left: 33em;    width: 13em;  }
		.vPlayerInline{position: absolute;top:0em;left:0em;width:34em; height: 19em;background-color: #222;}
		.vPlayer{position: fixed;top:1vw;left:10vw;width:80vw; height: 45vw;background-color: #111;transform: scale(0.05);transition: 0.5s;display: none; filter:drop-shadow(0.2em 0.2em 3px #F5D700);}
		#videoPlayerBG{position: fixed;top:0vw;left:0vw;width:100vw; height: 100vh;background-color: #111;opacity: 0.33; display: none;}
		.videoPlayerBGclose{position: fixed;top:1vw;left:1vw;width:100vw; height: 100vh;color: #FFF;opacity: 1;cursor: pointer;}
		.footer{width:100vw;}
		
		.footerIn img{width:100vw;height:auto;transition: 0.75s;transform: scaleY(0.1);transform-origin: 50% 0%;}
		.footerOut img{width:100vw;height:auto;transition: 0.75s;transform: scaleY(1);transform-origin: 50% 0%;}
		.footerOut ,.footerIn {height:10em;position: absolute;    top: -20.5em;}
		.footerEye {    width: 4em;    position: absolute;    top: 15em;    left: 15.4em;}
		.footerEye img{width:100%;/*animation-name: footerEye;animation-duration: 10s;animation-iteration-count: infinite;    transform-origin: 44% 50%;*/}
		.footerTitle{position: absolute;top:19em;width: 100vw;}
		#section3 h1{font-size: 5.2em;font-family: 'Creepster';font-weight: normal;font-style: normal;width:100%;text-align: center;    line-height: 1em;	}
		.footerText{position: absolute;       top: 40em; text-align: center; font-size: 0.9em;width: 70vw;margin: 0 15vw 0 15vw;z-index: 10;}
		.button2{background-color: #F5D700;color:#000;border:0.1em #F5D700 solid;font-size:1.5em;text-decoration: none;display: inline-block;padding: 0.1em 0.75em 0.1em 0.75em;border-radius: 0.5em;font-family: 'Creepster';transition: 0.75s;margin: 1em;}
		.button2:hover{background-color: #222;color:#F5D700;border:0.1em #F5D700 solid;transform: scale(1.05);/*filter: drop-shadow(0.1em 0.1em 3px #F5D700)*/}
		.button1{background-color: #000;color:#F5D700;border:0.1em #F5D700 solid;font-size:1.5em;text-decoration: none;display: inline-block;padding: 0.1em 0.75em 0.1em 0.75em;border-radius: 0.5em;font-family: 'Creepster';transition: 0.75s;margin: 1em;}
		.button1:hover{background-color:#F5D700;color: #222;border:0.1em #111 solid;transform: scale(1.05);/*filter: drop-shadow(0.1em 0.1em 3px #444)*/}
		.eye4{position: absolute;top: 35em;  left: 15em; width: 4em;	}
		.eye4 img{width:100%;/*animation-name: footerEye2;animation-duration: 10s;animation-iteration-count: infinite;  transform-origin: 44% 50%;*/}
		.eye3{position: absolute;top:-2em;left:28em;width:4em;	}
		.eye3 img{width:100%;/*animation-name: footerEye2;animation-duration: 2s;animation-iteration-count: infinite;  transform-origin: 44% 50%;*/}
		#section4 {position: absolute;top:316em;width:100vw;background-color: #000!important;text-align: center;height:23em;}
		#section4 h1 {font-size: 5.2em;font-family: 'Creepster';font-weight: normal;font-style: normal;width:100%;text-align: center;color:#F5D700;margin: 0.6em 0 0.4em 0;	}
		#section4 div {color:#FFF;text-align: center;	}
		#section4 .footerOut,#section4 .footerIn {top:0em;}
		.thankYouText{position: absolute;  top: 73em;width:100vw;text-align: center;font-size: 0.7em;color: #000!important;}
		.aliveLogo{position: absolute;  top: 45em;width:100vw;text-align: center;}
		.aliveLogo img{width:7em;}
		#sectionFooter{position: absolute;  top: 369em;border-top:0.2em solid #FFF;width:100%;}
		.socialIcons {margin: 2em 15vw 1em 15vw; }
		.socialIcons img{width:1em;margin:0 0.8em 0 0em; }
		.socialIcons a{transition: 0.4s; }
		.socialIcons a:hover{filter:brightness(1);}
		.footerText2 {margin: 2em 15vw 1em 15vw;position: absolute;top:3em; width: 70vw;}
		.footerText2 div{font-size:0.6em;}
		.footerText2 div a{color: #000;text-decoration: none;transition: 0.5s}
		.footerText2 div a:hover{color: #FFF;}

		.cookies{position: fixed;top:100%;width:100%;height: 5vw;margin-top: 0vw;background-color: #000;color: #fff; text-align: center;z-index: 1000;transition: 0.5s;}
		.cookies p{margin: 1.5vw 0 0 0;font-size: 0.6em}
		.cookies a{text-decoration: none;color:#F5D700;transition: 0.5s; }
		.cookies a:hover{color:#BBB; }
		.cookies .cookieButton{text-decoration: none;background-color:#F5D700;color: #000;display:inline-block;padding: 0.2vw 1vw 0.2vw 1vw;margin: 0 1vw 0 1vw;border: 2px #FFF solid;transition: 0.5s;}
		.cookies .cookieButton:hover{background-color:#000;color: #F5D700;;}

		@keyframes footerEye2{0%{transform: scale(1) rotate(0deg);} 50%{transform: scale(1) rotate(60deg);}  100%{transform: scale(1) rotate(0deg);}  }
		@keyframes footerEye{0%{transform: scale(0.5) rotate(0deg);} 50%{transform: scale(1) rotate(-145deg);}  100%{transform: scale(0.5) rotate(0deg);}  }
		@keyframes zombie{0%{opacity: 0;} 10%{opacity: 0;} 20%{opacity: 1;}  }
		@keyframes zombieDots{0%{opacity: 0;} 15%{opacity: 0;} 25%{opacity: 1;}  }
		@keyframes busters{0%{opacity: 0;} 20%{opacity: 0;} 30%{opacity: 1;}  }
		@keyframes cirlceBottom{0%{opacity: 0;} 50%{opacity: 0;} 60%{opacity: 1;}  }
		@keyframes logoCircle{0%{transform: scale(0);} 35%{transform: scale(0);} 45%{transform: scale(1);} 100%{transform: scale(1);}  }
		@keyframes zAnim{0%{opacity: 0;transform: translate(0em, 12em);} 60%{opacity: 1;transform: translate(0em, 12em);} 80%{opacity: 1;transform: translate(0em, 0em);}  }  
		
		@keyframes aa{0%{opacity: 0;} 60%{opacity: 0;transform: scale(1.4);} 70%{opacity: 1;transform: scale(1);}  }
		@keyframes deadWithIdea{0%{opacity: 0;} 70%{opacity: 0;transform: scale(1.4);} 80%{opacity: 1;transform: scale(1);}  }
		@keyframes story{0%{opacity: 0;} 80%{opacity: 0;transform: scale(1.4);} 90%{opacity: 1;transform: scale(1);}  }

		@media only screen and (max-width: 990px) {
			
			body{font-size:4vw;overflow-y: auto;overflow-x: hidden;}
			#vid7{    left: 1em;    width: 23em;}
			.vPlayerInline {   width: 23em;height: 14em;}
			.video0play {   top: 19.8em;	left: 10.1em;}
			.text1 {top: 30em;    width: 90vw;	margin: 0 5vw 0 5vw;}
			.ray {left: 11em;}
			#section2 {top: 87.7em;}
			.video {   width: 23em;height: 20em;left: 1em;}
			.videoplay {top: -15.5em;left: 10.1em;}
			.box{    left: 20em;top:-5em;}
			.anTrig {width: 15em!important;}
			#section3 {top: 229.2em;}
			.eye3 {	left: 19em;}
			.anTrig{border: 0px solid #000;}
			.footerEye {    top: 9em;				left: 7.4em;}
			.footerTitle {top: 13em;}
			.footerText {  width: 90vw;margin: 0 5vw 0 5vw;}
			#section4 {	top: 284em;}
			.line1 {top: -0.8em;}
			#section4 {height: 32em;}
			#section4 .footerOut, #section4 .footerIn {	top: 10em;}
			.eye4 {top: 40em;}
			#sectionFooter {top: 341em;}
			/*.anTrig {border-top:0px solid ;padding-bottom:10em;position: relative;left:0; top:-10em;}*/
			
		
		}