/* ---- 
Responsive style sheet.
The majority of the properties listed are specific to style id 2286 
and can be changed or deleted altogether if need be.
---- */


/* ---- desktop 1199px (bootstrap is set to 1200px, this fixes a discrepancy in break points) ---- */

@media screen and (max-width: 1199px) {
    header nav .fa-bars {
        display: inline-block;
    }
    header .phone {
        display: none;
    }
    .slick-slider-blur-banner .item {
        max-height: 380px;
    }
    .slick-slider-banner .item {
        max-height: 500px;
    }
    header .slick-slider-banner .item p span {
        font-size: 50px;
        line-height: 60px;
    }
    .interior .banner p span {
        font-size: 45px;
        line-height: 53px;
    }
    .contact,
    .testimonials {
        width: auto;
        margin: 40px 10px;
    }
    .title-img-container {
        width: 100%;
        height: 285px;
    }
    .title-img-container h2 span {
        width: 1200px;
        max-width: 100%;
    }
    .title-img-container h2 {
        width: auto;
    }
    .title-img-container h2 span strong {
        font-size: 42px;
        font-weight: 400;
        float: left;
        padding: 15px 50px 15px 0;
        margin: 38px 50px 20px 0;
        border-right: 1px solid #fff;
    }
    .testimonials .title-img-container {
        background-position: center;
    }
    .testimonials .title-img-container h2 span strong {
        margin-top: 4px;
    }
    .contact fieldset {
        display: inline-block;
        width: 48%;
    }
    .contact fieldset:nth-of-type(2) {
        float: right;
    }
    .contact fieldset input,
    .contact fieldset textarea {
        width: 98%!important;
        float: none!important;
    }
    .contact fieldset textarea {
        margin-top: 0;
    }
    .contact .container-inner,
    .testimonials .inner-container {
        padding: 340px 10% 40px 10%;
    }
    .contact .btn-row {
        margin-top: -50px;
    }
    .interior .title-img-container {
        width: 100%;
    }
    .interior .interior-info {
        display: none;
    }
    .interior .testimonials {
        height: 200px;
    }
    .interior .testimonials h2 {
        height: 180px;
    }
    .interior .banner-container {
        margin: 0 10px;
        width: auto;
    }
}

@media screen and (max-width: 1215px) {
    .interior .banner-container {
        margin: 0 10px 30px 10px;
        width: auto;
    }
}


/* ---- desktop 992px (bootstrap is set to 992px, this fixes a discrepancy in break points) ---- */

@media screen and (max-width: 991px) {
    .slick-slider-banner .item {
        min-height: auto;
        height: 400px!important;
    }
    header .slick-slider-banner .item p span {
        font-size: 40px;
        line-height: 50px;
        padding-left: 30px;
        width: 70%;
    }
    .interior .banner p span {
        font-size: 38px;
        line-height: 48px;
        padding-left: 30px;
        width: 70%;
    }
    .title-img-container {
        width: 100%;
        height: 200px;
    }
    .title-img-container h2 span {
        font-size: 0;
        height: 33px;
        overflow: hidden;
    }
    .title-img-container h2 span strong {
        font-size: 42px;
        float: none;
        border: none;
        margin: 0;
        padding: 28px 0 0 0;
    }
    .contact .container-inner,
    .testimonials .inner-container {
        padding: 240px 10% 40px 10%;
    }
    header section {
        opacity: 0.9;
    }
    header section:nth-of-type(2) {
        bottom: -80px;
    }
    .slick-dots {
        margin-left: 48px;
    }
    header .slick-slider-banner .slick-list {
        max-width: 970px;
    }
    .contact .btn-row,
    .testimonials .btn {
        margin-top: 20px;
    }
    main .call-to-action-buttons .container a .small-title,
    main .call-to-action-buttons .container a p {
        margin-left: 20px;
        margin-right: 20px;
    }
    main .call-to-action-buttons .container a p {
        font-size: 24px;
        line-height: 32px;
    }
    .conversion i {
        margin-right: 15px;
    }
    .featured-image {
        width: 300px;
    }
    .contact .featured-image {
        margin-left: 460px;
    }
    .contact fieldset {
        width: 100%;
        display: block;
    }
    .contact .col1 input,
    .contact .col2 textarea {
        width: 92%;
        width: -webkit-calc(100% - 30px);
        width: calc(100% - 30px);
        width: -o-calc(100% - 30px);
    }
    .contact .col1 input:nth-of-type(1),
    .contact .col1 input:nth-of-type(2) {
        width: 40%;
        width: calc(41% - 2px);
        -moz-width: calc(41% - 2px);
        -ms-width: calc(41% - 2px);
        -o-width: calc(41% - 2px);
        width: calc(41% - 2px);
        display: inline-block;
        vertical-align: top;
    }
    .contact .col1 input:nth-of-type(2) {
        float: right;
    }
    .contact .col2 {
        float: none!important;
    }
    .interior main .location i {
        display: block;
        margin: 10px 0;
    }
    .whole.inactive,
    .inactive nav,
    .inactive .scroll-back-to-top {
        margin-left: 250px;
    }
    .footer-address {
        width: 90%;
        margin: 0 auto;
    }
}


/* ---- tablet (bootstrap is set to 768px, this fixes a discrepancy in break points) ---- */

