/** !
Theme Name: J&M Concrete
Theme URI: https://www.jmconcrete.com/
Description: Bespoke Theme for J&M Concrete using WordPress. Gutenberg compatible. Using Bootstrap 4 and Font Awesome 5.
Author: Elms Creative
Author URI: https://www.elmscreative.com/
Version: 1.0
Text Domain: elmscreative
*/

/* ==========================================================================
    Elements
   ========================================================================== */

    html, body { height:100%; }
    html { background:#fff; overflow:auto; }
    body { background:none; color:#121212; font-family:'Asap', Arial, Helvetica, sans-serif; padding:0; -webkit-font-smoothing:antialiased; }

    h1, h2, h3, h4, h5, h6 { margin:0 auto 1.25rem; color:#121212; text-transform:capitalize; font-weight:bold; font-family:'Telex', Arial, Helvetica, sans-serif !important; }
    p { font-size:0.95rem; line-height:1.6; }
    ul > li, ol > li { font-size:0.95rem; }

    input[type=text], input[type=url], input[type=email], input[type=tel], input[type=password], textarea { color:#121212; font-size:0.9rem; background:#f8f8f8; border:#e9e9e9 1px solid; -webkit-border-radius:65px; -moz-border-radius:65px; border-radius:65px; font-family:'Asap', Arial, Helvetica, sans-serif !important; }
    input[type=file] { color:#121212; }
    select { color:#121212; font-family:'Asap', Arial, Helvetica, sans-serif !important; height:auto; -webkit-appearance:none; box-shadow: none !important; border:#e9e9e9 1px solid; }
    textarea { min-height:175px !important; max-height:175px !important; font-size:0.9rem !important; background-color:#f8f8f8 !important; border:#e9e9e9 1px solid !important; -webkit-border-radius:15px !important; -moz-border-radius:15px !important; border-radius:15px !important; font-family:'Asap', Arial, Helvetica, sans-serif !important; }

    input[type=submit] { padding:0.75rem 2rem; text-decoration:none; font-weight:700; color:#fff !important; text-align:center; background:#123B83; -webkit-border-radius:65px; -moz-border-radius:65px; border-radius:65px; border:#123B83 1px solid; -moz-transition:color 0s linear 0s; -webkit-transition:color 0s linear 0s; -o-transition:color 0s linear 0s; transition:color 0s linear 0s; }
    input[type=submit]:hover { color:#fff !important; background:#b35b00; text-decoration:none; border:#b35b00 1px solid; }
    .btn { width:auto; font-size:15px; padding:0.75rem 2rem; text-decoration:none; display:inline-block; font-weight:700; color:#fff !important; text-align:center; background:#123B83; -webkit-border-radius:65px; -moz-border-radius:65px; border-radius:65px; border:#123B83 1px solid; -moz-transition:color 0s linear 0s; -webkit-transition:color 0s linear 0s; -o-transition:color 0s linear 0s; transition:color 0s linear 0s; }
    .btn:hover { color:#fff !important; background:#b35b00; text-decoration:none; border:#b35b00 1px solid; }

    .no-padding { padding:0; }
    .no-border { border:none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }

/* ==========================================================================
    Structure
   ========================================================================== */

    header { padding:0.35rem 0; background:#f7f4f4; }
    header .nav > li > span { color:#707070; }
    header .nav > li > a:hover { color:#595959; }
    header .nav > li > a > svg { color:#121212; }
    header .nav > li > a > svg:hover { color:#FF8200; }
    header .nav > li > a > svg.fa-envelope { color:#FF8200; font-size:1.1rem; position:relative; top:3px; }
    nav.navbar { padding:0; background:#fff; -webkit-box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1); box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1); }
    nav.navbar .logo-wrap { width:200px; margin:-1rem 0 -4rem; padding:0.75rem 1.25rem; background:#f7f4f4; position:relative; z-index:20; top:-26px; -webkit-box-shadow:0 3px 8px 0 rgba(0,0,0,0.14); -moz-box-shadow:0 3px 8px 0 rgba(0,0,0,0.14); box-shadow: 0 3px 8px 0 rgba(0,0,0,0.14); }
    nav.navbar .logo-wrap > .logo { max-width:100%; margin:0; }

    section#hero { position:relative; background:#f7f4f4 url('img/page-hero.jpg') center no-repeat; background-size:cover; }
    section#hero #inner { padding:7.5rem 0; }
    section#hero #inner { position:relative; z-index:5; text-align:center; }
    section#hero #inner h1 { margin:0 auto 1rem; color:#fff; font-size:2.5rem; font-weight:bold; text-shadow:1px 1px 3px rgba(5, 5, 5, 0.5); }
    section#hero #inner p.lead { margin:0 auto 1.5rem; color:#fff; font-weight:600; font-size:1.45rem; text-shadow:1px 1px 3px rgba(5, 5, 5, 0.5); }
    section#hero .overlay { width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background:rgba(0, 0, 0, 0.5); }

    section#hero.homepage { position:relative; background:#f7f4f4 url('img/homepage-hero.jpg') center no-repeat; background-size:cover; }
    section#hero.homepage #inner { padding:10.5rem 0; }
    section#hero.homepage #inner h1 { margin:0 auto 1rem; color:#fff; font-size:2.5rem; font-weight:bold; text-shadow:1px 1px 3px rgba(5, 5, 5, 0.5); }
    section#hero.homepage #inner p.lead { margin:0 auto 1.5rem; color:#fff; font-weight:600; font-size:1.45rem; text-shadow:1px 1px 3px rgba(5, 5, 5, 0.5); }
    section#hero.homepage .overlay { width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background:rgba(0, 0, 0, 0.5); }

    footer { background:#fff; }
    footer .logo-small { max-width:180px; margin:-2.5rem auto; display:block; }
    footer .footer-cta { padding:0.75rem 1rem; }
    footer svg { margin-bottom:0.25rem; color:#123B83; font-size:1.5rem !important; }
    footer h5 { margin:0.15rem 0; color:#fff; font-size:1rem; text-transform:capitalize; }
    footer p { margin:0; font-size:0.95rem; }
    footer #sitemap { padding:1rem 0; background:#FF8200; border-top:#0A4EC3 8px solid; }
    footer #sitemap a:hover { color:#fff; }
    footer #sitemap a[href^=tel]:hover { color:#fff; }
    footer #powered { padding:0.5rem 0; }
    footer #powered p { margin:0; font-size:0.8rem; }
    footer #powered p.copy { margin-left:11rem; }

/* ==========================================================================
    Links and Navigation
   ========================================================================== */

    a { font-weight:700; text-decoration:none; -moz-transition:color 0.1s linear 0.1s; -webkit-transition:color 0.1s linear 0.1s; -o-transition:color 0.1s linear 0.1s; transition:color 0.1s linear 0.1s; }
    a:hover { text-decoration:none; }
    a:active, a:visited, a:link { color:#121212; }
    a:hover { color:#FF8200; }
    a[href^=tel] { color:#121212; text-decoration:none; }
    a[href^=tel]:hover { color:#FF8200; text-decoration:none; }
    a.nostyle:active, a.nostyle:visited, a.nostyle:link { color:inherit; text-decoration:none; }
    .nostyle:hover { color:inherit; text-decoration:none; }

    #primary { margin:0.5rem 0; padding:0; }
    #primary > li { padding:0; }
    #primary > li:hover > a  { color:#595959; }
    #primary > li > a { padding:0 1.5rem; color:#121212; }
    #primary > li.active > a { color:#595959; }
    #primary > li > a > .phone-icon { width:20px; }

    #secondary { margin:0.5rem 0; padding:0; }
    #secondary > li { padding:0; }
    #secondary > li:hover > a { color:#595959; }
    #secondary > li > a { padding:0 1.5rem; color:#121212; }
    #secondary > li.active > a { color:#595959; }
    #secondary > li > a > .phone-icon { width:20px; }

    #primary > li.number-link, #secondary > li.number-link { border-left:#707070 1px solid; }
    #primary > li.number-link > a > svg, #secondary > li.number-link > a > svg { color:#FF8200; }

/* ==========================================================================
    Misc
   ========================================================================== */

    .section { padding:5rem 0; position:relative; z-index:5; }
    .section-mini { padding:2.5rem 0; position:relative; z-index:5; }
    .section-very-mini { padding:1rem 0; position:relative; z-index:5; }
    .section-none { padding:0; position:relative; z-index:5; }
    .section-special { padding:5rem 0; position:relative; z-index:100; }

    .light-grey-bg { background:#f7f4f4; }

    #map { position:relative; background:#f7f4f4; }
    #mapCanvas { width:100%; min-height:720px; position:relative; }
    .form-box { width:36rem; padding:3rem 2.5rem 2rem; position:absolute; z-index:25; bottom:4.2rem; right:4.2rem; background:#fff; -webkit-box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); -moz-box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); }

    #contact__boxes { position:relative; z-index:10; }
    #contact__boxes__wrap { margin:0 auto -16rem; }
    .contact__box { -webkit-box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); -moz-box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); box-shadow:0 3px 12px 0 rgba(0,0,0,0.14); }
    .contact__icon { max-width:100px; margin-bottom:1rem; }
    .contact__area { font-size:1.2rem; margin-bottom:0.5rem; }
    .contact__title { margin-bottom:0.5rem; }
    .contact__desc { margin-bottom:0; }

    .nav-item { padding:0.25rem 0.55rem; }
    .social-item { padding:0; }
    .padded { padding:3.75rem 4rem; }

    .losange, .losange div { width:95px; height:95px; margin:0 auto 2.75rem; transform-origin:50% 50%; overflow:hidden; background:#FF8200; }
    .losange { transform:rotate(45deg) translateY(10px); }
    .losange .los1 { width:36px; height:42px; transform:rotate(-45deg) translateY(20px) translateX(-20px); }
    .losange .los1 svg { color:#fff; font-size:2.5rem; }

    .benefit__box__bg__001 { background:url('img/homepage-box-bg-001.jpg') top left no-repeat; }
    .benefit__box__bg__002 { background:url('img/homepage-box-bg-002.jpg') top left no-repeat; }
    .benefit__box__bg__003 { background:url('img/homepage-box-bg-003.jpg') top left no-repeat; }
    .benefit__box { padding:0 0.5rem; text-align:center; }
    .benefit__box__title { font-size:1.25rem; }
    .benefit__box__desc { font-size:0.9rem;}

    .service { margin:0 auto 2.5rem; text-align:center; border:none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
    .service .losange, .service .losange div { width:65px; height:65px; margin:0 auto 2.75rem; transform-origin:50% 50%; overflow:hidden; background:#FF8200; }
    .service .losange { margin-bottom:3rem; transform:rotate(45deg) translateY(10px); }
    .service .losange .los1 { width:42px; height:42px; transform:rotate(-45deg) translateY(10px) translateX(-10px); }
    .service .losange .los1 svg { color:#fff; font-size:2.5rem; }
    .service .service__name { font-size:1.05rem; text-transform:capitalize; }
    .service .service__desc { font-size:0.9rem; }

    .card.gallery { padding:1rem 1rem 0; margin:2.5rem -10rem 2.5rem 2.5rem; position:relative; z-index:25; background:#fff; border:#e9e9e9 1px solid; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }

/* ==========================================================================
    Cookie Consent
   ========================================================================== */

    .cc-window {opacity: 1; transition: opacity 1s ease }
    .cc-window.cc-invisible {opacity: 0 }
    .cc-animate.cc-revoke {transition: transform 1s ease }
    .cc-animate.cc-revoke.cc-top {transform: translateY(-2em) }
    .cc-animate.cc-revoke.cc-bottom {transform: translateY(2em) }
    .cc-animate.cc-revoke.cc-active.cc-bottom, .cc-animate.cc-revoke.cc-active.cc-top, .cc-revoke:hover {transform: translateY(0) }
    .cc-grower {max-height: 0; overflow: hidden; transition: max-height 1s }
    .cc-link, .cc-revoke:hover {text-decoration: underline }
    .cc-revoke, .cc-window {position: fixed; overflow: hidden; box-sizing: border-box; font-size: 16px; line-height: 1.5em; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; z-index: 9999 }
    .cc-window.cc-static {position: static }
    .cc-window.cc-floating {padding: 2em; max-width: 24em; -ms-flex-direction: column; flex-direction: column }
    .cc-window.cc-banner {padding: 1em 1.8em; width: 100%; -ms-flex-direction: row; flex-direction: row }
    .cc-revoke {padding: .5em }
    .cc-header {font-size: 18px; font-weight: 700 }
    .cc-btn, .cc-close, .cc-link, .cc-revoke {cursor: pointer; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; }
    .cc-link {opacity: .8; display: inline-block; padding: .2em }
    .cc-link:hover {opacity: 1 }
    .cc-link:active, .cc-link:visited {color: initial }
    .cc-btn {display: block; padding: .4em .8em; font-size: .9em; font-weight: 700; border-width: 2px; border-style: solid; text-align: center; white-space: nowrap }
    .cc-banner .cc-btn:last-child {min-width: 140px }
    .cc-highlight .cc-btn:first-child {background-color: transparent; border-color: transparent }
    .cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover {background-color: transparent; text-decoration: underline }
    .cc-close {display: block; position: absolute; top: .5em; right: .5em; font-size: 1.6em; opacity: .9; line-height: .75 }
    .cc-close:focus, .cc-close:hover {opacity: 1 }
    .cc-revoke.cc-top {top: 0; left: 3em; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em }
    .cc-revoke.cc-bottom {bottom: 0; left: 3em; border-top-left-radius: .5em; border-top-right-radius: .5em }
    .cc-revoke.cc-left {left: 3em; right: unset }
    .cc-revoke.cc-right {right: 3em; left: unset }
    .cc-top {top: 1em }
    .cc-left {left: 1em }
    .cc-right {right: 1em }
    .cc-bottom {bottom: 0; }
    .cc-floating>.cc-link {margin-bottom: 1em }
    .cc-floating .cc-message {display: block; margin-bottom: 1em }
    .cc-window.cc-floating .cc-compliance {-ms-flex: 1; flex: 1 }
    .cc-window.cc-banner {-ms-flex-align: center; align-items: center }
    .cc-banner.cc-top {left: 0; right: 0; top: 0 }
    .cc-banner.cc-bottom {left: 0; right: 0; bottom: 0 }
    .cc-banner .cc-message {-ms-flex: 1; flex: 1; font-size:0.9em; }
    .cc-compliance {display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: justify; align-content: space-between }
    .cc-compliance>.cc-btn {-ms-flex: 1; flex: 1 }
    .cc-btn+.cc-btn {margin-left: .5em }
    .cc-message { color:#121212; }
    .cc-btn { color:#fff !important; }

    .cc-floating.cc-theme-classic {padding: 1.2em; border-radius: 5px }
    .cc-floating.cc-type-info.cc-theme-classic .cc-compliance {text-align: center; display: inline; -ms-flex: none; flex: none }
    .cc-theme-classic .cc-btn {border-radius: 5px }
    .cc-theme-classic .cc-btn:last-child {min-width: 140px }
    .cc-floating.cc-type-info.cc-theme-classic .cc-btn {display: inline-block }
    .cc-theme-edgeless.cc-window {padding: 0 }
    .cc-floating.cc-theme-edgeless .cc-message {margin: 2em 2em 1.5em }
    .cc-banner.cc-theme-edgeless .cc-btn {margin: 0; padding: .8em 1.8em; height: 100% }
    .cc-banner.cc-theme-edgeless .cc-message {margin-left: 1em }
    .cc-floating.cc-theme-edgeless .cc-btn+.cc-btn {margin-left: 0 }

/* ==========================================================================
    Google Recapatcha V3
   ========================================================================== */

    .grecaptcha-badge { display:none !important; }

/* ==========================================================================
    Contact Form 7
   ========================================================================== */

    .wpcf7 { margin: 0; padding: 0; }
    .wpcf7-response-output { margin:1em 1em 1em; padding: 0.1em 1em; font-size:1em; color:#121212; background:#fff; -webkit-border-radius: 4px; -moz-border-radius:4px; border-radius:4px; font-family:'Asap', Arial, Helvetica, sans-serif !important; }
    .wpcf7 .screen-reader-response {position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width:1px; height:1px; margin: 0; padding: 0; border: 0; }
    .wpcf7-mail-sent-ok {border: 1px solid #398f14; }
    .wpcf7-mail-sent-ng {border: 1px solid #ff1712; }
    .wpcf7-spam-blocked {border: 1px solid #ffa500; }
    .wpcf7-validation-errors {border: 1px solid #f7e700; }
    .ajax-loader {border: none; vertical-align: middle; margin-left: 4px; }
    .ajax-error {display: none; }
    .wpcf7 .placeheld {color: #888; }
    .wpcf7-submit { position:relative; left:30px; }

    .wpcf7-form-control-wrap {position: relative; }
    .wpcf7-not-valid-tip { margin:0 0 8px; color: #f00; font-size:1.9em; font-style:italic; display: block; }
    .wpcf7-list-item { margin-left:0; font-size:inherit; margin-right:0; }
    .wpcf7-list-item input { margin-right:1em; }
    .wpcf7-list-item label span { color:#121212; }

    .use-floating-validation-tip span.wpcf7-not-valid-tip {position: absolute; top: 20%; left: 20%; z-index: 100; border: 1px solid #ff1712; background:#fff; padding: .1em .8em; }
    .wpcf7-display-none {display: none; }

/* ==========================================================================
    WP Page Navi
   ========================================================================== */

    .wp-pagenavi { width:100%; height:auto; margin:1rem auto; text-align:center; clear:both; }
    .wp-pagenavi a, .wp-pagenavi span { font-size:0.9rem; font-weight:400; text-decoration: none; color:#121212; border:0px solid #029bab; padding: 3px 5px; margin: 2px; }
    .wp-pagenavi a:hover, .wp-pagenavi span.current { border-color:#FF8200; }
    .wp-pagenavi span.current { color:#121212; font-weight:600; }

/* ==========================================================================
    Media Queries: iPad
   ========================================================================== */

    /* iPad [landscape] */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
        footer #powered p.copy { margin-left:11rem !important; }
    }

    /* iPad [portrait] */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        
    }

    /* iPad 3/4 [landscape] */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
        footer #powered p.copy { margin-left:11rem !important; }
    }

    /* iPad 3/4 [portrait] */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
        
    }

/* ==========================================================================
    Bootstrap Queries
   ========================================================================== */

    @media (max-width: 575.98px) {
        nav.navbar .logo-wrap { width:170px; margin:-1rem 1rem -4rem; }
        #primary, #secondary { margin:1rem 0; text-align:right; }
        #primary > li > a, #secondary > li > a { padding:0.5rem 1rem; }
        #primary > li.number-link, #secondary > li.number-link { border-left:#707070 0px solid; }
        section#hero.homepage #inner, section#hero #inner { padding:5rem 1rem; }
        section#hero.homepage #inner h1 { font-size:1.8rem; }
        section#hero.homepage #inner p.lead { font-size:1.15rem; }
        footer #powered p.copy { margin-left:0; }
        footer .footer-cta { padding:1.5rem 0; text-align:center; }
        p.copy, p.credit { text-align:center; }
        .section { padding:2.5rem 1rem; }
        .benefit__box { margin:0 auto 4rem; }
        .padded { padding:2rem; }
        .card.gallery { margin:0; }
        .contact__icon { max-width:100%; }
        .form-box { width:85%; padding:2rem 1.5rem 1rem; bottom:4rem; right:-1rem; }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        nav.navbar .logo-wrap { width:170px; }
        #primary, #secondary { margin:1rem 0; text-align:right; }
        #primary > li > a, #secondary > li > a { padding:0.5rem 1rem; }
        #primary > li.number-link, #secondary > li.number-link { border-left:#707070 0px solid; }
        section#hero.homepage #inner, section#hero #inner { padding:7.5rem 0; }
        section#hero.homepage #inner h1 { font-size:2.5rem; }
        section#hero.homepage #inner p.lead { font-size:1.5rem; }
        p.copy { text-align:left; }
        p.credit { text-align:right; }
        footer #powered p.copy { margin-left:0; }
        footer .footer-cta { text-align:center; }
        .contact__icon { max-width:100%; }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        nav.navbar .logo-wrap { width:170px; }
        #primary, #secondary { margin:1rem 0; text-align:right; }
        #primary > li > a, #secondary > li > a { padding:0.5rem 1rem; }
        #primary > li.number-link, #secondary > li.number-link { border-left:#707070 0px solid; }
        section#hero.homepage #inner, section#hero #inner { padding:5.5rem 0; }
        section#hero.homepage #inner h1 { font-size:2.5rem; }
        section#hero.homepage #inner p.lead { font-size:1.5rem; }
        p.copy { text-align:left; }
        p.credit { text-align:right; }
        footer #powered p.copy { margin-left:0; }
        footer .footer-cta { text-align:center; }
        .contact__icon { max-width:100%; }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        footer .footer-cta { text-align:center; }
        footer #powered p.copy { margin-left:0; }
        p.copy { text-align:left; }
        p.credit { text-align:right; }
    }

    @media (min-width: 1200px) {
        p.copy { text-align:left; }
        p.credit { text-align:right; }
    }

/* ==========================================================================
    Print
   ========================================================================== */

    @media print {
        * { background:transparent !important; color:#000 !important; box-shadow:none !important; text-shadow:none !important; }
        a, a:visited { text-decoration: underline; }
        a[href]:after { content: " (" attr(href) ")"; }
        abbr[title]:after { content: " (" attr(title) ")"; }

        .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
        pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
        thead { display:table-header-group; }
        tr, img { page-break-inside: avoid; }
        img { max-width:100% !important; }
        @page { margin: 0.5cm; }
        p, h2, h3 { orphans:3; widows:3; }
        h2, h3 { page-break-after:avoid; }
    }