/* Add here all your CSS customizations */

/* Colors
grey:   #58595b
green:  #95d609
orange: #ff671b
blue:   #003da6
*/

/* Variables */
:root {
    --lw-grey: #58595b;
    --lw-green: #95d609;
    --lw-orange: #ff671b;
    --lw-blue: #003da6;
}

/* Body */
body {
    font-size: 16px;
    background: white;
    font-family: "Helvetica Neue LT", Helvetica, Arial, sans-serif;
    color: #58595b;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #58595b;
    text-transform: uppercase
}

a {
    color: #58595b;
}

    a:hover, a:focus {
        color: #ff671b;
    }

    a:active,
    a:focus {
        text-decoration: none;
    }
/* Misc */
.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

/* Btn */
.btn {
    margin: 5px 0;
    font-weight: bold;
    border-width: 2px;
    text-shadow: none;
    text-transform: uppercase;
}

.btn-primary {
    border-color: white !important;
    background-color: white;
    color: #58595b;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #58595b;
}

    .btn-primary:hover {
        background: white !important;
        color: #ff671b;
        box-shadow: inset 0 0 0 2px #58595b;
    }

    .btn-primary:active,
    .btn-primary:focus {
        background-color: white;
        color: #e74d00;
    }

.btn-lg {
    font-size: 16px;
    padding: 10px 28px
}

/* Header */
#header {
    transition: background-color .3s ease-in-out;
}

    #header.transparent.semi-transparent {
        background: rgba(88,89,91,.8)
    }

    #header > .container {
        margin-bottom: auto;
    }

    #header .header-section-right {
        margin: 0;
        padding: 5px 0;
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

    #header .social-images {
        margin: 0 0 10px 0;
        float: right;
        font-size: 1.8em;
        position: relative;
    }

        #header .social-images a {
            color: white;
        }
        /* Individual social hover colors */
        /* Consider adding more? */
        #header .social-images .social-linkedin:hover {
            color: #0077b5;
        }

        #header .social-images .social-youtube:hover {
            color: #ff0000;
        }

        #header .social-images .social-email:hover {
            color: #013ca5;
        }

    #header .sub-section {
        float: right;
        clear: right;
        font-size: 1.25em;
        position: relative;
    }

        #header .sub-section p {
            color: white;
            margin-bottom: 0;
        }
/* Override downsizing header! */
body.sticky-menu-active #header {
    top: -40px;
}

    body.sticky-menu-active #header .logo-sticky-active img {
        top: 20px !important;
    }
    /* Orange header after scroll down */
    body.sticky-menu-active #header.transparent.semi-transparent {
        background-color: #ff671b;
    }

    body.sticky-menu-active #header .social-images {
        font-size: 1.8em;
        top: 21px;
        margin: 0;
    }

    body.sticky-menu-active #header .sub-section {
        font-size: 1.25em;
        top: 22px;
    }

/* Video BG */
.video-background-wrap {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 14px solid #95d609;
}

    .video-background-wrap .container {
        position: relative;
        z-index: 20;
    }
    /* Default */
    .video-background-wrap .vid-cta {
        padding: 225px 16px 45px 16px;
    }
    /* Right Aligned */
    .video-background-wrap .row.text-right .vid-cta {
        padding: 225px 0px 45px 90px;
    }
    /* Left Aligned */
    .video-background-wrap .row.text-left .vid-cta {
        padding: 225px 90px 45px 0px;
    }

    .video-background-wrap h1 {
        font-size: 1.75em;
        line-height: 30px;
    }

    .video-background-wrap p {
        font-size: 1.125em
    }

    .video-background-wrap h1, .video-background-wrap p {
        color: #ffffff;
    }

.video-wrap {
    position: fixed !important;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
}

    .video-wrap video {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        display: block;
        background: transparent;
        min-height: 660px;
        object-fit: cover
    }

/* Section */
.section {
    position: relative;
    z-index: 30;
}
/* Section Title */
.title {
    position: relative;
    margin: 14px 0;
}

    .title h2 {
        font-size: 1.5em;
        position: relative;
        line-height: 44px;
        display: inline-block;
        margin: 0;
        background: white;
        padding: 0 8px;
    }

    .title:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        top: 21px;
        width: 100%;
        border-top: 2px dotted #58595b;
    }

/* Panes */
.pane {
    background: #e7e8ea;
    margin: 15px 0;
    min-height: 400px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s
}
    /* Small Panes for Icons 6 per row */
    .pane.pane-sm {
        min-height: initial;
        background: transparent;
    }
        /* .pane.pane-sm .pane-icon {
    padding-top:20px;
} */
        .pane.pane-sm .pane-icon,
        .pane.pane-sm .pane-text {
            min-height: initial;
            padding: 10px 0;
        }

.pane-title, .pane-icon, .pane-text, .pane-link {
    padding: 0 20px;
}

