/* Fonts */
@font-face { 
	font-family: 'Raleway-Light'; 
	src: url("../fonts/Raleway-Light.ttf"); 
}
@font-face { 
	font-family: 'Raleway'; 
	src: url("../fonts/Raleway-regular.ttf.html"); 
	}
@font-face { 
	font-family: 'Raleway-Bold'; 
	src: url("../fonts/Raleway-Bold.ttf"); 
	}
@font-face { 
	font-family: 'JosefinSans-Light'; 
	src: url("../fonts/JosefinSans-Light.ttf"); 
	}
/**************************************************************************************/
							/* COLORS FONTS */
body{
	background-color: transparent;
	color: #555;
	font-family: Raleway,sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 28px;
	}

a{
	color: #E75113;
	}
a:hover {
	color:#F8921D;
	}
h1,h2,h3,h4,h5,h6{
	color:inherit;
	}
	
.center { text-align: center; }
/*------------------------ header colors ------------------------*/
#fixed-top-nav{
	background:#DDD;
	box-shadow:0px 0px 2px #333;
}
#fixed-top-nav a{
	color:#666;
}
body>header{
	background:transparent;
}
/*------------------------ main navigation colors -*/
#nav,#nav>ul>li:hover>ul{
	background:#fff;
	}
#nav a{
	color:#000;
	background:#fff;
	}
#nav a:hover{
	color:#000;
	background:#eee;
	}
/*------------------------ slideshow colors -*/
.slogan h2{
	color:#fff;
	font-family:'JosefinSans-Light';
	text-shadow: 0 0 4px #666, 0 0 5px #666;
	font-size:50px;
	font-size:4vw;
	text-align:center;
	}
.slogan{
	color:inherit;
	font-family:'JosefinSans-Light';
	font-size:2.5vw;
	font-weight:600;
	}
/*------------------------ breadcrumb colors -*/
#breadcrumb{
	font-size: 14px;
	font-weight: 400;
	font-family: Open Sans;
	}
#breadcrumb .container {
	background: rgba(255,255,255,0.6);
	border-radius: 0 0 10px 10px;
	border: 0px solid rgba(82,82,82,0.6);
	border-top: 0 none;
}
#breadcrumb a{
	color:#083860;
	font-weight: normal;
	}
#breadcrumb a:hover { color:#185C94; }
#breadcrumb span{
	color:#185C94;
	font-weight: bold;
	}
/*------------------------ content colors ------------------------*/
div.postlink, .postlink > a, .postlink > span{
	background:#FCD465;
	color:#FFF;
	}
article.news {
	background:#fff;
}
/*------------------------ footer colors ------------------------*/
body>footer{
	background:#E75113;
	box-shadow:0px 0px 2px #333;
	color:#151515;
	}
body>footer a{
	color:#fff;
	}
#footer-copy { 
	background:#fff;
	color:#333;
	box-shadow:0px 0px 2px #333 inset;
	}
/**************************************************************************************/
							/* EFFECTS */

#slideshow .slide-area::after{/* erzeugt eine pseudo div welches den shatten über das bild wirft*/
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	content: " ";
	display:block;
	/*box-shadow: inset 0px 0px 20px #666*/
}

/**************************************************************************************/
/**************************************************************************************/
/**************************   BASE CONSTRUCT *****************************************/
/**************************************************************************************/
/**************************************************************************************/
/* BASE CONSTRUCT */
*{
	margin:0px;
	padding:0px;
	text-decoration:none;
	list-style:none;
	}
body {
	padding:0px;
	/*background: url("../images/template/grid.png.html");*/
	}
ul, ol {
	margin:0;
	}
h1,h2,h3,h4,h5,h6{
	font-family: 'Raleway-Bold';
	}
header h1 { margin-bottom: 30px; color: #083860; }
h2,h3,h4 { margin-bottom: 20px; }
h2{ color: #185C94; }
h3{ color: #294F6F; }
h4{ color: #185C94; }
h5{}
h6{}
b,strong{}
p { margin: 0px 0px 0px 0px; }
a{}
a:hover {
	text-decoration:none;
	}
#logo{
    background: rgba(0, 0, 0, 0) url("../images/template/logo-klartext-ev.png") no-repeat scroll 0 0 / 100% 100%;
    display: block;
    float: left;
    height: 145px;
    left: 15px;
    margin-left: 15px;
    position: absolute;
    top: -38px;
    width: 162px;
	}
/*------------------------ Helper Classes ------------------------*/
.small-caps{
	font-variant:small-caps;
	}
.right{
	float:right;
	}
.left{
	float:left;
	}
.clear{
	clear:both;
}
/**************************************************************************************/
/**************************************************************************************/
/* HEADER */
#fixed-top-nav{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:21;
}
#fixed-top-nav a{
	padding:8px;
}
#fixed-top-nav a>i{
	font-size:16px;
}
body>header{
	padding:50px 0px 50px 0px;
	margin-top: 26px;
	}
