/*----pagination--------------*/
nav.custom-pagination{
	color:#fff
}
/*body{*/
/*	color: #fff;*/
/*}*/

  .title-desc h3 ,.title-desc h2{
      
        color:#fff !important;
    }
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

.wrap-card.animate.pop .text ul li{
    line-height:22px;
}
/*---------------------------------*/
.text-desc {
  display: flex;
  justify-content: center;
  flex-direction:column;
}

.text-desc.hide {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.text-desc.show {
  -moz-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  
  overflow: hidden;
}

h2.slide-left.pop  {
	font-size: 22px !important;
	text-align: center;
	color: #FBFBFB !important;
    /*transform: rotate(-90deg);*/
	writing-mode: tb-rl;
	white-space: nowrap;
	display: inline-block;
	overflow: visible;
	transform: rotate(-180deg);
	transform-origin: 50% 50%;
}
p {
	font-size: max(10pt, 2.5vmin);
	line-height: 1.4;
	color: #0e390e;
	margin-bottom: 1.5rem;

}
.text ul{
    padding-right: 20px !important;
}
.text ul li{
margin: 10px 0;
font-size: 14px;
font-weight: 400;
	list-style: initial;
}
.text ul li span{
    font-size: 15px;
    font-weight: 600;
    margin-right: 0px;
}
.wrap-card {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
    /*min-height: 360px;*/
	/* height: 25em; */
	/* margin: 2rem auto; */
	/* border-image: linear-gradient(-50deg, green, #00b300, forestgreen, green, lightgreen, #00e600, green) 1; */
    border: 2px solid #2389C9;
    border-radius: 10px;
	transition: .3s ease-in-out;
	position: relative;
	overflow: hidden;
}
.overlay {
	position: relative;
	display: flex;
	width: 100%;
	/* height: 100%; */
	/* padding: 1rem .75rem; */
	background: transparent;
	transition: .4s ease-in-out;
	z-index: 1;
    justify-content: end;
}
.overlay-content {
	display: flex;
	/*flex-direction: column;*/
	/*justify-content: space-between;*/
	width: 25%;
	height: 100%;
	/* padding: .5rem 0 0 .5rem; */
	/* border: 3px solid;
	border-image: 
    	linear-gradient(
      	to bottom, 
      	#AEA724 5%,
      	forestgreen 35% 65%,
      	#AEA724 95%
    	) 0 0 0 100%; */
	transition: .3s ease-in-out .2s;
	z-index: 1;
   justify-content: center;
}
.image-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	height: 100%;
	/* background-image: url("https://assets.codepen.io/4787486/trees.png"); */
    /*background-image: url(./images/image-Wireframe.png);*/
	background-size: cover;
    background-position: center;
	transition: .3s ease-in-out;
	/* border: 1px solid green; */
}

.inset {
	max-width: 50%;
	margin: 0.25em 1em 1em 0;
	border-radius: 0.25em;
	float: left;
}
.custom-pagination .paginations{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top:50px
}
.custom-pagination .paginations a{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 34px;
	height: 34px;
	border:1px solid #2389C9;
	border-radius: 5px;
	color:#FBFBFB;
	margin: 0 10px;
	transition: background-color .5s;
}
.custom-pagination .paginations a:hover{
	background-color: #2389C9 ;
	color: #FBFBFB;
	transition: background-color .5s;
}
.custom-pagination span.page-numbers.current{
	background: #2389C9 ;
	color: #FBFBFB;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 34px;
	height: 34px;
	border:1px solid #2389C9;
	border-radius: 5px;
	margin: 0 10px;
}
.custom-pagination a.prev.page-numbers{
	border: none;
	width: 51px;
	height: 34px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: end;
}
.custom-pagination a.prev.page-numbers:hover{
    background:transparent !important;
}
.custom-pagination a.next.page-numbers{
	border: none;
	width: 52px;
	height: 34px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: end;
}
.custom-pagination a.next.page-numbers:hover{
    background:transparent !important;
}
.custom-pagination span.dots {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 34px;
	height: 34px;
	border:1px solid #2389C9;
	border-radius: 5px;
	color:#FBFBFB;
	margin: 0 10px;

}
.custom-pagination .dot {
	width: 14px;
	height: 14px;
	background: yellow;
	border: 1px solid indigo;
	border-radius: 50%;
	transition: .3s ease-in-out .3s;
}

