/* primairy colors */
/* secondary colors */
.button {
    cursor: pointer;
    text-decoration: none;
}

    .button.white {
        display: inline-block;
        background-color: #ffffff;
        border: solid 1px #e3000f;
        color: #e3000f;
        font-family: "DIN bold";
        font-weight: bold;
        line-height: 42px;
        padding: 0 19px;
    }

        .button.white:hover {
            background-color: #e3000f;
            color: #ffffff;
        }

    .button.red {
        display: inline-block;
        background-color: #e3000f;
        border: 1px solid #e3000f;
        color: #ffffff;
        font-family: "DIN bold";
        font-weight: bold;
        line-height: 42px;
        padding: 0 19px;
    }

        .button.red:hover {
            border: solid 1px #e3000f;
            background-color: #ffffff;
            line-height: 42px;
            color: #e3000f;
        }

.clear {
    clear: both;
}

.homePage {
    font-family: "DIN regular";
}

.header {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: calc(100vh - 83px);
}

    .header .body {
        padding-top: 332px;
        text-align: center;
    }

        .header .body .title {
            font-family: "Helvetica black";
            font-size: 48px;
            color: #ffffff;
            margin-bottom: 62px;
            text-transform: uppercase;
            letter-spacing: 0.2px;
        }

        .header .body .cta {
            display: inline-block;
            cursor: pointer;
            font-family: "DIN bold";
            font-size: 18px;
            color: #ffffff;
        }

            .header .body .cta:hover {
                color: #e3000f;
            }

            .header .body .cta span {
                display: block;
                font-size: 50px;
                margin-bottom: 14px;
            }

.about {
    background-color: #eceff1;
    padding: 117px 319px 96px 249px;
}

.header-about {
    padding: 25px 319px 25px 249px;
}

    .about .text {
        font-family: "DIN bold";
        color: #263238;
        margin-bottom: 48px;
        line-height: 1.36;
    }

.header-about .text {
    margin-bottom: 19px;
}

.header-about .text h1 {
    margin: 0;
}

.about .text {
    font-size: 28px;
}

.grid-container {
    max-width:100%;
    padding-left:0;
    padding-right:0;
}
.grid-row {
    margin:30px 50px 30px 50px;
}

.column-2-1 {
    display:flex
}
.column-2-1 > div {
    flex: 1;
}
.column-2-1 > div:first-child {
    flex: 2;
}
.column-2-1 > div:first-child .grid-box {
    margin-right:10px;
}
.column-2-1 > div:last-child .grid-box {
    margin-left:20px;
}

.column-1-2 {
    display:flex
}
.column-1-2 > div {
    flex: 1;
}
.column-1-2 > div:last-child {
    flex: 2;
}
.column-1-2 > div:first-child .grid-box {
    margin-right:20px;
}
.column-1-2 > div:last-child .grid-box {
    margin-left:10px;
}

.column-1-1-1 {
    display:flex
}
.column-1-1-1 > div {
    flex:1;
}
.column-1-1-1 > div:nth-child(1) .grid-box {
    margin-right:20px;
}
.column-1-1-1 > div:nth-child(2) .grid-box {
    margin-left:10px;
    margin-right:10px;
}
.column-1-1-1 > div:nth-child(3) .grid-box {
    margin-left:20px;
}
div.grid-box {
    height:100%;
}
div.grid-box h2 {
    font-family: DIN bold;
    margin: 0;
    padding: 15px 15px 0;
}
div.grid-box a {
    text-decoration:none;
    position:relative;
    display:block;
}
div.grid-box a p {
    margin: 0;
    font-size:0.9em;
    padding: 10px 25px 15px 15px;
}
div.grid-box a h2 {
    font-size:1.5em;
}
div.grid-box a img {
    width:100%;
    display:block;
}

div.grid-box a span.icon {
    position:absolute;
    color:#000;
    bottom:17px;
    right:15px;
}
div.grid-box.box-red {
    background-color:#e3000f;
}
div.grid-box.box-red a {
    height:100%;
}
div.grid-box.box-red a h2 {
    color:#fff;
    font-size:1.75em;
    text-transform: uppercase;
}
div.grid-box.box-red a p {
    font-size:1em;
    color: #263238;
}

