.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
   
    width: 100%;
}

.button {
    margin-left: 0 3%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: var(--Primario);
    padding: 2px;
    display: flex;
    justify-content: center;
border-radius: 50px;
    align-items: center;

}
.button:hover{
    
background-color: var(--Secundario);
}
.button--inactive {
    opacity: 0.2;
}

.button > i {
    color: var(--Menu-font);
    font-weight: 600;
    font-size: 20px;
}

.cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cards__container {
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.box {
       margin: -2rem; 
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 3;
         /*transition: 0.1s all; */
    }
   .box > img{
       border: 3px solid #fff;
       width: 260px;
       height: 315px;
      
   } 
    .box:nth-child(2n) {
        transform: scale(0.85);
        z-index: 1;
        opacity: 0.9;
        
    }
    
    .box:nth-child(2) {
      left: 2%;
    }
    
    .box:nth-child(4) {
      left: -2%;
    }
    
    .box:nth-child(4n + 1) {
        transform: scale(0.75);
        z-index: 0;
        opacity: 0.6;
    }
    
    .box:nth-child(1) {
      left: 5%;
    }
    
    .box:nth-child(5) {
      left: -5%;
    }
    
   
    
    
    .move-out-from-left {
        animation: moveOutLeft 0.5s ease-in-out;
    }
    
    .move-out-from-right {
        animation: moveOutRight 0.5s ease-in-out;
    }
    
    .move-to-position5-from-left {
        animation: moveToP5Left 0.5s ease-in-out;
    }
    
    .move-to-position4-from-left {
        animation: moveToP4Left 0.5s ease-in-out;
    }
    
    .move-to-position3-from-left {
        animation: moveToP3Left 0.5s ease-in-out;
    }
    
    .move-to-position2-from-left {
        animation: moveToP2Left 0.5s ease-in-out;
    }
    
    
    .move-to-position1-from-left{
        animation: moveToP1Left 0.5s ease-in-out;
    }
    
    .move-to-position5-from-right{
        animation: moveToP5Right 0.5s ease-in-out;
    }
    .move-to-position4-from-right{
        animation: moveToP4Right 0.5s ease-in-out;
    }
    .move-to-position3-from-right{
        animation: moveToP3Right 0.5s ease-in-out;
    }
    .move-to-position2-from-right{
        animation: moveToP2Right 0.5s ease-in-out;
    }
    .move-to-position1-from-right{
        animation: moveToP1Right 0.5s ease-in-out;
    }
    @media screen and (max-width: 700px) {
      .box {
       margin: -6rem; 
       
    } 
			.contSlider > div{
			padding-left:0% !important;
				padding-right:0% !important;
			}
			.container {
  
				width:100%;
		position:relative;
				height:300px;
                margin-left: -15px;
}
	.container >		.button {
   position:absolute !important;
z-index:9;
}
			
.container > .button.left {
  left:-40px !important;
}
.container > .button.right {
  right:-70px !important;
}	
    }
  
    @keyframes moveOutLeft {
        0% {
            transform: scale(0.75) translateX(0%);
            opacity: 1;
        }
        50% {
            transform: scale(0.5) translateX(-150%);
            opacity: 0.5;
        }
        100% {
            transform: scale(0.25) translateX(0%);
            opacity: 0;
        }
    }
    
    @keyframes moveOutRight {
        0% {
            transform: scale(0.75) translateX(0%);
            opacity: 1;
        }
        50% {
            transform: scale(0.5) translateX(150%);
            opacity: 0.5;
        }
        100% {
            transform: scale(0.25) translateX(0%);
            opacity: 0;
        }
    }
    
    
    @keyframes moveToP5Left {
        from {
            transform: scale(0.75) translateX(100%);
        }
        to {
            transform: scale(0.75) translateX(0);
        }
    }
    
    @keyframes moveToP4Left {
        from {
            transform: scale(0.75) translateX(100%);
        }
        to {
            transform: scale(0.85) translateX(0);
        }
    }
    
    @keyframes moveToP3Left {
        from {
            transform: scale(0.85) translateX(100%);
        }
        to {
            transform: scale(1) translateX(0);
        }
    }
    
    @keyframes moveToP2Left {
        from {
            transform: scale(1) translateX(100%);
        }
        to {
            transform: scale(0.85) translateX(0);
        }
    }
    
    @keyframes moveToP1Left {
        from {
            transform: scale(0.85) translateX(100%);
        }
        to {
            transform: scale(0.75) translateX(0);
        }
    }
    
    
    @keyframes moveToP1Right {
        from {
            transform: scale(0.75) translateX(-100%);
        }
        to {
            transform: scale(0.75) translateX(0);
        }
    }
    
    @keyframes moveToP2Right {
        from {
            transform: scale(0.75) translateX(-100%);
        }
        to {
            transform: scale(0.85) translateX(0);
        }
    }
    
    @keyframes moveToP3Right {
        from {
            transform: scale(0.85) translateX(-100%);
        }
        to {
            transform: scale(1) translateX(0);
        }
    }
    
    @keyframes moveToP4Right {
        from {
            transform: scale(1) translateX(-100%);
        }
        to {
            transform: scale(0.85) translateX(0);
        }
    }
    
    @keyframes moveToP5Right {
        from {
            transform: scale(0.85) translateX(-100%);
        }
        to {
            transform: scale(0.75) translateX(0);
        }
    }