.body-masa-madre-videos {
  background: url('../../assets/images/masamadre_videos/fondo.jpg') no-repeat center center;
  background-size: cover;
  padding: 0;
  margin-top: 0;
  color: #5D4F44!important;
  overflow: hidden;
  text-align: center;
  font-family: 'Gotham-Medium';
}

.mx-auto {
  border: 1px none red;
  width: 100%;
  margin: 0 auto;
  display: block;
  clear: both;
}


.row-title {
    margin-top: 130px;
    margin-bottom: 50px;
    .img-fluid,
    .img-responsive,
    .img-title {
        width: 100%;
        max-width: 636px;
        max-height: 518.46px;
        margin-bottom: 30px;
    }
}

.subtitulo {
  color: #5D4F44!important;
  font-size: 3.3rem!important;
  font-weight: 300;
  margin-top: 30px;
}

.video-content {
    border: 2px none black;
    margin-top: 50px;
    /*margin-bottom: 150px;*/
    margin: auto;
    width: 85%;
    text-transform: uppercase;
    > h1 {
        margin-bottom: 50px;
    }
}

.vid-1 {
    margin-top: 60px;
}

.vid-2 {
    margin-top: -150px;
}

.lt-youtube {
    margin: 10px auto;
    border: 10px solid white;
    max-width: 1140px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}


/* Decorativos */
.decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hoja-izq-top {
  top: 85px;
  left: 0;
  max-width: 15vw;/*180px;*/
}

/*.hoja-izq-bottom {
  border: 2px solid black;
  position: absolute;
  bottom: 15vw;
  left: 0;
  max-width: 20vw;
}*/
.hoja-izq-bottom {
  border: 2px none red;
  position: relative;
  bottom: 0;
  left: 0;
  max-width: 20vw;
}
.pan-izq-top {
  top: 42vw;
  left: -13.5vw; /*150px*/
  max-width: 30vw;/*330px;*/
}

.hoja-der-top {
  top: 42vw;
  right: 0;
  max-width: 14vw; /*170px*/
}
/*.hoja-der-bottom {
  border: 2px solid green;
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 15vw;
}*/
.hoja-der-bottom {
  border: 2px none green;
  position: relative;
  bottom: 0;
  right: 0;
  max-width: 15vw;
}
.pasta-der-med {
    position: relative;
    top: -2vw; /*-11vw*/
    right: -16vw;
    max-width: 36vw;
}

.separate-bottom {
    border: 2px none black; 
    height: 7.5vw;
}

/**/
.col-centered {
  float: none;
  margin-left: auto;
  margin-right: auto;
}


.full-width {
  display: table;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px none black;
}

.half {
  border: 1px none blue;
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}


@media (max-width: 500px) {
    .row-title {
      margin-top: 40px;
      margin-bottom: -50px;
      .img-fluid,
      .img-responsive,
      .img-title {
          max-width: 192px;
      }
    }
    .subtitulo {
      padding: 0 70px;
      font-size: 1.44rem!important;
      margin-top: 20px;
    }
    .full-width {
      height: 140px;
    }
    h1 {
        font-size: 1.92rem!important;
    }
    .pan-izq-top {
        top: 70vw;
        left: -16vw;
    }
    .hoja-der-top {
      top: 68vw;
    }
    .pasta-der-med {
      top: -1vw; 
      right: -13vw;
      max-width: 30vw;
  }
    .vid-2 {
      margin-top: -80px;
    }
    .hoja-izq-bottom {
      top: 10px;
    }
    .hoja-der-bottom {
      top: 25px;
    }
}


@media (min-width: 500.1px) and (max-width: 767px) {
  .body-masa-madre-videos {
    margin-top: -20px;
  }
  .titulo-masa {
    font-size: 2.8rem;
  }
  .titulo-masa span {
    font-size: 3.5rem;
  }

  .decor {
    max-width: 80px;
  }
  .vid-2 {
    margin-top: 100px;
  }
}


@media (min-width: 768px) and (max-width: 1180px) and (min-height: 1024px) and (max-height: 1180px) {
  .subtitulo {
      font-size: 1.9rem!important;
  }
  .pan-izq-top {
        top: 70vw;
    }
  .hoja-der-top {
        top: 68vw;
    }
  .pasta-der-med {
      top: -2.5vw;
      right: -11vw;
      max-width: 20vw;
  }
}

@media (width: 1024px) and (height: 768px) {
  .pasta-der-med {
      top: -3.5vw;
      right: -19vw;
  }
  .pan-izq-top {
      left: -17vw;
  }
}

@media (width: 1180px) and (height: 820px) {
  .pan-izq-top {
      left: -17vw;
  }
  .hoja-der-top {
        top: 36vw;
    }
}

@media (min-width:1300px) and (max-width: 1800px) {
  .row-title {
      .img-fluid,
      .img-responsive,
      .img-title {
          max-width: 546px;
      }
    }
    .vid-1 {
        margin-top: 100px;
    }
    .vid-2 {
      margin-top: -150px;
    }
    .hoja-der-top {
        top: 49vw;
    }
    .pan-izq-top {
        top: 52vw;
        left: -17vw;
    }
    .pasta-der-med {
        top: -2.5vw;
        right: -12vw;
    }
}

@media (min-width: 606px) and (max-width: 1200px) and (max-height: 660px) and (orientation: landscape) {
  .row-title {
      margin-top: 60px;
      margin-bottom: -50px;
      .img-fluid,
      .img-responsive,
      .img-title {
          max-width: 205px;
      }
    }
    .subtitulo {
      padding: 0 70px;
      font-size: 1.44rem!important;
      margin-top: 0;
    }
    .video-content {
        > h1 {
            font-size: 26px;
        }
    }
    .vid-2 {
      margin-top: -110px;
    }
    .full-width {
      height: 150px;
    }
    .hoja-der-top {
      top: 31vw;
    }
    .pan-izq-top {
      top: 42vw;
      left: -15vw;
      max-width: 25vw;
    }
    .pasta-der-med {
      right: -12vw;
      max-width: 26vw;
  }
}

@media (min-width: 1800.1px) and (max-width: 2460px) {
    .row-title {
        margin-top: 160px;
        margin-bottom: 100px;
    }
    .hoja-der-top {
        top: 39vw;
    }
    .pan-izq-top {
        top: 41vw;
        left: -10vw;
    }
    .pasta-der-med {
        top: -1vw;
        right: -7vw;
    }
    
}

@media (min-width: 2460.1px) {
    .row-title {
        margin-top: 360px;
        margin-bottom: 100px;
        .img-title {
            min-width: 600px;
            max-width: 670px;
        }
    }
    .subtitulo {
      font-size: 3.6rem!important;
    }
    h1 {
      font-size: 3.5rem;
    }
    .hoja-der-top {
        top: 30vw;
    }
    .pan-izq-top {
        top: 33vw;
        left: -8vw;
        min-width: 22vw;
        max-width: 30vw;
    }
    .pasta-der-med {
        top: -1vw;
        right: -6vw;
        min-width: 22vw;
        max-width: 30vw;
    }
    .vid-1 {
      margin-top: 250px;
    }
}