.pane-icon {
    padding-top: 60px;
    padding-bottom: 20px;
    min-height: 166px;
}

.pane-title {
    font-size: 1.625em;
    color: #58595b;
    line-height: 26px;
    margin-bottom: 16px;
}

.pane-text {
    min-height: 120px;
}

.pane-img {
    padding: 10px 0;
}

    .pane-img img {
        max-width: 100%;
        display: block;
        margin-bottom: 12px;
        width: 100%
    }

.pane-link {
    padding-bottom: 40px;
    font-weight: 700;
}

    .pane-link p {
        margin-bottom: 0;
        font-size: 1.250em;
        color: #58595b
    }

.pane .icon-hover {
    opacity: 0;
    display: none;
}

/* Pane Hovers */
/* Exclude .pane-sm */
.pane:not(.pane-sm):hover {
    background: white
}

    .pane:not(.pane-sm):hover .pane-img img {
        opacity: .7;
    }

    .pane:not(.pane-sm):hover .pane-icon img:not(.icon-hover) {
        opacity: 0;
        display: none;
    }

    .pane:not(.pane-sm):hover .icon-hover {
        opacity: 1;
        display: inline-block;
    }

    .pane:not(.pane-sm):hover .pane-title a,
    .pane:not(.pane-sm):hover .pane-text p,
    .pane:not(.pane-sm):hover .pane-link a {
        color: #ff671b;
    }
/* Interior */
.interior {
    padding: 180px 0 90px 0;
    min-height: 600px;
}

/* Footer */
#footer {
    font-size: .875em;
    margin-top: 0;
    z-index: 1;
    border-top: 15px solid #95d609;
    background: #262627;
}

    #footer .footer-copyright {
        border-top: 1px solid #5a5d64;
        background: white;
    }

    #footer h1,
    #footer h2,
    #footer h3,
    #footer h4,
    #footer h5,
    #footer p {
        color: white;
    }

.social-icon-set {
    font-size: 1.625em;
    color: #ffffff;
}

    .social-icon-set a {
        text-decoration: none;
        margin: 0 6px;
    }

        .social-icon-set a:first-child {
            margin-left: 0
        }

        .social-icon-set a:last-child {
            margin-right: 0
        }

/* Helper Classes */
.weight300 {
    font-weight: 300;
}

.weight600 {
    font-weight: 600;
}

.weight900 {
    font-weight: 900;
}

.size12-font {
    font-size: .75em;
}

.size14-font {
    font-size: .875em;
}

.size16-font {
    font-size: .1em;
}

.size18-font {
    font-size: 1.125em;
}

.size20-font {
    font-size: 1.25em;
}

.size22-font {
    font-size: 1.375em;
}

.size24-font {
    font-size: 1.5em;
}

.size26-font {
    font-size: 1.625em;
}

.size28-font {
    font-size: 1.75em;
}

.size30-font {
    font-size: 1.875em;
}


/* **************************************** 7. 480px+ STYLES **************************************** */
@media screen and (min-width: 480px) {
}
/* **************************************** 8. 768px+ STYLES **************************************** */
@media screen and (min-width: 768px) {
    .title h2 {
        font-size: 2em;
    }
    /* Video Background */
    /* Default */
    .video-background-wrap .vid-cta {
        padding: 240px 40px 80px 40px;
    }
    /* Right Aligned */
    .video-background-wrap .row.text-right .vid-cta {
        padding: 240px 0px 80px 160px;
    }
    /* Left Aligned */
    .video-background-wrap .row.text-left .vid-cta {
        padding: 240px 160px 80px 0px;
    }

    .video-background-wrap h1 {
        font-size: 2.6em;
        line-height: 44px;
    }

    .video-background-wrap p {
        font-size: 1.5em
    }
    /* Carousels
    .carousels {max-width: 640px;}
        */
}

/* **************************************** 9. 960px+ STYLES **************************************** */
@media screen and (min-width: 960px) {
    .pane {
        min-height: 465px;
    }
    /* Video Background */
    /* Default */
    .video-background-wrap .vid-cta {
        padding: 320px 40px 140px 40px;
    }
    /* Right Aligned */
    .video-background-wrap .row.text-right .vid-cta {
        padding: 320px 0px 140px 220px;
    }
    /* Left Aligned */
    .video-background-wrap .row.text-left .vid-cta {
        padding: 320px 220px 140px 0px;
    }
    /* Carousels
    .carousels {max-width: 1170px;}
    */
}

/* **************************************** 9. 992px+ STYLES **************************************** */
@media screen and (min-width: 992px) {
    #header .social-images {
        font-size: 2.6em;
    }

    #header .sub-section {
        font-size: 2em;
    }
}

/* **************************************** 9. 991px- STYLES **************************************** */
@media (max-width: 991px) {
    body.sticky-menu-active #header .logo img,
    #header.fixed .logo img {
        margin-top: auto;
    }
}