@font-face {

    font-family: 'Intro-Book';

    src: local('Intro Book'), local('Intro-Book'),

        url('/assets/fonts/Intro-Book.woff2') format('woff2'),

        url('/assets/fonts/Intro-Book.woff') format('woff'),

        url('/assets/fonts/Intro-Book.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

  }

@font-face {

    font-family: 'Intro-Bold';

    src: local('Intro Bold'), local('Intro-Bold'),

        url('/assets/fonts/Intro-Bold.woff2') format('woff2'),

        url('/assets/fonts/Intro-Bold.woff') format('woff'),

        url('/assets/fonts/Intro-Bold.ttf') format('truetype');

    font-weight: 700;

    font-style: normal;

  }

@font-face {

    font-family: 'Intro-Black';

    src: local('Intro Black'), local('Intro-Black'),

        url('/assets/fonts/Intro-Black.woff2') format('woff2'),

        url('/assets/fonts/Intro-Black.woff') format('woff'),

        url('/assets/fonts/Intro-Black.ttf') format('truetype');

    font-weight: 900;

    font-style: normal;

  }

/* Нулёвые стили */

* {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



li {

    text-decoration: none;

    list-style: none;

}



a,

input,

button {

    outline: none;

    text-decoration: none;

}

/* Суперстили */

.displayFlex{

    display: flex;

}

.displayInlineFlex{

    display: inline-flex;

}

.alignItemsCenter{

    align-items: center;

}

.alignStart{

    align-items: flex-start;

}

.alignEnd{

    align-items: end;

}

.spaceBetween{

    justify-content: space-between;

}

.spaceAround{

    justify-content: space-around;

}

.spaceEnd{

    justify-content: flex-end;

}

.spaceCenter{

    justify-content: center;

}

.flexColumn{

    flex-direction: column;

}

.flexWrap{

    flex-wrap: wrap;

}

.textCenter{

    text-align: center;

}

/* Стили страницы */

body{

    background: #000000;

    color: #FFFFFF;

    font-size: 16px;

    line-height: 20px;

    overflow-x: hidden;

    font-family: 'Intro-Book', sans-serif;

    position: relative;

}

body.open-menu{

    overflow-y: hidden;

}

.mobileMenuBg{

    position: fixed;

    top: 0;

    background: #000000;

    width: 100%;

    height: 100vh;

    z-index: 4;

    left: -100%;

    transition: all 0.4s;

}

.container{

    max-width: 1320px;

    width: 100%;

    margin: 0 auto;

}

.container2{

    max-width: 1180px;

    width: 100%;

    margin: 0 auto;

}

/* Шапка */

.headerInner{

    height: 100px;

    position: relative;

}

.navLink{

    padding: 18px 0;

    margin-right: 30px;

    font-family: 'Intro-Black', sans-serif;

    color: #FFFFFF;

    text-transform: uppercase;

    font-size: 17px;

    position: relative;

}

.navLink:nth-last-child(1){

    margin-right: 0;

}

.navLink span{

    position: absolute;

    height: 5px;

    width: 100%;

    bottom: 0;

    background: #BE0000;

    left: -50%;

    opacity: 0;

    transition: all 0.4s;

}

.navLink.active span, .navLink:hover span{

    left: 0;

    opacity: 1;

}

.headerLogo{

    margin-top: -10px;

}

.headerBtn{

    border-radius: 4px;

    width: 193px;

    height: 47px;

    font-family: 'Intro-Black', sans-serif;

    font-size: 17px;

    text-transform: uppercase;

    transition: all 0.4s;

    opacity: 1;

}

.headerBtn:hover{

    opacity: 0.8;

}

.btnText{

    width: 100%;

}

.btnLogo{

    border-radius: 4px;

    height: 100%;

    min-width: 47px;

    max-width: 47px;

}

.headerBtn.log{

    background: linear-gradient( 90deg, rgb(135,0,0) 0%, rgb(192,0,0) 100%);

    color: #FFFFFF;

    margin-right: 7px;

}

.headerBtn.log .btnLogo{

    background: #B60000;

}

.headerBtn.cab{

    width: 320px;

    background: linear-gradient( 90deg, rgb(135,0,0) 0%, rgb(192,0,0) 100%);

    color: #FFFFFF;

}

.headerBtn.cab .btnLogo{

    background: #d40000;

}

.headerBtn.log .btnText{

    margin-left: -25px;

}

.headerBtn.reg{

    background: linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(169,168,168) 100%);

    color: #000000;

}

.headerBtn.reg .btnLogo{

    background: linear-gradient( 58deg, rgb(255,255,255) 0%, rgb(169,168,168) 100%);

}

.headerBtn.reg .btnText{

    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);

}

/* Hero */

.hero{

    padding-top: 150px;

    padding-bottom: 300px;

    background: linear-gradient(90deg, rgba(180,0,0,1) 0%, rgba(136,0,0,1) 50%);

    position: relative;

    overflow-y: hidden;

}

.heroGame{

    background-color: rgb(0, 0, 0);

    box-shadow: 5px 8px 0px 0px rgba(0, 0, 0, 0.37);

    font-size: 22px;

    font-family: 'Intro-Black', sans-serif;

    text-transform: uppercase;

    width: 332px;

    height: 59px;

}

.heroBg1{

    position: absolute;

    left: 0;

    top: 0;

    content: '';

    height: 245px;

    width: 313px;

    z-index: 0;

}

.heroBg2{

    position: absolute;

    right: 0;

    bottom: -230px;

    content: '';

    z-index: 0;

    width: 980px;

}

.hero .container2{

    position: relative;

    z-index: 1;

}

.heroTitle{

    font-family: 'Intro-Black', sans-serif;

    font-size: 70px;

    margin-top: 55px;

    text-transform: uppercase;

    display: block;

    line-height: 70px;

}

.heroDop{

    font-size: 30px;

    line-height: 30px;

    margin-top: 20px;

}

.heroDop span{

    font-family: 'Intro-Bold', sans-serif;

    position: relative;

}

.heroDop span::before{

    position: absolute;

    height: 2px;

    width: 100%;

    content: '';

    background: #edd0d0;

    left: 0;

    bottom: 0;

}

.heroSlogan{

    font-size: 25px;

    margin-top: 55px;

    line-height: 30px;

    max-width: 380px;

}

.heroSlogan span{

    font-family: 'Intro-Bold', sans-serif;

}

.heroLine{

    display: block;

    width: 84px;

    height: 6px;

    background: #FFFFFF;

    margin-top: 15px;

    margin-bottom: 35px;

}

