﻿.margins{
    margin:2rem auto;
}
.paddings{
    padding:0 2rem
}
.bg-color{
    background-color:#1a1a1a;
}
.oddEven:nth-of-type(odd) {
background-color:#1a1a1a;
}
.oddEven:nth-of-type(even) {
background-color:#000000;
}
*{
    font-family: Cera-Ant1-black;
}
.site{
    max-width:1920px;
}
/*fade effect*/
.tile {
    -webkit-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    opacity: 0;
}
.inView {
    opacity: 1;
    
}
.main-category-link.games-link i {
	margin-left: 40px;
    margin-top:40px;
}
.main-category-link .fa-gamepad-modern {
	position: relative;
	opacity: 1;
	font-size: 24px;
	top: 13px;
}

/*section hero & hero swiper*/
.hero {
	margin-top: 160px;
}
.swiper.hero-playgames {
	margin: 0 auto;
}
.hero_games_slide .swiper-slide-content  h2,
.hero_games_slide .swiper-slide-content  p{
    margin:20px auto;
}
.btn-more-info {
	background: transparent;
	border: none;
    margin:20px auto;
}
.btn-more-info a {
	background-color: #3e3e3e;
}
.btn-more-info a:hover{
    background-color:#000000;
}
.topg_title, .newg_title{
    position:relative;
    overflow:hidden;
    display:inline-block;
    text-transform:uppercase;
    font-size: 1.5rem;
}

/*top games swiper*/
.swiper_top_games {
	max-width: 1400px;
	position: relative;
    padding:2rem 0;
}
.swiper_top_games .swiper-slide {
	width: 50%;
    border-radius:50px;
    align-self: center;
}
.swiper-carousel-animate-opacity {
	overflow: hidden;
    padding: 10px;
}
.swiper_top_games img {
	min-height: 350px;
	max-width: 100%;
	border-radius: 50px;
	object-fit: cover;
	object-position: center;
    box-shadow: 0px 0px 10px;
}
.swiper_top_games .caption {
	position: absolute;
	bottom: -50%;
	text-align: center;
	font-size: 18px;
	backdrop-filter: blur(6px);
	display: inline-block;
	padding: 10px;
	font-weight: 700;
	opacity: 0;
	transition: bottom 1s ease, opacity 1s ease;
	left: 50%;
	transform: translate(-50%, -50%);
    width: calc(100% - 20px);
}
.swiper-slide-fully-visible .swiper-carousel-animate-opacity:hover .caption {
	bottom: calc(50% - 40px);
    opacity: 1;
    transition: all 1s ease;
    transform: translateX(-50%);
}
.swiper_top_games .swiper-button-next,
.swiper_top_games .swiper-button-prev{
    color:#3e3e3e;
}
/*games all*/
.gameCollection {
	/*display: flex;
	gap: 15px;*/
	/*overflow-x: scroll;*/
    /*overflow:hidden;
	white-space: nowrap;*/
    padding-bottom:2rem;
}
.categ_swiper {
	overflow: hidden;
}