div.grid-box.box-anthracite a {
    display:table;
    width:100%;
    height:100%;
    min-height:200px;
    background-color:#253238;
    color:#fff;
}
div.grid-box.box-anthracite a h2 {
    display:table-cell;
    vertical-align:middle;
    text-align: center;
    font-size:1.75em;
}

div.grid-box.cta a {
    display:block;
    height:100%;
    background-color:#E6E6E6;
    color:#263238;
    text-decoration:none;
}

div.grid-box.quicklinks {
    background-color:#e3000f;
    padding: 20px;
    height:100%;
}
div.grid-box.quicklinks h2 {
    margin: 0;
    padding:0;
    color:#fff;
    font-size:1.5em;
    text-transform: uppercase;
}
div.grid-box.quicklinks p {
    margin: 0;
    font-size:0.9em;
}
div.grid-box.quicklinks ul {
    margin:20px 0 20px;
    padding:0;
}
div.grid-box.quicklinks ul li {
    margin:20px 0 0;
    padding:0;
    list-style:none;
}
div.grid-box.quicklinks ul li a {
    display:block;
    position:relative;
    color:#fff;
    text-decoration:none;
    padding-right:20px;
}
div.grid-box.quicklinks ul li a:hover {
    text-decoration: underline;
}
.quicklinks ul li a p {
    display:inline-block;
    width:70%;
}
div.grid-box.quicklinks ul li a:after {
    content: "";
    font-family: 'mammicon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    
    position:absolute;
    right: 0;
    top: 5px;
}

@media (max-width: 1024px) {
    .column-2-1, .column-1-2, .column-1-1-1 {
        display:block;
    }
    .column-2-1 > div, .column-1-2 > div, .column-1-1-1 > div {
        flex:none !important;
    }
    .column-2-1 > div .grid-box, .column-1-2 > div .grid-box, .column-1-1-1 > div .grid-box {
        margin-right:0 !important;
        margin-left:0 !important;
    }     
    .grid-blocks {
        margin-bottom:20px;
    }
    .grid-row {
        margin:0 20px;
    }
    .grid-column {
        margin-top:20px;
    }
}  

