body {
    font-family: 'Montserrat', sans-serif;
}
.wrapper {
  height: 100vh;
}
#nav-company-name span
{
    display:inline;
    font-size: 14px;
}

.main-photo-section {
    position: relative;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.woman-no-parallax{
    background-color: #eeeeee;
    background-position: 30% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./images/cmp-background-woman-barista-cropped-60percent.png);
    width: 100vw;
    display: block;  /* Works like bootstrap hidden-xs */
}
.mob-title-container{
    display: flex;
    justify-content: center;
    height: 50vh;
}
.mob-title-text{
    position: relative;
    line-height: 41px;
    font-size: 5vw;
    display: flex;
    align-items: center;
}

/* Always hide the parallax section. If the css tests pass then we can enable it (see PARALLAX TESTS) */
/* @media screen and (max-width: 767px) { */
    .woman-parallax{
        display: none!important; /* Works like bootstrap hidden-xs */
    }
/* } */

/* Status box tells us if parallax is supported. */
.status{
    position: absolute;
    z-index: 5;
    background-color: white;
    border-radius: 5px;
}
.status::before {
    content: 'CSS Parallax is: NOT SUPPORTED'; color: #c00;
    display: block;
}
.status::after {
    content: 'CSS Parallax is: DISABLED'; color: #c00;
}

/* PARALLAX TESTS */
/* Only enable parallax for browsers that support perspective */
/* Disable parallax for iOS browsers that use overflow scrolling touch */
/* Disable parallax for Edge 12+ and 16+ */
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and (not (-ms-accelerator:true)) and (not (-ms-ime-align:auto))) {

    .status::before {
        content: 'CSS Parallax is: SUPPORTED'; color: #090;
    }

    /* For screens 768 and above */
    @media screen and (min-width: 767px) {
        .status::after {
            content: 'CSS Parallax is: ENABLED'; color: #090;
        }
        html, body {
            overflow: hidden;
            height:100%;
        }
        body {
            transform: translateZ(0px); /* Fix paint issues in Edge && Safari H/W acceleration */
        }
        .wrapper {
          perspective: 2px;

          overflow-x: hidden;
          overflow-y: auto;
        }

        .woman-no-parallax{
            display: none!important; /* Works like bootstrap hidden-xs */
        }
        .woman-parallax{
            display: block!important;  /* Works like bootstrap hidden-xs */
            z-index: -2;
        }

        .parallax_layer::after {
            position: absolute;
            top: -25vh;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .preserve3d{
            transform-style: preserve-3d;
        }
        .parallax_layer_background{
            background-image: url(./images/cmp-background-woman-barista-cropped-60percent.png);
            width: 100vw;
            height: 100vh;
            background-size: cover;
            background-position-x: 40%;
            transform: translateZ(-5px) scale(4) translateY(-30vh) translateX(13px);
        }
        .parallax_layer_title{
            transform: translateZ(-3px) scale(2) translateY(-35vh);
        }
        .main-photo-title{
            font-size: 6vw;
            text-align: center;
        }
    }
}

.content {
    flex-direction: column;
    height: auto;
    display: flex;
    justify-content: center;
    background-color: white;
    /*border: 3px red dashed;*/
    position: relative;
    z-index: 999;
}
.content-title{
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.7em;
    margin-top: 0px;
}
.grey-backing{
    background-color: #222222;
}

ul li{
    line-height: 3em;
}

/*BULLET LIST NEXT TO MAIN SITE IMAGE*/
.main-bullet-list li {
    font-size: 1.0em;
    line-height: 2.6em;
    margin-bottom: 15px;
}


.main-bullet-list-xs{
    margin-bottom:25px;
    font-size: 1.2em;
}

#green-nav-btn
{
    color: #ffffff;
    /*color: #9d9d9d;*/
    background-color: #3c763d;
    border-color: #3c763d;
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 10px;
    width: 198px;
}

#green-nav-btn:hover
{
    color: #ffffff;
    background-color: #45a846;
    border-color: #45a846;
}

#green-nav-btn2{
    text-align:left;
    background-color:#3c763d;
    border-color: #3c763d;
    color: #ffffff;
    width: 172px;
}
#green-nav-btn2:hover{
    color: #ffffff;
    background-color: #45a846;
    border-color: #45a846;
}

.iron-man-green{
    color: #3c763d;
}

.call-us-now{
    display: inline-block;
    margin-bottom: 20px;
}

.iron-man-btn
{
    color: #ffffff;
    background-color: #3c763d;
    border-color: #3c763d;
}

fieldset.cmp-fieldset{
    margin-top: 8px;
}

label.error{
    color: #3dbc48;
}

.cmpform-submit-btn{
    background-color: #3c763d;
    border-color: #3c763d;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4em;
}
.cmpform-submit-btn:hover{
    background-color: #45a846;
    border-color: #45a846;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4em;
}
.white-text{
    color: #ffffff;
}

.off-white-text{
    color: #efefef;
}

.hire-instructions{
    font-size: 1.3em;
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

label.inline-label{
    display: inline-block;
    top: 9px;
    position: relative;
}
input.float-cbox{
    display: inline-block;
    float: left;
    width: 60px;
}

div.super-machine-text
{
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

.super-machine-text p
{
    font-size:1.2em;
}

div.video{
    padding: 20px;
    padding-top:0px;
}

div.video iframe{
    height:400px;
}

.super-video-text ul li
{
    /*font-size:0.9em;*/
}

/*.super-video-filler
{
    width: 100%;
    height: 21px;
    border: 1px gray dashed;
}*/


.testimonial-white-text{
    color:#d2d2d2;
}

.testimonial-quad .quad
{
    padding: 45px;
    line-height: 2.4em;
    font-style: italic;
    font-size: 1.2em;
    /*height: 340px;*/
    margin-bottom: 30px;
}

.testimonial-stacked .stackme
{
    padding: 45px;
    line-height: 2.4em;
    font-style: italic;
    font-size: 1.2em;
}

.testim-name{
    font-size:0.9em;
    margin-top: 10px;
    text-align: right;
    margin-right: 15px;
}

.cmp-footer
{
    padding-left: 20px;
    padding-right: 20px;
    background-color: #efefef;
}

.cmp-footer .links
{
    color:#616161;
    font-size: 0.8em;
}

.cmp-footer .links a
{
    color:#616161;
    text-decoration: none;
}

.cmp-footer .links a:hover
{
    color:#2a2a2a;
    text-decoration: none;
}

.validation-errors
{
    color: #309e44;
    font-weight: bold;
}

input.form-control {
    margin-bottom:15px;
}
.navbar-container{
    position: relative;
    z-index: 999;
}

/*  CSS TO SET THE BOOTSTRAP 3 NAVBAR BREAKPOINT  */
@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}