/* 
* 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:#3F4037; text-align:center; background:url(images/bg-tulpen.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%; height:100%;  padding:30px 0 0 0; position:relative; background:rgba(255,255,255,.2)  }
#footer { margin-bottom:20px;  width:100%; height:20px; padding:10px 0; background:#3F4037; color:#eee; font-size:.8em; }
#footer a { color:#eee; text-decoration:none; }


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

h1 {font-family: 'Lato', sans-serif; font-size: 2em; color:#3F4037; margin:0; padding:0; line-height:1.6em; font-weight: normal;}
h2 {font-family: 'Lato', sans-serif; font-size: 1.4em;  color:#3F4037; margin:0; padding:0 0 15px 0; line-height:1.5em; font-weight: normal;}
h3 {font-family: 'Lato', sans-serif; font-size: 1.275em;  color:#3F4037; margin:0; padding:0; line-height:1.5em; font-weight: normal;}
p {font-family: 'Lato', sans-serif; font-size:1.15em; margin:10px 0; padding:0 40px 0 0; line-height:1.7em; }

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


/* =========================  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 85px 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: 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:#A6BE84;	border-radius:5px;	text-align:center;	color:#fff;	letter-spacing:-1px;}
.digit.static { background:#A6BE84;	}

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

/* ==============
 * 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(255,255,255,.8); width:100%; padding:20px 0 20px 0;}
#info { margin:0 auto; max-width:960px; text-align:left;}
#info [class^="icon-"]:before, [class*=" icon-"]:before  { float:left; margin:0 10px 0 0; font-size:26px; color:#D14B51; }

.social-media {margin:30px 0 0 0;}
.social-media div { background:#A6BE84; opacity:.5;width:22px; height:20px; padding:8px 8px 8px 6px; margin:0 4px 0 0; text-align:center; border-radius:100%; float:left; display:inline-block;}
.social-media div:hover { opacity:1;}

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



/* ============== contact ============== */
#contact-form { margin:0; text-align:left; }
#contact-form label { font-size:.9em; display:block; margin:5px 0 2px 0;}
#contact-form input {width:100%; max-width:185px; border:1px solid #dedede; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:5px 1px; margin:0 0 7px 0; font-family:Verdana, Arial, sans-serif; font-size:.9em;}
#contact-form textarea { width:100%; max-width:425px; border:1px solid #dedede; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:5px 1px; font-family:Verdana, Arial, sans-serif; font-size:.9em;}
#contact-form input:focus, #contact-form textarea:focus { border:1px solid #ccc;}
#contact-form button { color:#fff; cursor:pointer; margin:15px 0 0 0; border:none; font-size:1em;  padding:6px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
background: #A6BE84;}

.thanks, .error { background:#fff; padding:15px; }





@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;}
	article { padding:0 0 0 20px;}
	.social-media { padding:0 0 0 20px;}
	#contact-form input {width:100%; max-width:165px; }
#contact-form textarea { width:100%; max-width:350px;}
	}
	
	
@media screen and (max-width: 768px)  {
	
	body {}
	#info { max-width:740px;}
	#contact-form textarea { width:100%; max-width:340px;}

	
	}	
	
	@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; }
	
	}	
	
		@media screen and (max-width: 480px)  {
	
	#info { max-width:450px;}
	.position {width: 1.1em;}
	.digit {width:1.1em; }
	.countdownHolder{font: 3em/1.5 'Lato', sans-serif;}
	}	
	
	
	@media screen and (max-width: 320px)  {
	
	#info { max-width:290px;}
	.position {width: 1em;}
	.digit {width:1em; }
	.countdownHolder{font: 1em/1.5 !important 'Lato', sans-serif ;}
	#note { font-size:.9em; margin:-10px 0 0 0;}
	}