.markets {
    background-color: #263238;
}

    .markets .background {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        /*width: percentage($marketsImageWidth, $targetWidth);*/
        width: 71.55%;
        height: auto;
        background-position: center center;
    }

    .markets .body {
        position: absolute;
        left: 60px;
        bottom: 60px;
        width: 66.8599%;
    }

        .markets .body .title {
            font-family: "DIN bold";
            font-size: 36px;
            color: #ffffff;
            margin-bottom: 21px;
            line-height: 1.06;
        }

        .markets .body .text {
            font-family: "DIN bold";
            font-size: 18px;
            color: #ffffff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

    .markets .menu {
        float: right;
        margin-right: -405px;
        width: 325px;
        padding: 51px 48px 16px 32px;
    }

        .markets .menu .title {
            font-family: "DIN bold";
            font-size: 36px;
            color: #ffffff;
            margin-bottom: 49px;
            line-height: 1.06;
        }

        .markets .menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .markets .menu a {
            display: inline-block;
            cursor: pointer;
            font-family: "DIN bold";
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            border-bottom: solid 2px #263238;
            margin-left: 16px;
        }

            .markets .menu a:hover {
                color: #fff;
                text-decoration: none;
                border-bottom: solid 2px #e3000f;
            }

                .markets .menu a:hover:after {
                    font-family: 'mammicon';
                    font-size: 22px;
                    content: "\e903";
                    position: absolute;
                    right: 15px;
                    top: 0;
                    color: #fff;
                }

        .markets .menu li {
            position: relative;
            margin-bottom: 38px;
        }

        .markets .menu .item span {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 22px;
        }

        .markets .menu .item:hover span {
            display: block;
            color: #ffffff;
        }

    .markets .tablet.menu {
        display: none;
    }

.cases {
    margin: 0 64px 48px 54px;
}

    .cases > .title {
        font-family: "Helvetica black";
        font-size: 44px;
        text-align: center;
        color: #263238;
        margin-top: 96px;
        margin-bottom: 64px;
    }

    .cases .cases-middle {
        float: left;
        width: 65.96067%;
        margin-right: 28px;
    }

        .cases .cases-middle .case {
            float: left;
            width: 48.3945%;
        }

            .cases .cases-middle .case.top {
                width: 100%;
            }

            .cases .cases-middle .case.left {
                margin-right: 3.21101%;
            }

    .cases .cases-right {
        float: left;
        /*width: percentage($casesRightWidth, $casesTargetWidth)*/
        width: 31.87%;
    }

    .cases .results {
        text-align: center;
        margin-top: 27px;
    }

    .cases .case {
        background-color: #f8f9fa;
        margin-bottom: 32px;
        cursor: pointer;
        position: relative;
    }

        .cases .case img {
            width: 100%;
            display: block;
        }

        .cases .case .body {
            padding: 34px 34px 75px 36px;
        }

            .cases .case .body .type {
                font-family: "DIN bold";
                font-size: 18px;
                color: #e3000f;
                margin-bottom: 15px;
            }

            .cases .case .body .title {
                font-family: "DIN bold";
                font-size: 28px;
                color: #263238;
                line-height: 28px;
                margin-bottom: 29px;
            }

            .cases .case .body .text {
                font-size: 17px;
                color: #263238;
                margin-bottom: 33px;
                line-height: 1.41;
            }

            .cases .case .body .tags {
                position: absolute;
                padding-right: 32px;
                width: 75%;
                bottom: 35px;
            }

                .cases .case .body .tags .tag {
                    font-family: "DIN bold";
                    font-size: 16px;
                    margin-right: 13px;
                    color: #8c8c8c;
                }

                .cases .case .body .tags .arrow {
                    display: block;
                    font-family: "DIN bold";
                    font-size: 24px;
                    text-decoration: none;
                    position: absolute;
                    right: -8px;
                    bottom: -6px;
                    color: #e3000f;
                }

        .cases .case.top .body {
            padding: 35px 35px 75px 53px;
        }

            .cases .case.top .body .type {
                margin-bottom: 15px;
            }

            .cases .case.top .body .title {
                margin-bottom: 31px;
            }

            .cases .case.top .body .text {
                margin-bottom: 33px;
            }

            .cases .case.top .body .tags {
                padding-right: 32px;
                width: 85%;
            }

                .cases .case.top .body .tags .tag {
                    margin-right: 13px;
                }

                .cases .case.top .body .tags .arrow {
                    right: -16px;
                }

.highlighted {
    padding: 65px 0 67px 250px;
    background-color: #f8f9fa;
}

    .highlighted .image {
        float: left;
        margin-right: 24px;
        /*width: percentage($highlightedImageWidth, $highlightedTargetWidth);*/
        width: 32.311%;
    }

        .highlighted .image img {
            width: 100%;
        }

    .highlighted .body {
        float: left;
        width: 43.19328%;
    }

        .highlighted .body .title {
            font-family: "DIN bold";
            font-size: 34px;
            color: #263238;
            margin-bottom: 9px;
            line-height: 1.06;
        }

        .highlighted .body .text {
            font-family: "DIN bold";
            font-size: 18px;
            color: rgba(38, 50, 56, 0.8);
            margin-bottom: 32px;
            line-height: 1.44;
        }

        .highlighted .body .link a, .safety .body .link a span {
            font-family: "DIN bold";
            font-size: 18px;
            text-decoration: none;
            color: #e3000f;
        }

.homePage > .contact {
    position: relative;
    background-color: #eceff1;
    height: 570px;
}

.homePage .contact .image {
    position: absolute;
    top: 32px;
    right: 69px;
    width: 63.61111%;
    height: 501px;
    background-image: url("https://placehold.it/916x501");
    background-repeat: no-repeat;
    background-size: contain;
}

.contact .body {
    position: relative;
    padding-top: 174px;
    padding-left: 56px;
    width: 32.08333%;
    z-index: 1;
}

    .contact .body .title {
        font-family: "Helvetica black";
        font-size: 44px;
        color: #263238;
        margin-bottom: 24px;
        letter-spacing: 0.1px;
        text-transform: uppercase;
    }

    .contact .body .text {
        font-family: "DIN bold";
        font-size: 17px;
        color: #263238;
        margin-bottom: 32px;
    }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.videoWrapper {
    position: relative;
    height: auto;
    background-image: none;
}

    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .videoWrapper video {
        width: 100%;
        background-image: url(/static/img/spinner.gif);
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-position: center;
        display: block;
    }

        .videoWrapper video track {
            background-color: red;
            color: #fff;
        }

    .videoWrapper:hover {
        cursor: pointer;
    }

    .videoWrapper .scrollitem {
        bottom: 25%;
    }

        .videoWrapper .scrollitem .mobile {
            display: none;
        }

        .videoWrapper .scrollitem .icon {
            display: block;
        }

    .videoWrapper > a {
        width: 100%;
        max-width: 100%;
        position: absolute;
        top: 30%;
        left: 0;
        margin: 0 auto;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

        .videoWrapper > a:hover {
            color: #fff;
        }

            .videoWrapper > a:hover .wrapper span.play {
                color: #e3000f;
            }

        .videoWrapper > a h1 {
            font-size: 48px;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            font-family: "Helvetica black";
            margin: 0 0 62px 0;
        }

        .videoWrapper > a span {
            display: block;
            font-size: 18px;
            line-height: 1.11;
            font-family: din bold;
            margin-top: 14px;
        }

#ytplayer {
    visibility:hidden;
}
#youtube-player {
    display: block;
    position: relative;
    overflow: hidden;
    height: 54vw;
}

    #youtube-player iframe {
        width: 100%;
        height: 182%;
        margin-top: -5%;
    }

    #youtube-player.play iframe {
        margin-top: -6%;
    }

