/* ---- 
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 all 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 all 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 all 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 all 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 .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 all and (max-width: 540px) {
    .contact textarea { height:120px; }
}
@media all and (max-width: 480px) {
    header .slick-slider-banner .item p span, .interior .banner span { font-size:34px; line-height:42px; padding:0 20px; }
    .interior .blur-banner { height:400px; }
    .interior .banner { height:250px; }
    .interior .banner p { height:230px; }
    .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-banner .item { height:350px!important; }
    .title-img-container h2 span strong { font-size:30px; line-height:38px; }
    .title-img-container h2 span { padding:0 20px; }
    .home .contact, .home .testimonials { margin-left:-5px; margin-right:-5px; }
    footer .credits { padding-bottom:54px; }
    .slick-dots { margin-left:34px; }
}

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

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

@media all 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 all 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 all and (max-width: 344px) {
    .contact textarea { height:180px; }
}
@media all and (max-width: 290px) {
    .contact textarea { height:210px; }
}