/**
* Template Name: TheEvent - v4.0.1
* Template URL: https://bootstrapmade.com/theevent-conference-event-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/


@font-face {
  font-family: "Lato-Black";
  src: url(../fonts/lato/Lato-Black.ttf), url(../fonts/lato/Lato-Black.eot), url(../fonts/lato/Lato-Black.otf);
}


@font-face {
  font-family: "Lato-Bold";
  src: url(../fonts/lato/Lato-Bold.ttf), url(../fonts/lato/Lato-Bold.eot), url(../fonts/lato/Lato-Bold.otf);
}


@font-face {
  font-family: "Lato-Regular";
  src: url(../fonts/lato/Lato-Regular.ttf), url(../fonts/lato/Lato-Regular.eot), url(../fonts/lato/Lato-Regular.otf);
}







@font-face {
  font-family: "Montserrat-Black";
  src: url(../fonts/monserrat/Montserrat-Black.ttf), url(../fonts/monserrat/Montserrat-Black.eot), url(../fonts/monserrat/Montserrat-Black.otf);
}

@font-face {
  font-family: "Montserrat-BlackItalic";
  src: url(../fonts/monserrat/Montserrat-BlackItalic.ttf), url(../fonts/monserrat/Montserrat-BlackItalic.eot), url(../fonts/monserrat/Montserrat-BlackItalic.otf);
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url(../fonts/monserrat/Montserrat-Bold.ttf), url(../fonts/monserrat/Montserrat-Bold.eot), url(../fonts/monserrat/Montserrat-Bold.otf);
}

@font-face {
  font-family: "Montserrat-BoldItalic";
  src: url(../fonts/monserrat/Montserrat-BoldItalic.ttf), url(../fonts/monserrat/Montserrat-BoldItalic.eot), url(../fonts/monserrat/Montserrat-BoldItalic.otf);
}

@font-face {
  font-family: "Montserrat-ExtraBold";
  src: url(../fonts/monserrat/Montserrat-ExtraBold.ttf), url(../fonts/monserrat/Montserrat-ExtraBold.eot), url(../fonts/monserrat/Montserrat-ExtraBold.otf);
}

@font-face {
  font-family: "Montserrat-ExtraBoldItalic";
  src: url(../fonts/monserrat/Montserrat-ExtraBoldItalic.ttf), url(../fonts/monserrat/Montserrat-ExtraBoldItalic.eot), url(../fonts/monserrat/Montserrat-ExtraBoldItalic.otf);
}

@font-face {
  font-family: "Montserrat-ExtraLight";
  src: url(../fonts/monserrat/Montserrat-ExtraLight.ttf), url(../fonts/Montserrat-ExtraLight.eot), url(../fonts/Montserrat-ExtraLight.otf);
}

@font-face {
  font-family: "Montserrat-ExtraLightItalic";
  src: url(../fonts/monserrat/Montserrat-ExtraLightItalic.ttf), url(../fonts/monserrat/Montserrat-ExtraLightItalic.eot), url(../fonts/monserrat/Montserrat-ExtraLightItalic.otf);
}

@font-face {
  font-family: "Montserrat-Italic";
  src: url(../fonts/monserrat/Montserrat-Italic.ttf), url(../fonts/monserrat/Montserrat-Italic.eot), url(../fonts/monserrat/Montserrat-Italic.otf);
}

@font-face {
  font-family: "Montserrat-Light";
  src: url(../fonts/monserrat/Montserrat-Light.ttf), url(../fonts/monserrat/Montserrat-Light.eot), url(../fonts/monserrat/Montserrat-Light.otf);
}

@font-face {
  font-family: "Montserrat-LightItalic";
  src: url(../fonts/monserrat/Montserrat-LightItalic.ttf), url(../fonts/monserrat/Montserrat-LightItalic.eot), url(../fonts/monserrat/Montserrat-LightItalic.otf);
}

@font-face {
  font-family: "Montserrat-Medium";
  src: url(../fonts/monserrat/Montserrat-Medium.ttf), url(../fonts/monserrat/Montserrat-Medium.eot), url(../fonts/monserrat/Montserrat-Medium.otf);
}

@font-face {
  font-family: "Montserrat-MediumItalic";
  src: url(../fonts/monserrat/monserrat/Montserrat-MediumItalic.ttf), url(../fonts/monserrat/Montserrat-MediumItalic.eot), url(../fonts/monserrat/Montserrat-MediumItalic.otf);
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url(../fonts/monserrat/Montserrat-Regular.ttf), url(../fonts/Montserrat-Regular.eot), url(../fonts/monserrat/Montserrat-Regular.otf);
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url(../fonts/monserrat/Montserrat-SemiBold.ttf), url(../fonts/monserrat/Montserrat-SemiBold.eot), url(../fonts/monserrat/Montserrat-SemiBold.otf);
}

@font-face {
  font-family: "Montserrat-SemiBoldItalic";
  src: url(../fonts/monserrat/Montserrat-SemiBoldItalic.ttf), url(../fonts/monserrat/Montserrat-SemiBoldItalic.eot), url(../fonts/monserrat/Montserrat-SemiBoldItalic.otf);
}



@font-face {
  font-family: "Raleway-Light";
  src: url(../fonts/raleway/Raleway-Light.ttf), url(../fonts/raleway/Raleway-Light.eot), url(../fonts/raleway/Raleway-Light.otf);
}

@font-face {
  font-family: "Raleway-Regular";
  src: url(../fonts/raleway/Raleway-Regular.ttf), url(../fonts/raleway/Raleway-Regular.eot), url(../fonts/raleway/Raleway-Regular.otf);
}

@font-face {
  font-family: "Raleway-SemiBold";
  src: url(../fonts/raleway/Raleway-SemiBold.ttf), url(../fonts/raleway/Raleway-SemiBold.eot), url(../fonts/raleway/Raleway-SemiBold.otf);
}

@font-face {
  font-family: "Raleway-Bold";
  src: url(../fonts/raleway/Raleway-Bold.ttf), url(../fonts/raleway/Raleway-Bold.eot), url(../fonts/raleway/Raleway-Bold.otf);
}

@font-face {
  font-family: "Raleway-ExtraBold";
  src: url(../fonts/raleway/Raleway-ExtraBold.ttf), url(../fonts/raleway/Raleway-ExtraBold.eot), url(../fonts/raleway/Raleway-ExtraBold.otf);
}

@font-face {
  font-family: "Raleway-Black";
  src: url(../fonts/raleway/Raleway-Black.ttf), url(../fonts/raleway/Raleway-Black.eot), url(../fonts/raleway/Raleway-Black.otf);
}





@font-face {
  font-family: "Roboto-Bold";
  src: url(../fonts/roboto/Roboto-Bold.ttf), url(../fonts/roboto/Roboto-Bold.eot), url(../fonts/roboto/Roboto-Bold.otf);
}


@font-face {
  font-family: "Roboto-BoldCondensed";
  src: url(../fonts/roboto/Roboto-BoldCondensed.ttf), url(../fonts/roboto/Roboto-BoldCondensed.eot), url(../fonts/roboto/Roboto-BoldCondensed.otf);
}

@font-face {
  font-family: "Roboto-Condensed";
  src: url(../fonts/roboto/Roboto-Condensed.ttf), url(../fonts/roboto/Roboto-Condensed.eot), url(../fonts/roboto/Roboto-Condensed.otf);
}









.logooygdesktop{display: block;}

.logooygdesktop a img{height: 50px;}

@media (max-width: 959px) {
    .logooygdesktop{display: none;}
}



body {
  background: #fff;
  color: #2f3138;
  font-family: "Montserrat-Regular";
  margin: 0;
}

a {
  color: #004976;
  text-decoration: none;
  transition: 0.5s;
}

a:hover, a:active, a:focus {
  color: #004976;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
  font-family: "Montserrat-Regular";
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat-Regular";
  font-weight: 400;
  margin: 0 0 5px 0;
  padding: 0;
  color: #0e1b4d;
}



.mainentrada01{color:#013c86; font-size: 1.1em; background:#ffcb0d; border: 1px solid #013c86; font-family: "Montserrat-SemiBold"; padding:10px; border-radius:2px; width: 100%; text-align: center;}
.mainentrada02{color:#013c86; font-size: 0.9em; line-height: 0.9em; background:#ffcb0d; border: 1px solid #013c86; font-family: "Montserrat-SemiBold"; padding:3px; border-radius:3px; width: 50%;}


@media (max-width: 600px){
  .mainentrada01{font-size: 1em; line-height: 0.9em; padding: 2px; text-align: left; width: 60%;}
  .mainentrada02{ font-size: 0.8em; width: 70%;}
}


.main-page {
  margin-top: 70px;
}


/* Prelaoder */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #fff url("../img/preloader.svg") no-repeat center center;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #2289c9;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #f94a6a;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/* Sections Header
--------------------------------*/
.section-header {
  position: relative;
  text-align: center;
}

