/*
	JQuery Accordion
	Author: marcoarib
	Date: 2013/05/29
	Contact: marco.arib@gmail.com
	Website: http://codecanyon.net/user/marcoarib
*/

.CoverAlls_AccImg_Default.accordion{
	width: 100%;
	font-family: Segoe UI, Arial;
	font-size: 14px;
}
.CoverAlls_AccImg_Default .accordion-item {
	border: none;
	padding-bottom: 20px;
}
.CoverAlls_AccImg_Default .accordion-item:last-child{
	padding-bottom: 0;
}
.CoverAlls_AccImg_Default .accordion-header{
	position:relative;
	margin: 0;
	color: #000;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.42857143;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer; 
	transition: all 0.3s ease-in-out;

    padding: 8px 22px;
    border-radius: 3px;
    border-bottom: 1px solid #000;
}
.CoverAlls_AccImg_Default .accordion-header .arrow{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate3d(0,-50%,0);
	width: 16px;
	height: 16px;
}
.CoverAlls_AccImg_Default .accordion-header .arrow::before,
.CoverAlls_AccImg_Default .accordion-header .arrow::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	background-color: currentColor;
	transition: all 0.3s ease-in-out;
	opacity: 1;
}
.CoverAlls_AccImg_Default .accordion-header .arrow::before{
	width: 4px;
	height: 16px;
}
.CoverAlls_AccImg_Default .accordion-header .arrow::after{
	width: 16px;
	height: 4px;
}
.CoverAlls_AccImg_Default .accordion-header:hover{
	color: #d71921;
}
.CoverAlls_AccImg_Default .accordion-header.opened .arrow::before{
	opacity: 0;
}
.CoverAlls_AccImg_Default .accordion-content{
	display: none;
    padding: 10px clamp(20px, 2.5vw + 2px ,50px);
	border: none;
}
.CoverAlls_AccImg_Default .accordion p {
	margin-bottom: 0;
}


/* Custom
-----------------------------*/
.CoverAlls_AccImg_Default{
	--Opacity: 0.3;
	--SideWidth0: 100%;
    --SideWidth1: 100%;
    --SideWidth2: 100%;
    --SideWidth3: 50%;
    --SideWidth4: 50%;
    --SideWidth5: 600px;

    --SideRowGap: 10px;
    --SideColumnGap: 30px;
}
.CoverAlls_AccImg_Default{
    --SideWidth: var(--SideWidth0);
}
@media (min-width: 575px) {
    .CoverAlls_AccImg_Default{
        --SideWidth: var(--SideWidth1);
    }
}
@media (min-width: 768px) {
    .CoverAlls_AccImg_Default{
        --SideWidth: var(--SideWidth2);
    }
}
@media (min-width: 992px) {
    .CoverAlls_AccImg_Default{
        --SideWidth: var(--SideWidth3);
    }
}
@media (min-width: 1200px) {
    .CoverAlls_AccImg_Default{
        --SideWidth: var(--SideWidth4);
    }
}
@media (min-width: 1400px) {
    .CoverAlls_AccImg_Default{
        --SideWidth: var(--SideWidth5);
    }
}
.CoverAlls_AccImg_Default{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--SideRowGap);
    column-gap: var(--SideColumnGap);
}
.CoverAlls_AccImg_Default .PictureBox{
	width: calc( 100% - var(--SideColumnGap) - var(--SideWidth) );
}
.CoverAlls_AccImg_Default .AccordionBox{
    width: var(--SideWidth);
}
.CoverAlls_AccImg_Default .AccordionBox .accordion{
	--bs-accordion-bg: transparent;
}
/* PictureBox */
.CoverAlls_AccImg_Default .PictureBox{
	display: grid;
}
.CoverAlls_AccImg_Default .PictureBox .item{
	position: relative;
	grid-column: 1 / 2;
    grid-row: 1 / 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.CoverAlls_AccImg_Default .PictureBox .item img{
	max-width: 100%;
    transition: .5s;
    pointer-events: none;
}
.CoverAlls_AccImg_Default .PictureBox:has(.is-active) .item:not(.is-active) img{
	opacity: var(--Opacity);
}
.CoverAlls_AccImg_Default .PictureBox .item.is-active img{
	position: relative;
    transform: perspective(200px) translateZ(50px);
}


/* AccordionBox */
.CoverAlls_AccImg_Default .accordion-content .content-main{
	display: grid;
}
.CoverAlls_AccImg_Default .accordion-content .content-main > div{
	grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.CoverAlls_AccImg_Default .accordion-content .content-main .pic{
	opacity: 1;
	transition: .5s ease;
}
.CoverAlls_AccImg_Default .accordion-content .content-main:hover .pic{
	opacity: 0.1;
}
.CoverAlls_AccImg_Default .accordion-content .content-main .pic img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.CoverAlls_AccImg_Default .accordion-content .content-main .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    height: auto;
    text-align: center;
    padding: 0 clamp(20px, 2.5vw + 2px ,50px);
    z-index: 10;
    transition: .5s ease;
}
.CoverAlls_AccImg_Default .accordion-content .content-main:hover .content{
	opacity: 1;
}
.CoverAlls_AccImg_Default .accordion-content .content-main .content p{
	color: #000;
}