:root {
            --green: #384848;
            --white: #fff;
            --black: #000;
            --blue: #014681;
            --blue-light: #869ab6;
            --trans-white: rgba(255, 255, 255, .18);
            --mint: #5ca7a7;
            --mint-dark: #416e6e;
            --gray-light: #f5f5f5;
            --mint-light: #dfe7e7;
            --gray: #e5e5e5;
        }
        .text-green { color: var(--green); }
        .text-white { color: var(--white); }
        .text-black { color: var(--black); }
        .text-blue { color: var(--blue); }
        .text-blue-light { color: var(--blue-light); }
        .text-trans-white { color: var(--trans-white); }
        .text-mint { color: var(--mint); }
        .text-mint-dark { color: var(--mint-dark); }
        .text-gray-light { color: var(--gray-light); }
        .text-mint-light { color: var(--mint-light); }
        .text-gray { color: var(--gray); }

        .bg-green { background-color: var(--green); }
        .bg-white { background-color: var(--white); }
        .bg-black { background-color: var(--black); }
        .bg-blue { background-color: var(--blue); }
        .bg-blue-light { background-color: var(--blue-light); }
        .bg-trans-white { background-color: var(--trans-white); }
        .bg-mint { background-color: var(--mint); }
        .bg-mint-dark { background-color: var(--mint-dark); }
        .bg-gray-light { background-color: var(--gray-light); }
        .bg-mint-light { background-color: var(--mint-light); }
        .bg-gray { background-color: var(--gray); }

        .border-blue-light { border-color: var(--blue-light) !important; }

        .btn.bg-mint-dark:hover, .btn.bg-green:hover { border:1px solid var(--mint-dark); color: var(--mint-dark) !important; }
        
        .invert { filter:invert(1); }

        .btn.bg-mint-dark:hover .invert { filter:invert(0); }

        .text-fs-13 { font-size:13px; }
        .text-fs-17 { font-size:17px; }
        .text-fs-18 { font-size:18px; }
        .text-fs-19 { font-size:19px; }
        .text-fs-20 { font-size:20px; }
        .text-fs-21 { font-size:21px; }
        .text-fs-24 { font-size:24px; }
        .text-fs-25 { font-size:25px; }
        .text-fs-26 { font-size:26px; }
        .text-fs-30 { font-size:30px; }
        .text-fs-36 { font-size:36px; }
        .text-fs-50 { font-size:50px; }
        .text-fs-72 { font-size:72px; }
  
        body { background-color:var(--green); font-family: neue-haas-grotesk-display, sans-serif; font-style: normal; font-weight: 400; overflow-x:hidden; font-size:17px; }
        section { background-color: var(--white); }
        header { background-color: var(--white); position:fixed; top:0; left:0; z-index:999; width:100%; box-shadow: 0px 0px 22px -3px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 22px -3px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 22px -3px rgba(0,0,0,0.75); }
   
        nav ul { margin: 0; padding: 0; list-style: none; position: relative;  } 
        nav ul li { display: inline-block;  } 
        nav a { display: block; padding: 0 10px; color:var(--black); font-size: 19px; text-decoration: none;  font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; } 
        nav ul ul { opacity:0; position: absolute; top: 40px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; background:var(--black); padding: 1rem;  } 
        nav ul li:hover > ul { display:inherit;  top: 30px; opacity:1; } 
        nav ul ul li { width: 200px; float: none; display: list-item; position: relative; margin-bottom:5px; } 
        nav ul ul ul li { position: relative; top:-60px; left:200px;  } 
        nav ul ul a { font-size:14px; color: var(--white); }
        nav a:hover { color: var(--black) } 
        nav ul ul a { color: var(--white); }
        nav ul ul a:hover { color: var(--mint); }
        nav ul ul li:hover > ul { display:inherit; }

        .fade-in { opacity:0; }
        .mobile-overlay-wrapper { opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,.9); z-index:1000; display:flex; align-items:center; justify-content: center; text-align: center; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; pointer-events: none; }
        .mobile-overlay-wrapper > li { margin-bottom:1rem; }
        .mobile-overlay-wrapper a  { color:var(--white); text-decoration: none; font-size:27px; }
        .mobile-overlay-wrapper a.order-online-link { font-size:20px; display:inline-block; margin-top:.5rem;  }
        .mobile-dropdown { display:none; }
        .mobile-dropdown a { font-size:20px; color: var(--mint); }
        .mobile-trigger { cursor:pointer; width:40px; height:20px; position:fixed; top:40px; right:30px; z-index:1005;  display:none; }
        .mobile-trigger span { width:100%; display: block; background-color: var(--green); height:2px; margin-bottom:5px; border-radius: .25rem; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
        body.open .mobile-trigger span:nth-child(3) { display:none; }
        body.open .mobile-trigger span:nth-child(1) { transform:rotate(45deg) }
        body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; }
        body.open .mobile-overlay-wrapper { opacity: 1;  pointer-events: all;  }
        body.open .mobile-trigger span { background-color: var(--white); }
        #main_logo { width:330px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
        body.scrolled #main_logo { width:200px; }

        .mw-700 { max-width: 700px; }
        .mw-1120 { max-width: 1120px; }

        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color:    var(--white);
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    var(--white) !important;
            opacity:  1;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    var(--white) !important;
            opacity:  1;
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color:    var(--white) !important;
        }
        ::-ms-input-placeholder { /* Microsoft Edge */
            color:    var(--white) !important;
        }

        ::placeholder { /* Most modern browsers support this now. */
            color:    var(--white) !important;
        }

        .hero { position:relative; overflow:hidden; background-color: var(--mint-dark);  }
       
        .hero h2 { text-align:center; width:90%; position:absolute; top:60%; left:50%; z-index:2; font-size:60px; font-weight:600; color:var(--white); transform:translate(-50%, -50%); }
        .hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:1; background:rgba(0,0,0,.25);}
        .add-padding-lg-75 { padding:75px; }
        .object-fit-cover { width:100%; height:100%; object-fit:cover; }

        .btn.bg-white:hover { color:var(--white); border:1px solid var(--white); background-color: transparent !important }

        .quote {position:relative}
        .quote::before { content:'“'; position:absolute; top:-35px; left:-35px; font-size:72px;  }
        .quote::after { content:'”'; position:absolute; bottom:-50px; right:-16px; font-size:72px;  }

        .overlap-30 { transform: translate(50px, -30px);  }
        .order-lg-1 .overlap-30 { transform: translate(-50px, -30px); }
        .shift-left-30 { transform:translateX(-30px); }
        .shift-right-20 { transform:translateX(20px); }

        .vertically-centered { position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); z-index:10; width:90%; text-align:center; }
        .vertically-centered h2 { position:relative; top:auto; left:auto; transform:translate(0%,0%); text-align: center; width:100%; }
        .bg-trans { background-color:rgba(0,0,0,.30); }

        @media (max-width:1280px){
             nav a {  font-size: 17px; } 
        }

        @media (max-width:990px){
            .mobile-trigger { display:block; }
            #main_logo { width:200px; }
            .add-padding-25 { padding:25px; }
            .hero { margin-top:98px; }
            .hero h2 { top:50%; font-size:40px; }
             .overlap-30, .order-lg-1 .overlap-30 { transform: translate(0, 0);  }
            .shift-right-20, .shift-left-30 { transform:translateX(0px); }
        }