#youtube-player.play:before {
    display: none;
}

#youtube-fullscreen {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#youtube-fullscreen.placeholder {
    background-size: contain;
    visibility:hidden;
}

#youtube-player.play .wrapper, #youtube-player.play .scrollitem-wrapper {
    display: none;
}

#youtube-fullscreen .wrapper span, #youtube-fullscreen .scrollitem-wrapper span {
    display: block;
    font-family: din bold;
    font-size: 18px;
}
#youtube-fullscreen .scrollitem-wrapper .ic_mouse_white {
    margin-top: 20px;
}
.videoWrapper > a span.play:before, #youtube-fullscreen span.play:before {
    content: "\e910";
    font-family: 'mammicon';
    font-size: 50px;
    margin-top: 0;
}

.homePage h1 p {
    margin: 0;
}

.homePage h1 a {
    color: #263238;
}

#youtube-fullscreen {
    color: #fff;
}

#youtube-fullscreen .wrapper {
    text-align: center;
}

#youtube-fullscreen .wrapper, #youtube-fullscreen .heading {
    width: 100%;
    position: absolute;
    top: 40%;
}

#youtube-fullscreen .heading h1 {
    font-family:DIN black;
    font-size:5em;
    line-height:1.1em;
    text-transform: uppercase;
    padding:0 25% 0 10%;
    margin-top:-10%;
    min-height: 320px;
    color: #fff;
}
#youtube-fullscreen .heading h1.helvetica {
    font-family:"Helvetica black";
}
#youtube-fullscreen .heading .buttons {
    padding:0 30% 0 10%;
}
#youtube-fullscreen .heading a {
    font-family:DIN bold;
    display:inline-block;
    padding:10px 50px;
    border-radius:5px;
    text-decoration:none;
    background-color:#253238;
    color:#fff;
}
#youtube-fullscreen .heading a.start-button {
    font-family:DIN bold;
    display:inline-block;
    padding:10px 10px 10px 20px;
    border-radius:5px;
    text-decoration:none;
    background-color:transparent;
    color:#fff;
}
#youtubeDialog {
    position:absolute;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.6);
    text-align:center;
}
#youtubeDialogPlayer {
    position:relative;
    margin:0 auto;
    width:1280px;
    height:720px;
    visibility:hidden;
}
#youtubeDialogIframeContainer {
    width:100%;
    height:100%;
}
#youtubeDialogClose {
    position: absolute;
    right: -14px;
    top: -14px;
    z-index: 200;
    text-decoration:none;
    transform: rotate(45deg);
    border-radius: 50%;
    background-color: #000;
    border: solid 3px #fff;
    font-weight: bold;
    display:block;
    color: #fff;
    width: 25px;
    height: 25px;
    font-size: 2.55em;
    line-height: .35em;
}
#youtube-fullscreen .scrollitem-wrapper {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 15%;
}
@media (max-width: 1350px) {
    #youtubeDialogPlayer {
        width:auto;
        margin:5%;
    }
}
@media (max-width: 375px) {
    #youtube-fullscreen .heading h1 {
        font-size:1.3em;
    }
}
@media (max-width: 500px) {
    #youtube-fullscreen .heading a {
        padding:4px 20px;
    }
    #youtube-fullscreen .heading .buttons {
        padding:0 10%;
    }
    #youtube-fullscreen .heading h1 {
        min-height: 60px;
    }
}
@media (min-width: 375px) and (max-width: 500px) {
    #youtube-fullscreen .heading h1 {
        font-size:1.5em;
    }
}
@media (min-width: 500px) and (max-width: 768px) {
    #youtube-fullscreen .heading h1 {
        font-size:1.7em;
        min-height:120px;
    }
    #youtube-fullscreen .heading a {
        padding:6px 30px;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    #youtube-fullscreen .heading h1 {
        font-size:2.5em;
    }
}
@media (min-width: 992px) and (max-width: 1439px) {
    #youtube-fullscreen .heading h1 {
        font-size:3.5em;
        margin-top:-5%;
        min-height:250px;
    }
}
#youtube-player.fullwidth #youtube-fullscreen {
    cursor:auto;
}
#youtube-player.fullwidth {
    padding: 0;
}
#youtube-player.fullwidth #youtube-fullscreen, #youtube-player.fullwidth #youtube-fullscreen .heading {
    width: 100vw;
}
#youtube-player.fullwidth iframe {
    margin-top: -42.5%;
    height: 250%;
    width: 100vw;
}
#youtube-player.fullwidth #youtube-fullscreen.placeholder {
    background-size:cover;
} 







