/* 
* under construction template 
* author: sabine brings 
* website: http://brings-online.com/templates/ 
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

body { height:100%;  margin:0; padding:0; font-family: Tahoma, Geneva, sans-serif; font-size:80%; color:#f2f2f2; text-align:center; background:url(images/bg4.jpg) top left no-repeat;}
body {-webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-attachment: fixed;}

#wrapper { margin:0; width:100%; padding:30px 0 0 0; position:relative; background:rgba(255,255,255,.1);  background-size: 100% 100%; }

#footer { width:100%; height:20px; padding:10px 0; background:#333; color:#eee; font-size:.8em; position:fixed; bottom:0; left:0; }
#footer a { color:#eee; text-decoration:none; }

/* =========================  Linkfarbe geändert ===========  */
a:-webkit-any-link {
    color: cyan;
    cursor: pointer;
    text-decoration: underline;
}

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

h1 {font-family: 'Raleway', sans-serif; font-size: 2em; color:#eee; margin:0; padding:0; line-height:1.6em; font-weight: normal;}
h2 {font-family: 'Raleway', sans-serif; font-size: 1.3em;  color:#eee; margin:0; padding:0 0 15px 0; line-height:1.5em; font-weight: normal;}
h3 {font-family: 'Raleway', sans-serif; font-size: 1.175em;  color:#eee; 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; }

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


/* =========================  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;}
.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 45px auto; height:auto; text-align:center; /* max-width:450px; */}
#logo img { /* width:100%; height:auto; display:block; */}



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

.wrapper-countdown { margin:20px 0 0 0;  padding:20px 0 80px 0;}
#countdown { text-align:center; margin:0; padding:0; }
.countdownHolder{font: 5.5em/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(51,51,51,1);	border-radius:5px;	text-align:center;	color:#eee;	letter-spacing:-1px;}
.digit.static {background: rgba(51,51,51,.8);	}

.countDiv{	display:inline-block;	width:20px;	height:1.5em;	position:relative;}
.countDiv:before, .countDiv:after{position:absolute; width:5px;	height:5px;	background-color:#333; 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:#000;}

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

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



/* ============== info ============== */
.wrapper-info { background: rgba(51,51,51,.8); width:100%; padding:10px 0 20px 0;}
#info { margin:0 auto; max-width:650px; text-align:left;  }

.social-media {margin:10px 0 0 30px; padding:20px 0 0 0; border-top:1px dotted rgba(204,204,204,.8)}
.social-media div { background:#c00; 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; }


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


/* ============== contact ============== */

.contact {margin:0 0 0 30px; padding:0;}
.contact div { display:block; line-height:1.5em; font-size:1.25em; margin:3px 0 16px 0; }
.contact a { color:#eee; text-decoration:none;}

#info .contact [class^="icon-"]:before, #info .contact [class*=" icon-"]:before  { float:left; margin:0 15px 0 0; font-size:28px; color:#eee; }




@media screen and (max-width: 800px)  {
	#info { max-width:780px;}
	h1 {font-size: 1.8em;}
	h2 {font-size: 1.2em; }
	h3 {font-size: 1.075em;  }
	p {font-size:1em;}
	#contact-form input {width:100%; max-width:165px; }
#contact-form textarea { width:100%; max-width:360px;}
article { padding-left:20px;}
.countdownHolder{font: 4.5em/1.5 'Lato', sans-serif;}
	#note {  margin:5px 0 0 0;}
	}
	
	
@media screen and (max-width: 768px)  {
	
	body {}
	#info { max-width:740px;}
	#contact-form textarea { width:100%; max-width:350px;}

	
	}	
	
	@media screen and (max-width: 600px)  {
	
	body {}
	.col-ohc { width:100% !important; display:block !important; float:none !important; }
	#contact-form { margin:30px 0 10px 0;  }
	#contact-form input {width:100%; max-width:350px;}
	#info { max-width:540px;}
	.position {width: 1.3em;}
	.digit {width:1.3em; }
	h1 {font-size: 1.6em;}
	h2 {font-size: 1.2em;}
	.countdownHolder{font: 3em/1.5 'Lato', sans-serif;}
	}	
	
		@media screen and (max-width: 480px)  {
	
	#info { max-width:450px;}
	.position {width: 1.1em;}
	.digit {width:1.1em; }
	.countdownHolder{font: 2.5em/1.5 'Lato', sans-serif;}
	}	
	
	
	@media screen and (max-width: 320px)  {
	
	#info { max-width:290px;}
	.position {width: 1.1em;}
	.digit {width:1.1em; }
	.countdownHolder{font: 2em/1.5 'Lato', sans-serif;}
	#note { font-size:.9em; margin:5px 0 0 0;}
	}