/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* =================================================================== */

html {
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
}

*, *:before, *:after {
    box-sizing: inherit;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: center;
       -moz-box-align: center;
    -webkit-align-items: center;
            align-items: center;
        -ms-flex-align: center;
}

.btn {
    display: inline-block;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.sg-header {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 30px;
}

.sg-header__logo {
    display: block;
    width: 188.48px;
    height: 60px;
}

.sg-header .btn {
    margin-left: auto;
    color: #2277A9;
    padding: 12px 31px 13px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0;
    border: 2px solid #2277A9;
    border-radius: 2px;
}

.sg-header .btn span {
    display: inline-block;
    vertical-align: middle;
    width: 11px;
    height: 11px;
    background: url("../images/play@2x.png") no-repeat;
    background-size: 23px 10px;
    margin-right: 5px;
}

.sg-header .btn:hover {
    background: #2277A9;
    color: #FFFFFF;
}

.sg-header .btn:hover span {
    background-position: -13px 0;
}

.sg-landing {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.sg-landing__left {
    width: 65.7246376811594%;
}

.sg-landing__right {
    width: 32.9710144927536%;
    margin-left: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

.sg-landing__block {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
}

.sg-landing__left .sg-landing__block {
    padding: 214px 20px 230px;
    text-align: center;
}

.sg-landing__left .sg-landing__block p {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.sg-landing__left .sg-landing__block .btn {
    color: #FFFFFF;
    background: #2277A9;
    padding: 18px 29px 19px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 2px;
    border-radius: 2px;
    border: solid 2px #2277A9;
}

.sg-landing__left .sg-landing__block .btn:hover {
    background: transparent;
}

.sg-landing__right .sg-landing__block {
    padding: 134px 0 104px;
    text-align: right;
}

.sg-landing__right .sg-landing__block:last-child {
    margin-top: auto;
}

.sg-landing__right .sg-landing__block h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    margin-bottom: 15px;
    margin-right: 15px;
    color: #FFFFFF;
}

.sg-landing__right .sg-landing__block .btn {
    color: #FFFFFF;
    background: #2277A9;
    padding: 8px 32px 10px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0;
    border: 2px solid #2277A9;
    border-radius: 2px 0 0 2px;
}

.sg-landing__right .sg-landing__block .btn span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background: url("../images/arrow@2x.png") no-repeat;
    background-size: 18px 10px;
    margin-right: 3px;
}

.sg-landing__right .sg-landing__block .btn:hover {
    background: transparent;
}

.sg-landing__block__logo {
    width: 535px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
    .sg-header {
        -webkit-box-orient: vertical;
           -moz-box-orient: vertical;
        -webkit-box-direction: normal;
           -moz-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .sg-header__logo {
        margin: 0 auto 25px;
    }

    .sg-header .btn {
        margin: 0 auto;
    }

    .sg-landing {
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }

    .sg-landing__left,
    .sg-landing__right {
        width: 100%;
    }

    .sg-landing__block {
        margin-bottom: 20px;
    }

    .sg-landing__left .sg-landing__block {
        padding: 160px 20px 180px;
    }
}