/*
----------------------------------------- CABECERA   2018 ---------------------------------------------------*/


/*** franja roja para campañas, subvenciones de verano ****/
#banner_sup{ 
  height: auto; 
   background-color: #FFD403; 
  color: #010101; 
  text-align: center; 
  font-size: 0.85em;
  font-weight: bold;
  display: block; 
  padding: 0.3em;
  margin-bottom: 0.5em;

   }


/*******  cabecera movil ***********/

#claim_sup{ border: none;  /*border-top: 3px solid #3b3636; */}
.texto_claim{ 
    float: none;
    display: block;
    text-transform: uppercase;
    font-size: 0.75em;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1em;
    background-color: #1F191A;
    color: white;

}

  
 /* #logo{ width:76%; display:block; margin-left:auto; margin-right:auto;  margin-top:10px; padding-top:0; float: none; clear: both; padding-bottom:0; margin-bottom:10px;  }*/
   
  #logo{  
    margin-top:10px; 
    padding-top:0;  
    margin-bottom:10px;  
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: center;
 
    }
   
  #menu_superior{ float:none; width:80%; min-width:300px; margin-left:auto; margin-right:auto; text-align:center; padding-left: auto; padding-right: auto; margin-bottom:10px;}
  
  #menu_superior ul li{ margin-right:0;}
  
  #menu_superior ul li.bt_llamanos{ background-color:#5e7612; border:1px solid #46580E; clear:none; float:left; font-size: 0.75em; padding: 0.4em; font-weight: bold;}  
  #menu_superior ul li.bt_llamanos a,   #menu_superior ul li.whatsapp a{ text-decoration: none; }
  #menu_superior ul li.bt_llamanos .fa .fa-phone .negro{ font-size:1.4em; }


   .bt_llamanos > p, .whatsapp >p{ margin: 0; padding: 0;}
    
  
  #telefono_sup{  width:100%; padding: 0; float: none; margin:0; }
  
  #telefono_sup > li {
      display: inline; width:46%; min-width:140px; max-width:190px;  margin:0; 
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
     }
     
  #telefono_sup .llamanos, 
  #telefono_sup .texto_whatsapp{ 
  text-transform:uppercase; color:#FFFFFF; font-size:0.85em; padding-left:0; display:block; clear:both; text-align:center; }
  
  #telefono_sup .numero,  
  #telefono_sup .numero_whatsapp{ font-size:1.2em; padding:0; color:#FFFFFF; display:block; clear:both; text-align:center; }
  
  #telefono_sup .whatsapp{ clear:none; background-color:#394C50; float: right; margin-left:15px; padding-left:0; font-size: 0.75em; font-weight: bold; padding: 0.4em; }
  /* iconos */
  .llamanos .fa-phone, .whatsapp .fa-whatsapp, .campus .fa-lock{ padding-right:5px; font-size:1.8em; }
  
  /* buscador */
.buscador {
  /* float: right;*/
  margin-top:18px;
  margin-right: auto;
}

.buscador .input { text-align:center; }
.buscador .input input {
  width: 110px;
  margin-bottom:1em;

  padding: 12px;
    color: #4c4949;
    border: 1px solid #999;
    background-color: #F8F8F8 /*#FFFEF3*/;
  
}

/*******************************\
  MENU HAMBUR
  https://codepen.io/Gugor/pen/xbGMPy
\*********************************/

