body {
 margin: 0;
 padding: 0;
 color: #000; 
 height: 100vh;
 max-height: 1150px;
 overflow: hidden;
}

.audio-embed {
 position: absolute;
 z-index: -1;
 visibility: hidden; 
}

.alert-level {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 9999999;
 background: #fff;
 color: #000;
 border-radius: 45px;
 padding: 8px 15px;
 line-height: 1;
 font-size: 13px;
  
}

#video {
 position: relative;
 width: 100%;
 height: 100vh;
 max-height: 1150px; 
}

.video-wrapper {
 position: relative;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
	
video {
 width: 100%;	
}	

.main-wrapper {
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%,-50%); 
 max-width: 1100px;
 text-align: center;
 z-index: 99999;
 color: #fff;
}

.main-wrapper h1 {
 color: #fff;
 font-weight: 600; 
}
	
#clock-counter {
 color: #C5F30B; 
 padding: 10px;
 display: inline-block;
 opacity: 0.9; 
}


.count-cont {
 border:0px solid #fff;
 display: inline-block;
 margin:5px;
 padding: 8px 15px 8px 15px;
 min-width:62px;
 text-align: center;
 background: rgba(0,0,0,0.9);
 color: #C5F30B; 
 border-radius: 5px;
 font-size:38px;
}

.count-val {
 line-height: 1.1;
 margin-bottom: 0;
}

.count-cont span {
 display: block;
 text-align: center;
 margin: auto;
 font-weight: 300;
 font-size:11px;
 padding-top:4px;
 color: #fff;
}

/*@media all and (max-width:610px) {*/
@media screen and (orientation:portrait) and (max-width:760px) {
	
 
 body:before {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99999999999;
 background: #000;
 color: #fff;
 font-size: 22px;
 font-weight: 600;
 text-align: center;
 padding: 15% 6% 10% 6%;  
 content: "Sorki - musisz obrócić swojego ajpfona...lub przejdź na desktopa!";
 }
	
}


@media all and (max-width:1150px) {

#clock-counter {
 padding: 6px;
} 
 
.count-cont {
 margin:5px;
 padding: 7px 13px 7px 13px;
 min-width:52px;
 border-radius: 9px;
 font-size:25px;
}

.main-wrapper h1 {
 font-size: 28px;	
}

.main-wrapper h3 {
 font-size: 19px;	
}
 
}