/* Responsive Style Sheet */

/* click5 Interactive */

@media only screen and (min-width: 1400px) {
    .big-container .container{
        max-width: 1380px;
    }
    .container-fluid{
        padding-right: 5vw;
        padding-left: 5vw;
    }
}

@media only screen and (max-width: 1549px) {    
    #textbox .photo {
        flex: 0 0 calc(45% + 130px);
        max-width: calc(45% + 130px);
    }
    #textbox .row:nth-child(even) .photo {
        margin-right: -130px;
    }
    #textbox .row:nth-child(odd) .photo {
        margin-left: -130px;
    }
}

@media only screen and (max-width: 1399px) {
    #sidebar-area #boxes .item h4{
        font-size: 12px;
    }
    #sidebar-area #boxes .item span{
        font-size: 20px;
    }

    #textbox .photo {
        flex: 0 0 calc(45% + 30px);
        max-width: calc(45% + 30px);
    }
    #textbox .row:nth-child(even) .photo {
        margin-right: -30px;
    }
    #textbox .row:nth-child(odd) .photo {
        margin-left: -30px;
    }

    #textbox .row:nth-child(odd) .content {
        padding-left: 35px;
    }
    #textbox .row:nth-child(even) .content {
        padding-right: 35px;
    }

    #news .photo {
        height: 330px;
    }
}

@media only screen and (max-width: 1199px) {
    #nav ul li a, header.sticky #nav ul li a{
        font-size: 13px;
        padding: 0px 12px;
    }
    header .top a.phone, header.sticky .top a.phone{
        font-size: 19px;
    }
    #boxes .item a{
        padding: 25px 15px 25px 20px;
    }
    #boxes .item h4{
        font-size: 12px;
    }
    #sidebar-area #special-offers .item{
        padding: 30px 20px 25px 20px;
    }

    #stats .box p {
        height: 62px;
        font-size: 40px;
        line-height: 62px;
    }
    #stats .box:last-of-type p {
        font-size: 28px;
    }

    #services .col-xl-3:nth-child(n+3) {
        margin-top: 40px;
    }

    #news .photo {
        height: 290px;
    }

    #areas iframe {
        height: 480px;
    }
}

