/* General Style */ 
/* meinespanndecke.de*/
/* by Thomas Schmid, below the line, Webmarketing, Friedberg*/

@font-face {font-family: "Klara";font-style: normal;src: url("../fonts/Karla-VariableFont_wght.ttf") format("truetype");}
@font-face {font-family: "Lato";font-style: normal;src: url('../fonts/Lato-Regular.ttf') format("truetype");}

body {background-size:100%;background-position:top;background:#ffffff;font-size:100%;margin:0em;padding:0em;font-family: "Klara", arial, san-serif;color:#2f2d2c;}

h1 {font-size:2em;font-weight:600;margin:0 0 0.5em;text-transform:uppercase;font-family: "Lato", arial, sans-serif;text-decoration:underline #f68712;}
h2 {font-size:1.8em;margin:2em 0 0;padding:0em;font-family: "Lato", arial, sans-serif;}
h2.first{margin:0.5em 0;}
h3 {margin:0 0 0.5em;padding:0; font-family: "Lato", arial, sans-serif;}
h4 {font-size:1.5em;color:#054f95;margin:0em;padding:0em;font-family: "Lato", arial, sans-serif;}
h5 {font-size:1.6em;color:#054f95;margin:0em;padding:0em;}
a img{box-shadow:0 0 0;}
p {line-height:1.3em;margin:0em 0em 0.5em 0em;font-size:1.2em;}
hr.style1 {margin:2em 0;border:0;height:2px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(246, 135, 18, 1), rgba(120, 197, 60, 0));}
ul {margin:0px;padding:0px;}

ul.vorteile li{list-style:inside;font-size:1.2em;font-weight:300;}

img {margin: 0 3% 1% 0;height:auto;float:left;border-radius:5px;box-shadow: 5px 5px 5px;}

/* Header */ 
header {background: #eeeeee;width:100%;0;position:fixed;z-index:7777;top:0;box-shadow:0 0 5px 5px rgba(100, 100, 100, 0.5);-webkit-transition: all 0.4s ease;transition: all 0.4s ease;color:#2f2419;}
#banner{width:80%;margin:auto;height:7em;}
#banner-top{width:15%;}
#banner-top img{width:100%;}
#banner .kopf{width:84%;float:right;text-align:right;padding:1em 0 0 0;}
#banner a p{color:#f68713;font-size:1em;margin:0;padding:0;line-height:1;}

header.neu #banner{height:3em;}
/*header.neu #banner-top, header.neu .kopf{display:none;}*/
header.neu{position:fixed;top:0;padding:0;box-shadow:0 0 5px 5px rgba(100, 100, 100, 0.5); background: #2f2419;}
header.neu nav.nav{width:70%;margin: 0 auto;}
header.neu #banner .kopf{color:#ffffff;}

/*Navigation*/
header nav li{border-bottom:none;}
header nav.nav {width: 80%;padding: 0;margin: 0;float:right;}
header nav ul{text-align:center;padding: 0 0 0.3em 0;}
header nav ul li {display: inline-block;padding: 0 0 0.4em;margin: 1em 0 0 1.5em;}
header nav li.active a{color:#2f2419;}
header.neu nav li.active a{color:#ffffff;}
header nav li.active{border-bottom:2px solid #f68713;}
nav ul {display:block;}
nav li:hover a{color:#2f2419;}
header.neu nav li:hover a{color:#ffffff;}
nav a{color: #9a9a9a;text-decoration:none;font-size: 1.1em;}
nav li {border-bottom:1px solid #000000;}
nav li.active a{color:#2e2e2e;}
.nav p{color:#f68712;text-align:right;}

/*Kategorieüberschrift*/
/*.top{background-color:#f25762;display: inline-block;margin: 0 0 2.5%;padding: 1.5% 2.5% 1.5% 1%;width: 30%;}*/
/* On Top Bar */
#menubar {display:none;background:#FFFFFF;}
#menubar img{width:100%;}
#menubar ul {display:block;padding:0.9em;}
#menubar ul li {display:inline;}
#menubar ul li a.menubutton {display:none;color: #ffffff;}

/*slider*/
#slider{height:60vh;background-size:100% auto;margin-top:7em;}
.startseite #slider{color: #ffffff;background-image: url(../images/slider/spanndecke_neu.jpg);}
.textil #slider{color: #ffffff;background-image: url(../images/slider/textil.jpg);}
.bedruckt #slider{color: #ffffff;background-image: url(../images/slider/bedruckte.jpg);}
.glanz #slider{color: #ffffff;background-image: url(../images/slider/glanz.jpg);}
.akustik #slider{color: #ffffff;background-image: url(../images/slider/akustik.jpg);}

#slider-bg{position: absolute;bottom: 10em;left: 28%;width: 40%;padding: 1em 2%;margin: 0 0 0 0;border-radius: 10px;background-image: linear-gradient(45deg, #f68712, #2f2419);transform: skewY(-1deg);box-shadow:-10px 10px 10px #2f2419;border:1px solid #ffffff;}
#slider img{width:100%;}
.block-2{display: grid;grid-template-columns: 70% 30%;margin: auto;}
.slider-head{width:100%;max-width:1280px;margin:0 auto 0;padding: 3em 0 0 0;}
.slider-head h2{font-size:4em;font-weight:600;text-shadow: 0 0 3px #2f2419;}
.slider-head p{font-size:3em;font-weight:600;text-shadow: 0 0 3px #2f2419;}

.bilder-block-2{display: grid;grid-template-columns: 50% 50%;margin: auto;grid-row-gap: 20px;grid-column-gap: 20px;}
.bblock-2-item{cursor:pointer;}
.bb-bild{overflow:hidden;}
.bblock-2-item img{width:100%;transition: all 0.5s linear;border-radius:0;box-shadow:none;}
.bblock-2-item img:hover{-webkit-transform: scale(1.05);max-width:100%;cursor:pointer;}

.bb-text{background:#ffffff;}
.bblock-2-item p{margin:0;font-size:2em; color:#000000;text-decoration:underline #f68712;}
.bblock-2-item p a, .bblock-2-item p a:visited{color:#f68712;}
.block-2-item .bblock-2-item p{margin:0;font-size:1.3em;}

/*Hauptteil*/
#main{margin:0 auto;text-align:center;width:100%;padding:6em 0 0;background:#ffffff;}
#main article {display: inline-block; width: 100%; vertical-align: top;padding: 2em 0;text-align: left;max-width: 1280px;margin: 2em 0 0 0;}
#startseite #main article{text-align:center;}

/* Footer */ 
footer {display:block;background: #2f2419;margin:auto;text-align:center;}
footer ul {max-width:1280px;margin:auto;color:#ffffff;text-align:center;}
footer ul li{margin: 2.5% auto;padding: 0 2.5% 0 1%;width: 29%;display:inline-block;vertical-align:top;color:#ffffff;}
footer ul li a:hover {color:#f68713;padding:0;}
footer ul li a.active {border-bottom:#ffffff;}
footer ul li a {color:#9a9a9a;transition: filter 0.9s ease 0s;}
footer ul li.left{text-align:left;}
footer ul li.right, footer ul li.right ul li{text-align:right;}
footer ul li.right ul li{width:100%;}
footer ul li ul li{display:block;padding:0;}
footer h3{color:#f68713;}
footer p{font-size:1em;}

/*Side Icons*/
.side-icon{position:fixed;top:12em;right:0;}
.i-phone, .i-kontakt, .i-facebook{width:3em;hight:3em;}
.i-phone a, .i-kontakt a, .i-facebook a{height: 3em;position: fixed;width: 3em;}
.i-kontakt{margin-top:3.5em}
.i-facebook{margin-top:7em;}
.i-phone a{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/phone-on.png") no-repeat scroll 0 0 / 100% auto;}
.i-kontakt a{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/letter-on.png") no-repeat scroll 0 0 / 100% auto;}
.i-facebook a{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/facebook-on.png") no-repeat scroll 0 0 / 100% auto;}
.i-phone a:hover{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/phone.png") no-repeat scroll 0 0 / 100% auto;}
.i-kontakt  a:hover{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/letter.png") no-repeat scroll 0 0 / 100% auto;}
.i-facebook  a:hover{background: rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/facebook.png") no-repeat scroll 0 0 / 100% auto;}

/*Module*/
aside {}
aside img{float:none;}
aside .part1{padding:2em 0;max-width:1280px;width:100%;margin:0 auto;}
aside .part4{padding:2em 0;width:100%;margin:0 auto;background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/bg-plan.jpg") no-repeat fixed 0 0 / 100% auto;}
aside .part4 .part1{background-color: rgba(255, 255, 255, 0.96);
padding: 2em 2%;}
aside .part-video {padding: 2em 0; max-width: 1280px;width: 100%;margin: 0 auto;}
aside .part-video .video-box{display: grid;grid-template-columns: 50% 50%;}

aside .video{width:35%;margin-right:5%;text-align:center; display:inline-block;vertical-align:top;}
aside .video-text{width:54%;margin-left:5%;text-align:left;display:inline-block;vertical-align:top;}

aside .part1-text{width:54%;margin-left:5%;text-align:left;display:inline-block;vertical-align:top;}
aside .part-video .part1-text{width:100%}
aside .part-video .part1-text h2{margin-top:0em;}
/*aside .part1-bild{width:40%; text-align:left; display:inline-block;vertical-align:top;}*/
aside .part1-bild{width:100%; display:inline-block;vertical-align:top;}
aside .part1-bild img{width:100%;margin:0;paddig:0;}

aside .part-raum {width:100%;height:auto;}
aside .part-raum .block-4er, aside .part-raum .block-4er-typen{display: grid;grid-template-columns: 25% 25% 25% 25%;margin: 0 auto 3em;grid-row-gap: 0px;grid-column-gap: 0px;}
aside .part-raum .block-4er .block-4er-item, aside .part-raum .block-4er-typen .block-4er-item{height:24em;}
.block-4er-item p{font-weight:700;font-size:1.5em;padding:1em 2em;color:#ffffff;text-shadow:1px 1px 1px #232323;}
aside .part-raum .block-4er .wohnzimmer{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/wohnzimmer.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er .bad{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/bad.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er .flur{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/flur.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er .gewerblich{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/gewerblich.jpg") no-repeat 0 0 / auto 100%;}

aside .part-raum .block-4er-typen .textil{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/textilspanndecken.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er-typen .lack{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/lackspanndecken.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er-typen .bedruckt{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/bedrucktespanndecken.jpg") no-repeat 0 0 / auto 100%;}
aside .part-raum .block-4er-typen .akustik{background:rgba(0, 0, 0, 0) url("/templates/c.l.i.spanndecken/images/akustikdecken.jpg") no-repeat 0 0 / auto 100%;}

aside .part4-bild{width:35%;margin-right:5%;text-align:center; display:inline-block;vertical-align:top;:float:none;}
aside .part4-text{width:54%;margin-left:5%;text-align:left;display:inline-block;vertical-align:top;}

.part4{background:#eaeaea;padding: 2em 0;}
.part4 .visCSSinput{background:#f2f2f2;font-size:1em;width:90%;}
.part4 .field16 .visCSSinput{width:100%;height:6em;}
.part4 .visform input:not(.btn){background:#f2f2f2;}
.part4 fieldset{max-width:1200px;margin:auto;text-align:left;}
.part4 h2{text-align:center;color:#f68713;}
.part4 .part4-bild p{max-width:1200px;font-size:1em;text-align:right;margin:auto;}
.part4 .part4-text p{max-width:1200px;text-align:left;margin:auto;}
.part4 .part4-bild h3{text-align:right;}
.part4 .part4-text h3{text-align:left;font-size:1.5em;font-weight:600;}
.part4 .category-desc p{font-size:0.9em;font-style:italic;}
.part4 fieldset .visCSSlabel{float:none;width:90%;}
.part4 hr{margin:0;}
.part4 .dstext{font-size:0.9em;}

fieldset{border:none;}
.part4 .fc-tbxfield1,.part4 .fc-tbxfield2,.part4 .fc-tbxfield3,.part4 .fc-tbxfield4,.part4 .fc-tbxfield5,.part4 .fc-tbxfield6,.part4 .fc-tbxfield7,.part4 .fc-tbxfield8,.part4 .fc-tbxfield9{width:100%;text-align:left;}
.part4 .field8,.part4 .field9,.part4 .field10,.part4 .field11,.part4 .field12,.part4 .field13,.part4 .field14,.part4 .field15{display:inline-block;width:50%;}
.part4 .field16{width:95%;}

/*Änderungen für neuen Auftritt*/
button.bnt, .visBtnCon .btn{margin: 0 0 0 15px;font-size: 1em;padding: 0.2em 1%;color:#ffffff;font-weight:600;background:#f68712;border:1px solid #cccccc;border-radius:5px;cursor:pointer;}
button.bnt:hover, .visBtnCon .btn:hover{transition: 0.5s;background:#ffffff;color:#f68712;border:1px solid #f68712;}
.info-bnt{text-align:center;margin-top:2em;}
.info-bnt button.bnt{padding:2%;box-shadow:-5px 5px 5px  #2f2419;font-size:1.5em;border:2px solid #cccccc;}
.info-bnt button.bnt:hover{box-shadow:-5px -5px 5px #2f2419;}

/*hamburger*/

.hamburger {padding: 15px 15px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible;text-align:right;width:96%;}
.hamburger-box {width: 5%;height: 2em;display: inline-block;position: relative;margin-top:1em;}
.hamburger #banner-text{text-align:center;display:inline-block;width:78%;vertical-align:top;}font-size:1.1em;
.hamburger #banner-text #logo{float:none;display:inline-block;width:100%;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 40px;height: 4px;background-color: #6da2df;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
.hamburger--collapse .hamburger-inner {/*top: auto;bottom: 0;*/transition-duration: 0.13s;transition-delay: 0.13s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {top: -20px;transition: top 0.2s 0.2s cubfont-size:1.1em;ic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {transform: translate3d(0, -10px, 0) rotate(-45deg);transition-delay: 0.22s;transition-timing-function: cubic-bezier(0.215, 0.61,0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {top: 0;opacity: 0;transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {top: 0;transform: rotate(-90deg);transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
.mobil {display:none;}

/* Mobile Style */
@media screen and (max-width:1240px) {
    h1{margin-top:2em;}
    #banner{width:95%;}
    .slider-head{width:90%;}
    #main{width:90%;}
    aside .part-video{width:90%;}
    .bilder-block-2{grid-template-columns:48% 48%; grid-column-gap:4%;}
    aside .part1{width:90%;}
    aside .part-raum .block-4er .block-4er-item, aside .part-raum .block-4er-typen .block-4er-item{height:15em;}
    #slider {height: 29em;}
    
}
@media screen and (min-width:991px) {
	nav.nav {
		display:block !important;
	}
}
@media screen and (max-width:990px) {
	body {font-size:90%;}
	#banner{text-align:right;}
	#slider{height:21em;}
	#slider h2{margin:0;}
	.grid-3{width:29%;}
	#banner{text-align:center;}
	.mobil {display:inline-block;width:95%;}
	nav.nav {display:none;}
	#slider-bg{width:70%;left:14%;top:26em;bottom:auto;}
	#banner-top{width:30%;display:inline-block;}
    #banner .kopf{width:70%;}
    header{height:7em;}
    #banner-top img{height:7em;width:auto;}
    header.neu #banner .kopf{display:inline-block;}
    nav.nav ul li{display:block;}
    header nav.nav{width: 100%;padding: 2em 0 1em 0;background: #eee;margin: -2em 0 0;}
    header.neu nav.nav{width: 100%;padding: 2em 0 1em 0;background: #2f2419;margin: -2em 0 0;}
    header nav ul{text-align:right;padding: 0 10% 0.3em 0;}
    header nav ul li{widht:50%;}
    aside .part4-bild img{max-width:100%;}
    aside .part-raum .block-4er{grid-template-columns: 50% 50%;}
	aside .part-raum .block-4er .bad, aside .part-raum .block-4er .flur, aside .part-raum .block-4er .gewerblich, aside .part-raum .block-4er .wohnzimmer{background-size: 100%;}
}

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

    .bblock-2-item p{font-size: 1.5em;}
        .footer ul {padding-top:3em;}
    .footer ul li{width:100%;padding:1em 0;margin:0;font-size:1.2em;}
    footer ul li.left, footer ul li.right, footer ul li.right ul li{text-align:center;}
    .footer ul li ul {padding-top:0;}
    .footer ul li ul li{padding-top:0;}
    aside .part-video .video-box{grid-template-columns:100%;}
    aside .part-video .part1-text{margin:2em 0 0 0;}
}
@media screen and (max-width:600px) {
    .startseite #slider,.akustik #slider,.textil #slider, .bedruckt #slider, .glanz #slider{height:15em;}
    #slider-bg{width:80%;left:9%;top:21em;}
    .slider-head h2{margin:0;font-size:3em;}
    .slider-head p{font-size:2em;}
    .hamburger-box{width:10%;}
    .bilder-block-2 {grid-template-columns: 100%;grid-column-gap: 0;}
    .part4 .field8, .part4 .field9, .part4 .field10, .part4 .field11, .part4 .field12, .part4 .field13, .part4 .field14, .part4 .field15{width: auto;}
    footer ul li.right ul li { width: 100%;font-size: 1em;}
    
}
@media screen and (max-width:500px) {
    h1{margin-top:0;}
/*    ul.slider{text-align:center;}
    ul.slider li{width:60%;margin:1em;}*/
    #slider p{margin:0;}
    #main{margin-top:8em;}
    aside .part4-bild{text-align:left;margin-left: 5%;width: 90%;}
    aside .part4-text{width:100%;}
    
}


/*img.badge{float:right;box-shadow:none;}*/

.sigplus-gallery a img{box-shadow:none;}

header.neu .nav p{display:none;}

.mod_sigplus .captionplus-overlay{height:20%;margin-bottom:0.5em;}