@media only screen and (min-width : 1700px) {
    body {
        background-size: 100% auto;
    }
}

@media only screen and (min-width: 768px ) and (max-width : 1024px) {


    .content-wrapper {
        max-width: calc( 100% - 40px);
        padding: 0 20px;
    }

    header .content-wrapper {
        padding: 0;
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    nav {
        width: calc(100% - 224px );
        float: right;
    }

        nav a {
            font-size: 1.25rem;
        }

    .col.small {
        float: none;
        margin: 0;
        width: auto;
    }

    .col.large {
        float: none;
        margin: 0;
        width: auto;
    }

    .services .col-half {
        float: none;
        margin: 0;
        width: auto;
    }
}

@media only screen and (max-width : 767px) {
    .logo {
        width: 150px;
        display: block;
        margin: auto auto auto 0;
        float: none;
    }

    .logo-footer {
        width: 120px;
        margin-top: 1.8em;
    }

    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.8rem;
        font-weight: 500;
    }

    h5, h6 {
        font-size: 1.4rem;
        margin-top: .5em;
        margin-bottom: 1em;
        font-weight: 700;
    }

    header {
        background-color: #e6e6e6;
    }

    .hero {
        padding-left: 10px;
        padding-right: 10px;
    }

    .content-wrapper {
        max-width: calc( 100% - 40px);
        padding: 0 20px;
    }

    header .content-wrapper {
        padding: 0;
        width: 100%;
        margin: 0;
        max-width: 100%;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        width: 30px;
        height: 30px;
        z-index: 10;
        right: 30px;
        top: 30px;
    }

        .mobile-menu span {
            display: block;
            width: 100%;
            height: 4px;
            background-color: rgba(49, 53, 61, 0.99);
            margin-bottom: 4px;
            transition: background-color ease 1s;
        }

        .mobile-menu.open span {
            background-color: #fff;
            transition-delay: .5s;
        }

    nav {
        float: none;
        position: fixed;
        overflow: auto;
        height: 100%;
        top: 0px;
        width: 100%;
        background-color: rgba(49, 53, 61, 0.99);
        display: none;
    }

        nav.open {
            display: block;
        }

        nav.animateIn {
            animation: MobileMenuIn .4s ease-in-out forwards;
        }

        nav.animateOut {
            animation: MobileMenuOut .4s ease-in-out forwards;
        }

    @keyframes MobileMenuIn {
        from {
            transform: scale(.1);
            opacity: 0;
        }
    }

    @keyframes MobileMenuOut {
        to {
            transform: scale(2);
            opacity: 0;
        }
    }

    nav a {
        font-size: 3rem;
        display: block;
        margin: 0;
        padding: .6em 0;
    }

        nav a:first-child {
            margin-top: 2em;
        }



    .col.small {
        float: none;
        margin: 0;
        width: auto;
    }

    .col.large {
        float: none;
        margin: 0;
        width: auto;
    }

    .services .col-half,
    .contact .col-half {
        float: none;
        margin: 0;
        width: auto;
    }

    .page {
        margin-top: 43px;
    }

    .certificates-list .left-col a {
        width: 120px;
        display: inline-block;
        vertical-align: top;
    }

    .certificates-list .left-col {
        float: none;
        width: auto;
        margin: 0 0 1em 0;
    }

    .certificates-list .right-col {
        width: auto;
        float: none;
    }

    .services-overview img {
        display: block;
        float: none;
    }

    .tagline p {
        margin-left: 0;
        text-align: center;
    }

    .services .tab-links {
        display: none;
    }

    .tab-content {
        display: block;
        margin-bottom: 2em;
    }

    .services .tab-content .col.small {
        width: auto;
        margin: 0;
        float: none;
    }

    .services .tab-content .col.large {
        width: auto;
        margin: 0;
        float: none;
    }

    .services .tab-content img {
        display: none;
    }

    .career-opportunities ul li {
        width: auto;
        margin: 0 0 1em 0;
        display: block;
    }

    .snapshots .col {
        width: auto;
        float: none;
        margin: 0 0 1em 0;
    }

    .service-list-wrapper li {
        width: auto;
        float: none;
        margin: 0 0 1em 0;
    }

    .service-list-wrapper .number {
        display: none;
    }

    #contact-map {
        display: none;
    }

    .contact-content h5 {
        margin-top: 3em;
    }

    .about-company img {
        display: block;
        max-width: 100%;
    }
}

@media only screen and (max-width : 480px) {
    .hero {
        padding-top: 235px;
        padding-bottom: 190px;
    }

    .home-connect .block-link {
        display: block;
    }

    .xs-hidden {
        display: none !important;
    }

    .logo-footer {
        display: block;
        margin: auto;
        float: none;
        margin-bottom: 0;
    }

    .copyright {
        float: none;
        text-align: center;
        clear: both;
        margin: 1em 0 1em 0;
        line-height: 1em;
    }

    .careers .banner {
        display: none;
    }
}