@media only screen and (max-width: 991px) {
    .slicknav_menu {
        display: block;
    }
    #boxes {
        margin-top: -110px;
    }
    #hero {
        height: 690px; // was 630 before egg banner
        padding: 135px 0 175px 0;
    }
    #hero h1 {
        font-size: 50px;
    }
    #services .item{
        margin-bottom: 40px;
    }
    #cta .item{
        width: 100%;
    }
    #contact .contact-info, #contact .contact-info p{
        text-align: center;
    }
    .social{
        float: none;
        margin: 30px 0;
    }
    #mobile-sticky{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background-color: #002967;
        z-index: 99;
    }
    #mobile-sticky .item{
        width: 25vw;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 10px;
        line-height: 9px;
        font-weight: 300;
        padding-top: 12px;
    }
    #mobile-sticky .item img{
        width: 19px;
        margin-bottom: 5px;
    }
    #mobile-sticky .item.phone img{
        width: 50px;
        height: auto;
    }
    #mobile-sticky .item.phone{
        padding-top: 7px;
    }
    #mobile-sticky .item.gallery{
        padding-top: 15px;
        font-size: 12px;
    }
    #mobile-sticky .item.gallery img {
        width: 22px;
        margin-bottom: 7px;
    }
    .page-content:before, #sidebar-area:before{
        display: none;
    }
    .page-content{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #sidebar-area #boxes {
        margin-top: 30px;
    }

    #services .col-xl-3:nth-child(n+3) {
        margin-top: 10px;
    }

    #stats .box:nth-child(n+3) {
        margin-top: 20px;
    }
    #stats .box p {
        height: 44px;
        line-height: 44px;
    }
    #stats .box:last-of-type p {
        font-size: 29px;
        line-height: 44px;
    }

    #textbox .photo {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px;
        order: 2;
    }
    #textbox .row:nth-child(odd) .photo {
        margin-left: 0;
    }
    #textbox .row:nth-child(even) .photo {
        margin-right: 0;
    }
    #textbox .photo > div {
        height: 460px;
    }

    #textbox .content {
        flex: 0 0 100%;
        max-width: 100%;
        order: 1;
    }
    #textbox .row:nth-child(odd) .content {
        padding-left: 15px;
    }
    #textbox .row:nth-child(even) .content {
        padding-right: 15px;
    }

    #goal p.text-headline {
        padding-bottom: 15px;
    }
    #goal .photo {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 767px) {
    
    .logo{
        margin: 15px 0;
    }
    p, ul li, ol li{
        font-size: 15px;
    }
    h4{
        font-size: 18px;
    }
    h3{
        font-size: 22px;
    }
    h2{
        font-size: 30px;
    }
    h1{
        font-size: 35px;
    }
    .section{
        padding: 65px 0;
    }
    .contact-info{
        padding-top: 30px;
    }
    #footer ul{
        float: left;
        padding-bottom: 20px;
    }
    .entry{
        padding-bottom: 35px;
    }
    #sidebar-area .item:last-child{
        padding-bottom: 0;
    }
    header.sticky .logo {
        max-width: 70px;
    }
    #hero h3{
        font-size: 15px;
    }
    #hero h1 {
        font-size: 40px;
    }
    #hero h4 {
        font-size: 13px;
    }
    .testimonial .description p {
        font-size: 16px;
        line-height: 23px;
    }
    .testimonial .description{
        padding: 0;
    }
    .testimonial .description p:before{
        left: 0;
    }
    #footer{
        padding: 0 0 80px 0;
    }
    .subpage-container{
        padding-top: 0;
    }
    .hero-sub h1{
        font-size: 40px;
    }
    .hero-sub h4{
        font-size: 13px;
    }
    .hero-sub {
        height: 470px;
        padding: 30px 0;
    }

    #stats .box:nth-child(n+2) {
        margin-top: 20px;
    }
    #stats .box p {
        height: auto;
        line-height: 100%;
    }
    #stats .box:last-of-type p {
        line-height: 100%;
    }

    #services .col-xl-3:nth-child(n+3) {
        margin-top: 0;
    }

    #textbox .content h2::after {
        height: 6px;
        margin-top: 10px;
    }
    #textbox .content p {
        font-size: 15px;
    }
    #textbox .photo {
        margin-top: 10px;
    }
    #textbox .photo > div {
        height: 380px;
    }

    #goal p.text-headline {
        font-size: 16px;
        line-height: 26px;
        padding-bottom: 10px;
    }
    #goal .content p {
        font-size: 15px;
    }

    #faq .box {
        margin-top: 15px;
    }
    #faq .box .content {
        padding: 30px;
    }
    #faq .box .content::before {
        width: 38px;
        height: 38px;
        top: 38px;
        right: 30px;
    }
    #faq .box .content h3 {
        font-size: 18px;
        line-height: 26px;
    }
    #faq .box .content p {
        font-size: 15px;
        padding-bottom: 0;
    }

    #areas h2 {
        padding-bottom: 10px !important;
    }
    #areas ul li {
        font-size: 14px;
    }
    #areas iframe {
        height: 400px;
    }
}