/*.section-header::before {
  content: '';
  position: absolute;
  display: block;
  width: 60px;
  height: 5px;
  background: #f82249;
  bottom: 0;
  left: calc(50% - 25px);
}*/

.section-header h1 {
  font-size: 70px;
  text-align: center;
  font-weight: 700;
  padding: 1.5em 0 0 0;
}

.section-header h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-header p {
  text-align: center;
  padding: 0;
  font-family: "Montserrat-Regular";
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #666666;
}

.section-header img {
  border-radius: 50%;
  padding: 0 20% 0 20%;
}

@media (max-width: 992px) {


  .section-header {
    position: relative;
  }


  .section-header h1 {font-size: 35px; padding: 3em 0 0 0;}
  .section-header h2 {font-size: 25px;}
  .section-header p {font-size: 14px;}

}




.section-with-bg { background-color: #f6f7fd; padding: 0;}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: #0166b3;
  height: 70px;
  position: fixed;
  padding: 0 15% 0 15%;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}


#header.header-scrolled, #header.header-inner {
  background: #004c86;
  height: 70px;
}

#header #logo h1 {
  font-size: 36px;
  margin: 0;
  font-family: "Montserrat-ExtraBold";
  letter-spacing: 3px;
  text-transform: uppercase;
}

#header #logo h1 span {
  color: #f82249;
}

#header #logo h1 a, #header #logo h1 a:hover {
  color: #fff;
}

#header #logo img {
  padding: 0;
  margin: -10px 0 0 0;
  max-height: 50px;
}

@media (max-width: 1300px){
  #header {padding: 0 10% 0 10%;}
  .navbar a {font-size: 0.7em;}
}

@media (max-width: 1200px){
  #header {padding: 0 5% 0 5%;}
  .navbar a {font-size: 0.9em;}
}

@media (max-width: 992px){
  #header {padding: 0;}
  .navbar a {font-size: 0.8em;}
}





@media (max-width: 992px) {
  #header #logo img {max-height: 30px;}

  

}

/*--------------------------------------------------------------
# Buy Tickets
--------------------------------------------------------------*/
.buy-tickets {
  color: #fff;
  background: #f82249;
  padding: 7px 22px;
  margin: 0 0 0 15px;
  border-radius: 50px;
  border: 2px solid #f82249;
  transition: all ease-in-out 0.3s;
  font-weight: 500;
  line-height: 1;
  font-size: 13px;
  white-space: nowrap;
}

.buy-tickets:hover {
  background: none;
  color: #fff;
}

.buy-tickets:focus {
  color: #fff;
}

@media (max-width: 992px) {
  .buy-tickets {
    margin: 0 15px 0 0;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar > ul > li {
  white-space: nowrap;
  padding: 10px 0 10px 12px;
}

.navbar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-family: "Roboto-Bold";
  letter-spacing: -0.5px;
  font-size: 0.85em;
  white-space: nowrap;
  transition: 0.3s;
  position: relative;
  padding: 6px 4px;
}

.navbar a i {
  font-size: 0.9em;
  line-height: 0;
  margin-left: 5px;
}

.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #f82249;
  visibility: hidden;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
  visibility: visible;
  width: 100%;
}

.navbar a:hover, .navbar .active, .navbar li:hover > a {
  color: #fff9a7;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 12px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  color: #060c22;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #f82249;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile > ul > li {
  padding: 0;
}

.navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
  visibility: hidden;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #060c22;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #f82249;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #f82249;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*====================== Estilos entradas noticias =========================*/
.btnpestanapag{background:#ffffff; border: #16879e solid 1px; color:#16879e; font-family: "Lato-Regular"; font-size: 0.6em; margin: 0 0.1em 0 0.1em; padding: 1em; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.btnpestanapag:hover{background:#666666; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.btnpestanapagactive{background: #16879e; color: #ffffff;}
/*====================== Estilos entradas noticias =========================*/

/*====================== Estilos cuerpo noticias =========================*/


.antetituloarticle{ color: #EB0A90; font-family: "Montserrat-SemiBold"; text-transform: uppercase; font-size: 0.8em; text-align: center;}
.titlemainarticle{font-family: "Raleway-Extrabold"; font-size: 2em; text-align: center; line-height: 1em;}
.titlemainarticlememorias{font-family: "Raleway-Extrabold"; font-size: 3em; text-align: center; line-height: normal; text-transform: uppercase;}


.nomobile{display: block;}

@media (max-width: 768px) {
  .nomobile{display: none;}
}



.descriptionmainarticle{font-size: 1em; font-family: "Raleway-Regular"; line-height: 1em; color: #000; margin-bottom: 2em; }
.descriptionmainarticle img{width: 32px; border-radius: 2em; border: solid 2px #ffee00; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.descriptionmainarticle strong{font-family: "Raleway-Extrabold";}


.descriptionentradaarticle{font-size: 0.9em; font-family: "Raleway-Regular"; line-height: 1em; color: #000; }
.descriptionentradaarticle strong{font-family: "Raleway-Extrabold";}

.maintextbox{padding: 3em 1em 1em 1em; font-family: "Raleway-Regular";}

.maintextbox p {font-family: "Raleway-Regular"; text-align: justify; font-size: 17px;}
.maintextbox p strong {font-family: "Raleway-Bold"; color: #000000; font-size: 19px; font-weight: bold;}
.maintextbox a {font-family: "Raleway-ExtraBold"; color:#261997;}
.maintextbox i {font-weight:600;}

.brandarticle img{width: 56px; float: left; margin: 0 0.5em 0 0;}
.brandarticleh2 { color: #000000; font-family: "Lato-Black"; font-size: 1.7em; line-height: 1em;}
.brandarticleh3 {font-family: "Lato-Bold"; color: #c58b03; letter-spacing: 1px;}
.brandarticleh3 strong{color: #000000;}



@media (max-width: 1200px) {
  .titlemainarticle, .titlemainarticlememorias{font-size: 1.5em; line-height: 0.9em;}
  .descriptionmainarticle{font-size: 0.9em;}
  .maindescription{font-size: 1.2em;}
  
}

@media (max-width: 600px) {
  .titlemainarticle, .titlemainarticlememorias{font-size: 1.2em; line-height: 0.8em;}
  .descriptionmainarticle{font-size: 0.8em;}
  .maindescription{font-size: 1em; line-height: 0.9em;}
  .maintextbox p {font-size: 14px;}
  .maintextbox p strong {font-size: 16px;}
}

/*====================== Estilos cuerpo noticias =========================*/
/*====================== Estilos autores noticias ========================*/
.imgautor{padding: 1em; border-radius: 50%; width: 100%;}
.titleautor{color: #000000; font-family: "Lato-Black"; font-size: 3em; margin: 0;}
.titledescription{color: #000000; font-family: "Lato-Bold"; font-size: 1.5em; margin: 0;}
.textautor{color: #000000; font-family: "Lato-Regular"; margin: 0;}

.diagramastransformacionpedagogica{width: 100%; padding: 0 15% 0 15%;}


@media (max-width: 992px) {
  .titleautor{font-size: 2em;}
  .titledescription{font-size: 1.2em;}
  .diagramastransformacionpedagogica{width: 100%; padding: 0;}
}

/*====================== Estilos autores noticias ========================*/

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url(../img/hero-bg.jpg) top center;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

#hero:before {
  content: "";
  background: rgba(6, 12, 34, 0.8);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 90px;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
}

@media (max-width: 991px) {
  #hero .hero-container {
    top: 70px;
  }
}

#hero h1 {
  color: #fff;
  font-family: "Montserrat-ExtraBold";
  font-size: 56px;
  font-weight: 600;
  text-transform: uppercase;
}

#hero h1 span {
  color: #f82249;
}

@media (max-width: 991px) {
  #hero h1 {
    font-size: 34px;
  }
}

#hero p {
  color: #ebebeb;
  font-weight: 700;
  font-size: 20px;
}

@media (max-width: 991px) {
  #hero p {
    font-size: 16px;
  }
}

#hero .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#f82249 50%, rgba(101, 111, 150, 0.15) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

#hero .play-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#hero .play-btn:before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 2px solid rgba(163, 163, 163, 0.4);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

#hero .play-btn:hover::after {
  border-left: 15px solid #f82249;
  transform: scale(20);
}

#hero .play-btn:hover::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

#hero .about-btn {
  font-family: "Montserrat-ExtraBold";
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  border: 2px solid #f82249;
}

#hero .about-btn:hover {
  background: #f82249;
  color: #fff;
}

@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
#about {
  background: url("../img/about-bg.jpg");
  background-size: cover;
  overflow: hidden;
  position: relative;
  color: #fff;
  padding: 60px 0 40px 0;
}

@media (min-width: 1024px) {
  #about {
    background-attachment: fixed;
  }
}

#about:before {
  content: "";
  background: rgba(13, 20, 41, 0.8);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#about h2 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
}

