.f14 {
    font-size: 16px;
}

.f16 {
    font-size: 18px;
}

.f17 {
    font-size: 17px;
}

.f18{
    font-size:18px;
}

.f20 { font-size: 20px; }

.f22 {
    font-size: 22px;
}

.f25 { font-size: 22px; }
@media (min-width: 768px) { .f25 {  font-size: 24px; } }
@media (min-width: 992px) { .f25 {  font-size: 25px; } }

.f40 { font-size: 27px; }
@media (min-width: 768px) { .f40 {  font-size: 35px; } }
@media (min-width: 992px) { .f40 {  font-size: 40px; } }

.f45 { font-size: 32px; }
@media (min-width: 768px) { .f45 {  font-size: 40px; } }
@media (min-width: 992px) { .f45 {  font-size: 45px; } }

.f52 { font-size: 38px; }
@media (min-width: 768px) { .f52 {  font-size: 45px; } }
@media (min-width: 992px) { .f52 {  font-size: 52px; } }

.f60 {  font-size: 42px; }
@media (min-width: 768px) { .f60 {  font-size: 50px; } }
@media (min-width: 992px) { .f60 {  font-size: 60px; } }

.f70{font-size:52px;}
@media (min-width: 768px) { .f70 {  font-size: 60px; } }
@media (min-width: 992px) { .f70 {  font-size: 70px; } }

.f80{font-size:62px;}
@media (min-width: 768px) { .f80 {  font-size: 70px; } }
@media (min-width: 992px) { .f80 {  font-size: 80px; } }


/************************************/
/************************************/
/************ GENERAL ***************/
/************************************/
/************************************/
/************************************/

/* BUTTONS */
.nav-registrate {
	font-size: 14px;
	padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 1200px) {
	.nav-registrate {
		font-size: 16px;
		padding-left: 40px;
	    padding-right: 40px;
	}
}

/************************************/
/************************************/
/************* HEADER ***************/
/************************************/
/************************************/
/************************************/

/* WRAP */ 


/* BRAND */
#mainNav .navbar-brand {
	margin-right: 20px;
}
@media (min-width: 1400px) {
	#mainNav .navbar-brand {
		margin-right: 60px;
	}
}


.nav_wrapper {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    display: inherit;
    width: 100%
}

@media (max-width: 992px) {
    .nav_wrapper {
        display:contents;
    }
}

@media (max-width: 1010px) {
    .menu_h {
        margin-left: 0px !important;
    }
}







/* LOGIN BUTTON */
#li_inicia_sesion {
    display: flex;
    align-items: center;
}

.nav_inicia_sesion_img {
	margin-right: 5px;
}

.nav_inicia_sesion a {
	top: 0;
	position: relative;
    display: inline-block;
    width: 50px;
    line-height: 1em;
}

@media (min-width: 1200px) {
	.nav_inicia_sesion a {
		width: unset;
	}
}

@media (max-width: 992px) {
    #li_inicia_sesion {
        display: block;
    }
    #menu8 {
        top: -10px;
    }
}


/* MENU */
/*
Cambiar la clase de los botones del men�
antigua: nav-item mx-0 mx-lg-3 menu_h
nueva: nav-item mx-0 mx-lg-2 mx-xl-3 menu_h
*/

#mainNav .navbar-nav {
	/* quitar letter spacing */
	letter-spacing: 0;
}

#mainNav .navbar-nav li.nav-item a.nav-link {
	/*
	https://fonts.googleapis.com/css?family=Roboto|Source+Sans+Pro:400,700&display=swap
	Esta asignado font-weight:600
	Este grosor no esta incluido en la llamada a Google Fonts, por lo que la tendra que intrepretar y saldr� mal
	Solo se puede poner 400 / 700
	*/
	font-weight: 700; 
	font-size: 16px;
}

/************************************/
/************************************/
/************ WRAPPER ***************/
/************************************/
/************************************/
/************************************/

/* Hay que incluid un div superior a container-fluid con el #wrapper */

