@font-face {
    font-family: "GeneralFont";
    src: url("../fonts/Mulish-VariableFont_wght.ttf");
}

@font-face {
    font-family: "ItalicFont";
    src: url("../fonts/Mulish-Italic-VariableFont_wght.ttf");
}

@font-face {
    font-family: "ScriptFont";
    src: url("../fonts/FRESH\ LYCHEE.OTF");
}

    body {
        background: #fff;
        font-family: "GeneralFont";
        font-weight: 300;
        font-size: 16px;
        line-height: 22px;
        color: #000;
    }

    html {
        height: 100%;
    }

    .whatsApp_icon{
        width: 5%;
        height: 10%;
        position: fixed;
        right: 7px;
        bottom: 11px;
        z-index: 4;
    }

    nav{
        font-family: "GeneralFont";
        font-size: 15px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: "ItalicFont";
        font-weight: bold;
    }

    h1{
        font-size: 2em;
        color: #000;
    }

    h2{
        font-size: 1.5em;
        color: #000;
    }

    h3{
        font-size: 1.17em;
        color: #000;
    }

    h4{
        font-size: 1em;
        color: #000;
    }

    h5{
        font-size: .83em;
        color: #000;
    }

    h6{
        font-size: .67em;
        color: #000;
    }

    h1.success{
        margin-top: 5%;
        font-weight: bold;
        font-size: 2em;
        color: #fff;
    }

    h1.success-key{
        margin-top: 5%;
        font-weight: bold;
        font-size: 2em;
        color: #686868;
    }

    h1.success-key-team{
        font-weight: bold;
        font-size: 2em;
        color: #686868;
    }

    h1.course{
        font-weight: bold;
        font-size: 2.5em;
        color: #000;
    }

    h2.faqs{
        font-family: "GeneralFont";
        font-size: 1.5em;
    }

    h3.margin{
        margin-top: 16%;
        margin-bottom: 16%;
    }

    p{
        font-size: 1.17em;
        color: #686868;
    }

    p.italic{
        font-family: "ItalicFont";
        font-weight: bold;  
    }

    p b{
        font-weight: bold;
    }

    b.pink{
        color: #EC008C;
        font-family: "ScriptFont";
        font-size: 1.3em;
    }

    label{
        font-family: "GeneralFont";
        font-size: 18px;
        color: #686868;
    }

    .logo{
        margin-top: 5%;
        margin-left: 4%;
    }

    .btn-common {
        font-size: 14px;
        color: #0596db;
        border: 1px solid #0596db;
        border-radius: 20px;
        font-family: "GeneralFont";
        font-weight: bold;
        padding: 10px 25px;
    }

    .btn-level {
        margin: 3%;
        width: auto;
        font-size: 1.4em;
        color: #0596db;
        border: 1px solid #0596db;
        border-radius: 50px;
        font-family: "ItalicFont";
        font-weight: bold;
        padding: 5px 25px;
        box-shadow: #000;
    }

    .btn-level:hover {
        background-color: #1d71b8;
        color: #fff;
        border: 1px solid #1d71b8;
    }

    .btn-common:hover,
    .btn-common:focus {
        font-size: 14px;
        background-color: #1d71b8;
        color: #fff;
        border: 1px solid #1d71b8;
        border-radius: 20px;
        font-family: "GeneralFont";
        font-weight: bold;
        padding: 10px 25px;
    }

    .flecha{
        width: 22px;
    }

    /*************************************/
    /************* SHAPES *************/
    /*************************************/
    .gradient{
        position: absolute;
        width: 20%;
        height:110%;
    }

    .gradient.top-left{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        top: 0;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.top-left.blue{  
        background: -webkit-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
    }

    .gradient.top-left.orange{
        background: -webkit-radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        opacity: .38;
    }

    .gradient.top-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 0;
        left:76%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-top-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 0;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-top-right.red{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        opacity: .38;
        top: 0;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-top-left.red{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #BE1622, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #BE1622, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #BE1622, #FFFFFF);
        opacity: .38;
        top: 80%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.italian-top-left.orange{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #F7931E, #FFFFFF);
        opacity: .38;
        top: 80%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.portuguese-top-left.blue{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 80%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.englishjuniors-top-right.purple{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #672583, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #672583, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #672583, #FFFFFF);
        opacity: .38;
        top: 0;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.englishjuniors-left.purple{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #672583, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #672583, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #672583, #FFFFFF);
        opacity: .38;
        top: 114%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-left.red{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #BE1622, #FFFFFF);
        opacity: .38;
        top: 0;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.italian-top-right.orange{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        opacity: .38;
        top: 0;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.section-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 140%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.middle-section.blue{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 500%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-section.blue{
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background: -webkit-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(left, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 70%;
        left:0;
        right: 100%;
        bottom: 0;
        margin: auto;
        z-index: 0;
    }

    .gradient.middle-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 770%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.end-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 1300%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.english-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 570%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.french-right.blue{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #009FE3, #FFFFFF);
        opacity: .38;
        top: 500%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient.end-right.orange{
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        background: -webkit-radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        background: -moz-radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        background: radial-gradient(right, 100% 40%, #F7931E, #FFFFFF);
        opacity: .38;
        top: 680%;
        left:80%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .gradient-blue-right{
        background-image: url("../images/home/GRADIENT_BLUE_RIGHT.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .gradient-orange-right{
        background-image: url("../images/home/GRADIENT_ORANGE_RIGHT.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .gradient-blue-left{
        background-image: url("../images/home/GRADIENT_BLUE_LEFT.png");
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .gradient-pink-right{
        background-image: url("../images/home/GRADIENT_PINK_RIGHT.png");
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /*************************************/
    /************* EXTRAS *************/
    /*************************************/
    .position-top-image{
        position: absolute;
        top: 5%;
        right: -12%;
        content: url("../images/home/recurso_flecha.png");
    }
    .position-bottom-image{
        position: absolute;
        left: -8%;
        bottom: 0%;
        content: url("../images/home/recurso_flecha.png");
    }


    /*************************************/
    /************* ANIMATION *************/
    /*************************************/
    div.slide-text{
        margin-top: 5%;
        margin-bottom: 5%;
    }

    div.slide-text h1, div.slide-text p, div.slide-text a{
        opacity: 0;
        animation-name: textslider;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    @keyframes textslider{
        from{margin-left:0%;opacity: 0;}
        to{margin-left: 19%;opacity: 1;}
    }


    .sticky-menu{
        background-color: #FFF;
    }

    /*************************************/
    /************* HOME PAGE *************/
    /*************************************/
    .liston{
        position: absolute;
        width: 20%;
        height:52%;
        border-bottom-right-radius: 35%;
        background: -webkit-linear-gradient(left,#0071BC, #009FE3);
        background: -moz-linear-gradient(left, #0071BC, #009FE3);
        background: linear-gradient(left, #0071BC, #009FE3);
        top: 0;
        left:75%;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .figura-introduction{
        position: absolute;
        width: 60%;
        height:70%;
        border-top-right-radius: 35%;
        background: -webkit-linear-gradient(bottom,#0071BC, #009FE3);
        background: -moz-linear-gradient(bottom, #0071BC, #009FE3);
        background: linear-gradient(bottom, #0071BC, #009FE3);
        top: 10%;
        left:0;
        right: 100%;
        bottom: 0;
        z-index: -1;
    }

    #metodo{
        background-image: url("../images/home/coming-soon-bg.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .img-metodo{
        width: 70%;
    }

    .list-success{
        list-style: none;
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }
    
    .list-success .item{
        margin-top: 7%;
    }
    
    div.margin{
        margin-left: 10%;
    }

    .figura{
        position: absolute;
        width: 62%;
        height:68%;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        background: -webkit-linear-gradient(#1d71b8, #0596db);
        background: -moz-linear-gradient(#1d71b8, #0596db);
        background: -o-linear-gradient(#1d71b8, #0596db);
        top: 0;
        left: 38%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    /************** SLIDER ***************/
    .card-slider{
        width: 22rem;
        height: 34rem;
        background-color: #EDEDED;
        border: none;
        border-radius: 25px;
    }

    .card-body > img{
        width: 100%;
    }
    

    .btn-card{
        width: 95%;
        font-size: 14px;
        background-color: #1d71b8;
        color: #FFF;
        border: 1px solid #1d71b8;
        border-radius: 20px;
        font-family: "GeneralFont";
        font-weight: bold;
        padding: 10px 25px;
    }

    .btn-card:hover{
        font-size: 15px;
        color: #FFF;
    }

    /*************************************/
    /************** ABOUT US *************/
    /*************************************/
    #header_about{
        background-image: url("../images/who/recurso_header.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .figura-about{
        position: absolute;
        width: 77%;
        height:59%;
    }
    
    .figura-about.right{
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        background: -webkit-linear-gradient(right, #FBD9ED, #FDEEDE);
        background: -moz-linear-gradient(right, #FBD9ED, #FDEEDE);
        background: -o-linear-gradient(right, #FBD9ED, #FDEEDE);
        top: 14.5%;
        left: 23%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }
    
    .figura-about.left{
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        background: -webkit-linear-gradient(right, #FBD9ED, #FDEEDE);
        background: -moz-linear-gradient(right, #FBD9ED, #FDEEDE);
        background: -o-linear-gradient(right, #FBD9ED, #FDEEDE);
        top: 14.5%;
        left: 0;
        right: 50%;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    #valores{
        background-image: url("../images/who/valores_background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about{
        background-image: url("../images/home/GRADIENT_ORANGE_RIGHT.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /************************************/
    /************** ENGLISH *************/
    /************************************/
    #english{
        background-image: url("../images/courses/recurso_english_header.png");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .base-position-9{
        width: 80vw;
        position: absolute;
        bottom: -10px;
    }

    img.position-img{
        position: relative;
        z-index: 0;
    }

    #slidetext_header{
        position: relative;
    }

    #header_text{
        position: absolute;
    }

    .position-container{
        position: relative;
    }
    
    img.chart{
        margin-top: 110%;
        width: 110%;
        cursor: pointer;
    }

    img.tarjeta{
        width: 450%;
    }

    img.small-card{
        width: 220%;
    }

    .position-card-right{ 
        position: absolute;
        bottom: -4rem; 
        left: 1.7rem; 
        right: 0;
        margin: auto; 
        width: 0; 
        transition: .5s ease; 
        z-index: 1; 
    }

    .position-card-left{ 
        position: absolute; 
        bottom: -4rem; 
        right: 24rem;
        margin: auto; 
        width: 0; 
        transition: .5s ease; 
        z-index: 1; 
    }

    .position-container:hover .position-card-right {
        width: 100%;
      }

      .position-container:hover .position-card-left {
        width: 100%;
      }

    .list-english{
        font-family: "GeneralFont";
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        display: inline-block;
    }
    
    .list-english.borde{
        border-left: 2px dashed;
        border-color: #BDBFC0;
    }

    .list-english li.blue::marker{
        color: #009BDC;
    }

    .list-english li.orange::marker{
        color: #E4811D;
    }

    .list-english li.green::marker{
        color: #80B23F;
    }

    .list-english li.purple::marker{
        color: #662D80;
    }


    /***********************************/
    /************** FRENCH *************/
    /***********************************/

    #french{
        background-image: url("../images/courses/recurso_french_header.png");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .base-position-5{
        width: 50vw;
        position: absolute;
        bottom: -10px;
    }

    
    img.frenchchart{
        width: 120%;
        margin-top: 80%;
        cursor: pointer;
    }

    .figura-french{
        position: absolute;
        width: 60%;
        height:60%;
        border-top-right-radius: 35%;
        border-bottom-right-radius: 35%;
        background: -webkit-linear-gradient(top left,#5E1B0B, #C72B2E, #5E1B0B);
        background: -moz-linear-gradient(top left, #5E1B0B, #C72B2E, #5E1B0B);
        background: linear-gradient(top left, #5E1B0B, #C72B2E, #5E1B0B);
        top: 7%;
        left:0;
        right: 100%;
        bottom: 0;
        z-index: -1;
    }

    div.fill{
        background: #AB1E2D;
    }

    div.fill p{
        font-family: "ItalicFont";
        font-size: 23px;
        font-weight: bold;
        color: #FFF;
        text-align: center;
    }
    
    b.red{
        font-weight: bold;
        color: #AB1E2D;
    }

    .list-french{
        font-family: "GeneralFont";
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }

    .list-french li::marker{
        color: #0ED2DB;
    }

    .french-method{
        font-family: "GeneralFont";
        font-size: 18px;
        text-align: left;
        color: #686868;
    }

    .french-method li::marker{
        color: #AB1E2D;
    }

    .metodo-margin{
        margin-top: 11%;
    }

    .div-rounded{
        border: 2px solid #0ED2DB;
        border-radius: 20px;
    }

    .div-rounded b{
        color: #0ED2DB;
    }

    /************************************/
    /************* ITALIAN **************/
    /************************************/
    #italian{
        background-image: url("../images/courses/recurso_italian_header.png");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .base-position-6{
        width: 60vw;
        position: absolute;
        bottom: -10px;
    }

    img.italianchart{
        width: 114%;
        margin-top: 115%;
        cursor: pointer;
    }

    .figura-italian{
        position: absolute;
        width: 60%;
        height:60%;
        border-top-right-radius: 35%;
        border-bottom-right-radius: 35%;
        background: -webkit-linear-gradient(top left,#005306, #008944, #005306);
        background: -moz-linear-gradient(top left, #005306, #008944, #005306);
        background: linear-gradient(top left, #005306, #008944, #005306);
        top: 7%;
        left:0;
        right: 100%;
        bottom: 0;
        z-index: -1;
    }

    /************************************/
    /************ PORTUGUESE ************/
    /************************************/
    #portuguese{
        background-image: url("../images/courses/recurso_portuguese_header.png");
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    img.portuguesechart{
        width: 120%;
        margin-top: 80%;
        cursor: pointer;
    }

    .figura-portuguese{
        position: absolute;
        width: 60%;
        height:60%;
        border-top-right-radius: 35%;
        border-bottom-right-radius: 35%;
        background: -webkit-linear-gradient(top left,#005306, #008944, #005306);
        background: -moz-linear-gradient(top left, #005306, #008944, #005306);
        background: linear-gradient(top left, #005306, #008944, #005306);
        top: 7%;
        left:0;
        right: 100%;
        bottom: 0;
        z-index: -1;
    }

    /************************************/
    /********* ENGLISH JUNIORS **********/
    /************************************/
    .figura-englishjunior-header{
        position: absolute;
        width: 62%;
        height:55%;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        background: -webkit-linear-gradient(bottom right, #672583, #FC36AB);
        background: -moz-linear-gradient(bottom right, #672583, #FC36AB);
        background: -o-linear-gradient(bottom right, #672583, #FC36AB);
        box-shadow:  0 8px 8px 0 rgba(0, 0, 0, 0.2);
        top: 45%;
        left: 38%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 1;
    }

    .base-position-2{
        position: absolute;
        width: 40vw;
        margin-top: 5px;
    }

    .englishjuniors_img{
        z-index: 3;
    }

    #funny_background_englishjuniors{
        background-image: url("../images/courses/funny_background.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: -1;
    }

    img.englishjuniorschart{
        width: 100%;
        margin-top: 10%;
        cursor: pointer;
    }

    .figura-englishjunior-text{
        width: 34vw;
        height:100%;
        border-bottom-right-radius: 100px;
        background: -webkit-linear-gradient(bottom left, #672583, #FC36AB);
        background: -moz-linear-gradient(bottom left, #672583, #FC36AB);
        background: -o-linear-gradient(bottom left, #672583, #FC36AB);
        box-shadow:  0 8px 8px 0 rgba(0, 0, 0, 0.2);
        top: 45%;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    /************************************/
    /*************** LEVEL **************/
    /************************************/
    .figura-level{
        position: absolute;
        width: 62%;
        height:55%;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        background: -webkit-linear-gradient(bottom, #1d71b8, #0596db);
        background: -moz-linear-gradient(bottom, #1d71b8, #0596db);
        background: -o-linear-gradient(bottom, #1d71b8, #0596db);
        box-shadow:  0 8px 8px 0 rgba(0, 0, 0, 0.2);
        top: 50%;
        left: 38%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }

    .level-figura{
        position: absolute;
        width: 80%;
        height: 55%;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
        background: -webkit-linear-gradient(bottom, #1d71b8, #0596db);
        background: -moz-linear-gradient(bottom, #1d71b8, #0596db);
        background: -o-linear-gradient(bottom, #1d71b8, #0596db);
        box-shadow:  0 8px 8px 0 rgba(0, 0, 0, 0.2);
        top: 58%;
        left: 0%;
        right: 100%;
        bottom: 0%;
        margin: auto;
        z-index: -1;
    }

    b.text-blue{
        color: #009FE3;
    }

    /*************************************/
    /**************** FAQS ***************/
    /*************************************/
    #header_faqs{
        background-image: url("../images/img/background_header.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .figura-faqs{
        position: absolute;
        width: 60%;
        height:60%;
        border-top-right-radius: 35%;
        background: -webkit-linear-gradient(bottom,#0071BC, #009FE3);
        background: -moz-linear-gradient(bottom, #0071BC, #009FE3);
        background: linear-gradient(bottom, #0071BC, #009FE3);
        top: 24%;
        left:0;
        right: 100%;
        bottom: 0;
        z-index: -1;
    }

    /*************************************/
    /**************** TEAM ***************/
    /*************************************/
    .figura-team-header{
        position: absolute;
        width: 62%;
        height:70%;
        border-top-left-radius: 35%;
        background: -webkit-linear-gradient(bottom,#0071BC, #009FE3);
        background: -moz-linear-gradient(bottom, #0071BC, #009FE3);
        background: linear-gradient(bottom, #0071BC, #009FE3);
        top: 20%;
        left: 40%;
        right: 0%;
        bottom: 0;
        z-index: -1;
    }

    div.asesor_academico p{
        display: none;
    }

    div.asesor_academico:hover p{
        display: block;
    }

    div.profesor_ingles p{
        display: none;
    }

    div.profesor_ingles:hover p{
        display: block;
    }

    div.profesor_frances p{
        display: none;
    }

    div.profesor_frances:hover p{
        display: block;
    }

    div.profesor_italiano p{
        display: none;
    }

    div.profesor_italiano:hover p{
        display: block;
    }

    div.profesor_portugues p{
        display: none;
    }

    div.profesor_portugues:hover p{
        display: block;
    }


    /*************************************/
    /*********** Privacy Policy **********/
    /*************************************/
    #header_policy{
        height: 22rem;
        background-image: url("../images/img/AVISO_PRIVACIDAD.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }


    /*************************************/
    /*************** FOOTER **************/
    /*************************************/
    footer{
        background-image: url("../images/home/footer.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #footer{
        margin-top: 8%;
        padding-top: 3%;
        padding-bottom: 1%;
    }

    footer a{
        text-decoration: none;
        font-family: "GeneralFont";
        font-size: 16px;
        color: #fff;
    }

    footer a:hover{
        text-decoration: none;
        font-family: "GeneralFont";
        font-size: 18px;
        color: #686868;
    }

    footer a img{
        margin-bottom: 1%;
    }



    @media (max-width: 576px) { 
        /*************************************/
        /************* ANIMATION *************/
        /*************************************/
        div.slide-text{
            margin-top: 1%;
            margin-bottom: 5%;
            text-align: center;
        }

        div.slide-text h1, div.slide-text p, div.slide-text a{
            opacity: 0;
            animation-name: textslider;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }

        @keyframes textslider{
            from{margin-top:0%;opacity: 0;}
            to{margin-top: 5%;opacity: 1;}
        }

        .liston{
            display: none;
        }

        .img-metodo{
            width: 40%;
        }

        div.margin{
            margin-left: 0;
        }

        .position-top-image{
            position: absolute;
            top: 5%;
            right: 0%;
            content: url("../images/home/recurso_flecha.png");
        }

        .btn-level {
            margin: 3%;
            width: 50%;
            font-size: 1.4em;
            color: #0596db;
            border: 1px solid #0596db;
            border-radius: 50px;
            font-family: "ItalicFont";
            font-weight: bold;
            padding: 5px 25px;
            box-shadow: #000;
        }

        #header_text{
            position: static;
        }
    }
    
    @media (max-width: 768px) {
        /*************************************/
        /************* ANIMATION *************/
        /*************************************/
        div.slide-text{
            margin-top: 1%;
            margin-bottom: 5%;
            text-align: center;
        }

        div.slide-text h1, div.slide-text p, div.slide-text a{
            opacity: 0;
            animation-name: textslider;
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }

        @keyframes textslider{
            from{margin-top:0%;opacity: 0;}
            to{margin-top: 5%;opacity: 1;}
        }

        .liston{
            display: none;
        }

        .img-metodo{
            width: 40%;
        }

        div.margin{
            margin-left: 0;
        }

        .position-top-image{
            position: absolute;
            top: 5%;
            right: 0%;
            content: url("../images/home/recurso_flecha.png");
        }

        .btn-level {
            margin: 3%;
            width: 70%;
            font-size: 1.4em;
            color: #0596db;
            border: 1px solid #0596db;
            border-radius: 50px;
            font-family: "ItalicFont";
            font-weight: bold;
            padding: 5px 25px;
            box-shadow: #000;
        }

        #header_text{
            position: static;
        
        }
    }