html{
    font-family:sans-serif;
   
}
p{
    margin:0;text-align:justify;
    color:#fff}
h2{
    color:#0092b1;
     text-align: center;
}
.site-description{
    padding:20px;
}
/* body{background:url(#) no-repeat fixed; */
body{
    background:url(/) no-repeat fixed;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom center;
    background-color:#1f0e0e;
    background-size:130%;
}
a:hover{
    text-decoration:none;
    color:#fff
}
.container{
    width:100%;margin-left:auto;
    margin-right:auto;
}
.adv{justify-content:center;
    display:flex;
    flex-wrap: nowrap;
}
img{
    vertical-align:middle;
    border-style:none;
}
.title{
    display:flex;
    justify-content:center;
}.title-text{
    color:#fff;
    font-size:2.5rem;
}
.slot{
    display:block;
}
.slot .slot-sidebar{
    padding-right: 0px;
    padding-left:0;
    margin-top:-10px;
    margin-bottom:5px;
    background-color:#4b1b1b;
    float:none;
    width:100%;
    flex:none;
    max-width:100%;
 
}
.btn-provider:hover{
    background-color:#830f28;
    box-shadow: inset 2px 3px 3px 0 #000000, inset 3px 3px 3px 0 #000000;
 
}
.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{
    width:100%;position:relative;
    display:block;
    padding:10px;
    background-color:#4b1b1b;

}
.slot-sidebar-nav>li>a{
    text-decoration:none;
    color:#fff;
    font-size:25px;
    padding: 5px 0px;
    display:block;
    background-image:linear-gradient(#762323,#540D0D);
    box-shadow: 2px 2px 2px #000000;
}
.btn-provider{
    text-align:center;
    display:block;
    border-radius: 5px 5px 5px 5px;
}
.enter{
    display:none;
}
.btn-provider span{
    position:fixed;
}
.active{
    background-color:#0092b1;
}
.slot .content{
    float:none;
    width:100%;
    padding:0;
    flex:0 0 100%;
    max-width:100%;
    background-color:#4b1b1b;
}
.wrapper{
    width:100%;
    padding:0;
    white-space:nowrap;
    overflow:hidden;
    position:relative;
    z-index:0;
}
.card{
    float:left;
    width:20%;
    background:0 0;
    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:5px;
    width:90%;margin:0 auto;
}
.percent p{
    z-index:15;
    position:absolute;
    text-align:center;
    width:90%;
    font-size:14px;
    font-weight:700;
    transform:translateY(14px);
    color:#000
}
.percent-bar{
   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;
    transition:width .6s ease;
    
    animation:progress-bar-stripes 1s linear infinite;z-index:10;
}
.red{
    background-color:#dc3545;
}
.yellow{
    background-color:#ffd700;
}
.green{
    background-color:#28a745;
}
.hover-btn{
    position:absolute;
    opacity:0;
    background-color:rgba(0,0,0,0.76);
    transition:all .1s ease-in-out;z-index:10;
    width:100%;
    height:87%;
}
.maintenance{
    position:absolute;
    background-color:rgba(0,0,0,.5);
    z-index:10;
    width:100%;
    height:100%;
    color:#fff;
    text-align:center;
    margin:-6px;
}
.maintenance p{
    position:relative;
    top:40%;
    font-size:13px;
}
.play-btn{
    font-size:15px;
    text-decoration:none;
    color:#fff;
    text-align:center;align-items:center;
    margin-top:42%;
    padding:8px;
    display:block;
    margin-left:30px;
    margin-right:30px;
    margin:42% 30px;
    background:linear-gradient(to bottom,#970a0a 0%,#762323 88%);
    
    border-radius:18px;
    transition:all .3s ease;
}
.play-btn:hover{
    background:linear-gradient(to top,#970a0a 0%,#762323 88%);
}
.img-zoom{
    transition:all .45s ease-in-out;
}
.ygg-img{
    border:5px solid #2f2f2f;
}
.hover-btn:hover{
    opacity:100;
}
.hover-btn:hover~.img-zoom{
    position:relative;
}
.short{
    display:none;
}
.next-btn{
    background:linear-gradient(to bottom,#a00000 0%,#515151 46%,#242424 100%);
    width:15%;
}
.mySlides{
    display:none;
}
.next-btn{
    background-color:#292a2b;
    border:none;
    color:#fff;
}

    .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;
                width:100%;
                flex:none;
                max-width:100%;
                padding-right:0;
                
            }
            .content{
                float:none;
                width:100%;
                flex:none;
                max-width:100%;
                
            }
            .card{
                width:33.3%;
                
            }
            .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:fixed;
                
            }
            .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;
            
            }
            .maintenance p{
                font-size:5px;
                
            }}
@keyframes slide-in {
    0% {
        top: -100%;
    }
    100% {
        top: 50%;
    }

}
p,ul {
    color: #fff;
    font-family: century gothic;
}

.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;
    font-weight: bold;
    font-size:25px;
    text-decoration: none;
}



.register-button {
    background-image: linear-gradient(#ffa800, #FFBC39);
    border-radius: 5px 5px 5px 5px;
    margin: 5px 2px;
    text-shadow: 0 2px 1px rgb(0 0 0 / 25%);
}

.register-button:hover {
  background-image: linear-gradient(#FFBC39, #ffa800);
  border-radius: 5px 5px 5px 5px;
  margin: 5px 2px;
  text-shadow: 0 2px 1px rgb(0 0 0 / 25%);
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ffa800;
  color: black;
}

.topnav a.active {
  background-color: #ffa800;
  color: white;
}