@media screen and (max-width: 767px) {
    header section {
        opacity: 0.7;
    }
    header section:nth-of-type(2) {
        background-size: 100% auto;
        bottom: -20px;
        min-width: 500px;
    }
    header .container.banner-info {
        width: 100%;
        position: absolute;
        top: 40vh;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    header .slick-slider-banner .slick-list {
        max-width: 750px;
    }
    .interior header {
        height: auto;
        min-height: 1px;
    }
    .interior header .social {
        display: none;
    }
    .interior header .container.banner-info {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .interior header .container.banner-info {
        position: relative;
        -webkit-transform: none;
        left: 0;
        top: 0;
    }
    .mobile-icons {
        width: 100%;
        position: relative;
        display: block;
        text-align: left;
        padding: 0 0 20px 0;
        margin: 0 0 20px 15px;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .menu-icons li:nth-of-type(1) {
        margin-left: 20px!important;
    }
    header nav {
        padding: 30px 0;
    }
    header .col-md-11 {
        padding: 0;
    }
    header nav .fa-bars {
        float: right;
        margin: -1px 20px 0 0;
    }
    header .logo {
        margin: 0 20px;
    }
    .title-img-container h2 span strong {
        font-size: 34px;
    }
    main .call-to-action-buttons .container a:active {
        background: #444;
    }
    .btn:hover,
    a.btn:hover,
    .btn-row:hover,
    input[type=button]:hover,
    main a.icon:hover {
        color: #fff!important;
        background: #555!important;
    }
    .conversion .btn:hover {
        background: #fff!important;
        color: #555!important;
    }
    .btn:active,
    a.btn:active,
    .btn-row:active,
    input[type=button]:active,
    main a.icon:active,
    .conversion .btn:active {
        color: #fff!important;
        background: #111!important;
    }
    main .call-to-action-buttons {
        background: #888;
    }
    main .call-to-action-buttons .container a .small-title {
        padding-top: 15px;
    }
    main .call-to-action-buttons .container a p {
        padding-bottom: 45px;
        font-size: 28px;
        line-height: 36px;
    }
    .testamonials .pull-right,
    .contact .pull-right {
        float: none!important;
    }
    .contact .col1 input,
    .contact .col2 textarea {
        width: 90%!important;
        display: block!important;
        margin: 0 auto 10px auto;
    }
    .contact .col2 textarea {
        height: 150px;
    }
    .contact .col1 input:nth-of-type(2) {
        float: none;
    }
    .contact .container-inner {
        padding-bottom: 30px;
    }
    .contact .btn-row {
        margin-top: 15px;
    }
    .contact .col1 span {
        margin-right: 0;
    }
    /* for error messages. */
    .interior main .location i {
        margin-bottom: 15px;
    }
    .interior main .location i::before {
        display: block;
    }
    .slick-slider-associations .slick-track,
    .slick-slider-associations img {
        margin: 0 auto;
    }
    footer .logo img {
        max-width: 150px;
    }
    footer .credits {
        margin-top: 30px;
    }
    .footer-address {
        width: 100%;
        margin: 0 auto;
        max-width: 345px;
    }
}


/* ---- mobile ---- */

@media screen and (max-width: 600px) {
    .contact textarea {
        height: 120px;
    }
    .contact .col2 textarea {
        height: 200px;
    }
}

@media screen and (max-width: 540px) {
    .contact textarea {
        height: 120px;
    }
}

@media screen and (max-width: 480px) {
    header .logo div > div:nth-of-type(1),
    header .logo div > div:nth-of-type(2) {
        font-size: 22px;
        line-height: 1.3em;
    }
    header .logo div > div:nth-of-type(3) {
        font-size: 18px;
        line-height: 1.3em;
        margin-top:5px;
    }
    header .slick-slider-banner .item p span,
    .interior .banner span {
        font-size: 34px;
        line-height: 42px;
        padding: 0 20px;
        display:none!important;
    }
    .interior .blur-banner {
        min-height: 0!important;
        max-height: 500px!important;
        height: 325px!important;
    }
    .interior .banner {
        height: 150px!important;
    }
    .interior .banner p {
        height: 150px!important;
    }
    .interior .banner p span {
        font-size: 30px;
        line-height: 38px;
        padding-left: 20px;
        width: 90%;
    }
    header .slick-slider-banner .item p,
    .interior .banner p {
        overflow: hidden;
    }
    header .slick-slider-blur-banner .item {
        min-height: 0!important;
        max-height: 500px!important;
        height: 325px!important;
    }
    header .slick-slider-banner .item {
        height: 175px!important;
    }
    .slick-dots {
        display:none!important;
    }
    .user-content {
        padding-top:0!important;
    }
    .title-img-container h2 span strong {
        font-size: 30px;
        line-height: 38px;
    }
    .title-img-container h2 span {
        padding: 0 20px;
    }
    .contact,
    .home .testimonials {
        margin-left: -5px;
        margin-right: -5px;
    }
    footer .credits {
        padding-bottom: 54px;
    }
}


/* ---- mobile (these breakpoints are to ensure the home page banner area looks great on all devices) ---- */

@media screen and (max-height: 533px) {
    .scroll-notice {
        top: 400px;
    }
}

@media screen and (max-width: 400px) {
    .contact textarea {
        height: 150px;
    }
    .title-img-container h2 span {
        padding-left: 10px;
    }
    .title-img-container h2 span strong {
        font-size: 26px;
        line-height: 35px;
    }
}

@media screen and (max-width: 365px) {
    header .tagline {
        font-size: 40px;
        line-height: 48px;
    }
    header .slick-slider-banner .item p span,
    .interior .banner span {
        font-size: 30px;
        line-height: 38px;
    }
}

@media screen and (max-width: 344px) {
    .contact textarea {
        height: 180px;
    }
    header nav .fa-bars {
        float: right;
        margin: -1px 15px 0 0;
    }
}

@media screen and (max-width: 290px) {
    .contact textarea {
        height: 210px;
    }
}