@font-face {
  font-family: titulo;
  src: url(../fonts/titulo.ttf);
}
@font-face {
  font-family: text;
  src: url(../fonts/text.ttf);
}
.titulo{
  font-family: titulo !important;
}
.texto{
  font-family: text;
}
.text-justify{
  text-align: justify !important;
}
.text-azul{
  color: #0C71C3 !important;
}
.text-gris{
  color: #f3ecec !important;
}
.bg-ceniza{
  background-color: #f3ecec;
  background-position: center;
  background-size: cover;
}
.bg-rojo{
  background-color: #E7374A;
  background-position: center;
  background-size: cover;
}
.text-rojo{
  color: #E7374A !important;
}
.fixed-educa {
  position: fixed;
  top: 0;
  background-color: #E7374A;
  z-index: 10;
}
@media only screen and (min-width: 310px) and (max-width: 768px){
  .fixed-educa {
    position: relative;
    z-index: 10;
  }
}
.delimitador {
  width: 800px;
  margin: auto;
}
@media only screen and (min-width: 310px) and (max-width: 768px) {
  .delimitador {
    width: 100% !important;
  }
}
.contenedor {
  height: 0px;
  width: 100%;
  max-width: 850px;
  padding-top: 56.25%;
  /* Relación: 16/9 = 56.25% */
  position: relative;
}
.video {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
/* modal inicial */
.modal-h {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.751);
	position: absolute;
  z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	animation: modal 0.5s 1s forwards;
	visibility: hidden;
	opacity: 0;
}
.contenido {
	/* margin: auto; */
  align-items: center;
  margin: 12% 5% 5% 10%;
	width: 75%;
	height: 350px;
	background: white;
  background-size: cover;
	border-radius: 10px;
}
@media only screen and (min-width: 310px) and (max-width: 768px){
  .contenido {
    margin: 27% 2% 2% 1%;
    width: 100%;
    height: 230px;
    border-radius: 10px;
  }
}
/* .contenido video{
  position: relative;
  height: 75%;
  width: 90%;
} */
.contenido iframe{
  position: relative;
  height: 75%;
  width: 90%;
}
#cerrar {
	display: none;
}
#cerrar + label {
	position: fixed;
	color: #fff;
	font-size: 25px;
	z-index: 150;
	background: #E7374A;
	height: 40px;
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	right: 150px;
	top: 150px;
	cursor: pointer;
	animation: modal 1s 2s forwards;
	visibility: hidden;
	opacity: 0;
}
#cerrar:checked + label, #cerrar:checked ~ .modal-h {
	display: none;
}
@keyframes modal {
	100% {
		visibility: visible;
		opacity: 1;
	}
}