.nav {
  position:absolute;
  width:200px;
  height:100vh;
  top:100px;
  left:-220px; /*Ocultamos el menú en la parte izquierda para que no se vea a menos que pulsemos sobre la hamburguesa*/
  padding-top:20px;
  background-color: #1F191A;
  transition:all .5s ease; /*Damos a la caja del menú una transición para que tenga un desplazamiento suave*/
}
   /*Estilos de los li del menú*/
   .nav__item {
     display:block;
     width:96%;
     margin:0 auto;
     line-height:3;
     border-bottom: 1px solid #7E7E7E;
     position:relative; /*Le damos una posición relativa para posteriormente añadirle el triangulo que indica que se está en la página actual del menú*/
    /* border-bottom:.5px solid rgba(59, 62, 61, 1);
     border-top:.5px solid rgba(59, 62, 61, 1);
     background-color:transparent;
     font-family: 'Lato', sans-serif;*/
     text-align: left
     padding-left: 0.5em;
     color: #ffffff;
     text-decoration: none; 
     padding-left: 0.8em;
   }

      
  /*Estos son los estilos de la hamburguesa del menú que abre y cierra el mismo*/
  .menu-toogle {
    position:absolute; /*Lo posicionamos absolutamente para poder darle una posición y poder moverlo según el menú esté abierto o cerrado*/
    width: 45px;
    line-height:1.1;
    text-align:center;
    top:90px; /*Le damos una posición top y left en donde queramos que se encuentre la hamburguesa del menú*/
    left: 0.5em; 
    font-size: 2em;
    transition: all .5s ease; /*Añadimos una transición para que realice un desplazamineto suave*/
    z-index:10;
    font-size: 2.3em;
    background-color: #ffffff;
  }
    /*Añadimos la haburguesa y le damos unos estilos*/
    .menu-toogle::before {
     /*content:"☰";*/
      font-size:2.3em;
      color: #142b25;
      background-color: #ffffff;
      border: 1px solid #142b25;
    }

/* Le damos unos estilos al contenedor principal*/
.main-w {
  width:100%;
  height:100vh;
  transition: all .5s ease;
}   
    .header-w figure {
      width:100%;
      height:150px;
      text-align:center;
      position:relative;
    }
        .header-w figure:before {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:42vw;
          top:9vw;     
        }
        .header-w figure:after {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:50.8vw;
          top:9vw; 
        }
    .featured-img {
      margin:3em 6vw 0 0;
      border:4px solid white;
      border-radius:100%;
    }
    .header-w__description {
      width:80%;
      height:auto;
      margin:0 auto;
      padding:1em;
      line-height:2;
      text-align:center;
      color:rgba(33, 36, 8, 1);
    }
        .header-w__title
        {
          font-size:300%;
          font-family:Lobster;
          margin:1em 0 0 0;
        }
        .header-w__title2 {
          font-size:250%;
          font-family:Lobster;
          margin:0;
        }
    .paragraph {
      width:80%;
      margin:0 auto;
      text-align:center;
      font-family:'Source Sans Pro', sans-serif;
    }

    /*Estos son los estilos que le dan la funcionalidad al menú*/
    /*El checkbox según esté activado o no hará que el menú aparezca o desaparezca*/
    .checkbox {
      display:none; /*Ocultamos el checkbox pues no nos interesa que se vea*/
    }
    .checkbox:checked ~ .nav {
      left:0px; /*Le quitamos el left negativo para que el menú vuelva a su posición original*/
      position:fixed; /* Fijamos el menú lateral para que se desplace cuando hagamos scroll*/
    }
    .checkbox:checked ~ .main-w {
      margin-left:200px; /*Cuando el checkbox asigna un margen al contenedor principal para que se desplace junto con el menú*/
    }
    .checkbox:checked ~ .menu-toogle { 
      left:200px;
      position:fixed; /*Fijamos la hamburgues para que se desplace junto con el menú*/
      border: 3px solid #1F191A;
      padding-top: 5px;
      width: 75px;
      height: 65px;
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.32);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.32);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.32);
      -webkit-border-top-right-radius: 15px;
      -webkit-border-bottom-right-radius: 15px;
      -moz-border-radius-topright: 15px;
      -moz-border-radius-bottomright: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
     
    }

  
/**********  AGUR  **************/




/***************************************************************************************************
******************************************************************************************************
*******************************************  984px   ****************************/

@media screen and (min-width: 61.5em) {


/*                           TOP
-----------------------------------------------------------------------------------------------------*/


/*** franja roja para campañas, subvenciones de verano ****/
#banner_sup{ 
  height: 25px; 
 
  font-size: 1.1em; 
  display: block; 
  padding: 0.3em;

   }

