/* ===================================================================
 * # hero
 *
 * ------------------------------------------------------------------- */
.s-hero {
    background: rgb(50,90,181);
background: radial-gradient(circle, rgba(50,90,181,1) 0%, rgba(255,255,255,1) 100%);
    width: 100%;
    text-align: center;
}

.s-hero__bg {
    background-image: url(../images/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 36.5vw;
}

.s-hero__bg::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    opacity: .25;
}

.s-hero__bg .gradient-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, black), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(180deg, black 10%, rgba(0, 0, 0, 0) 100%);
    opacity: .35;
}


/* ------------------------------------------------------------------- 
 * ## hero content
 * ------------------------------------------------------------------- */
.s-hero__content {
    padding-top: 50px;
    padding-bottom: 50px;
}

.s-hero__content h1 {
  color: #204BAE;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}


.t-button {
    background: #204BAE;
    padding: 16px 30px;
    border-radius: 10px;
    font-size: 20px;
    color: white;
    text-decoration:none;
}

/* hero content about
 * ----------------------------------------------- */
.s-hero__content-about {
    font-family: "Golos Text", serif;
    color: white;
    font-size: 24px;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}


.s-hero__content-about p {
    margin-bottom: 80px;
}

.qr {
    
    width: 175px;
    display: inline-block;
    margin-top: 100px;
}

/* hero content social
 * ----------------------------------------------- */
.s-hero__content-social {
    display: inline-block;
    font-size: 1.8rem;
    line-height: var(--vspace-1);
}

.s-hero__content-social a {
    color: white;
    margin-right: 1.2rem;
}

.s-hero__content-social a:hover, 
.s-hero__content-social a:focus {
    color: var(--color-1-light);
}

.s-hero__content-social a:last-child {
    margin-right: 0;
}


/* ------------------------------------------------------------------- 
 * ## hero video
 * ------------------------------------------------------------------- */
.s-hero__video {
    position: absolute;
    right: 10.4rem;
    bottom: 20vh;
}

.s-hero__video svg {
    height: 1.4rem;
    width: 1.4rem;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    left: 50%;
    top: 50%;
}

.s-hero__video svg path {
    fill: white;
}

.s-hero__video-link {
    display: block;
    height: 9.6rem;
    width: 9.6rem;
    background-color: var(--color-1);
    -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    color: white;
    border-radius: 100%;
    position: relative;
}

.s-hero__video-link:hover, 
.s-hero__video-link:focus {
    background-color: var(--color-gray-19);
    outline: 0;
}

.s-hero__video-text {
    display: none;
}


/* ------------------------------------------------------------------- 
 * ## hero scroll
 * ------------------------------------------------------------------- */
.s-hero__scroll {
    position: absolute;
    left: 6vw;
    bottom: 0;
    -webkit-transform: rotate(90deg) translateX(-200px);
    transform: rotate(90deg) translateX(-200px);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.s-hero__scroll-link {
    display: inline-block;
    font-family: var(--font-2);
    font-weight: 300;
    font-size: 9px;
    line-height: 3.2rem;
    height: 3.2rem;
    text-transform: uppercase;
    letter-spacing: .4em;
    text-align: left;
    vertical-align: middle;
    color: var(--color-text);
    position: relative;
}

.s-hero__scroll-link:hover, 
.s-hero__scroll-link:focus {
    color: white;
}


/* -------------------------------------------------------------------
 * ## animate intro content
 * ------------------------------------------------------------------- */
html.ss-preload .s-hero__content {
    opacity: 0;
}

html.ss-loaded .s-hero__content {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

html.no-csstransitions .s-hero__content {
    opacity: 1;
}


/* ------------------------------------------------------------------- 
 * ## animations
 * ------------------------------------------------------------------- */

/* fade in */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* fade in left */
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* fade out */
@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}


/* ------------------------------------------------------------------- 
 * responsive:
 * content
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1600px) {
    .s-hero__content {
        max-width: 900px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1400px) {
    .s-hero__content {
        max-width: 1000px;
    }
    .s-hero__content h1 {
        
    }
    .s-hero__content-about {
        
    }
    .s-hero__video-link {
        
    }
}

@media screen and (max-width: 1200px) {
    .s-hero__content {
        max-width: 900px;
    }
}

@media screen and (max-width: 1100px) {
    .s-hero__content {
        max-width: 800px;
    }
    .s-hero__content h1 {
    
    }

    .s-hero__content-about p {
    
    font-size: 20px;
}
}

@media screen and (max-width: 1000px) {
    .s-hero__content {
        max-width: 700px;
    }
    .s-hero__content-about {
        
    }
    .s-hero__content-about::before {
        display: none;
    }
    
}

@media screen and (max-width: 900px) {
   
    .s-hero__content {
        max-width: 600px;
    }
    
}

@media screen and (max-width: 800px) {
    .s-hero__content {
      margin: 0px 30px;
    }

    .s-hero__content h1 {
font-size: 48px!important;
    }


    
}

@media screen and (max-width: 700px) {
    .s-hero__content h1 {

    }
    .s-hero__content-about {

    }
    .s-hero__content-social, .s-hero__video {

    }
}

@media screen and (max-width: 600px) {
    .s-hero__content h1 {

    }
    .s-hero__content-about {

    }
    .s-hero__content-about br {

    }
    .s-hero__scroll {

    }
    .s-hero__video {

    }
}

@media screen and (max-width: 500px) {

    .s-hero__content-about {

    }
}

@media screen and (max-width: 400px) {
    .s-header__logo {

    }
    .s-header__menu-toggle {

    }
    .s-hero__content h1::before {

    }
    .s-hero__content {

    }
    .s-hero__content-about {
    }

}

@media screen and (max-width: 360px) {
    .s-hero__scroll {

    }
}



    @font-face {
    font-family: 'TT Bluescreens Trial Regular';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Regular'), url('TT Bluescreens Trial Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Italic'), url('TT Bluescreens Trial Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Thin';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Thin'), url('TT Bluescreens Trial Thin.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Thin Italic'), url('TT Bluescreens Trial Thin Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial ExtraLight'), url('TT Bluescreens Trial ExtraLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial ExtraLight Italic'), url('TT Bluescreens Trial ExtraLight Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Light';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Light'), url('TT Bluescreens Trial Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Light Italic'), url('TT Bluescreens Trial Light Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Medium';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Medium'), url('TT Bluescreens Trial Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Medium Italic'), url('TT Bluescreens Trial Medium Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial DemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial DemiBold'), url('TT Bluescreens Trial DemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial DemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial DemiBold Italic'), url('TT Bluescreens Trial DemiBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Bold';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Bold'), url('TT Bluescreens Trial Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Bold Italic'), url('TT Bluescreens Trial Bold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial ExtraBold'), url('TT Bluescreens Trial ExtraBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial ExtraBold Italic'), url('TT Bluescreens Trial ExtraBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Black';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Black'), url('TT Bluescreens Trial Black.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Black Italic'), url('TT Bluescreens Trial Black Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trial Variable Regular';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trial Variable Regular'), url('TT Bluescreens Trial Variable.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Rg';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Rg'), url('TT Bluescreens Trial Condensed Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd It'), url('TT Bluescreens Trial Condensed Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Th';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Th'), url('TT Bluescreens Trial Condensed Thin.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Th It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Th It'), url('TT Bluescreens Trial Condensed Thin Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd XLt';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd XLt'), url('TT Bluescreens Trial Condensed ExtraLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd XLt It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd XLt It'), url('TT Bluescreens Trial Condensed ExtraLight Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Lt';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Lt'), url('TT Bluescreens Trial Condensed Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Lt It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Lt It'), url('TT Bluescreens Trial Condensed Light Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Md';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Md'), url('TT Bluescreens Trial Condensed Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Md It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Md It'), url('TT Bluescreens Trial Condensed Medium Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Db';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Db'), url('TT Bluescreens Trial Condensed DemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Db It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Db It'), url('TT Bluescreens Trial Condensed DemiBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Bd';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Bd'), url('TT Bluescreens Trial Condensed Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Bd It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Bd It'), url('TT Bluescreens Trial Condensed Bold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd XBd';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd XBd'), url('TT Bluescreens Trial Condensed ExtraBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd XBd It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd XBd It'), url('TT Bluescreens Trial Condensed ExtraBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Blc';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Blc'), url('TT Bluescreens Trial Condensed Black.woff') format('woff');
    }
    

    @font-face {
    font-family: 'TT Bluescreens Trl Cnd Blc It';
    font-style: normal;
    font-weight: normal;
    src: local('TT Bluescreens Trl Cnd Blc It'), url('TT Bluescreens Trial Condensed Black Italic.woff') format('woff');
    }

    .logo-b {
        width: 228px;
    }