body>header>.container{
	position:relative;
	padding:0px 0px 0px 160px;
	}
/*------------------------ Hauptnavigation ----------------------*/
#nav{
	float:right;
	position:relative;
	z-index:20;
	}
#nav a{
	text-decoration:none;
	}
/*------------------------ menue ebene 1 -*/
#nav>ul{
	display:block;
	margin:0px;
	padding:0px;
	}
#nav>ul>li{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	float:left;
	}
#nav>ul>li>a{
	display:block;
	padding:20px;
	}
#nav>ul>li>a:hover{
	}
/*------------------------ menue ebene 2 -*/
#nav>ul>li>ul{
	visibility:hidden;
	position:relative;
	width:0px;
	max-height:0px;
	opacity:0;
	}
#nav>ul>li:hover>ul{
	transition: max-height 1s, opacity 1.4s;
	background:inherit;
	visibility:visible;
	opacity:1;
	display:block;
	list-style:none;
	width:auto;
	max-height:800px;
	position:absolute;
	top:100%;
	left:0px;
	}
#nav>ul>li>ul>li{
	display:block;
	}
#nav>ul>li>ul>li>a{
	display:block;
	padding:10px 20px 10px 20px;
	font-size: 12px;
	line-height: 16px;
	}
	
.sub-menu {
	position: absolute !important;
	width: 200px !important;
}

/**************************************************************************************/
/* SLIDESHOW */

#slideshow{
	position:relative;
	}
#slideshow ul{
	position:relative;
}
#slideshow>ul>li>img.img-responsive{
	width:100%;
	}
#slideshow>.container{
	position:relative;
	}
.slide-area>.container{
	position: relative;
	height:100%;
	display:block;
	clear:none;
	
	}
.slideshow-overlay{
	position:absolute;
	bottom:0;
	right:0;
	z-index:10;
	height:24vw;
	width:24vw;
	max-height:450px;
	max-width:450px;
}
.slide-area{
	position:relative;
	/*height: 410px;*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f8921d+0,e75113+100 */
	background: #f8921d; /* Old browsers */
	background: -moz-linear-gradient(top, #f8921d 0%, #e75113 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8921d), color-stop(100%,#e75113)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f8921d 0%,#e75113 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f8921d 0%,#e75113 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f8921d 0%,#e75113 100%); /* IE10+ */
	background: linear-gradient(to bottom, #f8921d 0%,#e75113 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8921d', endColorstr='#e75113',GradientType=0 ); /* IE6-9 */
}
.slogan{
	display:inline-block;
	position:absolute;
	top:0px;
	padding:0px 25vw 0px 15px;
	}
.slogan h2{
	margin: 2vw 0 1vw
	}
.slogan p{
	line-height:3vw;
	}
	
	
.site-overview { margin-top: 15px; margin-left: 40px; }	
.site-overview li {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 10px;
	list-style: outside;
	padding-left: 10px;
}
	
/**************************************************************************************/
/* BREADCRUMB */

#breadcrumb{}
#breadcrumb>.container{	
	padding:0px 30px 0px 30px;
	}
#breadcrumb>.container>span{
	padding:0px 15px 0px 0px ;	
	}
#breadcrumb span:last-child>a {}

/**************************************************************************************/
/* CONTENT */
#content{
	margin:30px 0px 48px 0px;
	}
body>section>.container>.content{
	}
article > aside { float:right; position: relative; margin-bottom: 20px; margin-left: 30px; border-radius: 10px; overflow: hidden; }
article > aside span { position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; border: 2px solid rgba(229,84,23,0.75);  border-radius: 10px; }
article > aside h4 {
	position: absolute;
	bottom: 10px; left: 10px; right: 10px;
	text-align: center;
	background-color: rgba(229,84,23,0.8);
	margin: 0;
	color: #EEE;
	border-radius: 0 0 10px 10px;
	font-weight: 300;
	font-size: 18px;
	font-family: Open Sans;
	padding: 5px 0;
}
iframe { border-radius: 10px; overflow: hidden; }
/*------------------------ news ------------------------*/
.postlink a, .postlink span{ /*blätter funktion*/
	padding:0px 8px 0px 8px;
	}
article.news{
	
	}
article.news>header{
	display:inline-block;
	width:100%;
	padding:20px 0px 0px 0px;
	}
article.news>header>h3{
	float:left;
	margin:0px;
	}
article.news>header>span{
	float:right;
	}
article.news>aside{
	padding:0px 0px 8px 8px;
}
/*------------------------ Mitarbeiter karteikarte ------------------------*/
.karteikarte{
	box-shadow: 0 2px 4px #949494;
	padding: 15px;
	margin-bottom: 30px;
	min-height: 450px;
}
.karteikarte > img{
	margin-bottom:8px;
}

.team-sub { font-size: 12px; line-height: 16px; min-height: 48px; display: block; }

.mbottom-25 { margin-bottom: 25px; }

/**************************************************************************************/
/* SIDEBAR */

body>section>.container>aside{
	}
