@import "https://fonts.googleapis.com/css?family=Open+Sans";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
/* ==========================================================================
   #ESTILOS GLOBALES 
   ========================================================================== */
html { 
  height: 100%;
}
body {
  background: rgb(10,4,27);
  background: radial-gradient(circle, rgba(10,4,27,1) 0%, rgba(23,13,56,1) 22%, rgba(4,0,14,1) 92%);    
  /*background-image: url("../images/BG_Web.png");
  background-repeat: no-repeat;*/
  background-attachment: fixed;
  overflow-x: hidden;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  list-style-type: none;

}
a {
  text-decoration: none;
}


/* ==========================================================================
   #MENU DESPLEGABLE
   ========================================================================== */
.main-menu {
  float: left;
  position: fixed;
  min-height: 100%;
  width: 570px;
  z-index: 500 !important;
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);

  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;

  -webkit-transform: translate(-336px, 0);
  -moz-transform: translate(-336px, 0);
  transform: translate(-336px, 0);
}
.main-menu.open {
  -webkit-transform: translate(0, 0) skew(0);
  -moz-transform: translate(0, 0) skew(0);
  transform: translate(0, 0) skew(0);
  z-index: 510 !important;
}
.main-menu.open .main-menu-form {
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  transform: skewX(-25deg);
  z-index: 501 !important;
}
.main-menu.open .main-menu-form:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #2980B9;
  box-shadow: 0px 0px 6px 1px rgba(93, 173, 226, 0.7);
}
.main-menu-form {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 100%;
  background: rgb(90,55,149);
  background: linear-gradient(315deg, rgba(90,55,149,1) 14%, rgba(2,0,36,1) 81%);
  z-index: 500;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);

  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;

  -webkit-transform: skewX(-38deg);
  -moz-transform: skewX(-38deg);
  transform: skewX(-38deg);
}

.main-menu.open .main-menu-btn {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0s, visibility 0s;
    -moz-transition: opacity 0s, visibility 0s;
    transition: opacity 0s, visibility 0s;
}


.main-menu-content {
  position: relative;
  padding: 35px 55px 35px 25px;
  font: normal 16px/1.25 'Open Sans';
}
.main-menu.open .main-menu-content {
  z-index: 1002;
}
.main-menu-logo img{
  font-size: 28px;
  opacity: 0;
}
.main-menu.open .main-menu-logo img {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in .3s;
  -moz-transition: opacity .5s ease-in .3s;
  transition: opacity .5s ease-in .3s;
}
.main-menu-nav {
  margin-top: 35px;
}

.main-menu.open .main-menu-nav a {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  -moz-transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  transition: color .2s ease-in-out 0s, opacity .3s ease, transform .3s ease;
  opacity: 1;
}
.main-menu-nav a {
  opacity: 0;
  display: inline-block;
  padding: 10px 15px;
  font-size: 20px;
  color: #fff;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  transform: translate(0, 100%);
}
.main-menu-nav i {
  color: #fff;
  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}
.main-menu.open .main-menu-nav a:hover {
  color: #3498DB;
  -webkit-transition-delay: 0s !important;
  -moz-transition-delay: 0s !important;
  transition-delay: 0s !important;
}
.main-menu.open .main-menu-nav a.orange {
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  transition-delay: .4s;
}
.main-menu.open .main-menu-nav a.yellow {
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  transition-delay: .5s;
}
.main-menu.open .main-menu-nav a.green {
  -webkit-transition-delay: .6s;
  -moz-transition-delay: .6s;
  transition-delay: .6s;
}
.main-menu.open .main-menu-nav a.purple {
  -webkit-transition-delay: .7s;
  -moz-transition-delay: .7s;
  transition-delay: .7s;
}
.main-menu.open .main-menu-nav a.red {
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
  transition-delay: .8s;
}
.main-menu-nav a.orange:hover i {
  color: #D35400;
}
.main-menu-nav a.yellow:hover i {
  color: #F5AB35;
}
.main-menu-nav a.green:hover i {
  color: #00B16A;
}
.main-menu-nav a.purple:hover i {
  color: #9A12B3;
}
.main-menu-nav a.red:hover i {
  color: #F64747;
}

/*toggle button*/
.main-menu-btn {
  position: absolute;
  z-index: 1000 !important;
  width: 40px;
  height: 40px;
  top: 38px;
      right: 35px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #fff;
  -webkit-transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  -moz-transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition: opacity .4s cubic-bezier(0.95, 0.05, 0.795, 0.035), visibility .4s cubic-bezier(0.95, 0.05, 0.795, 0.035);

  -webkit-transform: skew(38deg) rotate(38deg);
  -moz-transform: skew(38deg) rotate(38deg);
  transform: skew(38deg) rotate(38deg);

}
.main-menu-btn i {
  -webkit-transform: rotate(-38deg);
  -moz-transform: rotate(-38deg);
  transform: rotate(-38deg);
  color: #fff;
}
.main-menu-btn:hover i{
  color: #3498DB;
}