#about h3 {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #fff;
}

#about p {
  font-size: 14px;
  margin-bottom: 20px;
  color: #fff;
}



.bannermain01{background:#000; padding: 2em; width: 100%; text-align: center;}
.imgabout{margin: -4em 0 -2em 0; padding: 0;}

.imgicaroradio {width: 80%;}

@media (max-width: 768px) { 
  .imgabout{margin: -3em 0 0 0; padding:0 30% 1em 30%;} 
  .imgicaroradio {width: 30%;}

}


.bannermain01 h2 {font-family: "Montserrat-Bold"; color: #ffffff; font-size: 3em;}
.bannermain01 h3 {font-family: "Montserrat-Medium"; color: #ffffff; font-size: 1.2em;}
.bannermain01 p {font-family: "Montserrat-Medium"; color: #ffffff; font-size: 1em;}


@media (max-width: 768px) { 
  .bannermain01 h2 {font-family: "Montserrat-Bold"; color: #ffffff; font-size: 1.5em;}
  .bannermain01 h3 {font-family: "Montserrat-Medium"; color: #ffffff; font-size: 0.9em;}
  .bannermain01 p {font-family: "Montserrat-Medium"; color: #ffffff; font-size: 0.8em;}

}


/*--------------------------------------------------------------
# Speakers Section
--------------------------------------------------------------*/
#speakers {
  padding: 0;
}

#speakers .speaker {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

#speakers .speaker .details {
  background: rgba(6,108,179, 0.8);
  position: absolute;
  left: 0;
  bottom: -30px; /* debe coincidir con el de abajo*/
  right: 0;
  text-align: center;
  padding-top: 10px;
  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

#speakers .speaker .details h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 600;
}

@media (max-width: 768px) { 
  #speakers .speaker .details h3 {font-size: 13px;}
}

#speakers .speaker .details h6 {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}



#speakers .speaker .details p {
  color: #fff;
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 10px;
}

#speakers .speaker .details .social {
  height: 40px; /* permite cambiar el alto de lo escondido*/
  padding: 0.5em 1em 0.5em 1em;
}

#speakers .speaker .details .social i {
  line-height: 0;
  margin: 0 2px;
}

#speakers .speaker .details a {
  color: #fff;
}

/*#speakers .speaker .details a:hover {color: #f82249;}*/

#speakers .speaker:hover .details {
  bottom: 0;
}

#speakers-details {
  padding: 60px 0;
}

#speakers-details .details h2 {
  color: #112363;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}

#speakers-details .details .social {
  margin-bottom: 15px;
}

#speakers-details .details .social a {
  background: #e9edfb;
  color: #112363;
  line-height: 1;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#speakers-details .details .social a:hover {
  background: #f82249;
  color: #fff;
}

#speakers-details .details .social a i {
  font-size: 16px;
  line-height: 0;
}

#speakers-details .details p {
  color: #112363;
  font-size: 15px;
  margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Schedule Section
--------------------------------------------------------------*/
#schedule {
  padding: 60px 0 60px 0;
}

@media (max-width: 600px) { #schedule {padding: 60px 3em 60px 3em;} }


#schedule .nav-tabs {
  text-align: center;
  margin: auto;
  display: block;
  border-bottom: 0;
  margin-bottom: 30px;
}

#schedule .nav-tabs li {
  display: inline-block;
  margin: 0.3em;/*Define distnacia entre botones-pestañas*/
}

#schedule .nav-tabs a {
  border: none;
  border-radius: 50px;
  font-weight: 600;
  background-color: #0e1b4d;
  color: #fff;
  padding: 10px 40px;
}

@media (max-width: 991px) {
  #schedule .nav-tabs a {
    padding: 8px 60px;
  }
}

@media (max-width: 767px) {
  #schedule .nav-tabs a {
    padding: 8px 50px;
  }
}

@media (max-width: 480px) {
  #schedule .nav-tabs a {
    padding: 8px 30px;
  }
}

#schedule .nav-tabs a.active {
  background-color: #284aa7;
  font-family: "Montserrat-Bold";
  color: #fff;
}

#schedule .sub-heading {
  text-align: center;
  font-size: 18px;
  font-style: italic;
  margin: 0 auto 30px auto;
}

@media (min-width: 991px) {
  #schedule .sub-heading {
    width: 75%;
  }
}

#schedule .tab-pane {
  transition: ease-in-out .2s;
}

#schedule .schedule-item {
  padding-top: 15px;
  padding-bottom: 15px;
  transition: background-color ease-in-out 0.3s;
}



#schedule .schedule-item time {
  padding-bottom: 5px;
  display: inline-block;
}

#schedule .schedule-item .speaker {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  float: left;
  margin: 0 10px 10px 0;
}

#schedule .schedule-item .speaker img {
  height: 100%;
  transform: translateX(-50%);
  margin-left: 50%;
  transition: all ease-in-out 0.3s;
}

#schedule .schedule-item h4 {
  font-family: "Montserrat-Bold";
  padding: 1.5em 0 0 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

#schedule .schedule-item h4 span {
  font-family: "Montserrat-SemiBold";
  font-style: italic;
  color: #19328e;
  font-weight: normal;
  font-size: 16px;
}

#schedule .schedule-item p {
  font-family: "Montserrat-Italic";
  font-style: italic;
  color: #152b79;
  margin-bottom: 0;
}


.titlesubcategoria{
  /*border: solid 1px #fff;*/
  font-family: "Montserrat-ExtraBold";
  font-style: italic;
  text-align: center;
  font-size: 1em;
  color: #fff;
  margin-top: 1em;
  border-radius: 0.3em;
  padding: 0.3em;
}

.titlesubcategoria img{
  margin: 0.2em;
  border-radius: 0.5em;
  border:solid 1px #fff;
}



.imgdektop{display: block;}
.imgmobile{display: none;}


@media (max-width: 768px) {

  .imgdektop{display: none;}
  .imgmobile{display: block; margin-bottom: 1em;}

}



.bodycontainer{background: #368dc3;}

.botoncalltoaction1{
  box-shadow: 1px 1px 4px #000;
  font-family: "Montserrat-Bold";
  background: rgb(219,107,107);
  background: linear-gradient(45deg, rgba(219,107,107,1) 0%, rgba(124,107,219,1) 100%);
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5em;
  padding: 0.4em;
}


.botoncalltoaction1-text{
  border: solid 1.5px #fff;
  font-family: "Montserrat-Bold";
  text-align: center;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  border-radius: 5em;
  padding: 0.2em;
  transition: all 0.2s ease-in;
}

.botoncalltoaction1-text:hover{
  font-size: 1.05em;
  transition: all 0.2s ease-out;
}


@media (max-width: 1100px) {
  .botoncalltoaction1-text{font-size: 0.8em;}
  .botoncalltoaction1-text:hover{font-size: 0.85em;}
}

@media (max-width: 600px) {
  .botoncalltoaction1-text{font-size: 1em;}
  .botoncalltoaction1-text:hover{font-size: 1.05em;}
}






/*--------------------------------------------------------------
# Venue Section
--------------------------------------------------------------*/
#venue {
  padding: 60px 0;
}

