/* #1 MEDIA QUERIES */

/**** Arreglo para selector kpis ****/
@media only screen and (max-width: 1550px) {
    form#kpis ul{
        width: 80%;
    }
    section#envoltorio #contenido ul.calendario li .navegacion{
        background-size: 70%;
    }
}
@media only screen and (max-width: 1260px) {
    form#kpis ul{
        font-size: 0.85em;
        width: 90%;
    }

    form#kpis #descripcion i svg{
        height: 4em;
        width: auto;
    }

    form#kpis #descripcion h4{
        font-size: 1.5em;
        text-transform: uppercase;
        color: #17b3ff;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    form#kpis #descripcion p{
        font-size: 1.2em;
        color: #151638;
        margin-top: 1em;
    }
    header nav#menu ul{
        /*margin-right: 175px;*/
    }
    section#envoltorio #contenido h1,
    section#envoltorio #contenido h2{
        margin-right: 0;
    }
}

/*panel para uso solo en horizontal*/
@media only screen and (max-width : 1024px) and (orientation : portrait){

    #verticalAlert{
        display: block;
    }
}

/*tablet horizontal*/
@media only screen and (max-width: 1024px){

    #inicio #banner .contenido #inscribirme p{
        font-size: 1.6em;
        bottom: .5em;
    }

    #inicio #banner .contenido h2{
        font-size: 1.6em;
    }

    #inicio #banner .contenido h1{
        font-size: 3.5em;
    }

    #pasos header nav{
        display: none;
    }

    form#datos_personales aside{
        height: auto;
        padding: 2em;
    }

    form#datos_personales #globo{
        display: none;
    }

    #mapa{
        height: auto;
    }

    form#localizacion{
        height: auto;
    }


    form#localizacion aside{
        height: auto;
    }

    form#localizacion .seleccion {
        background-image: url("../images/flechas.png");
    }

    form#kpis ul{
        width: 100%;
        margin: 0 auto;
    }

    form#kpis ul li{
        width: 30%;
        margin-left: 3%;
    }

    form#kpis ul li:nth-child(even){
        margin-left: 3%;
    }

    form#kpis #selector #acciones{
        width: auto;
    }

    form#kpis #selector svg#selector-svg{
        width: 50%;
        height: 100%;
        top: 0;
        left: inherit;
        position: relative;
        clear: both;
    }
    /*menú de circuitos*/
    section#envoltorio #contenido ul.calendario{
        margin: 0;
    }
    section#envoltorio #contenido ul.calendario li{
        width: 29%;
        margin: 1em 2%;
    }
    /*menú superior*/
    header{
        height: 120px;
    }
    section#envoltorio{
        top: 120px;
    }
    header img.logo{
        height: 100px;
        right: 25px;
        top: 10px;
    }
    header nav#menu ul{
        /*margin-right: 110px;*/
        height: 100%;
    }
    header nav#menu ul li{
        padding: 5px;
        height: 100%;
        display: table;
        width: 16%;
    }
    header nav#menu ul li img{
        width: 80%;
    }
    header nav#menu ul li a{
        font-size: 1.1em;
        display: table-cell;
        vertical-align: middle;
    }
    header #area-usuario .datos{
        padding: .5em 0 .5em .5em;
        line-height: 120%;
        font-size: 1.2em;
    }
    header #area-usuario img.coche{
        width: 120px;
        top: 30px;
        left: 110px;
    }
    header #area-usuario img.equipo{
        width: 100px;
        left: 40px;
        top: 10px;
    }
    header #logout{
        top: 5px;
        left: 15px;
    }
    /*actividad social*/
    section#envoltorio #actividad-social .contenedor #mensajes{
        top: 150px;
    }
    section#envoltorio #actividad-social .contenedor #mensajes .mensaje{
        padding-left: 0;
    }
    section#envoltorio #actividad-social .contenedor #mensajes .mensaje .avatar{
        width: 30px;
        height: 30px;
        top: -2px;
    }
    section#envoltorio #actividad-social .contenedor #mensajes .mensaje p.cuando{
        padding-left: 40px;
        padding-top: 5px;
    }
    section#envoltorio #actividad-social .contenedor #mensajes .mensaje p.cuando span{
        display: block;
    }
    section#envoltorio #actividad-social .contenedor #comunicados{
        height: 105px;
        color: #fff;
        padding: 1em 1em 1em 3em;
    }
    section#envoltorio #actividad-social .contenedor #comunicados p{
        line-height: 100%;
        margin-bottom: 0;
    }
}

