@charset "utf-8";

@font-face {
	font-family: "archyedt-bold";
	src: url(../assets/fonts/archyedt-bold.otf);
}
@font-face {
	font-family: "bpg_rioni_arial";
	src: url(../assets/fonts/bpg_rioni_arial.ttf);
}
@font-face {
	font-family: "bpg-square-webfont";
	src: url(../assets/fonts/bpg-square-webfont.ttf);
}

@font-face {
	font-family: "bpg-arial-caps-webfont";
	src: url(../assets/fonts/bpg-arial-caps-webfont.ttf);
}
a:hover{    
    color: white;
    text-decoration: none;
}
body{ 
    background-image:url('../assets/img/bg.jpg');
    background-color: #050b60;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    /* overflow-x: hidden; */
}
.ru *{
    font-family: "bpg_rioni_arial" !important;
}
/* .container-fluid{
    border:1px solid white;
}
.container{
    border: 1px solid red;
}
.row{
    border: 1px solid blue;
}
.col-4{
    border: 1px solid green;
} */
.style-none{
    list-style-type: none;
}
#logo{
    padding: 0;
    margin-top: 5vh;
}
#steps{
    padding: 0;
    margin-top: 21vh;
}

.stepall{
    width: 88%;
    background-color: #294ce1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 55px;
    padding:17px 43px 17px 19px;
    box-shadow: 3.517px 8.285px 7.7px 2.3px rgba(0, 0, 0, 0.05);
}
.stepaall-text{
    width: 75%;
    display: inline-block;    
    font-size: 28px;
    font-family: "archyedt-bold";
    color: white;
    vertical-align: middle;
    line-height:30px;
   
}
.step3{
    padding-right: 19px;
}
.way-img{
    /* width: 44.23vw; */
    position: relative;
    top: -19px;
    left: 10%;    
    z-index: 1;
}
.button-style{
    margin: 0 auto;
    display: inline-block;
    border-radius: 4px;
    padding: 4px 60px;
    background-color: #ff1644;  
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.09);
    color: white;
    font-size: 38px;
    font-family: "archyedt-bold";
} 
#button{
    margin-top: 3.8vh;
}
#first{
    margin-top: 8.5vh;
    position: relative;
}
.box{
    font-family: "archyedt-bold";
    color: white;
    text-align: center;
}
.box-text1:nth-child(1){
    font-size:55px;
}
.box-text1:nth-child(2){
    font-size:72px;
}
.box-text1:nth-child(3){
    font-size:48px;
}
span{
    vertical-align: middle;
    margin-left: 19px;
}
.box-wood{
    box-sizing: border-box;      
    position: relative;  
    margin-top: -26vh;   
}
.box-wood-img{    
    width:100%;    
}
.box-wood-img-mob{
    display: none;
}
.box-wood-text {
    position: absolute;
    width: 50%;
    top: 23vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-family: "archyedt-bold";
    color: white;
    text-align: center;
    font-size: 39px;
    z-index: 1;
    
}
.submarine{
    /* width: 14.37vw; */
    position: absolute;
    width: 19.37vw;    
    right: 0;
    top: -7vh;
    z-index: -1;
}
#second{    
    position: relative;
    margin-top: -18vh;
}
.skivri-img{
    /* margin-left: 7%; */
    width: 100%;
}
.skivri-left{
    position: absolute;
    left: 7vw;
    top: 9vh;
}
.skivri-right{
    position: absolute;
    right: 3vw;
    top: -4vh;
}
.skivri-right-balls{
    position: absolute;
    right: 17vw;
    top: 15vh;
}

/* drop down */
#third{
    position: relative;
}
.rules-left{
    position: absolute;
    left: 10vw;
    top: 0;
}
.rules-right{
    position: absolute;
    right: 8vw;
    top: 8vh;
}
.drop-down-bg{
    font-family: "archyedt-bold";
    padding: 20px 24px;
}
.drop-down{
    cursor: pointer;
}

.drop-down-header{    
    padding: 12px 0px 12px 36px;
    font-family: "archyedt-bold"; 
    background-image: -moz-linear-gradient( 122deg, rgb(27,62,210) 0%, rgb(77,90,255) 100%);
    background-image: -webkit-linear-gradient( 122deg, rgb(27,62,210) 0%, rgb(77,90,255) 100%);
    background-image: -ms-linear-gradient( 122deg, rgb(27,62,210) 0%, rgb(77,90,255) 100%);
    border-radius: 4px;   
}

.drop-down-header-text{  
    font-size: 30px;     
    color: white;
    vertical-align: middle;
    display: inline-block;    
}
.arrow{
    position: absolute;
    right: 40px;
    top: 30px;
}
.rules-hide{
    /* display: none; */
    width: 94%;
    padding: 25px;
    padding-bottom: 50px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.31);
    box-shadow: 8.699px 9.661px 0px 0px rgba(19, 19, 19, 0.09);
    font-size: 20px;
    font-family: "bpg-square-webfont";  
    margin: 0 auto;  
    color: white;
}