.heroBtn{

    width: 276px;

    height: 68px;

    border-radius: 4px;

    background: #FFFFFF;

    color: #000000;

    font-family: 'Intro-Black', sans-serif;

    text-transform: uppercase;

    box-shadow: 6px 8px 0px 0px rgba(0, 0, 0, 0.37);

    font-size: 27px;

    transition: all 0.4s;

    margin-right: 40px;

}

.heroBtn:hover{

    background: #000000;

    color: #FFFFFF;

}

.yotubeBtn{

    transition: all 0.4s;

    width: 64px;

    height: 64px;

    border-radius: 8px;

    background: #ff0000;

    box-shadow: -15px 15px 0px 0px rgba(205, 0, 0, 1);

}

.yotubeBtn:hover{

    background: #000000;

    box-shadow: -15px 15px 0px 0px rgba(0, 0, 0, 0.37);

}

.heroSocials{

    margin-top: 40px;

}

.socialLink{

    width: 50px;

    height: 50px;

    margin-right: 10px;

    background: #000000;

    border-radius: 8px;

    transition: all 0.4s;

}

.socialLink:hover{

    background: #cd0000;

}

.heroslider{

    position: absolute;

    top: 160px;

    right: 20px;

    width: 900px;

    overflow-x: hidden;

    z-index: 2;

}

.herosliderItem{

    width: 100%;

    display: inline-block;

}

.slideName{

    font-family: 'Intro-Black', sans-serif;

    font-size: 20px;

    line-height: 20px;

    text-transform: uppercase;

    margin-bottom: 8px;

}

.slideClass{

    font-size: 16px;

    margin-left: 11px;

    line-height: 16px;

}

.slideLine{

    width: 40px;

    height: 6px;

    display: block;

    background: #FFFFFF;

    margin-top: 10px;

    margin-left: 11px;

}

.slideTop{

    max-width: 250px;

    width: 100%;

    margin-left: auto;

    margin-right: 180px;

}

.sliderImage{

    width: 100%;

    margin-top: 60px;

}

.slick-arrow{

    font-size: 0;

    outline: none;

    border: none;

    width: 37px;

    height: 34px;

    position: absolute;

    top: 0;

    z-index: 3;

    cursor: pointer;

}

.slick-arrow path{

    transition: all 0.4s;

}

.slick-arrow:hover path, .slick-disabled path{

    fill: #000000;

}

.slick-prev {

    left: 46%;

}

.slick-next {

    right: 20%;

}

/* Road */

.road{

    position: relative;

    padding-bottom: 150px;

}

.statInner{

    margin-top: -170px;

    margin-bottom: 95px;

}

.statTitle{

    padding: 18px 70px;

    background: #000000;

    border-radius: 30px;

    text-transform: uppercase;

    font-family: 'Intro-Black', sans-serif;

    font-size: 25px;

    line-height: 25px;

    display: inline-block;

    margin-left: 100px;

}

.statRow{

    border-radius: 115px;

    background: url(/image/roadstat.png);

    box-shadow: 0px 5px 65px 0px rgba(0, 0, 0, 0.75);

    max-width: 1170px;

    width: 100%;

    height: 230px;

}

.statItem{

    max-width: 330px;

    width: 100%;

}

.statCount{

    font-size: 60px;

    font-family: 'Intro-Bold', sans-serif;

    line-height: 60px;

    margin-bottom: 14px;

}

.statName{

    font-size: 21.4px;

    line-height: 22px;

    font-family: 'Intro-Book', sans-serif;

    margin-bottom: 20px;

}

.statLine{

    background: #FFFFFF;

    width: 64px;

    height: 6px;

    display: block;

}

.statItemRight{

    margin-left: 40px;

}

.roadTitle{

    font-family: 'Intro-Black', sans-serif;

    text-transform: uppercase;

    font-size: 55px;

    line-height: 55px;

    margin-top: 140px;

    margin-bottom: 15px;

}

.roadTitle span{

    color: #D60000;

}

.roadText{

    margin-bottom: 25px;

    font-size: 18px;

    line-height: 18px;

}

.roadLine{

    height: 6px;

    width: 120px;

    display: block;

    background: #FFFFFF;

}

.roadItem{

    width: 260px;

    height: 320px;

    border-radius: 8px;

    margin-right: 50px;

    position: relative;

    text-align: center;

    padding-top: 20px;

    margin-top: 85px;

    box-shadow: 17px 17px 0px 0px rgba(70, 0, 0, 1);

    z-index: 2;

}



.tableBtn{

    font-family: 'Intro-Bold', sans-serif;

    width: 100%;

    background: #a50000;

    color: #ffffff;

    cursor: pointer;

    text-align: center;

    font-size: 19px;

    padding: 13px 0;

    box-shadow: 4px 4px 0px 0px rgba(70, 0, 0, 1);

    transition: all 0.4s;

    outline: none;

    border: none;

}

.refbackBtn{

    max-width: 200px;

}

.tableBtn:hover{

    opacity: 0.8;

}

.popupResponse{

    position: fixed;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 12;

    display: none;

}

.popupResponseBg{

    background: rgba(32, 32, 32, 0.5);

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

}

.popupResponseItem{

    position: fixed;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    background: #FFFFFF;

    padding: 25px;

    width: 310px;

    border-radius: 5px;

    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);

    text-align: center;

}

.popupResponseText{

    font-size: 18px;

    margin-bottom: 15px;

    line-height: 24px;

    color: rgba(0, 0, 0, 0.65);

    font-family: 'Intro-Bold', sans-serif;

}

.popupResponseItem .tableBtn{

    margin: 0 auto; 

}

.roadItem:nth-child(1){

    background: url(/image/road/road1.png);

}

.roadItem:nth-child(2){

    background: url(/image/road/road2.png);

}

.roadItem:nth-child(3){

    background: url(/image/road/road3.png);

    margin-right: 0;

}

.roadName{

    text-transform: uppercase;

    font-size: 26px;

    font-family: 'Intro-Black', sans-serif;

    line-height: 26px;

    margin-top: 20px;

    margin-bottom: 15px;

}

.roadItemText{

    font-size: 17.4px;

    line-height: 24px;

    max-width: 190px;

    margin: 0 auto;

}

.roadItemText a {

    color: #fff;

    text-decoration: underline;

}

.roadItemText a:hover {

    color: #ff9191;

    text-decoration: underline;

}

.roadNumber{

    position: absolute;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: #000000;

    font-family: 'Intro-Black', sans-serif;

    font-size: 24px;

    top: 10px;

    right: 12px;

}

