@media only screen and (max-width: 1236px) {

    .container,
    .container--col { 
        width: 100%;
        max-width: 1024px; 
    }
    .container--col { 
        /* magic number alert! most of the site-main content areas
        use col-lg-offset-1, which is ~820px at a 1024px container width.
        856 = 820 + 18 + 18, which we reset to 100% at the next breakpoint */ 
        max-width: 856px; 
    }

    /* header --------------------------------------------- */

    .header-logo {
        max-width: 240px;
        left: 25px;
        top: 30px;
    }
    .header-utility {
        right: 160px;
    }
    .site-header .social {
        right: 0;
        top: -59px; /* magic numbers ... */
    }

    /* nav --------------------------------------------- */

    .nav-main {
        right: 30px;
    }
    .nav-main__item {
        margin-left: 0.5em;
    }
    .nav-main__item > a {
        font-size: 0.95rem;
        padding-left: 1em;
        padding-right: 1em;
    }

    /* site-headline --------------------------------------------- */

    .headline-title {
        font-size: 3em;
    }
    .site-headline {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    /* modules --------------------------------------------- */

    .work-details {
        /* flexslider seems to miscalculate slide widths ever so
        slightly at this size and shows the edge of the next slide, 
        and overflow: hidden doesn't fix it */
        max-width: 99.9%;
        overflow: hidden;
    }
    #map {
        height: 45vw;
        min-height: 220px;
    }

    /* footer --------------------------------------------- */

    .footer-info__contacts {
        font-size: 0.9em;
        margin-top: 1.5em;
        margin-bottom: 0;
        line-height: 1.7;
    }
}

/* =================================================================================
   1199 - lower = lg
================================================================================= */

@media only screen and (max-width: 1199px) {
    
}

/* =================================================================================
   1024 - lower
================================================================================= */

