/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, cite, code,del, dfn, img, ins, kbd, q, s, samp, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, .main-nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;line-height: 100%;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* ----------------------------- */
/* ------- HTML Elements ------- */
/* ----------------------------- */
body {font-family: "Lato", Helvetica, Arial, sans-serif;color: #545454; font-weight: 300; background-color: #FFFFFF; border-top: solid 11px #0a519d; font-size: 18px;}
a {color: #09519c; outline: none; text-decoration: underline;}
a:focus, a:hover, a:active {color: #3194c7; text-decoration: underline;}
a.lb {cursor: url('../images/lupe.png'), pointer;}
h1 {color: #009fe3; font-size: 32px; margin: 40px 0 0 0; line-height: 125%; font-weight: 400; padding-bottom: 8px;}
h2 {color: #009fe3; font-size: 24px; margin: 0; line-height: 125%; font-weight: 400; padding-bottom: 4px;}
h3 {margin: 14px 0 0 0;font-size: 14px;color: #ffffff; font-weight: 300;}

/* ----------------------------- */
/* ------- Basic Classes ------- */
/* ----------------------------- */
.floatleft {float: left;}
.floatright {float: right;}
.clearfloat {clear: both;}

/* ----------------------------- */
/* ---- Document Structure ----- */
/* ----------------------------- */
#container {width:100%; max-width:1920px;margin:0 auto;}
#site-header {width: calc(100% - 20px); max-width: 1000px; margin: 0 auto;}
#main, footer {width:100%;}
article {width: calc(100% - 20px); max-width: 1100px; margin: 0 auto;}
.inhalt-schmal {width: calc(100% - 20px); max-width: 1000px; margin: 0 auto;}
.inhalt-breit {width: calc(100% - 20px); max-width: 1180px; margin: 0 auto; }
.grau {background-color: #dadada;}

/* ----------------------------- */
/* ---------- Header ----------- */
/* ----------------------------- */
#logo a {display: block; width: 350px; height: 133px; margin:0 0 0 0; background:url(../images/logo-heimtextilien-litmeyer.png) 0 0 no-repeat; background-size: contain;}
#logo a span {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}


/* ------- Mobile Navigation Toggle ------- */
.off-canvas-nav ul {list-style: none;z-index: 10000;width: 100%;text-align: center;position:relative;}
.off-canvas-nav ul li a {text-transform: uppercase; display: inline-block;font-size: 28px;color: #0a519d;padding: 10px 10px 10px 40px;margin: 20px 0;background: url(../images/menu.png) 5px 9px no-repeat #fff;font-weight: 400; text-decoration: none;}
.off-canvas-nav ul li a:hover {text-decoration: none;}

/* ---------- .main-navigation ----------- */
.main-nav ul {display: none;}
.active-nav .main-nav ul {display: block;width: 100%;list-style: none;margin-bottom: 40px;}
.active-nav .main-nav ul li a {display: block; font-size:22px; color:#c6c1c1; text-transform:uppercase; text-decoration: none; font-weight: 400; padding: 10px 20px 10px 20px; border-bottom: solid 1px #c6c1c1;}
.active-nav .main-nav ul li a:focus,.active-nav .main-nav ul li a:hover,.active-nav .main-nav ul li a:active {background-color: #fff;color: #ab93c5; text-decoration: none;}
.active-nav .main-nav ul li a:focus,
.active-nav .main-nav ul li a:active,
.active-nav .main-nav ul li:hover > a,
.active-nav .main-nav ul li.active > a {text-decoration:none; color: #09519c; background: url("../images/menu_active_mob.gif") 0 9px no-repeat;}
.active-nav .main-nav ul ul {margin-bottom: 0;}
.active-nav .main-nav ul ul li a {padding-left: 40px;font-size: 20px;text-transform:none;}


/* ----------------------------- */
/* ---------- Content ---------- */
/* ----------------------------- */
article {width: calc(100% - 40px); padding: 0 20px 40px 20px;}
article p, .inhalt-schmal p {
	margin: 26px 0 0 0;
	line-height: 150%;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
article a[rel=lightbox] {
	cursor: url('../images/lupe.cur'), pointer;
}
.content ul,
.content ol {
	margin: 26px 0 0 20px;
	overflow:hidden;
	padding-left: 1.2em;
}
.content ul li,
.content ol li {
	line-height: 150%;
	margin-top: 7px;
	font-style:normal;
}

.leistungen {text-align: center; padding-top: 10px;}
.leistungen h2 {color: #09519c; font-size: 32px; margin: 40px 0 0 0; line-height: 125%; font-weight: 400; padding-bottom: 8px;}
.kontakt h2 {color: #09519c; font-size: 20px; margin: 40px 0 20px 0; line-height: 125%; font-weight: 400; padding-bottom: 8px; text-transform: uppercase;}

.cols-2 .teammember {width: 100%; max-width: 318px;}
.cols-2 .teammember p {font-size: 19px; color: #000;}
.cols-2 .teammember p.small {font-size: 16px; color: #ab93c5;}

#kontaktinfo {width: calc(100% - 20px); max-width: 1100px; margin: 0 auto;}
#kontaktinfo .cols-2 p {font-size: 28px; line-height: 130%;}
#kontaktinfo .cols-2 small {display: inline-block; font-size: 20px; line-height: 130%;}
#kontaktinfo a, #kontaktinfo a:hover {color: #5b5b5b; cursor:auto; text-decoration: none;}
#kontaktinfo a.button {display: inline-block; background-color: #b4b4b4; color: #fff; border: solid 1px #b4b4b4; text-transform: uppercase; font-size: 18px; padding: 16px 30px; margin-top: 16px; border-radius: 5px;}
#kontaktinfo a.button:hover {background-color: #0a519d; border-color: #0a519d; cursor:pointer;}

.cols-3.icon h3 {padding: 10px 0 20px 64px;}
.cols-3.icon .time {background: url(../images/content_icon_time.png) 0 0 no-repeat;}
.cols-3.icon .tel {background: url(../images/content_icon_tel.png) 0 0 no-repeat;}
.cols-3.icon .loc {background: url(../images/content_icon_loc.png) 0 0 no-repeat;}
.cols-3.icon p {font-size: 16px;}
.cols-3.leistung {text-align: center;}
.cols-3.leistung h3 {text-transform: none; font-size: 20px; padding-bottom: 20px;}
.cols-3.leistung p {font-size: 15px; line-height: 150%;}


/* ----------------------------- */
/* ----------- Footer ---------- */
/* ----------------------------- */
footer {clear:both;}
#colophon {background-color: #3194c7; color: #f7f7f7; font-size: 15px; padding: 24px 20px; border-top: solid 4px #0f6bb2;}
#colophon h3 {color: #f7f7f7; margin: 16px 0 0 36px; padding-bottom: 10px; width: 100%; max-width: 340px; border-bottom: solid 1px #f7f7f7; font-size: 25px; font-weight: 300;}
#colophon p {line-height: 150%; padding-left: 36px;}
#colophon .right p {padding-left: 50px;}
#colophon .phone {background: url("../images/icon_phone.gif") 0 0 no-repeat;}
#colophon .location {background: url("../images/icon_loc.gif") 0 0 no-repeat;}
#colophon .mail {background: url("../images/icon_mail.gif") 0 4px no-repeat;}
#colophon .time-1 {background: url("../images/icon_uhr_1.png") 0 4px no-repeat;}
#colophon .time-2 {background: url("../images/icon_uhr_2.png") 0 4px no-repeat;}
#colophon .time-3 {background: url("../images/icon_uhr_3.png") 0 4px no-repeat;}
#colophon a {color: #f7f7f7; text-decoration: none;}
#colophon a:hover {color: #0a519d; text-decoration: underline;}

#footer-nav-container {width: calc(100% - 20px); max-width: 1000px; margin: 0 auto; padding-bottom: 100px;}
.footer-nav {list-style: none; margin:20px 0 0 0; padding:0;}
.footer-nav li {display: inline;}
.footer-nav li a {display: inline-block; color: #6f6f6f; padding: 0 0 0 25px; text-decoration: none;}
.footer-nav li.ds a {background: url("../images/icon_datenschutz.gif") 0 2px no-repeat; margin-right: 16px;}
.footer-nav li.imp a {background: url("../images/icon_impressum.gif") 0 2px no-repeat;}
.footer-nav li:hover a {color: #0a519d;}
.credit {height: 35px; text-align: center; font-size: 12px; padding-top: 20px;}
.credit a {color: #6f6f6f; text-decoration: none}
.credit a:hover {color: #0a519d;}
/* ----------------------------- */
/* --------- Specials ---------- */
/* ----------------------------- */

#termin-button {width: 244px; position: absolute; left: calc(50% - 122px); bottom: -24px; z-index: 99999}
#termin-button p {margin: 0; text-align: center;}
#termin-button a {display: block; width: 244px; height: 66px; background: url("../images/terminvereinbarung.png") 0 0 no-repeat; }
#termin-button a span {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

/* --------- Accordion --------- */
.faq {width: calc(100% - 40px);margin: 20px 20px 60px 0;}
.faq dt {width:100%;color:#fff;font-size:18px;padding:12px 20px;border-bottom:solid 1px #fff;}
.faq dt {background:#9999cc;}
.faq dd { display:none;padding:24px 20px;line-height:140%;}
.faq a {display:inline-block;width:15px;height:16px;float:right;background-position:0 0; background-repeat:no-repeat;}
.faq .closed {background-image:url(../images/arr_down.gif);}
.faq .open {background-image:url(../images/arr_up.gif);}
.faq a span {position:absolute;left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}


/* ---------- Google Map ----------- */
.map {
	position: relative;
	padding-bottom: 100%;
	height: 0;
	overflow: hidden;
}
.map iframe {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ---------- Slider ----------- */
#slider-container-top {position:relative; width: 100%;}
#slider-container-bottom {position: relative; width: 100%; max-width: 1680px; margin: 20px auto 0 auto; padding-bottom: 40px; overflow: hidden !important}
.slidertext {position: relative;bottom: 64px; }
.slidertext h3 {}
.slidertext p {}

#slider-container-bottom .carousel {width: 100%; max-width: 1000px; margin: 0 auto;}
#slider-container-bottom li {width: 200px; margin: 0 auto; text-align: center; }
#slider-container-bottom li img {display: inline-block; width: 48px; height: 64px; margin: 0 auto; padding: 18px 0 66px 0;}
#slider-container-bottom li a {font-size: 14px; text-decoration: none; color: #545454; padding-bottom: 10px; display: inline-block;}


/* ---------- Kontaktformular ----------- */
#kontaktformular {width:100%; max-width: 580px; margin: 0 auto 80px auto;}
#kontaktformular label {width:100%; display:block;margin:20px 0 5px 0;}
#kontaktformular .cb label {display: inline; }
#kontaktformular input[type="text"] {padding:10px;width:100%;max-width:400px; border: solid 1px #E0E0E0;}
#kontaktformular textarea {padding:10px;width:100%;max-width:400px; border: solid 1px #E0E0E0; }
#kontaktformular .internal input {display: none;}
#kontaktformular input#captcha_input {max-width: 200px;}
#kontaktformular input[type="submit"] {color:#fff; padding: 10px 30px;font-size:16px;background: #0e71b8;cursor:pointer; font-weight: 100 !important; text-transform: uppercase; margin-top: 20px;border: solid 1px #0e71b8;}
#kontaktformular input[type="submit"]:hover {background:#fff;color:#0e71b8;}

/* ----------------------------- */
/* ------- Media Queries ------- */
/* ----------------------------- */
@media screen and (max-width: 567px) {
	#kontaktformular input[type="text"],
	#kontaktformular textarea {max-width:calc(100% - 20px);}
	#colophon h3 {max-width: calc(100% - 20px);}
}
@media screen and (max-width: 767px) {
	#container {padding-bottom: 150px;}
}
@media screen and (min-width: 768px) {
    #logo a {width: 317px;}
	.cols-2.team {text-align: center;}
	.cols-2.left .teammember {float: right;}
	.cols-2.right .teammember {float: left;}
	.footer-nav {margin:5px 0 0 42px; }
	.map {padding-bottom: 66.7%;margin-top:30px;}
}
@media screen and (max-width: 1023px) {
	.desktop-only {display:none;}
	#logo a {margin:20px auto;}
	article img.floatleft {float: none;margin: 20px auto;display: block;}
	article img.floatright {float: none;margin: 20px auto;display: block;}
	.inhalt-schmal {width: calc(100% - 40px); padding: 0 20px;}
	#kontaktinfo {padding: 20px;}
	#kontaktinfo .cols-2 p {margin-bottom: 26px;}
	#colophon h3 {margin-left: 50px;}
	#colophon .right h3 {margin-top: 50px;}
	#colophon p {padding-left: 50px;}
	#colophon .footer-nav {margin:20px 0 0 0; }
	.slidertext {display:none;}
}
@media screen and (min-width: 1024px) {
	.mobile-only {display:none;}
	.grau {padding-top: 10px; margin-top: 40px;}
	#logo {margin: 64px 18px 50px 0; float:right;}
	.off-canvas-nav ul {display:none;}
	.main-nav {width: calc(100% - 360px); float:left; margin:116px 0 0 0; }
	.main-nav ul {display:block; list-style:none; }
	.main-nav li {display:inline; position: relative;}
	.main-nav li a {display:inline-block; font-size:22px; color:#c6c1c1; padding:0 0 19px 0; margin:0 10px 0 10px; text-transform:uppercase;  text-decoration: none; font-weight: 400;}
	.main-nav li:hover > a,
    .main-nav li.active > a {text-decoration:none; color: #09519c; background: url("../images/menu_active.gif") 50% 100% no-repeat;}
	.main-nav ul ul {position: absolute; top: 100%; left: -9999px; z-index:9999; background: rgba(255,255,255,.98); padding-top: 40px; width: 300px;}
	.main-nav ul li:hover ul {left: 0;}
	.main-nav ul ul li a {display: block; font-size: 20px; margin: 10px 20px; text-transform: none;}
	.main-nav ul ul li:hover a,
	.main-nav ul ul li.active  a {background: none;}

	article img.floatleft {margin: 0 20px 20px 0;}
	article img.floatright {margin: 0 0 20px 20px;}
	.cols-row {display: flex; flex-direction: row;}
	.cols-2.left {width: calc(50% - 27px); float: left;}
	.cols-2.right {width: calc(50% - 27px); float: right;}

	.cols-2.left.vita {width: 320px; }
	.cols-2.right.vita {width: calc(100% - 360px);}
    
	#kontaktinfo {margin-top: 97px; }
	#kontaktinfo .cols-2.left {width: calc(70% - 83px); text-align: right; border-right: solid 3px #3194c7; padding: 10px 80px 10px 0;}
	#kontaktinfo .cols-2.right {width: calc(30% - 80px); padding: 66px 0 0 80px;}
	#kontaktinfo .cols-2 p {font-size: 36px; line-height: 150%;}
	#kontaktinfo .cols-2 small {font-size: 20px;line-height: 150%;}
    
	.cols-3 {float: left; }
	.cols-3.left {width: calc(33.3% - 42px); padding: 0 42px 0 0;}
	.cols-3.middle {width: calc(33.3% - 84px); padding: 0 42px;}
	.cols-3.right {width: calc(33.3% - 42px); padding:0 0 0 42px;}
	.cols-3.leistung {padding: 48px 42px 20px 42px;}

	#colophon {margin-top: 90px;}
    #colophon .right h3 {margin-left: 50px;}
    #footer-nav-container {background: url("../images/footer-schatten.jpg") 50% 0 no-repeat; padding-top: 20px;}
	
	
	#kontaktformular {max-width:100%;}
	#kontaktformular .cols-2 {width: 48%;}
	#kontaktformular .cols-2.first {float: left;}
	#kontaktformular .cols-2.last {float: right;}
	#kontaktformular input[type="text"] {max-width:100%;}
	#kontaktformular textarea {max-width: 100%; margin-left: -5px;}

	.map {width:100%;height:350px;padding-bottom:0;margin:0;}
	.map iframe {margin:0;}
	/*.slidertext {display: none;}
	.slidertext.animated {display: block;}*/
	.slidertext {position: absolute; top: 90px; left: 28px; z-index: 9999;}
	.slidertext h3 {font-size: 64px; color: #fff; background-color: rgba(75,119,184,.9); padding: 16px 26px; margin: 0 0 24px 0; font-weight: 700; }
	.slidertext p { display: inline-block; font-size: 54px;line-height: 150%; font-weight: 400; color: #fff; padding: 10px 40px; background-color: rgba(75,119,184,.9); }
    #slider-container-bottom .carousel {width: 100%; max-width: 1000px; margin: 0 auto;}
    #slider-container-bottom li {width: 200px; margin: 0 auto; text-align: center; background: url("../images/leistungen_trenner.png") 100% 0 no-repeat;}
    #slider-container-bottom li img {display: inline-block; width: 48px; height: 64px; margin: 0 auto; padding: 18px 0 66px 0;}
    #slider-container-bottom li a {font-size: 14px; text-decoration: none; color: #545454; padding-bottom: 10px; display: inline-block;}

}

.galerie {
width: calc(100% - 40px);
padding: 0 20px 40px 20px;
max-width: 1100px;
margin: 0 auto;
}

.galerie li {
    display: inline-block;
    position: relative;
    margin: 13px;
    padding: 0;
}

.galerie li img {
    position: relative;
    margin: 12px 0 50px 0;
    -webkit-box-shadow: 0px 35px 53px -45px rgba(66,62,63,1);
    -moz-box-shadow: 0px 35px 53px -45px rgba(66,62,63,1);
    box-shadow: 0px 35px 53px -45px rgba(66,62,63,1);
}