.slides{
  margin-top:-20px;
  position: relative;
  overflow: hidden;
  min-height:80vh;
  width: 100%;
  
}

.slide{
   height: 80vh;
   width: 100%;
   background-repeat:no-repeat;
   background-size: cover;
   position:absolute;
   animation: sliding 2s ease;
   display:none;
}

.slide.active{
   display:block;
}

@keyframes sliding{
   from{
       opacity:0;
       transform:scale(1.1);
   }
   to{
       opacity:1;
       transform:scale(1);
   }
}


.slideContainer{
   width:1140px;
   height: 100%;
   margin: auto;
   padding:0 15px;
   position: relative;
}

.slide .content{
   height:100%;
   display:flex;
   align-items:flex-start;
   flex-direction: column;
   justify-content: center;
   color:var(--negro);
}

.slide .content h1{
   font-size:60px;
   opacity:0;padding-bottom:5px;
   animation: captionAnimation .5s ease-in-out forwards;
   animation-delay: 0.6s;
}

.slide .content h2{
   font-size:28px;
   font-weight:bold;
   color:var(--negro);
   opacity:0;
   animation: captionAnimationTree .5s ease-in-out forwards;
   animation-delay:0.7s;
}

.slide .content p{
   font-size:24px;
   margin: 5px 0 30px;
   color:var(--negro);
   opacity:0;
   animation: captionAnimationTwo .5s ease-in-out forwards;
   animation-delay:0.8s;
}

.slide .content a{
   background-color: var(--celeste);
   padding: 10px 25px;
   border-radius:25px;
   color:var(--blanco);
   opacity:0;
   animation: captionAnimationBtn .5s ease-in-out forwards;
   animation-delay: 1.2s;
}


.slide .content a i{
   padding-left:2px;font-size:14px;padding-top:4px;
}

.slide .content a:hover{background-color:var(--azul);}

@keyframes captionAnimation{
   from{
       opacity:0;
       transform:translateY(100px);
   }
   to{
       opacity:1;
       transform:translateY(0px);
   }
}


@keyframes captionAnimationBtn{
   0%{
       opacity:0;
       transform:translateX(-100px);
   }
   50%{
       opacity:0.5;
       transform:translateX(50px);
   }
   
   75%{
       opacity:0.5;
       transform:translateX(-10px);
   }

   100%{
       opacity:1;
       transform:translateX(0);
   }
}


@keyframes captionAnimationTwo{
   from{
       opacity:0;
       transform:translateX(-200px);
   }
   to{
       opacity:1;
       transform:translateX(0px);
   }
}

@keyframes captionAnimationTree{
   0%{
       opacity:0;
       font-style:oblique;
       transform:translateX(-100px);
       transform:rotate(-2deg);
   }


   50%{
       opacity:0.4;
       font-style:oblique;
       transform:rotate(-1deg);
   }

   100%{
       opacity:1;
       font-style:normal;
       transform:translateX(0px);
       transform:rotate(0deg);
   }
}



/* Controllers angles */
.slides .controls{
   width:98%;
   margin: 35vh 0px;
   position:absolute;
   display:flex;
   justify-content:space-between;
   padding: 0 15px;
}

.slides .next,
.slides .prev{
   cursor: pointer;
   background-color: transparent;
   border: 5px solid var(--blanco);
   width:40px;
   display:flex;
   justify-content:center;
   align-items:center;
   height:40px;
   text-align:center;
   font-size:20px;
   border-radius:50%;
   padding:5px;
   color:var(--celeste);
   opacity:0.6;
   transition: 0.5s;
}


.slides .next:hover,
.slides .prev:hover{
   opacity:1;
}


/* Indicators */
.slides .indicatorContainer{
   width:100%;
   text-align:center;
   position: absolute;
   bottom:30px;
}

.slides .indicatorContainer > div{
   border: 2px solid var(--blanco);
   display: inline-block;
   height:10px;
   width:10px;
   margin:5px;
   border-radius:50%;
}



.slides .indicatorContainer > div.active{
   background-color: #313131;
}



/*Media querys*/
@media(max-width:1160px){
   .slideContainer{
       width:95%;
       padding:0 15px;
   }

   .slides{
      margin-top:-60px;
   }

   .slide{
       background-position-x: 30%;
   }
}

@media(max-width:767px){
   .slides .controls{
       display:none;
   }

   .slides{
      min-height:50vh;
   }

   .slide{
      height:50vh;
   }


   .slide .content h1{
      font-size:35px;
   }
   
   .slide .content h2{
      font-size:18px;
   }
   
   .slide .content p{
      font-size:14px;margin: 5px 0 20px;
   }
   
}