::cue(.red) {
    color: red;
}

::cue(.background-yellow) {
    background-color: yellow;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}

    .modal .wrapper {
        background-color: rgba(255, 255, 255, 0.8);
        height: 100%;
        width: 100%;
        position: absolute;
    }

        .modal .wrapper .iframe-container {
            height: 84%;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .modal .wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: 0;
            margin: auto;
        }

        .modal .wrapper .closeModal {
            position: absolute;
            top: 20px;
            right: 20px;
        }

            .modal .wrapper .closeModal:after {
                font-family: 'mammicon';
                content: "\e901";
                font-size: 30px;
            }

            .modal .wrapper .closeModal:hover {
                cursor: pointer;
            }

.homePage .contact img.mobile {
    display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
    .about {
        padding: 60px;
    }

        .about .text {
            margin-bottom: 30px;
        }

    .markets .background {
        width: 100%;
        height: 57vh;
    }

        .markets .background .menu {
            display: none;
        }

        .markets .background .body {
            left: 25px;
        }

    .markets .tablet.menu {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

        .markets .tablet.menu .title {
            padding: 45px 25px 30px 25px;
            margin: 0;
        }

        .markets .tablet.menu ul {
            padding: 0 25px 45px 25px;
        }

            .markets .tablet.menu ul li {
                float: left;
                width: 33%;
                margin-bottom: 30px;
            }

                .markets .tablet.menu ul li a {
                    margin: 0;
                }

            .markets .tablet.menu ul:after {
                display: table;
                content: "";
                clear: both;
            }

    .cases {
        margin: 0 25px 48px 25px;
    }

        .cases .case .body {
            padding: 35px 72px 70px 36px;
        }

        .cases .title {
            font-size: 36px;
            margin-top: 24px;
            margin-bottom: 37px;
        }

        .cases .cases-middle, .cases .cases-right {
            width: 100%;
            margin: 0;
        }

            .cases .cases-middle .case {
                width: 48.45%;
                margin-bottom: 25px;
            }

                .cases .cases-middle .case.left {
                    margin-right: 3%;
                }

            .cases .cases-middle > div[data-bind] {
                display: flex;
                flex-wrap: wrap;
            }

            .cases .cases-middle .case.top .body {
                padding: 35px 72px 80px 36px;
            }

        .cases .cases-right {
            display: flex;
            flex-wrap: wrap;
        }

            .cases .cases-right .case {
                float: left;
                width: 48.5%;
                margin-bottom: 25px;
            }

                .cases .cases-right .case:nth-child(odd) {
                    margin-right: 3%;
                }

            .cases .cases-right:after {
                display: table;
                content: "";
                clear: both;
            }

    .highlighted {
        padding: 65px 15px;
        background-color: #f8f9fa;
    }

        .highlighted .body {
            width: 64%;
        }

    .homePage .contact {
        height: auto;
    }

        .homePage .contact .image {
            background-size: contain;
            right: initial;
            height: 100%;
            width: 90%;
            left: 40px;
            top: 40px;
        }

        .homePage .contact .body {
            padding: 485px 0 60px 25px;
            width: 65%;
        }

        .homePage .contact .arrow_forward:before {
            font-size: 22px;
            line-height: 22px;
            vertical-align: text-top;
            margin: -3px 0 0 4px;
            display: inline-block;
        }

        .homePage .contact .button.red {
            font-size: 16px;
            padding: 0 30px;
            line-height: 46px;
        }

    .markets .menu a:hover:after {
        display: none;
    }

    .videoWrapper > a {
        top: 20%;
    }

        .videoWrapper > a h1 {
            line-height: 1.2;
            letter-spacing: normal;
            font-size: 40px;
            padding: 0 81px;
            margin-bottom: 50px;
        }

    .videoWrapper .scrollitem {
        display: none;
    }
}

@media (min-width: 1440px) {
    #youtube-player {
        height: 37vw;
        background-color: #eceff1;
        padding: 0 249px 0 249px;
    }

    #youtube-player iframe {
        height: 225%;
        margin-top: -33%;
        width: 70vw;
    }

    #youtube-player.play iframe {
        margin-top: -33%;
    }

    #youtube-fullscreen, #youtube-fullscreen .wrapper, #youtube-fullscreen .scrollitem-wrapper {
        width: 70vw;
    }
}

