/* 
* under construction template 
* author: sabine brings 
* website: http://brings-online.com/templates/ 
*/

body { height:100%;  margin:0; padding:0; font-family: Tahoma, Geneva, sans-serif; font-size:80%; color:#5a5a5a; text-align:center; background:#f2f2f2;}
body {-webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed;}

header { margin:0; padding:10px 0; border-bottom:1px dotted rgba(204,204,204,.8)}
footer { width:100%; height:20px; padding:10px 0; margin:0; background:#333; color:#eee; font-size:.8em;  }
footer a { color:#eee; text-decoration:none; }

#wrapper { margin:0 auto; width:100%; max-width:800px; padding:0 20px; position:relative; }


/* =========================  font =========================  */ 

h1 {font-family: 'Raleway', sans-serif; font-size: 2.2em;  margin:0; padding:0; line-height:1.6em; font-weight: normal;}
h2 {font-family: 'Raleway', sans-serif; font-size: 1.45em;  margin:0; padding:0 0 15px 0; line-height:1.5em; font-weight: normal;}
h3 {font-family: 'Raleway', sans-serif; font-size: 1.25em;   margin:0; padding:0; line-height:1.5em; font-weight: normal;}
p {font-family: 'Raleway', sans-serif; font-size:1.1em; margin:10px 0; padding:0 20px 0 0; line-height:1.7em; }
ul li {font-family: 'Raleway', sans-serif;}

.title {font-family: 'Raleway', sans-serif; font-size:4em; font-weight:bold;}
.subtitle {font-family: 'Raleway', sans-serif; font-size:1.4em;  }


/* =========================  grid =========================  */ 

.col-full { width:100%; margin:1.5% 0;}
.col-ttc { width:65.85744680851%; margin:1.5% 0;}
.col-otc { width:31.714893617021%; margin:1.5% 0;}
.col-ofc { width:23.179255319148%; margin:1.5% 0;}
.col-ohc {width:48.786170212699%; margin:1.5% 0;}
.col-ttc, .col-otc, .col-ofc, .col-ohc {margin-right:2.427659574468%; display: inline; float:left;}

.cr {margin-right:0 !important;}
.ct {margin-top: 0 !important;}
.cb {margin-bottom: 0 !important;}
.mr { margin-right:25px;}

.clearfix:before,  
.clearfix:after {content: " "; display: table; }  
.clearfix:after {clear: both; }  
.clearfix {*zoom: 1;}  
.clear { clear:both;}


/* =========================  logo =========================  */ 

/* Wenn Sie ein Logobild einbinden, geben Sie dem #logo die maximale Breite des Bildes und kommentieren die folgenden Zeilen aus */ 
#logo { margin:25px auto; height:auto; text-align:left; /* max-width:450px; */}
#logo img { /* width:100%; height:auto; display:block; */}



/* ============== info ============== */

#info { margin:25px 0; padding:0; text-align:left;  }


.tools {font-size:14em; float:right; color:#ccc; margin:0 0 0 20px; padding:0; line-height:1em;}
.contact { margin:5px 0;}
.contact p { font-size:1.3em;}
.contact ul { margin:0; padding:0; list-style:none;}
.contact ul li { margin:10px 0; font-size:1.3em; padding:0; }
.contact ul li a {color:#5a5a5a; text-decoration:none;  }
.contact ul li a:hover {color:#333; text-decoration:none;  }
.contact div [class^="icon-"]:before, .contact div [class*=" icon-"]:before {color:#5a5a5a; float: left; margin:0 15px 0 0; font-size:24px; line-height:24px; }



.social-media {margin:15px 0 0 0; padding:20px 0 0 0; border-top:1px dotted rgba(204,204,204,.8)}
.social-media div { background:#999; transition: background 0.5s ease; width:22px; height:20px; padding:8px 8px 8px 6px; margin:0 6px 0 0; text-align:center; border-radius:4px; float:left; display:inline-block;}
.social-media div:hover { background:#333; }


.social-media div [class^="icon-"]:before, .social-media div [class*=" icon-"]:before {color:#fff; float: none !important; margin:0; font-size:24px; line-height:24px; text-shadow:none !important;}



/* ============== countdown ============== */

.wrapper-countdown { margin:50px 0 0 0;  padding:20px 0 40px 0; background:#666; width:100%; }
#countdown { text-align:left; margin:0 auto; width:100%; max-width:800px; padding:0 20px; }
.countdownHolder{font: 6em/1.5 'Lato', sans-serif; letter-spacing:-3px;}

.position {display: inline-block; height: 1.5em; overflow:hidden; position:relative; width: 1.5em;}
.digit {position:absolute;	display:block; width:1.5em; background: rgba(255,255,255,.2);	border-radius:5px;	text-align:center;	color:#eee;	letter-spacing:-1px;}
.digit.static {background: rgba(255,255,255,.2);}	

.countDiv{	display:inline-block;	width:20px;	height:1.5em;	position:relative;}
.countDiv:before, .countDiv:after{position:absolute; width:5px;	height:5px;	background-color:#eee; border-radius:50%;	left:50%;	margin-left:-3px;	top:0.5em;		content:'';}
.countDiv:after {top:0.9em;}
#note { font-size:1em; text-align:center; margin:-15px 0 0 0; color:#eee;}

/* ==============
 * Hier können die Angaben, die nicht gebraucht werden, ausgeblendet werden
 ============== */

.countDays {}
.countDiv0 {}
.countHours {}
.countDiv1 {}
.countMinutes {}
.countDiv2{ display:none !important;}
.countSeconds{ display:none !important;}





/* ============== media queries ============== */


@media screen and (max-width: 800px)  {

#wrapper { max-width:760px;  }
#countdown { max-width:760px; }

.countdownHolder{font: 5.6em/1.5 'Lato', sans-serif;}	
	}
	
	
@media screen and (max-width: 768px)  {
	
#wrapper { max-width:728px;  }	
#countdown { max-width:728px; }
	}	
	
@media screen and (max-width: 600px)  {
	
body {}
#wrapper { max-width:580px; padding:0 10px;  }	
#countdown { max-width:580px; padding:0 10px;}
.tools {font-size:12em; float:right; color:#ccc; margin:0 0 0 20px; padding:0; line-height:1em;}
.col-ohc { width:100% !important; display:block !important; float:none !important; }
.position {width: 1.3em;}
.digit {width:1.3em; }
.countdownHolder{font: 4.5em/1.5 'Lato', sans-serif;}
	
	}	
	
@media screen and (max-width: 480px)  {

#wrapper { max-width:450px; padding:0 10px;  }	
#countdown { max-width:450px; padding:0 10px;}	
.position {width: 1.1em;}
.digit {width:1.1em; }
.countdownHolder{font: 4em/1.5 'Lato', sans-serif;}
	}	
	
	
@media screen and (max-width: 320px)  {

#wrapper { max-width:300px; padding:0 10px;  }	
#countdown { max-width:300px; padding:0 10px;}
.title {font-size:3.2em;}
h2 { font-size: 1.25em; }
.tools {font-size:8em; float:none !important;  margin:0 0 0 0 !important; }
.position {width: 1.1em;}
.digit {width:1.1em; }
.countdownHolder{font: 2.8em/1.5 'Lato', sans-serif;}
#note { font-size:.9em; margin:-10px 0 0 0;}
	}