@font-face {
  font-family: Coolvetica;
  src: url("../font/coolvetica rg.otf") format("opentype");
}
/*
.content-coolvetica {
  height: 100%;
  font-family: coolvetica;
}
*/
.ff-coolvetica{ font-family: coolvetica; }
.contenido-editor h2{
  position: absolute;
  z-index: 5000;
  color: white;
  /* font-size: 2.5rem;* */
  font-size: 1.75rem;
  transition: all 0.3s ease-in-out 0s;
  font-family: coolvetica;
}

.contenido-editor h5{
  text-align: center;
  display: block;
  width: 100%;
}
/*
.container-fluid{
  height: 100%;
  padding: 0.9%;
  width: 85%;
}
*/
.itemc{
  position: relative;
  /*padding: 2%;*/
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}  
.itemc-img{
  top: 0;
  left: 0;
  object-fit: cover;
  transition: all 0.3s ease-in-out 0s;
  max-width: 100%;
  min-height: 100%;
  position: absolute;
  z-index: 0;
  transform-origin: center center;
  object-position: center center;
  height: 100%;
  width: 100%;
  transform: scale(1);
}
.itemc-img:hover {
  transform: scale(1.1);
  z-index: 100;
  opacity: .2;
}
.wrapper, .wrapper1{
  padding: 5%;
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: rgba(200, 55, 55, 0.9);
}
.wrapper2, .wrapper3 {
  padding: 5%;
  position: relative;
  height: 50vh;
  overflow: hidden;
  background: rgba(200, 55, 55, 0.9);
}
.wrapper h2{
  top: 1%;
  left: 5%;
}
.wrapper1 h2, 
.wrapper2 h2 {
  bottom: 1%;
  left: 5%;
}
.wrapper3 h2 {
  bottom: 5%;
  left: 5%;
}
.wrapper:hover > h2{
  top: 5%;
}
.wrapper1:hover > h2, 
.wrapper2:hover > h2 {
  bottom: 5%;
}
.wrapper3:hover > h2 {
  bottom: 10%;
}
.screen{
  background: rgba(200, 55, 55, 0.6);
  position: absolute; 
  display: none; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%;
  z-index: 400;
}
.modal{ z-index: 10550; }
.modal-dialog{
  max-width: 70%;
}

.cols{
  display: flex;

}

.modal-body {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.ytp-pause-overlay .ytp-scroll-min .ytp-scroll-max{
  display: none;
}

@media (max-width: 1200px) { 
  /*.container-fluid{ width: 100%; } */

  .contenido-editor h2{
    font-size: 2.5rem;
  }
}

@media (max-width: 1025px) { 
  .contenido-editor h2{
    font-size: 2.1rem;
  }
  
}

@media (max-width: 992px) { 
  /*.container-fluid{ width: 100%; } */

  .contenido-editor h2{
    font-size: 3.5rem;
  }
}

@media (max-width: 576px) { 

  /*.container-fluid{ width: 100%; } */
 
  .cols{
    display: block;

  }

  .modal-dialog{
    max-width: 98%;
  }

  .contenido-editor h2{
    font-size: 2.5rem;
  }
}