﻿html, body {
    min-height: 100%;
    font-family: rift, sans-serif;
}

body {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #00496d;
    background-image: url(../images/start_bg_gradient.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
}

.container {
    position: relative;
}

.rift-42 {
    font-family: rift, sans-serif;
    font-size: 2.13em;
    color: #fff;
    line-height: 1.2em;
}

.helvetica-neue-20 {
    font-family: "Helvetica Neue LT W05_55 Roman", sans-serif;
    font-size: 1em;
    color: #fff;
    letter-spacing: 0.009em;
    line-height: 1.5em;
}

.helvetica-neue-10 {
    font-family: "Helvetica Neue LT W05_55 Roman", sans-serif;
    font-size: 0.5em;
    color: #fff;
}

.helvetica-neue-bold-10 {
    font-family: "Helvetica Neue LT W05_65 Medium", sans-serif;
    font-size: 0.5em;
    color: #fff;
    letter-spacing: 0.03em;
}

.content-header {
    text-align: center;
    position: relative;
}

.stars-top-left {
    position: absolute;
    background-image: url(../images/start_bg_stars_tl.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    width: 9em;
    height: 12em;
    left: -1.9em;
    top: -1.75em;
}

.stars-top-right {
    position: absolute;
    background-image: url(../images/start_bg_stars_tr.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% auto;
    width: 16.5em;
    height: 13em;
    right: -1.6em;
    top: -2.4em;
}

.content-body {
    text-align: center;
    border-top: solid 2px #fff;
}

.content-footer {
    text-align: center;
    margin-top: 8.4em;
    position: relative;
}

.stars-bottom-left {
    position: absolute;
    background-image: url(../images/start_bg_stars_bl.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
    width: 1.1em;
    height: 12em;
    left: -4em;
    bottom: 4.1em;
}

.stars-bottom-right {
    position: absolute;
    background-image: url(../images/start_bg_stars_br.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% auto;
    width: 6.75em;
    height: 13em;
    right: -0.86em;
    bottom: 5em;
}

.bg-cosmonaut {
    position: absolute;
    background-image: url(../images/start_bg_cosmonaut.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
    width: 23em;
    height: 21em;
    bottom: 0;
    opacity: 0.2;
    z-index: -1;
}

.caf-logo {
    display: inline-block;
    background-image: url(../images/caf_logo.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% auto;
    width: 15em;
    height: 5em;
}

.btn {
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.23em 1.15em;
    border-radius: 1em;
}

.btn-success {
    background-color: #ce1d32;
    border-color: #ce1d32;
}

    .btn-success:focus,
    .btn-success.focus,
    .btn-success:hover,
    .btn-success:active,
    .btn-success.active {
        background-color: #a41728 !important;
        border-color: #a41728 !important;
        outline: none !important;
    }

@media (max-width: 767px) {
    body {
        font-size: 3.5vw;
    }

    .container {
        padding: 3.5em 2em 0;
    }

    .trades-explorer-logo {
        font-size: 7vw;
    }

    .stars-bottom-left {
        left: -2em;
    }

    .bg-cosmonaut {
        left: -9em;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    .container {
        width: 750px;
        padding-top: 3.5em;
    }

    .trades-explorer-logo {
        font-size: 2.5em;
    }
}

@media (min-width: 1050px) {
    body {
        font-size: 22px;
    }

    .container {
        width: 990px;
        padding-top: 3.5em;
    }

    .trades-explorer-logo {
        font-size: 2.5em;
    }

    .content-body {
        padding: 0 1em;
    }
}

@media (min-width: 1315px) {
    body {
        font-size: 27px;
    }

    .container {
        width: 1230px;
        padding-top: 3.5em;
    }

    .trades-explorer-logo {
        font-size: 2.5em;
    }

    .content-body {
        padding: 0 1em;
    }
}

@media (min-width: 1650px) {
    body {
        font-size: 30px;
    }

    .container {
        width: 1565px;
        padding-top: 4.33em;
    }

    .trades-explorer-logo {
        font-size: 2.5em;
    }

    .content-body {
        padding: 0 4.75em;
    }
}