.wrapper {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1250px;
    margin: 0 auto;
}

@media (min-width: 1270px) {
	.wrapper {
		padding-left: 0px;
		padding-right: 0px;
	}
}



.div_plan {
    margin-bottom: 0;
    height: 100%;
}

/*
Si queremos que todos los botones est�n abajo alineados perfectos,
tenemos que hacer unos cuantos ajustes, pero merece la pena
*/
.div_plan {
    position: relative;
    padding-bottom: 50px;
}

    .div_plan .btn {
        position: absolute;
        padding: 25px 25px;
        left: 25px;
        bottom: 25px;
        right: 25px;
    }

/* ELIGE LAS PRUEBAS * /
/*
Cambiar las clases de las columnas de planes (row_planes)

Para las dos primeras columnas
antigua: col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4
nueva: col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4 mb-4

Para la tercera columna
antigua: col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4
nueva: col-12 col-sm-12 col-md-12  col-xl-4 mb-4
*/

.div_plan2 {
	/* cambiar e incluir */
    margin-bottom: 0;
    height: 100%;
}

/************************************/
/************************************/
/********* IMAGEN HEADER ************/
/************************************/
/************************************/
/************************************/

/*
Esto es un poquito más complicado y seguramente tendremos que hacer alg�n ajuste más cuando este aplicado
Es necesario pruebas 
De esta manera podr�amos controlar la altura a pantalla completa y que no se pase de la mitad en anchura
Y en dispositivos vamos ajustandolo
Vamos a probra el general y luego hacemos ajustes
La imagen no puede ser como est� ahora
Tiene que ser exacta la de la chica, te la adjunto
*/










/*===========PLANES Y PRECIOS=============*/