/*BOTÓN DE CERRAR */
.main-menu.open .main-menu-close {
  opacity: 1;
  -webkit-transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  -moz-transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  transition: color .2s ease, opacity 1s ease 1s, transform .3s ease 1s;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  z-index: 1000 !important;
}


.main-menu-close {
  opacity: 0;
  display: inline-block;
  margin-top: 55px;
  margin-left: 5px;
  font-size: 18px;
  color: #BDC3C7;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  transform: translate(0, 100%);
}
.main-menu-close:hover {
  color: #A569BD;
}




/*main content*/
.main-wrapper {
  max-width: 1280px;
  padding: 0 10px;
  margin: 0 auto;
  background: #212F3D;
  font: normal 16px 'Open Sans';
}

.main-content {
  padding: 45px 55px;
}
.main-content h4 {
  font-size: 26px;
  line-height: 1.25;
  color: #3498DB;
  text-align: center;
}
.main-content .posts li {
  margin: 10px 0;
}

/* LOGO DE QQSM */
.logo-qqs{
  width: 40%;
  padding-top: 0%;
  margin-left: 70px;
}
.div_Teletica{
  position: fixed;
  background: rgb(23,13,56);
  background: linear-gradient(90deg, rgba(23,13,56,1) 37%, rgba(0,0,0,1) 100%);
  height: 7vh;
  width: 100%;
  text-align: right;
  padding-top: 15px;
  z-index: 100;
} 

.div_Teletica img{

  margin-top: -7px;

}









/* ==========================================================================
   #REDES SOCIALES
   ========================================================================== */
.home-social-list {
  position: absolute;
  position: fixed;
  z-index: 1000 !important;
  right: 22px;
  top: 20vh;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.9rem;
  line-height: 1.50;
  text-align: center;
  padding: 5px;
  padding: 12px 5px !important;
  border-radius: 25px;
  -webkit-transform: translateY(-55%);
  -ms-transform: translateY(-55%);
  transform: translateY(-55%); }
  @media only screen and (min-width: 1024px) {
    .home-social-list {
      right: 42px; 
      } 
    }
.home-social-list:hover {
  
}

.home-social-list::before {
  display: block;
  content: "";
  width: 2px;
  height: 42px;
  background-color: #FFF;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px; 
}

.home-social-list li {
  padding-left: 0; 
}

.home-social-list li a,
.home-social-list li a:visited {
  color: #FFF !important;
  cursor: pointer;
  opacity: 1;
}
.home-social-list li a:hover {
  font-size: 3.7rem;
  opacity: 1;
}
.feed{
  padding-left: 450px;
}



/* ==========================================================================
   #LAYERS
   ========================================================================== */


 /*FONDO Y LOGO DE QQSM */   
.layer {
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  position: fixed;
  
}

.layer2 {
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  position: fixed;
}
.layer-logo{
  background-image: url("../images/logo2-qqsm.png");
  background-size: 17%;
  background-position: center;
  padding-top: 540px; 
}
.layer-letras_qqsm {
  background-image: url("../images/h1-qqsm.png");
  background-size: 20%;
  background-position: center;
  padding-top: 550px;
}


  /* CINTILLO */
.layer-Cintillo{
  background-image: url(../images/Web_cintillo2.png);
  background-size: 80%;
  background-position: center top;
  margin-top: 5px;
  margin-left: -10px;
  
}

.layer-Cintillo-cuestionario{

  background-image: url(../images/Web_cintillo2.png);
  background-size: 90%;
  background-position: center top;
  margin-top: 5px;
  margin-left: -10px;
  margin-bottom: ;
  z-index: 600 !important;
}



/* PALABRAS DEL CINTILLO */
.layer-H1programas{
  background-image: url(../images/Web_programas.png);
  background-size: 13%;
  background-position: center top;
  margin-top: 10px;
  margin-left: 10px;
  padding-bottom: 10px;
}



.layer-H1Trivias{
  background-image: url(../images/Web_trivia.png);
  background-size: 13%;
  background-position: center top;
  margin-top: 5px;
  margin-left: 5px;
}


.layer-H1cuestionario{
  background-image: url(../images/leadQQSM.png);
  background-size: 22%;
  background-position: center top;
  margin-top: 19px;
  margin-left: 10px;
  padding-bottom: 10px;
}




/* ==========================================================================
   #SECCIONES
   ========================================================================== */