.roadFon{

    position: absolute;

    right: 0;

    bottom: 10px;

}

/* Howmake */

.howmakeFon{

    position: absolute;

    width: 100%;

    left: 0;

    top: -220px;
    max-height: 1200px;

}

.howmake{

    position: relative;

    padding-top: 100px;

    padding-bottom: 300px;

}

.howmake .container2{

    position: relative;

}

.howmakeTitle{

    font-family: 'Intro-Black', sans-serif;

    font-size: 44px;

    line-height: 44px;

    position: relative;

    text-transform: uppercase;

    display: inline-block;

}

.howmakeTitle:before{

    position: absolute;

    content: '';

    width: 869px;

    height: 145px;

    left: 50%;

    top: 50%;

    background: url(/image/howmaketitle.png);

    transform: translate(-50%,-50%);

    z-index: 1;

}

.howmakeTitle span{

    position: relative;

    z-index: 2;

}

.howmakeText{

    margin-top: 65px;

    font-size: 16px;

    line-height: 24px;

    max-width: 580px;

}

.howmakeGift{

    font-family: 'Intro-Bold', sans-serif;

    font-size: 18px;

    line-height: 24px;

    padding-top: 20px;

    margin-bottom: 40px;

}

.howmakeGift span{

    color: #000000;

    position: relative;

}

.howmakeGift span:before{

    position: absolute;

    content: '';

    width: 100%;

    height: 1px;

    background: #000000;

    left: 0;

    bottom: 0;

}

.howmakeCc{

    position: absolute;

    right: 0;

    top: -110px;

    z-index: 0;

}

.howmakeCar{

    position: absolute;

    z-index: 1;

    right: 40px;

    top: 250px;

}

/* Answer */

.answer{

    padding-bottom: 60px;

}

.answerItem{

    padding: 15px;

    background: #a20000;

    max-width: 840px;

    margin: 0 auto;

    margin-bottom: 20px;

    border-radius: 40px; 

    border: 8px solid #4f0000;

}

.answerHeader{

    cursor: pointer;

    transition: all 0.4s;

}

.answerHeader:hover{

    opacity: 0.7;

}

.answerHeader span{

    margin-left: 20px;

    font-size: 20px;

    line-height: 20px;

    font-family: 'Intro-Bold', sans-serif;

}

.answerContent{

    font-size: 18px;

    line-height: 24px;

    display: none;

    margin-top: 10px;

}

.answerTop{

    position: relative;

    width: 100%;

    width: 560px;

    height: 560px;

    display: flex;

    margin: 0 auto;

    margin-bottom: 80px;

}

.answerBack1{

    position: absolute;

    width: 560px;

    height: 560px;

    z-index: 0;

    background: #750000;

    border-radius: 50%;

    border: 45px solid #4f0000;

}

.answerBg{

    position: absolute;

    bottom: 0;

}

.answerText{

    text-align: center;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 100px;

    z-index: 1;

}

.answerTitle{

    text-transform: uppercase;

    font-size: 40px;

    line-height: 40px;

    font-family: 'Intro-Black', sans-serif;

}

.answerDop{

    font-size: 18px;

    margin-top: 10px;

    margin-bottom: 20px;

}

/* Footer */

.footer{

    padding-top: 20px;

}

.footerRow{

    margin-bottom: 50px;

}

.footerDesc{

    font-size: 18px;

    line-height: 28px;

    margin-top: 35px;

    opacity: 0.25;

    text-align: justify;

}

.footerColumn:nth-child(1){

    max-width: 42%;

    width: 100%;

}

.footerColumn:nth-child(2){

    max-width: 54%;

    width: 100%;

}

.footerColumn .navLink{

    margin-right: 0;

    font-size: 16px;

}

.footerColumn .nav{

    display: flex;

    justify-content: space-between;

}

.police{

    font-size: 18px;

    line-height: 28px;

    padding: 10px 26px;

    background: #101010;

    border-radius: 8px;

}

.police a {

    color: #be0000;

}

.plug{

    padding: 40px 40px;

    border: 1px solid rgb(135,0,0);

    font-size: 18px;

    line-height: 28px;

}

.plug span{

    opacity: 0.25;

}

/* Main */

.main{

    background: url(/image/mainBg.png);

    background-repeat: no-repeat;

    padding-top: 125px;

    padding-bottom: 40px;

    background-position: center top;

}

.main.stat{

    background-position: center -130px;

}

.mainTitle{

    text-transform: uppercase;

    font-family: 'Intro-Black', sans-serif;

    text-align: center;

    font-size: 60px;

    line-height: 60px;

    padding-bottom: 115px;

}

.mainInner{

    background: #000000;

    border-radius: 20px;

}

.mainInner.rules{

    padding: 30px;

}

.rulesInner{

    padding: 30px;

    border-radius: 20px;

    background: #150d0d;

}

.ruletTitle{

    margin: 20px 0;

    color: #bebebe;

    font-family: 'Intro-Bold', sans-serif;

    font-size: 25px;

    line-height: 28px;

}

.rulesText{

    color: #bebebe;

    font-size: 20px;

    line-height: 36px;

}

.ruletTitle:nth-child(1){

    margin-top: 0;

}

.mainText{

    font-size: 18px;

    font-family: 'Intro-Bold', sans-serif;

    line-height: 30px;

    color: #d6d6d6;

    padding: 40px;

}

.mainColumn:nth-child(1){

    max-width: calc(65% - 40px);

    width: 100%;

}

.mainColumn:nth-child(2){

    max-width: 35%;

    width: 100%;

}

.mainBlob{

    font-size: 35px;

    line-height: 35px;

    font-family: 'Intro-Black', sans-serif;

    color: #d6d6d6;

    margin-bottom: 30px;

}

.mainTime{

    height: 80px;

}

.mainTime{

    color: #d6d6d6;

    background: #101010;

    border-left: 8px solid #a20000;

    font-size: 20px;

    line-height: 26px;

    max-width: 300px;

    margin-bottom: 25px;

    margin-left: 15px;

}

.mainTime span span{

    color: #a20000;

}

.customTableHead{

    background: #101010;

    height: 60px;

    border-radius: 8px 8px 0px 0px;

}

.customTableItem{

    font-size: 18px;

    line-height: 18px;

}
.customTableItem a {
    color: #ffffff;
}
.customTableItem a:hover {
    color: #ff2323;
}
.customTableHead .customTableItem{

    font-size: 22px;

    line-height: 22px;

    font-family: 'Intro-Bold', sans-serif;

    color: #d6d6d6;

}

.mainRow{

    margin-bottom: 40px;

}