@media (max-width: 1439px) {
    #youtube-fullscreen .scrollitem-wrapper .desktop, #youtube-fullscreen .scrollitem-wrapper .ic_mouse_white {
        display: none;
    }
}

@media (min-width: 1440px) and (max-width: 1655px) {
    #youtube-player iframe {
        margin-top: -34%;
    }

    #youtube-player.play iframe {
        margin-top: -34%;
    }
}

@media (min-width: 992px) and (max-width: 1439px) {
    #youtube-player iframe {
        height: 204%;
        margin-top: -29%;
    }

    #youtube-player.play iframe {
        margin-top: -29%;
    }
}

@media (max-width: 991px) {
    #youtube-player iframe {
        height: 225%;
        margin-top: -34%;
    }

    #youtube-player.play iframe {
        margin-top: -34%;
    }
}

@media (max-width: 600px) {
    #youtube-player {
        height: 50vw;
    }

    #youtube-player iframe {
        height: 300%;
        margin-top: -50%;
    }

    #youtube-player.play iframe {
        margin-top: -50%;
    }

    #youtube-fullscreen .wrapper {
        top: 30%;
    }

    #youtube-fullscreen.placeholder {
        background-size: cover;
    }
}

@media (min-width: 992px) and (max-width: 1439px) {
    #mainVideo {
        display: block;
    }

    .about {
        padding: 64px 112px 64px 112px;
        font-size: 24px;
        line-height: 1.08;
    }

        .about .button.red {
            font-size: 18px;
            line-height: 54px;
            padding: 0 16px;
        }

            .about .button.red .icon {
                position: relative;
                top: 2px;
            }

        .about .text {
            margin-bottom: 32px;
            font-size: 24px;
            line-height: 1.08;
        }

    .markets {
        max-width: 100%;
        overflow: hidden;
    }

        .markets .background {
            width: 67.743%;
        }

        .markets .menu {
            width: 320px;
        }

            .markets .menu .title {
                font-size: 28px;
                line-height: 1.07;
                margin-bottom: 32px;
            }

            .markets .menu a {
                font-size: 16px;
                line-height: 1.13;
                margin-left: 0;
            }

                .markets .menu a:active {
                    border-bottom: solid 2px #e3000f;
                }

            .markets .menu li {
                margin-bottom: 16px;
            }

        .markets .body {
            width: 82%;
            left: 32px;
            bottom: 40px;
        }

            .markets .body .title {
                font-size: 28px;
                line-height: 1.07;
                margin-bottom: 24px;
                max-width: 448px;
            }

            .markets .body .text {
                font-size: 16px;
                line-height: 1.13;
                text-shadow: none;
            }

    .cases {
        margin: 0 32px 48px 32px;
    }

        .cases > .title {
            margin: 56px 0 48px 0;
            font-size: 38px;
            letter-spacing: 0.1px;
        }

        .cases .cases-middle {
            float: none;
            width: 100%;
            margin: 0;
        }

        .cases .case.top .body {
            padding: 32px 44px 37px 32px;
        }

            .cases .case.top .body .title {
                margin-bottom: 16px;
            }

            .cases .case.top .body .text {
                font-size: 16px;
                line-height: 1.5;
                margin-bottom: 71px;
            }

            .cases .case.top .body .type {
                margin-bottom: 24px;
            }

            .cases .case.top .body .tags .tag {
                font-size: 14px;
                margin-right: 20px;
            }

        .cases .case .body {
            padding: 32px;
        }

            .cases .case .body .type {
                margin-bottom: 24px;
                font-size: 16px;
            }

            .cases .case .body .title {
                font-size: 24px;
                line-height: 1.08;
                margin-bottom: 16px;
            }

            .cases .case .body .tags .tag {
                display: inline-block;
                margin-right: 20px;
                font-size: 14px;
            }

            .cases .case .body .text {
                font-size: 16px;
                line-height: 1.5;
                margin-bottom: 65px;
            }

        .cases .results {
            margin-top: 16px;
        }

            .cases .results .button.white {
                font-size: 18px;
                line-height: 54px;
                padding: 0 28px;
            }

                .cases .results .button.white .icon {
                    font-size: 28px;
                    position: relative;
                    top: 6px;
                }

    .highlighted {
        padding: 64px 0 71px 112px;
    }

        .highlighted .image {
            margin-right: 32px;
            width: 32.728%;
        }

        .highlighted .body {
            width: 54%;
            padding-right: 79px;
        }

            .highlighted .body .title {
                line-height: 1.07;
                font-size: 28px;
                max-width: 85%;
                margin-bottom: 16px;
            }

            .highlighted .body .text {
                font-size: 16px;
                line-height: 1.5;
                margin-bottom: 25px;
            }

            .highlighted .body .link a {
                font-size: 16px;
                line-height: 1;
            }

    .homePage > .contact {
        height: auto;
        padding-top: 62px;
    }

    .homePage .contact .image {
        position: relative;
        width: 832px;
        height: 447px;
        margin: 0 auto;
        top: 0;
        right: auto;
    }

    .homePage .contact .body {
        padding: 62px 0 63px 32px;
        width: 50%;
    }

        .homePage .contact .body .title {
            font-size: 38px;
            margin-bottom: 23px;
        }

        .homePage .contact .body .text {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 31px;
        }

        .homePage .contact .body .button.red {
            font-size: 18px;
            line-height: 53px;
        }

            .homePage .contact .body .button.red .icon {
                font-size: 18px;
                position: relative;
                top: 3px;
            }

    .videoWrapper .scrollitem {
        display: none;
    }

    .videoWrapper > a h1 {
        font-size: 40px;
        line-height: 1.2;
        letter-spacing: normal;
        margin: 0 193px 42px 193px;
    }
}

