/*  template for ОТП Банк "Свою историю пишешь ты" website"
    author: tg @ HERO[IN]MARKETING
*/

body {
    background-color: #101010;
    color: #fff;
    font-family: Circe, Arial, Helvetica, sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

a {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #fff;
    opacity: 0.6;
}

.navbar {
    width: 100%;
    z-index: 1;
}

.navbar a {
    margin: 1em auto 0;
}

.navbar-brand img,
.footer-logo img {
    width: 11em;
}

.hero {
    overflow: hidden;
    background: linear-gradient(0, #101010, 5%, transparent, 95%, #101010),
        url(/images/hero-bg2.jpg) center center no-repeat;
    background-size: cover;
    margin: -3.25em 0 0;
}

h1.heading {
    font-size: 1.2em;
    font-weight: 100;
    text-transform: uppercase;
    display: flex;
    min-height: 90vh;
}

h1 span {
    margin-top: calc(100vh - 50vw);
    margin-bottom: 0.5em;
}

.hero-img {
    position: relative;
    margin-top: -20%;
    left: -75%;
    max-width: 250%;
}

.hr {
    height: 3px;
    width: 60%;
    background: url(/images/texture_bubble.jpg) 100% 50%;
    position: relative;
    margin-bottom: 1em;
}

.intro p,
.outro p {
    line-height: 1.25em;
    font-size: 1.25em;
}

h2,
.big {
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1em;
    font-size: 2em;
}

.dialog {
    overflow-x: hidden;
}

.bubble {
    border: solid 1px white;
    border-radius: 5em;
    border-bottom-right-radius: 0;
    margin: 1em 5px 1em auto;
    padding: 1em 1.6em;
    text-align: right;
    width: fit-content;
    max-width: 19.25em;
    font-size: 1.25em;
}

.bubble-left {
    padding: 1.5em 1.7em;
    border-radius: 2em;
    border-bottom-left-radius: 0;
    border-color: silver;
    border-width: 2px;
    margin: 1em 5px;
    text-align: left;
}

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

.contacts,
.dresscode {
    max-width: none !important;
    overflow: hidden;
}

.dresscode {
    margin-bottom: 4em;
}

.contacts img {
    position: relative;
    left: -75%;
    max-width: 300%;
}

.dresscode img {
    position: relative;
    width: 100%;
}

.beige {
    color: #f9e2d7;
}

.grey {
    color: #a5a7a9;
}

.outro .big {
    margin: 1em auto 0;
}

footer {
    background: linear-gradient(#262a30, #1b1c21);
    text-align: center;
    font-weight: 200;
    padding: 2em 0em;
    font-size: 0.875em;
}

.footer-logo {
    opacity: 0.6;
}

.social a {
    width: ‭2.875em;
    height: 2.875em;
    display: inline-block;
    background: url(/images/ic_fb.svg) no-repeat;
    background-size: contain;
    margin: 2em 0.5em;
}

.social .vk {
    background: url(/images/ic_vk.svg) no-repeat;
    background-size: contain;
}

.social .in {
    background: url(/images/ic_inst.svg) no-repeat;
    background-size: contain;
}

@media (min-width: 768px) {
    .navbar {
        width: auto;
    }

    .navbar a {
        margin: 4.375em 8em;
    }

    .navbar-brand img,
    .footer-logo img {
        width: ‭15.625em;
        margin-left: auto;
    }

    .hero {
        margin-top: -13.5em;
    }

    .hero-img {
        left: calc(50% - 747.5px);
    }

    h1.heading {
        min-height: 100vh;
    }

    h1 span {
        margin-bottom: 0;
    }

    .intro,
    .outro {
        background: url(/images/pattern_2.png) 80vw top no-repeat;
        background-size: contain;
        min-height: 45vh;
    }

    .outro {
        padding: 0 15px;
    }

    .hr {
        height: 7px;
        width: 25%;
        margin-bottom: 3em;
    }

    .intro p {
        font-size: 1.75em;
        line-height: 1;
    }

    .dialog {
        background-image: url(/images/pattern_55.png), url(/images/elem.png),
            url(/images/pattern_66.png), url(/images/elemr.png);
        background-repeat: no-repeat;
        background-position: 0 20%, 0 55%, 100% 40%, 100% 82%;
    }

    .bubble {
        max-width: 60%;
        margin-bottom: 2em;
        font-size: 1.75em;
        line-height: 1.2;
        border-width: 2px;
        text-shadow: 0px 0px 17px rgba(0, 0, 0, 1);
    }

    .bubble-left {
        border-width: 4px;
    }

    .contacts img,
    .dresscode img {
        left: 0;
        max-width: 100%;
        margin: 1em auto;
    }

    .dresscode {
        margin-bottom: 4em;
    }

    .outro p {
        font-size: 1.8em;
        line-height: 1.8;
        margin-bottom: 0;
    }

    footer {
        text-align: initial;
        font-size: 1.4375em;
        padding: 1em 7% 2em;
    }

    footer .big {
        font-size: 1.4em;
    }

    .footer-logo {
        text-align: right;
        justify-content: space-between;
        flex-direction: column;
        display: flex;
    }

    .social a {
        margin: 0.2em;
    }
}

@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.25) {
    body {
        font-size: 0.8rem;
    }

    .intro .container {
        max-width: 75vw;
    }

    .intro,
    .outro {
        background: url(/images/pattern_2.png) 90vw top no-repeat;
        background-size: contain;
        min-height: 45vh;
    }

    .dialog {
        background-position: -20% 20%, 0 55%, 115% 40%, 100% 82%;
    }
}

@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body {
        font-size: 0.75rem;
    }

    .intro .container {
        max-width: 75vw;
    }

    .intro,
    .outro {
        background: url(/images/pattern_2.png) 90vw top no-repeat;
        background-size: contain;
        min-height: 45vh;
    }

    .dialog {
        background-position: -40% 20%, 0 55%, 133% 40%, 100% 82%;
    }
}

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

@font-face {
    font-family: "Circe";
    src: url("/fonts/Circe-Bold.eot");
    src: url("/fonts/Circe-Bold.eot?#iefix") format("embedded-opentype"),
        url("/fonts/Circe-Bold.woff2") format("woff2"),
        url("/fonts/Circe-Bold.woff") format("woff"),
        url("/fonts/Circe-Bold.ttf") format("truetype"),
        url("/fonts/Circe-Bold.svg#Circe Bold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Circe";
    src: url("/fonts/Circe-Light.eot");
    src: url("/fonts/Circe-Light.eot?#iefix") format("embedded-opentype"),
        url("/fonts/Circe-Light.woff2") format("woff2"),
        url("/fonts/Circe-Light.woff") format("woff"),
        url("/fonts/Circe-Light.ttf") format("truetype"),
        url("/fonts/Circe-Light.svg#Circe Light") format("svg");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Circe";
    src: url("/fonts/Circe-ExtraBold.eot");
    src: url("/fonts/Circe-ExtraBold.eot?#iefix") format("embedded-opentype"),
        url("/fonts/Circe-ExtraBold.woff2") format("woff2"),
        url("/fonts/Circe-ExtraBold.woff") format("woff"),
        url("/fonts/Circe-ExtraBold.ttf") format("truetype"),
        url("/fonts/Circe-ExtraBold.svg#Circe ExtraBold") format("svg");
    font-weight: 900;
    font-style: normal;
}

/* escape */

.social,
.hr {
    display: none;
}