.customTable.size3 .customTableItem{

    width: calc(100% / 3);

    text-align: center;

}

.customTable.size2 .customTableItem{

    width: calc(100% / 2);

    text-align: center;

}

.size31 .customTableItem{

    width: calc((100% - 90px)/3);

}

.size31 .customTableLine .customTableItem{

    padding-left: 10px;

}

.size31 .customTableItem:nth-child(1){

    width: 90px;

    padding: 0;

}

.customTableLine{

    height: 48px;

    background: #191212;

    margin-top: 3px;

}

.tableNumber{

    width: 29px;

    height: 29px;

    position: relative;

}

.tableNumber img{

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0;

}

.tableNumber span{

    position: absolute;

    font-family: 'Intro-Black', sans-serif;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    font-size: 18px;

    line-height: 18px;

}

.tabHeader{

    background: #191212;

    color: rgba(255,255,255,0.8);

    font-size: 18px;

    line-height: 18px;

    font-family: 'Intro-Bold', sans-serif;

    padding: 30px;

    border-radius: 8px;

    margin-bottom: 5px;

    transition: all 0.4s;

    cursor: pointer;

}

.tabHeader.active, .tabHeader:hover{

    background: #a20000;

}

.customTable{

    display: none;

}

.customTable.active{

    display: block;

}

.mainTop{

    display: none;

}

.mainTop.active{

    display: block;

}

.mainStat{

    margin: 0;

    padding: 40px;

    margin-bottom: 20px;

}

.mainStat.stata{

    padding-top: 0;

}

.mainStatItem{

    margin-top: 40px;

    width: 240px;

    height: 240px;

    text-align: center;

    background: #150d0d;

    border-radius: 20px;

}

.mainStatName{

    font-size: 18px;

    line-height: 18px;

    margin-top: 20px;

    margin-bottom: 20px;

}

.mainStatCount{

    font-family: 'Intro-Bold', sans-serif;

    font-size: 30px;

}

/* Help */

.helpColumn:nth-child(1){

    padding: 40px;

    margin-right: 40px;

    border-radius: 20px;

    background: #0d0505;

    text-align: center;

}

.helpColumn:nth-child(2){

    width: 100%;

}

.helpMail{

    margin-top: 25px;

    margin-bottom: 35px;

    font-size: 26px;

    line-height: 26px;

    font-family: 'Intro-Bold', sans-serif;

    color: #FFFFFF;

    transition: all 0.4s;

}

.helpMail:hover{

    color: #a20000;

}

.tgFlex{

    width: 100%;

}

.tgItem{

    display: inline-block;

    text-align: center;

   margin: 0 5px;
    margin-top: 5px;
}

.tgItem span{

    display: block;

    font-family: 'Intro-Bold', sans-serif;

    color: #bebebe;

    margin-top: 10px;

}

.mailTitle{

    font-size: 22px;

    font-family: 'Intro-Bold', sans-serif;

    text-align: center;

    width: 100%;

    padding: 17px;

    border-radius: 8px 8px 0 0;

    background: #2c2525;

}

.mailArea{

    background: #170f0f;

    padding: 25px;

    border-radius: 0 0 8px 8px;

}

.mailArea textarea{

    resize: none;

    width: 100%;

    height: 230px;

    outline: none;

    background: transparent;

    border: 1px solid #716c6c;

    color: #716c6c;

    font-family: 'Intro-Book', sans-serif;

    padding: 20px;

    font-size: 20px;

}

.mailArea textarea::placeholder{

    color: #716c6c;

}

.formBtn{

    text-transform: uppercase;

    font-family: 'Intro-Bold', sans-serif;

    font-size: 21px;

    line-height: 21px;

    padding: 15px 40px;

    border-radius: 8px;

    background: #a20000;

    outline: none;

    border:none;

    cursor: pointer;

    color: #FFFFFF;

    box-shadow: 6px 8px 0px 0px rgba(70, 0, 0, 1);

    margin-top: 25px;

    transition: all 0.4s;

}

.formBtn:hover{

    background: rgba(70, 0, 0, 1);

    box-shadow: 6px 8px 0px 0px rgba(180, 0, 0, 1);

}

/* Form */

.mainForm{

    width: 570px;

    background: url(/image/mainform.png);

    background-repeat: no-repeat;

    background-size: cover;

    padding: 25px 0;

    margin: 0 auto;

    border-radius: 8px;

    box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.35);

    border-top: 9px solid #000000;

    border-bottom: 9px solid #a20000;

}

.logoform{

    display: flex;

    margin: 0 auto;

}

.formName{

    font-family: 'Intro-Black', sans-serif;

    font-size: 18px;

    line-height: 24px;

    color: #000000;

    text-align: center;

    text-transform: uppercase;

    margin-top: 35px;

    margin-bottom: 30px;

}

.formName span{

    color: #9e0000;

}

.inputName{

    color: #9e0000;

    font-family: 'Intro-Black', sans-serif;

    font-size: 16px;

    line-height: 18px;

    text-transform: uppercase;

    position: relative;

    display: inline-block;

    margin-bottom: 13px;

}

.inputName::before{

    position: absolute;

    content: '';

    width: 100%;

    height: 2px;

    background: #9e0000;

    left: 0;

    bottom: 0;

}

.inputInner{

    margin: 0 auto;

    width: 360px;

    height: 42px;

    background: #e7e7e7;

    border: 1px solid #747474;

    margin-bottom: 30px;

}

.inputLogo{

    min-width: 40px;

    max-width: 40px;

    height: 100%;

    background: #d6d6d6;

}

.inputInner input{

    width: 100%;

    height: 100%;

    outline: none;

    border: none;

    background: transparent;

    padding-left: 12px;

    font-family: 'Intro-Book', sans-serif;

    color: #000000;

}

.inputInner input::placeholder{

    color: #000000;

}

.mainForm .formBtn{

    border-radius: 0;

    width: 200px;

    height: 46px;

    padding: 0;

    margin: 0;

}

.formPolice{

    font-size: 12px;

    line-height: 24px;

    margin-bottom: 25px;

    color: #000000;

}

.formPolice span, .formPolice a{

    color: #9e0000;

    font-family: 'Intro-Bold', sans-serif;

}

.formPolice input{

    margin-left: 6px;

}

.formInner{

    margin-top: 100px;

}

.formInner .mainForm{

    position: relative;

    top: -115px;

}

.repairLink{

    color: #000000;

    font-size: 14px;

    margin-top: 35px;

    font-family: 'Intro-Black', sans-serif;

}