/* li{
    list-style-type: none;
} */
#third{
    margin-top: 5vh;
}
.change-bg-seven{    
    background-image: -moz-linear-gradient( 0deg, rgb(47,47,159) 0%, rgb(3,28,114) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(47,47,159) 0%, rgb(3,28,114) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(47,47,159) 0%, rgb(3,28,114) 100%);
}
#bottom{
    z-index: -2;
    position: relative;
    top: 50vh;
    padding: 0;
    margin: 0;
}
.bottom-img{
    position: absolute;
    width: 100%;
    bottom: 0;
}

/* MEDIA */
@media(min-width:1024px){
    .ru .stepaall-text {
        font-size: 23px;
    }
    .en .stepaall-text {
        font-size: 24px;
    }
}
@media screen and (max-width:1600px){
    .box-wood-text {
        width: 55%;
        top: 23vw;
        font-size: 34px;
    }
    .rules-left {        
        left: 2vw;       
    }
    .rules-right {
        right: 3vw;
    }
    .skivri-left {
        left: 1vw;
    }
    #steps {
        margin-top: 32vh;
    }
}
@media screen and (max-width:1366px){
    .way-img {
        top: -17px;
    }
    .box-wood-text {
        /* top: 43vh; */
    }
    .rules-left {   
        width: 8vw;     
        left: 0vw;       
    }
    .rules-right {
        
        right: 0vw;
    }
    .skivri-left {
        width: 13vw;
        left: 0vw;
    }
    .skivri-right{
        width: 13vw;
        right: 0;
    }
    .submarine{
        width: 16vw;
    }
}
@media screen and (max-width:1280px){
    #steps {
        margin-top: 19vh;
    }
    .submarine {
        top: -15vh;
    }
    .box-wood {
        margin-top: -15vh;
    }
    .box-wood-text {
        /* top: 27vh; */
    }
    #second {
        margin-top: -8vh;
    }
    .skivri-left {
        width: 12vw;
    }
    .skivri-right {
        width: 12vw;
    }
    .skivri-right-balls {
        width: 5vw;
    }
    .rules-left{
        left: 1vw;
        top: -9vw;    
    }
}
@media screen and (max-width:1024px){
    .stepaall-text {
        width: 65%;
        font-size: 20px;
        line-height: 24px;
    }
    .way-img {
        width: 70%;
        top: -14px;
        left: 13%;       
    }
    .box-wood-text {
        /* top: 30vh; */
        font-size: 28px;
    }
    .box-text1 {
        font-size: 37px;
    }
    .skivri-right-balls {
        right: 11vw;
        top: 25vh;
    }
    .rules-right {
        width: 5vw;
    }
    .drop-down-header-text {
        font-size: 26px;
    }
    .arrow {
        top: 25px;
    }
    .rules-hide{
        font-size: 18px;
    }
}
@media only screen and (max-width:992px){
    
}
/* for ipad portrait */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .logo{
        width: 20vw;
    }
    #logo {
        margin-top: 2vh;
    }
    
    .box-text1:nth-child(1){
        font-size:45px;
    }
    .box-text1:nth-child(2){
        font-size:62px;
    }
    .box-text1:nth-child(3){
        font-size:38px;
    }
    #first {
        margin-top: 5.5vh;
    }
    .submarine {
        top: 0vh;
    }
    .box-wood {
        margin-top: -10vh;
    }
    .box-wood-text {
        /* top: 16vh; */
        font-size: 25px;
    }
    #second {
        margin-top: -4vh;
    }
    .stepaall-text {
        width: 57%;
        font-size: 19px;
        line-height: 22px;
    }
    #steps {
        margin-top: 12vh;
    }
    .stepall {
        width: 92%;
        padding: 17px 43px 17px 3px;
    }
    .step3-text{
        width: 67%;
    }
    .step3{
        width: 106%;
    }
}

/* for ipad pro */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    
    #steps {
        margin-top: 11vh;
    }
    #logo {
        padding: 0;
        margin-top: 3vh;
    }
    #first {
        margin-top: 5.5vh;
    }
    .box-wood {
        margin-top: -10vh;
    }
    .submarine {
        top: 5vh;
    }
    .box-wood-text {
        /* top: 17vh; */
    }
    .box-text1:nth-child(1){
        font-size:45px;
    }
    .box-text1:nth-child(2){
        font-size:62px;
    }
    .box-text1:nth-child(3){
        font-size:38px;
    }
    #second {
        margin-top: -5vh;
    }
    #button {
        margin-top: 2.8vh;
    }
    #bottom {
        top: 21vh;
    }

}