#venue .container-fluid {
  margin-bottom: 3px;
}

#venue .venue-map iframe {
  width: 100%;
  height: 100%;
  min-height: 900px;
}

@media (max-width: 767px) {#venue .venue-map iframe {min-height: 300px;}}


#venue .venue-info {
  background: url("../img/venue-info-bg.jpg") top center no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
}

#venue .venue-info:before {
  content: "";
  background: rgba(13, 20, 41, 0.8);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#venue .venue-info h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 574px) {
  #venue .venue-info h3 {
    font-size: 24px;
  }
}

#venue .venue-info p {
  color: #fff;
  margin-bottom: 0;
}

#venue .venue-gallery-container {
  padding-right: 12px;
}

#venue .venue-gallery {
  overflow: hidden;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

#venue .venue-gallery img {
  transition: all ease-in-out 0.4s;
}

#venue .venue-gallery:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Hotels Section
--------------------------------------------------------------*/
#hotels {
  padding: 60px 0;
}

#hotels .hotel {
  /*border: 1px solid #e0e5fa;
  background: #fff;*/
  margin-bottom: 30px;
  /*min-height: 250px;*/
}

#hotels .hotel div {padding: 0;}

#hotels .hotel div img {border-radius: 0;}


.textopropitoicaro{font-family: "Montserrat-Regular"; text-align: justify; font-size: 0.9em;}

.btn{
  background: #004976;
  text-align: center;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  border-radius: 0.5em;
  padding: 0.3em;
}


@media (max-width: 992px) {
  #hotels .hotel {margin-bottom:0; min-height: auto;}
  #hotels .hotel div {padding: 0.5em;}
  #hotels .hotel div img {border-radius: 0.3em;}
}



#hotels .hotel:hover .hotel-img img {
  transform: scale(1.1);
}

#hotels .hotel-img {
  overflow: hidden;
  margin-bottom: 15px;
}

#hotels .hotel-img img {
  transition: 0.3s ease-in-out;
}

#hotels h3 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
  padding: 0;
  font-family: "Raleway-Bold";
}


.tagopinion h6 {
  color: #c58b03;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0;
  text-transform: uppercase;
  font-family: "Raleway-ExtraBold";
}

.tagexcelencia h6 {
  color: #ec008c;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0;
  text-transform: uppercase;
  font-family: "Raleway-ExtraBold";
}

.tagvidameranista h6 {
  color: #1d829c;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0;
  text-transform: uppercase;
  font-family: "Raleway-ExtraBold";
}



#hotels a {
  color: #000000;
}

#hotels a:hover {
  color: #000000;
}

#hotels .stars {
  padding: 0 20px;
  margin-bottom: 5px;
}

#hotels .stars i {
  color: #ffc31d;
}

#hotels p {
  padding: 0;
  margin: 0;
  color: #060c22;
  font-size: 12px;
  line-height: 16px;
}

#hotels p strong{font-size: 12px;}

@media (max-width: 992px) {

  #hotels h3 {font-size: 16px; line-height: 15px;}

}

@media (max-width: 500px) {

  #hotels h3 {font-size: 13.5px; line-height: 12px;}
  #hotels p {font-size: 11px;line-height: 11px;}
  #hotels p strong{font-size: 10px;}

}


/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
#gallery {
  padding: 60px;
  overflow: hidden;
}

#gallery .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

#gallery .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #7c7fab;
}

#gallery .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #7c7fab;
}

#gallery .swiper-slide-active {
  text-align: center;
}

@media (min-width: 992px) {
  #gallery .swiper-wrapper {
    padding: 40px 0;
  }
  #gallery .swiper-slide-active {
    border: 5px solid #7c7fab;
    padding: 4px;
    background: #fff;
    z-index: 1;
    transform: scale(1.15);
    margin-top: 6px;
  }
}

/*--------------------------------------------------------------
# Sponsors Section
--------------------------------------------------------------*/
#supporters {
  padding: 60px 0;
}

#supporters .supporters-wrap {
  border-top: 1px solid #e0e5fa;
  border-left: 1px solid #e0e5fa;
  margin-bottom: 30px;
}

#supporters .supporter-logo {
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e0e5fa;
  border-bottom: 1px solid #e0e5fa;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  height: 160px;
}

#supporters .supporter-logo:hover img {
  transform: scale(1.2);
}

#supporters img {
  transition: all 0.4s ease-in-out;
}

/*--------------------------------------------------------------
# F.A.Q Section
--------------------------------------------------------------*/
.imgserviciospopup{border-radius:0.5em; border: solid 2px #ffffff;}

#faq {
  padding:0;
}

#faq .faq-list {
  padding: 0;
  list-style: none;
}

#faq .faq-list li {
  background: none;
  color: #000;
  border-radius: 0.5em;
  padding: 0.5em;
  border-radius: 0.2em;
  -ms-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

#faq .faq-list li:hover {
  background: #ffffff;
  -ms-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#faq .faq-list li a {
  color: #000000;
}


#faq .faq-list .question {
  display: block;
  position: relative;
  font-family: "Montserrat-Bold";
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding: 0 0 1em 0;
  cursor: pointer;
  color: #e2687e;
  text-align: center;
  transition: 0.3s;
}

#faq .faq-list i {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: -2px;
}

#faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 25px;
}

#faq .faq-list .icon-show {
  display: none;
}

#faq .faq-list .collapsed {
  color: #0e1b4d;
  padding: 1em 0 1em 0;
  text-align: center;
}

#faq .faq-list .collapsed:hover {
  color: #e2687e;;
}

#faq .faq-list .collapsed .icon-show {
  display: inline-block;
  transition: 0.6s;
}

#faq .faq-list .collapsed .icon-close {
  display: none;
  transition: 0.6s;
}

/*--------------------------------------------------------------
# Subscribe Section
--------------------------------------------------------------*/










#subscribe {
  padding: 10%;
  background: url(../img/subscribe-bg.jpg) center center no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

#subscribe:before {
  content: "";
  background: rgba(6, 12, 34, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

@media (min-width: 1024px) {
  #subscribe {
    background-attachment: fixed;
  }
}

#subscribe .section-header h2, #subscribe p {
  color: #fff;
}

#subscribe input {
  background: #fff;
  color: #060c22;
  border: 0;
  outline: none;
  margin: 0;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 14px;
}

@media (min-width: 767px) {
  #subscribe input {
    min-width: 400px;
  }
}

#subscribe button {
  border: 0;
  padding: 9px 25px;
  cursor: pointer;
  background: #f82249;
  color: #fff;
  transition: all 0.3s ease;
  outline: none;
  font-size: 14px;
  border-radius: 50px;
}

#subscribe button:hover {
  background: #e0072f;
}

@media (max-width: 460px) {
  #subscribe button {
    margin-top: 10px;
  }
}

/*--------------------------------------------------------------
# Buy Tickets Section
--------------------------------------------------------------*/
#buy-tickets {
  padding: 60px 0;
}

#buy-tickets .card {
  border: none;
  border-radius: 2em;
  padding: 1em;
  transition: all  0.3s ease-in-out;
  box-shadow: 0 10px 25px 0 rgba(6, 12, 34, 0.1);
}

#buy-tickets .card:hover {
  box-shadow: 0 10px 35px 0 rgba(6, 12, 34, 0.2);
}

#buy-tickets .card hr {
  margin: 25px 0;
}

#buy-tickets .card .card-title {
  margin: 10px 0;
  font-size: 20px;
  letter-spacing: 1px;
}

.card-title {font-family: "Montserrat-Medium";}

#buy-tickets .card .card-price {
  font-size: 48px;
  margin: 0;
}