.repairLink a{

    color: #9e0000;

    position: relative;

    transition: all 0.4s;

}

.repairLink a:hover{

    opacity: 0.8;

}

.repairLink a:before{

    height: 1px;

    width: 100%;

    background: #9e0000;

    position: absolute;

    content: '';

    left: 0;

    bottom: 0;

}

.inputRepair{

    margin-bottom: 15px;

    font-size: 14px;

    color: #696969;

}

.inputRepair span{

    font-family: 'Intro-Bold', sans-serif;

}

.customSelect{

    position: relative;

    width: 230px;

    font-size: 16px;

}

.customSelectHeader{

    width: 100%;

    height: 48px;

    background: #0d0505;

    padding: 0 12px;

    border: 2px solid #a20000;

    cursor: pointer;

}

.customSelectContent{

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    height: 144px;

    overflow-y: auto;

    display: none;

    z-index: 1;

}

.customSelectItem{

    height: 48px;

    background: transparent;

    transition: all 0.4s;

    width: 100%;

    display: flex;

    align-items: center;

    padding: 0 12px;

    cursor: pointer;

    background: #201919;

}

.customSelectItem.active, .customSelectItem:hover{

    background: #2d2727;

}
.customSelectItemV{

    height: 48px;

    background: transparent;

    transition: all 0.4s;

    width: 100%;

    display: flex;

    align-items: center;

    padding: 0 12px;

    cursor: pointer;

    background: #201919;

}

.customSelectItemV.active, .customSelectItemV:hover{

    background: #2d2727;

}
.customSelectContent::-webkit-scrollbar {

    width: 5px;

    height: 5px;

}

.customSelectContent::-webkit-scrollbar-track {

    background: transparent;

    border: none;

}

.customSelectContent::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 1);

    border-radius: 2px;

    border: 1px solid #000000;

}

.selectTitle{

    text-align: center;

    position: relative;

    margin-bottom: 15px;

    text-transform: uppercase;

    font-size: 18px;

    line-height: 18px;

    font-family: 'Intro-Black', sans-serif;

}

/* ============ */

.addVideo{

    transition: all 0.4s;

    position: relative;

    font-family: 'Intro-Black', sans-serif;

    color: #000000;

    text-transform: uppercase;

}

.addVideoText span span{

    color: #a20000;

}

.addVideoText img{

    margin-left: 5px;

}

.addVideoText{

    position: absolute;

    left: calc(50%);

    transform: translateX(-50%);

    bottom: 44px;

    font-size: 18px;

}

.addVideoText{

    position: absolute;

}

.addVideoImage{

    position: relative;

    z-index: 0;

}

.addVideo:hover{

    opacity: 0.85;

}

/* ============ */

.videoItem{

    text-align: center;

    padding: 15px;

    border-radius: 8px;

    width: 49%;

    background: #0e0606;

    margin-bottom: 50px;

}

.viteoUser{

    text-transform: uppercase;

    font-family: 'Intro-Black', sans-serif;

    font-size: 24px;

    line-height: 24px;

    margin-bottom: 40px;

}

.viteoUser span{

    color: #a20000;

}

.video{

    width: 100%;

    height: 300px;

    border: 10px solid #3e0404;

    padding: 5px;

    background: rgb(162, 0, 0);

    border-radius: 8px;

}

.paginationWrapper {

    text-align: center;

    background: #0e0606;

    padding: 10px;

    margin: 0 auto;

}

.paginationWrapper button:hover:not(.active) {

    background: #3e0404;

}

.paginationWrapper .prev, .paginationWrapper .next {

    font-size: 14px;

}

.paginationWrapper button {

    outline: none;

    position: relative;

    transition: all 170ms linear;

    cursor: pointer;

}

.paginationWrapper button{

    background: none;

    border: none;

    border-radius: 4px;

    box-sizing: border-box;

    font-family: 'Intro-Black', sans-serif;

    display: block;

    font-size: 20px;

    height: 40px;

    line-height: 40px;

    min-width: 40px;

    padding: 0;

    margin: 0 5px;

    color: #FFFFFF;

}

.paginationWrapper button.active {

    background: #a20000;

    color: #000000;

    cursor: default;

}

.paginationWrapper button img{

    display: flex;

    margin: 0 auto;

}

.menu-burger__header{

    display: none;

}

/* Adaptive */

@media (max-width: 1760px) {

    .container{

        margin: 0 auto;

    }

    .howmake{

        padding-top: 70px;

        padding-bottom: 270px;

    }

    .howmakeFon {

        position: absolute;

        content: '';

        width: 100%;

        height: 100%;

        left: 0;

        top: -170px;

        background: url(/image/howmake.png);

        z-index: 0;

    }

    .answer{

        margin-top: -50px;

    }

}

@media (max-width: 1540px) {

    .roadImage{

        width: 100%;

    }

    .heroslider{

        width: 700px;

        top: 190px;

    }

    .tableBtn{

        font-size: 17px;

    }

    .sliderImage{

        max-width: 700px;

        width: 100%;

    }

    .slideTop{

        margin-right: 130px;

    }

    .slick-prev {

        left: 38%;

    }

    .hero{

        padding-top: 100px;

        padding-bottom: 210px;

    }

    .heroBg2{

        width: 870px;

    }

    .howmakeCar{

        max-width: 740px;

        right: 0;

    }

    .roadFon {

        width: 500px;

    }

}

@media (max-width: 1400px) {

    .headerLogo img{

        max-width: 260px;

    }

    .container{

        padding: 0 10px;

    }

    .navLink{

        margin-right: 25px;

    }

}

@media (max-width: 1280px) {

    .container2{

        padding: 0 20px;

    }

}

@media (max-width: 1220px) {

    .headerBtn{

        font-size: 16px;

        width: unset;

        padding: 0 30px;

    }

    .btnLogo{

        display: none;

    }

    .headerBtn.log .btnText{

        margin: 0;

    }

}

@media (max-width: 1180px) {

    .howmakeCar {

        max-width: 580px;

        top: 340px;

    }

    .howmakeCc{

        width: 70%;

    }

    .roadImage{

        width: 70%;

        margin: 0 auto;

        display: flex;

    }

    .roadTitle{

        margin-top: 70px;

    }

    .statInner{

        margin-bottom: 70px;

    }

    .roadFon{

        width: 320px;

        bottom: 70px;

    }

    .heroslider{

        width: 600px;

    }

    .sliderImage{

        max-width: 600px;

    }

    .slideTop {

        margin-right: 60px;

    }

    .slick-prev {

        left: 40%;

    }

    .slick-next {

        right: 12%;

    }

    .konkursFlex img:nth-child(1){

        display: none;

    }

    .konkursFlex{

        justify-content: center;

    }

}

