@charset "utf-8"; html { overflow-y: scroll; } body { padding: 0px; margin: 0px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #333; line-height:1.6; background-color: #333333; position:relative; } .CenterAll { margin: 0 auto 0 auto; width:100%; max-width: 1200px; } #Header { position:fixed; top:0px; width:100%; height:147px; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2); z-index:1000; } #Header .CenterAll { max-width:1000px; text-align:center; } #Logo { display:inline-block; width:250px; padding: 10px 0 0px 0px; text-align:left; } #Logo a { text-decoration: none; } .navbar { display:inline-block; width:740px; text-align:right; } .navbar .desktop { display: block; } .navbar .mobile { display: none; } .navbar .mobile, .navbar .mobile ul { padding: 0px; } #Bild { width:100%; } #Content { background: #e3e3e3; background: -moz-linear-gradient(left, #e3e3e3 0%, #ffffff 50%, #e3e3e3 100%); background: -webkit-linear-gradient(left, #e3e3e3 0%,#ffffff 50%,#e3e3e3 100%); background: linear-gradient(to right, #e3e3e3 0%,#ffffff 50%,#e3e3e3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#e3e3e3',GradientType=1 ); padding: 52px 10px 0px 10px; } #Content .CenterAll { padding:50px 0 50px 0; background-color:#fff; background-image:url('https://www.poppke-massivbau.de/images/ContentShaddowAnfang.png'); background-repeat:no-repeat; background-position:top; min-height:200px; max-width: 1200px; position:relative; } #ContentInner { margin:0 100px 0 100px; } #KontaktStoerer { width:500px; height:35px; position:absolute; top:-22px; right:50px; background-color:#cccccc; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; -webkit-box-shadow: 0px 0px 5px 1px rgba(204,204,204,1); -moz-box-shadow: 0px 0px 5px 1px rgba(204,204,204,1); box-shadow: 0px 0px 5px 1px rgba(204,204,204,1); color:#fff; padding-top:10px; padding-left:20px; } #Footer.CenterAll { color:#fff; max-width: 1200px; text-align:center; } #FooterInner { padding:20px 100px 20px 100px; } #Footer #Row1, #Footer #Row2, #Footer #Row3 { width:33%; display:inline-block; color:#fff; text-align:left; vertical-align:top; } #Copyright { color:#fff; border-top:1px solid #fff; margin-top:15px; padding-top:15px; padding-bottom:15px; text-align:center; } @media (max-width: 1100px) { } @media (max-width: 1026px) { #ContentInner { margin:0 75px 0 75px; } #FooterInner { padding:20px 75px 20px 75px; } #Footer #Row1 { display:block; width:100%; margin-bottom:20px; padding-bottom:20px; text-align:center; border-bottom:1px solid #fff; } #Footer #Row2, #Footer #Row3 { width:48%; } .navbar { width:590px; } } @media (max-width: 900px) { #ContentInner { margin:0 50px 0 50px; } #FooterInner { padding:20px 50px 20px 50px; } } @media (max-width: 850px) { #Logo { width:200px; } #Logo img { width:200px; height:auto; } .navbar { width:560px; } .white ul.mega-menu li { font-size:15px; } #Header { height:127px; } } @media (max-width: 800px) { #ContentInner { margin:0 25px 0 25px; } #FooterInner { padding:20px 25px 20px 25px; } } @media (max-width: 767px) { .navbar .desktop { display: none; } .navbar .mobile { display: block; } .navbar { text-align:left; width:100%; margin-top:5px; } #Logo { width:250px; } #Logo img { width:250px; height:auto; } #Header { position:relative; background-color:#fff; height:auto; } } @media (max-width: 600px) { #KontaktStoerer { display:none; } #Content .CenterAll { padding:25px 0 25px 0; } } @media (max-width: 549px) { #Footer #Row2, #Footer #Row3 { width:100%; display:block; text-align:center; } #Footer #Row2 { padding-bottom:20px; } } @media (max-width: 379px) { } @media (max-width: 269px) { } @charset "utf-8"; h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin: 0px !important; } .CMS_LINK_EDIT img, .CMS_LINK_SAVE img { float: none !important; padding: 0px !important; border: 0px none !important; } a { color: #69B52D; } a img { border: 0px none; } .clear { clear: both; } .small { font-size: 0.9em; } h1, h1 p { margin: 0px 0px 14px 0px; font-size: 30px; font-weight: 300; color: #000; } h2, h2 p { margin: 12px 0px 12px 0px; font-size: 24px; font-weight: 600; font-style: italic; } h3, h3 p { margin: 12px 0px 0px 0px; font-size: 18px; font-weight: 600; } p { font-size: 16px; margin: 0px 0px 12px 0px; } .bold { font-weight:700; } .italic{ font-weight:400; font-style:italic; } .grey { color:#cccccc; } .small { font-size:14px; } #KontaktStoerer span{ font-size:14px; font-weight:600; vertical-align:top; margin-left:3px; } #KontaktStoerer span.telefon, #KontaktStoerer span.kontakt{ margin-right:33px; } #KontaktStoerer a { color:#fff; text-decoration:none; } #KontaktStoerer a:hover { text-decoration:underline; } #Quotes { background-color:#ccc; margin:50px -50px 10px -50px; padding:25px 100px; border-bottom-right-radius: 10px; position:relative; } #Quotes.hide { display:none !important; } #Quotes .QuoteText p{ font-size:50px; font-weight: 300; color :#fff; text-align:center; line-height:1.3; } #Quotes .Quote { width:64px; height:51px; position:absolute; background-image:url('https://www.poppke-massivbau.de/images/Quotes.png'); } #Quotes .Quote.Anfang { top:25px; left:25px; } #Quotes .Quote.Ende { bottom:25px; right:25px; } #Footer a { color:#fff; text-decoration:none; } #Footer a:hover { color:#ccc; } @media (max-width: 1100px) { } @media (max-width: 1023px) { #Quotes { margin:50px -25px 10px -25px; } } @media (max-width: 900px) { } @media (max-width: 800px) { #Quotes { margin:50px 0px 10px 0px; } } @media (max-width: 767px) { #Quotes .QuoteText p{ font-size:40px; } #Quotes .Quote { display:none; } #Quotes { padding:25px 50px; } } @media (max-width: 549px) { #Quotes .QuoteText p{ font-size:30px; } } @media (max-width: 379px) { } @media (max-width: 269px) { } .mega-menu { font: normal 13px; list-style: none; position: relative; padding: 0; margin: 0; } .mega-menu .sub ul { display: block; } .mega-menu { background: #222; height: 40px; position: relative; } .mega-menu li { float: left; margin: 0; padding: 0; font-weight: bold; } .mega-menu li a { float: left; display: block; color: #fff; padding: 12px 25px; background: #222; text-decoration: none; } .mega-menu li.mega-hover a, .mega-menu li.mega-hover a:hover { color: #000; } .mega-menu li a:hover { background: #999; color: #000; } .mega-menu li .sub-container { position: absolute; } .mega-menu li .sub { background: #efefef; padding: 15px; } .mega-menu li .sub .row { width: 100%; overflow: hidden; clear: both; } .mega-menu li .sub li { list-style: none; float: none; width: 170px; font-size: 1em; font-weight: normal; } .mega-menu li .sub li.mega-hdr { margin: 0 10px 10px 0; float: left; } .mega-menu li .sub li.mega-hdr.last { margin-right: 0; } .mega-menu li .sub a { background: none; color: #111; padding: 7px 10px; display: block; float: none; font-size: 0.9em; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 15px; margin-bottom: 5px; background: #6B6B6B; text-transform: uppercase; font-weight: bold; color: #fff; } .mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; } .mega-menu .sub li.mega-hdr li a { padding: 4px 5px; font-weight: normal; } .mega-menu .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef; } .mega-menu .sub ul li { padding-right: 0; } .mega-menu li .sub-container.non-mega .sub { padding: 10px; } .mega-menu li .sub-container.non-mega li { padding: 0; width: 190px; margin: 0; } .mega-menu li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; } .mega-menu li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef; } .mega-menu ul, .mega-menu ul li {list-style: none;} .mega-menu ul {position: relative; padding: 0; margin: 0;} .mega-menu ul li ul {display: none;} .mega-menu .sub {display: none;} .mega-menu .sub ul {display: block;} .menu-button {background-color:#fff !important; border-top: 1px solid rgba(0, 0, 0, 0.2);} .white ul.mega-menu, .white ul.mega-menu, .white ul.mega-menu li {margin: 0; padding: 0; border: none;} .white ul.mega-menu {background: transparent; height: 40px; position: relative; text-align:right; width:auto; display:inline-block;} .white ul.mega-menu li {margin: 0; padding: 0; font-size: 16px;} .white ul.mega-menu li a {float: none; color: #666666; font-weight: 600; padding: 12px 0px 0px 0px; margin:0 28px 12px 10px; background:transparent; text-transform:uppercase; text-decoration: none; border-bottom:1px solid rgba(255,255,255,0);} .white ul.mega-menu li a.dc-mega {position: relative;} .white ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 8px; height: 6px; top: 23px; right: -15px; background: url('https://www.poppke-massivbau.de/images/MegaMenu/arrow.png') no-repeat 0 100%;} .white ul.mega-menu li a:hover , .white ul.mega-menu li.active a {color: #000; border-bottom:1px solid #75b843;} .white ul.mega-menu li .sub-container { position: absolute; padding-left: 0px; margin-top: 0px;} .white ul.mega-menu li .sub {background-color:rgba(255,255,255,0.9); padding: 0px 0px 0px 0px; text-align:left; border-bottom-right-radius: 10px;} .white ul.mega-menu li .sub-container.mega .sub {padding: 20px 0px 10px 0;} .white ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;} .white ul.mega-menu li .sub li {list-style: none; float: none; display:block; min-width: 100px; font-size: 1em; font-weight: normal; text-align:left;} .white ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #1e2045; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;} .white ul.mega-menu .sub ul li {padding-right: 0;} .white ul.mega-menu li .sub-container.non-mega .sub {padding: 5px 0px 0px 0;} .white ul.mega-menu li .sub-container.non-mega li {padding: 4px 0; min-width: 250px; width:auto; margin: 0; margin-left:15px;} .white ul.mega-menu li .sub-container.non-mega li a {color: #666666; padding: 7px 15px 7px 15px; text-transform: none; border-bottom:1px solid rgba(0,0,0,0);} .white ul.mega-menu li .sub-container.non-mega li.active a, .white ul.mega-menu li .sub-container.non-mega li a:hover {background:transparent; color: #000; border-bottom:1px solid #75b843;} .flexnav { -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; -webkit-transform-style: preserve-3d; overflow: hidden; margin: 0 auto; width: 100%; max-height: 0; } .flexnav.opacity { opacity: 0; } .flexnav.show { max-height: 2000px; opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .flexnav.one-page { position: fixed; top: 50px; right: 5%; max-width: 200px; } .flexnav li { font-size: 100%; position: relative; overflow: hidden; } .flexnav li a { position: relative; display: block; padding: 0px 10px; z-index: 2; overflow: hidden; line-height: 30px; text-decoration: none; color: #222222; background: #E2E2E2; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .flexnav li ul { width: 100%; } .flexnav li ul li { font-size: 100%; position: relative; overflow: hidden; } .flexnav li ul.show li { overflow: visible; } .flexnav li ul li a { display: block; background: #EAEAEA; } .flexnav ul li ul li a { background: #F2F2F2; } .flexnav ul li ul li ul li a { background: #cbcbc9; } .flexnav .touch-button { position: absolute; z-index: 999; top: 0; right: 0; width: 30px; height: 30px; display: inline-block; background: #acaca1; background: rgba(0, 0, 0, 0.075); text-align: center; } .flexnav .touch-button:hover { cursor: pointer; } .flexnav .touch-button .navicon { position: relative; top: 6px; font-size: 14px; line-height: 16px; color: #666; } .menu-button { position: relative; display: block; background: #a6a6a2; color: #222222; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .menu-button.one-page { position: fixed; top: 0; right: 5%; padding-right: 45px; } .mobile .mega-menu a, .mobile .mega-menu a:hover { padding: 12px 0px 12px 10px !important; text-shadow: 1px 1px 1px #FFF !important; background-position: left top !important; border: 0px none !important; } .menu-button .touch-button { background: transparent; position: absolute; z-index: 999; top: 0; right: 0; width: 34px; height: 50px; display: inline-block; text-align: center; } .menu-button .touch-button .navicon { position: relative; top: 11px; font-size: 16px; color: #666; } .oldie body.one-page { padding-top: 70px; } .oldie .flexnav { overflow: visible; } .oldie .flexnav.one-page { top: 0; right: auto; max-width: 1080px; } .oldie .flexnav li { position: relative; list-style: none; float: left; display: block; background-color: #a6a6a2; width: 20%; min-height: 50px; overflow: visible; } .oldie .flexnav li:hover > ul { display: block; width: 100%; overflow: visible; } .oldie .flexnav li:hover > ul li { width: 100%; float: none; } .oldie .flexnav li a { border-left: 1px solid #acaca1; border-bottom: none; overflow: visible; } .oldie .flexnav li > ul { background: #acaca1; position: absolute; top: auto; left: 0; display: none; z-index: 1; overflow: visible; } .oldie .flexnav li ul li ul { top: 0; } .oldie .flexnav li ul li a { border-bottom: none; } .oldie .flexnav li ul.open { display: block; width: 100%; overflow: visible; } .oldie .flexnav li ul.open li { width: 100%; } .oldie .flexnav li ul.open ul.open { margin-left: 100%; top: 0; display: block; width: 100%; overflow: visible; } .oldie .flexnav ul li:hover ul { margin-left: 100%; top: 0; } .oldie .menu-button { display: none; } .oldie.ie7 .flexnav li { width: 19.9%; } .SliderOuter { } .SliderOuter ul, .SliderOuter ul li { width:100%; margin:0; padding:0; } .bx-wrapper { position: relative; width:100%; width:100%; margin: 0 auto 0; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; vertical-align:middle; text-align:center; margin:auto !important; } .bxslider li { position:relative; } .bxslider li div.beschreibungOuter { position:absolute; top:250px; left:50%; width:360px; } .bxslider li div.beschreibungOuter .close, .bxslider li div.beschreibungOuter .show { position:absolute; top:-15px; right:-15px; } .bxslider li div.beschreibungOuter .show { display:none; } .bxslider li div.beschreibungOuter .close img, .bxslider li div.beschreibungOuter .show img{ cursor:pointer; } .bxslider li div.beschreibung { background-color:rgba(255,255,255,0.8); padding:25px 30px; border-bottom-right-radius: 10px; box-shadow: 0 0 5px 1px rgba(204, 204, 204, 1); } .bxslider li div.beschreibung h3{ margin: 0px 0px 0px 0px; border-bottom: 1px solid #75b843; } .bx-wrapper .bx-viewport { left: 0; max-height:815px; vertical-align:middle; } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } .bx-wrapper .bx-loading { min-height: 50px; background: url(https://www.poppke-massivbau.de/images/bxSlider/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } #bx-img-pager { margin-top:-80px; text-align:center; position:relative; z-index:10000; } #bx-img-pager img { border:3px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 4px 4px; } #bx-img-pager a.active img { border:3px solid #005caa; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 4px 4px; } .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 0; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } .bx-wrapper .bx-prev { left: 10%; background: url(https://www.poppke-massivbau.de/images/bxSlider/controls.png) no-repeat 0 -45px; } .bx-wrapper .bx-next { right: 10%; background: url(https://www.poppke-massivbau.de/images/bxSlider/controls.png) no-repeat -45px -45px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -45px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 80%; margin-top: -16px; outline: 0; width: 45px; height: 45px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(https://www.poppke-massivbau.de/images/bxSlider/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(https://www.poppke-massivbau.de/images/bxSlider/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } .bx-wrapper .bx-caption { max-width:700px; width: auto; margin:auto; } .bx-wrapper .bx-caption span { color: #636363; display: block; text-align:center; font-size:15px; font-weight:normal; line-height:1.4; padding: 10px; } .bx-wrapper .bx-pager { display:none !important; } @media (max-width: 767px) { .bx-wrapper img { width: 100%; display: block; } .bxslider li div.beschreibungOuter { display:none; } .bx-wrapper .bx-controls-direction a { top: 50%; } }