/* ipad pro landscape mode */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
    #steps {
        margin-top: 21vh;
    }
    .box-wood {
        margin-top: -19vh;
    }
    .box-wood-text {
        /* top: 30vh; */
    }
    #second {
        margin-top: -10vh;
    }
    
}


/* for iphone 6plus */
@media only screen and (max-width:736px){
    .logo{
        width: 30vw;
    }
    #logo{
        margin-top: 1vh;
    }
    #steps {
        margin-top: 13vh;
    }
    .stepall {
        width: 95%;
        min-height: 175px;
        padding:17px 0px 17px 10px;
    }
    .stepaall-text {
        width: 94%;
        font-size: 16px;
        line-height: 21px;
        text-align: center;
    }
    .step1-img{
        width: 14vw;
        margin-left: 20%;
    }
    .step2-img{
        width: 14vw;
        margin-left: 20%;
    }
    .step3-img{
        width: 14vw;
        margin-left: 20%;
    }
    .way-img {
        top: -6px;
    }
    .button-style {
        padding: 0px 36px;
        font-size: 35px;
    }
        
    .box-text1:nth-child(1){
        font-size:25px;
        line-height: 30px;
    }
    .box-text1:nth-child(2){
        margin-top: 10px;
        font-size:42px;
        line-height: 40px;
    }
    .box-text1:nth-child(3){
        font-size:18px;
        margin-top: 10px;
    }
    .box-text1 > img{
        width: 7vw;
    }
    .box-wood {
        margin-top: -7vh;
    }
    #first{
        padding: 0;
    }
    .box-wood-img {
        display: none;
    }
    .box-wood-img-mob{
        display: block;
    }
    .box-wood-text{
        top: 31vw;
        font-size: 24px;
        line-height: 29px;
        width:88%;
        left: 7vw;
    }
    .submarine {
        top: 6vh;
    }
    .drop-down-header {
        padding: 12px 50px 12px 11px;
        font-size: 22px;
    }   
    .drop-down-header-text{
        font-size: 22px;
    }   
    .arrow {
        top: 28px;
        width: 41px;
        right: 14px;
    }
    #bottom {
        top: 13vh;
    }
    .drop-down-bg {
        padding: 20px 0px;
    }
    
}

/* for iphone 6 */
@media only screen and (max-width:375px){
    .stepall {
        padding: 12px 0px 17px 2px;
    }
    
    .step1-img{
        width: 14vw;
        margin-left: 27%;
    }
    .step2-img{
        width: 14vw;
        margin-left: 27%;
    }
    .step3-img{
        width: 14vw;
        margin-left: 27%;
    }
    .box-wood-text {
        /* top: 17vh; */
    }
    #button {
        margin-top: 1.8vh;
    }
    #first {
        margin-top: 5.5vh;
    }
    .drop-down-header-text {
        font-size: 21px;
    }
    .arrow {
        top: 31px;
        width: 35px;
    }
    .rules-hide {
        font-size: 16px;
    }
}
/* for iphone 5 */
@media only screen and (max-width:320px){
    .drop-down-bg {
        padding: 10px 0px;
    }
    .arrow {
        top: 21px;
        width: 35px;
    }
    .stepall {
        height: 26vh;
    }
    .step2-text{
        font-size: 14px;
    }
    .box-wood-text {
        top: 28vw;
        font-size: 22px;
    }
}

/* for iphone 4 */
@media only screen and (max-width:320px){
    .box-wood-text {
        /* top: 18vh; */
    }
    .stepall {
        height: 32vh;
    }
    .way-img {
        left: 8%;
    }
}

@media only screen and (max-width:736px) and (orientation:landscape){   
    .logo {
        width: 23vw;
    }
    #steps {
        margin-top: 31vh;
    }    
    .step1-img{
        width:7vw;
        margin-left: 27%;
    }
    .step2-img{
        width: 7vw;
        margin-left: 27%;
    }
    .step3-img{
        width: 7vw;
        margin-left: 27%;
    }
    .stepall {
        height: 31vh;
        min-height: auto;
    }
    .box-wood-text {
        /* top: 62vh; */
        font-size: 33px;
        line-height: 41px;       
        left: 7vw;
    }
    .box-wood {
        margin-top: -28vh;
    }
     
 }

@media only screen and (max-width:667px) and (orientation:landscape){

    .stepall {
        width: 95%;
        height: 30vh;
        padding: 9px 0px 17px 10px;
    }
}
@media only screen and (max-width:568px) and (orientation:landscape){
    .stepall {
        height: 32vh;
        padding: 5px 0px 17px 10px;
    }
    .box-wood-text {
        /* top: 56vh; */
    }
}
@media only screen and (max-width:480px) and (orientation:landscape){

    .box-wood-text {
        /* top: 43vh; */
    }
}