/* CONTENT
================================================== */
main {
  line-height: var(--lh);
  grid-gap: 10px;
  padding: 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
a:hover{
  transition: color 0.2s ease;
  color: white;
  opacity: 0.5;
}
.project-info{
  position: absolute;
}
.project-title{
  position: relative;
}
img.lazy {
}
/* HEADER
================================================== */
.header{
  opacity: 0;
  pointer-events: none;
  color: white;
  mix-blend-mode: difference;
  padding: 24px 0px 0px 0px;
  grid-gap:20px;
  margin: 0 auto;
  display: grid;
  max-width: 1392px;
  grid-column: span 4;
  z-index: 10;
  grid-template-columns: repeat(4, 1fr);
  transition: var(--ts);
}
.header.on{
  opacity: 1;
  pointer-events: auto;
}
.header.hover{
  opacity: 1;
  pointer-events: auto;
}
.name, .rol, .location{
  height: fit-content;
}
.slide-info {
  cursor: pointer;
  position: relative;
  color: white;
  mix-blend-mode: difference;
  padding: 0px 0px;
  grid-gap:20px;
  margin: 0 auto;
  max-width: 1392px;
  grid-column: span 4;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
img, video{
padding-top: 36px;
padding-bottom: 36px;
}
video{
  display: block;
  width: 100%;
}
.fixed{
  color: white;
  mix-blend-mode: difference;
  position: fixed;
  top: calc(50% - 10px);
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0%);
}
.name{
  width: fit-content;
  transition: color 0.2s ease;
  cursor: pointer;
}

.cover{
  transition: var(--ts);
}
.cover.off{
  opacity: 0.05;
  transition: var(--ts);
}
.cover.hover-off{
  opacity: 0.05;
  transition: var(--ts);
}
/* GENERALES
================================================== */
.sec{
  color: white;
  opacity: 0.5;
}
.square video{
  margin:  0 auto;
  width:756px;
}
.landscape video{
  margin:  0 auto;
  width:956px
}
.vertical video{
  margin:  0 auto;
  width:435px
}
.wider video{
  margin:  0 auto;
  width:1188px;
}
.square img{
  margin:  0 auto;
  width:756px;
}
.landscape img{
  margin:  0 auto;
  width:956px
}
.vertical img{
  margin:  0 auto;
  width:504px
}
.wider img{
  margin:  0 auto;
    width:1188px;
}
@media only screen and (max-width: 1920px) {
  .square img{
    margin:  0 auto;
    width:756px;
  }
  .vertical img{
    margin:  0 auto;
    width:504px
  }
  .wider img{
    margin:  0 auto;
    width:1188px;
  }
  .square video{
    margin:  0 auto;
    width:756px;
  }
  .wider video{
    margin:  0 auto;
    width:1188px;
  }


.header{
  padding-top: 24px;
}
}
@media only screen and (max-width: 1620px) {

  .header, .slide-info{
    max-width: 1192px;
    padding: 0px;
  }
  .header{
    padding-top: 24px;
  }
}
/* CATEGORIES
================================================== */
/* SEARCH
================================================== */
/* INFORMATION
================================================== */
@media only screen and (max-width: 1440px) {
  .header, .slide-info{
    max-width: 1192px;
    padding: 0px;
  }
  .header{
    padding-top: 24px;
  }
  .square img{
    margin:  0 auto;
    width:650px
  }
  .landscape img{
    margin:  0 auto;
    width:956px
  }
  .vertical img{
    margin:  0 auto;
    width:435px
  }
  .wider img{
    margin:  0 auto;
    width:956px
  }
  .square video{
    margin:  0 auto;
    width:650px
  }
  .landscape video{
    margin:  0 auto;
    width:956px
  }
  .vertical video{
    margin:  0 auto;
    width:435px
  }
  .wider video{
    margin:  0 auto;
    width:956px
  }
}
@media only screen and (max-width: 1280px) {
  .header, .slide-info{
    max-width: 1152px;
    padding:24px  64px;
  }
  .slide-info{
      padding: 0px 64px!important;
    }
  .square img{
    margin:  0 auto;
    width:650px
  }
  .landscape img{
    margin:  0 auto;
    width:894px
  }
  .vertical img{
    margin:  0 auto;
    width:433px
  }
  .wider img{
    margin:  0 auto;
    width:900px
  }

  .square video{
    margin:  0 auto;
    width:650px
  }
  .landscape video{
    margin:  0 auto;
    width:894px
  }
  .vertical video{
    margin:  0 auto;
    width:433px
  }
  .wider video{
    margin:  0 auto;
    width:900px
  }
}
@media only screen and (max-width: 1024px) {
  .header, .slide-info{
    padding: 24px 64px;
    width: 100%;
    display: flex;
    justify-content: space-between;

}

  .about{
    width: 428px;
  }
  .contact{
    text-align: right;
  }
  .previously, .features-press, .rol, .project-title{
    display: none;
  }
  .square img{
    margin:  0 auto;
    width:650px
  }
  .landscape img{
    margin:  0 auto;
    width:718px
  }
  .vertical img{
    margin:  0 auto;
    width:435px
  }
  .cover.wider img{
    margin:  0 auto;
    width:718px
  }


  .square video{
    margin:  0 auto;
    width:650px
  }
  .landscape video{
    margin:  0 auto;
    width:718px
  }
  .vertical video{
    margin:  0 auto;
    width:435px
  }
  .cover.wider video{
    margin:  0 auto;
    width:718px
  }
  .header, .slide-info{
    max-width: 100%;
  }

}
@media only screen and (max-width: 768px) {
  .header{
    max-width: 640px;
  }
  .slide-info{
    max-width: 640px;
  }

  .about{
    width: 296px;
  }
  .square img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .landscape img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .cover.wider img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .vertical img{
    margin:  0 auto;
    width:435px
  }
  .wider img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }



  .square video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .landscape video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .cover.wider video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .vertical video{
    margin:  0 auto;
    width:435px
  }
  .wider video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
}
@media only screen and (max-width: 540px) {
  :root {
    --lh: 20.23px;
    --fs: 16px;
    --font: "cpm";
    --ts: opacity 0.2s ease;
  }
  body{
    padding: 32px;
  }
  .header{
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .slide-info{
    padding: 0px 32px;
    width: 100%;
  }
  .previously, .features-press{
    display: block;
  }
  .contact{
    text-align: left;
  }
  .square img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .landscape img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }

  .vertical img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .wider img{
    margin:  0 auto;
    width:calc(100% - 64px);
  }


  .square video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .landscape video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }

  .vertical video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .wider video{
    margin:  0 auto;
    width:calc(100% - 64px);
  }
  .fixed{
    position: relative;
    transform: none;
    left: 0;
    top: 0;
  }
  .location{
    position: fixed;
    bottom: 32px;
    left: 32px;
  }
  .project-title{
    display: none;
    width: 65%;
    left: 32px;
    transform: translate(0%, -50%);
    position: fixed;
    top: 50%;
  }
  .name{
    position: fixed;
    top: 32px;
    left: 32px;
  }
  .name.off{
    opacity: 0;
    pointer-events: none;
  }
  .project-title.hover-off{
    opacity: 0;
    pointer-events: none;
  }
  .name.off{
    opacity: 0;
    pointer-events: none;
  }
  .project-title.hover-off{
    opacity: 0;
    pointer-events: none;
  }
  .sec.about{
    display: none;
  }
  .about {
    width: 100%;
}
.custom-prev, .custom-next {
    display: none;
}
}
@media only screen and (max-width: 428px) {

}