@media (max-width: 1120px) {

    .header .navLink{

        font-size: 14px;

        margin-right: 25px;

        padding: 12px 0;

    }

}

@media (max-width: 1080px) {

    .hero{

        padding-top: 70px;

    }

    .hero .heroGame{

        margin: 0 auto;

    }

    .hero .heroTitle{

        text-align: center;

    }

    .hero .heroDop{

        text-align: center;

    }

    .hero .heroSlogan{

        text-align: center;

        margin: 0 auto;

        margin-top: 30px;

    }

    .hero .heroLine{

        margin: 0 auto;

        margin-top: 15px;

        margin-bottom: 35px;

    }

    .hero .heroBtns{

        justify-content: center;

    }

    .hero .socialLink:nth-last-child(1){

        margin-right: 0;

    }

    .hero .heroSocials{

        justify-content: center;

    }

    .statTitle{

        margin: 0 auto;

        width: 310px;

        display: flex;

    }

    .heroslider{

        position: relative;

        max-width: 900px;

        width: 100%;

        margin: 0 auto;

        top: unset;

        right: unset;

        margin-top: 30px;

    }

    .sliderImage{

        display: flex;

        margin: 0 auto;

        margin-top: 60px;

        max-width: 800px;

    }

    .slideTop{

        margin: 0 auto;

    }

    .slick-next {

        right: 30%;

    }

    .slick-prev {

        left: 30%;

    }

    .menu-burger__header {

        position: relative;

        width: 46px;

        height: 46px;

        border-radius: 6px;

        display: block;

        background: #FFFFFF;

        z-index: 5;

    }

    .menu-burger__header span, .menu-burger__header:after, .menu-burger__header:before{

        height: 4px;

        width: 40px;

        position: absolute;

        background: #000000;

        left: 50%;

        transform: translateX(-50%);

        border-radius: 2px;

    }

    .menu-burger__header span{

        top: 50%;

        transform: translateX(-50%) translateY(-50%);

    }

    .menu-burger__header:after, .menu-burger__header:before{

        content: '';

    }

    .menu-burger__header:after{

        bottom: 10px;

    }

    .menu-burger__header:before{

        top: 10px;

    }

    .menu-burger__header.open-menu span {

        opacity:0; 

        transition: 0.5s; 

    }

    .menu-burger__header.open-menu:before {

        transform: translateX(-50%) translateY(-50%) rotate(45deg);

        top: 50%;

        transition: all 0.4s;

    }

    .menu-burger__header.open-menu:after {

        transform: translateX(-50%) translateY(-50%) rotate(-45deg);

        top: 50%;

        transition: all 0.4s;

    }

    .mobileMenuBg.open-menu{

        left: 0;

    }

    .headerBtns{

        flex-direction: unset;

    }

    .headerBtn{

        margin-right: 10px;

    }

    .headerBtn.log{

        margin-bottom: 0;

        margin-right: 10px;

    }

    .headerInner{

        justify-content: unset;

    }

    .headerLogo{

        flex-grow: 1;

        position: relative;

        z-index: 5;

    }

    .header .nav {

        position: fixed;

        display: block;

        left: -100%;

        top: 90px;

        z-index: 5;

        transition: all 0.4s;

    }

    .header .nav.open-menu{

        left: 20px;

    }

    .header .navLink{

        margin-right: 0;

        display: block;

        font-size: 24px;

    }

    .header .navLink.active, .header .navLink:hover{

        color: #BE0000;

    }

    .header .navLink.active span, .header .navLink:hover span{

        display: none;

    }

}

@media (max-width: 1024px) {

    .helpRow{

        flex-wrap: wrap;

    }

    .helpColumn:nth-child(1){

        margin-right: 0;

        margin-bottom: 20px;

        width: 100%;

    }

    .tgFlex{

        justify-content: center;
flex-wrap: wrap;
    }

    .helpColumn .formBtn{

        justify-content: center;

        display: flex;

        margin: 0 auto;

        margin-top: 20px;

    }

    .roadFon{

        display: none;

    }

    .roadItem{

        margin-right: 0;

        margin-top: 50px;

    }

    .roadRow{

        justify-content: space-around;

        padding-right: 20px;

        flex-wrap: wrap;

    }

    .statRow{

        height: 200px;

    }

    .statInner{

        margin-top: -160px;

    }

    .statItem img{

        height: 86px;

    }

    .statCount{

        font-size: 50px;

        line-height: 50px;

        margin-bottom: 10px;

    }

    .statName{

        font-size: 18px;

        line-height: 18px;

        margin-bottom: 15px;

    }

    .statItemRight{

        margin-left: 15px;

    }

    .statItem{

        max-width: 33%;

        justify-content: center;

    }

    .howmakeCar{

        display: none;

    }

    .footerColumn:nth-child(1){

        max-width: 40%;

    }

    .footerColumn:nth-child(2){

        max-width: 56%;

    }

    .mainColumn:nth-child(1),.mainColumn:nth-child(2){

        max-width: 100%;

    }

    .mainRow{

        flex-wrap: wrap;

        margin-bottom: 15px;

    }

    .displayFlex1024{

        display: flex;

        width: 100%;

        margin-top: 15px;

    }

    .tableRow1024{

        flex-wrap: wrap-reverse;

    }

    .tabHeader{

        margin-bottom: 15px;

    }

    .mainTop{

        text-align: center;

        width: 100%;

    }

    .mainTime{

        margin: 0 auto;

        max-width: 100%;

    }

    .mainTime:nth-last-child(1){

        margin-top: 15px;

    }

}

@media (max-width: 960px) {

    .addVideo{

        order: 1;

    }

    .customSelect{

        order: 2;

        margin-top: 15px;

        width: 100%;

    }

    .videoItem{

        width: 100%;

    }

    .videoTop {

        flex-direction: column;

        align-items: center;

    }

    .mainText{

        text-align: justify;

    }

    .footerRow:nth-child(1){

        flex-wrap: wrap;

        margin-bottom: 20px;

    }

    .footerRow:nth-child(2){

        flex-wrap: wrap-reverse;

    }

    .footerColumn:nth-child(1){

        max-width: 100%;

    }

    .footerColumn:nth-child(2){

        max-width: 100%;

    }

    .footerColumn .nav{

        margin-top: 20px;

    }

    .police{

        margin-top: 20px;

    }

    .answerItem{

        width: 100%;

    }

    .howmakeCc{

        top: 40px;

    }

    .sliderImage{

        width: 100%;

    }

    .tabHeader{

        text-align: center;

    }

}