/*corrección de unos margenes que se lian con boostrap*/
@media only screen and (max-width: 968px){

    #inicio #banner .contenido #inscribirme {
        height: auto;
        top: 1em;
        margin-top: 0;
    }

    form#formacion .izquierda .onoffswitch{
        margin: 1em auto 2em;
    }
    form#formacion select{
        margin: 1em auto 2em;
        max-width: 280px;
    }
}

/*tablet vertical o móvil horizontal*/
@media only screen and (max-width: 768px){ /*768*/

    #inicio #banner .contenido h1{
        font-size: 2em;
    }

    #inicio #banner .contenido #inscribirme{
        right: 1em;
    }

    #inicio #banner .contenido #inscribirme .stars{
        margin: 0 auto;
    }

    #pasos header img.logo-facebook{
        display: none;
    }

    #genero .opcion .avatar{
        border: .5em solid #fbb232;
    }

    #genero{
        width: 80%;
    }

    #genero .opcion p a{
        font-size: 2.8em;
    }

    ul#hashtags li{
        width: 36%;
        margin: 0.5em 7%;
    }

    form#kpis #selector svg#selector-svg{
        display: none;
    }

    form#kpis #selector #acciones{
        position: inherit;
        bottom: inherit;
        left: inherit;
        clear: both;
    }

    form#kpis ul li{
        width: 47%;
        margin-left: 3%;
        font-size: 1.2em;
    }

    form#kpis ul li:nth-child(even){
        margin-left: 3%;
    }

    form#kpis #descripcion {
        width: 60%;
        left: 20%;
    }

    form#kpis #descripcion p {
        font-size: 1em;
    }

    form#formacion aside{
        padding-top: 5em;
    }

    #intro #mar{
        display: none;
    }

    section#envoltorio{
        top: 55px;
    }
    section#envoltorio .principal{
        width: 100%;
        padding-bottom: 0;
    }
    section#envoltorio #contenido h1,
    section#envoltorio #contenido h2{
        margin-top: 0;
    }
    section#envoltorio #contenido h1 span,
    section#envoltorio #contenido h2 span,
    section#envoltorio #contenido h2{
        padding: 0.2em 1em !important;
    }

    /*menús*/
    header nav#menu,
    header > #area-usuario{
        display: none;
    }
    header img.logo{
        height: 50px;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        top: 2px;
        display: block;
    }
    header #menuMobileOpener,
    header #socialOpener{
        display: inline-block;
    }
    header{
        height: 50px;
        background-color: rgba(255,255,255,.9);
        z-index: 10;
    }
    header #area-usuario .datos{
        margin-left: 5px;
    }

    section#envoltorio #actividad-social{
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        z-index: 101;
        padding: 0;
    }
    section#envoltorio #actividad-social .contenedor h1{
        display: none;
    }
    section#envoltorio #actividad-social .contenedor::after{
        border-radius: 0;
    }
    section#envoltorio #actividad-social .contenedor #mensajes{
        top: 100px;
    }

    #premios.welcome .contenido.welcomeText .imagen{
        display: none;
    }
    #premios.welcome .apartado .contenido .texto p{
        padding-bottom: 10px;
    }
    #premios.welcome .apartado .contenido .texto h4{
        padding-bottom: 20px;
    }

    section#envoltorio #contenido ul.garage li{
        width: 45%;
        margin: 10px 2%;
    }
}

