/* 
* 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%; text-align:center; }


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

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

header { margin:0; padding:0;}
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: 1.8em;  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; 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; 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; margin-right:20px;}
.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;}


/* =========================  slider =========================  */ 

.slider-pager { position:relative; bottom:70px; left:0; z-index:5000; background:rgba(255,255,255,.8); padding:10px 0; height:50px; width:100%;}

.cycle-prev, .cycle-next  { font-size:32px; line-height:34px; height:40px; color:#fff; float:left; width:40px; text-align:center;  background: rgba(51,51,51,.8); border-radius:3px; cursor:pointer;}
.cycle-prev:hover, .cycle-next:hover {background: rgba(51,51,51,.9);} 
.cycle-prev {padding:0 3px 0 0;  margin: 5px 10px 0 0;}
.cycle-next {padding:0 0 0 3px;  margin:5px 0 0 0;}
.cycle-prev [class^="icon-"]:before, .cycle-prev [class*=" icon-"]:before , .cycle-next [class^="icon-"]:before, .cycle-next [class*=" icon-"]:before { margin:0 0 0 0 !important; }

#pager { font-size:50px; line-height:1em; color:rgba(51,51,51,.5); margin:-5px 0 0 0; padding:0; cursor:pointer;}
#pager .cycle-pager-active {color:rgba(51,51,51,.9);}

.slider .item {width:100%; text-align:center; position:relative;}
.slider img { width:100%; height:auto; display:block;}
.slider .textbox { position:absolute;  top:10%; right:15%; background:rgba(236, 236, 236, .9); padding:10px 20px; width:360px; text-align:center; border:1px solid #fff;}
.slider .textbox h2 { color:#333;}



/* ========================= background - button - icons =========================  */ 

.dark { margin-top:-69px; padding-bottom:40px; }

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

.content p [class^="icon-"]:before, .content p [class*=" icon-"]:before  { font-size:22px; float:left; margin:0 15px 0 0; margin-left:0 !important; padding:0; }


/* =========================  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:.95em; 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;}



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


@media screen and (max-width: 1200px)  {
.content { padding:0 10px !important; max-width:1140px; }
}



@media screen and (max-width: 1024px)  {
body { font-size:82%; }
.slider .textbox {font-size:.95em; width:400px !important; top:7% !important; right:7% !important;}
.slider-pager { bottom:60px;  padding:5px 0; }
}


@media screen and (max-width: 800px)  {
body { font-size:75%; }
h1 {font-size: 1.9em; }
.slider-pager { position:relative; bottom:0 !important; padding:5px 0; height:45px; }
.cycle-prev, .cycle-next  { font-size:24px; line-height:24px; height:30px; width:30px; }
#pager { font-size:45px}
.dark .ct {margin-top: 15px !important;}

.slider .textbox { position:relative !important; right:0 !important;  padding:10px !important; display:block; width:100% !important; border:none !important; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.slider .textbox p { padding-left:20px; padding-right:20px;}

.dark .col-otc {  width:100% !important; max-width:calc(100% - 50px); float:none !important; display:block; margin:30px 0!important; padding:0 25px;} 
.dark { margin-top:0 !important; padding-bottom:40px; padding-top:20px !important; }

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

}	

@media screen and (max-width: 600px)  {
body { font-size:75%; }	
.button1 { font-size:.8em;}	
}
	
@media screen and (max-width: 599px)  {

body { font-size:80% !important; }	


}	
	
@media screen and (max-width: 480px)  {
#logo { padding-top:45px;}
.title i { float:left; font-size:.85em; margin-top:4px;}
}