/*!
Theme Name: JS West
Theme URI: https://mhdgroup.agency
Author: MHD Group Inc., Gilberto Cisneros
Author URI: https://mhdgroup.agency
Description: A custom theme for JS West
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: js-west
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

JS West is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.bkg-theme-light {
    background: #0065aa;
    background-color: #0065aa;
    border-color: #0065aa;
}

.bkg-theme-grey {
    background: #555555;
    background-color: #555555;
    border-color: #555555;

}

.bkg-theme-grey-light {
    background: #888B8D;
    background-color: #888B8D;
    border-color: #888B8D;
}

.bkg-transparent {
    background: transparent;
    background-color: transparent;;
    border-color: transparent;
}

.bkg-transparent:hover {
    background: transparent;
    background-color: transparent;;
    border-color: transparent;
}

.color-grey-theme {
    color: #888B8D;
}
.tms-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.overlay-accent {
    background: url('./core/images/js_west-emblem.svg')  right center no-repeat;
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    margin: auto 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: .2;
}

.overlay-accent-home {
    background: url('./core/images/js_west-emblem.svg')  right center no-repeat;
    background-size: contain;
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    margin: auto auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: .2;
}

.tms-content-inner { z-index: 3; position: relative;}

.color-theme {
    color: #005487;
}

.lift .column:nth-child(1) {margin-top: -100px;}
.lift .column:nth-child(2) {margin-top: -110px;}
.lift .column:nth-child(3) {margin-top: -100px;}

@media only screen and (max-width: 736px) {
    .lift .column:nth-child(1) {margin-top: -50px;}
    .lift .column:nth-child(2) {margin-top: 0;}
    .lift .column:nth-child(3) {margin-top: 0;}
}

.main-1, .main-2, .main-3 {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: -40px auto 0 auto;
}

.main-1 { background: url('./core/images/icon-front1a.png') center center no-repeat; background-size: cover; height: 80px; width: 80px; }
.main-2 { background: url('./core/images/Layer 2.png') center center no-repeat; background-size: cover; height: 80px; width: 80px; }
.main-3 { background: url('https://www.jswest.com/wp-content/uploads/2019/01/Main-Office.png') center center no-repeat; background-size: cover; height: 80px; width: 80px; }


/* --------------------------------

Main Components

-------------------------------- */

.cd-horizontal-timeline ul, .cd-horizontal-timeline ol { list-style: none!important;}

.cd-horizontal-timeline {
    opacity: 0;
    margin: 2em auto;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
}
.cd-horizontal-timeline.loaded {
    /* show the timeline after events position has been set (using JavaScript) */
    opacity: 1;
}
.cd-horizontal-timeline .timeline {
    position: relative;
    height: 100px;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
    /* these are used to create a shadow effect at the sides of the timeline */
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
    left: 0;

}
.cd-horizontal-timeline .events-wrapper::after {
    right: 0;

}
.cd-horizontal-timeline .events {
    /* this is the grey line/timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 39px;
    height: 25px;
    /* width will be set using JavaScript */
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
    /* this is used to create the green line filling the timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #0065aa;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 1.3rem;
    padding-bottom: 30px;
    color: #383838;
    /* fix bug on Safari - text flickering while timeline translates */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
    /* this is used to create the event spot */
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    height: 25px;
    width: 2px;
    border-radius: 0;
    border: 2px solid #fff;
    background-color: #fff;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
    background-color: #0065aa;
    border-color: #0065aa;
}
.cd-horizontal-timeline .events a.selected {
    pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
    background-color: #0065aa;
    border-color: #0065aa;
}
.cd-horizontal-timeline .events a.older-event::after {
    border-color: #0065aa;
}
@media only screen and (min-width: 1100px) {
    .cd-horizontal-timeline {
        margin: 6em auto;
    }
    .cd-horizontal-timeline::before {
        /* never visible - this is used in jQuery to check the current MQ */
        content: 'desktop';
    }
}

.cd-timeline-navigation a {
    /* these are the left/right arrows to navigate the timeline */
    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    /* replace text with an icon */
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
    /* arrow icon */
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(./core/images/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
    left: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
    right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
    border-color: #0065aa;
}
.cd-timeline-navigation a.inactive {
    cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
    background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
    position: relative;
    width: 100%;
    margin: 2em 0;
    overflow: hidden;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    padding: 0 2%;
    opacity: 1!important;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
    /* visible event content */
    position: relative;
    width: 100%;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.timeline-slide__content {
    opacity: 1!important;
}

.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
    max-width: 400px;
    margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
    font-weight: bold;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
    display: block;
    font-style: italic;
    margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
    content: '- ';
}
.cd-horizontal-timeline .events-content p {
    font-size: 1.4rem;
    color: #959595;
}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
    line-height: 1.6;
}
@media only screen and (min-width: 768px) {
    .cd-horizontal-timeline .events-content h2 {
        font-size: 2.4rem;
    }
    .cd-horizontal-timeline .events-content em {
        font-size: 1.6rem;
    }
    .cd-horizontal-timeline .events-content p {
        font-size: 1.5rem;
    }
}

@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}
@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}
@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}


.feature-column-group .feature-column {
    padding: 7rem 5rem 2rem;
}

.lead { font-weight: 400; line-height: 1.8;}

.header .logo img { width: 200px; }

.modal-open { overflow-y: auto;}


.header .header-inner-top { background: #005487; color: white; line-height: 3.5rem;}

@media only screen and (max-width: 736px) {
    .header .header-inner-top { background: #005487; color: white; line-height: 3.5rem;}
}


.mobile .header .header-inner-top { display: block; position: relative; z-index: 9999; }

.mobile .header-fixed-on-mobile .header-inner { top: 135px;}
.mobile .header + .content { padding-top: 135px;}