@font-face {
      font-family: HelveticaNeueLTStd-Bd;
      src: url(fonts/HelveticaNeueLTStd-Bd.woff2);
      font-weight: 700;
  }

  @font-face {
      font-family: HelveticaNeueLTStd-Lt;
      src: url(fonts/HelveticaNeueLTStd-Lt.woff2);
      font-weight: 00;
  }

:root {
    --clr-primary-400: rgb(255,0,0);
    --clr-neutral-100: white;
    --clr-neutral-900: black;
    --ff-primary: HelveticaNeueLTStd-Lt, Arial, Helvetica, sans-serif;
    --ff-secondary: HelveticaNeueLTStd-Bd, Arial, Helvetica, sans-serif;
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);
    --fw-extra-light: 00;
    --fw-medium: 500;
    --fw-bold: 700;
    --fs-300: .8rem;
    --fs-400: 1rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;
    --fs-700: 2.5rem;
    --fs-800: 3rem;
    --fs-850: 3.5rem;
    --fs-870:4rem;
    --fs-900: 5rem;
    --fs-1000: 5.6rem;
    --fs-body: var(--fs-400);
    --fs-nav: var(--fs-600);
    --fs-primary-heading: var(--fs-600);
    --fs-secondary-heading: var(--fs-700);
    --fs-project: var(--fs-500);
    --fs-project-footer: var(--fs-300)
}

@media (min-width:63em) {
    :root {
        --fs-body: var(--fs-400);
        --fs-nav: var(--fs-700);
        --fs-primary-heading: var(--fs-800);
        --fs-primary-heading-quienes: var(--fs-870);
        --fs-secondary-heading: var(--fs-850);
        --fs-project: var(--fs-700);
        --fs-project-footer: var(--fs-400)
    }
}

@media (max-width: 63em) {
    :root {
        --fs-body: var(--fs-400);
        --fs-nav: var(--fs-700);
        --fs-primary-heading: var(--fs-700);
        --fs-primary-heading-quienes: var(--fs-700);
        --fs-secondary-heading: var(--fs-700);
        --fs-project: var(--fs-600)
    }
}

@media (max-width: 30em) {
    :root {
        --fs-body: var(--fs-400);
        --fs-nav: var(--fs-700);
        --fs-primary-heading: var(--fs-500);
        --fs-primary-heading-quienes: var(--fs-500);
        --fs-secondary-heading: var(--fs-600);
        --fs-project: var(--fs-500)
    }
}



