:root{
	--black:#000000;
	--dark:#404040;
	--white:#FFFFFF;
	--green:#5f9600;
	--orange:#f9941b;
	--yellow:#f6b426;
	--red:#ff9595;
}
a,a:hover{text-decoration:none;}

#open{background:url("/css/imgs/bg1.jpg") no-repeat center center / cover; position:relative; overflow-x:clip; }
#open .glass{background:var(--green); position:absolute; left:100%; top:0; width:50%; height:100%; z-index:1; opacity:.8; transition:all 1s;}
#open .container{position:relative; z-index:2;}

#open .imgs{min-height:540px;position:relative;}
#open .imgs .logo{height:50px; position:absolute; right:10px; top:-100px; transition:all 1s; transition-delay:1.5s; }
#open .imgs img:not(.logo){height:380px; position:absolute; left:0; bottom:0; z-index:1; transition:all 4s;}
#open .imgs img[alt="car4"]{bottom:50%; left:-220%;}
#open .imgs img[alt="car3"]{bottom:100%; left:-100%;}
#open .imgs img[alt="car2"]{bottom:100%; left:-100%; transition-delay:.4s;}
#open .imgs img[alt="car1"]{bottom:calc(100% - 200px); left:calc((100% + 75px) * -1); z-index:2; transition-delay:1.5s;}
#open .infos{padding-left:1.5rem;}
#open .infos *{color:var(--white);}
#open .infos h2{position:relative; top:-250px; transition:all 1s; transition-delay:1s; margin-bottom:1rem; text-align:right;}
#open .infos p{opacity:0; transition:all 1s; transition-delay:1.5s; line-height:1.2; margin-bottom:0; text-align:right;}
#open .infos p strong{text-decoration:underline; color:var(--yellow);}
#open .infos img{max-height:50px; margin-top:3rem; opacity:0; transition:all 1s; transition-delay:2s;}


#open.active .glass{left:50%;}
#open.active .imgs .logo{top:10px;}
#open.active .imgs img[alt="car4"]{bottom:-80px; left:-25px; }
#open.active .imgs img[alt="car3"]{bottom:40px; left:255px; }
#open.active .imgs img[alt="car2"]{bottom:200px; left:0;}
#open.active .imgs img[alt="car1"]{bottom:-100px; left:75px; z-index:2;}
#open.active .infos h2{top:0;}
#open.active .infos p{opacity:1;}
#open.active .infos img{opacity:1;}

#atention{background:var(--orange); padding:4rem 0; opacity:0; transition:all 1s;}
#atention.active{opacity:1;}
#atention h3{color:var(--white); font-size:2.2rem; text-transform:uppercase;}
#atention p{color:var(--white); margin-bottom:3rem;}
#atention a{color:var(--white); padding:.5rem;background:url("/css/imgs/transport-icon.svg") no-repeat 93% center / 40px;  border:solid 1px var(--white); padding-right:60px;}

#info{background:url("/css/imgs/bg2.jpg") no-repeat center center / cover; position:relative; overflow:hidden; opacity:0; transition:all 1s;}
#info .glass{background:var(--green); width:50%; height:100%; left:-50%; top:0; z-index:2; position:absolute; opacity:.8;  transition:all 1s;}
#info img{position:absolute; left:calc(60% - 100px); top:50%; height:100px; z-index:1; transition:all 20s; opacity:1; transition-delay:1s;}
#info .container{position:relative; z-index:2;}
#info .text{min-height:800px;opacity:0; transition:all 1s; transition-delay:1s;}
#info .text *{text-shadow: 0px 0px 5px rgba(255, 255, 255,.4); color:var(--white);}
#info .text h2{margin-bottom:3rem;}
#info .text .btn:not(.m){color:var(--white); padding:.5rem; border:solid 1px var(--white); border-radius:0; }
#info .text .btn.m{color:var(--white); padding:.5rem;background:url("/css/imgs/transport-icon.svg") no-repeat 93% center / 40px;  border:solid 1px var(--white); padding-right:60px; border-radius:0;}

#info.active{opacity:1;}
#info.active .glass{left:0;}
#info.active img{height:0; left:10%; top:30%%; opacity:0;}
#info.active .text{opacity:1;}