#buy-tickets .card ul li {
  margin-bottom: 20px;
}

#buy-tickets .card .text-muted {
  opacity: 0.7;
}

#buy-tickets .card .btn {
  font-size: 15px;
  border-radius: 50px;
  padding: 10px 40px;
  transition: all 0.2s;
  background-color: #f82249;
  border: 0;
  color: #fff;
}

#buy-tickets .card .btn:hover {
  background-color: #e0072f;
}


#buy-tickets .card img {
  border-radius: 50%;
}




#buy-tickets #buy-ticket-modal input, #buy-tickets #buy-ticket-modal select {
  border-radius: 0;
}

#buy-tickets #buy-ticket-modal .btn {
  font-size: 15px;
  border-radius: 50px;
  padding: 10px 40px;
  transition: all 0.2s;
  background-color: #f82249;
  border: 0;
  color: #fff;
}

#buy-tickets #buy-ticket-modal .btn:hover {
  background-color: #e0072f;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

.imgcontacto{padding: 0 35% 0 35%;}



#contact {
  padding: 60px 0;
}

#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 10px;
  color: #f82249;
}

#contact .contact-info address, #contact .contact-info p {
  margin-bottom: 0;
  color: #112363;
}

#contact .contact-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #112363;
}

#contact .contact-info a {
  color: #4869df;
}

#contact .contact-info a:hover {
  color: #f82249;
}

#contact .contact-address, #contact .contact-phone, #contact .contact-email {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  #contact .contact-address, #contact .contact-phone, #contact .contact-email {
    padding: 20px 0;
  }
}



#contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

#contact .php-email-form .error-message br + br {
  margin-top: 25px;
}

#contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

#contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

#contact .php-email-form input, #contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

#contact .php-email-form input:focus, #contact .php-email-form textarea:focus {
  border-color: #f82249;
}

#contact .php-email-form input {
  padding: 10px 15px;
}

#contact .php-email-form textarea {
  padding: 12px 15px;
}

#contact .php-email-form button[type="submit"] {
  background: #f82249;
  border: 0;
  padding: 10px 40px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
  cursor: pointer;
}

#contact .php-email-form button[type="submit"]:hover {
  background: #e0072f;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #e0e0e0;
  padding: 0 0 25px 0;
  color: #7c7c7c;
  font-size: 14px;
}

#footer .footer-top {
  background: #e0e0e0;
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 26px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-family: "Montserrat-Bold";
  font-weight: 700;
  color: #7c7c7c;
}

#footer .footer-top .footer-info img {
  width: 60%;
  margin-bottom: 10px;
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Montserrat-Regular";
  color: #5c5c5c;
}

#footer .footer-top .social-links a {
  display: inline-block;
  background: #e0e0e0;
  color: #5c5c5c;
  line-height: 1;
  margin-right: 4px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#footer .footer-top .social-links a i {
  line-height: 0;
  font-size: 16px;
}

#footer .footer-top .social-links a:hover {
  background: #ffffff;
  color: #5c5c5c;
}

#footer .footer-top h4 {
  font-size: 14px;
  font-weight: bold;
  color: #e0282a;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
  border-bottom: 2px solid #ffffff;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 5px;
  color: #7c7c7c;
  font-size: 18px;
}

#footer .footer-top .footer-links ul li {
  border-bottom: 1px solid #262c44;
  padding: 10px 0;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #5c5c5c;
}

#footer .footer-top .footer-links ul a:hover {
  color: #e0282a;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact p {
  line-height: 26px;
}

#footer .footer-top .footer-newsletter {
  margin-bottom: 30px;
}

#footer .footer-top .footer-newsletter input[type="email"] {
  border: 0;
  padding: 6px 8px;
  width: 65%;
}

#footer .footer-top .footer-newsletter input[type="submit"] {
  background: #f82249;
  border: 0;
  width: 35%;
  padding: 6px 0;
  text-align: center;
  color: #e0282a;
  transition: 0.3s;
  cursor: pointer;
}

#footer .footer-top .footer-newsletter input[type="submit"]:hover {
  background: #e0072f;
}

#footer .copyright {
  text-align: center;
  padding-top: 30px;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  color: #e0282a;
}



