@charset "UTF-8";

article,
section,
aside,
hgroup,
nav,
header,
footer,
figure,
figcaption,
main {
    margin: 0;
    padding: 0;
    display: block;
    zoom: 1;
}
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body {
    min-height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #3c465f;
    font-size: 25px;
    line-height: 1.2;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: normal;
}
img {
    border: none;
    display: inline-block;
}
p {
    margin: 10px 0;
    padding: 0;
}
button,
a.button {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: bold;
    cursor: pointer;
    border: none;
    display: inline-block;
}

#container {
    margin: 0;
    padding: 0;
    min-height: 100%;
    flex-direction: row-reverse;
    display: flex;
}

#S24Section {
    padding: 2.25rem 3rem 2.25rem 0.75rem;
    color: #244460;
    text-align: right;
    background-color: #f0fcff;
    background-image: url("/assets/images/ma/s24_bg-1080px.jpg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    flex: 0 0 40.5%;
}

#S24Section h2 {
    margin: 0.5rem 0;
    padding: 0;
    font-size: 1.15rem;
    font-weight: normal;
}

#S24Section .logo {
    margin-bottom: 10.5rem;
}

#S24Section .logo img {
    width: 8.5rem;
    margin-top: 0.3rem;
}

#S24Section .button {
    margin: 0.9rem 0 0 0;
    padding: 0 0.65rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #fff;
    background: #13100d;
}

#MASection {
    padding: 2.25rem 0.75rem 2.25rem 2.5rem;
    color: #fff;
    background-color: #111;
    background-image: url("/assets/images/ma/ma_bg-1350px.jpg");
    background-position: 60% 60%;
    background-repeat: no-repeat;
    background-size: 125%;
    flex: 0 0 59.5%;
}

#MASection h1 {
    margin: 0.5rem 0 1.5rem 0;
    padding: 0;
    font-size: 1.8rem;
    font-weight: normal;
}

#MASection .logo {
    margin-bottom: 5rem;
}

#MASection .logo img {
    width: 10.8rem;
}

#MASection p.text {
    margin: 0;
    padding: 0;
    font-size: 1.15rem;
}

#MASection .button {
    margin: 1.4rem 0 0 0;
    padding: 0 0.9rem;
    font-size: 1.7rem;
    line-height: 1.8;
    color: #fff;
    text-decoration: none;
    background: #e30613;
}

#MASection .tartus {
    margin-top: 5rem;
}

#MASection .tartus img {
    width: 15rem;
}

@media (orientation: landscape) {
    html,
    body {
        font-size: calc(1.2vw + 1px);
    }

    #MASection {
        background-position: left calc(69% + 2vh) top calc(10% - 12vw);
    }
}

@media (orientation: portrait) {
    html,
    body {
        font-size: calc(1.8vw + 3px);
    }

    #container {
        flex-direction: column;
    }

    #S24Section {
        padding: 3rem 1rem 3rem 5rem;
        text-align: left;
        background-position: 50% 70%;
        flex: 1 0 85vw;
    }

    #S24Section .logo {
        margin-bottom: 3.1rem;
    }

    #S24Section .logo img {
        width: 12rem;
    }

    #S24Section .button {
        margin-bottom: 17rem;
    }

    #MASection {
        padding: 3rem 3rem 3.5rem 4rem;
        background-size: 110%;
        background-position: calc(70% + 5vw) calc(70% + 5vw);
        flex: 0 0 86vw;
    }

    #MASection .logo img {
        width: 15rem;
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 16/8) {
    #S24Section .logo {
        margin-bottom: 7.5rem;
    }

    #MASection {
        background-size: 120%;
    }

    #MASection .logo {
        margin-bottom: 4rem;
    }

    #MASection .tartus {
        margin-top: 4rem;
    }
}

@media (orientation: landscape) and (min-aspect-ratio: 16/7) {
    #S24Section .logo {
        margin-bottom: 6.5rem;
    }

    #MASection {
        background-size: 110%;
    }

    #MASection .logo {
        margin-bottom: 3rem;
    }

    #MASection .tartus {
        margin-top: 3rem;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1680px),
    (min--moz-device-pixel-ratio: 2) and (min-width: 1680px),
    (-o-min-device-pixel-ratio: 2/1) and (min-width: 1680px),
    (min-device-pixel-ratio: 2) and (min-width: 1680px),
    (min-resolution: 192dpi) and (min-width: 1680px),
    (min-resolution: 2dppx) and (min-width: 1680px) {
    #S24Section {
        background-image: url("/assets/images/ma/s24_bg-2160px.jpg");
    }

    #MASection {
        background-image: url("/assets/images/ma/ma_bg-2700px.jpg");
    }
}