#form{background:var(--green); opacity:0; transition:all 1s;}
#form *{color:var(--white);}
#form h2{text-align:center; margin:0; padding:3rem 0;}
#form h4{text-align:center; margin:0;}
#form .box{}
#form .box p{font-size:.8rem; margin:0; padding:0;}
#form .box p.error{color:var(--red);}
#form .box input{color:var(--dark);}
#form .box.error{}
#form .box.error input{border-color:var(--red);}


#form .form input[type=number]::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
#form .form input[type=number] { -moz-appearance: textfield;}
#form .form{padding:2rem; position:relative; margin-bottom:3rem;}
#form .form hr{width:50%; margin:1rem 25%; padding:0; height:2px; background:var(--white); border:none; opacity:.8;}
#form .form input{border-radius:0;}
#form .form textarea{height:120px; resize:none; border-radius:0; color:var(--black);}
#form .form .check{margin-top:.5rem;}
#form .form .check *{float:left;}
#form .form .check p{font-size:.8rem; padding-top:2px;}
#form .form .check p a{float:none; text-decoration:underline;font-size:.8rem;}
#form .form .check input{width:20px; height:20px; margin:3px 5px 0 0; cursor:pointer;}
#form .form .btns{margin-top:2rem;}
#form .getForm{border-right:solid 1px var(--white); }
#form .form .btn{background:var(--white); color:var(--green); border-radius:0; border:solid 1px var(--white); transition:all .5s;}
#form .form .btn:hover{background:transparent; color:var(--white);}
#form .form .checkerror{color:var(--red);}

#form .getForm .stickers{ padding:1rem 0 3rem;}
#form .getForm .stickers h5{text-align:center; margin-bottom:3rem;}
#form .getForm .stickers .card{height:165px; background:no-repeat center center / contain; border:solid 1px var(--white); margin:.75rem 0; border-color:var(--green); transition:all .5s; cursor:pointer; position:relative; border-radius:0;}
#form .getForm .stickers .card .ok{position:absolute; left:0; top:0; width:100%; height:100%; background:url("/css/imgs/ok.svg") no-repeat center center / 100px; opacity:.6; opacity:0; transition:all .5s; }
#form .getForm .stickers .card.active{border-color:var(--white);}
#form .getForm .stickers .card.active .ok{opacity:.8;}

#form .sendForm{}
#form .sendForm form{position:relative; border:solid 8px var(--white); text-align:center; width:460px; margin:5px auto; height:580px;}
#form .sendForm form input{position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; cursor:pointer; opacity:0;}
#form .sendForm form input[type="file"]{z-index:2;}
#form .sendForm form img{max-height:220px;margin-bottom:4rem;}
#form .sendForm form p{font-weight:bold; font-size:1rem; line-height:2.5;}

#form .sendForm .img{text-align:center; height:400px; width:100%; margin:1rem auto; position:relative;}
#form .sendForm .img .img-show{width:100%; height:100%; background:no-repeat center center / contain; }
#form .sendForm .btns .nop{background:transparent; border:none; font-weight:bold; padding:5px;}
#form .sendForm .btns .col-md-6:first-of-type{text-align:left;}
#form .sendForm .btns .col-md-6:last-of-type{text-align:right;}

#form .message{}
#form .message .bg{height:460px;}
#form .message .info h3{margin-bottom:2rem;}
#form .message.ok .bg{background:url("/css/imgs/boy.svg") no-repeat center 460px / auto 460px; transition:all 5s;}
#form .message.no .bg{background:url("/css/imgs/boy_no.png") no-repeat center 460px / auto 460px; transition:all 5s;}
#form .message.active.ok .bg{background:url("/css/imgs/boy.svg") no-repeat center 35px / auto 460px; }
#form .message.active.no .bg{background:url("/css/imgs/boy_no.png") no-repeat center 35px / auto 460px; }

#form .awwward{margin:0 auto 3rem;}
#form .awwward h4{margin-bottom:3rem;}
#form .awwward img{max-width:100%; width:100%;}

#form.active{opacity:1;}

#sponsors{padding:3rem 0; opacity:0; transition:all 1s;}
#sponsors h2{text-align:center; margin:0; padding-bottom:3rem;}
#sponsors .card{height:200px; border:none; border-radius:0; margin:0; text-align:center; flex-direction:initial; transform:scale(0); transition:all 1s;}
#sponsors .card img{max-height:190px; max-width:190px;}

