@import 'lib/reset.css';
@import 'lib/skeleton.css';
@font-face { font-family: plak; src: url(../media/Plak-BlackCondensed.otf); }

body,html{height:100%;}
body{font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:100%;line-height:200%;background:#000}
a{color:#fff;text-decoration:none;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
a:hover{color:#fff}
ul.panels{height:100%;}
ul.panels li.panel{width:100%;min-height:100%;display:block;position:relative}
ul.panels li.panel.panel_1{background:#000 no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
/*first size*/
ul.panels li.panel.panel_1 div.timer{cursor:pointer; color:#fff;font-family:'plak',sans-serif;font-weight:400;font-size:10.5em;line-height:0.9em; letter-spacing:0.01em}

/*fourth size*/
@media only screen and (max-width: 767px){ul.panels li.panel.panel_1 div.timer{ font-size:4.8em; letter-spacing:0.01em}}

/*second size*/
@media only screen and (max-width: 959px) and (min-width: 768px){ul.panels li.panel.panel_1 div.timer{ font-size:8.5em; letter-spacing:0.01em}}

/*third size*/
@media only screen and (max-width: 767px) and (min-width: 480px){ul.panels li.panel.panel_1 div.timer{ font-size:6.8em; letter-spacing:0.01em}}
ul.panels li.panel.panel_1 div.timer ul li{float:left;text-align:center;}
ul.panels li.panel.panel_1 div.timer ul li.seperator{font-size:.7em;  padding:0.02em;}
ul.panels li.panel.panel_1 div.timer ul li p{font-weight:200;font-size:.2em;line-height:1em}


#imprint{
		color: #000;	
		position: absolute; 
        vertical-align: middle; 
        margin: auto; 
        padding: 0; 
		text-align: center;
		z-index: 2000;
		background-color: #000;
		height: 100%;
		width: 100%;
		top: 0; right: 0; bottom: 0; left: 0;
		display: -webkit-box;
		display: -moz-box;
		display: box;
        -webkit-box-orient: vertical;-moz-box-orient:center;box-orient: vertical;
        -webkit-box-align: center;-moz-box-align: center;flex-align: center;
        -webkit-box-pack: center;-moz-box-pack: center;flex-pack: center;
		}

#imprint a{ font-weight: bold; color:#000;text-decoration:underline;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
#imprint a:hover{font-weight: bold;color:#000}
#imprint-content{
		height: auto;
		width: auto;
		padding: 20px;
		background-color: #fff;
		text-align: center;
		font-size: 11px;
		line-height: 150%;	
		margin:auto;
		max-width: 200px;
}

      /* Nur Firefox */
@-moz-document url-prefix() {
    #imprint-content {
    position: relative;
    top: 50%;
    margin-top: -135px;
    }}
    


#close-imprint-div{
	float:right;
	margin-right: -10px;
	margin-top: -10px;
	}

 #video{ 
height: 100%;
width: 100%;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
 display:block;
}
*/
#film{
width:100%;
height: 100%; 
position: absolute;
top: 0; bottom: 0; left:0; right:0;
margin: auto;
}

#film:-webkit-full-screen {
    height: 100%;
}