/* Estilos generales */

/* TODO:
 * clean up!
 * ===============
 * horizontal thumbnails
 * at small screens
 * and in fullscreen
 * ===============
 * create Mixins
 * ===============
 */
 @import "https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:300,400";
 /* colors */

 section .gallery {
    padding: 10px !important;
 }

 .gallery {
   left: 50%;
   margin-top: 100px;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
   position: relative;
   background: white;
   width: 70%;
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   border-radius: 5px;
 }
 .gallery input[name$="control"] {
   display: none;
 }
 .gallery .carousel {
    margin-top: 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   position: relative;
   height: 60vh;
   width: 100%;
 }
 .gallery .wrap {
   width: 100%;
   height: 100%;
   position: static;
   margin: 0 auto;
   overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   margin-right: 20px;
 }
 .gallery .wrap figure {
   padding: 10px;
   height: 100%;
   min-width: 100%;
   -webkit-transition: opacity 0.25s ease-in-out 0.05s;
   transition: opacity 0.25s ease-in-out 0.05s;
   position: relative;
   left: 0;
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
   box-sizing: border-box;
   text-align: center;
   margin: 0;
   display: block;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   opacity: 1;
 }
 .gallery .wrap figure label {
   cursor: zoom-in;
   height: auto;
   width: 100%;
   height: 100%;
   position: relative;
   display: block;
 }
 .gallery .wrap figure img {
   cursor: inherit;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   border-radius: 3px;
   margin: 0 auto;
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
 .gallery .thumbnails {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   min-width: 60px;
   max-height: 100%;
   height: auto;
   -webkit-box-flex: 0;
       -ms-flex-positive: 0;
           flex-grow: 0;
   -ms-flex-item-align: center;
       align-self: center;
   -ms-flex-preferred-size: auto;
       flex-basis: auto;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   overflow-y: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   padding: 0 10px;
   z-index: 20;
 }
 .gallery .thumbnails .thumb {
   min-width: 60px;
   height: 60px;
   background-position: center center;
   background-size: cover;
   box-sizing: border-box;
   opacity: 0.7;
   margin: 5px 0;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   left: 0;
   border-radius: 3px;
   cursor: pointer;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   background-repeat: no-repeat;
 }
 .gallery .thumbnails .slider {
   position: absolute;
   display: block;
   width: 5px;
   height: calc(60px + 10px);
   z-index: 2;
   margin: 0;
   left: 0;
   -webkit-transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
   transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
 }
 .gallery .thumbnails .slider .indicator {
   width: 100%;
   height: 30px;
   max-height: calc(100% - 10px);
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   background: #428BFF;
   border-radius: 1px;
 }
 .gallery input#fullscreen:checked ~ .wrap figure {
   position: fixed;
   z-index: 10;
   height: 100vh;
   width: 100vw;
   padding: 0;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%) !important;
           transform: translate(-50%, -50%) !important;
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
 .gallery input#fullscreen:checked ~ .wrap figure label {
   cursor: zoom-out;
 }
 .gallery input#fullscreen:checked ~ .wrap figure label img {
   -webkit-animation: shadow 0.2s;
           animation: shadow 0.2s;
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
   -webkit-animation-direction: forwards;
           animation-direction: forwards;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
   border-radius: 0;
 }
 .gallery input#image1:checked ~ .wrap figure {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
 .gallery input#image1:checked ~ .wrap figure:not(:nth-of-type(1)) {
   opacity: 0;
 }
 .gallery input#image1:checked ~ .thumbnails .slider {
   -webkit-transform: translateY(0);
           transform: translateY(0);
 }
 .gallery input#image1:checked ~ .thumbnails .thumb:nth-of-type(1) {
   opacity: 1;
   cursor: default;
 }
 .gallery input#image2:checked ~ .wrap figure {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
 }
 .gallery input#image2:checked ~ .wrap figure:not(:nth-of-type(2)) {
   opacity: 0;
 }
 .gallery input#image2:checked ~ .thumbnails .slider {
   -webkit-transform: translateY(100%);
           transform: translateY(100%);
 }
 .gallery input#image2:checked ~ .thumbnails .thumb:nth-of-type(2) {
   opacity: 1;
   cursor: default;
 }
 .gallery input#image3:checked ~ .wrap figure {
   -webkit-transform: translateX(-200%);
           transform: translateX(-200%);
 }
 .gallery input#image3:checked ~ .wrap figure:not(:nth-of-type(3)) {
   opacity: 0;
 }
 .gallery input#image3:checked ~ .thumbnails .slider {
   -webkit-transform: translateY(200%);
           transform: translateY(200%);
 }
 .gallery input#image3:checked ~ .thumbnails .thumb:nth-of-type(3) {
   opacity: 1;
   cursor: default;
 }
 .gallery input#image4:checked ~ .wrap figure {
   -webkit-transform: translateX(-300%);
           transform: translateX(-300%);
 }
 .gallery input#image4:checked ~ .wrap figure:not(:nth-of-type(4)) {
   opacity: 0;
 }
 .gallery input#image4:checked ~ .thumbnails .slider {
   -webkit-transform: translateY(300%);
           transform: translateY(300%);
 }
 .gallery input#image4:checked ~ .thumbnails .thumb:nth-of-type(4) {
   opacity: 1;
   cursor: default;
 }
 
/* imagen 5*/
.gallery input#image5:checked ~ .wrap figure {
    -webkit-transform: translateX(-400%);
            transform: translateX(-400%);
  }
  .gallery input#image5:checked ~ .wrap figure:not(:nth-of-type(5)) {
    opacity: 0;
  }
  .gallery input#image5:checked ~ .thumbnails .slider {
    -webkit-transform: translateY(400%);
            transform: translateY(400%);
  }
  .gallery input#image5:checked ~ .thumbnails .thumb:nth-of-type(5) {
    opacity: 1;
    cursor: default;
  }
  /*imagen 6*/
  .gallery input#image6:checked ~ .wrap figure {
    -webkit-transform: translateX(-500%);
            transform: translateX(-500%);
  }
  .gallery input#image6:checked ~ .wrap figure:not(:nth-of-type(6)) {
    opacity: 0;
  }
  .gallery input#image6:checked ~ .thumbnails .slider {
    -webkit-transform: translateY(500%);
            transform: translateY(500%);
  }
  .gallery input#image6:checked ~ .thumbnails .thumb:nth-of-type(6) {
    opacity: 1;
    cursor: default;
  }

 
 @-webkit-keyframes full {
   from {
     -webkit-transform: translate(-50%, -50%) scale(0.8);
             transform: translate(-50%, -50%) scale(0.8);
   }
   to {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
   }
 }
 
 @keyframes full {
   from {
     -webkit-transform: translate(-50%, -50%) scale(0.8);
             transform: translate(-50%, -50%) scale(0.8);
   }
   to {
     -webkit-transform: translate(-50%, -50%) scale(1);
             transform: translate(-50%, -50%) scale(1);
   }
 }
 @-webkit-keyframes shadow {
   from {
     box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
   }
   to {
     box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
   }
 }
 @keyframes shadow {
   from {
     box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
   }
   to {
     box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
   }
 }