style-classes.scss

@use "bulma/sass/utilities/mixins";
@import "bulma/sass/utilities/initial-variables";


.spacer {
  height: 100px;
}

.video-container{
  position: relative;
  background-color: #000;
  padding-bottom: 177.78%; /* (16 / 9) * 100 for vertical mode */
  height: 0;
  width: 100%;

  @include mixins.from($tablet) {
    // width: fit-content;
    padding-bottom: 56.25%;
    height: 0;
    // height: 100vh;
    width: 100%;
  }
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
  }
}


#home {
  position: relative;
  video {
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  // .hero-body {
    // position: absolute;
    // top: 0;
    // background: url('./assets/bg-hero-top.jpg');
    // background-size: cover;
    // background-position: center;
    // background-repeat: no-repeat;
  // }

  .main-logo-desktop {
    width: 100%;
  }

}

.title {
  font-family: "Bebas Neue", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 800;
  line-height: normal;
}

#contexto {
  .subtitle-frame {
    border-left: 5px solid #FFF;
    padding-left: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
  }

  .main-title {
    font-size: 57px;
  }

  @include mixins.from($desktop) {
    .subtitle-frame .title {
      font-size: 40px;
      line-height: 1;
    }

    .main-title {
      font-size: 70px;
    }

    .section {
      padding-right: 0;
      padding-bottom: 0;
    }

    .frame-wrapper {
      padding-right: 0;
      padding-bottom: 0;

      img {
        margin-left: auto;
      }
    }

    .columns {
      padding-right: 0;
    }

    .container.is-fluid {
      padding-right: 0;
    }
  }

  .text-content {
    margin: 60px 0;

    p {
      text-align: justify;
      font-size: 18px;
      line-height: 1.4;
    }
  }

  .frame-qr-desktop {
    position: sticky;
    top: 70px;
  }
}

#riesgos {
  position: relative;


  .wrapper-top {
    position: relative;

    @include mixins.touch {
      display: none;
    }

    img {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 75px;
    }
  }

  .wrapper-bottom {
    margin-top: -130px;
  }

  #wrapper-video {
    position: relative;

    video {
      width: 100%;
      height: auto;
    }

    .container {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;

      @include mixins.touch {
        display: none;
      }
    }
  }

  .riesgos-wrapper {
    .title {
      font-family: "Bebas Neue Book", "Bebas Neue", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-weight: 400;
      font-size: 38px;
      color: #FFF;
    }

    .subtitle {
      font-size: 25px;
      line-height: 1.2;
      font-weight: 500;
      color: #FFF;
    }

    .text {
      line-height: 1.3;
      font-size: 18px;
      text-align: left;
    }
  }
}

#caras-desktop {
  .hero-title {
    position: relative;

    .the-title {
      width: 100%;
    }

    .face {
      position: absolute;
      width: 7%;
      cursor: pointer;
      // animation
      transition: transform 0.3s ease-in-out;
      &:hover {
          transform: scale(1.8);
      }      
    }

    .face01 {
      top: 64%;
      left: 3%;
    }

    .face02 {
      top: 11%;
      left: 26%;
    }

    .face03 {
      top: 49%;
      left: 35%;
    }

    .face04 {
      bottom: 12%;
      right: 38%;
    }

    .face05 {
      top: 20%;
      left: 65%;
    }

    .face06 {
      top: -4%;
      right: 9%;
      width: 8%;
    }

    .face07 {
      top: 48%;
      right: 7%;
    }
  }

  .hero-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding-top: 80px;
    padding-bottom: 80px;
    width: 100%;

    .face {
      width: 7%;
      cursor: pointer;

      // animation
      transition: transform 0.3s ease-in-out;
      &:hover {
        transform: scale(1.8);

      }   
    }

    .the-subtitle {
      // position: absolute;
      width: 60%;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
    }

    .face-miriam {
      // left: 15%;
    }

    .face-axel {
      // left: 85%;
    }

  }
}


.caritas-wrapper {
  height: 30%;
  width: 100%;
  // background: #555;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  .carita, .carita-reversed {
    display: flex;
    align-items: center;
    justify-content: center;
    // background: green;
    height: 100%;
    width: 10%;
    margin: 0;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    img {
      height: 100%;
      max-height: 400px;
      width: auto;
      object-fit: cover;
    }
  }
}

#caras-mobile {
  .the-title {
    width: 100%;
  }

  .hero-title {
    position: relative;
  }

  .face {
    width: 100%;
    cursor: pointer;
  }
}

#objetivos {
  background: url('./assets/people-6.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .title {
    font-size: 75px;
  }

  .content p {
    text-align: justify;
    font-size: 21px;
  }
}

#mascaras-desktop {
  position: relative;

  @include mixins.until($desktop) {
    display: none;
  }

  .left-image {
    width: 50vw;
  }
  .withbg{
    background-image: url('./assets/mascara.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .columns.fullheight {
    height: 100%;
    min-height: 80vh;

    .column {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
  }
  .face{
    width: 50px;
    &:hover {
      transform: scale(1.35);
      cursor: pointer;
    }
  }

  .title {
    font-size: 75px;
  }

  .content p {
    font-size: 21px;
    line-height: 1.3;
  }
}

#mascaras-mobile {

  @include mixins.from($desktop) {
    display: none;
  }

  img {
    width: 100%;
  }

  .title {
    font-size: 75px;
  }

  .content p {
    font-size: 20px;
    line-height: 1.5;
  }

  .face{
    width: 50px;
    &:hover {
      transform: scale(1.35);
      cursor: pointer;
    }
  }
}


#prensa {
  .title-segment {
    font-size: 75px;
  }
  .logo-prensa {
    background-color: #FFF;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    img {
      width: 80px;
    }
  }
  .news-grid{
    margin: 0 auto;
  }
  .grid-item {
    width: 33%;
    @include mixins.until($desktop) {
      width: 100%;
    }
    padding: 0 5px;
  }
  .grid-sizer{
    width: 33%;
    @include mixins.until($desktop) {
      width: 100%;
    }

  }
  .box{
    margin-bottom: 15px;
    p {
      color: #FFF;
    }
  }
}

#contacto{
  >div{
    >div{
      height: 700px!important;
    }
  }
}

.footer {
  background-color: #FF0000;
  color: #000;

  .mail-to {
    color: #000;
    text-decoration: underline;
    font-weight: 500;
  }
  .footer-logo-title{
    width: 60%;
  }
  .link-list{
    padding-left: 5%;
  }
 
  .footer-logo{
    align-items: end;
    @include mixins.until($desktop) {
      align-items: center;
      
    }
    img{
      width: 60%;
      height: auto;
      margin: 16px 0;
    @include mixins.until($desktop) {
    width: 40%;
    }
    }}
  }


.navbar {
  position: sticky;
  top: 0;

  .navbar-item {
    color: #FFF;
    font-family: "Bebas Neue Book", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.7rem;
  }

  .caso-link{
    background-color: #FFF;
    color: #000;
    border-radius: 999px;
    font-size: 1.7rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    line-height: normal;
    font-weight: 600;
  }

  @include mixins.until($desktop) {

    &.is-open .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .navbar-menu.is-active {
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      justify-content: center;
      height: 100%;

      .navbar-item {
        text-align: center;
        font-size: 3rem;
      }
    }
    .caso-link{
      margin-right: 1.5rem;
    }
  }
}

.button{
  white-space: normal;
}
@import "style-contexto"