@media only screen and (max-width: 576px) {
    header .top .item:nth-child(2) img{
        width: 100%;
    }
    .logo{
        max-width: 100px;
    }
    #hero {
        height: 500px; //was 380 before egg banner
        padding: 75px 0 125px 0;
    }
    #hero h1 {
        font-size: 23px;
    }
    #hero h3 {
        font-size: 12px;
        padding-bottom: 0;
    }
    #hero h4 {
        font-size: 11px;
        padding-top: 5px;
    }
    #boxes .item h4 {
        font-size: 11px;
    }
    #boxes .item span {
        font-size: 21px;
    }
    #boxes .item img {
        width: 37px;
    }
    #about{
        padding: 30px 0;
    }
    #about h3{
        font-size: 19px;
    }
    #about p{
        font-size: 15px;
    }
    #services .item{
        height: 185px;
    }
    #services .item span.arrow{
        width: 40px;
        height: 40px;
        bottom: -20px;
    }
    #services .item span.arrow i {
        line-height: 40px;
        font-size: 20px;
    }
    #services{
        padding-bottom: 0;
    }
    h4, .entry h4{
        font-size: 16px;
    }
    h3, .entry h3{
        font-size: 19px;
    }
    h2, .entry h2{
        font-size: 20px;
    }
    h1, .entry h1{
        font-size: 25px;
    }
    h4.section-subtitle{
        font-size: 13px;
    }
    #why .item{
        padding: 20px 15px 20px 15px;
    }
    #why .item p{
        font-size: 10px;
    }
    #special-offers .bg-image {
        height: 280px;
        margin-top: 0px;
        padding-top: 50px;
    }
    #why{
        padding-bottom: 30px;
    }
    #special-offers .special-items {
        margin-top: -45px;
    }
    button, .btn{
        font-size: 13px !important;
    }
    #special-offers .item {
        padding: 30px 20px 25px 20px;
    }
    #special-offers{
        padding-bottom: 20px;
    }
    #cta h2 {
        font-size: 20px;
    }
    #cta {
        padding: 50px 0 70px 0;
    }
    #cta .item h4{
        font-size: 11px;
    }
    #gallery .filters span {
        font-size: 10px;
        padding: 9px 10px;
        letter-spacing: -0.3px;
    }
    #gallery .gallery-images img{
        height: 100px;
    }
    #txt p{
        font-size: 15px;
    }
    .testimonial .description p {
        font-size: 15px;
    }
    #contact h1{
        font-size: 27px;
    }
    #contact .contact-info h4:first-child{
        font-size: 20px;
    }
    #contact .contact-info a, #contact .contact-info p{
        font-size: 15px;
    }
    #contact .contact-info a.phone{
        font-size: 17px;
    }
    #news .txt p{
        font-size: 15px;
    }
    input.wpcf7-submit{
        font-size: 16px !important;
    }
    #contact{
        padding: 65px 0 40px 0px
    }
    #footer{
        font-size: 10px;
    }
    #footer ul li a {
        font-size: 12px;
    }
    #footer ul li{
        padding: 0 14px;
    }
    #why .item img{
        height: 40px;
    }
    .page-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #sidebar-area ul{
        padding: 0;
    }
    #sidebar-area #garages-gallery .item {
        height: 285px;
    }
    .hero-sub h1 {
        font-size: 23px;
    }
    .hero-sub h4 {
        font-size: 10px;
    }
    .hero-sub {
        height: 335px;
    }
    #sidebar-area ul li a{
        font-size: 15px;
    }
    #gallery-cantainer .portfolio-item img{
        height: 120px;
    }

    #stats {
        padding: 45px 0;
    }
    #stats .box p {
        font-size: 36px;
    }
    #stats .box:last-of-type p {
        font-size: 27px;
    }
    #stats .box span {
        font-size: 16px;
    }

    #textbox .section {
        padding-top: 45px !important;
    }
    #textbox .photo > div {
        height: 250px;
    }

    #goal p.text-headline br {
        display: none;
    }
    #goal .photo > div:not(#cta) {
        height: 250px;
    }

    #news .photo {
        height: 250px;
    }
}

.se-bbb-logos {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.se-bbb-logos img {
    height: auto;
    max-height: 50px;
    width: auto;
}

@media (max-width: 575.98px) {
    .se-bbb-logos {
        justify-content: center;
        gap: 15px;
    }

    .se-bbb-logos img {
        max-height: 45px;
    }
}