:root {
    --vh: 0.01;
}

body {
    margin: 0;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    min-width: 300px;
    background: #007354;
}

button {
    border: none;
    outline: none;

}

.wrapper {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    /*min-height: 93vh;*/
    background: #007354;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.gradient {
    background: linear-gradient(91.66deg, #007354 17.69%, #007354 46.7%, rgba(0, 115, 84, 0) 98.41%);
    position: absolute;
    width: 40%;
    height: 100%;
    z-index: 1;
}

.left-gradient {
    transform: matrix(-1, 0, 0, 1, 0, 0);
    left: 0;

}

.right-gradient {
    right: 0;
}

.gid {
    width: 174px;
    height: 495px;
    /*background-image: url(./img/Userblack.png);*/
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 87px);
    z-index: 2;
    display: none;
}

.logo {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 30px;
    max-width: 60px;
    z-index: 6;
}

.betting-text {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    text-transform: capitalize;
    color: #007354;
}

.betting {
    background: #FEEB00;
    border-radius: 1px;
    width: fit-content;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 110px;
    padding: 10px 18px;
    z-index: 3;
}

 .betting:active {
     transform:  translateX(-50%) scale(1.05);
     box-shadow: 2px 2px 4px #000;
     transition: scale 1s;
}
/*@keyframes phoneButtonEffect {*/
/*    25% {*/
/*        background: #FEEB00;*/
/*        padding: 12px 20px;*/

/*    }*/
/*    75% {*/
/*        background: red;*/
/*        padding: 14px 22px;*/
/*    }*/

/*    100% {*/
/*        background: #FEEB00;*/
/*        padding: 10px 18px;*/
/*    }*/
/*}*/

/*.betting:hover {*/
/*    background-color: #007354;*/

/*}*/

/*.betting:hover .betting-text{*/
/*    color: white;*/
/*}*/

.block-btn-text {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #007354;
    text-align: center;
    text-transform: capitalize;

}

.block-wrapper {
    background-size: contain;
    width: 80px;
    width: 170px;
    height: 100%;
    position: absolute;
    transition-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
    transition-duration: 600ms;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}

.leftBlock {
    background-image: url("./img/leftSide_union.png");
    top: 55px;
    left: -50px;
    transform: translateX(-100%);
    z-index: 4;
}

.betting-active .leftBlock {
    top: 0;
    left: -20px;
    transform: translateX(0);
}

.rightBlock {
    top: 55px;
    right: -50px;
    background-image: url("./img/rightSide_union.png");
    transform: translateX(100%);
    background-position: right;
    z-index: 4;
}

.betting-active .rightBlock {
    top: 0px;
    right: -20px;
    transform: translateX(0);
}


.block-btn {
    position: absolute;
    top: 50%;
    filter: drop-shadow(1px 6px 10px rgba(0, 0, 0, 0.25));
    width: fit-content;
    transform: translateY(-50%);
    padding: 10px 18px;
    background-color: white;

    transition-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
    transition-duration: 600ms;
}

.block-btn__left {
    transform: translate(-100%, 50%);
    z-index: 4;
    left: 0;
}

.block-btn__right {
    transform: translate(100%, 50%);
    z-index: 4;
    right: 0;
}

.betting-active .block-btn__left {
       transform: translateX(0);
}

.betting-active .block-btn__left:active {
    transform:  translateX(0) scale(1.05);
    box-shadow: 2px 2px 4px #000;
    transition: scale 1s;
}

.betting-active .block-btn__right {
    transform: translateX(0);
}

.betting-active .block-btn__right:active {
    transform:  translateX(0) scale(1.05);
    box-shadow: 2px 2px 4px #000;
    transition: scale 1s;
}


.analytics {
    filter: drop-shadow(1px 6px 10px rgba(0, 0, 0, 0.25));
    width: fit-content;
    position: absolute;
    left: 50%;
    padding: 22px 12px 5px;
    background-color: white;
    bottom: 0;
    transform: translate(-50%, 100%);
    background-image: url(./img/Vector.svg);
    transition-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
    transition-duration: 600ms;
    background-repeat: no-repeat;
    background-position: center 5px;
    z-index: 3;
}

.betting-active .analytics {
    bottom:50px;
    transform: translate(-50%, 0%);
}

.betting-active .analytics:active {
    transform:  translate(-50%, 0%) scale(1.05);
    box-shadow: 2px 2px 4px #000;
    transition: scale 1s;
}


.analytics-text {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
/* identical to box height */

    text-align: center;
    text-transform: capitalize;

    color: #007354;
}

/* ----------------------------------------------------------------------- */
/* Секция с гидами --------------------------------------------------------*/
/* ----------------------------------------------------------------------- */

#guide_content {
    width: 100%;
    position: absolute;
    margin-top: 0;
    margin-left: 0;
    z-index: 2;
    overflow: visible;
    height: 100%;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.guide_video {
    display: none;
    opacity: 0;
    /* width: 100%; */
    /* height: 100%; */
    position: absolute;
    /* transition: opacity 0.6s,left 1s; */
    transition: opacity 0.6s;
    /* left: -5px; */
    bottom: 0;
    height: 100%;
    top: 5%;
    transform: translate(-50%, 0%);
    left: 50%;

}
.guide_video.show {
    display: block;
    opacity: 1;
}

/* ----------------------------------------------------------------------- */
/* Страница предзагрузки --------------------------------------------------*/
/* ----------------------------------------------------------------------- */

#preloader-cnt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #007354;

    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

@keyframes preloaderAnimation {
    0% {
        -webkit-transform: rotate3d(0,0,1,0);
        transform: rotate3d(0,0,1,0);
    }
    25%, 33.5% {
        -webkit-transform: rotate3d(0,0,1,120deg);
        transform: rotate3d(0,0,1,120deg);
    }
    58.5%, 67% {
        -webkit-transform: rotate3d(0,0,1,240deg);
        transform: rotate3d(0,0,1,240deg);
    }
    100%, 92% {
        -webkit-transform: rotate3d(0,0,1,360deg);
        transform: rotate3d(0,0,1,360deg);
    }
}
#preloader {
    width: 80px;
    height: 80px;
    background: url(./img/preloding.svg) 0 0/cover;
    -webkit-animation: 3s linear infinite preloaderAnimation;
    animation: 3s linear infinite preloaderAnimation;;
    z-index: 100;
}
#preloader.stopped {
    animation:  0s ease 0s 1 normal none running none;
}

#preloader-status {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
}

.preloadedVideo {
    width: 100px;
    height: 100px;
    /*display: none;*/
}

/* ----------------------------------------------------------------------- */

video::-webkit-media-controls {
    display:none !important;
}

video::-webkit-media-controls-start-playback-button {
     display: none!important;
     -webkit-appearance: none;
}