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

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

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

}

html,
body {
    height: 100%;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}



/*link*/

a:visited {
    color: #5881b1;
    outline: none !important;
}

a:hover {
    outline: 0;
    text-decoration: underline;
    outline: none !important;
    opacity: 0.9;
}


img {
    width: 100% \9;
    max-width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.row.nomargin {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media only screen and (min-width: 992px) {

    .nogutter > [class*='col-'],
    .no-gutter > [class*='col-'] {
        padding-right: 0;
        padding-left: 0;
    }
}


@media and (max-width: 1920px) {
    .container {
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
}

@media and (min-width: 1921px) {
    .container {
        max-width: 1920px !important;
    }
}

body {
    font-family: 'secretwurps_reg', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    color: #231f20;
    white-space: normal;
    word-wrap: break-word;
}

@media only screen and (max-width: 991px) {
    body {
        font-size: 20px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    padding: 0;
    line-height: 1.1;
}

h1 {
    font-family: 'shaka_powregular', Arial, sans-serif;
    font-size: 88px;
    line-height: 1;
    margin-bottom: 20px;
    color: #5780ae;
}

@media only screen and (max-width: 579px) {
    h1 {
        font-size: 36px;
        margin: 20px 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 {
        font-size: 60px;
        margin: 20px 0;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1439px) {
    h1 {
        font-size: 70px;
    }
}

@media only screen and (min-width: 580px) and (max-width: 767px) {
    h1 {
        font-size: 40px;
        margin: 20px 0;
    }
}

h2 {
    font-family: 'secretwurps_bi', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 0px;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    h2 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h2 {
        font-size: 18px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1439px) {
    h2 {
        font-size: 20px;
    }
}

button,
.btn {
    cursor: pointer;
    border-radius: 0;
}

.wrapper {
    height: 100vh;
    width: 100%;
    max-width: 100%;
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: cover;
}

@media only screen and (max-width: 579px) {
    .wrapper {
        background: none;
    }
}


header {
    max-width: 840px;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0 20px 0;

}

.slider {
    position: relative;
    margin: 0 auto;
    width: 786px;
    height: 480px;
    background: url(../img/bg-slider.png) no-repeat center center;
    background-size: contain;
}

@media only screen and (max-width: 579px) {
    .slider {
        width: 100%;
        height: auto;
        background: #fff;
    }
}

@media only screen and (min-width: 580px) and (max-width: 991px) {
    .slider {
        width: 97%;
        height: auto;
        background: #fff;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1439px) {
    .slider {
        width: 647px;
        height: auto;
        position: relative;
    }
}


.slider .inner {
    margin: auto;
    width: 715px;
    height: auto;
    position: relative;
}

@media only screen and (max-width: 579px) {
    .slider .inner {
        padding: 0;
        width: auto;
        height: auto;
        background: #fff;
    }
}

@media only screen and (min-width: 580px) and (max-width: 991px) {
    .slider .inner {
        padding: 0 20px;
        border: 4px solid #000;
        width: auto;
        height: auto;
        background: #fff;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1439px) {
    .slider .inner {
        width: 589px;

    }

}

.slider .inner img {
    margin: 20px 0;
}

.slick-next,
.slick-prev {
    position: absolute;
    top: 40%;
    width: 174px;
    height: 76px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    border: none;
    z-index: 1;
}

@media only screen and (max-width: 579px) {
    .slick-next,
    .slick-prev {
        width: 60px;
        height: auto;
        z-index: 9;
        top: 100%;
    }
}

@media only screen and (min-width: 580px) and (max-width: 991px) {
    .slick-next,
    .slick-prev {
        width: 87px;
        height: 38px;
        z-index: 9;
    }
}

.slick-next:hover,
.slick-prev:hover {
    background-image: url(../img/arrow-hover.svg);
}

.slick-prev {
    left: -190px;
    background-image: url(../img/arrow.svg);
    transform: scaleX(-1);
}


@media only screen and (min-width: 320px) and (max-width: 991px) {
    .slick-prev {
        left: -2%;
    }
}

.slick-next {
    right: -190px;
    background-image: url(../img/arrow.svg);

}

@media only screen and (min-width: 320px) and (max-width: 991px) {
    .slick-next {
        right: -2%;
    }
}

.btm-links {
    width: 60%;
    height: 285px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
}

@media only screen and (min-width: 320px) and (max-width: 992px) {
    .btm-links {
        width: 100%;
    }
}



@media only screen and (min-width: 992px) and (max-width: 1440px) {
    .btm-links {
        width: 100%;
        height: 100%;

    }
}

.btm-links > div {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.btm-links-left {
    background-image: url(../img/btm-links-left.png);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 253px;
    height: 269px;
}

@media only screen and (max-width: 579px) {
    .btm-links-left {
        height: 30%;
        width: 30%;
    }

}


@media only screen and (min-width: 580px) and (max-width: 767px) {
    .btm-links-left {
        height: 80%;
    }
}


.btm-links-right {
    background-image: url(../img/btm-links-right.png);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 326px;
    height: 282px;
}

@media only screen and (max-width: 579px) {
    .btm-links-right {
        height: 30%;
        width: 30%;
    }

}

@media only screen and (min-width: 580px) and (max-width: 767px) {
    .btm-links-right {
        height: 80%;
    }
}

.bubble1 {
    width: 507px;
    height: auto;
    position: absolute;
    top: auto;
    bottom: 13%;
    left: 180px;
}

@media only screen and (max-width: 767px) {
    .bubble1 {
        width: 90%;
        left: 0;
        top: 20%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bubble1 {
        width: 50%;
        bottom: 60%;
        top: auto;
        left: 25%
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bubble1 {
        width: 50%;
        bottom: 15%;
        top: auto;
        left: 25%
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .bubble1 {
        width: 25%;
        top: 2%;
        left: 1%
    }
}

@media only screen and (min-width: 1536px) and (max-width: 1919px) {
    .bubble1 {
        bottom: 50%;
    }
}

@media only screen and (min-width: 1920px) {
    .bubble1 {
        bottom: 60%;
    }
}

.bubble2 {
    width: 575px;
    height: auto;
    position: absolute;
    top: auto;
    bottom: 12%;
    right: 180px;
}

@media only screen and (max-width: 767px) {
    .bubble2 {
        width: 90%;
        top: 42%;
        right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bubble2 {
        width: 50%;
        bottom: 40%;
        top: auto;
        right: 25%
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bubble2 {
        width: 50%;
        bottom: 10%;
        top: auto;
        right: 25%
    }
}


@media only screen and (min-width: 1200px) and (max-width: 1439px) {
    .bubble2 {
        width: 25%;
        top: 2%;
        right: 1%;
    }
}

@media only screen and (min-width: 1536px) and (max-width: 1919px) {
    .bubble2 {
        bottom: 30%;
    }
}

@media only screen and (min-width: 1920px) {
    .bubble2 {
        bottom: 40%;
    }
}

.bubble1:hover,
.bubble2:hover {
    opacity: 0.9;
}

.logo-kv {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 140px;
    height: auto;
}

@media only screen and (max-width: 579px) {
    .logo-kv {
        width: 30%;
    }

}