@font-face {
        font-family: 'Decima';
        src: url('fonts/decima-bold-webfont.eot');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'Decima';
        src: url('fonts/decima-bold-webfont.woff') format('woff'),
        url('fonts/decima-bold-webfont.svg#decima-bold-webfont') format('svg');
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: 'Decima';
        src: url('fonts/decima-light-webfont.eot');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Decima';
        src: url('fonts/decima-light-webfont.woff') format('woff'),
        url('fonts/decima-light-webfont.svg#decima-light-webfont') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Univers';
        src: url('fonts/UniveLig.eot');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Univers';
        src: url('fonts/UniveLig.woff') format('woff'),
        url('fonts/UniveLig.svg#UniveLig') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'icomoon';
        src:url('fonts/icomoon.eot?-rrhinq');
        src:url('fonts/icomoon.eot?#iefix-rrhinq') format('embedded-opentype'),
            url('fonts/icomoon.woff?-rrhinq') format('woff'),
            url('fonts/icomoon.ttf?-rrhinq') format('truetype'),
            url('fonts/icomoon.svg?-rrhinq#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-arrowbottom:before {
        content: "\e600";
    }
    .icon-arrowright:before {
        content: "\e601";
    }
    .icon-arrowtop:before {
        content: "\e602";
    }
    .icon-arrowleft:before {
        content: "\e603";
    }

    * { margin: 0; }

    *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    body,
    html { font-family: 'Univers', Arial, "Helvetica Neue", Helvetica, sans-serif; font-style: normal; font-weight: normal; color: #3a5e77; font-size: 16px; line-height: 18px; background-color: #fff; height: 100%; -webkit-font-smoothing: antialiased; }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 { color: #3a5e77; margin: 0 0 20px 0; padding: 0; line-height: 0.9; font-size: 80px; font-style: normal; font-family: 'Decima', Arial, "Helvetica Neue", Helvetica, sans-serif; }
    
    h1 { font-size: 36px; }
    h2 { font-size: 16px; }
    h3 { font-size: 20px; }
    h4 { font-size: 14px; }
    h5 { font-size: 12px; }
    h6 { font-size: 12px; }

    p { color: #3a5e77; margin: 0 0 12px 0; font-size: 16px; line-height: 20px; font-weight: normal; }
        p strong { font-weight: bold; }
        p a { color: #3a5e77; }
        p a:hover { color: #dd4e00; }
    
    ol,ul { }

    li { }

    span { }
    
    input,
    select,
    textarea { font-family: Helvetica, Arial, "Lucida Grande", sans-serif;  outline: none; font-weight: 200; }

    fieldset { border: none; padding: 0; margin: 0; }

    a,
    a:visited,
    a:focus { outline: none; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
    a:hover { outline: none; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

    img { max-width: 100%; height: auto; -moz-backface-visibility: hidden; }

    .transition { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

    .clear { margin: 0; }

    .last-child p:last-child { margin: 0; } 

    .align-center { text-align: center; }

    .mobile { display: none; }
    .desktop { display: block; }

    #wrap { float: left; width: 100%; }
    .layer { float: left; width: 100%; }
        .inner { width: 888px; margin: 0 auto; }

    header { position: relative; }
    #header-inner { position: relative; height: 600px; z-index: 10; }
        #header-inner h1 { position: absolute; width: 167px; height: 38px; top: 47px; }
            #header-inner h1 a { display: block; width: 167px; height: 38px; background: transparent url('../images/sura.png') 0 0 no-repeat; background-size: 167px 38px; text-indent: -9999px; }

        #header-inner #arrow { display: none; position: absolute; top: 130px; left: 0; }
            #header-inner #arrow span { display: block; width: 20px; height: 23px; background: transparent url('../images/arrow.png') center center no-repeat; background-size: 20px 23px; text-indent: -9999px; }

        #header-inner .brands-button { position: absolute; top: 47px; right: 0; text-align: center; width: 160px; }
            #header-inner .brands-button span { display: inline-block; width: 100%; color: #00aed8; text-transform: uppercase; font-size: 13px; line-height: 13px; font-family: 'Decima'; font-weight: bold; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 15px 53px 12px 12px; position: relative; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
            #header-inner .brands-button span:hover { color: #fff; background-color: #00aed8; }
            #header-inner .brands-button span.active { color: #fff; background-color: #00aed8; }
            #header-inner .brands-button div.arrow { position: absolute; right: 11px; top: 15px; }
            #header-inner .brands-button ul { display: none; position: absolute; left: 0; top: 42px; padding: 0; margin: 0; list-style: none; }
                #header-inner .brands-button ul li { float: left; width: 100%; background-color: #fff; margin: 0 0 0 0; padding: 0; text-align: center; padding: 13px 10px 10px 10px; text-transform: uppercase; font-size: 12px; border-bottom: 2px solid #b9dcd2; }
                    #header-inner .brands-button ul li a { font-family: 'Decima'; font-weight: bold; display: block; color: #00aed8; line-height: 14px;}
                    #header-inner .brands-button ul li a:hover { color: #74c9dd;  }

        #introduction { float: left; width: 100%; margin: 180px 0 0 0; }
            #introduction h2 { font-size: 72px; line-height: 62px; color: #fff; margin: 0; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; letter-spacing: 0.02em; }
            #introduction p { font-size: 20px; line-height: 24px; color: #fff; margin: 0 0 12px 0; }
            #introduction-text { float: left; width: 460px; margin: 60px 0 0 0; }

    #header-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
        #header-background .arrow-right { position: absolute; top: 0; right: 0; margin: -510px -210px 0 0; max-width: 2440px; }
        #header-background .arrow-left { position: absolute; top: 0; left: 0; margin: -180px 0 0 0; max-width: 2440px; }

    #navigation { height: 75px; background-color: #00afd7; }
        #navigation-bar { position: relative; height: 75px; background-color: #00afd7; }
    .stuck #navigation-bar { position: fixed; top: 0; left: 0; z-index: 1000; }
    #small-header #navigation-bar { position: fixed; top: 0; left: 0; z-index: 1000; }
        #navigation-inner { position: relative; }
            #sura { display: block; position: absolute; left: 0; top: 24px; width: 112px; height: 24px; }
                #sura a { display: block; width: 112px; height: 24px; text-indent: -9999px; background: transparent url('../images/sura-small.png') 0 0 no-repeat; background-size: 112px 24px; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); }
                .stuck #sura a { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(opacity=100); }
                #small-header #sura a { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(opacity=100); }
            nav { position: absolute; right: 0; top: 30px; }
                nav ul { float: left; width: 100%; margin: 0; padding: 0; list-style: none; }
                    nav ul li { float: left; width: auto; margin: 0 0 0 12px; padding: 0; font-size: 15px; color: #00aed8; font-family: 'Decima'; font-weight: bold; text-transform: uppercase; }
                        nav ul li a { color: #fff; display: inline-block; padding: 0 6px; border-bottom: 6px solid #00afd7; height: 45px; }
                        nav ul li a:hover { color: #74c9dd; }
                        nav ul li a.current { color: #fff; border-bottom: 6px solid #fff; }

        .parallaxbackground { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

    #subbrands { background-color: #6ad1e3; oveflow-x: hidden; }
        #subbrands-inner { position: relative; }
            #subbrands-inner i { position: absolute; top: 50px; font-size: 40px; color: #fff; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
            #subbrands-inner i:hover { color: #00afd7; }
            #subbrands-inner .icon-arrowleft {  left: -55px; }
            #subbrands-inner .icon-arrowright {right: -55px; }
        #brand-carousel { float: left; width: 100%; text-align: center; padding: 10px 0; }
            #brand-carousel .card-container { display: inline-block; position: relative; position: relative; margin: 5px; width: 208px; height: 144px; z-index: 1; }
            #brand-carousel .visiblecard { visibility:visible; opacity:1; }
            #brand-carousel .hiddencard { display: none; }
                    #brand-carousel .card-container .card span { width: 100%; text-align: center; font-family: 'Decima'; left: 0; color: #fff; margin: 0; font-size: 15px; line-height: 16px; text-transform: uppercase; font-weight: bold; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
                    #brand-carousel .card-container .card p { font-family: 'Decima'; color: #fff; margin: 0 0 10px 0; font-size: 15px; line-height: 16px; }
                    #brand-carousel .card-container .card p a { color: #fff; border-bottom: 2px solid #6ad1e3; }
                        #brand-carousel .card-container  .card p strong { font-weight: bold; }
                #brand-carousel .card-container .back { color: white; text-align: center; background-color: #5d514c; padding: 28px 0 0 0; }

                .card-container { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px;  -o-perspective: 1000px; perspective: 1000px; }

                .card-container .card {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    margin: 0;

                    -webkit-transition-property: -webkit-transform;
                    -webkit-transition-duration: 500ms;
                    -webkit-transform-style: preserve-3d;
                    -webkit-transform-origin: 50% 50%;
                    -webkit-transition-timing-function: ease;

                    -moz-transition-property: -moz-transform;
                    -moz-transition-duration: 500ms;
                    -moz-transform-style: preserve-3d;
                    -moz-transform-origin: 50% 50%;
                    -moz-transition-timing-function: ease;

                    -ms-transition-property: -ms-transform;
                    -ms-transition-duration: 500ms;
                    -ms-transform-style: preserve-3d;
                    -ms-transform-origin: 50% 50%;
                    -ms-transition-timing-function: ease;

                    -o-transition-property: -o-transform;
                    -o-transition-duration: 500ms;
                    -o-transform-style: preserve-3d;
                    -o-transform-origin: 50% 50%;
                    -o-transition-timing-function: ease;

                    transition-property: transform;
                    transition-duration: 500ms;
                    transform-style: preserve-3d;
                    transform-origin: 50% 50%;
                    transition-timing-function: ease;
                }
                .notransition{
                    -webkit-transition: none !important;
                    -moz-transition: none !important;
                    -ms-transition: none !important;
                    -o-transition: none !important;
                    transition: none !important;
                }
                .card-container .card .front,
                .card-container .card .back
                {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    padding: 0;
                    margin: 0;
                    -webkit-backface-visibility: hidden;
                    -moz-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                    -o-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                .card-container .card .back
                {
                    /*visibility: hidden;*/
                    display: none;
                }
                .card-container .card .back,
                .card-container .card .back-y
                {
                    -webkit-transform: rotateY( -180deg );
                    -moz-transform: rotateY( -180deg );
                    -ms-transform: rotateY( -180deg );
                    -o-transform: rotateY( -180deg );
                    transform: rotateY( -180deg );
                }
                .card-container .card .back-x
                {
                    -webkit-transform: rotateX( -180deg );
                    -moz-transform: rotateX( -180deg );
                    -ms-transform: rotateX( -180deg );
                    -o-transform: rotateX( -180deg );
                    transform: rotateX( -180deg );
                }

                .card-container.flipped-lr .card {
                      -webkit-transform: rotateY( 180deg );
                    -moz-transform: rotateY( 180deg );
                    -ms-transform: rotateY( 180deg );
                    -o-transform: rotateY( 180deg );
                    transform: rotateY( 180deg );
                }
                .card-container.flipped-rl .card {
                      -webkit-transform: rotateY( -180deg );
                    -moz-transform: rotateY( -180deg );
                    -ms-transform: rotateY( -180deg );
                    -o-transform: rotateY( -180deg );
                    transform: rotateY( -180deg );
                }
                .card-container.flipped-tb .card {
                    -webkit-transform: rotateX( -180deg );
                    -moz-transform: rotateX( -180deg );
                    -ms-transform: rotateX( -180deg );
                    -o-transform: rotateX( -180deg );
                    transform: rotateX( -180deg );
                }
                .card-container.flipped-bt .card {
                    -webkit-transform: rotateX( 180deg );
                    -moz-transform: rotateX( 180deg );
                    -ms-transform: rotateX( 180deg );
                    -o-transform: rotateX( 180deg );
                    transform: rotateX( 180deg );
                }
                /**ie10**/
                .card-container .ie10 {
                    -webkit-transition: none !important;
                    -moz-transition: none !important;
                    -ms-transition: none !important;
                    -o-transition: none !important;
                    transition: none !important;
                }
                .card-container .ie10 .front,
                .card-container .ie10 .back
                {
                    transition-property: transform;
                    transition-duration: 500ms;
                    transform-style: preserve-3d;
                    transform-origin: 50% 50%;
                    transition-timing-function: ease;
                }
                .flipped-lr .ie10,
                .flipped-rl .ie10,
                .flipped-tb .ie10,
                .flipped-bt .ie10
                {
                    transform: none !important;
                }

                /**initial state for front**/
                .card-container .ie10 .front-y
                {
                    transform: perspective(1000px) rotateY(0deg);
                }
                .card-container .ie10 .front-x
                {
                    transform: perspective(1000px) rotateX(0deg);
                }
                /*.card-container .ie10 .back,*/
                .card-container .ie10 .back-y
                {
                    transform: perspective(1000px) rotateY( -180deg );
                }
                .card-container .ie10 .back-y-r
                {
                    transform: perspective(1000px) rotateY( 180deg );
                }
                .card-container .ie10 .back-x
                {
                    transform: perspective(1000px) rotateX( -180deg );
                }
                .card-container .ie10 .back-x-r
                {
                    transform: perspective(1000px) rotateX( 180deg );
                }

                /*front-y back-y*/
                .flipped-lr .ie10 .front {
                    transform: perspective(1000px) rotateY( 180deg ); 
                }
                .flipped-lr .ie10 .back {
                    transform: perspective(1000px) rotateY( 0deg );
                }
                /*front-y back-y-r*/
                .flipped-rl .ie10 .front {
                    transform: perspective(1000px) rotateY( -180deg ); 
                }
                .flipped-rl .ie10 .back {
                    transform: perspective(1000px) rotateY( 0deg );
                }
                /*front-x back-x*/
                .flipped-tb .ie10 .front {
                    transform: perspective(1000px) rotateX( 180deg ); 
                }
                .flipped-tb .ie10 .back {
                    transform: perspective(1000px) rotateX( 0deg ); 
                }
                /*front-x back-x-r*/
                .flipped-bt .ie10 .front {
                    transform: perspective(1000px) rotateX( -180deg ); 
                }
                .flipped-bt .ie10 .back {
                    transform: perspective(1000px) rotateX( 0deg );
                }

        #brand-list { float: left; width: 100%; text-align: center; padding: 30px 0 0 0; }
            #brand-list .brand-card { float: left; width: 100%; text-align: center; margin: 0 0 20px 0; padding: 0 30px; }
                #brand-list .brand-card img { width: 100%; height: auto; margin: 0 0 20px 0; }
                #brand-list .brand-card span { width: 100%; text-align: center; font-family: 'Decima'; left: 0; color: #fff; margin: 0; font-size: 15px; line-height: 16px; text-transform: uppercase; font-weight: bold; }
                   #brand-list .brand-card p { font-family: 'Decima'; color: #fff; margin: 0; font-size: 15px; line-height: 16px; }
                    #brand-list .brand-card p a { color: #fff; border-bottom: 2px solid #6ad1e3; }

    #aboutus { padding: 48px 0 90px 0; position: relative; }
        #aboutus .subtitle { float: left; width: 100%; margin: 45px 0 55px 0;}
            #aboutus .subtitle h2 { font-size: 72px; color: #00aed8; line-height: 62px; margin: 0; font-weight: normal; text-transform: uppercase; }

        #aboutus .content { float: left; width: 100%; }
            #aboutus .content p { color: #7e6e66; font-size: 28px; line-height: 30px; margin: 0 0 10px 0; letter-spacing: 0.005em; }

        #about-purpose-build { display: none; float: left; width: 100%; margin: 120px 0; position: relative; text-align: center; }
        #about-purpose-build img { max-width: 100%; }

        #about-parallax { float: left; width: 100%; margin: 120px 0; position: relative; height: 340px; }
            #about-parallax .top { position: absolute; top: 0; left: 0; margin: 0 0 0 80px; }
            #about-parallax .bottom { position: absolute; bottom: 0; left: 0; margin: 0 0 0 80px; }

        #about-text { float: left; width: 100%; position: relative; }
            #about-quote { position: absolute; width: 288px; border-top: 2px solid #b9dcd2; border-bottom: 2px solid #b9dcd2; padding: 30px 0 26px 0; top: 0px; left: 75px; text-align: center; }
                #about-quote p { text-transform: uppercase; font-weight: normal; font-family: 'Decima'; color: #00afd7; font-size: 24px; line-height: 24px; margin: 0; }
            #about-content { float: right; width: 438px; padding: 3px 0 0 0; }
                #about-content p { color: #7f6e66; font-size: 20px; line-height: 24px; margin: 0 0 12px 0; }

        #about-video { float: left; width: 100%; margin: 48px 0 0 0; }
            #about-video .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; width: 100%; }
            #about-video .embed-container iframe,
            #about-video .embed-container object,
            #about-video .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    #about-inner { position: relative; z-index: 10; }

    #news { padding: 48px 0 90px 0; position: relative; overflow: hidden; }
        #news .subtitle { float: left; width: 100%; margin: 45px 0 45px 0;}
            #news .subtitle h2 { font-size: 36px; color: #fff; line-height: 30px; margin: 0; font-weight: normal; text-transform: uppercase; }
        #news .content { float: right; width: 420px; margin: 45px 63px 0 0; }
            #news .content p { color: #7e6e66; font-size: 28px; line-height: 30px; margin: 0 0 10px 0; letter-spacing: 0.005em; }
            #news .content ul { float: left; width: 100%; margin: 0; padding: 0; list-style: none; }
                #news .content ul li { float: left; width: 100%; margin: 0 0 16px 0; padding: 0 0 15px 0; background: transparent url('../images/news-divider.png') center bottom no-repeat; text-transform: uppercase; text-align: center; font-size: 30px; line-height: 40px; color: #00aed8; font-family: 'Decima'; font-weight: normal; }
                #news .content ul li:last-child { margin: 0; padding: 0; background: none; }

        #featured-news { float: left; width: 100% }
            .featured-news-item { float: left; width: 288px; height: 216px; background-color: #5d514c; margin: 0 12px 0 0; }
            .featured-news-item:last-child { margin: 0; }
                .featured-news-media { float: left; width: 100%; background-color: #6ad1e3; }
                .featured-news-media img { width: 100%; -moz-backface-visibility: hidden; }
                .featured-news-text { float: left; width: 100%; padding: 12px; }
                    .featured-news-text p { color: #fff; text-transform: uppercase; font-weight: normal; font-family: 'Decima'; font-size: 13px; line-height: 15px; }

            #news-carousel { margin: 0 0 40px 0; overflow: hidden; }

        #archive-news { float: left; width: 100% }
            .archived-news-item { float: left; width: 100%; border-top: 1px solid #fff; padding: 16px 0; height: 115px; }
                .archived-news-item-alpha { float: left; width: 450px; }
                .archived-news-item-alpha p { color: #7e6e66; font-size: 20px; margin: 0; }
                    .archived-news-item-alpha p a { color: #fff; }
                    .archived-news-item-alpha p a:hover { color: #7e6e66; }
                .archived-news-item-beta { float: right; width: 190px; text-align: right; }
                    .archived-news-item-beta span { color: #7e6e66; font-size: 20px; }

            #archive-news-paging { float: left; width: 100%; border-top: 1px solid #fff; padding: 32px 0; }
                #archive-news-paging .page-up { float: left; margin: 0 12px 0 14px; font-size: 40px; color: #fff; }
                #archive-news-paging .page-up:hover { color: #6ad1e3; }
                #archive-news-paging .page-down { float: left; margin: 0 14px 0 12px; font-size: 40px; color: #fff; }
                #archive-news-paging .page-down:hover { color: #6ad1e3; }

    #news-inner { position: relative; z-index: 10; }
    #news-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; background-color: #b1d5d3; }
        #news-background .arrow-right { position: absolute; top: 0; right: 0; margin: -1500px -225px 0 0; max-width: 2440px;}
        #news-background .arrow-left { position: absolute; top: 0; left: 0; margin: -1500px 0 0 -400px; max-width: 2440px; }

    #company { padding: 48px 0 90px 0; background-color: #74c8dd; }
        #company .subtitle { float: left; width: 100%; margin: 45px 0 55px 0;}
            #company .subtitle h2 { font-size: 72px; color: #fff; line-height: 62px; margin: 0; font-weight: normal; text-transform: uppercase; }
        #company .content { float: left; width: 100%; }
            #company .content p { color: #fff; font-size: 28px; line-height: 30px; margin: 0 0 10px 0; letter-spacing: 0.005em; }

    #people { padding: 48px 0 0 0; background-color: #6ad1e3; position: relative;  }
        #people-text { float: left; width: 438px; margin: 50px 0 0 0; }
            #people .subtitle { float: left; width: 100%; margin: 0 0 55px 0;}
                #people .subtitle h2 { font-size: 36px; color: #fff; line-height: 36px; margin: 0; font-weight: normal; text-transform: uppercase; }
            #people .content { float: left; width: 100%; }
                #people .content p { color: #5d524d; font-size: 20px; line-height: 24px; margin: 0 0 12px 0; letter-spacing: 0.005em; }
            #people-quote { position: absolute; width: 288px; border-top: 2px solid #b9dcd2; border-bottom: 2px solid #b9dcd2; padding: 30px 0 26px 0; top: 200px; right: 75px; text-align: center; }
                #people-quote p { text-transform: uppercase; font-weight: normal; font-family: 'Decima'; color: #00afd7; font-size: 24px; line-height: 24px; margin: 0; }

    #people-people { position: relative; z-index: 2; }

        #people-grid { width: 900px; margin: 0 auto; position: relative; }
            #people-grid i { position: absolute; top: 75px; font-size: 40px; color: #fff; cursor: pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
            #people-grid i:hover { color: #00afd7; }
            #people-grid .icon-arrowleft {  left: -50px; }
            #people-grid .icon-arrowright {right: -50px; }
            #people-grid-inner { width: 100%; overflow: hidden; margin: 35px 0 0 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; }
                #people-grid-inner .person { max-width: 213px; margin: 0 6px 0 6px; cursor: pointer; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; }
                #people-grid-inner .person-item { width: 213px; height: 211px; position: relative; margin: 0 0 40px 0 }
                #people-grid-inner .person img { float: left; width: 100%; }
                    #people-grid-inner .person-overlay { display: none; width: 100%; height: 100%; position: absolute; background-color: #f0ede9; z-index: 100; -moz-opacity: 0.80; -khtml-opacity: 0.80; opacity: 0.80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter:alpha(opacity=80); }
                    #people-grid-inner .blocked .person-overlay { display: block; }
                    #people-grid-inner .person-media { float: left; width: 100%; background-color: #6AD1E3; }
                    #people-grid-inner .person-title { float: left; width: 100%; min-height: 80px; padding: 12px 14px; background-color: #5d524d; }
                        #people-grid-inner .person-title h2 { font-size: 12px; line-height: 17px; color: #fff; text-transform: uppercase; margin: 0; }

    #people-inner { position: relative; z-index: 10; }
        #people-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; background-color: #6ad1e3; }
            #people-background .arrow-right { position: absolute; top: 0; right: 0; margin: -400px -525px 0 0; max-width: 2440px; }
            #people-background .arrow-left { position: absolute; top: 0; left: 0; margin: -400px 0 0; max-width: 2440px; }

    .people-detail { float: left; display: inline-flex; margin: 0; width: 100%; }
    .active .people-detail { margin: 0 -50% 210% 0; }
        .people-detail-outer { position: absolute; width: 100%; left: 0; padding: 0; max-height: 0px; overflow: hidden; background-color: #5d524d; }
        .active .people-detail-outer { padding: 0; max-height: 1000px;  }
            .people-detail-inner { position: relative; cursor: auto; }
            .people-detail-inner-wrap { float: left; padding: 48px 0 28px 0; cursor: auto; }
                .person-details { float: left; width: 100%; -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
                .active .person-details { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); filter:alpha(opacity=100); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
                .current-person { display: none; width: 17px; height: 17px; position: absolute; bottom: -40px; left: 0; }
                .active .current-person { display: block; }
                    .current-person span { display: block; width: 17px; height: 17px; background: transparent url('../images/current.png') 0 0 no-repeat; background-size: 17px 17px; text-indent: -9999px; }
                .people-detail-inner .toggle { position: absolute; right: 0; top: 45px; color: #000; font-size: 16px; cursor: pointer; }
                .people-detail-inner .toggle i { color: #000; }
                .people-detail-inner .toggle i:hover { color: #74c8dd; }
                .people-detail .name-role { float: left; width: 100%; }
                    .people-detail .name-role h2 { font-size: 36px; line-height: 36px; color: #00aed8; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0 0 28px 0; }
                .people-detail .contacts { float: left; width: 100%; margin: 0 0 28px 0; }
                    .people-detail .contacts p { font-size: 13px; line-height: 15px; color: #f0ede9; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0; }
                        .people-detail .contacts p a { color: #f0ede9; }
                        .people-detail .contacts p a:hover { color: #00aed8; }
                #people .people-detail .content { float: left; width: 100%; }
                    #people .people-detail .content p { font-size: 15px; line-height: 18px; color: #fff; margin: 0 0 8px 0; }
                    #people .people-detail .content-alpha { float: left; width: 288px; margin: 0 12px 0 0; }
                    #people .people-detail .content-beta { float: left; width: 288px; }
                    #people .people-detail .content-gamma { float: right; width: 288px; }

    #media-section { padding: 45px 0; }

        #media-grid-news { float: left; width: 100%; padding: 55px 0 0 0; position: relative; }
        #media-grid-single { float: left; width: 100%; padding: 55px 0 0 0; position: relative; }
        #media-grid-loadmore { float: left; width: 100%; text-align: center; margin: 35px 0 0 0; }
            #media-grid-loadmore span { display: inline-block; cursor: pointer; width: 100%; max-width: 438px; border: 2px solid #fff; color: #fff; background-color: transparent; text-transform: uppercase; font-size: 24px; font-family: 'Decima'; font-weight: bold; line-height: 0.8; padding: 24px 0 20px 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
            #media-grid-loadmore span:hover { border: 2px solid #00aed8; background-color: #00aed8; color: #fff; }

            .media-grid-item-large { float: left; width: 100%; height: 360px; background-color: #5d514c; position: relative; margin: 0 0 12px 0; }
                .media-grid-item-large .media-grid-item-image { float: right; }
                .media-grid-item-large .media-grid-item-text { position: absolute; top: 0; left: 0; width: 444px; height: 360px; padding: 13px 18px; }
                    .media-item-category-date { float: left; width: 100%; margin: 0 0 60px 0; }
                        .media-item-category-date span { float: left; margin: 0 20px 0 0; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: #fff; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; }
                    .media-item-title { float: left; width: 100%; margin: 0 0 20px 0; padding: 0 60px 0 0; }
                        .media-item-title h3 { color: #fff; font-size: 36px; line-height: 36px; letter-spacing: 0.03em; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0; }
                            .media-item-title h3 a { color: #fff; }
                            .media-item-title h3 a:hover { color: #b9dcd2; }
                    .media-item-overview { float: left; width: 100%; margin: 0; }
                        .media-item-overview p { color: #fff; font-size: 20px; line-height: 24px; }
                            .media-item-overview p a { color: #fff; }
                            .media-item-overview p a:hover { color: #b9dcd2; }

            .media-grid-item-small { float: left; width: 288px; height: 420px; background-color: #5d514c; position: relative; margin: 0 0 12px 0; }
                .media-grid-item-small .media-grid-item-image { float: left; }
                .media-grid-item-small .media-grid-item-image img { width: 100%; }
                .media-grid-item-small .media-grid-item-text { float: left; width: 100%; padding: 13px 18px; }
                    .media-item-category-date { float: left; width: 100%; margin: 0 0 30px 0; }
                        .media-item-category-date span { float: left; width: 100%; margin: 0; font-size: 13px; line-height: 15px; letter-spacing: 0.04em; color: #fff; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; }
                    .media-item-title { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; }
                        .media-item-title h3 { color: #fff; font-size: 24px; line-height: 24px; letter-spacing: 0.03em; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0; }
                            .media-item-title h3 a { color: #fff; }
                            .media-item-title h3 a:hover { color: #b9dcd2; }
                    .media-item-overview { float: left; width: 100%; margin: 0; }
                        .media-item-overview p { color: #fff; font-size: 20px; line-height: 24px; }
                            .media-item-overview p a { color: #fff; }
                            .media-item-overview p a:hover { color: #b9dcd2; }

        #media-news-page .title { margin: 0 0 60px 0; }

        #news-hero-image { margin: 0 0 30px 0; }
        #news-category-date { margin: 0 0 60px 0; }
            #news-category-date span { float: left; margin: 0 0 0 20px; font-size: 13px; line-height: 1; letter-spacing: 0.04em; color: #5d514c; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; }

        #news-title-images { float: left; width: 375px; }
        #news-grid-text #news-title-images { float: left; width: 100%; }
            #news-title { float: left; width: 100%; padding: 0 55px 0 20px; margin: 0 0 175px 0; }
            #news-grid-text #news-title { padding: 0; margin: 0 0 30px 0; }
                #news-title h2 { color: #5d514c; font-size: 36px; line-height: 1.2; letter-spacing: 0.03em; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0; }
            #news-images { float: left; width: 100%; }
                #news-images img { margin: 0 0 12px 0; }
        #news-content { float: right; width: 438px; }
        #news-grid-text #news-content { float: left; width: 100%; }
            #news-content p { color: #5d514c; font-size: 20px; line-height: 24px; margin: 0 0 20px 0; }

        #news-image-grid { float: left; width: 100%; margin: 20px 0 0 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; webkit-align-content: flex-end; align-content: flex-end; }
            #news-image-grid img { margin: 0 20px 20px 0; }
            #news-image-grid img:nth-child(4n+4) { margin: 0 0 20px 0; }

    #claims { padding: 50px 0 50px 0; }
        #claims-inner { position: relative; }
            #claims-quote { position: absolute; width: 288px; border-top: 2px solid #b9dcd2; border-bottom: 2px solid #b9dcd2; padding: 30px 0 26px 0; top: 330px; left: 75px; text-align: center; }
                #claims-quote p { text-transform: uppercase; font-weight: normal; font-family: 'Decima'; color: #00afd7; text-transform: uppercase; font-size: 24px; line-height: 24px; margin: 0; }
            #claims-content { float: right; width: 438px; padding: 58px 0 0 0; }
                #claims-content .subtitle { margin: 0 0 50px 0; }
                    #claims-content .subtitle h2 { color: #00afd7; font-size: 36px; line-height: 36px; font-family: 'Decima'; font-weight: normal; text-transform: uppercase; margin: 0;}
                #claims-content .content p { color: #7f6e66; font-size: 20px; line-height: 24px; margin: 0 0 12px 0; }

    #contact { padding: 50px 0 50px 0; border-bottom: 1px solid #7e6e65; overflow: hidden; }
        #contact-content { float: left; width: 100%; margin: 45px 0 0 0; }
            #contact-content p { font-size: 13px; line-height: 15px; color: #5d514c; margin: 0 0 18px 0; text-transform: uppercase; font-weight: normal; font-family: 'Decima'; }
            #contact-content a { color: #5d514c; }
            #contact-content a:hover { color: #000; }
        #contact-alpha { float: left; width: 213px; margin: 0 12px 0 0; }
        #contact-beta { float: left; width: 213px; margin: 0 12px 0 0; }
        #contact-gamma { float: left; width: 213px; }
        #contact-delta { float: right; width: 213px; }

        #contact-grid { float: left; width: 100%; display: flex; justify-content: space-between; }
            #contact-grid .contact-grid-item { width: calc(25% - 20px); flex: 0 0 auto; }

    footer { background-color: #fff; padding: 50px 0 45px 0; }
        #footer-alpha { float: left; width: 100%; margin: 0 0 20px 0; }
            #footer-alpha span { font-size: 13px; line-height: 10px; color: #00aed8; font-weight: bold; font-family: 'Decima'; text-transform: uppercase; }
            #footer-alpha p { font-size: 13px; line-height: 16px; color: #00aed8; font-weight: bold; font-family: 'Decima'; text-transform: uppercase; margin: 5px 0; }
            #footer-alpha p a { color: #00aed8; border-bottom: 1px solid #00aed8; }
            #footer-alpha p a:hover { color: #000; border-bottom: 1px solid #000; }

        #footer-beta { float: left; width: 100%; }
            #footer-beta ul { float: left; width: 100%; margin: 0; padding: 0; list-style: none; }
                #footer-beta ul li { float: left; width: auto; margin: 0 10px 0 0; color: #7e6e66; padding: 0 10px 0 0; font-size: 13px; border-right: 1px solid #8e847d; }
                #footer-beta ul li:last-child { margin: 0; padding: 0; border-right: none; }
                    #footer-beta ul li a { color: #7e6e66; }
                    #footer-beta ul li a:hover { color: #00aed8; }

    .title { float: left; width: 100%; border-bottom: 2px solid #fff; padding: 0 0 12px 0; }
        #aboutus .title,
        #claims .title,
        #contact .title { border-bottom: 2px solid #00aed8; }
        .title h2 { float: left; font-size: 15px; text-transform: uppercase; margin: 0; padding: 0; color: #00aed8; }
        .title h3 { float: right; font-size: 15px; text-transform: uppercase; margin: 0; padding: 0; color: #00aed8; cursor: pointer; }
        #media-section .title h2,
        #company .title h2,
        #company .title h3,
        #news .title h2,
        #people .title h2,
        #people .title h3,
        #news .title h3 { color: #fff; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }


        #media-news-page .title { border-bottom: 2px solid #5d514c; }
        #media-news-page .title h2 { color: #5d514c; }

        .title h3:hover,
        #company .title h2:hover,
        #company .title h3:hover,
        #people .title h3:hover,
        #news .title h3:hover { color: #74c9dd; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

    #overlay { }
        #overlay-loading { display: none; position: fixed; z-index: 9999; background-color: transparent; width: 100%; height: 100%; top: 0; left: 0; }
            #overlay-loading .animation {  position: relative; top: 50%; left: 50%; width: 30px; height: 30px; padding: 10px; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background-color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
            #overlay-loading img {  float: left; }
        #overlay-background { display: none; position: fixed; z-index: 9999; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; top: 0; left: 0; }
        #overlay-inner { display: none; float: left; width: 100%; padding: 100px 0; }
        #overlay-body { display: none; position: relative; float: left; width: 90%; max-width: 615px; padding: 25px 15px 15px 15px; background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 99999; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
            #overlay-header { float: left; width: 100%; border-bottom: 1px solid #00b4df; margin: 0 0 55px 0; position: relative; }
                #overlay-header h2 { color: #00b4df; text-transform: uppercase; margin: 0 0 12px 0; }
                #overlay-header span { position: absolute; top: -2px; right: 0; width: 12px; height: 12px; background: transparent url('../images/close.png') center center no-repeat; background-size: 12px 12px; text-indent: -9999px; cursor: pointer; }
            #overlay-media { float: left; width: 100%; margin: 0 0 60px 0; }
                #overlay-media img { max-width: 100%; }
            #overlay-content { float: left; width: 100%; padding: 0 0 25px 0; }
                #overlay-title { float: left; width: 100%; }
                    #overlay-title h2 { color: #00aed8; font-size: 36px; line-height: 38px; text-transform: uppercase; font-family: 'Decima'; font-weight: normal; margin: 0 0 40px 0; }
                #overlay-content-alpha { float: left; width: 360px; }
                    #overlay-content-alpha p { color: #7e6e66; font-size: 15px; line-height: 18px; }
                    #overlay-content-alpha ul { padding: 0 0 0 20px; }
                    #overlay-content-alpha li { color: #7e6e66; font-size: 15px; line-height: 18px; margin: 0 0 3px 0; }
                    #overlay-content-alpha a { color: #7e6e66; text-decoration: underline; }
                    #overlay-content-alpha a:hover { color: #594a43; text-decoration: underline; }
                #overlay-content-beta { float: right; width:210px; }
                    #overlay-content-beta p { font-size: 13px; line-height: 15px; margin: 0 0 13px 0; color: #00afd7; }
                    #overlay-content-beta p a { color: #00afd7; text-decoration: underline; }
                    #overlay-content-beta p a:hover { color: #000; }
                    #overlay-content-alpha ul { padding: 0 0 0 20px; }
                    #overlay-content-alpha li { color: #7e6e66; font-size: 15px; line-height: 18px; margin: 0 0 3px 0; }
            #overlay-footer { float: left; width: 100%; border-top: 1px solid #00b4df; padding: 12px 0 0 0; position: relative; }
                #overlay-footer span { color: #00b4df; text-transform: uppercase; font-size: 15px; line-height: 18px; font-family: 'Decima'; font-weight: bold; cursor: pointer; }
                #overlay-footer span:hover { color: #74c9dd;  }
                #overlay-footer span.next { float: right; position: relative; z-index: 2; }
                #overlay-footer span.close { position: absolute; left: 0; width: 100%; text-align: center; }
                #overlay-footer span.previous { float: left; position: relative; z-index: 2; }

        .noscroll { position: fixed; height: 100%; width: 100%; overflow: hidden; top: 0; let: 0; }
            .noscroll #wrap-inner { }

    /* Medium screens + Tablets */
    @media only screen and (max-width: 1040px) and (min-width: 1020px) {
        .parallaxbackground { background-attachment: scroll; }
    }
    @media only screen and (max-width: 1020px) and (min-width: 760px) {

        .inner { width: 720px; }

        #subbrands-inner i { top: 40px; }
            #brand-carousel .card-container { display: inline-block; width: 180px;  }
                #brand-carousel .card-container .card { width: 100%; height: 100%; transform-style: preserve-3d; }
                    #brand-carousel .card-container .card p { font-size: 12px; line-height: 14px; }
                    #brand-carousel .card-container .back { padding: 18px 0 0 0; }


         #aboutus { padding: 48px 0 90px 0; position: relative; }
                #aboutus .subtitle { float: left; width: 100%; margin: 45px 0 55px 0;}
                    #aboutus .subtitle h2 { font-size: 72px; color: #00aed8; line-height: 62px; margin: 0; font-weight: normal; text-transform: uppercase; }

                #aboutus .content { float: left; width: 100%; }
                    #aboutus .content p { color: #7e6e66; font-size: 28px; line-height: 30px; margin: 0 0 10px 0; letter-spacing: 0.005em; }

                #about-parallax { float: left; width: 100%; margin: 120px 0; position: relative; height: 340px; }
                    #about-parallax .top { margin: 0; }
                    #about-parallax .bottom { margin: 0; }

                    #about-quote { left: 0; width: 230px; }
                    #about-content { width: 428px;}

        #news-image-grid img { width: 165px; }

        .featured-news-item { float: left; width: 232px; height: 190px; }
                
        .people-detail .content-alpha { width: 232px; }
        .people-detail .content-beta { width: 232px; }
        .people-detail .content-gamma { width: 232px; }

        .parallaxbackground { background-attachment: scroll; }

    #people { padding: 48px 0 0 0; background-color: #6ad1e3; position: relative;  }
        #people-text { width: 428px; }
        #people-quote { position: absolute; width: 230px; right: 0; }


        #people { padding: 48px 0 0 0; background-color: #f0ede9; }


            #people-grid { width: 738px; }
                #people-grid-inner .person { max-width: 172px; }
                #people-grid-inner .person-item { width: 172px; height: 185px; position: relative; margin: 0 0 40px 0 }
                        #people-grid-inner .person-title h2 { font-size: 12px; }

        .active .people-detail { margin: 0 -50% 305% 0;  }
            #people .people-detail .content-alpha { width: 232px; }
            #people .people-detail .content-beta { width: 232px; }
            #people .people-detail .content-gamma { width: 232px; }

            #claims-quote { left: 0; width: 230px }
            #claims-content { width: 428px; }
        
        #contact-alpha { float: left; width: 170px; }
        #contact-beta { float: left; width: 170px; }
        #contact-gamma { float: left; width: 170px; }
        #contact-delta { float: right; width: 170px; }

        #download-list p { padding: 0 35% 0 0; }

            #footer-beta ul { float: left; width: 100%; }

        #header-background .arrow-right { margin: -900px -110px 0 0; max-width: 2440px; }
        #header-background .arrow-left { margin: -200px 0 0 -700px; max-width: 2440px; }

        #news-background .arrow-right { margin: -1400px -1500px 0 0; max-width: 2440px;}
        #news-background .arrow-left { margin: -1700px 0 0 -1000px; max-width: 2440px; }

        .media-grid-item-large { height: auto; }
            .media-grid-item-large .media-grid-item-image { float: left; width: 100%; }
                .media-grid-item-large .media-grid-item-image img { width: 100%; }
            .media-grid-item-large .media-grid-item-text { float: left; position: relative; top: auto; left: auto; width: 100%; height: auto; padding: 13px 18px; }

        .media-grid-item-small { width: 232px; height: 370px; }

        #news-title-images { float: left; width: 375px; }
        #news-content { float: right; width: 345px; }

    }

    /* Small screens & Mobiles */
    @media only screen and (max-width: 759px) {

    .mobile { display: block; }
    .desktop { display: none; }
    
    .inner { float: left; width: 100%; margin: 0; padding: 0 16px; }
    
    header { margin: 75px 0 0 0; }
    #header-inner { position: relative; height: auto; min-height: 350px; }
        #header-inner h1 { display: none; }

        #header-inner #arrow { display: none; }

        #header-inner .brands-button { display: none; }

    #subbrands { overflow: hidden; }
    #subbrands-inner { padding: 0; }
        #brand-carousel .card-container { width: 100%; }

        #brand-carousel { height: auto; }
        #brand-carousel .hiddencard { display: block; visibility:visible; opacity:1; }

        #introduction { margin: 40px 0 0 0; }
            #introduction h2 { font-size: 36px; line-height: 36px; }
            #introduction-text { width: 100%; margin: 20px 0 0 0; }
                #introduction p { font-size: 16px; line-height: 20px; color: #fff; }

    #mobile-navigation { position: fixed; top: 0; left: 0; min-height: 75px; width: 100%; background-color: #09abd4; z-index: 1000; }
        #mobile-logo { float: left; width: 112px; height: 26px;  }
            #mobile-logo a { display: block; width: 112px; height: 26px; background: transparent url('../images/sura.png') 0 0 no-repeat; background-size: 112px 26px; text-indent: -9999px; margin: 25px 0 0 17px; }
        #mobile-menu-toggle { position: absolute; right: 0; top: 0; width: 75px; height: 75px; cursor: pointer; }
            #mobile-menu-toggle i { color: #fff; font-size: 24px; float: left; margin: 25px 0 0 30px; }
        #mobile-menu { display: none; float: left; width: 100%; padding: 0 16px; }
            #mobile-menu ul { float: left; width: 100%; border-top: 1px solid #fff; margin: 50px 0 33px 0; padding: 0; list-style: none; }
                #mobile-menu ul li { float: left; width: 100%; margin: 33px 0 0 0; padding: 0; font-family: 'Decima'; font-weight: bold; text-transform: uppercase; color: #fff; }
                    #mobile-menu ul li a { color: #fff; }
    #navigation { display: none; }
                    
    #aboutus { padding: 48px 0 30px 0; }
        #aboutus .subtitle { margin: 25px 0 30px 0;}
            #aboutus .subtitle h2 { font-size: 28px; line-height: 28px; }
            #aboutus .content p { font-size: 18px; line-height: 21px; margin: 0 0 10px 0; }

        #about-purpose-build { display: block; }
        #about-parallax { display: none; margin: 100px 0 100px 0; height: auto; padding: 25% 0; }
            #about-parallax .top { margin: 0; }
            #about-parallax .bottom { margin: 0; }
            #about-quote { float: left; position: relative; width: 100%; top: 0px; left: 0; }
            #about-content { float: left; width: 100%; padding: 25px 0 0 0; }
            #about-content p { font-size: 18px; line-height: 21px; }

    #claims { padding: 50px 0 50px 0; }
        #claims-inner { position: relative; }
            #claims-quote { float: left; position: relative; width: 100%; padding: 30px 0 26px 0; top: auto; left: 0; }
                #claims-quote p { text-transform: uppercase; font-weight: normal; font-family: 'Decima'; color: #00afd7; text-transform: uppercase; font-size: 24px; line-height: 24px; margin: 0; }
            #claims-content { float: left; width: 100%; padding: 58px 0 40px 0; }
                #claims-content .subtitle { margin: 0 0 50px 0; }
                #claims-content .content p {  font-size: 18px; line-height: 21px; margin: 0 0 12px 0; }

    #news { padding: 48px 0 30px 0; }
        #news .subtitle { float: left; width: 100%; margin: 30px 0 25px 0;}
            #news .subtitle h2 { font-size: 28px; line-height: 24px; }
        #news .content { float: left; width: 100%; margin: 0; }
            #news .content p { color: #7e6e66; font-size: 28px; line-height: 30px; margin: 0 0 10px 0; letter-spacing: 0.005em; }
            #news .content ul { float: left; width: 100%; margin: 0; padding: 0; list-style: none; }
                #news .content ul li { float: left; width: 100%; margin: 0 0 9px 0; padding: 0 0 8px 0; background: transparent url('../images/news-divider.png') center bottom no-repeat; text-transform: uppercase; text-align: center; font-size: 18px; line-height: 24px; color: #00aed8; font-family: 'Decima'; font-weight: normal; }
                #news .content ul li:last-child { margin: 0; padding: 0; background: none; }

    .featured-news-item { float: left; width: 100%; height: auto; margin: 0 0 20px 0; } 

            .archived-news-item {  position: relative; height: auto; }
                .archived-news-item-alpha { width: 100%; }
                .archived-news-item-alpha p { font-size: 16px; }
                .archived-news-item-beta { position: absolute; top: 16px; right: 0; }
                    .archived-news-item-beta span { font-size: 14px; }

    #news-image-grid { display: block; }
    #news-image-grid img { width: 100%; margin: 0; }
    #news-image-grid a:nth-child(odd) { float: left; width: calc(50% - 10px); margin: 0 0 20px 0; }
    #news-image-grid a:nth-child(even) { float: right; width: calc(50% - 10px); margin: 0 0 20px 0; }

    #company { padding: 48px 0 90px 0; }
        #company .subtitle { float: left; width: 100%; margin: 25px 0 30px 0;}
            #company .subtitle h2 { font-size: 28px; line-height: 28px; }
            #company .content p { font-size: 18px; line-height: 21px; }

    #people { padding: 48px 0 0 0; background-color: #f0ede9; }
        #people .subtitle { float: left; width: 100%; margin: 25px 0 30px 0;}
            #people .subtitle h2 { font-size: 28px; line-height: 28px; }
            #people .content p { font-size: 18px; line-height: 21px; }
    
        #people-text { float: left; width: 100%; margin: 50px 0; }
            #people .subtitle { float: left; width: 100%; margin: 0 0 55px 0;}
                #people .subtitle h2 { font-size: 36px; color: #fff; line-height: 36px; margin: 0; font-weight: normal; text-transform: uppercase; }
            #people .content { float: left; width: 100%; }
                #people .content p { color: #5d524d; font-size: 20px; line-height: 24px; margin: 0 0 12px 0; letter-spacing: 0.005em; }
            #people-quote { float: left; position: relative; width: 100%; border-top: 2px solid #b9dcd2; border-bottom: 2px solid #b9dcd2; padding: 30px 0 26px 0; top: auto; right: 0; text-align: center; }
                #people-quote p { text-transform: uppercase; font-weight: normal; font-family: 'Decima'; color: #00afd7; font-size: 24px; line-height: 24px; margin: 0; }

        #people-grid { width: 100%; margin: 0 auto; padding: 60px 16px 0 16px; }
            #people-grid .icon-arrowleft { left: 50%; margin: 0 0 0 -60px; top: 30px; }
            #people-grid .icon-arrowright { right: 50%; margin: 0 -60px 0 0; top: 30px; }
            #people-grid-inner .person { max-width: 48%; margin: 0 1%; }
            #people-grid-inner .person-item { width: 100%; height: auto; float: left; position: relative; margin: 0 0 40px 0 }

    .active .people-detail { margin: 0 -50% 0 0; }
        #people .people-detail .content p { font-size: 15px; line-height: 18px; color: #fff; margin: 0 0 8px 0; }
        #people .people-detail .content-alpha { width: 100%; margin: 0; }
        #people .people-detail .content-beta { width: 100%; }
        #people .people-detail .content-gamma { float: left; width: 100%; }
        
        .people-detail-inner .toggle { right: 16px; top: 45px; }

            .current-person { display: none; }

                .people-detail .content p { font-size: 18px; line-height: 21px; color: #fff; margin: 0 0 20px 0; }
                .people-detail .content-alpha { float: left; width: 100%; margin: 0; }
                .people-detail .content-beta { float: left; width: 100%; }
                .people-detail .content-gamma { float: left; width: 100%; }

    #download-list p { padding: 0; }        

    #contact { padding: 50px 0 45px 0; border-bottom: 1px solid #7e6e65; overflow: hidden; }
        #contact-content { float: left; width: 100%; margin: 45px 0 0 0; }
            #contact-content h2 { font-size: 13px; line-height: 15px; color: #00aed8; margin: 0 0 10px 0; text-transform: uppercase; }
            #contact-content h3 { font-size: 13px; line-height: 15px; color: #7e6e66; margin: 0; text-transform: uppercase; font-weight: normal; }
            #contact-content a { color: #7e6e66; }
            #contact-content a:hover { color: #00aed8; }
        #contact-alpha { float: left; width: 100%; margin: 0 0 20px 0; }
        #contact-beta { float: left; width: 100%; margin: 0 0 20px 0; }
        #contact-gamma { float: left; width: 100%; margin: 0 0 20px 0; }
        #contact-delta { float: left; width: 100%; }

    footer { background-color: #fff; padding: 50px 0 45px 0; }
        #footer-inner { position: relative; }
        #footer-alpha {  }
            #footer-alpha span { font-size: 13px; color: #00aed8; font-weight: bold; font-family: 'Decima'; text-transform: uppercase; }
        #footer-beta { }
            #footer-beta ul { float: left; width: 100%; }

        #header-background .arrow-right { margin: -1010px -310px 0 0; max-width: 2440px; }
        #header-background .arrow-left { margin: -1000px 0 0; max-width: 2440px; }

        #news-background .arrow-right { margin: -1700px -1500px 0 0; max-width: 2440px;}
        #news-background .arrow-left { margin: -1700px 0 0 -1000px; max-width: 2440px; }

        #overlay-title h2 { font-size: 30px; line-height: 32px; }
        #overlay-content-alpha { width: 100%; }
        #overlay-content-beta { float: left; width: 100%; }

        .media-grid-item-large { height: auto; }
            .media-grid-item-large .media-grid-item-image { float: left; width: 100%; }
                .media-grid-item-large .media-grid-item-image img { width: 100%; }
            .media-grid-item-large .media-grid-item-text { float: left; position: relative; top: auto; left: auto; width: 100%; height: auto; padding: 13px 18px; }

        .media-grid-item-small { float: left; width: 100%; height: auto; }
            .media-grid-item-small .media-grid-item-image { float: left; width: 100%; }
                .media-grid-item-small .media-grid-item-image img { width: 100%; }
            .media-grid-item-small .media-grid-item-text { float: left; width: 100%; padding: 13px 18px; }

        #news-category-date { margin: 0 0 20px 0; }
            #news-category-date span { margin: 0 20px 0 0; }
        #news-title-images { float: left; width: 100%; }
        #news-title { float: left; width: 100%; padding: 0; margin: 0 0 30px 0; }
        #news-images { display: none; } 
        #news-content { float: right; width: 100%; }

    }

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

        #people { padding: 48px 0 0 0; background-color: #f0ede9; }
            #people .subtitle { float: left; width: 100%; margin: 25px 0 30px 0;}
                #people .subtitle h2 { font-size: 28px; line-height: 28px; }
                #people .content p { font-size: 18px; line-height: 21px; }

                    #people-grid { width: 100%; margin: 0 auto; padding: 60px 16px 0 16px; }
            #people-grid .icon-arrowleft { left: 50%; margin: 0 0 0 -60px; top: 30px; }
            #people-grid .icon-arrowright { right: 50%; margin: 0 -60px 0 0; top: 30px; }
                    #people-grid-inner .person { float: left; max-width: 100%; margin: 0; width: 100%; }
                    #people-grid-inner .person-item { width: 100%; height: auto; float: left; position: relative; margin: 0 0 40px 0 }


                .archived-news-item-alpha { width: 100%; }

        #footer-beta { float: left; width: 100%; margin: 20px 0 0 0; }
            #footer-beta ul { float: left; width: 100%; }
                #footer-beta ul li { float: left; width: 100%; margin: 0 0 5px 0; text-align: left; border: none; }

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.25),
    only screen and ( min--moz-device-pixel-ratio: 1.25),
    only screen and ( -o-min-device-pixel-ratio: 1.25/1),
    only screen and ( min-device-pixel-ratio: 1.25),
    only screen and ( min-resolution: 200dpi),
    only screen and ( min-resolution: 1.25dppx)
    {
        #header-inner h1 a { background-image: url('../images/sura@2x.png'); }
        #sura a { background-image: url('../images/sura-small@2x.png'); }
        #header-inner #arrow span { background-image: url('../images/arrow@2x.png'); }
        .current-person span { background-image: url('../images/current@2x.png'); }
    }