header{ width:98%;clear:both; padding-top:0; margin-left:auto; margin-right:auto; }





/* desde tu casa sin horarios ni desplazamientos*/
#claim_sup{ 
  width:98%; 
  clear:both; 
  margin-left:auto; 
  margin-right:auto; 
  font-size:0.85em; 
  font-weight:700; 
  text-align: center; 
  color:#3b3636; 
  padding:2px; 
 
}

.texto_claim{ float:left; font-size:0.85em; padding-left:5px; padding-right:3em; padding-top:5px; padding-bottom: 0; margin-bottom: 0;  background-color: #fff;
  color: #1F191A;  }

#logo{ max-width:333px; float:left; margin-top: 0; width: auto; }



/* MENU SUPERIOR ACCESO CAMPUS, CONOCENOS.... */

#menu_superior{ float:right; width:78% /*58*//**44*/; min-width:430px; margin-left:auto; margin-right:auto; text-align:center; padding-left: auto; padding-right: auto; margin-bottom:0;}
#telefono_sup > li{ min-width: 240px; }

#menu_superior ul li{ display:inline; font-weight: 700;  margin-right:0.2em;  /*float:left; */}

#menu_superior ul li.bt_llamanos{ background-color: #FFFFFF; border: none; font-size: 0.95em; padding: 0; }

#menu_superior ul li a{ text-decoration: none; color:#3b3636; padding-right:15px; }

#telefono_sup .llamanos, #telefono_sup .texto_whatsapp{ text-transform: none; color:#3b3636; font-size:0.9em; padding-left:0; display:inline; clear: none; text-align:left; } 

#menu_superior .numero, #menu_superior .numero_whatsapp{ font-size:1.25em; color:#3b3636; text-decoration: none; cursor: default; display:inline; clear: none; }
/*#menu_superior .campus{ padding-top:4px; }*/
#menu_superior ul li.bt_callme_menu, #menu_superior .campus a{ text-decoration:underline;  }
.llamanos .fa-phone, .bt_callme_menu .fa-volume-control-phone, .whatsapp .fa-whatsapp, .campus .fa-lock{ padding-right:5px; padding-top:5px; font-size:1.6em; }


#telefono_sup .whatsapp{ clear:none; background-color:#ffffff; float: left; margin-left:15px; padding-left:0; font-size: 0.95em;
    padding-top: 0;  }


.buscador {
    /* border-left: 0; */
    float: right;
    margin-top: 1em;
    margin-right: 33%;
}

.buscador .input input {
    width: 380px;
    }