.secction-planes {
    background-image: url(../img/Header_planes_precio.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    width:100%;
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
}


@media (max-width: 1361px) {
    .secction-planes {
        background-size:700px;
    }
}
@media (max-width: 1205px) {
    .secction-planes {
        background-size: 600px;
    }
}
@media (max-width: 1090px) {
    .secction-planes {
        background-size: 550px;
    }
}

@media (max-width: 992px) {
    .secction-planes {
        background-image: url(../img/Cabecera_movil01.jpg);
        background-size:0px;
    }
}


.planes_titulo {
    margin-top: 100px;
}
@media (max-width: 992px) {
    .planes_titulo {
        margin-top: 40px;
    }
}





/*====HOME====*/
.secction-home {
    background-image: url(../img/cabecera_home-desktop.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 992px) {
    .secction-home {
        background-image: url(../img/cabecera_home-mobile.jpg);
    }
}



.home_titulo {
    margin-top: 100px;
}
.home_subtitulo {
    margin-top: 110px;
}
.home_subtitulo_div{
    max-width:500px;
}
@media (max-width: 1160px) {
    .home_subtitulo_div {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .home_titulo {
        margin-top: 190px;
    }
    .home_subtitulo {
        background-color: #282f39;
        margin-left: -30px;
        margin-right: -30px;
        margin-bottom: 30px;
    }
    .home_subtitulo .home_content_sub {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .home_subtitulo_div {
        max-width: 500px;
    }
}
@media (max-width: 535px) {
    .home_subtitulo {
        margin-top: 0px;
    }
}

.home_iconos{
    margin-top:10px;
}
@media (max-width: 992px) {
    .home_iconos {
        margin-top: 0px;
    }
}

.div_home_tabla{
    display:table;
}
.div_home_celda {
    display: table-cell;
}
.div_home_celda_contenido{
    display:block;
    margin-bottom:20px;
}
.home_slider_texto {
    max-width: 270px;
}
@media (max-width: 1092px) {
    .div_home_tabla {
        display: block;
    }
    .div_home_celda {
        display: block;
    }
    .div_home_celda_contenido {
        display: inline-block;
        margin-bottom: 20px;
    }
    .home_slider_texto {
        max-width: 100%;
        margin-left: 10px;
        
    }
}

.home-subtexto-banda-gris {
    bottom: 107px;
    position: absolute;
    margin-bottom: 0px;
}
@media (max-width: 768px) {
    .home-subtexto-banda-gris {
        position: relative;
        bottom:auto;
        margin-bottom:46px;
    }

}

.grid_cabecera_home1 {
    background-color: transparent;
    color: #282F39;
    border-bottom: solid 10px #fff !important;
    border-right: solid 10px transparent !important;
}

.grid_cabecera_home {
    background-color: #fff;
    color: #282F39;
    border-bottom: solid 10px #fff !important;
    border-right: solid 10px #fff !important;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}
.grid_cabecera_home2 {
    border-bottom: solid 10px #fff !important;
    border-right: solid 10px #fff !important;
    background-color: #fff;
}
@media only screen and (max-width: 950px) {

    .grid_cabecera_home {
        border-right: none !important;
    }

    .grid_cabecera_home1 {
        display: none !important;
    }
}


    /*======CONOCENOS========*/
    .secction-conocenos {
        background-image: url(../img/Header_conocenos.jpg);
    }

    .row_conocenos {
        background: linear-gradient(to left, #eeeff0, #eeeff0) no-repeat 0px 190px;
        background-size: 100% 72%;
    }



    /*======EXAMENES========*/

    .secction-examen {
        background-image: url(../img/Header_examen.jpg);
    }

    .secction-examen-cambridge {
        background-image: url(../img/Header_examen_cambridge.jpg);
    }

    .row_examenes {
        background-color: #eeeff0;
    }

    @media (max-width: 992px) {
        .row_examenes .text-right {
            text-align: center !important;
        }

        .row_examenes .text-left {
            text-align: center !important;
        }
    }

    .btn-link:hover {
        text-decoration: none !important;
        color: transparent !important;
        text-decoration-style: none;
    }

    .btn-link {
        text-decoration: none !important;
        color: transparent !important;
        text-decoration-style: none;
    }


    /*========CONTACTO=========*/

    .secction_contacto {
        background-image: none;
        background-size: 0px;
    }








    /*========ZONA INTERNA========*/

    .wrapper_zona_interna {
        display: flex;
        align-items: stretch;
        padding-top: 58px;
    }

    #content {
        width: 100%;
    }

    #sidebar {
        min-width: 250px;
        max-width: 250px;
        min-width: 250px;
        max-width: 250px;
        min-height: 100vh;
        background: #eff0f1;
        color: #707070;
        transition: all 0.3s;
    }

        #sidebar.active {
            margin-left: -250px;
        }

    #sidebarCollapse {
        display: none;
    }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    @media (max-width: 768px) {
        #sidebar {
            margin-left: -250px;
        }

            #sidebar.active {
                margin-left: 0;
            }

        #sidebarCollapse {
            display: block;
        }
    }


    #sidebar .sidebar-header {
        padding: 20px;
        background: #eff0f1;
    }

    #sidebar ul.components {
        padding: 20px 0;
        border-bottom: 1px solid #eff0f1;
    }

    #sidebar ul p {
        color: #707070;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
        color: #707070;
    }

        #sidebar ul li a:hover {
            color: #707070;
            background: #f9f9f9;
            text-decoration: none;
        }

    #sidebar ul li.active > a, a[aria-expanded="true"] {
        color: #707070;
        font-weight: bold;
        background: #f9f9f9;
    }

    ul ul a {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: #eff0f1;
    }



    /*MENUS ZONA PRIVADA*/

    .div_icono {
        margin-right: 10px;
        width: 24%;
        min-width: 250px;
        min-height: 210px;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background-color: #eeeff0 !important;
        margin-bottom: 20px;
        text-align: center;
    }

    .icono_zona_privada {
        color: #0B8EAB;
        font-size: 60px;
        margin-top: 15px;
        display: inline-block;
    }

    .txt_ico {
        font-size: 25px;
        color: #282f39;
        display: block;
        line-height: 1.55;
        margin-top: 10px;
    }

    .icono_zona_privada_mini {
        font-size: 20px;
    }


    /*PRUEBAS ZONA INTERNA*/
    .div_prueba_interna {
        margin-right: 15px;
        width: 320px;
        height: 290px;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background-color: #eeeff0 !important;
        margin-bottom: 20px;
    }

    .titulo_prueba_interna {
        font-size: 25px;
        font-weight: bold;
        color: #282f39;
        width: 100%;
        padding-bottom: 5px;
        border-bottom: solid 1px #d2d3d5;
        margin-bottom: 10px;
    }

    .span_titulo_prueba_interna {
        display: inline-block;
        max-width: 250px;
        max-height: 32px;
        overflow: hidden;
    }

    .descripcion_prueba_interna {
        font-size: 15px;
        font-family: 'Roboto', sans-serif;
        color: #737373;
        width: 100%;
        padding-bottom: 5px;
        border-bottom: solid 1px #d2d3d5;
        margin-bottom: 10px;
        line-height: 1.33;
    }

    .lbl_descripcion_prueba_interna {
        height: 56px;
        max-height: 56px;
        display: inline-block;
        overflow: hidden;
    }

    .pie_prueba_interna {
        font-size: 15px;
        font-family: 'Roboto', sans-serif;
        color: #737373;
        width: 100%;
        padding-bottom: 5px;
        margin-bottom: 10px;
        line-height: 1.33;
    }


    /*PRUEBA CONCRETA*/
    .update_panel_tiempo {
        float: right;
        margin-top: 15px;
        color: #282f39;
        font-size: 25px;
        font-weight: bold;
    }

    .img_radio_respuesta {
        max-width: 150px;
        max-height: 150px;
    }


    /*TOOLTIP*/
    .tooltip-inner {
        background-color: #282f39;
        font-family: 'Source Sans Pro', sans-serif;
    }

    .tooltip.show {
        opacity: 1;
    }

    /* SVG filter */
    .filter-home-icon {
        filter: invert(45%) sepia(85%) saturate(6022%) hue-rotate(171deg) brightness(101%) contrast(91%);
    }




    /*====TEST DE NIVEL====*/
    .secction-test-nivel {
        background-image: url(../img/slider_test_nivel.jpg);
        background-repeat: no-repeat;
        background-position: right top;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    @media (min-width: 1900px) {
        .secction-test-nivel {
            background-position: center top;
        }
    }

    @media (max-width: 992px) {
        .secction-test-nivel {
            background-size: 0px;
        }
    }

    .test_nivel_titulo {
        margin-top: 100px;
    }

    .test-nivel_subtitulo {
        margin-bottom: 244px;
    }

    @media (max-width: 992px) {
        .test_nivel_titulo {
            margin-top: 80px;
        }

        .test-nivel_subtitulo {
            margin-bottom: 80px;
        }
    }

    .update_panel_tiempo_test {
        width: 100%;
        margin-top: 15px;
        color: #282f39;
        font-size: 25px;
        font-weight: bold;
    }

    .RadioButtonList_respuestas_test_nivel td {
        vertical-align: top;
        border: solid 1px #DEDBE6;
        border-radius: 6px;
        padding: 12px;
        min-width: 450px;
        margin-bottom: 16px;
        display: inline-block;
    }

    @media (max-width: 550px) {
        .RadioButtonList_respuestas_test_nivel td {
            min-width: 270px;
        }
    }

    .RadioButtonList_respuestas_test_nivel input[type="radio"] {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 4px;
        margin-left: 10px;
        color: #0B8EAB;
    }

        .RadioButtonList_respuestas_test_nivel input[type="radio"]:checked:after {
            width: 16px;
            height: 16px;
            border-radius: 16px;
            top: 2px;
            left: 2px;
            position: relative;
            background-color: #0B8EAB;
            content: '';
            display: inline-block;
            visibility: visible;
            border: 1px solid white;
        }

    .RadioButtonList_respuestas_test_nivel label {
        width: auto;
        display: contents;
        float: left;
        font-size: 16px;
    }

    .test_respuesta_correcta {
        width: 100%;
        border: 1px solid #03BE16;
        padding: 5px;
        display: inline-block;
    }

        .test_respuesta_correcta input[type="radio"]:checked:after {
            background-color: #03BE16;
        }

    .test_respuesta_erronea {
        width: 100%;
        border: 1px solid #BE0303;
        padding: 5px;
        display: inline-block;
    }

        .test_respuesta_erronea input[type="radio"]:checked:after {
            background-color: #BE0303;
        }


    .chart-two {
        width: 144px;
        height: 144px;
        margin: 0;
        position: relative;
        display: inline-block;
    }

        .chart-two.animate svg .circle-foreground {
            -webkit-animation: offset 3s ease-in-out forwards;
            animation: offset 3s ease-in-out forwards;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .chart-two.animate figcaption:after {
            -webkit-animation: chart-two-label 3s steps(50) forwards;
            animation: chart-two-label 3s steps(50) forwards;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .chart-two svg {
            width: 100%;
            height: 100%;
        }

            .chart-two svg .circle-background, .chart-two svg .circle-foreground {
                r: 64.5px;
                cx: 50%;
                cy: 50%;
                fill: none;
                stroke: #DEDBE6;
                stroke-width: 15px;
            }

            .chart-two svg .circle-foreground {
                stroke: #0B8EAB;
                stroke-dasharray: 202.53px 405.06px;
                stroke-dashoffset: 202.53px;
                stroke-linecap: round;
                transform-origin: 50% 50%;
                transform: rotate(-90deg);
            }

        .chart-two .figcaption {
            display: inline-block;
            width: 100%;
            height: 2.5rem;
            overflow: hidden;
            text-align: center;
            color: #282F39;
            position: absolute;
            top: calc(50% - 1.25rem);
            left: 0;
            font-size: 30px;
        }

    /*     .chart-two figcaption:after {
            display: inline-block;
            content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
            white-space: pre;
            font-size: 2.5rem;
            line-height: 2.5rem;
        }*/

    @-webkit-keyframes chart-two-label {
        100% {
            transform: translateY(-125rem);
        }
    }

    @keyframes chart-two-label {
        100% {
            transform: translateY(-125rem);
        }
    }

    @-webkit-keyframes offset {
        100% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes offset {
        100% {
            stroke-dashoffset: 0;
        }
    }


    figure {
        margin: 1rem !important;
    }

    /*====BANNER TEST DE NIVEL====*/

    .banner_test_nivel {
        display: inline-block;
        width: 100%;
        min-height: 356px;
        background-color: #DCECEF;
        border-radius: 20px;
        background-image: url('../img/test_nivel_dele_banner.png');
        background-repeat: no-repeat;
        background-position: right center;
    }
.banner_test_nivel_dele {
    background-image: url('../img/examen_dele_test_nivel.png');
    background-color: #0B8EAB;
}


.banner_test_nivel span {
    margin-left: 60px;
}

.banner_test_nivel_dele span {
    margin-left: 30px;
}

.banner_test_nivel a {
    margin-left: 60px;
}

.banner_test_nivel_dele a {
    margin-left: 30px;
    background-color: #fff;
    color: #0B8EAB;
}

    .btn_test_ingles {
        background-color: #fff;
        color: #0B8EAB;
        margin-left: 10px !important;
    }

        .btn_test_ingles:hover {
            background-color: #0B8EAB;
            color: #fff;
        }

    @media (max-width: 992px) {
        .banner_test_nivel {
            background-size: 0px;
            border-radius: 0px;
            text-align: center;
        }

            .banner_test_nivel span {
                margin-left: 0px;
            }

            .banner_test_nivel a {
                margin-left: 0px;
                margin-bottom: 20px;
            }
    }

    @media (max-width: 521px) {
        .btn_test_ingles {
            margin-left: 0px !important;
            margin-bottom: 20px;
        }
    }

