:root{
    --brown: #231F20;
    --orange: #F3702C;
    --grey: #595A5A;
    --light-grey: #DDDDDD;
}
@font-face {
    font-family: 'frutiger_lt_std65_bold';
    src: url('/wp-content/themes/accellerated/font/frutigerltstd-bold-webfont.woff2') format('woff2'),
         url('/wp-content/themes/accellerated/font/frutigerltstd-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.text-brown{color:var(--brown);}
.text-orange{color:var(--orange);}
.text-grey{color:var(--grey);}
.text-light-grey{color:var(--light-grey);}

.bg-brown{background-color:var(--brown);}
.bg-orange{background-color:var(--orange);}
.bg-grey{background-color:var(--grey);}
.bg-light-grey{background-color:var(--light-grey);}

.section-padding{
    padding:5vw 0;
}
html,
body {
    font-family: 'frutiger_lt_std65_bold', sans-serif;
    font-size: 1.23vw;
}

h1, .h1{
    font-size: 2.96vw;
    font-weight: 700;
    line-height:1.35
}
h2, .h2{
    font-size: 2.22vw;;
    font-weight: 700;
    line-height:1
}
h3, .h3{
    font-size: 1.73vw;
    font-weight: 700;
    line-height:1
}
p{
    font-size:1rem;
    font-weight:400;
}
a{
    color:inherit;
    text-decoration:none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
a:hover{
    color:var(--light-grey)!important;
    text-decoration:none;
}
.btn{
    background-color:var(--orange);
    border:3px solid var(--orange);
    color:#ffffff;
    border-radius:0;
    line-height: 1;
    text-transform: uppercase;
    padding-left: 1rem;
    padding-right: 1rem;
    
}
.btn-lg{
    font-size:1.5vw;
    padding-top:.75rem;
    padding-bottom:.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.btn:hover{
    border-color:var(--orange);
    background-color:transparent!important;
    color: var(--orange)!important;
}
.btn.text-white:hover{
    color:#ffffff!important;
}
.btn.bg-light-grey{
    border-color:var(--light-grey);
    background-color:var(--light-grey);
    color:inherit;
}
.btn.bg-light-grey:hover{
    border-color:var(--light-grey);
    background-color:transparent!important;
    color:#ffffff!important;
}
.btn.bg-brown{
    border:3px solid var(--brown)!important;
    color:#ffffff!important;
    background-color:var(--brown);
}
.btn.bg-brown:hover{
    background-color:transparent!important;
    color:var(--brown)!important;
}

.navbar-brand{
    max-width: 8vw;
}
.nav-link{
    color:var(--orange);
    border-bottom:3px solid transparent;
    margin-right:1rem;
    padding-left:0!important;
    padding-right:0!important;
}
.nav-link:hover{
    color:var(--light-grey);
    border-color:var(--light-grey);
}
.navbar svg{
    height:20px;
    width:20px;
}
.background{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

.hero{
    height:calc(100vh - 200px);
    min-height:800px;
}
.hero video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about .background svg{
    position:absolute;
    right:0;
    top:0;
    height:100%
}
.ideal .group{
    position:relative;
    margin-bottom:6rem;
}
.ideal .background svg{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
}
.ideal .group img:last-of-type{
    display:none;
}
.ideal .group:hover img:last-of-type{
    display:block;
}
.ideal .group:hover img:first-of-type{
    display:none;
}
.ideal p{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}
footer .btn:hover{
    color:#ffffff!important;
}

footer .background{
    left:-7vw;
    right:auto;
    top:50%;
    bottom:auto;
    transform: translateY(-50%);
    mix-blend-mode: multiply;
}
footer .background svg{
    width:50vw;
    height:auto;
}

@media screen and (max-width: 769px) {
    html, body{
        font-size:1rem;
    }
    .navbar-brand{
        max-width:90px;
    }
    .navbar svg{
        height:24px;
        width:24px;
    }
    .navbar-toggler{
        position: absolute;
        right: 15px;
        top: 20px; 
    }
    .navbar-toggler:focus{
        box-shadow:none;
    }
    .navbar-social{
        position: absolute;
        right: 60px;
        top: 26px;
    }
    .btn-lg{
        font-size:1.2rem;
    }
    .h1, h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
    .h2, h2 {
        font-size: calc(1.325rem + .9vw);
    }
    .h3, h3 {
        font-size: calc(1rem + .6vw);
    }
    .section-padding {
        padding: 3rem 0;
    }
    .hero{
        height:60vh;
        min-height:500px;
    }
    .about .background svg {
        opacity:.1;
    }
    .w-75{
        width:100%!important;
        padding-left:15px;
        padding-right:15px;
    }
    .ideal .group{
        position:relative;
        margin-bottom:2rem;
    }
    p.lead{
        font-size:1rem;
    }
    footer .background{
        left: 0;
        bottom: 0;
        transform: initial;
        right: 0;
        top: auto;
    }
    footer .background svg{
        height:100%;
        width:auto;
    }
}