@media (max-width: 860px) {

    .statRow{

        height: unset;

        padding: 20px 0;

        background-size: cover;

    }

    .statItem{

        flex-direction: column;

        text-align: center;

    }

    .statLine{

        margin: 0 auto;

    }

    .statItemRight{

        margin: 0;

    }

    .statItem img{

        margin-bottom: 10px;

    }

    .roadItem{

        margin: 0 20px;

        margin-top: 50px;

    }

    .road{

        padding-bottom: 100px;

    }

    .sliderImage{

        max-width: 740px;

    }

    .slick-prev {

        left: 28%;

    }

    .slick-next {

        right: 28%;

    }

    .slideTop{

        text-align: center;

    }

    .slideClass{

        margin: 0;

    }

    .slideLine{

        margin: 0 auto;

        margin-top: 10px;

    }

}

@media (max-width: 767px) {

    .ruletTitle{

        font-size: 20px;

        line-height: 20px;

    }

    .rulesText{

        font-size: 14px;

        line-height: 24px;

    }

    .headerBtns{

        flex-direction: column;

        position: absolute;

        z-index: 5;

        right: 66px;

        top: -200px;

        transition: all 0.4s;

    }

    .headerBtns.open-menu{

        top: 28px;

    }

    .headerBtn{

        margin-right: 0;

    }

    .headerBtn.log{

        margin-right: 0;

        margin-bottom: 10px;

    }

    .sliderImage{

        max-width: 620px;

    }

    .howmake{

        overflow: hidden;

    }

    .howmakeTitle:before{

        background-size: cover;

        background-position: center center;

    }

    .howmakeTitle{

        text-align: center;

        display: block;

        font-size: 38px;

        line-height: 38px;

    }

    .howmakeCc{

        top: unset;

        bottom: -10px;

    }

    .answerContent{

        text-align: justify;

    }

    .answerHeader span{

        font-size: 18px;

        line-height: 18px;

    }

    .statItem img{

        height: 80px;

    }

    .statCount{

        font-size: 40px;

        line-height: 40px;

        margin-bottom: 5px;

    }

    .statName{

        font-size: 16px;

        line-height: 16px;

        margin-bottom: 0;

    }

    .statItem:nth-child(1){

        align-items: flex-end;

        text-align: right;

    }

    .statLine{

        display: none;

    }

    .statItem:nth-child(3){

        align-items: flex-start;

        text-align: left;

    }

    .roadTitle{

        font-size: 44px;

        line-height: 44px;

    }

}

@media (max-width: 639px) {

    .mainForm{

        width: 100%;

    }

    .mainStatItem{

        margin-top: 20px;

    }

    .stata{

        margin-bottom: 0;

        padding-bottom: 15px;

    }

    .mainText{

        padding: 20px;

    }

    .sliderImage{

        max-width: 500px;

    }

    .slick-next {

        right: 26%;

    }

    .slick-prev {

        left: 26%;

    }

    .answerTop, .answerBack1{

        width: 440px;

        height: 440px;

    }

    .answerBack1{

        border: 25px solid #4f0000;

    }

    .answerBg{

        width: 100%;

    }

    .answerDop{

        font-size: 16px;

    }

    .answerText{

        top: 45px;

    }

    .answerTitle{

        font-size: 32px;

        line-height: 32px;

    }

    .size31 .customTableItem:nth-child(1) {

        width: 50px;

        padding: 0;

    }

    .size31 .customTableItem {

        width: calc((100% - 50px)/3);

    }

    .customTableHead .customTableItem{

        font-size: 18px;

        line-height: 18px;

    }

    .customTableItem{

        font-size: 16px;

        line-height: 16px;

    }

}

@media (max-width: 560px) {

    /* ========= */

    .addVideoImage{

        width: 95%;

    }

    .addVideoText img{

        display: none;

    }

    /* ========= */

    .headerBtns{

        right: 0;

    }

    .headerBtns.open-menu {

        top: 85px;

    }

    .slick-prev {

        left: 22%;

    }

    .slick-next {

        right: 22%;

    }

    .roadTitle{

        text-align: center;

    }

    .roadText{

        text-align: center;

    }

    .roadLine{

        margin: 0 auto;

    }

    .footerColumn .nav{

        margin-top: 0;

        flex-wrap: wrap;

    }

    .footerColumn .navLink{

        font-size: 14px;

        margin-top: 15px;

    }

    .answerHeader img{

        width: 48px;

        height: 48px;

    }

    .answerHeader span{

        margin-left: 15px;

        font-size: 16px;

    }

    .answerContent{

        font-size: 14px;

        line-height: 20px;

    }

    .statRow{

        background: #b80000;

        border-radius: 20px;

    }

    .statTitle{

        border-radius: 20px;

    }

    .heroTitle{

        font-size: 60px;

        line-height: 60px;

    }

    .heroDop{

        font-size: 24px;

        line-height: 24px;

    }

    .heroSlogan{

        font-size: 20px;

        line-height: 20px;

        margin-top: 15px;

    }

}

@media (max-width: 500px) {

    .mainText{

        font-size: 16px;

    }

    .size31 .customTableItem:nth-child(2){

        width: 38%;

    }

    .size31 .customTableItem:nth-child(3){

        width: calc(31% - 25px);

    }

    .size31 .customTableItem:nth-child(4){

        width: calc(31% - 25px);

    }

    .main{

        padding-top: 70px;

    }

    .mainTitle{

        padding-bottom: 70px;

    }

}

@media (max-width: 480px) {

    .formName{

        margin-bottom: 20px;

        margin-top: 20px;

    }

    .inputInner{

        margin-bottom: 20px;

    }

    .repairLink{

        margin-top: 25px;

    }

    .inputInner{

        width: 90%;

    }

    .logoform{

        width: 90%;

    }

    .formPolice{

        flex-wrap: wrap;

    }

    .videoItem{

        margin-bottom: 25px;

    }

    .howmakeTitle{

        font-size: 32px;

        line-height: 32px;

    }

    .footerColumn .navLink{

        margin: 0 5px;

    }

    .sliderImage{

        max-width: 400px;

    }

    .slick-prev {

        left: 18%;

    }

    .slick-next {

        right: 18%;

    }

    .statRow{

        justify-content: space-around;

        flex-wrap: wrap;

        width: 100%;

        padding-top: 0;

    }

    .statItem{

        max-width: 50%;

        margin-top: 20px;

    }

    .statItem:nth-child(1), .statItem:nth-child(3) {

        align-items: center;

        text-align: center;

    }

    .roadImage{

        display: none;

    }

}