/****************  BARRA SUPERIOR PAGE CURSO    ***************************/
#barra_fixed_sup{ 
  background-color: #ffffff; 
  width: 100%;
  /* para que no se vea la de abajo necesita 152px si reducimos de altura el menu principal ajustamos tb este */ 
  height: 149px; 
  padding: 0 1em; 
  clear: both; 
  position: fixed; 
  margin-top: 0; 
  z-index: 100;
  -webkit-box-shadow: 0px 11px 19px -12px rgba(38,36,36,1);
  -moz-box-shadow: 0px 11px 19px -12px rgba(38,36,36,1);
  box-shadow: 0px 11px 19px -12px rgba(38,36,36,1);
  transition: all 0.5s ease-in-out;
}
.logo_menu_curso_sup{ float: left; margin-bottom: 1em; margin-right: 2em; padding-right: 1em; border-right: 1px solid #ccc; }
#barra_fixed_sup .nombre_curso{ font-weight: bold; padding-top: 1.5em; }
#lista_menu_curso_sup{ clear: left; margin-left: 0.7em; font-weight: bold; background: #FCF2F1 /*o azul #D3E8FD*/; padding: 0.5em 0; }
#lista_menu_curso_sup li{ display: inline; list-style-type: none; text-transform: uppercase; padding-right: 1.1em; font-size: 0.95em; }
#lista_menu_curso_sup li a{ text-decoration: none;} 
#lista_menu_curso_sup li a.seleccionada{ color: #d90119; border-bottom: 4px solid #d90119; }

#wrap_zona_logo_menu_curso{ width: 74%; float: left; padding-right: 0.5em; min-width:400px;  }
#wrap_zona_logo_menu_curso img{ padding-right: 1.5em; margin-right: 1.5em; border-right: 1px solid #ccc; }

.txt_promo_curso_sup{ 
    margin-top: 0; 
    color: white;
    height: 28px;
    background-color: #ffffff;
    font-size: 0.95em;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;  
    margin-bottom: 0.5em; /*border-top: 1px solid #ccc; margin-top: 1em; font-style: italic; color: grey; font-size: 0.8em; */
  }


#bt_sup_CTA_curso{ 
  float: left;
  padding-right: 2em; 
  border: none; 
  background-color:  #d90119; 
  outline: 1px solid #B80115; 
  color: #ffffff; 
  font-size: 1.2em; 
  padding: 1em 1.5em;
  font-weight: bold; 
  margin: 0.8em 2%;
  -webkit-box-shadow: 15px 15px 16px -11px rgba(153,153,153,1);
  -moz-box-shadow: 15px 15px 16px -11px rgba(153,153,153,1);
  box-shadow: 15px 15px 16px -11px rgba(153,153,153,1);
  }

#bt_sup_CTA_curso a{color: #ffffff; text-decoration: none;}
#bt_sup_CTA_curso:hover{ background-color: #B80115; }

#barra_fixed_sup .cerrar_menu{ font-size: 2em; }



}





/***************************************************************************************************
******************************************************************************************************
*******************************************  1024px   ****************************/ 
@media screen and (min-width: 984px) and (max-width: 1174px) {

   #menu_superior{ float: right; width: 82%; }

#wrap_zona_logo_menu_curso{ width: 72%; }
#lista_menu_curso_sup li{     padding-right: 0.85em; font-size: 0.8em; }

}



/***************************************************************************************************
******************************************************************************************************
*******************************************  1872px   ****************************/ 
@media screen and (min-width: 117em) {
   #cabecera{ width:88%; margin-left:auto; margin-right:auto;  }

}





/*              estilos viejos 
-----------------------------------------------------------------------------------------------------

header{ width:98%; clear:both; padding-top:0; margin-left:auto; margin-right:auto; }


#claim_sup{ width:98%; clear:both; margin-left:auto; margin-right:auto; font-size:0.85em; font-weight:700; text-align: center; border-top: 3px solid #3b3636; color:#3b3636; padding:2px; }

.texto_claim{ float:left; font-size:0.8em; padding-left:5px; padding-right:3em; padding-top:5px; text-transform:uppercase; }

#logo{ max-width:333px; float:left; }




#menu_superior{ float:right; }

#menu_superior ul li{ display:inline; font-weight: 700;  margin-right:2em;  float:left; }
#menu_superior ul li a{ text-decoration: none; color:#3b3636; padding-right:15px; }

#menu_superior .numero, #menu_superior .numero_whatsapp{ font-size:1.25em; color:#3b3636; text-decoration: none; cursor: default; }
#menu_superior ul li.bt_callme_menu, #menu_superior .campus a{ text-decoration:underline;  }
.llamanos .fa-phone, .bt_callme_menu .fa-volume-control-phone, .whatsapp .fa-whatsapp, .campus .fa-lock{ padding-right:5px; padding-top:5px; font-size:1.6em; }



/********************* buscador *****************************************
.buscador {

  float: right;
  margin-top:1.7em;
  margin-right:30%;
}
.buscador .input {
  
}
.buscador .input input{
  width: 380px; /* antes 240 440*
  padding: 12px 0 12px 35px;
  color: #4c4949;
  border: 1px solid #999;
  background-color: #F8F8F8;
}
.buscador .button {
  /*position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}


*/