﻿/* RESPONSIVE FOR SMALLER DESKTOPS & TABLET DEVICES */

@media screen and (max-width:1200px){
    .menu li a{
        font-size:1em;
    }
    .flex-item {
    padding-right: 15px;
    min-width: 120px;
    font-size:0.85em;
    }
    .footer {
    margin-top: -258px;
    }
    .fixedrow-sm{
    height:300px;
    }
    .fixedrow-lg{
        height:650px;
    }
    .expand{
        font-size:1em;
    }
    #contact-form .col-sm-4{
        width:35%;
    }
    #contact-form .col-sm-8{
        width:65%;
    }
    #contact-form .bluerow .col-sm-4{
        width:32%;
    }
    #contact-form .bluerow .col-sm-8{
        width:68%;
    }
}

/* RESPONSIVE FOR MOBILE DEVICES */

@media screen and (max-width:995px){
    .top-menu{
        text-align:center;
        margin:0 auto;
    }
    .logo{
        width:345px;
        height:180px;
    }
    .menu{
        width:100%;
    }
    .menu li a{
        font-size:1.06em;
    }
    .footer .flex-container{
        flex-wrap:wrap;
        justify-content:flex-start;
    }
    .footer .flex-item {
    padding-right: 15px;
    min-width:80px;
    max-width:150px;
    font-size:1em;
    }
    .footer .last{
        text-align:left;
    }
    .footer .last .text-right{
        text-align:left;
    }
    .footer .social-links{
        float: left;
        padding: 0;
    }
    .footer {
    margin-top: -258px;
    }
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12{
        width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
    .fixedrow-xs,
    .fixedrow-sm,
    .fixedrow-md,
    .fixedrow-md2,
    .fixedrow-lg{
        height:auto !important;
    }
    .highlight-box h2{
        text-align:left;
    }

    .menu{
        display:none;
    }

    .drawer{
        display:block;
        z-index:999999;
        position:fixed;
        top:8px;
        right:10px;
        text-align:right;
    }

    .toggle-mobile-menu{
        color:#fff;
        font-size:2em;
    }
    
    .toggle-mobile-menu:hover,
    .toggle-mobile-menu:focus,
    .toggle-mobile-menu:active{
        cursor:pointer;
        color:#eee;
        text-decoration:none;
    }

    .mobile-menu{
        display:none;
    }

    .mobile-menu{
        width:45%;
        list-style:none;
        padding:10px 0;
        position:fixed;
        top:25px;
        right:0;
        bottom:0;
        text-align:right;
        margin-top:15px;
        background:linear-gradient(#006bb7,#0054a6);
    }

    .mobile-menu li{
        width:100%;
        padding:0 10px;
        font-size:1.2em;
    }

    .mobile-menu li a{
        color:#ddd;
        background:transparent !important;
    }

    .mobile-menu li a:hover,
    .mobile-menu li a:focus,
    .mobile-menu li a:active{
        background-color:transparent !important;
        color:#fff;
    }

    .navbar-nav{
        display:none;
    }
}

@media screen and (min-width:768px) and (max-width:994px){
    #contact-form .col-sm-4{
        width:16%;
    }
    #contact-form .col-sm-8{
        width:84%;
    }
    #contact-form .bluerow .col-sm-4{
        width:45%;
    }
    #contact-form .bluerow .col-sm-8{
        width:55%;
    }
}

@media screen and (max-width:767px){
    #contact-form .col-sm-4,
    #contact-form .col-sm-2{
        width:100% !important;
        float:left;
        text-align:left;
    }
    #contact-form .col-sm-4 label,
    #contact-form .col-sm-2 label{
        position:relative;
        left:20px;
    }
    #contact-form .col-sm-8,
    #contact-form .col-sm-10{
        width:100% !important;
    }
    #contact-form .bluerow .col-sm-4{
        padding-left:0;
    }
    #contact-form .bluerow .col-sm-8{
        float:left;
        text-align:left;
    }
}

@media screen and (max-width:430px) {
    .img-100{
        width:75px;
    }
    .img-200{
        width:120px;
    }
    .service-icon-link{
        max-width:50px;
        overflow-x:hidden;
        text-overflow:ellipsis;
    }
    .service-icon{
        width:50px;
        height:50px;
    }
    .industry-icon-link{
        max-width:40px;
        overflow-x:hidden;
        text-overflow:ellipsis;
    }
    .industry-icon{
        width:40px;
        height:40px;
    }
}

@media screen and (max-width:385px){
    .logo{
        width:80%;
        margin:auto;
    }
}
