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

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

/*====================================================
	You can put your custom css code here: 
====================================================*/
@font-face {
	font-family: "bpg_arial_2009.ttf";
	src: url(../assets/fonts/bpg_arial_2009.ttf);
}
@font-face {
	font-family: "bpg-arial-caps-webfont.ttf";
	src: url(../assets/fonts/bpg-arial-caps-webfont.ttf);
}
@font-face {
	font-family: "bpg-nino-mtavruli-bold-webfont.ttf";
	src: url(../assets/fonts/bpg-nino-mtavruli-bold-bl-edition.ttf);
}
@font-face {
	font-family: "bpg_nino_mtavruli_normal.ttf";
	src: url(../assets/fonts/bpg_nino_mtavruli_normal.ttf);
}
*{
    font-family: "bpg-nino-mtavruli-bold-webfont.ttf" !important;
}
.en * ,
.ru * {
    font-family: "bpg_arial_2009.ttf" !important;
}
/* HEADER STYLE */
#header{
    align-items: center
}
.lang-wrapper{
    position: relative;
    width: 31px;
    overflow: hidden;
    height: 22px;
    right: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .25);
    border-radius: 2px;
    -webkit-transition: all 200ms ease;
       -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
         -o-transition: all 200ms ease;
            transition: all 200ms ease;
}
.lang-wrapper:hover{
    width: 92px;
}
.flag{
    position: relative;
    z-index: 0;
    float: left;
    width: 25px;
    height: 16px;
    margin: 3px;
    border-radius: 2px;
    cursor: pointer;
    opacity: .65;
    -webkit-transition: all 200ms ease;
       -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
         -o-transition: all 200ms ease;
            transition: all 200ms ease;
}
.flag:hover{
    opacity: 1;
}
.flag.active{
    position: absolute;
    right: 0;
    opacity: 1;
    z-index: 1;
}
.ka-flag{
    
    background: url('../assets/img/ka.png') center no-repeat;
}
.en-flag{
    background: url('../assets/img/en.png') center no-repeat;
}
.ru-flag{
    background: url('../assets/img/ru.png') center no-repeat;
}
.zIndex{
    z-index: 5 !important;
}

.mobile-slide-navigation-wrapper{
    display: none;
}
.hashtag{
    margin-right: 20px;
}
.colorChange-wrapper{
    background-color: #3e424b;
    color: white;
    width: 220px;
    border-radius:2px;
    z-index: 9999999;
    margin: 270px 200px;
    -webkit-box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
    box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
}
.colorChange-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
}
.colorChange-body-wrapper{
    padding: 8px;
    background-color: #33363e;
    border-radius: 2px;
}
.colorChange-action{
    color: #858586;
    background-color: #292b32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 10px;
}
.color-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75px;
    background: #1d2027;
    border: 1px solid #2c2f37;
    border-radius: 15px;
    padding: 3px 5px;
    min-height: 30px;
}
.selector-circle{
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: black;
    border: 1px solid rgba(133, 133, 134, 0.5);
    cursor: pointer;
    transition: all .2s;
}
.selector-circle.active{
    width: 20px;
    height: 20px;
    background-color: #33363e;
    border: 1px solid rgba(0, 0, 0, .3);
}
.selector-circle:not(.active){
    animation: bounce 1000ms infinite;
}
#testimonial{
    background-position: center !important;
}
@keyframes bounce {
    0%{
        border: 1px solid rgba(133, 133, 134, 0.5);
    }
    50%{
        border: 1px solid #ff1644;
        background-color: #ff1644;
    }
    100%{
        border: 1px solid rgba(133, 133, 134, 0.5);
    }
}
.blackt-text, .white-text{
    cursor: pointer;
}
.white-text{
    color: white;
}
.toggle-text{
    color: rgba(255, 255, 255, 0.4);
}
.toggle-text.active{
    color: rgba(255, 255, 255, 1);
}

.betslip-desktop{
    width: 150px;
    margin: -30px 0 0 205px;
    -webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    border-radius: 3px;
}
.winAnimated{
    transition: all 200ms ease-in-out;
}
.triple-mockup .active-window{
    transform: scale(1.1);
}
.margin-top-mobile .feature-box{
    cursor: pointer;
}
h6{
    color: #ff1644;
}
.process-slider-nav.active .icon {
    fill: #ffffff;
}
.process-slider-nav.active .icon:before {
    background-color: #ff1644;
}
.process-slider-nav-desktop.active .icon {
    fill: #ffffff;
}
.process-slider-nav-desktop.active .icon:before {
    background-color: #ff1644;
}

/* media */
@media (max-width: 992px) {
    .mobile-slide-navigation-wrapper{
        display: block;
        margin: 0 auto;
    }
    .hide-mobile{
        display: none;
    }
    .center-content{
        display: flex !important;
        justify-content: center !important;
    }
    .inline-flex{
        display: inline-block
    }
    .mobile-slide-navigation-wrapper .feature-box:hover .icon{
        color: #333333;
    }
    .mobile-slide-navigation-wrapper .feature-box:hover .icon::before{
        background-color: #ffffff;
    }
    .mobile-slide-navigation-wrapper .feature-box .icon:hover::before{
        background-color: #ff1644;
    }
    .mobile-slide-navigation-wrapper .feature-box .icon:hover{
        fill: white;
    }
    .feature-box.icon-right .content{
        margin-right: 0;
    }
    .feature-box:hover .icon {
        fill: #333;
    }
    .process-slider-nav:hover{
        fill: #fff;
    }
    /*sl*/
    .page-banner.banner-default {
        height: auto;
        min-height: 90vh;
        padding-bottom: 20px;
    }
    .page-banner.banner-default .banner-content {
        padding-top: 80px;
        padding-bottom: 10px;
    }
    #features-2, #more-features {
        padding-top: 20px;
    }
    .icon-wrapper{
        align-items: center;
        display: flex;
    }
    .icon-wrapper > .icon{
        margin: 0 5px;
    }
}
@media (max-width: 767px) {
    .colorChange-wrapper{
        background-color: #3e424b;
        color: white;
        width: 220px;
        border-radius:2px;
        z-index: 9999999;
        margin: 170px 150px;
    }
}
@media (max-width: 575px) {
    .colorChange-wrapper{
        background-color: #3e424b;
        color: white;
        width: 220px;
        border-radius:2px;
        z-index: 9999999;
        margin: 20px 0;
        position: initial !important;
    }
    .feature-box.icon-left .icon:before, .feature-box.icon-right .icon:before {
        width: 50px;
        height: 50px;
    }
    
    .feature-box.icon-left.top .icon, .feature-box.icon-right.top .icon {
        width: 50px;
    }
    .feature-box.icon-left .icon, .feature-box.icon-right .icon{
        min-width: 62px;
        height: 62px;
    }
    .betslip-desktop{
        width: 100px;
        margin: -30px 0 0 60px;
        -webkit-box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
        -moz-box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
        box-shadow: 0px 0px 18px -1px rgba(0,0,0,0.57);
    }
    .page-banner.banner-default{
        background-position: 0 50% !important;
    }
}