html, body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}
body {
    color: #0E1F29;
    background-image: url(/img/banner-bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1920px;
}
h1, h2 {font-weight: 600;}
h1 {
    font-size: 3.72rem;
    line-height: 1.3
}
h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
h3 {
    font-weight: 300;
    text-transform: uppercase;
    color: #59B794;
    font-size: .75rem;
    margin-bottom: 0;
}
.callout {
    border-radius: 0;
    border: none;
    background-color: transparent;
}

#banner h1 {color: #fff;}
#header a {
    color: #fff;
    font-size: 1.2rem;
} 
#header span, #footer span {color: #59B794;}
#header div:last-child {padding-top: 20px;}
#hero {
    padding-top: 8.1rem;
    padding-bottom: 9.3rem;
}

#ux, #ui, #ps {padding-bottom: 6em;}
#ux span, #ui span, #ps span {display: block}

.testimonial {
    padding-top: 1.5rem;
    font-style: italic;
    font-size: .8rem;
}
#ux h3, #ui h3 {
    padding-top: 4.5rem;
}
#ui img {
    max-width: none;
    margin-left: -430px
}
#ps img {margin-top: 3rem;}
#footer {
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #fff;
    padding-top: 12rem;
}
#footer:before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      top: 20%;
      left: -50%;
      z-index: -1;
      background-color: #59B794;
      -ms-transform: rotate(6deg); /* IE 9 */
      -webkit-transform: rotate(6deg);
      transform: rotate(6deg);
}
#footer a {
    color: #fff;
    font-size: 1.5rem
}
#footer span {
    color: #0E1F29;
    font-size: 1.5rem
}
#contact {
    padding: 20px 0 50px;
}
#copyright {
    font-size: .8rem;
    color: #82C9AF;
    padding-bottom: 20px;
}
#mini {
    padding-right: 18px;
}
#virgin {
    padding-top: 22px;
    padding-right: 24px;
}
#vw {
    padding-top: 17px;
    padding-right: 34px;
}
#campus {
    padding-top: 29px;
    padding-right: 34px;
}
#cb {
    padding-top: 21px;
}
#clients {
    padding-top: 3rem;
    padding-bottom: 4rem;
    list-style: none;
    margin: 0 auto;
}
#clients li {display: inline-block;}
#event-vid {
    background: transparent url("/img/event.png") no-repeat left top;
    width: 310px;
    height: 626px;
    padding: 0 22px;
    margin: 0 auto;
}
#event-vid video {
    width: 100%;
    height: 100%;
    display: none;
}



@media only screen and (max-width: 40em) { 
    body {background-size: 1344px}
    h1 {
        font-size: 2.17rem;
        line-height: 1.3
    }
    h2 {
        font-size: 2rem;
        
    }
    #hero {
        padding-top: 4rem;
        padding-bottom: 0;
    }
    #header div:last-child {padding-top: 8px;text-align: left;}
    #header div:last-child a {
        display: block;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        background: url(/img/send-outline-24.svg);
        background-size: 24px 24px;
    }
    #header div:last-child span {display: none;}
    #header img {
        max-width: 80%; 
    }
    #banner.callout {padding: 3rem 1.7rem;}
    #ux, #ui, #ps {padding-bottom: 4em;}
    #ux div:first-child {text-align: center}
    #ux span, #ui span, #ps span {display: inline;}
    #ui img {
        max-width: 140%;
        margin-left: -140px;
    }
    #ps img {margin-top: 0;}
    #ps h3 {padding-top: 4.5rem;}
    #clients {
        clear: both;
        padding-top: 0;
        padding-bottom: 0;
    }
    #clients li {
        display: inline-block;
    }
    #mini {
        padding-right: 10px;
        width: 33%;
    }
    #virgin {
        padding-right: 10px;
        width: 50%;
    }
    #vw {
        padding-right: 0;
        width: 14%;
    }
    #campus {
        padding-right: 18px;
        width: 40%;
    }
    #cb {
        width: 40%;
    }
    .testimonial {
        padding-top: 1rem;
    }
    #about, #footer {
        text-align: left
    }
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    h1 {
        font-size: 3.62rem;
    }
    #hero {
        padding-bottom: 6.3rem;
    }
    #ux span, #ui span, #ps span {display: inline;}
    #clients li {
        display: inline-block;
    }
    #mini {
        padding-right: 10px;
        width: 24%;
    }
    #virgin {
        padding-right: 10px;
        width: 33%;
    }
    #vw {
        padding-right: 0;
        width: 14%;
    }
    #campus {
        padding-right: 18px;
        width: 30%;
    }
    #cb {
        width: 30%;
    }
    #about h2 span {display: block}
}
@media only screen and (min-width: 48em) and (max-width: 63.938em) {
    #ui img {
        margin-left: -530px
    }
}

@media only screen and (min-width: 64.063em) { 
    #event-vid video {display: block;}
}