.text {
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	height: 100%;
	padding: 30px 15px;
	background: #2389C9;
	box-shadow: inset 1px 1px 15px 0 rgba(0 0 0 / .4);
	/* overflow-y: scroll; */
    overflow: hidden;
    text-align: right;
    color: #fff;
}
.wrap-card.animate.pop h2{
    font-size:18px !important
}
.wrap-card:hover .overlay
 {
	transform: translateX(-75%);
}
.wrap-card:hover .image-content {
	width: 50%;
}
.wrap-card:hover .overlay-content {
	border: none;
	transition-delay: .2s;
	transform: translateX(70%);
}
.checkbox-area{
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	direction: ltr;
	/*border: 2px solid;*/
	border: none !important;

}
.checkbox-wrapper-4{
	direction: rtl;
}
.checkbox-area::-webkit-scrollbar {
	width:5px;
	right:0

}
.checkbox-area::-webkit-scrollbar-track {
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
	border-radius:5px;
}
.checkbox-area::-webkit-scrollbar-thumb {
	border-radius:5px;
	-webkit-box-shadow: inset 0 0 6px #2389C9;
}
.wrap-card:hover .dots {
	transform: translateX(1rem);
}
.wrap-card:hover .dots .dot {
	background: white;
}
.wrap-card.animate.pop{
	aspect-ratio: 1 ;
}
/*.lego-boxes .row{*/
/*	margin: 0 !important;*/
/*}*/
/* Animations and timing delays */
.animate {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}
/* Pop In */
.pop { animation-name: pop; }
.boardgame-boxes ,.videogame-boxes ,.lego-boxes{
	overflow: hidden;
}
h2.title-card{
	font-size:18px !important;
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.description-plp-boardgame.gradient-desc{
	position: relative;
}

.description-plp-boardgame{
	margin-top: 100px;
	/*max-height: 250px;*/
	overflow: hidden;
	transition: max-height .7s ease;
}
/*.description-plp-boardgame.show {*/
/*	max-height: 100%;*/
/*	transition: max-height .7s ease;*/
/*}*/
.gradient-desc::before {
	content:'';
	/*height:250px;*/
	height:60%;
	position:absolute;
	bottom:0px;
	left:0;
	width:100%;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#151132d6 96%);
	/*transition:height .5s ease;*/
}
.description-plp-boardgame.gradient-desc.show::before{
    background:transparent ;
}
.description-plp-boardgame h2{
	color: #FBFBFB !important;
	font-size: 26px;
	font-weight: 600;
	line-height: 44px !important;

}
.text-desc p{
	color: #E9E9E9 !important;
	font-size: 18px;
	font-weight: 200;
	line-height: 40px !important;
}
.show.gradient-desc::before { height:50px;}
.show-more-btn{
	background: transparent;
	font-size:18px;
	font-weight: 400 !important;
	line-height: 36px !important;
	color: #fff;
	font-family: IRANSans !important;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;

}



.show-more-btn:focus{
	outline:none;
}
.show-more-btn span{
	position: absolute;
	width: fit-content;
}
.show-more-btn span::after{
	content: "";
	background-image: url("./custom-images/CaretLeft.png");
	width: 24px;
	height: 24px;
	position: absolute;
	left: -30px;
	top: 8px;
}
/*.box-desc.show .show-more-btn span::after{*/
/*transform: rotate(-180deg);*/
/*}*/

/* Slide In */
.slide { animation-name: slide; }
@keyframes slide {
  0% {
    opacity: 0;
    transform: translate(4em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}



/* Slide Left */
.slide-left { animation-name: slide-left; }
@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translate(-40px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.slide-up {animation-name: slide-up;}
@keyframes slide-up {
	0% {
		opacity: 0;
		transform: translateY(3em);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.delay-1 {
  animation-delay: 0.3s;
}
.delay-2 {
  animation-delay: 0.6s;
}
.delay-3 {
  animation-delay: 0.9s;
}
.delay-4 {
  animation-delay: 1.2s;
}
.delay-5 {
  animation-delay: 1.5s;
}
.delay-6 {
  animation-delay: 1.8s;
}
.delay-7 {
  animation-delay: 2.1s;
}
.delay-8 {
  animation-delay: 2.4s;
}
.btn-widget-filter-responsive{
	display: none;
}
.btn-close-filter {
	display: none;
}
.rate-responsive{
	display:none;
}
.box-desc{
	padding-bottom: 40px !important;
}


@media only screen and (max-width: 600px) {
   
    .title-desc h2{
        font-size:18px ;
        font-weight:600;
    }
     .title-desc h3{
        font-size:16px !important;
        font-weight:600 !important;
        color:#fff !important;
    }
    .text-desc p{
        font-size:16px;
    }
    .wrap-card:hover .overlay{
        transform:unset !important;
    }
    .wrap-card:hover .image-content{
        width:75%;
    }
    .wrap-card:hover .overlay-content{
        transform:unset;
    }
    .wrap-card.animate.pop{
         	aspect-ratio: unset !important;
   }
    
	.rate-responsive{
		position: absolute;
		right: 12px;
		top:12px ;
		color:#FBFBFB;
		font-size: 14px;
		padding: 5px  ;
		background-color: #231D54;
		border-radius: 8px;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight:bold;
	;

	}
	h2.slide-left.pop{
		font-size: 18px !important;
	}
	.wrap-card{
		min-height: 226px;
		/*aspect-ratio: 1.1;*/
	}
	.btn-widget-filter-responsive{
		display: flex;
		align-items: center;
		border-bottom: 2px solid #155279;
		padding-bottom: 14px;

	}
	.widget-filetr{
		display: none;
	}
	.widget-filetr{
		padding: 70px 30px 0;
		/*height: 100vh;*/
		width: 100%;
		z-index: 1000;
		position: fixed;
		top: -20px;
		left: 0;
		background-color: #151132;
		height: 100vh !important;
		overflow:hidden;

	}
	.widget-filetr form{
	    height:100%;
	    overflow:auto;
	    padding-bottom:100px;
	}
	.widget-filetr form::-webkit-scrollbar{
	    display: none;
	}
     .widget-filetr form {
        -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */
}
.head-filter-widget{
    padding-bottom:16px;
    border-bottom:1px solid #E9E9E9;
}
	.btn-widget-filter-responsive button{
		font-size: 18px;
		color: #FBFBFB !important;
		font-weight: 500;
		text-decoration: none !important;
		padding-right: 5px ;
		background-color: transparent;
		width: fit-content;
		float: right;
	}
	.btn-widget-filter-responsive button:focus{
		outline: none;
	}

	.btn-close-filter{
		display: block !important;
		float: right;
		width: fit-content;
		text-align: right;
		padding-left: 5px;
	}
	.pop { animation: none; }
	.slide { animation: none; }
	.slide-left { animation: none; }
	.slide-up {animation: none;}

}
@media (min-width: 1023px) and (max-width: 1440px) {
    .text{
        padding:15px 15px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
      .wrap-card:hover .overlay-content{
        transform:unset;
    }
      .wrap-card:hover .overlay{
        transform:unset !important;
    }
    .wrap-card:hover .image-content{
        width:75%;
    } 
	.rate-responsive{
		position: absolute;
		right: 12px;
		top:12px ;
		color:#FBFBFB;
		font-size: 18px;
		padding: 5px ;
		background-color: #231D54;
		border-radius: 8px;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;

	}
	h2.slide-left.pop{
		font-size: 18px !important;
	}
	.btn-widget-filter-responsive{
		display: flex;
		align-items: center;
		border-bottom: 2px solid #155279;
		padding-bottom: 14px;

	}
	.pdp-res-tab-filter{
		display: none;
	
	}
	.pdp-res-tab-list{
	    max-width:100% !important;
	    flex:0 0 100% !important;
	}
	.widget-filetr{
		padding: 65px 30px 0;
		height: 100vh;
		width: 100%;
		z-index: 100;
		position: fixed;
		/*top: 70px;*/
		top:0;
		left: 0;
		background-color: #151132;

	}
	.btn-widget-filter-responsive button{
		font-size: 22px;
		color: #FBFBFB !important;
		font-weight: 500;
		text-decoration: none !important;
		padding-right: 5px ;
		background-color: transparent;
		width: fit-content;
		float: right;
	}
	.btn-widget-filter-responsive button:focus{
		outline: none;
	}

	.btn-close-filter{
		display: block !important;
		float: right;
		width: fit-content;
		text-align: right;
		padding-left: 5px;
	}
	.pop { animation: none; }
	.slide { animation: none; }
	.slide-left { animation: none; }
	.slide-up {animation: none;}

}
h1.title-plp{
    font-size: 16px;
    color: #FFF !important;
    margin-bottom:0 !important;
    
}
  .title-desc h1{
            color:#fbfbfb !important;
            font-size:24px;
            font-family: kalame !important;
        }
        .text-desc ul{
            color:#e9e9e9;
            font-size:16px;
            font-weight:800;
            line-height:40px;
        }
        .text-desc{
           color:#e9e9e9; 
        }