/* Maatwerk Breman Rioolservice */ /* Overgenomen uit aangepaste enfold/css/layout.css (r. 28-29, 2019). Bovenaan gezet zodat de cascade-volgorde gelijk blijft (layout.css laadde vóór custom.css). */ .ontstoppingsdiensten a {display:inline-block!important;} #diensten .ontstoppingsdiensten a img {margin-right:20px;} /* Overgenomen uit enfold/css/custom.css (2019) */ .titelverandering h2{ font-size:20px !important; } .main-title a{color:#000000 !important; } .mobielknop { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; display: none; } .mobielknop div { flex: 1; text-align: center; padding: 10px 0; } .mobielknop .whatsapp { background: #25d366; } .mobielknop .belbtn { background: #2e799f; } .mobielknop a,.mobielknop i{ font-size: 20px; color: white; } .mobielknop .belbtn i { display: inline; } .mobielknop i { margin-right: 10px; } .mobielknop .whatsapp i { font-size: 28px; margin-right: 0; } /* General Custom CSS */ #top h1, #top h2, #top h3, #top h4, #top h5, #top h6 {font-family:'Bitter', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-transform: none;font-weight:bold;} #top #wrap_all #main h1 {} #top #wrap_all #main h2 {font-size:38px;} #top #wrap_all #main h3 {font-size:28px;font-weight:bold;} #top #wrap_all #main h4 {} #top #wrap_all #main h5 {} #top #wrap_all #main h6 {font-size:21px;} #top #wrap_all #main #hero .btn-bellen a {padding:12px 15px!important;box-shadow:0px 2px 6px #000;} .btn-bellen a:before {content:"\f095";font-family:"Font Awesome 5 Free";font-weight:600;margin-right:10px;} #top .av-subheading.av_custom_color {opacity:1;} #top .av-subheading.av_custom_color p {font-style:italic;} #intro {padding:35px 0;} #list .custom-list {margin-top:35px;} #list .custom-list ul, .custom-list ul, .custom-checklist ul {list-style:none;} #list .custom-list ul li {font-weight:bold;margin-top:15px;margin-left:0;} #list .custom-list ul li:before, .custom-list ul li:before {content:"\f058";font-family:"Font Awesome 5 Free";font-weight:600;margin-right:10px;color:#3e90dd;font-size:21px;} #hero img {margin-bottom:25px;} #hero .avia-button.avia-size-x-large {padding:25px 40px 23px;background:#ff672a;} #hero .hero-button, #hero .hero-button a {width:100%;} #hero .av_one_third {margin-left:2%;width:33.333333%;} #hero .hero-button a {box-shadow:0px 2px 6px #aaa;font-size: 18px;padding: 20px!important;border-radius: 5px;} #hero ul, #hero ul li {margin-left:0;} #hero ul li {font-size:21px;} #diensten img {background:#3e90dd;border-radius:5px;margin-right:25px;} #diensten img:last-child {margin-right:0;} #hero .hero-list, #hero .hero-button {padding:0 25px;} #hero .hero-247-img img {margin-top:-100px;margin-right:75px;} #hero .content {padding-bottom:25px;} .custom-checklist {margin-top:25px;} .custom-checklist ul, .custom-checklist ul li {margin-left:0;} .custom-checklist ul li {margin-bottom:15px;} .custom-checklist ul li:before {content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:600;margin-right:10px;color:#3e90dd;font-size:21px;} #top .phone-info {font-size:15px;} #top .phone-info i {color:#ff672a;} #top .orange-button a, #top .gray-button a {width:100%;font-size:18px;border-radius:5px;box-shadow:0px 2px 6px #aaa;padding:15px;} #top .orange-button a {background:#ff672a;color:#fff;} #top .gray-button a {background:#eaeaea;color:#000;} #top .gray-button-small a {width:100%;font-size:14px;border-radius:5px;box-shadow:0px 2px 6px #aaa;padding:10px 20px;} .cta-custom-bg {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;width: 300px;height: 250px;border: none;font: normal 100%/normal Arial, Helvetica, sans-serif;color: rgba(0,0,0,1);-o-text-overflow: clip;text-overflow: clip;background:#f7f7f7;-webkit-transform:skewX(-20deg);transform:skewX(-20deg);padding:10px 20px 10px 75px;box-shadow:inset 0px 11px 8px -10px #666, inset 0px -11px 8px -10px #666;} .cta-custom-bg-text {webkit-transform:skewX(20deg);transform:skewX(20deg);} #custom-cta { box-shadow: inset 0px 11px 8px -10px #666,inset 0px -11px 8px -10px #666; } .cta-custom-bg-text .custom-list ul, .cta-custom-bg-text .custom-list ul li {margin-left:0;} .cta-custom-bg-text .custom-list ul li {margin-bottom:5px;} .cta-custom-bg-text h3 {margin-bottom:15px;} .cta-custom-bg-text .custom-list {margin-top:15px;} .custom-cta-buttons h3{color:#fff;text-align: right;margin-bottom:25px;} .custom-cta-buttons a {border:2px solid #fff;color:#fff;border-radius:5px;padding:15px 20px;display:block;width:100%;text-align: center;box-shadow:1px 2px 6px #333;} .custom-cta-buttons .custom-cta-orange {background:#ff672a;color:#fff;padding:15px 20px;border-radius:5px;box-shadow:1px 2px 6px #333;border:none;margin-bottom:15px;} .custom-cta-buttons .custom-cta-orange:before {content:"\f095";font-family:"Font Awesome 5 Free";font-weight:600;margin-right:10px;} .custom-cta-buttons-left {width:45%;float:left;} .custom-cta-buttons-left img {max-width:65%;text-align: right;margin-left:15px;} .custom-cta-buttons-right {width:55%;float:left;} #custom-cta .av-flex-placeholder {display:none;} #top #wrap_all #main #footer h3 {font-size:18px;color:#333;margin-bottom:25px;} #top #wrap_all #main #footer ul a {padding:2px 0;} #footer, #footer a {padding:0;font-size:15px;} .footer-5 {text-align: center;display:flex;align-items: center;justify-content: center;padding:15px 0;} .footer-5 #black-studio-tinymce-2 {padding:0;} .footer-5 .google-reviews-pro, .footer-5 img {float:left;} .footer-5 .google-reviews-pro {padding:0;clear:none;} .footer-5 img {max-width:85%;} .footer-5 p {margin:0;} .footer-copyright {text-align: center;background:#f9f9f9;padding:15px 0;font-size:15px;} .footer-copyright a {color:#444;} .footer-contact, .footer-contact td, .footer-contact a {font-size:15px;} .footer-contact i {color:#3e8fdd;margin-right:5px;} #top .footer-contact td {padding:0;} #info-blocks .av-special-heading-h3 {margin-top:10px;} #info-blocks .av_textblock_section {text-align: center;padding:0 25px 50px 25px;} #info-blocks .av_textblock_section p {padding-top:0;} #top .logo img {max-width:75%;margin-top:15px;} /* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 768px) { } /* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (min-width:990px) and (max-width:1125px) { #top .logo img {margin-top:22px;max-width:60%;} .av-main-nav > li > a {padding:0 5px;} } @media only screen and (max-width:1060px) { #hero .hero-list-padding {padding:1em!important;} } @media only screen and (min-width:768px) and (max-width:1060px) { #hero .hero-list, #hero .hero-button {padding:0;} } @media only screen and (max-width:925px) { #hero .hero-247-img img {display:none;} } @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #hero img {margin:0 auto;} #hero .avia-image-container {float:none;} #hero h1, #hero .av-subheading {text-align: center;} #hero .btn-bellen p {text-align: center!important;} #top #wrap_all #main h2 {font-size:24px;} .footer-5 {flex-direction: column;} .footer-5 img {max-width:100%;margin-bottom:25px;} .custom-cta-buttons-right {width:100%;} .custom-cta-buttons h3 {text-align: left;} .custom-cta-buttons-left img {max-width:100%;margin-bottom:15px;} #diensten {text-align: center;} #diensten img, #diensten .ontstoppingsdiensten a img {margin-right:10px;} } @media only screen and (max-width: 480px) { #hero .hero-list, #hero .hero-button {padding:0 5px;} #hero .hero-list-padding {padding:15px!important;} .cta-custom-bg {padding:10px 20px 10px 45px;} .mobielknop { display: flex; } } @media only screen and (max-width:410px) { #diensten img, #diensten .ontstoppingsdiensten a img {max-width: 120px;} } /* Compatibiliteit Enfold 8.x -> weergave zoals onder Enfold 4.1.2 ================================================== */ /* Enfold 4.7.5.1+ zet 50px ruimte tussen opeenvolgende rijen equal-height kolommen; 4.1.2 had geen ruimte. */ #top .flex_column_table.av-equal-height-column-flextable:not(:first-child) {margin-top:0;} /* Enfold 8 laat formuliervelden het bodyfont (Lato) erven (dynamische CSS: #top .main_color input {font-family:inherit}); 4.1.2 gebruikte Helvetica Neue. */ #top #wrap_all .input-text, #top #wrap_all input[type="text"], #top #wrap_all input[type="input"], #top #wrap_all input[type="password"], #top #wrap_all input[type="email"], #top #wrap_all input[type="number"], #top #wrap_all input[type="url"], #top #wrap_all input[type="tel"], #top #wrap_all input[type="search"], #top #wrap_all textarea, #top #wrap_all select {font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;} /* Enfold 8 kleurt bij "Animated numbers" met eigen kleur alleen het getal (beschrijving heeft aparte optie custom_color_desc). In 4.1.2 kreeg ook de beschrijving de eigen kleur. Alleen gebruikt op /ontstoppingsdiensten/onderhoudscontract/ (pagina 624). */ #top.page-id-624 .avia-animated-number.avia-color-font-custom .avia-animated-number-content {color:#c4c4c4;} /* Enfold 4.7.4.1+ maakt .flex_column_table float:left. Op mobiel (display:block) valt de onder-marge van de laatste kolom daardoor niet meer samen met die van de rij (+20px tussen kolomrijen). Zoals in 4.1.2: geen float op mobiel. */ @media only screen and (max-width: 767px) { .responsive #top .flex_column_table {float:none;} } /* Ruimte onder de copyright-balk zodat de vaste mobiele knoppenbalk (52px, zichtbaar t/m 480px) er niet overheen valt. */ @media only screen and (max-width: 480px) { .footer-copyright {padding-bottom:calc(15px + 52px);} }