.principal{
  width: 100%;
  height: 100vh;
}
.global_Programas{
  background: url("../images/BG-3.jpg");
  background-attachment: fixed;
}
.secundario{
  width: 100%;
  height: 30vh;
  position: left; 
}
.seccion_programa{
  position: relative;
  z-index: ;
}





.banner-principal{
  background: url("../images/BG-3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  background-position: top;
  width: 100%;
  height: 50vh;
}  

.marco-videos{
  padding-top: 50px;
  padding-bottom: 100px;
  margin-top: -150px;
  margin-left: 150px;
  margin-right: 150px;
  background: url(../images/BG-4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border-style: inset;
  border-width: 6px;
  border-color:  rgba(90,55,149,1);
  z-index: 1 !important;
}
.noticias{
  margin-top: -170px;
}

.marco-galeria{
  padding-top: 100px;
  padding-bottom: 100px;
  margin-left: 550px;
  margin-right: 550px;
  margin-top: -150px;
  background: url(../images/fondo-galeria.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-style: inset;
  border-width: 6px;
  border-color:  rgba(90,55,149,1);
  z-index: 1 !important;
}


 /* Footer
    *******************************************************************************/
.footer {
    background-color: #000 !important;
    width: 100%;
    padding: 50px 0 0;
    margin: 10px 0 0;
    display: inline-block;
    position: relative;
    background-image: none;
}
.footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-image: -webkit-linear-gradient(0deg, #f8a824 25%, #f05d21 25%, #f05d21 50%, #8ac349 50%, #8ac349 75%, #22bab8 75%, #22bab8 100%);
    background-image: -ms-linear-gradient(0deg, #f8a824 25%, #f05d21 25%, #f05d21 50%, #8ac349 50%, #8ac349 75%, #22bab8 75%, #22bab8 100%);
    background-size: 100%;
}
.footer ul li a {
    color: #fff;
}
.footer ul li a:hover {
    color: #f05d21;
}
#social li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 30px;
}
#social li a i {
    color: #5c5c5c;
    transition: all .15s ease;
}
#social li a.facebook:hover i {
    color: #3b5998;
}
#social li a.instagram:hover i {
    color: pink;
}
#social li a.twitter:hover i {
    color: #1da1f2;
}
#social li a.youtube:hover i {
    color: #de2825;
}
.derechos {
    background-color: #000;
    color: #fff;
}




}



 @media (min-width: 460px) and (max-width: 1600px) {
 }



/* ==========================================================================
   #MEDIA QUERIES RESPONSIVE WIDTH
   ========================================================================== */



  @media (min-width: 460px) and (max-width: 1600px) {

   

  /* MENÚ DESPLEGABLE */
  .main-menu-logo{
    width: 30% !important;
  }

  .logo-qqs {
    margin-top: -30px;
    width: 110% !important;
    margin-bottom: -30px;
  }

  .main-menu-close {
    margin-top: 5px;
    padding-bottom: -115px;
    margin-left: 20px;
    font-size: 18px;
  }


  .global-noticias{
    padding-top: 80px;
  }



  /*FONDO Y LOGO DE QQSM */


 .layer-logo{
    background-size: 15% !important;
    padding-top: 25% !important;;
  }

  .layer-letras_qqsm {
    background-size: 18% !important;
   margin-top: -9.5% !important;
  }


  /* CINTILLO */ 
  .layer-Cintillo{
    background-size: 130% !important;
    margin-top: 20px !important;
    margin-bottom: 80px !important;
  }

  .layer-Cintillo-cuestionario{
     background-size: 130% !important;
    margin-top: 20px !important;
    padding-bottom: 80px !important;

  }
  .secundario{
    width: 100% !important;
    height: 25vh !important;
    position: center !important;
    margin-bottom: 70px !important;
        
  }


  /* PALABRAS DEL CINTILLO */
  .layer-H1programas{
    background-size: 27% !important;
    margin-top: 15px !important;
    margin-left: 10px !important;
  }

   .layer-H1cuestionario{
    background-size: 32% !important;
    margin-top: 33px !important;
    margin-left: 10px !important;
  }
  .layer-H1Trivias{
   background-size: 23% !important;
    margin-top: 14px !important;
    margin-left: 10px !important;
  }


  .feed{
    padding-left: 180px;
  }

  /*LOGO DE TELETICA  */

   .div_Teletica {
        height: 9vh;
    }

  .div_Teletica img{
    margin-top: -7px;
    margin-left: 60% !important;
    width: 10%;
  }
  .banner-principal{
    background-size: 100% !important;
    height: 50vh;
  }
    .marco-videos {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 50px !important;
        margin-right: 50px !important;
        margin-top: -90px !important;
    }


  .home-social-list li a,
  .home-social-list li a:visited {
    font-size: 1.8rem !important;
  }


}




