/* ********************************************
 * Global
 * ********************************************/

body {
    /*overflow    : hidden;*/
    padding-top : 60px;
    font-family : georgia, serif;
    font-size   : 10px;
}

p {
    margin    : 0 0 20px;
    font-size : 1.6rem;
}

a {
    color : #333;
}
a:hover {
    text-decoration : none;
}

img {
    width : 100%;
}

hr {
    border-top : 1px dotted #333;
}

h1, h2, h3, h4 {
    font-family : 'roboto';
}

h1 {
    margin-bottom : 20px;
    font-size     : 4.4rem;
    font-weight   : bold;
}

h2, h3 {
    font-weight : bold;
}

h2 {
    font-size:  3.6rem;
}

.pull-left {
    float        : left;
    margin-right : 40px;
    margin-left  : -400px;
}
    .pull-left a {
        padding-left : 10px;
        color        : #333;
        font-family  : 'Titillium Web';
    }

.background-still, .foreground-still {
    position : absolute;
    width    : 100%;
    height   : 100%;
}

.foreground-still {
    z-index        : 9997;
    pointer-events : none;
}

.background {
    width  : 100%;
    height : 120%;
}

.foreground {
    z-index : 9999;
    width   : 100%;
    height  : 120%;
}

.background-full {
    width  : 100%;
    height : 100%;
}

.source {
    text-align : right;
    color      : gray;
    font-size  : 1.2rem;
}

.ir {
    color       : transparent;
    border      : 0;
    text-shadow : none;
    font        : 0/0 a;
}

/* ********************************************
 * Compatibility Mask
 * ********************************************/

#compatibility_mask img {
    width : 25%;
}

#compatibility_mask a {
    color : blue;
}

/* ********************************************
 * Custom Global Styles
 * ********************************************/

.desktop {
    display          : none;
    margin-bottom    : 0;
    padding          : 10px 0;
    background-color : #fff;
}

.italics {
    font-style : italic;
    color: gray;
}

.quote {
    font-family : 'roboto';
    font-size   : 20px;
    font-weight : 700;
    font-style  : italic;
}

.bg-plane {
    background              : url('../images/icons/plane-large.png') right 90% no-repeat;
    -webkit-background-size : 60%;
    background-size         : 60%;
}


.txt-right {
    float : right;
}

    .red {
        color : red;
    }

    .caption {
        margin-bottom : 15px;
        padding-top   : 4px;
        font-family   : 'roboto';
        font-size     : 1.2rem;
        font-style    : italic;
    }

    .caption a {
        color : red;
    }

    .caption a:hover {
        text-decoration : underline;
    }

    .chart-desc {
        padding-bottom : 20px;
        font-family    : 'roboto';
        font-size      : 1.2rem;
    }

    .chart-desc h4 {
        width      : auto;
        margin     : 0 0 7px;
        font-size  : 1.6rem;
        font-style : italic;
    }

    .chart-desc h4:after {
        position   : absolute;
        top        : 10px;
        right      : 16px;
        width      : 48%;
        content    : '';
        border-top : 1px dotted #000;
    }

.section-image {
    position  : relative;
    left      : 50%;
    max-width : 800px;
    margin    : 15px auto 0 -400px;
}

/* ********************************************
 * Header
 * ********************************************/

header {
    position         : fixed;
    z-index          : 9998;
    top              : 0px;
    width            : 100%;
    height           : 60px;
    opacity          : 1;
    background-image : url('../images/header_gradient.png');
    font-family      : "Roboto";
    font-weight      : 400;
}
    header div {
        top            : 0px;
        display        : inline-block;
        vertical-align : top;
    }

    .heade-vs-logo {
        margin-top : 13px;
    }

    header .social_link {
        margin : 0 5px 0 5px;
    }

    .header_headline {
        display   : inline-block;
        margin    : 20px 0 0 10px;
        font-size : 12px;
    }
    .header_social {
        margin    : 18px 20px 0 0;
        font-size : 20px
    }
    .header-av-logo {
        width  : 160px;
        margin : 12px 0 0 10px;
    }
    .header-hw-logo {
        margin : 11px 10px 0 0;
    }
    .header-hw-logo span {
        position  : relative;
        font-size : 11px;
    }
    .header-hw-logo a {
        position : relative;
    }
    .header-hw-logo-img {
        width : 110px;
    }


