.modal.fade {
	z-index: 999999;
}

.sort-cards {
	position: absolute!important; 
	top: 40%!important; 
	min-height: 10px!important;
	height: fit-content!important;
	box-shadow: unset!important;
	text-align: left!important;
}
.affi-cards {
	position: absolute!important; 
	top: 27%!important; 
	min-height: 10px!important;
	height: fit-content!important;
	box-shadow: unset!important;
	text-align: left!important;
}
.affi-cards h4 {
	font-size: 25px;
}

.sort-fade {
	transition-duration: 500ms;
	opacity: 0;
}
.sort-show {
	transition-duration: 500ms;
	opacity: 100!important;
}
.button-group {
	opacity: 0;
	position: absolute!important; 
	top: 15%!important; 
	min-height: 10px!important;
	height: fit-content!important;
	box-shadow: unset!important;
	text-align: left!important;
}
.text-gray {
	color:  #828282;
}
.element-item {
	height: fit-content;
	min-height: 100px;
	width: 16.66666667%;
	
/*	transition-duration: 200ms; */
}
.element-item div:not(.img):not(.dt) {
 	transition-duration: 500ms;
 	display: block;
 	min-height: 100px;
 	width: 100%;
  	height: 100%;
 	text-align: center;
 	position: absolute;
 	left: 0;
 	top: 0;
 	z-index: 3;
 	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}
.element-item.zero div, .element-item[data-category="08"] div , .element-item[data-category="07"] div {
	box-shadow: unset;
}

.element-item:not(.zero):has(div:hover) {
 	z-index: 1000;
}

.element-item:not(.zero) .dt-container:hover {
	cursor: pointer;
	transform: scale(1.03);
	transition-duration: 300ms;
}
.element-item.disabled .star, .element-item.disabled .img, .element-item.disabled .dt {
	display: none;
}
.element-item.disabled .dt-container{
	background-color: #ffffff!important;
}

.sq-spacer {
	position: absolute!important;
	z-index: 1;
	left: 0;
	top: 0;
}
.star {
	position: absolute!important;
	z-index: 4;
	left: 0;
	top: 0;
	display: block;
}
.disable {
	display: none!important;
}
.disabled .disable {
	display: block!important;
	position: absolute!important;
	z-index: 5;
	left: 0;
	top: 0;
	box-shadow: unset;
}
.element-item:not(.zero) div div.dt {
	position: absolute;
	bottom: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	box-shadow: unset;
	top: unset;
	height: 20px;
	min-height: unset;
	opacity: .7;
	font-size: 14px;
	width: 100%;
}

.element-item:not(.zero) div div.img_play  {
	position: relative;
	top: 50%;
	height: 13%;
	min-height: 10px;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 9;
	box-shadow: unset;
}
/*
h5.button:hover {
	transition-duration: 200ms;
	transform: scale(1.1);
}
*/

.img_play:hover {
  animation:playbutton .4s ease-in-out 0s alternate both;
}
@keyframes playbutton {
	0% {
		height: 13%;
	}
	90% {
		height: 43%;
	}
	100% {
		height: 38%;
	}
}