@media (max-width: 767px) {
    .about {
        padding: 40px 12px;
    }

        .about .text {
            line-height: 1.09;
            font-size: 22px;
            margin-bottom: 24px;
        }

            .about .text a .icon {
                position: relative;
                font-size: 18px;
                top: 3px;
                left: 7px;
                padding-right: 8px;
            }

    .markets .background {
        width: 100%;
        height: 68vh;
    }

        .markets .background .menu {
            display: none;
        }

    .markets .tablet.menu {
        display: block;
        float: none;
        padding: 32px 0 47px 0;
        margin: 0;
        width: 100%;
    }

        .markets .tablet.menu .title {
            line-height: 1.08;
            font-size: 26px;
            margin: 0 12px 16px 12px;
        }

        .markets .tablet.menu ul {
            padding: 0 0 0 12px;
        }

            .markets .tablet.menu ul:after {
                display: table;
                content: "";
                clear: both;
            }

            .markets .tablet.menu ul li {
                float: left;
                width: 50%;
                margin-bottom: 12px;
            }

                .markets .tablet.menu ul li a {
                    color: #fff;
                    margin-left: 0;
                    line-height: 1.22;
                }

                    .markets .tablet.menu ul li a:active {
                        border-bottom: solid 2px #e3000f;
                    }

    .markets .body {
        bottom: 33px;
        left: 12px;
        width: 90%;
    }

        .markets .body .title {
            line-height: 1.08;
            font-size: 26px;
            margin-bottom: 16px;
        }

        .markets .body .text {
            line-height: 1.22;
            font-size: 18px;
            text-shadow: none;
        }

    .cases {
        margin: 0 12px;
    }

        .cases .title {
            margin: 40px 12px 16px 12px;
            line-height: 1.2;
            font-size: 30px;
        }

        .cases .cases-middle, .cases .cases-right {
            float: none;
            width: 100%;
            margin: 0;
        }

            .cases .cases-middle > div[data-bind], .cases .cases-right > div[data-bind] {
                margin: 0;
            }

            .cases .cases-middle .case, .cases .cases-right .case {
                float: none;
                width: 100%;
                margin: 0 0 16px;
            }

                .cases .cases-middle .case .body, .cases .cases-right .case .body {
                    padding: 24px 24px 32px 24px;
                }

                    .cases .cases-middle .case .body .type, .cases .cases-right .case .body .type {
                        line-height: 1;
                        font-size: 16px;
                        margin-bottom: 16px;
                    }

                    .cases .cases-middle .case .body .title, .cases .cases-right .case .body .title {
                        font-size: 22px;
                        line-height: 1.09;
                        margin: 0 0 14px;
                    }

                    .cases .cases-middle .case .body .text, .cases .cases-right .case .body .text {
                        font-size: 16px;
                        margin-bottom: 60px;
                    }

                    .cases .cases-middle .case .body .tags, .cases .cases-right .case .body .tags {
                        padding-right: 0;
                        width: 85%;
                    }

                        .cases .cases-middle .case .body .tags .tag:not(:last-child), .cases .cases-right .case .body .tags .tag:not(:last-child) {
                            margin-bottom: 2px;
                        }

        .cases .case {
            float: none;
            width: 100%;
            margin: 0 0 16px;
        }

            .cases .case .body {
                padding: 0;
            }

        .cases .results {
            margin: 40px 0;
        }

    .videoWrapper > a {
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        transform: none;
        display: table-cell;
        vertical-align: middle;
        padding: 0 39px;
    }

        .videoWrapper > a h1 {
            font-size: 34px;
            letter-spacing: normal;
            margin-bottom: 33px;
        }

        .videoWrapper > a span {
            margin-top: 8px;
        }

    .videoWrapper.homeVid {
        height: 400px;
        background-position: center center;
        display: table;
    }

    .videoWrapper .scrollitem {
        display: none;
    }

    .highlighted {
        padding: 40px 12px 43px 12px;
    }

        .highlighted .image {
            float: none;
            margin: 0 0 16px;
            width: 100%;
        }

        .highlighted .body {
            float: none;
            width: 100%;
        }

            .highlighted .body .title {
                font-size: 26px;
                line-height: 1.23;
            }

            .highlighted .body .text {
                font-size: 16px;
                line-height: 1.25;
                margin-bottom: 16px;
                color: #4f595f;
            }

                .highlighted .body .text p {
                    margin: 0;
                }

            .highlighted .body .link a {
                font-size: 16px;
            }

    .homePage .contact {
        padding: 33px 12px 25px 12px;
        height: auto;
    }

        .homePage .contact .image {
            display: none;
            position: relative;
            top: auto;
            right: auto;
            width: 100%;
            height: 191px;
            margin-bottom: 49px;
        }

        .homePage .contact img.mobile {
            display: block;
            width: 100%;
            margin-bottom: 24px;
        }

        .homePage .contact .body {
            width: 100%;
            padding: 0;
        }

            .homePage .contact .body .title {
                font-size: 30px;
                letter-spacing: normal;
                margin-bottom: 18px;
            }

            .homePage .contact .body .text {
                font-size: 16px;
                line-height: 1.25;
                margin-bottom: 25px;
                color: #4f595f;
            }

            .homePage .contact .body .button.red {
                font-size: 16px;
                line-height: 48px;
                padding: 0 22px;
            }

                .homePage .contact .body .button.red .icon {
                    font-size: 20px;
                    position: relative;
                    top: 3px;
                    left: 8px;
                }
}