@media (max-width: 450px) {
  body{
    
  }
  /* MENÚ DESPLEGABLE */
  .main-menu-logo{
    width: 40%;
  }
  .main-menu-close {
    margin-top: -11px;
    padding-bottom: -111px;
    margin-left: 50px;
    font-size: 18px;
  }

   .global-noticias{
    padding-top: 80px;
  }
  .global-LoMejor{
    margin-top: -20px;
  }




  /*FONDO Y LOGO DE QQSM */
  .layer {
    height: 50vh; 
  }

  .layer-logo{
    background-size: 50%;
    margin-top: -80px;
  }
  .layer-letras_qqsm {
    background-size: 50%;
     margin-top: -80px;
  }


  /* CINTILLO */ 
  .layer-Cintillo{
    background-size: 260%;
    margin-left: -3px;
    margin-top: 20px;
  }

   .layer-Cintillo-cuestionario{
    background-size: 300%;
    margin-left: -3px;
    margin-top: 20px;
  }
  .secundario{
    background-position: center;
    width: 100%;
    height: 20vh;
    position: center;
  }


  /* PALABRAS DEL CINTILLO */
     .layer-H1programas {
        background-size: 50%;
        margin-top: 20px;
        margin-left: 11px;
    }
 
  .layer-H1Trivias{
    background-size: 25%;
    margin-top: 20px;
    margin-left: 5px;
  }
.layer-H1cuestionario{
  background-size: 74%;
    margin-top: 32px;
    margin-left: 9px;
}
  .noticias{
    margin-top: -20px;
  }

  
  /*LOGO DE TELETICA  */
  .div_Teletica{
    height: 7vh;
  }

  .div_Teletica img{
    margin-top: -7px;
    width: 40%;
    margin-left: 80px;
  }
  .banner-principal{
    background-size: 190%;
    height: 33vh;
  }

  .marco-videos{
    padding-top: 15px;
    padding-bottom: 265px;
    margin-left: 9px;
    margin-right: 9px;
    margin-top: -40px;
  }

  .marco-galeria{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -80px;
    margin-left: 9px;
    margin-right: 9px;
  }
  .home-social-list li a,
  .home-social-list li a:visited {
    font-size: 1.9rem;
  }
}









/* ==========================================================================
   #MEDIA QUERIES RESPONSIVE HEIGHT
   ========================================================================== */


@media (max-height: 450px) {
  body{
  }
    
  /* MENÚ DESPLEGABLE */
  .main-menu {
    min-height: 10%;
    width: 500px;
  }
  .main-menu-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .main-menu-btn {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 38px;
    right: 39px;
    line-height: 40px;
  }
  .main-menu-nav {
    margin-top: -20px;
  }  
  .main-menu-logo{
    display: none;
  }
  .main-menu-close {
    margin-top: -11px;
    padding-bottom: -111px;
    margin-left: 80px;
    font-size: 18px;
  }



  /*FONDO Y LOGO DE QQSM */
  .layer {
    height: 90vh; 
  }

  .layer-logo{
    background-size: 30%;
    margin-top: -3%;
  }
  .layer-letras_qqsm {
    background-size: 30%;
     margin-top: -3%;
  }



  /* CINTILLO */ 
  .layer-Cintillo{
    background-size: 160%;
    margin-top: 40px;
    margin-left: -3px;
    height: 13vh;
  }
  .secundario{
    background-position: center;
    width: 100%;
    height: 40vh;
    position: center;
  }


  /* PALABRAS DEL CINTILLO */
  .layer-H1programas{
    background-size: 25%;
    margin-top: 45px;
    margin-left: 5px;
  }
  .layer-H1noticias{
    background-size: 20%;
    margin-top: 45px;
    margin-left: 7px;
    height: 10vh;
  }
 .layer-H1Premios{
    background-size: 30%;
    margin-top: 45px;
    margin-left: 8px;
  }
  .layer-H1Participantes{
    background-size: 35%;
    margin-top: 30px;
    margin-left: 5px;
  }
  .layer-H1Trivias{
    background-size: 25%;
    margin-top: 37px;
    margin-left: 5px;
  }

  /*LOGO DE TELETICA  */
  .div_Teletica{
    height: 12vh;
  }
  .div_Teletica img{
    margin-top: -15px;
    width: 22%;
    margin-left: 90px;
  }
  .noticias{
    margin-top: 40px;
  }
  .banner-principal{
    background-size: 100%;
    height: 60vh;
  }
  .marco-videos{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 9px;
    margin-right: 9px;
    margin-top: -20px;
  }
  .marco-galeria{
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -20px;
    margin-left: 9px;
    margin-right: 9px;
  }

  .home-social-list li a,
  .home-social-list li a:visited {
    font-size: 1.9rem;
  }
}