.element-item:not(.zero) div div.img  {
	position: relative;
	top: 50%;
	height: 33%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.element-item:not(.zero) .dt-container .img img {
	webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
    		-o-transform: rotateY(0deg);
				transform: rotateY(0deg);

	-webkit-transition: 1.8s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 1.8s;
	-moz-transform-style: preserve-3d;
  
  	-o-transition: 1.8s;
	-o-transform-style: preserve-3d;

	transition: 1.8s;
	transform-style: preserve-3d;

	position: relative;
}

.element-item:not(.zero) .dt-container:hover .img img {
	webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
    		-o-transform: rotateY(180deg);
				transform: rotateY(180deg);

	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  
  	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	/*position: relative;*/

}
/*
.dt-container {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
*/



.element-item.w2x {
	width: 33.33333334%;
}
.element-item.zero {
	box-shadow: unset;
}
.element-item:not(.zero) div.bwmode {
	background-color: #797979!important;
	transition-duration: 400ms;
	box-shadow: unset;
}

.element-item[data-color="orange"] .dt-container {
	background-color: #F8AD41;
}
.element-item[data-color="yellow"] .dt-container {
	background-color: #F8C47A;
}
.element-item[data-color="green"] .dt-container {
	background-color: #8BC050;
}
.element-item[data-color="green-light"] .dt-container {
	background-color: #ACD184;
}
.element-item[data-color="pink"] .dt-container {
	background-color: #E83273;
}
.element-item[data-color="pink-light"] .dt-container {
	background-color: #ED6E9D;
}
.element-item[data-color="1blue"] .dt-container {
	background-color: #6EC3E8;
}
.element-item[data-color="0navy"] .dt-container, .element-item[data-color="znavy"] .dt-container, .element-item[data-color="3navy"] .dt-container {
	background-color: #409EA9;
}
.element-item[data-color="2navy-light"] .dt-container {
	background-color: #78BAC3;
}



.slick-dots {
    bottom: 25px;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #0083AF;
    font-size: 12px;
}

.slick-dots li button::before {
    opacity: 1;
    color: #D9D9D9;
    font-size: 12px;
}



.ny2024 input[type='text'] {
	padding: 0.9rem; border-radius: 10px;
	background-color: #F2F6FD;
}
.order-md-1 {
	order: 1!important;
}
.order-md-2 {
	order: 2!important;
}
.order-md-3 {
	order: 3!important;
}
.order-md-4 {
	order: 4!important;
}
.order-md-5 {
	order: 5!important;
}
.order-md-6 {
	order: 6!important;
}
.order-md-7 {
	order: 7!important;
}
.order-md-8 {
	order: 8!important;
}
.order-md-9 {
	order: 9!important;
}
.order-md-10 {
	order: 10!important;
}
.order-md-11 {
	order: 11!important;
}
.order-md-12 {
	order: 12!important;
}
.order-md-13 {
	order: 13!important;
}
.order-md-14 {
	order: 14!important;
}
.order-md-15 {
	order: 15!important;
}
.order-md-16 {
	order: 16!important;
}
.order-md-17 {
	order: 17!important;
}
.order-md-18 {
	order: 18!important;
}
.order-md-19 {
	order: 19!important;
}
.order-md-20 {
	order: 20!important;
}
.order-md-21 {
	order: 21!important;
}
#modal_answer p {
	margin-bottom: 0;
}
#modal_answer input[type='text'], #modal_answer input[type='email'] {
	display: block;
    width: 100%;
	font-size: 1rem;
	font-weight: 400;
	padding: 0.9rem;
    border-radius: 10px;
    background-color: #ffffff;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
}
#modal_answer input[type='text']:focus, #modal_answer input[type='email']:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

#modal_answer [type=submit] {
	color: var(--bright-blue);
    border: 0!important;
    min-width: 156px;
    background-color: #f8f9fa;
    padding: 1rem!important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-radius: var(--bs-border-radius);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#modal_answer [type=submit]:hover {
	background-color: #d3d4d5;
}


@media (min-width: 1699.98px) {
	.button-group {
		opacity: 0;
		position: absolute!important; 
		top: 23%!important; 
		padding-left: 55px!important;
		min-height: 10px!important;
		height: fit-content!important;
		box-shadow: unset!important;
		text-align: left!important;
	}
}

@media (max-width: 575.98px) {
	.sort-cards {
		position: absolute!important; 
		top: 30%!important; 
		min-height: 10px!important;
		height: fit-content!important;
		box-shadow: unset!important;
		text-align: left!important;
	}
	.affi-cards {
		position: absolute!important; 
		top: 8%!important; 
		min-height: 10px!important;
		height: fit-content!important;
		box-shadow: unset!important;
		text-align: left!important;
		font-size: 14px!important;
	}
	.affi-cards p {
		font-size: 13px!important;
	}


	.button-group {
		opacity: 0;
		position: absolute!important; 
		top: 15%!important; 
		min-height: 10px!important;
		height: fit-content!important;
		box-shadow: unset!important;
		text-align: left!important;
	}


	.element-item {
		height: fit-content;
		min-height: 100px;
		width: 33.33333334%;
		
	/*	transition-duration: 200ms; */
	}
	.element-item.w2x {
		width: 66.66666667%;
	}
	.element-item:not(.zero) div div.img_play  {
		position: relative;
		top: 60%;
		height: 33%;
		min-height: 10px;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 9;
		box-shadow: unset;
	}


	.img_play:hover {
	  animation:playbutton .4s ease-in-out 0s alternate both;
	}
	@keyframes playbutton {
		0% {
			height: 33%;
		}
		90% {
			height: 73%;
		}
		100% {
			height: 68%;
		}
	}

	.order-1 {
		order: 1!important;
	}
	.order-2 {
		order: 2!important;
	}
	.order-3 {
		order: 3!important;
	}
	.order-4 {
		order: 4!important;
	}
	.order-5 {
		order: 5!important;
	}
	.order-6 {
		order: 6!important;
	}
	.order-7 {
		order: 7!important;
	}
	.order-8 {
		order: 8!important;
	}
	.order-9 {
		order: 9!important;
	}
	.order-10 {
		order: 10!important;
	}
	.order-11 {
		order: 11!important;
	}
	.order-12 {
		order: 12!important;
	}
	.order-13 {
		order: 13!important;
	}
	.order-14 {
		order: 14!important;
	}
	.order-15 {
		order: 15!important;
	}
	.order-16 {
		order: 16!important;
	}
	.order-17 {
		order: 17!important;
	}
	.order-18 {
		order: 18!important;
	}
	.order-19 {
		order: 19!important;
	}
	.order-20 {
		order: 20!important;
	}
	.order-21 {
		order: 21!important;
	}
}