.botonitemmainentrada {background: #172842; border: none; font-size: 1.4em; border-radius: 0.3em; font-family: "Montserrat-ExtraBold"; text-align: center; padding: 0.4em; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.botonitemmainentrada:hover {background: #263796; border: solid 2px #ffffff; font-size: 1.5em; padding: 0.3em; border-radius: 0.3em; color: #ffffff;  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}

.botonitemmainexploraneta {background: #df6122; border: none; font-size: 1.4em; border-radius: 0.3em; font-family: "Montserrat-ExtraBold"; text-align: center; padding: 0.4em; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.botonitemmainexploraneta:hover {background: #f08652; border: solid 2px #ffffff; font-size: 1.5em; padding: 0.3em; border-radius: 0.3em; color: #ffffff;  -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}


.botonitemnoticia  {background: #172842; font-size: 1.2em; border-radius: 0.3em; font-weight: bold; text-align: center; padding: 0.3em; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.botonitemnoticia:hover {background: #066CB3; font-size: 1.3em; border-radius: 0.3em; color: #ffe96b; -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}


.botonentradamain {background:#093579; border: none; font-size: 1.2em; border-radius: 0.3em; font-family: "Montserrat-Bold"; text-align: center; margin-bottom: 0; padding: 0.4em; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.botonentradamain:hover {background:#0d4cac; font-size: 1.4em;  margin: -0.1em 0 -0.1em 0; padding: 0.3em; color: #ffffff; -ms-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}



.btnmatriculasvolver {background: #261997; border: solid 1px #261997; border-radius: 0.3em; font-size: 1.3em; font-family: "Montserrat-Bold"; margin:0; padding: 0.3em; color: #ffe96b; text-align: center; -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.btnmatriculasvolver:hover {background: #ffe96b; border-radius: 0.3em; font-size: 1.4em; margin:-0.2em; padding: 0.4em; color: #261997; -ms-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}

.paddingbtnnavigation{padding: 1em;}

@media (max-width: 700px) {

    .btnmatriculasvolver { border: solid 1px #261997; border-radius: 0.3em; font-size: 0.8em; margin:0; padding: 0.2em;}
    .btnmatriculasvolver:hover {border-radius: 0.3em; font-size: 0.8em; margin:0; padding: 0.2em;}

    .paddingbtnnavigation{padding: 0.5em;}

}

/*------------------- INICIAN ESTILOS PARA REDES SOCIALES ------------------*/



.aula, .facebook, .instagram, .spotify, .youtube, .icarito {
  display: block;
  border-radius: 3em 0 0 3em;
  font-size: 0.8em;
  padding: 0;
  position: fixed;
  right: -150px;
  text-align: left;
  width: 200px;
  -ms-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  z-index: 2000;
}

.aula:hover, .facebook:hover, .instagram:hover, .spotify:hover, .youtube:hover, .icarito:hover {
  right: 0;
  -ms-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}



.facebook{background: none; top: 185px;}
.facebook:hover{background: #006bb2;}
.facebook a{color: #ffffff;text-decoration: none; font-family: "Montserrat-Regular"; font-size: 0.9em;}
.facebook img {background: #006bb2; margin: 0 1em 0 0; width: 45px; border-radius: 50%; padding: 0.5em 0.5em 0 0.5em;}

.instagram{background: none; top: 235px;}
.instagram:hover{background: #006bb2;}
.instagram a{color: #ffffff;text-decoration: none; font-family: "Montserrat-Regular"; font-size: 0.9em;}
.instagram img {background: #006bb2; margin: 0 1em 0 0; width: 45px; border-radius: 50%; padding: 0.5em;}

.youtube{background: none; top: 285px;}
.youtube:hover{background: #006bb2;}
.youtube a{color: #ffffff; text-decoration: none; font-family: "Montserrat-Regular"; font-size: 0.9em;}
.youtube img {background: #006bb2; margin: 0 1em 0 0; width: 45px; border-radius: 50%; padding: 0.5em;}

.spotify{background: none; top: 335px;}
.spotify:hover{background: #006bb2;}
.spotify a{color: #ffffff;text-decoration: none; font-family: "Montserrat-Regular"; font-size: 0.9em;}
.spotify img {background: #006bb2; margin: 0 1em 0 0; width: 45px; border-radius: 50%; padding: 0.5em;}

.icarito{background: none; top: 385px;}
.icarito:hover{background: #006bb2;}
.icarito a{color: #ffffff;text-decoration: none; font-family: "Montserrat-Regular"; font-size: 0.9em;}
.icarito img {background: #006bb2; margin: 0 1em 0 0; width: 45px; border-radius: 50%; padding: 0.5em;}


.mobilesocial{display: none;}
.columna8redesociales{ display: none; width: 20%;}

.columnano25{ width: 25%;}
.columnano50{ width: 50%;}


@media (max-width: 700px) {

.aula, .facebook, .instagram, .spotify, .youtube, .icarito {display: none;}

  .mobilesocial{display: block; position: fixed; left: 1px; bottom: 0; padding: 0 15% 0 15%; z-index: 2000; width: 100%;}

  .mobilesocial a img{padding: 0.5em; border-radius: 50%; }

  .columna8redesociales{ display: block; padding: 0.1em; width: 20%;}

}




/*------------------- TERMINAN ESTILOS REDES SOCIALES ----------------------*/





/*------------------- INICIAN ESTILOS BOTONES REDES SOCIALES ---------------*/
.middlesocial{
  width: 100%;
  text-align: center;
}
.socialbutton{
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 10px;
  border-radius: 50%;
  box-shadow: 0 5px 15px -5px #00000070;
  overflow: hidden;
  position: relative;
}

.socialbutton img{
  padding: 0.2em;
  transition: 0.2s linear;
}

.socialbutton:hover img{
  transform: scale(1.3);
  color: #f1f1f1;
}

.socialbutton i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}
.socialbutton:hover i{
  transform: scale(1.3);
  color: #f1f1f1;
}
.socialbutton::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #3498db;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.socialbutton:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}



.socialfacebook, .socialinstagram, .socialyoutube, .socialspotify {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 3px;
  border-radius: 50%;
  box-shadow: 0 5px 15px -5px #00000070;
  overflow: hidden;
  position: relative;
  /*border: #ffffff solid 2px; color: #fff;*/
}

.socialfacebook{background:#e2687e;}
.socialinstagram{background:#e2687e;}
.socialyoutube{background:#e2687e;}
.socialspotify{background:#e2687e;}

.socialfacebook img { padding: 0.4em 0.4em 0 0.4em; width: 100%; transition: 0.2s linear;}

.socialinstagram img, .socialyoutube img, .socialspotify img { padding: 0.4em; width: 100%; transition: 0.2s linear;}
.socialfacebook img:hover, .socialinstagram img:hover, .socialyoutube img:hover, .socialspotify img:hover{ transform: scale(1.1); color: #f1f1f1;}


.socialfacebook::before, .socialtwitter::before, .socialyoutube::before, .socialinstagram::before, .socialiamonline::before, .socialspotify::before {content: ""; position: absolute; width: 120%; height: 120%; transform: rotate(45deg); left: -110%; top: 90%;}


.socialfacebook::before{background: #006bb2;}
.socialyoutube::before{background: #006bb2;}
.socialinstagram::before{background: #006bb2;}
.socialspotify::before{background: #006bb2;}


.socialfacebook:hover::before, .socialyoutube:hover::before, .socialinstagram:hover::before, .socialspotify:hover::before {
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}



@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}


@media (max-width: 500px) {.videoembed1{height: 300px; padding: 2em;}}






/*------------------- TERMINAN ESTILOS BOTONES REDES SOCIALES --------------*/


.flexbox {
  display/*\**/
  : inline-block\9;
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flexbox>div {
  box-flex: 1;
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  -moz-box-flex: 1;
}

@media (max-width: 768px) {
  .flexbox {
      display: inline-block;
      margin: 0px;
      width: 100%;
  }
}



.flexboxno {
  display/*\**/
  : inline-block\9;
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flexboxno>div {
  box-flex: 1;
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  -moz-box-flex: 1;
}


.hileradedos{width: 50%;}
.hileradetres{width: 33%;}
.hileradecuatro{width: 25%;}
.hileradecinco{width: 20%;}
.hileradeocho{width: 12%;}


.columna5{width: 5%;}
.columna10{width: 10%;}
.columna15{width: 15%;}
.columna20{width: 20%;}
.columna25{width: 25%;}
.columna30{width: 30%;}
.columna33{width: 33%;}
.columna35{width: 35%;}
.columna40{width: 40%;}
.columna45{width: 45%;}
.columna50{width: 50%;}
.columna55{width: 55%;}
.columna60{width: 60%;}
.columna65{width: 65%;}
.columna70{width: 70%;}
.columna75{width: 75%;}
.columna80{width: 80%;}
.columna85{width: 85%;}
.columna90{width: 90%;}
.columna95{width: 95%;}
.columna100{width: 100%;}

.columnaflexno60{width:60%;}
.columnaflexno50{width:50%;}
.columnaflexno40{width:40%;}
.columnaflexno30{width:30%;}
.columnaflexno25{width:25%;}
.columnaflexno20{width:20%;}


@media (max-width: 800px) {
	.columna5,.columna10, .columna15, .columna20, .columna25, .columna30, .columna33, .columna35, .columna40, .columna45, .columna50, .columna55, .columna60, .columna65, .columna70, .columna75, .columna80, .columna85, .columna90 .columna95 {width: 100%;}	
}


/*============== Columnas para flexboxmobile que funciona a la inversa ==============*/

.flexboxmobile {
  display: inline-block;
  margin: 0px;
  width: 100%;
}

.paddingads{padding: 0.5em 0 0.5em 0;}

@media (max-width: 800px) {

      .flexboxmobile {
        display/*\**/
        : inline-block\9;
        display: inline-block;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      
      .flexboxmobile>div {
        box-flex: 1;
        -webkit-box-flex: 1;
        -o-box-flex: 1;
        -moz-box-flex: 1;
      }

      .paddingads{padding: 0.5em;}


}

.columna5mobile,.columna10mobile, .columna15mobile, .columna20mobile, .columna25mobile, .columna30mobile, .columna33mobile, .columna35mobile, .columna40mobile, .columna45mobile, .columna50mobile, .columna55mobile, .columna60mobile, .columna65mobile, .columna70mobile, .columna75mobile, .columna80mobile, .columna85mobile, .columna90mobile .columna95mobile {width: 100%;}


.columnanologoicaroproposito{width: 40%; display: block;}
.columnalogoicaroproposito{width: 20%;}

.textopropositoicaro{font-size: 1.3em; line-height: 1.8em; text-align: left;}

@media (max-width: 800px) {

  .columna5mobile{width: 5%;}
  .columna10mobile{width: 10%;}
  .columna15mobile{width: 15%;}
  .columna20mobile{width: 20%;}
  .columna25mobile{width: 25%;}
  .columna30mobile{width: 30%;}
  .columna33mobile{width: 33%;}
  .columna35mobile{width: 35%;}
  .columna40mobile{width: 40%;}
  .columna45mobile{width: 45%;}
  .columna50mobile{width: 50%;}
  .columna55mobile{width: 55%;}
  .columna60mobile{width: 60%;}
  .columna65mobile{width: 65%;}
  .columna70mobile{width: 70%;}
  .columna75mobile{width: 75%;}
  .columna80mobile{width: 80%;}
  .columna85mobile{width: 85%;}
  .columna90mobile{width: 90%;}
  .columna95mobile{width: 95%;}
  .columna100mobile{width: 100%;}

  .columnanologoicaroproposito{width: 30%;}
  .columnalogoicaroproposito{width: 40%;}

  .textopropositoicaro{font-size: 1em; line-height: 1.1em; text-align: center;}
	
}

/*============== Columnas para flexboxmobile que funciona a la inversa ==============*/



.iframevideos01{width: 50%; height:315px;}
.iframevideos02{width: 100%; height:200px;}

@media (max-width: 1200px) { .iframevideos01{height:250px;} .iframevideos02{height:150px;}}
@media (max-width: 992px) { .iframevideos01{width: 70%; height:250px;}}
@media (max-width: 768px) {.iframevideos02{height:300px;}}
@media (max-width: 600px) { .iframevideos01{width: 80%; height:200px;} .iframevideos02{height:200px;}}





.headerdiscursodiadelprofesor2022{background-image: url(../../vida-meranista/discurso-del-dia-del-profesor/discurso-del-dia-del-profesor-2.jpg); background-size: cover; background-position: center right; padding: 0; margin: 0; text-align: right;}
.headerdiscurso-after {background: rgb(3,1,34);background: linear-gradient(0deg, rgba(3,1,34,1) 0%, rgba(3,1,34,0) 63%);}


.imagenasertiva001{width: 100%; padding: 0;}

@media (max-width: 800px) {
  .imagenasertiva001{width: 100%; padding: 0;}
}


/*=============================== ICARITO ===============================*/

.headericarito {display: flex;}
.headericaritotitle { color: #22209b; font-family: "Lato-Black"; font-size: 2em; padding: 0 5px;}

.portadaicarito{
  background-image: url(../../icarito/img/base_fondo_2.png); 
  background-size: 170%; 
  background-position: top left; 
  padding: 0; 
  margin: 0; 
  text-align: right;
  width: 100%;
  height: 100vh;
}


.imgicaritomobile{display: none;}




.maintitlesicarito h1{
  font-family: "Montserrat-ExtraBold";
  color: #ffffff;
  font-size: 6em;
}


.maintitlesicarito h4{
  color: #ffffff;
  font-size: 1.4em;
  font-family: "Montserrat-Bold";
}

.waveborder{width: 100%; margin: -25em 0 10em 0; position: absolute; z-index: 10; display: block;}





.icaritoaudiocuentostitle h2,.icaritocuentostitle h2, .icaritolaboratoriotitle h2, .icaritonarigontitle h2{font-size: 3em; font-family: "Raleway-Black"; padding: 0.5em 0 0.5em 0; text-align: center;}

.icaritoaudiocuentostitle h2{color: #772eb3;}
.icaritocuentostitle h2{color: #568eb3;}
.icaritolaboratoriotitle h2{color: #568eb3;}
.icaritonarigontitle h2{color: #568eb3;}



.icaritocuentossubtitle { color: #6ec1e4; font-size: 1.7em; font-family: "Raleway-Black"; line-height: 1em; letter-spacing: -1px; padding: 0.5em 0 0.5em 0; text-align: center;}
.icaritocuentosautor { color: #575757; font-size: 1em; font-family: "Raleway-Light"; letter-spacing: -0.5px; padding: 0; text-align: center;}

@media (max-width: 1700px) {
  
  .waveborder{margin: -22em 0 0 0;}
}

@media (max-width: 1600px) {
  
  .portadaicarito{height: 120vh;}
  .waveborder{margin: -20em 0 0 0;}
  .nubesfndnasa{margin: -14em 0 0 0;}

}




@media (max-width: 1300px) {

  .maintitlesicarito h1{font-size: 4em;}
  .maintitlesicarito h4{font-size: 1.2em;}

  .waveborder{margin: -15em 0 0 0;}
}








@media (max-width: 600px) {.imgicaritomobile img{ width: 80%;}}
@media (max-width: 500px) {.imgicaritomobile img{ width: 100%;} .portadaicarito{height: 75vh;}}


/*=============================== ICARITO ===============================*/


.playlistvideo{width: 100%; min-height: 480px;}

@media (max-width: 768px) {
    .playlistvideo{width: 100%; min-height: 600px;}
}










































































.mouse_move {
  text-align: center;
}
.mouse_move h2 {
  position: relative;
  font-size: 100px;
  color: white;
}

.mouse_move img {
  position: absolute;
}


#estrella1 {top: 180px; left: 320px; height: 100px; width: 100px; display: block;}
#estrella2 {top: 380px; left: 2350px; height: 100px; width: 100px; display: block;}
#estrella3 {top: 250px; left: 350px; height: 100px; width: 100px; display: block;}

#iamicono {top: 200px; left: 1250px; height: 120px; width: 120px; display: block;}
#ninaicarito {top: 170px; left: 1600px; height: 500px; width: 500px; display: block;}
#icaritoon {top: 500px; left: 1300px; height: 200px; width: 200px; display: block;}

.fndnasa{width: 100%; height:80vh;}

#estrellanasa1 {top: 140px; left: 5px; height: 100px; width: 100px; display: block;}
#estrellanasa2 {top: 80px; left: 1300px; height: 100px; width: 100px; display: block;}
#estrellanasa3 {top: 30px; left: 15px; height: 100px; width: 100px; display: block;}
#cohetenasa{top: 650px; left: 150px; height: 550px; width: 550px; display: block;}
#nasaspace{top: 200px; left: 500px; height: 350px; width: 350px; display: block;}


#cursoricarito {top: 180px; left: 250px; height: 150px; width: 150px; position: absolute; z-index: 1000;}

.nubesfndnasa{margin: -25em 0 0 0; display: block;}

.maintitlesicarito{padding: 15% 24% 0 24%; text-align: left; position: absolute; width: 100%; z-index: 10;}

.waveborder{margin: -30em 0 0 0;}


.paddingheadericonaudiocuentos{padding: 10% 0 0 ; width: 100%;}



@media (max-width: 1920px) {



  #estrella1 {top: 180px; left: 150px; height: 100px; width: 100px; display: block;}
  #estrella2 {top: 380px; left: 1780px; height: 100px; width: 100px; display: block;}
  #estrella3 {top: 250px; left: 240px; height: 100px; width: 100px; display: block;}

  #iamicono {top: 200px; left: 750px; height: 120px; width: 120px; display: block;}
  #ninaicarito {top: 170px; left: 1050px; height: 500px; width: 500px; display: block;}
  #icaritoon {top: 500px; left: 1300px; height: 200px; width: 200px; display: block;}

  #estrellanasa1 {top: 140px; left: 5px; height: 100px; width: 100px; display: block;}
  #estrellanasa2 {top: 80px; left: 1300px; height: 100px; width: 100px; display: block;}
  #estrellanasa3 {top: 30px; left: 15px; height: 100px; width: 100px; display: block;}
  #cohetenasa{top: 650px; left: 150px; height: 550px; width: 550px; display: block;}
  #nasaspace{top: 200px; left: 500px; height: 350px; width: 350px; display: block;}


  #cursoricarito {top: 180px; left: 250px; height: 150px; width: 150px; position: absolute; z-index: 1000;}

  .nubesfndnasa{margin: -25em 0 0 0; display: block;}

  .maintitlesicarito{padding: 20% 22% 0 22%; text-align: left; position: absolute; width: 100%; z-index: 10;}

  .waveborder{margin: -25em 0 0 0;}

  .paddingheadericonaudiocuentos{padding: 0; width: 100%;}


}





@media (max-width: 1600px) {


    #estrella1 {top: 180px; left: 150px; height: 100px; width: 100px; display: block;}
    #estrella2 {top: 280px; left: 1480px; height: 100px; width: 100px; display: block;}
    #estrella3 {top: 250px; left: 180px; height: 100px; width: 100px; display: block;}

    #iamicono {top: 200px; left: 400px; height: 150px; width: 150px; display: block;}
    #ninaicarito {top: 200px; left: 750px; height: 550px; width: 550px; display: block;}
    #icaritoon {top: 500px; left: 1300px; height: 200px; width: 200px; display: block;}

    .fndnasa{width: 100%; height:80vh;}

    #estrellanasa1 {top: 180px; left: 40px; height: 100px; width: 100px; display: block;}
    #estrellanasa2 {top: 80px; left: 500px; height: 100px; width: 100px; display: block;}
    #estrellanasa3 {top: 50px; left: 20px; height: 100px; width: 100px; display: block;}
    #cohetenasa{top: 450px; left: 100px; height: 600px; width: 600px; display: block;}
    #nasaspace{top: 200px; left: 500px; height: 400px; width: 400px; display: block;}


    #cursoricarito {top: 180px; left: 250px; height: 150px; width: 150px; position: absolute; z-index: 1000;}

    .nubesfndnasa{margin: -20em 0 0 0; display: block;}

    .maintitlesicarito{padding: 25% 20% 0 20%; text-align: left; position: absolute; width: 100%; z-index: 10;}

    .waveborder{margin: -18em 0 0 0;}


}



@media (max-width: 1400px) {

  .mouse_move h2 {font-size: 70px;}

  .portadaicarito{height: 100vh;}

  #estrella1 {top: 180px; left: 100px; height: 90px; width: 90px;}
  #estrella2 {top: 240px; left: 1250px; height: 90px; width: 90px;}
  #estrella3 {top: 250px; left: 120px; height: 90px; width: 90px;}
  
  #iamicono {top: 180px; left: 400px; height: 100px; width: 100px;}
  #ninaicarito {top: 100px; left: 700px; height: 450px; width: 450px;}
  #icaritoon {top: 400px; left: 1200px; height: 150px; width: 150px; }

  .fndnasa{height:60vh;}
  
  #estrellanasa1 {top: 180px; left: 40px; height: 70px; width: 70px;}
  #estrellanasa2 {top: 80px; left: 400px; height: 70px; width: 70px;}
  #estrellanasa3 {top: 50px; left: 20px; height: 70px; width: 70px;}
  #cohetenasa{top: 450px; left: 100px; height: 500px; width: 500px;}
  #nasaspace{top: 180px; left: 480px; height: 300px; width: 300px;}
  #planetanasa1 {top: 10px; right: 0; height: 200px; width: 200px;}
  #planetanasa2 {top: 300px; right: 0; height: 100px; width: 100px;}

  #cursoricarito {top: 180px; left: 150px; height: 150px; width: 150px;}


  .waveborder{margin: -18em 0 0 0;}

}


@media (max-width: 1200px) {

  .maintitlesicarito{padding: 25% 10% 0 10%;}

  .portadaicarito{height: 90vh; background-size: 250%; background-position: top center;}

  .mouse_move h2 {font-size: 50px;}

  #estrella1 {top: 180px; left: 100px; height: 50px; width: 50px;}
  #estrella2 {top: 200px; left: 1000px; height: 50px; width: 50px;}
  #estrella3 {top: 200px; left: 120px; height: 50px; width: 50px;}
  
  #iamicono {top: 140px; left: 300px; height: 70px; width: 70px;}
  #ninaicarito {top: 100px; left: 550px; height: 350px; width: 350px;}
  #icaritoon {top: 400px; left: 1000px; height: 120px; width: 120px; }
  
  #estrellanasa1 {top: 120px; left: 40px; height: 50px; width: 50px;}
  #estrellanasa2 {top: 50px; left: 300px; height: 50px; width: 50px;}
  #estrellanasa3 {top: 30px; left: 20px; height: 50px; width: 50px;}
  #cohetenasa{top: 500px; left: 80px; height: 350px; width: 350px;}
  #nasaspace{top: 140px; left: 330px; height: 250px; width: 250px;}
  #planetanasa1 {top: 10px; right: 0; height: 150px; width: 150px;}
  #planetanasa2 {top: 200px; right: 0; height: 80px; width: 80px;}

  #cursoricarito {top: 180px; left: 150px; height: 150px; width: 150px;}
  .waveborder{margin: -12em 0 0 0;}

  .icaritoaudiocuentostitle h2,.icaritocuentostitle h2, .icaritolaboratoriotitle h2, .icaritonarigontitle h2{font-size: 2.5em;}

}


@media (max-width: 992px) {

  .maintitlesicarito{padding: 25% 5% 0 5%;}

  .portadaicarito{height: 80vh;}

  .mouse_move h2 {font-size: 40px;}

  #estrella1 {top: 400px; left: 100px; height: 40px; width: 40px;}
  #estrella2 {top: 150px; left: 600px; height: 40px; width: 40px;}
  #estrella3 {top: 450px; left: 90px; height: 40px; width: 40px;}
  
  #iamicono {top: 120px; left: 150px; height: 70px; width: 70px;}
  #ninaicarito {top: 200px; left: 450px; height: 300px; width: 300px;}
  #icaritoon {top: 550px; left: 600px; height: 100px; width: 100px; }
  
  #estrellanasa1 {top: 120px; left: 40px; height: 40px; width: 40px;}
  #estrellanasa2 {top: 50px; left: 300px; height: 40px; width: 40px;}
  #estrellanasa3 {top: 30px; left: 20px; height: 40px; width: 40px;}
  #cohetenasa{top: 500px; left: 0; height: 300px; width: 300px;}
  #nasaspace{top: 120px; left: 200px; height: 200px; width: 200px;}
  #planetanasa1 {top: 10px; right: 0; height: 100px; width: 100px;}
  #planetanasa2 {top: 200px; right: 0; height: 60px; width: 60px;}

  #cursoricarito {top: 100px; left: 100px; height: 100px; width: 100px;}

  .waveborder{margin: -10em 0 0 0;}

  .nubesfndnasa{margin: -10em 0 0 0;}

}

@media (max-width: 768px) {

  .maintitlesicarito{padding: 15% 3% 0 3%; text-align: center;}
  .portadaicarito{height: 90vh; background-size: cover; }
  .mouse_move img {position:relative;}


  .imgicaritomobile{display: block; width: 100%; text-align: center;}
  .imgicaritomobile img{ width: 60%;}

  .icaritoaudiocuentostitle h2,.icaritocuentostitle h2, .icaritolaboratoriotitle h2, .icaritonarigontitle h2{font-size: 1.8em;}

  .icaritocuentossubtitle { font-size: 1.4em;}
  .icaritocuentosautor { font-size: 0.9em; padding: 1em 0 1em 0;}
  
  .fndnasa{height:auto;}

  #estrella1, #estrella2, #estrella3, #iamicono, #ninaicarito, #icaritoon, #estrellanasa1, #estrellanasa2, #estrellanasa3, #cohetenasa, #nasaspace, #planetanasa1, #planetanasa2, #cursoricarito {display: none;}
  .waveborder, .nubesfndnasa{display: none;}
}


/*---------------- Botones compartir -------------------*/

.sharefacebook, .sharewhatsapp, .sharetwitter, .sharelinkedin {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 3px;
  border-radius: 50%;
  box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  text-align: center;
  border: #ffffff solid 2px; color: #fff;
}

.sharefacebook{background:#394ec4;}
.sharewhatsapp{background:#17a848;}
.sharetwitter{background:#00acee;}
.sharelinkedin {background:#0e76a8;}

.sharefacebook img, .sharewhatsapp img, .sharetwitter img, .sharelinkedin img { padding: 0.5em; width: 100%; text-align: center; -ms-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}

.sharefacebook img:hover, .sharewhatsapp img:hover, .sharetwitter img:hover, .sharelinkedin img:hover { width: 102%; -ms-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}


.sharefacebook::before, .sharewhatsapp::before, .sharetwitter::before, .sharelinkedin::before {content: ""; position: absolute; width: 120%; height: 120%; transform: rotate(45deg); left: -110%; top: 90%;}


.sharefacebook::before{background: rgba(25, 24, 97,0.7); mix-blend-mode:color-burn;}
.sharewhatsapp::before{background: rgba(7, 134, 3,0.7); mix-blend-mode:color-burn;}
.sharetwitter::before{background: rgba(0, 95, 158, 0.7); mix-blend-mode:color-burn;}
.sharelinkedin::before{background: rgba(0, 95, 158, 0.7); mix-blend-mode:color-burn;}


.sharefacebook:hover::before, .sharewhatsapp:hover::before, .sharetwitter:hover::before, .sharelinkedin:hover::before  {animation: aaa 0.7s 1;top: -10%;left: -10%;}

@media (max-width: 550px) {
  .sharefacebook, .sharewhatsapp, .sharetwitter, .sharelinkedin {width: 35px; height: 35px;}
  .sharefacebook img, .sharewhatsapp img, .sharetwitter img, .sharelinkedin img { padding: 0.3em;}
}

/*---------------- Botones compartir -------------------*/