#sponsors .row > div:nth-child(1) .card{transition-delay:.5s;}
#sponsors .row > div:nth-child(2) .card{transition-delay:.75s;}
#sponsors .row > div:nth-child(3) .card{transition-delay:1s;}
#sponsors .row > div:nth-child(4) .card{transition-delay:1.25s;}
#sponsors .row > div:nth-child(5) .card{transition-delay:1.5s;}
#sponsors .row > div:nth-child(6) .card{transition-delay:1.75s;}

#sponsors.active{opacity:1;}
#sponsors.active .card{transform:scale(1);}

footer{background:var(--white); padding:3rem 0 0;}
footer *{color:var(--black);}
footer img{max-height:55px;}
footer ul{margin:1.5rem 0 0; padding:0; list-style:none;}
footer ul li{padding:.5rem 0;}
footer a:hover{text-decoration:underline; color:var(--black);}
footer .social{text-align:right;}
footer .social h4{font-size:1.6rem; margin-bottom:1.5rem;}
footer .social img{max-height:40px;}
footer > p{background:var(--orange); text-align:center; margin:0; padding:1rem 0; color:var(--dark); margin-top:3rem;}

.mobil_photo_btn{position:fixed; z-index:10; bottom:2.5%; right:2.5%; display:none;}
.mobil_photo_btn input{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; z-index:2;}
.mobil_photo_btn input[type="file"]{z-index:3;}
.mobil_photo_btn p{margin:0; padding:10px 60px 10px 10px; color:var(--white); font-weight:bold; background:url("/css/imgs/mobile_photo.svg") no-repeat 94% center / 40px; background-color:var(--green); border:solid 1px var(--white); position:relative; z-index:1;}

@media only screen and (max-width: 800px){
	#open .infos{position:absolute; left:0; top:0; width:100%; height:calc(100% - 200px);}
	#open .glass{left:0; top:-50%; width:100%; height:calc(100% - 200px);}
	#open.active .glass{top:0; left:0;}
	#open .imgs{height:950px;}
	#open .imgs img{height:200px; left:auto; right:125%;}
	#open.active .imgs .logo{content:url("/css/imgs/logo.png"); width:80%; left:10%; height:auto;}
	#open.active .imgs img[alt="car4"]{left:auto; right:0; bottom:-75px;}
	
	#info .glass{width:100%; opacity:.8;}
	#info .text .btn{width:100%;margin-bottom:1.5rem;}
	
	#form .form{padding:.25rem;}
	#form .form .check p{font-size:.8rem;}
	#form .getForm .stickers{padding:1rem 0;}
	#form .getForm .stickers h5{margin-bottom:1.5rem;}
	#form .getForm .stickers .row > div{width:33.33333%!important;}
	#form .getForm .stickers .card{height:100px;}
	#form .getForm{border-right:none;}
	#form .sendForm form{width:100%;}
	#form .sendForm form p{font-size:.8rem;}
	#form .sendForm .btns button{width:100%;}
	#form .sendForm .btns .nop{margin-bottom:3rem;}
	#form .sendForm .img{height:300px; width:300px;}
	#form .sendForm .img .img-show{transform:rotate(90deg);}
	
	#sponsors .row > div{width:50%!important;}
	#sponsors .card img{max-height:150px; max-width:150px;}
	
	#form .message .info h3{margin:2rem 0;}	
	#form .message.ok .bg{background:url("/css/imgs/boy.svg") no-repeat center 460px / contain; transition:all 5s;}
	#form .message.no .bg{background:url("/css/imgs/boy_no.png") no-repeat center 460px / contain; transition:all 5s;}
	#form .message.active.ok .bg{background:url("/css/imgs/boy.svg") no-repeat center 35px / contain; }
	#form .message.active.no .bg{background:url("/css/imgs/boy_no.png") no-repeat center 35px / contain; }
	
	footer, footer *{text-align:center!important;}
	footer img{max-width:100%;}
	footer .social h4{margin-top:2rem;}
	footer .social img{margin:0 2rem;}
	
	.mobil_photo_btn{display:block;}
	
}