@media (max-width: 479px) {

    /* ========= */

    .addVideoText{

        font-size: 16px;

        bottom: 41px;

    }

    /* ========= */

    .mainStat{

        padding: 20px;

    }

    .viteoUser{

        margin-bottom: 25px;

        font-size: 22px;

        line-height: 22px;

    }

    .mainInner.rules{

        padding: 15px;

    }

    .heroTitle{

        font-size: 50px;

        line-height: 50px;

    }

    .heroDop{

        font-size: 22px;

        line-height: 22px;

    }

    .answerTop, .answerBack1 {

        width: 374px;

        height: 374px;

    }

    .answerDop{

        margin-bottom: 10px;

    }

    .answerText{

        width: 240px;

    }

    .howmake{

        padding-bottom: 230px;

    }

    .answer{

        margin-top: -80px;

    }

    .police{

        font-size: 14px;

        line-height: 22px;

    }

    .plug{

        padding: 20px;

        font-size: 16px;

    }

    .mailArea textarea{

        font-size: 16px;

    }

    .mailTitle{

        font-size: 20px;

    }

}

@media (max-width: 440px) {

    .helpMail{

        font-size: 20px;

        line-height: 20px;

    }

    .stata{

        padding-left: 20px;

        padding-right: 20px;

    }

    .size31 .customTableItem:nth-child(2){

        width: 36%;

    }

    .size31 .customTableItem:nth-child(3){

        width: calc(32% - 25px);

    }

    .size31 .customTableItem:nth-child(4){

        width: calc(32% - 25px);

    }

    .customTableHead .customTableItem{

        font-size: 16px;

        line-height: 16px;

    }

    .customTableLine .customTableItem{

        font-size: 14px;

        line-height: 14px;

    }

    .mainTitle{

        font-size: 40px;

        line-height: 40px;

    }

    .mailArea textarea{

        height: 180px;

    }

    .mailArea textarea{

        padding: 10px;

    }

    .mailArea{

        padding: 15px;

    }

}

@media (max-width: 414px) {

    /* ========= */

    .addVideoText{

        bottom: 37px;

    }

    /* ========= */

    .video{

        padding: 0;

        height: 200px;

    }

    .paginationWrapper button{

        min-width: 30px;

        width: 30px;

        height: 30px;

        display: inline-flex;

        justify-content: center;

        align-items: center;

        font-size: 18px;

    }

    .slick-prev {

        left: 15%;

    }

    .slick-next {

        right: 15%;

    }

    .heroBtns{

        flex-direction: column;

        justify-content: center;

        text-align: center;

    }

    .heroBg2{

        display: none;

    }

    .heroBtn{

        margin: 0 auto;

        margin-bottom: 25px;

    }

    .yotubeBtn{

        margin: 0 auto;

    }

    .heroSocials{

        justify-content: center;

    }

    .socialLink:nth-last-child(1){

        margin-right: 0;

    }

    .howmakeCc{

        display: none;

    }

    .howmakeFon{

        display: none;

    }

    .howmake{

        background: #a20000;

        padding-bottom: 70px;

    }

    .answer{

        margin-top: 70px;

    }

    .btnLogo{

        display: none;

    }

    .headerBtn.log .btnText{

        margin-left: unset;

    }

    .header .navLink{

        font-size: 20px;

        padding: 10px 0;

    }

    .headerBtns{

        right: unset;

        left: -100%;

        top: 320px;

    }

    .headerBtns.open-menu {

        top: 320px;

        left: 10px;

    }

    .header .nav {

        top: 80px;

    }

}

@media (max-width: 413px) {

    .konkursFlex img{

        width: 100%;

    }

    .customTableHead .customTableItem{

        font-size: 12px;

        line-height: 12px;

    }

    .customTableLine .customTableItem{

        font-size: 12px;

        line-height: 12px;

    }

    .size31 .customTableLine .customTableItem{

        padding-left: 0;

    }

    .tableNumber img, .tableNumber{

        width: 24px;

        height: 24px;

    }

    .tableNumber{

        margin-left: -5px;

    }

    .tableNumber span{

        font-size: 14px;

        line-height: 14px;

    }

    .heroTitle{

        font-size: 40px;

        line-height: 40px;

    }

    .heroDop{

        font-size: 18px;

        line-height: 18px;

    }

    .slick-prev {

        left: 10%;

    }

    .slick-next {

        right: 10%;

    }

    .sliderImage{

        max-width: 320px;

    }

    .howmakeTitle{

        font-size: 26px;

        line-height: 26px;

    }

    .answerItem{

        border-radius: 30px;

        border: 4px solid #4f0000;

        padding: 10px;

    }

    .answerTop, .answerBack1 {

        width: 320px;

        height: 320px;

    }

    .answerBg{

        z-index: 2;

    }

    .heroGame{

        width: 300px;

    }

    .statTitle{

        width: 100%;

        border-radius: 20px 20px 0 0;

    }

    .statRow {

        border-radius: 0 0 20px 20px;

    }

    .yotubeBtn{

        box-shadow: unset !important;

    }

    .heroSocials{

        margin-top: 25px;

    }

    .roadItem{

        margin: 0;

        margin-top: 50px;

    }

}

@media (max-width: 380px) {

    /* ========= */

    .addVideoText{

        font-size: 16px;

        bottom: 35px;

        width: 100%;

        justify-content: center;

    }

    .addVideoImage {

        width: 100%;

    }

    /* ========= */

}

@media (max-width: 359px) {

    /* ========= */

    .addVideoText{

        font-size: 14px;

        bottom: 30px;

    }

    /* ========= */

    .mainTitle {

        font-size: 32px;

        line-height: 32px;

    }

    .paginationWrapper{

        background: transparent;

        padding: 0;

    }

    .headerLogo img {

        max-width: 240px;

    }

    .heroGame{

        font-size: 18px;

        width: 270px;

    }

    .answerTop, .answerBack1 {

        width: 280px;

        height: 280px;

    }

    .answerHeader img {

        width: 44px;

        height: 44px;

    }

    .answerHeader span{

        margin-left: 10px;

        font-size: 14px;

    }

    .logo img{

        width: 100%;

    }

    .footerDesc{

        font-size: 16px;

        line-height: 24px;

    }

    .roadItem{

        width: 100%;

    }

    .roadTitle{

        font-size: 34px;

        line-height: 34px;

    }

    .slick-prev {

        left: 3%;

    }

    .slick-next {

        right: 3%;

    }

}