body {
    position: relative;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

* {
    font-size: inherit;
    margin: 0;
    padding: 0
}

ul[role=list],
ol[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

html,
body {
    height: 100%
}

body {
    text-rendering: optimizeSpeed;
    line-height: 1;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    color: var(--clr-neutral-100);
    background-color: var(--clr-neutral-900)
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
picture {
    max-width: 100%;
    display: block
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

.bg-primary-400 {
    background-color: var(--clr-primary-400)
}

.bg-white {
    background-color: white;
    color: black;
}

.fw-extralight {
    font-weight: var(--fw-extra-light)
}

.fw-medium {
    font-weight: var(--fw-medium)
}

.fw-bold {
    font-weight: var(--fw-bold)
}

.fs-primary-heading {
    font-size: var(--fs-primary-heading)
}

.fs-primary-heading-quienes {
    font-size: var(--fs-primary-heading-quienes)
}

.fs-secondary-heading {
    font-size: var(--fs-secondary-heading)
}

.fs-project {
    font-family: var(--ff-secondary);
    font-weight: 700;
    font-size: var(--fs-project)
}

.fs-project-footer {
    font-size: var(--fs-project-footer)
}

.fs-project-footer span {
    font-family: var(--ff-secondary);
    font-weight: 700;
}

.width-heading {
    max-width: 800px;
    margin-left: auto;
}

.bg-black {
    height: 100%;
    width: 100%;
    z-index: 100;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    z-index: -1
}

.container {
    margin: 0 5%;
    width: 90%;
}

.section-title {
    text-align: right;
    max-width: 1100px;
    margin-left: auto;
}

.d-flex {
    display: flex
}

.justify-content-between {
    justify-content: space-between
}

.align-items-center {
    align-items: center
}

.m-title {
    margin-top: 12rem
}

.hidden {
    opacity: 0 !important
}

.d-none {
    display: none !important
}

/*h1,
h2,
h3 {
    color: var(--clr-neutral-100)
}*/

footer {
    background-color: var(--clr-neutral-900);
    padding: 4rem 0 2rem;
    scroll-snap-align: start;
    align-items: center;
    display: flex;
    height: 100vh;
    position: absolute;
    width: 100%;
    z-index: 100
}

.footer-content {
    display: flex;
    /*flex-direction: column;*/
    align-items: flex-start
}

.page-scroll {
    position: relative;
    height: 100vh;
    overflow-y: scroll;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    transition: transform .75s ease
}

.mail {
    color: var(--clr-neutral-100);
    text-decoration: none;
    margin-top: 15px;
}

.menu-container {
    width: 100vw;
    height: 100vh;
    background-color:black;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    transform: translateY(-100vh);
    transition: all .5s ease;
    padding: 7rem 0 2rem
}

/*.menu-toggle {
    align-self: flex-start;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--clr-neutral-100)
}

.menu-toggle .line {
    background-color: white;
    width: 50px;
    height: 5px;
    margin-bottom: 8px;
}*/

.section-content {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    transition: transform .75s ease
}

.is-open {
    pointer-events: auto;
    transform: translateY(0)
}

.section-wrapper {
    height: 100vh;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start
}

.section-video {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    object-fit: fill;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: -10
}

.section-video video {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.section-caption {
    color: var(--clr-neutral-100);
    font-weight: var(--fw-medium)
}

.section-footer {
    position: fixed;
    bottom: 30px;
    width: 100%;
    z-index: 10
}

.section-footer .container>* {
    flex: 1
}

.numeration {
    text-align: right;
    color: var(--clr-neutral-100)
}

.plus {
    text-align: center;
    color: var(--clr-neutral-100);
    text-decoration: none;
    font-size: .8rem;
    line-height: 1rem;
    background-color: #fff;
    color: #000;
    padding: .3rem;
    max-width: 140px;
    transition: .5s ease
}

.plus:hover {
    background-color: #000;
    color: #fff
}

.logo {
    fill: white;
}


.logo-mobile {
    position: absolute;
    top: 40px;
    left: 1.5rem
}

.logo-desktop {
    opacity: 1;
    transition: .5s ease
}

.logo-footer {
    margin-bottom: 2rem
}

.primary-header {
    position: fixed;
    width: 90%;
    z-index: 500;
    top: 40px;
    margin: 0 5%;
    display: flex;
    justify-content: flex-end;
}

.primary-navigation {
    margin: 0 0 0 1.5rem
}

.nav-link {
    font-size: var(--fs-nav);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-100);
    text-decoration: none;
    transition: .5s ease
}

.nav-link:hover {
    color: var(--clr-primary-400);
}

[data-proyect=mdsz] {
    background: var(--clr-primary-400);
    background-position: bottom;
    background-size: 200%
}

.loader {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: var(--clr-neutral-900);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: initialBg 1s ease;
    animation-delay: 7s;
    animation-fill-mode: forwards
}

.loader.notvisible {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    animation: logo 2s ease;
    animation-iteration-count: 1;
    opacity: 0
}

.loader-text {
    color: var(--clr-neutral-100);
    position: absolute;
    font-size: var(--fs-700);
    font-weight: var(--fw-extra-light);
    text-align: center;
    padding: 0 2rem;
    opacity: 0;
    animation: initialText 2s ease;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards
}

/*hamburguer*/

.menu-toggle {
  display: inline-block;
  position: absolute;
  left: 0;
  height: 26px;
  margin-top: 20px;
  cursor: pointer;
}
.menu-toggle a.main-nav-toggle {
  display: block;
  width: 50px;
  height: 45px;
  left: 5%;
  top: 25px;
}
.menu-toggle a.main-nav-toggle:after, .menu-toggle a.main-nav-toggle:before {
  content: "";
  position: absolute;
  top: 0;
  height: 0;
  border-bottom: 4px solid white;
  width: 100%;
  left: 0;
  right: 0;
  transition: all ease-out 0.3s;
}
/*
.bg-white .menu-toggle a.main-nav-toggle:after, .menu-toggle a.main-nav-toggle:before, .bg-white .menu-toggle a.main-nav-toggle i {
    border-bottom: 4px solid black;
}

.bg-white .menu-toggle a.main-nav-toggle.active-menu:after, .menu-toggle a.main-nav-toggle.active-menu:before, .bg-white .menu-toggle a.main-nav-toggle.active-menu i {
    border-bottom: 4px solid white;
}*/

.menu-toggle a.main-nav-toggle:after {
  top: 100%;
}
.menu-toggle a.main-nav-toggle i {
  display: block;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  height: 4px;
  background-color: white;
  width: 100%;
  position: absolute;
  top: 50%;
  transition: all ease-out 0.1s;
}
.menu-toggle a.main-nav-toggle.active-menu:after {
  transform: rotate(-45deg);
  transform-origin: center;
  top: 50%;
}
.menu-toggle a.main-nav-toggle.active-menu:before {
  transform: rotate(45deg);
  transform-origin: center;
  top: 50%;
}
.menu-toggle a.main-nav-toggle.active-menu i {
  opacity: 0;
}

.redes {
    width: 30px;
    margin-right: 15px;
}

/*proyectos*/

.container-fotos {
    display: grid;
   grid-template-columns: 1fr 1fr 1fr;
     gap: 2rem;
}

.img-fluid {
    max-width: 100%;
}

.fotos-proyectos {
    max-width: 90%;
    margin: 200px auto 50px auto;
}

.header-fotos {
    margin: 0 auto 50px auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.title-proyecto {
    font-family: var(--ff-secondary);
    margin: 20px 0 30px 0;
    font-weight: var(--fw-bold);
}

.volver a {
    display: flex;
    color: white;
    text-decoration: none;
}

.volver a img {
    margin-left: 5px;
}

.otras-obras {
    padding: 80px 0;
}

.otras-obras h1 {
    margin-bottom: 30px;
}

.obras-lista {
    list-style: none;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: 20px 0;
    border-bottom: 1px solid white;
    gap: 2rem;
    color: #888888;
}

.obras-lista li:first-child {
    font-family: var(--ff-secondary);
    font-weight: var(--fw-bold);
    color: white;
}

.obras-lista li:nth-child(3) {
    text-align: right;
}


@keyframes logo {
    0% {
        opacity: 0;
        scale: 1.1;
    }

    75% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes initialText {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes initialBg {
    0% {
        opacity: 1;
        visibility: visible
    }

    to {
        opacity: 0;
        visibility: hidden
    }
}

@media (min-width:50em) {
    .menu-container {
        max-width: 300px;
        display: block;
        transform: translate(-100vh);
        padding: 0
    }

    .is-open {
        transform: translate(0)
    }

    .primary-navigation {
        margin: 10rem 0 0 25%;
    }

    .logo {
        width: auto
    }

    .logo-mobile {
        display: none
    }

    .footer-content {
        justify-content: space-between;
        align-items: flex-end;
        flex-direction: row
    }

    footer {
        height: auto
    }

    .logo-footer {
        margin-bottom: 0
    }


}

@media (max-width:30em) {
    .logo {
        width: 80px;
        margin-top: -15px;
    }

    .menu-toggle a.main-nav-toggle {
        width: 40px;
    }

}

@media (max-width:36em) {
        .obras-lista li:nth-child(3) {
        text-align: left;
    }

    .obras-lista {
        grid-template-columns: 1fr;
    }
}

@media (max-width:767px) {
        .container-fotos {
   grid-template-columns: 1fr;
}
}