[type=radio] {
  display: none;
}


#slider {
  height: 40vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 30%;
  height: 80%;
  border-radius: 10px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(-120%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-60%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(60%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(120%,0,-200px);
}


#slide1 { 
	background: url(../images/Obras/Olaguer3181.webp);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%;
}
	
#slide2 { 
	background: url(../images/Obras/Aviles3168.webp);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%;
}

#slide3 { 
background-image: url(../images/Obras/Conde1365.webp);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%;
}

#slide4 { background: url(../images/Obras/Freire1052.webp);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%;
}
#slide5 { background: url(../images/Obras/Freire2838.webp);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100% 100%;
}

/* Slider Mobile */

#slider-mobile {
   margin: 10% auto;
   overflow:auto; 
   text-align: center;
   height: 75vw;
}
#slider-mobile input[type=radio] {
   display: none;
}
#slider-mobile label {
   cursor:pointer;
   text-decoration: none;
}
#slides-mobile {
   padding: 10px;
   border: 3px solid #ccc;
   background: #fff;
   text-align: center;
   z-index: 1;
}
#overflow-mobile {
   width: 100%;
   overflow: hidden;
}
#slide1-mobile:checked ~ #slides-mobile .inner {
   margin-left: 0;
}
#slide2-mobile:checked ~ #slides-mobile .inner {
   margin-left: -100%;
}
#slide3-mobile:checked ~ #slides-mobile .inner {
   margin-left: -200%;
}
#slide4-mobile:checked ~ #slides-mobile .inner {
   margin-left: -300%;
}
#slide5-mobile:checked ~ #slides-mobile .inner {
   margin-left: -400%;
}
#slides-mobile .inner {
   transition: margin-left 800ms;
   width: 500%;
   line-height: 0;
   height: 500%;
}
#slides-mobile .slide {
   width: 20%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}
#controls-mobile {
   margin: -50% 0 0 0;
   width: 100%;
   height: 50px;
   z-index: 3;
   position: relative;
}
#controls-mobile label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls-mobile label:hover {
   opacity: 1;
}
#slide1-mobile:checked ~ #controls-mobile label:nth-child(2),
#slide2-mobile:checked ~ #controls-mobile label:nth-child(3),
#slide3-mobile:checked ~ #controls-mobile label:nth-child(4),
#slide4-mobile:checked ~ #controls-mobile label:nth-child(5),
#slide5-mobile:checked ~ #controls-mobile label:nth-child(1) {
   background: url(../images/right.svg) no-repeat;
   float:right;
   margin: 0 0 0 0;
   display: block;
}
#slide1-mobile:checked ~ #controls-mobile label:nth-last-child(1),
#slide2-mobile:checked ~ #controls-mobile label:nth-last-child(5),
#slide3-mobile:checked ~ #controls-mobile label:nth-last-child(4),
#slide4-mobile:checked ~ #controls-mobile label:nth-last-child(3),
#slide5-mobile:checked ~ #controls-mobile label:nth-last-child(2) {
   background: url(../images/left.svg) no-repeat;
   float:left;
   margin: 0 0 0 0;
   display: block;
}