.sidebar {}
.sidebar * {
	text-align: right;
}
.sidebar h3{}
.sidebar-menu ul{}
.sidebar-menu li{}
.sidebar-menu li a{
	display: block;
	padding: 0px 0px 0px 0px;
}
.sidebar-menu li a:hover{
	text-decoration: none;
}


.copyright {
    color: #656565;
    font-size: 14px;
    text-align: left;
}

.footer-nav a { color: #666; font-size: 14px; padding-left: 25px; }
.footer-nav li { float: left; }

#menu-footer { float: right; }

.content ol {
    padding-left: 15px;
    margin: 35px 0;
}

.content ol li { margin-left: 5px; display: list-item !important; list-style: decimal !important; margin-bottom: 10px; }
.content ol li span { font-weight: bold; font-size: 18px; }

#callback_form input, #callback_form button,
#anfrage_form input, #anfrage_form textarea, #anfrage_form select, #anfrage_form button
{ width: 100%; border: 1px solid #AAA; border-radius: 3px; padding: 2px 10px; }

#anfrage_form textarea { min-height: 100px; margin-bottom: 10px; }
#anfrage_form label { margin-top: 10px; }

#anfrage_form { margin-top: 30px; margin-bottom: 50px; }

article #anfrage_form button { background-color: #4B90C9; color: #FFF; border-color: #4B90C9; }

#callback_form input { margin-bottom: 5px; }
#callback_form input:focus, #callback_form input:hover { background-color: #FFF; }

#callback_form input, #callback_form button, #callback_form label { line-height: 28px; color: #555; }
#callback_form label { font-weight: normal; }

#callback_response { display: none; margin-top: 30px; }

.contact-page-social { margin-top: 50px; }
.contact-page-social i { font-size: 160px; }
.contact-page-social i.fa-facebook-square { color: #185C94; }
.contact-page-social h3 { margin-top: 0; }
	
/**************************************************************************************/
/* FOOTER */
body>footer{
	margin:30px 0px 0px 0px;
	padding:0px 0px 30px 0px;
	}
body>footer>.container{
	padding:0px 15px 30px 15px;
	}
body>footer>.widget{
	overflow:auto;
}
body>footer .widget>.inner-padding{
	padding-top:15px;
}
body>footer .widget>.inner-padding h3{
	margin-top:0px;
}

footer .inner-padding, footer h3 { color: #F0F0F0; }
footer input { background-color: #EEE; }
footer .inner-padding { line-height: 24px; }

#callback_form button { background-color: #4B90C9; color: #FFF; font-weight: bold; border: 0 none; }

.health-calculator {
	margin-bottom: 50px;
	background-color: #EEE;
	padding: 10px;
	padding-bottom: 20px;
	font-family: Open Sans;
}

.health-calculator h2 {
	background-color: #FFF;
	margin: 0;
	font-size: 22px;
	font-weight: normal !important;
	padding: 5px;
}

.health-calculator label {
	font-size: 14px;
}

.health-calculator input, .health-calculator button { width: 100%; text-align: center; font-weight: bold; }

.health-calculator button { margin-top: 33px; }
.health-calculator input { padding: 1px 10px; }

.health-calculator-result { text-align: right; font-size: 14px; padding-top: 33px; line-height: 22px; }

.health-calculator-multi-big { text-align: right; line-height: 66px; font-size: 42px; font-weight: bold; }
.health-calculator-end-result { font-weight: bold; font-size: 22px; margin-top: 10px; display: block; }

#default-employers, #count-employers { font-weight: bold; }
.call-info-text { margin-bottom: 15px; font-size: 14px; line-height: 18px; }

.orange-text { color: #E55417; }

/**************************************************************************************/
/* FOOTER */
#footer-copy { 
	text-align: right;
	}

/**************************************************************************************/
/**************************************************************************************/
/**************************   END OF STANDARDT ************************************/
/**************************************************************************************/
/**************************************************************************************/
/* MIXED */
@media screen and (max-width: 600px) {/* small displays */
   body>header>.container{
		padding:0;
		}
	#fixed-top-nav a{
		padding:0;
		}	
	#fixed-top-nav a *{
		display: none!important;
		visibility:hidden!important;
		}
	#fixed-top-nav a>i {
   		display: block!important;
		visibility:visible!important;
		float:left;
		font-size: 44px;
		margin: 2vw 8vw;
	}
   #logo{
	   position:relative;
	   top:0;
	   left:0;
	   }
	#nav a{
		padding:6px 15px!important;
		}
	#nav, #nav ul,  #nav li, #nav a,#nav li:hover, #nav > ul > li > ul.sub-menu{
		position:relative;
		visibility:visible;
		display:block;
		clear:both;
		float:left;
		width:100%;
		height:auto;
		max-height:none;
		opacity:1;
	}
	#nav > ul > li > ul > li a::before{
		content:"- ";
		}
	article>aside{
		float:none;
	}
	.sidebar * {
		text-align: left;
	}
}