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

/*******  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;

}


#cabecera{ 
  display: flex;
  flex-direction: column;
}

#cabecera > div:first-of-type{ 
  order: 2; 
}

#cabecera > div:last-of-type{ 
  order: 1;  
}


  
 /* #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;  }*/
   
  /* es para ordenar mobile y pc*/
.logo{order: 2;}

  #logo{  
    margin-top:0; 
    padding-top:0;  
    margin-bottom:0;  
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: center;
    
 
    }
   
  #menu_superior{ 
    float:none; 
    width:100%; 
    /*min-width:300px;
    height: 55px; */
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
   
    margin-bottom:10px;
    order: 1;
  }
  
  #menu_superior ul li{ margin-right:0; margin-bottom: 1em;}
  
  #menu_superior ul li.bt_llamanos{ 
    background-color:#384B4F; 
   /* border:1px solid #46580E; */
    clear:none; 
    float:left; 
    font-size: 0.82em; 
    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:47%;
      /* 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:#1AB358; 
    float: right; 
    margin-left:15px; 
    padding-left:0; 
    font-size: 0.85em; 
    font-weight: bold; 
    padding: 0.4em; 
  }
  /* iconos */
  .llamanos .fa-phone, .whatsapp .fa-whatsapp, .campus .fa-lock{ padding-right:5px; font-size:1.8em; }
  

.buscador{ display: none; }

/*
.buscador_slider .input input {
  
  padding: 0.8em 0 0.8em 1em;
  border: 1px solid #ccc;
  font-size: 1.2em;
}
*/



/*------------  RASTRO DE MIGAS ----------------------*/  
#rastro_migas { 
  display: none;
}




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

.nav {
  position:absolute;
  width:200px;
  height:100vh;
  top:0;
  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: #E63137;
  transition:all .5s ease; /*Damos a la caja del menú una transición para que tenga un desplazamiento suave*/
  border-right: 2px solid #000;
  -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);
}
   /*Estilos de los li del menú*/
   .nav__item {
     display:block;
     width:96%;
     margin:0 auto;
     line-height:3;
     border-bottom: 1px dashed #fff;
     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: 1em;
     color: #ffffff;
     text-decoration: none; 
     font-size: 1.1em;
    
   }

      
  /*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;
    text-align:center;
    top:120px; /*Le damos una posición top y left en donde queramos que se encuentre la hamburguesa del menú*/
    left: 0.3em; 
    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: 2px solid #1F191A ;
      border-left: none;
      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
-----------------------------------------------------------------------------------------------------*/


/***  SE HA MOVIDO A PROMOS.CSS SE PUEDE BORRAR

franja para campañas, subvenciones de verano ***
#banner_sup{ 

display: none;

  height: 25px; 
  font-size: 1em; 
  display: block; 
  padding: 0.3em;

   }*/

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

/*
.header{ height:150px; width:100%; }
.menu{ height:80px; width:100%; }
*/

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

.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; 
   }



#cabecera > div:first-of-type{ 

  order: 1; 
  
}

#cabecera > div:last-of-type{ 

  order: 2; 
  
}



/* es para ordenar mobile y pc*/
.logo{order: 0;}

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



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

#menu_superior{ 
  float:right; 
  width:45%; 
  margin-left:auto; 
  margin-right:auto; 
  text-align:center; 
  margin-bottom:0;
}

#telefono_sup > li {
 
  width:100%; 
  min-width:100px;
  max-width:120px;  
  margin:0; 
 
}


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

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

}

/*#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;

   }

#telefono_sup .texto_whatsapp, #menu_superior .numero_whatsapp{
  color: #2E862E;
} 

.bt_campus{ justify-content: center; }

/*#menu_superior .campus{ padding-top:4px; }*/
#menu_superior ul li.bt_callme_menu, #menu_superior .campus a{ 
  text-decoration: none; 
  border: 1px solid; 
  padding: 0.85em; 
  text-transform: uppercase; 
  font-size: 0.85em;
   }

#menu_superior ul li.bt_callme_menu:hover, #menu_superior .campus a:hover{ 
  background-color:#E63137; 
  color: #fff; 
}

.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:5px; 
  padding-left:0; 
  font-size: 0.95em;
  padding: 0;
  border-left: 1px solid #ccc; 
   }



  /* buscador */



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

.buscador .input input {
    width: 380px;  
    padding: 12px;
    color: #4c4949;
    border: 1px solid #999;
    background-color: #F8F8F8 /*#FFFEF3*/;
    }


/*------------  RASTRO DE MIGAS ----------------------*/  
#rastro_migas { 
  display: block;
  background-image:url(../images/bg_migas.jpg);
  background-position:left top;
  background-repeat:no-repeat;
  padding-left:12px;
  margin-bottom:10px;
  color: #333;
  margin-left:2%;
  font-size:1em;
  font-weight: bold; 
  
}

#rastro_migas a { 
  color: #165f77; 
  text-decoration:underline;
  padding-right: 0.3em;
}
/*.circulo{ padding-left:5px; color:#d90119; }*/


/*------------  FIN RASTRO DE MIGAS --------------------*/



/****************  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;
}

/*
#barra_fixed_sup > #banner_sup{ 

font-size: 0.95em;


   }
   */


.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; 
  padding-top: 0; 
  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{
  width: auto;
  min-width: 410px;
}

}



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

}


/***************************************************************************************************
******************************************************************************************************
******************************************************************************************************
******************************************************************************************************
*******************************************  pant vero gigante2080 ****************************
******************************************************************************************************
******************************************************************************************************/

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

#rastro_migas{ margin-left: 17%; }

}












/*              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;
}


*/