.swiper-button-next.cat:after,
.swiper-button-prev.cat:after{
    display:none;
}
.swiper-button-prev.cat{
    left:25px;
}
.swiper-button-next.cat i,
.swiper-button-prev.cat i{
    color:#3e3e3e;
}
.navigation-cat {
	position: absolute;
	width: 100%;
	height: 4rem;
	top: calc(50% - 1rem);
	left: 0;
}
/*.gameInfo {
	min-width: 400px;
}*/
.gameContent{
    position:relative;
    overflow:hidden;
}
.gameContent img {
	height: 250px;
	object-fit: cover;
	object-position: center;
	border-radius: 25px;
    min-width:100%;
}
.game_title {
	position: relative;
	bottom: 0;
	left: 0;
	margin: 0;
	font-size: 16px;
	text-align: left;
    text-wrap:wrap;
    transition:.5s;
}
.gameContent:hover .game_title {
	opacity: 0;
}
.fa-gamepad-modern {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 45px;
    opacity:0;
    transition:opacity 1s ease;
    font-weight:bold;
}
.gameInfo:hover .fa-gamepad-modern{
    opacity:1;
    transition:opacity 1s ease;
}
/*modal*/
    .gameModal {
      display: none;
      position: fixed;
      z-index: 99;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .gameModal .modal-content {
      border: 1px solid #888;
      width: 50%;
      /*position: relative;*/
      display: flex;
      flex-direction: column;
      min-height: 65vh;
      backdrop-filter: blur(15px);
      overflow:hidden;
      top:calc(50% + 80px);
    }
    .gameModal .modalTitle {
	  font-size: 1.5rem;
	  text-wrap: auto;
    }
    .no-scroll{
      overflow:hidden;
    }
    .gameModal .close {
	    color: #aaa;
	    font-size: 28px;
	    float: right;
	    position: absolute;
	    right: 10px;
	    top: 10px;
    }
    .gameModal .close:hover,
    .gameModal .close:focus {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    .gameModal .modalImage {
	    width: 50%;
	    border-radius: 20px;
	    margin: 0 auto;
	    height: auto;
	    object-fit: cover;
	    object-position: center;
    }
    .gameModal .modalImage2 {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    object-position: center;
	    opacity: .2;
	    z-index: -1;
    }
    .gameModal .modalGameDesc {
	    padding: 20px;
	    margin-top: 25px;
	    background-color: #1a1a1a;
	    border-radius: 20px;
        position:relative;
    }
    .gameModal .summary{
        margin-top:0;
        font-size:18px;
    }
    .gameModal .modalDescription {
	    font-size: 14px;
        text-wrap:wrap;
    }
    .gameModal .btn_play {
	    position: absolute;
	    bottom: -20px;
	    right: 20px;
	    background: #3e3e3e;
	    border: none;
	    padding: 10px;
	    border-radius: 20px;
        font-weight: 700;
    }
    .gameModal .btn_play:hover{
        background:#000000;
    }
    /*CATEGORY PAGE */
    .playgames_cat {
	    margin-top: 60px;
    }
    .playgames_cat .section-title {
	    padding: 1rem;
        font-size:1.5rem;
    }
    .innerCategory {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 15px;
	    padding: 1rem;
    }
    .innerCategory .gameInfo {
	    width: calc(20% - 12.5px);
	    min-width: unset;
	    max-width: 100%;
    }
    .innerCategory .gameContent img {
	    min-width: 100%;
    }
    .game_title {
	    position: absolute;
	    padding: 10px;
	    backdrop-filter: blur(20px);
	    margin: 20px;
	    border-radius: 25px;
    }
    .innerCategory .iconPlay{
        z-index:99;
    }
    .webtv-btn a{
        position:relative;
        z-index:9;
        border-radius:25px;
        overflow:hidden;
    }
    .webtv-btn a:before{
        position:absolute;
        content:'';
        top:0;
        left:0;
        width:1%;
        height:100%;
        background-color:#ef3d5d;
        z-index:-1;
        transition:.5s;
    }
    .webtv-btn a:after{
         position:absolute;
        content:'';
        top:0;
        right:0;
        width:1%;
        height:100%;
        background-color:#ef3d5d;
        z-index:-1;
        transition:.5s;
    }
    .webtv-btn:hover a:before, .webtv-btn:hover a:after{
        width:50.5%;
    }
/*icons for sections bgs*/
.fa-thin.fa-ghost{
    position:absolute;
    bottom:0;
    right:0;
    transition: all 0.5s linear;
    animation: moveUpDown 3s infinite alternate linear;
    font-size:100px;
    opacity:.1;
}

@keyframes moveUpDown{
      0% {
        bottom: 10%;
        right: 10%;
        transform: translate(0, 0);
    }
    100% {
        bottom: 20%;
        right: 5%;
        transform: translate(45px, 0);
    }
}
.fa-thin.fa-xmark {
	position: absolute;
	top: 100px;
	font-size: 50px;
	color: #1a1a1a;
	font-weight: 300;
	left: 100px;
    animation:spin 3s linear infinite;
}

@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

.load_more_games{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    padding-bottom:1rem;
}
.frame_cat{
    position:relative;
}
.videoFrame {
	display: block;
	min-height: calc(110vh - 200px);
	position: relative;
	margin-top: 30px;
	border: 0;
}
.fal.fa-expand-wide {
	position: absolute;
	top: 40px;
	left: 10px;
	font-size: 30px;
}
.fal.fa-expand-wide:hover{
    cursor:pointer;
}
.main-category-link.games-link i {
    left: 0;
    top: 0;
    margin-top: 15px;
    margin-left: 15px;
    font-size: 40px;

}
.main-category-link .fa-gamepad-modern:after {
    content: '123PG';
    font-size: 0.53rem;
    display: block;
    margin-top: 2px;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 0.5s ease-out;
}

.main-category-link:hover .fa-gamepad-modern:after {
    top: 25px;
    opacity: 1;
    transition: all 0.5s ease-out;
}
.infinite-more{
    width:100%;
}
.infinite-more.dark .icon {
	border-color: #1a1a1a;
}

.extra_content {
    display: flex; 
    flex-wrap: wrap;
    gap:15px;
}
.extra_content .gameInfo {
    width: calc(25% - 11.5px);
}
.infinite-more.dark .icon {
    border-color: #000;
}
.custom-header-logos .fa-gamepad-modern:first-of-type{
    position:relative;
    top:unset;
    left:unset;
    transform:unset;
}