.container-image-accordion{
display : flex;
width : auto;
overflow : hidden;
position : relative;
}
.gallery-wrap {
display: flex;
flex-direction: row;
width: 100%;
height: 70vh;
overflow: hidden;
}
.item-ia {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 0.8s ease;
overflow: hidden;
&:hover{
flex: 5;
}
}
.item-text{ 
opacity: 0;
display: flex;
overflow: hidden;
}
.text-title-ia {
display: flex;
justify-content: center;
opacity: 0;
z-index: 999;
transform: translateY(20px);
transition: all 1s ease;
}
.hs-animation-text-title-ia {
animation: hs-animation-text-title-ia 1s ease forwards;
}
@keyframes hs-animation-text-title-ia {
0% {
transform: translateY(-500px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
} .text-description {
display: flex;
justify-content: center;
z-index: 999;
opacity: 0;
transform: translateY(20px);
transition: all 1s ease;
}
.hs-animation-text {
animation: hs-animation-text 1s ease forwards;
}
@keyframes hs-animation-text {
0% {
transform: translateY(500px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.item-ia-hover.active .text-title-ia  {
transform: translateY(0);
opacity: 1;
}
.item-ia-hover.active .text-description {
transform: translateY(0);
opacity: 1;
}
.item-ia-click.active .text-title-ia  {
transform: translateY(0);
opacity: 1;
}
.item-ia-click.active .text-description {
transform: translateY(0);
opacity: 1;
} .icon-button{
color : red;
}
.icon-button i:hover{
color : rgb(255, 255, 255);
}
.rkit-image-accordion-item-button{
display : flex;
justify-content : center;
z-index: 999;
}
.button-element-image-accordion {
position: relative;
z-index: 1;
display: flex;
align-self: center;
align-items: center; 
width : auto;
background-color:  #000000;
color :  #ffffff;
max-width: none;
padding : 16px 32px 16px 32px;
justify-content: center;  
opacity: 0; 
transform: translateY(20px);
transition: all 1s ease;
overflow: hidden;
animation: hs-animation-button 1s ease forwards; }
.rkit-image-accordion-item-button-icon{
color: #56d4c4;  
}
.hs-animation-button {
animation: hs-animation-button 1s ease forwards;
}
@keyframes hs-animation-button {
0% {
transform: translateY(500px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
} .item-ia-hover {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 1s ease;
overflow : hidden;
position: relative;
} 
.item-ia-hover.active{
flex : 3;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.item-ia-hover.active .item-text {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;   
opacity: 0;  
padding: 0px;
overflow: hidden;
transition-delay : 2s;
animation: fadeIn 2s ease-in-out forwards;  
}
.background-item-text{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #9A9191;
opacity: 20%;
}  .item-ia-click {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 1s ease;
overflow : hidden;
} 
.item-ia-click.active{
flex : 3;
}
@keyframes fadeInClick {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.item-ia-click.active .item-text {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;  
padding: 0px;
overflow: hidden;
transition-delay : 1s;
animation: fadeIn 1s ease-in-out forwards;  
} @media only screen and (max-width: 480px) {
.gallery-wrap { 
flex-direction: column !important; 
}
}