.ml-3{margin-left:12px!important}
.p-1{padding: 4px}
.bgimage{background-size:cover}

.main{display:flex; align-items:stretch; width:100%; max-width:100%; height:90vh}
.main-banner-container{position:relative; display:flex; width:75%; background-color:var(--primary)}
.main-banner{position:absolute; left:-1000%; width:100%; height:100%; background-size:cover; background-position:center center}
.main-banner-content{position:relative; width:100%; height:100%; background-color:rgba(141,144,227,0.45); filter:contrast(1.5)}
.main-menu-bg{background-color:var(--primary); width:25%; background-size:cover; background-position: center center; background-repeat:no-repeat; z-index:1}
.main-menu{height:100%; background-color:var(--primary); opacity:0.85}

.main-menu > a{display:flex; align-items:center; padding:25px; border-bottom:1px solid; border-color:var(--bordercolor); color:white; font-size:18px; text-transform:uppercase}
.main-menu > a:hover{background-color:var(--primarydark)}
.main-menu > a > img{width:40px; height:40px}
.main-menu > a > div{margin-left:15px}

.slide-center{top:0; right:0; bottom:0; left:0}
.slide-right{top:0; right: 0; bottom:0; left:100%; display:none}
.slide-left{top:0; right: 0; bottom:0; left:-100%}

