@keyframes slide-in {
    0% {
        top: -100%;
    }
    100% {
        top: 50%;
    }
}
.link-container {
display: flex;
justify-content: center;
font-size: var(--x-large-font);
padding: 0;
width: 100%;
}
.link-container a {
width: 50%;
text-align: center;
padding: 15px 20px;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
}
.register-button {
background-image: linear-gradient(rgb(104, 2, 2), rgb(203, 0, 0));
background-color: initial;
}
.login-button {
background-image: linear-gradient(rgb(0, 12, 153), rgb(7, 71, 102));
background-color: initial;
}
*{
font-family: sans-serif;
box-sizing: border-box;
}

p{
margin: 0;
}

body{
background-image: url("https://i.ibb.co/ZzZgJBq/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center !important;
background-size: cover !important;
min-height:100vh;
height:100%;
}

a:hover{
text-decoration: none;
color: white;
}

.container{
width: 100%;
margin-left: auto;
margin-right: auto;
}

.adv{
justify-content: center;
display: flex;
flex-wrap: wrap;
}

img{
vertical-align: middle;
border-style: none;
}

.title{
display: flex;
justify-content: center;
}

.title-text{
color: white;
font-size: 2.5rem;
}

.slot{
display: block;
}

.slot .slot-sidebar{
padding-right: 10px;
padding-left: 0;
margin-top: -15px;
background-color: black;
float: none !important;
width: 100% !important; 
flex: none !important;
max-width: 100% !important;
padding-right: 0 !important;
}

.btn-provider:hover{
background-color: #644C1C;
}

.slot-sidebar-nav{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: nowrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}

.slot-sidebar-nav > li {
border-bottom: 1px solid #0092b1;
width: 100%;
position: relative;
display: block;
border-bottom: none;
padding: 6px;
background: linear-gradient(to bottom,#a88402  0%,#a88402  46%,#a88402 100%);
}

.slot-sidebar-nav > li > a{
color: #fff;
font-size: 13px;
padding: 7px 10px;
display: block;
background-color: black;
}

.btn-provider{
text-align: center;
display: block;
}   

.enter{
display: none;
}

.btn-provider span{
position: unset;
}

.active{
background-color: #0092B1;
}

.slot .content{
float: none;
width: 100%;
padding: 0;
flex: 0 0 100%;
max-width: 100%;
background-color: #a88402;
}

.wrapper{
width: 100%;
padding: 0;
white-space: nowrap;
overflow: hidden;
position: relative;
z-index: 0;
}

.card{
float: left;
width: 20%;
background: transparent;
border: none;
text-align: center;
position: relative;
}

.card-content{
margin: 5px;
color: #fff;
font-size: 12px;
border: none;
overflow: hidden;
position: relative;
}

.percent{
height: 27px;
display: flex;
overflow: hidden;
line-height: 0;
font-size: .75rem;
background-color: #e9ecef;
position: relative;
z-index: 1;
border-radius: 10px;
width: 90%;
margin: 0 auto;
}

.percent p{
z-index: 15;    
position: absolute;
text-align: center;
width: 100%;
font-size: 14px;
font-weight: bold;
transform: translateY(14px);
color: black;
}

.percent-bar{
/* background-color: #ffc107; */
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 1rem 1rem;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
/* background-color: #007bff; */
transition: width .6s ease;
-webkit-animation: progress-bar-stripes 1s linear infinite;
animation: progress-bar-stripes 1s linear infinite;
/* animation: ; */
z-index: 10;
}

.yellow{
background-color: #ffc107;
}

.green{
background-color: #28a745;
}

.red{
background-color: #dc3545;
}

.hover-btn{
position: absolute;
opacity: 0;
background-color: rgba(0,0,0,0.9);
transition: all 0.1s ease-in-out;
z-index: 10;
width: 100%;
height: 87%;
}

.maintenance{
position: absolute;
background-color: rgba(0,0,0,0.5);
z-index: 10;
width: 100%;
height: 100%;
color: white;
text-align: center;
margin: -6px;
}

.maintenance p{
position: relative;
top: 40%;
font-size: 13px;
}

.play-btn{
font-size: 15px;
text-decoration: none;
color: white;
text-align: center;
align-items: center;
/* width: 100%; */
margin-top: 42%;
padding: 8px;
display: block;
margin-left: 30px;
margin-right: 30px;
margin: 42% 30px 42% 30px;
background: linear-gradient(to bottom,#fff095 0%,#b88416 88%);
color: #000;
border-radius: 18px;
transition: all .3s ease;;
}

.play-btn:hover{
background: linear-gradient(to top,#fff095 0%,#b88416 88%);
}

.img-zoom{
transition: all 0.45s ease-in-out;
}

.ygg-img{
border: 5px solid #2F2F2F;
}

.hover-btn:hover{
opacity: 100%;
}

.hover-btn:hover ~ .img-zoom{
/* transform: scale(1.2); */
position: relative;
}

.short{
display: none;
}
.next-btn{
/* display: none; */
background: linear-gradient(to bottom,#242424 0%,#515151 46%,#242424 100%);
width: 15%;
}

.mySlides{
display: none;
}

.next-btn{
background-color: #292a2b;
border: none;
color: #fff;
}

@media (min-width: 576px){
.container{
max-width: 540px;
}

}

@media (min-width: 768px){
.container{
max-width: 720px;
}

}

@media (min-width: 992px){
.container{
max-width: 960px;
}
}

@media (min-width: 1200px){
.container{
max-width: 1140px;
}

}

@media (max-width: 992px) {
.slot-sidebar-nav{
flex-wrap: nowrap;
}
.slot-sidebar{
float: none !important;
width: 100% !important; 
flex: none !important;
max-width: 100% !important;
padding-right: 0 !important;
}
.content{
float: none !important;
width: 100% !important;
flex: none !important;
max-width: 100% !important;
}
.card{
width: 33.3% !important;
}
.hover-btn{
display: none;
}
.hover-btn:hover ~ .img-zoom{
transform: scale(1);
position: relative;
}
.btn-provider{
text-align: center;
display: block;
}  
.enter{
display: block;
}
.btn-provider span{
position: unset;
}
.btn-provider i{
margin: 0;
}
.slot-sidebar-nav li{
border-bottom: none;
}
.slot-sidebar-nav li a p{
font-size: 13px;
}
.img-zoom{
height: auto;
}
.slot-sidebar-nav li a img{
height: 37.5px !important;
}
.maintenance p{
font-size: 5px;
}
}