/*móvil vertical*/
@media only screen and (max-width: 480px){

    #inicio header img.logo {
        width: 120px;
        margin: 0em 1em 1em 1em;
        background: rgba(255, 255, 255, 0.90);
        padding: 1.5em 1em 1em 1em;
    }

    #inicio header img.logo-facebook {
        width: 120px;
        height: auto;
        float: right;
        margin: 1em;
    }

    #inicio #banner .contenido h1 {
        font-size: 1.7em;
    }

    #inicio #banner .contenido h2 {
        font-size: 1.3em;
    }

    #inicio #banner .contenido #inscribirme{
        height: 60%;
        bottom: -10%;
    }

    #inicio #banner .contenido #inscribirme p{
        font-size: 1.1em;
        bottom: .5em;
    }

    #inicio #banner #reproducir{
        top: 30%;
        font-size: 6em !important;
    }
    #inicio footer p{
        padding: 2em;
    }

    #genero{
        width: 100%;
    }

    #paso #genero h1{
        font-size: 2em;
    }

    #genero .opcion{
        padding-top: 8em;
    }

    #pasos header{
        height: 60px;
    }

    #pasos header img.logo{
        height: 50px;
        margin: 5px 1em 0;
    }

    #pasos header #seccion{
        float: right;
        padding-right: .8em;
        max-width: 180px;
        overflow: hidden;
    }

    #pasos header #seccion h1{
        font-size: 1em;
    }

    #pasos header #seccion h2{
        font-size: .8em;
        white-space: nowrap;
    }

    #pasos header #seccion::after{
        display: none;
    }

    form#datos_personales label{
        line-height: 120%;
        font-size: 1.6em;
    }

    form#datos_personales .form-group{
        padding: 1em 0;
    }
    form#datos_personales input[type="text"],
    form#datos_personales input[type="email"]{
        font-size: 1.1em;
    }

    form#datos_personales input[name="nombre"]{
        margin-bottom: .5em;
    }

    form#localizacion input[type="number"]{
        font-size: 1.1em;
    }

    form#datos_personales .izquierda,
    form#experiencia .izquierda,
    form#origen .izquierda,
    form#kpis .izquierda{
        padding-top: 2em;
    }

    #mapa #todas{
        bottom: 1em;
        right: 1em;
    }

    #mapa #todas img {
        width: 35px;
        height: 35px;
    }

    #pasos header a#siguiente{
        bottom: 1em;
        right: 1em;
    }

    form#localizacion label{
        line-height: 120%;
    }

    #mapa #mark{
        display: none !important;
    }
    form#kpis ul li{
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    form#kpis ul li:nth-child(even){
        margin-left: 0;
    }

    form#kpis #descripcion {
        width: 90%;
        left: 5%;
    }

    ul#hashtags li{
        width: 44%;
        margin: 0.5em 3%;
    }
    form#experiencia aside,
    form#origen aside{
        padding-top: 2em;
    }

    form#experiencia aside svg{
        width: 100%;
        margin-top: -1em;
    }

    form#formacion .form-group .control-label{
        line-height: 120%;
    }

    form#origen aside .cumple{
        background-position: center 15%;
    }

    form#origen ul li{
        width: 48%;
    }

    form#origen ul li:nth-child(2n){
        margin-left: 4%;
    }

    form#kpis h3{
        margin-bottom: 1em;
    }

    form#kpis ul li span{
        font-size: 1.5em;
    }

    form#kpis ul li span.glyphicon{
        font-size: 1em;
        top: 0;
    }

    /*Correccion para sweet alert*/
    body#pasos{
        min-height: 100%;
        height: auto;
    }

    #paso {
        height: auto;
        min-height: 85vh;
    }

    /*pamel de volteo*/
    #verticalAlert img{
        width: 250px;
    }
    #verticalAlert .texto{
        font-size: 28px;
        padding: 0 20px;
    }

    section#envoltorio #contenido ul.garage li{
        width: 100%;
        margin: 10px 0;
    }
}

/*m�vil superpeque�o vertical*/
@media only screen and (max-width: 320px){


}