@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
html {
  overflow-y: auto;
}
img,
audio,
video,
canvas {
    width: 100%;
    height: auto;
    max-width: 1024px;
}
/*generales*/
a:link {color: #fe6666; text-decoration: none } 
a:visited {color: inherit;}
body {	font-family: 'Roboto', sans-serif;}
h1 {font-weight: bolder;text-transform:uppercase;color:#036;font-size:26px;text-align:center;font-family: 'Roboto', sans-serif;}
h2 {font-weight: bolder;color: #666;font-size:1.05em;text-align:center;font-family: 'Roboto', sans-serif;}
footer {
	display:block;
	text-align:center;
	background:	#fff;
	width:100%;
	margin:50px 0 0 0;
}
.header {
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    margin: 0 auto;}
#logo {
	float:left;
	background:url(../nueva/img/oyp-color.png) top left no-repeat;
    max-width: 260px;
	width: 50%;
	height: auto;
	display: block;
    margin: 2% 0;
}
.fl {float: left;}
.fr {float: right;}
.clr {clear: both;}

.cabeza { overflow:hidden; border-bottom: 1px solid #ccc;}
.container {
	max-width: 1024px;
	/*width:100%;*/
	margin:0px auto;
	position: relative;
}
.contCH {width: 70%;}
.mes-a-mes {
    margin: .25% 0;
	overflow:hidden;
}
.aviso {width: 75%; color: #000; background: #E6B802; padding:10px; margin: 7px 0;}
.ultima-a {position: relative;}
.vonline {position: absolute; top: 4%; right: 1%; width: 11%;  text-align: center; border: 1px solid #FFF; color: #fff; background-color: #000;}
@media only screen and (max-width:1024px) {
	.vonline {width: auto; padding: 0.5%; font-size: 0.8em;}}
.ult {max-width: 100%; margin: 0;}
.ult img {max-width:1024px;}
/*.servicios {max-width: 1024px;}*/	
.kiosco {float:left; margin-right: .5%;}
.suscripcion {font-size: 1.1em;}
.suscripcion h1 {margin: 4px;}
.suscripcion span {color: #FF0;}
@media only screen and (min-width:1024px){
	.kiosco, .suscripcion img {max-width: 49.75%;}
}
#modCon {width:50%;float: left; padding: 20px;}
#modCon li {list-style: none;}
#modImg {width: 45%; float: right; margin: 60px 0;}
#modImg img {width:61%;}
@media only screen and (max-width:840px){
	#modCon {float: none; margin: auto; width: 99%;}
	#modImg {float:none; margin: auto; text-align: center;}
	#modImg img {width:75%;}
}
.colegios {display: flex; flex-flow: row; justify-content: space-around; margin-top: 50px;}
/*.colegios {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
}*/
.colegios img {width: 165px !important; }
.issuu {clear: both; text-align:center; line-height:36px; font-size: 1em;border: 1px solid #F30; border-radius: 1em;}
.issuu img {width: auto; position:relative;top:2px;}
/*@media only screen and (max-width:1054px) {
	.suscripcion {float: left;}
}*/

/* BLOG */
.cat-item {margin: 2px; padding: 0px 4px; background-color: #FFF;}
.cat-item a { font-size:60%; text-decoration:none; line-height: 3px; text-align:left; }
.cat { float:left; overflow:auto; z-index:1; font: bolder 1.2em Helvetica,Arial,sans-serif; letter-spacing: 1px; }
.cat a {color:#999;}
.home_blog {
    max-width: 1024px;
	width:100%;
	margin:2% 0;
    height: 100%;
    overflow:hidden;
}
.home_blog span { font-family: 'Fjalla One', sans-serif; float:left; width:100%; text-align:left;}
.bcont { width: 31.8%; height: 255px; margin: 0px 1% 25px 0px; float:left; overflow:hidden;}
#bruce {margin: 1% auto; max-width: 1024px;}
/* default height */
#bruce { height:90px; border: 1px solid #ccc;}
.bruce-ndx {float: left; width: 327px/*31.8%*/; height:235px; overflow:hidden; margin:0 1% 25px 0;}
hr.dot {border: 1px dotted #666;}
.version-issuu {color:#666; width:100%; max-width:1002px; background-color:#FF9; border:1px solid #F90;padding:2px 10px;margin: auto; font-size:80%;}
.version-issuu a:visited { text-decoration:none;}
.version-issuu img { width:63px;}

/* Suscripcion colegios */
.suscol {
	margin: auto;
	padding: 5%;
	border: 1px solid #417ACD;
	width: 50%;
}
.btn {border: 1px solid #417ACD; padding: 2%; width: 80%; margin: auto; text-align: center;}
.btn:hover { background-color: #417ACD; color: #FFF; text-decoration-color: #FFF; }
/* FIN Suscripcion colegios */

@media only screen and (height:125px) {
   /* 125 pixels high */
   #bruce {
      height:250px;
   }
	.suscol{ width: 90%;}
}
@media screen and (max-width: 720px) {
    #bruce { height:250px; }
	.bruce-ndx {width:98%;}
	.ult {width: 98%;}
    .servicios, .ultima-a { width: 98%; }
    .bcont { width: 98%; }
    .colegios {flex-wrap: wrap;}
}
.destacado_title2 { color:#036; margin-top:4px; padding: 2px 10px; vertical-align:bottom;
}
.container-blog {
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index:0;
}

.div-img.hidden {
  overflow: hidden;
}
.div-img .img {
  display: block;
 /* margin-left: auto;
  margin-right: auto;*/
  width: 100%;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.div-img:hover .img {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
}

/* STAFF */
#staff {
	color:#FFF;
	font-size:x-small;
	list-style:none;
	text-align:left;
	width:100%;
	margin:auto;
	padding: 0;
}
#staff h1{
	font-size:12px;
    color: #fff;
	font-stretch:ultra-condensed;
    text-align: center;
}
#staff h2{	font-size:10px; font-stretch: ultra-condensed; font-weight:bold; text-align: center; color: #fff;}
#staff hr {	border:1px dashed; margin:0 40px; }
#staff ul{
	width:98%;
	margin-bottom:20px;
	overflow:hidden;
}
#staff li{
	width:30%;
	line-height:1.5em;
	float:left;
	display:inline;
	text-align:left;
}
.direccion {color: #fff; font-size: 0.7em;}
.fck-fb {float:right; width: 32.3%; height:255px; margin: 0px 1% 25px 0px; overflow: hidden; }

/* MODAL */
#btnSuscr {cursor: pointer;}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding: 10px 10px 10px 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 99%; /* Full width */
  height: 99%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  color:#ccc;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,1.00); /* Black w/ opacity */
  max-height: calc(100vh - 10px);
  overflow-y: auto;
}
.modal div {text-align:left; /* margin:auto;*/ }
.modal h1 {color: #CCC; }
.mod-itm { text-align:left; width: 40%; margin:auto;}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 70px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
t-destacada td { padding:2px; background-color:#6F9;}
@media screen and (max-width: 720px) {
    #staff li{	width:98%;}
    .fck-fb {float: left; width: 98%; height: 227px;}
    .modal {padding: 5px;}
}
#nqn-1024, #nqn-400 {margin: 2%;}
#nqn-400 {display: none;}
@media screen and (max-width: 1024px) {
    #nqn-1024 {
        display: none;
    }

    #nqn-400 {
        display:block;
    }
}

.sitemap{
    margin-top: 10px 0 0 0;
    font: 0.8rem "Fira Sans", sans-serif; ;
}
/* FORMULARIO AGENDA 25 */

/* FORMULARIO SUSCRIPCION */
#form-datos{
	font-family: 'Open Sans Condensed', arial, sans;
	width: 90%/*calc(100% - 30px)*/;
	padding: 30px;
	background: #000;
	margin: auto;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

}
#form-datos h2{
	background: #4D4D4D;
	text-transform: uppercase;
	font-family: 'Open Sans Condensed', sans-serif;
	color: #000;
	font-size: 18px;
	font-weight: 100;
	padding: 20px;
	margin: -30px -30px 30px -30px;
}
#form-datos input[type="text"],
#form-datos input[type="password"],
#form-datos input[type="number"],	
#form-datos textarea,
#form-datos select 
{ 
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
	display: block;
	width: 100%;
	padding: 7px;
	border: none;
	/*border-bottom: 1px solid #ddd;*/
	background: transparent;
	margin-bottom: 10px;
	font: 16px Arial, Helvetica, sans-serif;
	height: 45px;
}
#form-datos textarea{
	resize:none;
	overflow: hidden;
}
#form-datos button, 
#form-datos input[type="submit"]{
	-moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
	-webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
	box-shadow: inset 0px 1px 0px 0px #45D6D6;
	background-color: #2CBBBB;
	border: 1px solid #27A0A0;
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 14px;
	padding: 8px 18px;
	text-decoration: none;
	text-transform: uppercase;
}
#form-datos button:hover, 
#form-datos input[type="submit"]:hover {
	background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
	background-color:#34CACA;}

/*** BOTONES NAVEGACION ***/
.ov-btn-slide-left {
  background: #fff; /* color de fondo */
  color: #fe6666 !important; /* color de fuente */
  border: 2px solid #fe6666; /* tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* redondear bordes */
  margin: 2px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.ov-btn-slide-left:hover {
  color: #fff !important; /* color de fuente hover */
}
.ov-btn-slide-left::after {
  content: "";
  background: #fe6666; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-left:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.ov-btn-slide-left a:visited {color: inherit;}
/*** FIN BOTONES NAVEGACION ***/