/* ********************************************
 * Sections
 * ********************************************/
.section0 {
    text-align  : center;
    font-family : 'roboto';
}
    .section0 img {
        max-width: 800px;
    }
    .section0 h1, .section0 h2 {
        text-transform : uppercase;
    }
    .s0-bg {
        background              : url('../images/mobile/bg-plane.png') 50% 30% no-repeat;
        -webkit-background-size : 280px;
        background-size         : 280px;
    }
    .s0-bold-upper {
        margin-top     : 0;
        margin-bottom  : 80px;
        text-transform : uppercase;
        font-weight    : 700;
    }
    .s0-by {
        margin-bottom : 0;
    }
    .s0-sponsored {
        margin-bottom : 0;
        color         : #999;
        font-weight   : 300;
    }
    .s0-logo {
        width         : 200px;
        margin-bottom : 30px;
    }

    .section1 h3 {
        margin-bottom : 25px;
    }

.section6 {
    color      : #fff;
    background : rgba(0,0,0,0.8);
}

    .credits {
        padding     : 60px 0;
        text-align  : center;
        color       : white;
        font-family : 'Roboto';
        font-weight : 300;
    }

        .credits-logo {
            width         : 200px;
            margin-bottom : 5px;
        }

        .credits-link {
            display       : block;
            margin-bottom : 50px;
            color         : gray;
            font-size     : 1.4rem;
        }

        .credits p:first-child {
            margin-bottom : 10px;
        }

        .credits p:nth-last-child(2) {
            margin-bottom : 80px;
        }

        .presented-by-ae-logo {
            display : block;
            width   : 220px;
            margin  : 0 auto 60px;
            color   : #aeaeae;
        }

@media screen and  (min-width: 1350px) {

    .chart-desc h4:after {
        width : 36%;
    }


}


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

    .chart-desc h4:after {
        width : 36%;
    }

}

@media screen and (max-width: 1050px) {
    .header_headline {
        display : block;
        width   : 320px;
    }
}


@media screen and (max-device-width: 1024px) and (orientation : landscape) {
    .section3 .container,
    .section4 .container,
    .section5 .container,
    .section8 .container {
        padding-top : 40px;
    }
    .section6 .container {
        padding-top : 40px;
    }
    #s6-anim-1-container {
        margin-top: 120px;
    }
    #s6-anim-2-container {
        left: -40px;
    }
}

@media screen and (max-device-width: 1024px) and (orientation : portrait) {
    #s6-anim-2-container {
        left: -140px;
    }
    .section6 .container {
        padding-top : 60px;
    }
}

@media screen and  (max-width: 991px) {
    .modal-md-hide {
        display : none;
    }

    .section-image {
        left   : 0;
        margin : 15px auto 0;
    }

    .chart-desc h4:after {
        display : none;
    }
}

@media screen and  (max-width:810px) {
    .breakpoint2 {
        display : none;
    }
    .header_social {
        margin    : 18px 0px 0 0;
        font-size : 20px
    }
}

@media screen and  (max-width: 767px) {
    body {
        line-height: 1.7;
    }

    h1 {
        font-size: 3.4rem;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 2.0rem;
        line-height: 1.3;
    }

    .section0 h2 {
        font-size: 2.2rem;
        margin-top: 0;
        margin-bottom: 30px;
    }

}

@media screen and  (max-width:650px) {
    .header_headline {
        display : none;
    }
}

@media screen and (max-width:550px) {
    .header-av-logo {
        width  : 130px;
        margin : 19px 0 0 10px;
    }

}

@media screen and (max-width:401px) {
    .presented-by-ae-logo {
        width : 180px;
    }
}

/*mobile-specific styles*/
.skrollr-mobile #skrollr-container {
    margin-top : 0px;
}

.skrollr-mobile .mobile-sm-hide {
    display : none;
}