@media only screen and (max-width: 1023px) {
    
    .container,
    .container--col {
        width: 100%;
        max-width: 700px;
    }

    html, 
    body {
        overflow-x: hidden;
        padding-top: 0;
    }
    .header-logo {
        left: 15px;
        top: 30px;
    }
    .site-header {
        position: relative;
    }
    .site-header .container {
        position: static;
        max-width: 100%;
    }
    .site-header .social {
        right: auto;
        top: 15px;
        left: 20px;
    }
    .site-header .social__item {
        font-size: 1.3rem;
    }

    .header-utility {
        right: 20px;
    }
    .toggle-nav-main {
        display: block;
        position: absolute;
        padding: 20px;
        top: 55px;
        right: 25px;
    }
    
    /* ==================================================
      Main Navigation
    ================================================== */

    .nav-main--active .body-overlay {
        -webkit-transform: translateX(-270px);
        -moz-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        transform: translateX(-270px);
        box-shadow: 2px 0 20px rgba(0,0,0,.5);
    }
    .nav-main {
        position: absolute;
        width: 270px;
        right: -270px;
        top: 0;
        z-index: 101;
        display: block;
        margin: 0;
        padding: 55px 0 0 0;
        overflow-x: hidden;
    }
    .nav-main__list {
        margin: 0;
        padding: 0;
        border-top: rgba(255,255,255,.2) 1px solid;
    }
    .nav-main__item {
        display: block;
        margin: 0;
        border-bottom: rgba(255,255,255,.2) 1px solid;
    }
    .nav-main__item > a {
        display: block;
        padding: 10px 20px;
        background: transparent;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased; 
    }

    /* =========== Submenu / dropdown ========== */
    .nav-main__submenu {
        position: static;
        top: auto;
        left: auto;
        display: none;
        width: auto;
        height: auto;
        background: none;
        box-shadow: 0 0 0 0 transparent;
        opacity: 1;
    }
    .nav-main__submenu ul {
        margin: 0;
        padding: 5px 0 15px 0;
        list-style: none;
    }
    .nav-main__item {
        transition: all 0.2s ease;
    }
    .nav-main__item--active {
        background: #262626;
    }
    .nav-main__submenu a {
        display: block;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 13px;
        padding: .3em 0 .3em 2.5em;
        color: rgba(255,255,255,.5);
    }
    .nav-main__submenu a:hover {
        color: #b5c034;
    }

    .nav-main__item--active .nav-main__submenu {
        top: auto;
        opacity: 1;
        max-height: none;
    }

    .nav-main__submenu--mega ul {
        display: block;
        width: auto;
    }



    .hero {
        height: auto;
        padding-top: 12%;
        padding-bottom: 12%;
        background-size: cover;
        min-height: 200px;
    }
    .hero .container {
        display: block; /* not flex */
    }
    .hero__content {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .hero__heading {
        font-size: 3em;
    }


    .home-callout__image {
        max-width: 30%;
        margin-top: 20px;
    }
    

    .site-headline:before {
        position: absolute;
        background-position: 50% 0;
    }
    .ebook-cta {
        font-size: 1rem;
    }
    .ebook-cta__excerpt {
        padding-top: 1.4em;
        padding-bottom: 1.5em;
    }
}


/* =================================================================================
   991 - lower = md
================================================================================= */

@media only screen and (max-width: 991px) {
    
    html { font-size: 15px; }

    .site-header {
        height: 120px;
    }
    .site-headline__image {
        background-position: 50% 0;
    }


    .header-logo {
        max-width: 220px;
    }
    .toggle-nav-main {
        top: 46px;
    }
    .site-headline {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .headline-title {
        font-size: 2.75em;
    }
    .site-columns > .container {
        padding-top: calc(2.5rem + 22px);
        padding-bottom: 2.5rem;
    }
    .site-columns--home > .container {
        padding-top: 3.5em;
        padding-bottom: 4em;
    }


    .home-callout {
        text-align: center;
    }
    .home-callout__image {
        display: none;
    }
    .callout-video-wrap {
        float: none;
        max-width: 500px;
        margin: 0 auto 2rem;
    }
    .home-callout__heading {
        margin-top: 0;
    }


    .home-services,
    .home-blog {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .home-services__list {
        display: block;
    }
    .home-services__item {
        display: block;
        width: 100%;
    }
    .home-services__item {
        margin-bottom: 40px;
    }
    .home-services__item a:before {
        height: 70px;
    }

    /* ==================================================
      Modules
    ================================================== */
    
    .work-details__meta {
        padding: 30px;
    }
    .work-details__meta > div {
        width: 100%;
        float: none;
    }
    .work-details__meta > div:nth-of-type(n+2) {
        margin-top: 20px;
    }
    .work-details__demo {
        float: none;
        margin-top: 20px;
        width: 100%;
    }
    .flex-direction-nav a {
        width: 60px;
        height: 60px;
        opacity: 0.85;
        margin-top: -30px;
    }
    .flex-direction-nav a:before {
        font-size: 28px;
        line-height: 60px;
    }


    .card__content {
        padding: 1.2em;
    }
    .card__heading {
        font-size: 1.15em;
    }


    .nav-categories .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .nav-categories li {
        display: block;
        margin: 10px 0;
        padding: 0;
        border: 0;
    }

    /* ==================================================
      Footer
    ================================================== */
    
    .footer-info {
        padding-top: 2.25em;
        padding-bottom: 2.25em;
    }
    .footer-info .col:nth-of-type(n+2) {
        margin-top: 40px;
    }
}

/* =================================================================================
   767 - lower = sm
================================================================================= */

@media only screen and (max-width: 767px) {

    h2, .h2 {
        font-size: 1.4em;
    }
    h4 {
        font-size: 0.85rem;
    }


    .site-header {
        height: 95px;
    }
    .site-header:before,
    .header-utility {
        display: none;
    }
    .header-logo {
        max-width: 160px;
        left: 10px;
        top: 20px;
    }
    .toggle-nav-main {
        top: 15px;
        right: 10px;
    }

    /* ==================================================
      Home
    ================================================== */

    .hero__content {
        padding: 0;
    }
    .hero__heading {
        font-size: 2.5em;
    }
    
    .ebook-cta {
        font-size: 0.875em;
    }
    .ebook-cta__excerpt {
        padding: 20px;
    }

    .logo-grid {
        padding-top: 3rem;
        padding-bottom: 1.25rem;
    }

    .home-services__heading,
    .home-callout__heading,
    .home-blog__heading {
        font-size: 1.7em;
    }
    .home-blog {
        padding: 30px 0;
    }


    /* ==================================================
      Modules and Content
    ================================================== */

    .headline-title {
        font-size: 2.5em;
    }
    .lead {
        font-size: 1.3em;
    }
    .nav-prevnext {
        margin-top: 1em;
    }

    /* ==================================================
      Footer
    ================================================== */

    .testimonial__quote {
        font-size: 1.2em;
    }

    .contact-cta {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .contact-cta:before,
    .contact-cta:after {
        display: none;
    }
    .contact-cta__heading {
        font-size: 1.75em;
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }
    .contact-cta .btn {
        margin: 0;
    }

    .footer-links {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: left;
    }
    .footer-links .social {
        float: none;
        margin-bottom: 10px;
    }
    .footer-links__list li {
        display: block;
        border: 0;
        margin: 1em 0;
        padding: 0;
    }
    .footer-links__list li:last-child {
        margin-bottom: 0;
    }
    
}

/* =================================================================================
   680
================================================================================= */

@media only screen and (max-width: 680px) {


    .header-logo {
        left: 0;
    }

    .contact-cta__heading {
        font-size: 1.4em;
    }

    /* ==================================================
      Modules
    ================================================== */

    .list-article:nth-of-type(n+2) {
        margin-top: 2em;
    }
    .list-article__thumb {
        float: none;
        display: block;
        width: 200px;
        height: auto;
        margin: 0 auto 1em auto;
    }
}

/* =================================================================================
   480
================================================================================= */

@media only screen and (max-width: 480px) {

    html {
        font-size: 14px;
    }

    input[type="text"],
    input[type="email"],
    input.form-control,
    textarea {
        font-size: 16px;
    }

    .hero__heading {
        font-size: 2em;
    }
    .home-services__heading, 
    .home-callout__heading, 
    .home-blog__heading {
        font-size: 1.4em;
    }

    .site-columns > .container {
        padding-bottom: 30px;
    }
    .site-columns--home > .container {
        padding-top: 30px;
    }

    .toggle-nav-main {
        right: 0;
    }

    .site-headline {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .headline-title {
        font-size: 2em;
    }

    /* ==================================================
      Modules and Content
    ================================================== */

    .content ul,
    .content ol {
        margin-left: 0;
    }

    .nav-article-meta {
        font-size: 0.8em;
    }
    .nav-article-meta li {
        border-width: 1px;
    }


    .work-details {
        margin: 1.5em 0;
    }
    .work-details__meta {
        padding: 20px;
        font-size: 0.875rem;
    }

    .nav-prevnext li {
        font-size: 0.8em;
    }

    /* ==================================================
      Footer
    ================================================== */

    .footer-testimonials {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

}