/* 
* landing page 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:85%; color:#444; text-align:center; background:#f2f2f2;}


/* =========================  structure =========================  */ 

.wrapper { margin:0 auto; padding:0; width:100%;  position:relative; }
.content { padding:0 20px; margin:0 auto; max-width:960px; text-align:left;}

header { margin:0; padding:0;}
article { margin:0; padding:40px 10px;  }
footer { width:100%; height:20px; padding:10px 0; margin:0; font-size:.8em;  }
footer a { text-decoration:none; }
address { font-style:normal;}


/* =========================  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 20px 0; padding:0 20px 0 0; line-height:1.7em; }
ul { margin:10px 0 10px 15px; padding:0;}
ul li {font-family: 'Raleway', sans-serif; font-size:1.1em; list-style: square; padding:4px 0; margin:0;}
a { text-decoration:none;}

.title {font-family: 'Raleway', sans-serif; font-size:3.4em; font-weight:bold;}
.title i { float:left;}
.subtitle {font-family: 'Raleway', sans-serif; font-size:1.1em; text-transform:uppercase; margin-left:10px; line-height:1.6em;  }


/* =========================  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;}


/* =========================  triangle - button - sections =========================  */ 

.triangle1 { position:absolute; width:30px; height:30px; top:-18px; left:10px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border-radius:5px; }
.triangle2 { position:absolute; width:30px; height:30px; top:-18px; left:10px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border-radius:5px; }
.triangle3 { position:absolute; width:30px; height:30px; top:-18px; left:10px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border-radius:5px; }

.cover {position:absolute; height:30px; width:70px; overflow:hidden; }

.button1, .button2 { text-align:center; width:auto; border-radius:3px; font-size:.9em; text-transform:uppercase; text-decoration:none; border-bottom:none !important; }
.button1, .button2 { margin:25px 0 0 0 ; padding:8px 15px; transition: padding 0.2s ease;  }
.button1:hover, .button2:hover {  padding:8px 20px;}

.sec-two i { font-size:32px; float:left; margin:0 15px auto 0; margin-left:0 !important; padding:0; }
.sec-two p { margin-top:0 !important;}
.sec-three i { font-size:24px;}


/* =========================  navigation =========================  */ 

nav { margin:0; padding:0; float:right;}
nav ul { margin:0; padding:0; list-style:none;}
nav ul li { margin:0 5px; padding:3px 0 2px 0; list-style:none; display:inline-block; font-size:1em; border-bottom:2px solid transparent;}


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

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


/* =========================  socia media icons =========================  */ 

.social-media {margin:15px 0 0 0; padding:20px 0 0 0; }
.social-media div { 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 a { border-bottom:none;}
.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;}

/* =========================  featured image =========================  */ 

/*.featured-img { max-width:450px; margin:0; padding:0;}*/
.featured-img { max-width:450px; margin:0; padding-top:105px;}
.featured-img img {width:100%; height:auto; display:block;} /*60%?



/* =========================  rounded images =========================  */ 

.timg { max-width:300px;}
.timg img { border-radius:100%; width:100%; height:auto; display:block;}
.timg img:hover { box-shadow:0 0 4px #ccc;}
.caption { padding-top:10px; text-align:center;}


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


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

body { font-size:75%; }
.content { padding:0 10px !important; max-width:779px; }

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

.content { padding:0 10px !important; max-width:747px; }	
	
}	

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

body { font-size:70%; }	
	
}
	
@media screen and (max-width: 599px)  {

body { font-size:80% !important; }	
.col-otc { margin:20px 0; width:100% !important; float:none !important; margin-right:0 !important; display:block; margin:0 0 30px 0;} 
.col-ohc { width:100% !important; float:none !important; margin-right:0 !important; display:block; margin:0 0 25px 0;} 

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

#logo { padding-top:45px;}
.title i { float:left; font-size:.85em; margin-top:4px;}
	

}	
	
	
