@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%; } @media (max-width: 600px) { .google-maps-area iframe{ max-height:400px !important; } } #headImageInner { max-width:100% !important; } .google-maps-area { position:relative; } .google-maps-area .google-map { margin-bottom: -6px; } .google-maps-area .google-map iframe { width:100% !important; } .google-maps-area .google-info { position:absolute; bottom:30px; right:50px; background-color: rgba(255, 255, 255, 0.8); padding:10px 10px 10px 10px; display:inline-block; text-align:right; } .google-maps-area .google-router { } .google-maps-area .startadresse { } .google-maps-area .zieladresse { display:none; } .google-maps-area .google-label { width: 150px; } .google-maps-area .google-text { } .google-maps-area .google-input { margin-bottom:15px; } .google-maps-area .google-input input[type="text"] { width: 300px; } .google-maps-area .google-button { display:inline-block; text-align:right; } .google-maps-area .google-button input[type="button"] { } .google-maps-area .google-additionaltext { } @media (max-width: 400px) { .google-maps-area .google-input input[type="text"] { width: 150px; } .google-maps-area .google-info { position:absolute; width:200px; } }