.title-cat{display:inline-block; margin:200px 0 0 100px; padding:5px 15px; background-color:rgba(255,255,255,0.6); border:1px solid; border-color:rgba(255,255,255,0.1); backdrop-filter:blur(10px); color:black; border-radius:25px}
.main-banner-title{display:block; margin:25px 0 0 100px; color:white; font-size:46px; font-weight:600; width:100%; max-width:725px; text-shadow: #484671 1px 1px 1px}

.next-prev{position:absolute; top:450px; left:100px; display:flex; justify-content:space-between; width:100%; max-width:700px}

.round {position:relative; display:flex; justify-content:center; align-items:center; width:40px; height:40px; border:2px solid; border-color:white; border-radius:100%; cursor:pointer}
.arrow {width:12px; height:12px}
.arrow:hover{cursor:pointer}
.arrow-margin-right{margin-right:5px}
.arrow-margin-left{margin-left:5px}

.bottom-container{display:flex; justify-content:space-between; width:100%; background-color:white}
.bottom-title{margin-top:75px; font-size:28px; font-weight:400; text-align:center; color:var(--primarydark)}
.bottom-title-selector{display:none; margin-top:25px}

.left-container{margin:0 25px; width:25%}

.center-container{margin:0 25px; width:50%; max-width:900px}

.post-activity{position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:25px; color:#202020}
.post-activity > div:last-of-type > div, .post-activity > div:last-of-type > a{margin:0 10px}
.post-activity > div:last-of-type{display:flex; justify-content:space-between; align-items:center}

.right-container{margin:0 25px; width:25%}
.test{display:flex; flex-direction:column-reverse; margin:25px 0; padding:25px 0}
.test-border{border-bottom:1px solid; border-color:#e3e3f6}
.test:last-of-type{border-bottom:0}
.test-image{margin:0 auto; width:150px; height:150px; background-size:contain; background-repeat:no-repeat}
.test-image > div{width:100%; height:100%; background-color:rgba(141,144,227,0.5); filter:contrast(1.5)}
.test-data{margin:0; text-align:center}
.test-name{display:block; margin:25px 0; font-weight:600; color:#202020; text-transform:uppercase; font-size:20px}
.test-desc{display:block; overflow:hidden; color:#202020; text-align:justify}

.test-show{display:flex}
.test-hide{display:none}

.test-show-ref{text-align:center}
.test-show-ref > a{display:inline-block; padding:10px 25px; border-radius:10px; background-color:var(--secondary); color:white}

.next {background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);}
.prev {background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);}

.anounce{display:flex; flex-direction:column; align-items:center}
.anounce > a{display:block; margin:25px 0; height:400px; text-align:center}
.anounce > a > img{height:100%}

@keyframes bounceAlpha {
 0% {opacity: 1; transform: translateX(0px) scale(1)}
 25%{opacity: 0; transform:translateX(10px) scale(0.9)}
 26%{opacity: 0; transform:translateX(-10px) scale(0.9)}
 55% {opacity: 1; transform: translateX(0px) scale(1)}
}

@keyframes bounceAlphaReverse {
 0% {opacity: 1; transform: translateX(0px) scale(1)}
 25%{opacity: 0; transform:translateX(-10px) scale(0.9)}
 26%{opacity: 0; transform:translateX(10px) scale(0.9)}
 55% {opacity: 1; transform: translateX(0px) scale(1)}
}

.bounceAlpha {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.bounceAlphaReverse {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.arrow.primera.bounceAlpha {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-delay:0.2s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.round:hover .next{
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.round:hover .prev{
 animation-name: bounceAlphaReverse;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.animation-center-to-left {
 animation-name: animation-engine-center-to-left;
 animation-duration: 0.8s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

@keyframes bounceAlpha {
 0% {opacity: 1; transform: translateX(0px) scale(1)}
 25%{opacity: 0; transform:translateX(10px) scale(0.9)}
 26%{opacity: 0; transform:translateX(-10px) scale(0.9)}
 55% {opacity: 1; transform: translateX(0px) scale(1)}
}

@keyframes bounceAlphaReverse {
 0% {opacity: 1; transform: translateX(0px) scale(1)}
 25%{opacity: 0; transform:translateX(-10px) scale(0.9)}
 26%{opacity: 0; transform:translateX(10px) scale(0.9)}
 55% {opacity: 1; transform: translateX(0px) scale(1)}
}

.bounceAlpha {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.bounceAlphaReverse {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.arrow.primera.bounceAlpha {
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-delay:0.2s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.round:hover .next{
 animation-name: bounceAlpha;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.round:hover .prev{
 animation-name: bounceAlphaReverse;
 animation-duration:1.4s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}

.animation-center-to-left {
 animation-name: animation-engine-center-to-left;
 animation-duration: 0.8s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

.event{padding:25px 0; border-bottom:1px solid; border-color:#e3e3f6}
.event:last-of-type{border-bottom:0}
.event-dt{margin-bottom:25px; color:rgb(79,90,110)}

.event-cat-pay{margin-top:25px}
.event-cat{color:var(--primarydark)}
.event-ref{display:inline-block; margin-top:25px; padding:5px 25px; background-color:var(--secondary); color:white; border-radius:10px}
.event-pay-0{color:#008000}
.event-pay-1{color:var(--secondary)}

.search-post{display:flex; align-items:center; width:100%}
.search-post > input{font-size:20px; border:0}
.search-post > a{margin-left:25px; color:#999; font-size:24px}
.search-post-input{display:flex; align-items:center; padding:10px; width:90%; border:1px solid; border-color:#999; font-size:18px}
.search-post-input > input{padding:5px 25px; width:100%; border:0; box-sizing:border-box; font-size:18px; outline:none}
.search-post-input > a{color:#999}

.last-tg-post{margin:50px auto; width:100%; max-width:350px; border:1px solid; border-color:var(--primary)}
.last-tg-post-header{display:flex; justify-content:space-evenly; padding:15px 0; background-color:var(--primary); color:white; text-align: center}
.last-tg-post-header-image{width:25px; height:25px; border-radius: 50%}
.last-tg-post-text{padding:25px}


.card-game-container{margin-bottom:50px; text-align: center}
.card-game-active > .card-game-front{transform: perspective(600px) rotateY(-180deg)}
.card-game-active > .card-game-back{transform: perspective(600px) rotateY(0deg)}

.card-game-back{background-size:cover; background-repeat: no-repeat; background-position: center center; color:white; text-align:center; transform:perspective(600px) rotateY(180deg); box-sizing:border-box}

.card-game-card{display:inline-block; margin:25px; width: 340px; height: 450px; cursor: pointer}
.card-game-front, .card-game-back{overflow: hidden; backface-visibility: hidden; position: absolute; transition: transform .6s linear}
.card-game-front{border-radius:25px; transform: perspective(600px) rotateY(0deg)}

.card-game-card{width:250px; height:381px}
.card-game-back{position:relative; width:250px; height:381px; border-radius: 25px; box-sizing:border-box}
.card-game-back-content{position:absolute; top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; padding:0 25px; background-color:rgba(141,144,227,0.45); filter:contrast(1.5); text-shadow:#484671 1px 1px 1px; box-sizing:border-box}
.card-game-front{width:250px; height:381px}
.card-game-front img{display:block; width:100%}

@media (max-width:980px) {
 .card-game-card{margin:2px; width:145px; height:220px}
 .card-game-back{width:145px; height:220px; font-size:12px}
 .card-game-front{width:145px; height:220px}
 .card-game-front img{height:220px}
}

@media (max-width:1233px) { 
 .main{flex-direction:column; width:100%; height:fit-content}
 
 @media (orientation: portrait) {
  .main-banner-container{width:100%; height:600px}
 }
 
 @media (orientation: landscape) {
  .main-banner-container{width:100%; height:500px}
 } 
 
  
 .main-menu-bg{width:100%; height:100%}
 .title-cat{position:absolute; right:25px; bottom:30px}
 .main-banner-title{margin:0; padding:25px 0 0 25px; font-size:28px; width:100%; max-width:75%}
 .next-prev{position:absolute; bottom:55px; top:unset; left:25px !important; justify-content:flex-start; bottom:25px; width:225px; max-width:225px}
 .reserve-left, #a-left{margin-right:50px}

 .bottom-container{flex-direction:column; margin:0}
 .bottom-title{margin:25px 0; color:var(--secondary)}
 .bottom-title-selector{display:flex; justify-content:space-between; font-size:20px}
 .bottom-title-refs{display:flex; justify-content:space-between}
 .bottom-title-refs > a{margin:0}

 .left-container, .center-container, .right-container{margin:0 25px; width:unset}
 .left-container, .right-container{display:none}

 .test-image{width:200px; height:200px}
 
 .anounce > a{width:75%; height:unset}
 .anounce > a > img{width:100%; height:unset}
 
 .test-show-ref{margin-bottom:50px} 
 .round:hover .next{animation-name:unset}
 
 .search-post{margin-top:50px; margin-bottom:50px}
 .round:hover .next{animation-name:unset; animation-duration:unset; animation-iteration-count:unset; animation-timing-function:unset}
 .round:hover .prev{animation-name:unset; animation-duration:unset; animation-iteration-count:unset; animation-timing-function:unset}
 
 .main-banner{background-repeat:no-repeat}  
}

@media (max-width:800px) {
 .main-banner-container{height:400px}
}

@media (max-width:600px) {
 .main-banner-container{height:300px}
}

@media (max-width:400px) {
 .main-banner-container{height:250px}
}