// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

  .embed-responsive::before {
    display: block;
    content: "";
  }

  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive-9by16::before {
    padding-top: 178.25%;
}


#videos-2 .modal-dialog16-9 {
      max-width: 1000px !important;
  }

#videos-2 .modal-dialog {
      max-width: 650px;
      margin: 30px auto;
  }

#videos-2 .modal-body {
  position:relative;
  padding:0px;
}
#videos-2 .btn-close {
  position:absolute;
  right:-35px;
  top:-19px;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
  background: transparent;
}


#videos-3 .modal-dialog9-16 {
      max-width: 350px !important;
  }

#videos-3 .modal-dialog {
      max-width: 350px;
      margin: 30px auto;
  }

#videos-3 .modal-body {
  position:relative;
  padding:0px;
}
#videos-3 .btn-close {
  position:absolute;
  right:-35px;
  top:-19px;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
  background: transparent;
}


.embed-responsive-1by1::before {
    padding-top: 100%;
}

#modal-1 .embed-responsive-1by1{
      max-width: 100% !important;
      margin-top: 60%!important; /* alargar el iframe*/
  }

#modal-1 .modal-dialog {
      max-width: 650px;
      margin: 30px auto;
  }

#modal-1 .modal-body {
  position:relative;
  padding:0px;
}
#modal-1 .btn-close {
  position:absolute;
  right:-10px;
  top:-40px;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
  background: transparent;
}