/* ======== Desktop [START] ======= */
html,
body{
    margin:0;font-family:Inter;
}
/* ======== Desktop [END] ======= */


/* ======== Desktop [START] ======= */
@media (max-width: 820px) {

    html,
    body {
        overflow-x: hidden;
    }
}
/* ======== Desktop [END] ======= */



/* ======== Desktop [START] ======= */

h1 {
    font-size: 42px;
    line-height: 46px;
    color: #405280;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h2 {
    font-size: 34px;
    line-height: 40px;
    color: #405280;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

h3 {
    font-size: 18px;
    color: #636262;
    font-weight: 300;
    line-height: 24px;
}

p {
    font-size: 18px;
    line-height: 20px;
    color: #405280;
    font-family: "Newsreader", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

.negrita {
    font-size: 500;
}
/* ======== Desktop [END] ======= */


/* ======== Mobile OVERLAY IPAD PORTRAIT [START] ======= */
@media (min-width: 769px) and (max-width: 821px) {
    h1 {
        font-size: 36px;
        line-height: 40px;
    }

    h2 {
        font-size: 28px;
        line-height: ;

    }

    h3 {
        font-size: 16px;
        line-height: 18px;
        background: rgba(255, 255, 255, 0.5);
        padding: 8px;

    }

}

/* ======== Mobile [END] ======= */



/* ======== Mobile [START] ======= */
    @media (max-width: 768px) {
        h1 {
            font-size: 30px;
            line-height: 34px;
            color: #405280;
            font-family: "Space Grotesk", sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            font-style: normal;
        }

        h2 {
            font-size: 18px; /* 34px*/ 
            line-height: 20px;
            color: #405280;
            font-family: "Space Grotesk", sans-serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
        }

        h3 {
            font-size: 12px; /* 18px*/
            line-height: 16px;
            color: #636262;
            font-weight: 300;
            background: rgba(255, 255, 255, 0.5);
            padding: 8px;
        }

        p {
            font-size: 10px; /* 18px*/
            line-height: 20px;
            color: #405280;
            font-family: "Newsreader", serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-weight: 400;
        }

        .negrita {
            font-size: 500;
        }
    }
/* ======== Mobile [END] ======= */


.intro_end_box {
    background:#fff;
    padding:20px
}

@media (max-width: 820px) {
    .intro_end_box {
        width: 85%; /* NEW! */
        background:rgba(255, 255, 255, 0.8);
        padding:0px 15px;
        pointer-events: auto; /* NEW! */
        border: 0.5px solid rgba(255, 255, 255, 0.2); /* #A9A6A6 */
        border-radius: 0.5rem;
    }


}






/* ======== SCROLL [START] ======= */

    /* ======== Desktop 2 COLUMNS [START] ======= */
    #scrolly__section{
        display:flex 
    }

    .scrolly__content{
        width:35%;
        padding: 50px;
    }

    .step{
        height:100dvh; 
        display:flex;
        justify-content:center;
        align-items:center;

    }

    .text-block{
        background:#fff;
        padding:20px
    }

    .scrolly__chart{
        position:sticky;
        top:0;
        width:65%;
        height:100dvh;
        background:#eceff1
    }    
    /* ======== Desktop 2 COLUMNS [END] ======= */


    /* ======== Mobile 2 COLUMNS IPAD LANDSCAPE [START] ======= */
    @media (min-width: 821px) and (max-width: 1180px) {

        .scrolly__content{
            width:45%;
            padding: 10px;
        }

        .text-block{
            background:#fff;
            padding:20px
        }

        .scrolly__chart{
            position:sticky;
            top:0;
            width:55%;
            height:100dvh;
            background:#eceff1
        }     

    }   
    /* ======== Mobile 2 COLUMNS IPAD LANDSCAPE [END] ======= */



    /* ======== Mobile OVERLAY IPAD PORTRAIT [START] ======= */

    @media (max-width: 820px) {

        #scrolly__section{
            position:relative; /* display:flex */
        }

        .scrolly__content{
            position:relative; /* NEW! */
            z-index: 10; /* NEW! */
            width:100%; /* 35% */
            pointer-events: none; /* NEW! */
        /*    padding: 50px;*/
        }

        .step{
            height:100dvh;
            display:flex;
            justify-content:center;
            align-items:center;

        }

        .text-block{
            width: 85%; /* NEW! */
            background:rgba(255, 255, 255, 0); /* transp 0.2 */
            padding:0px 15px;
            pointer-events: auto; /* NEW! */
            border: 0.5px solid rgba(255, 255, 255, 0); /* #A9A6A6 */
            border-radius: 0.5rem;

        }

        .scrolly__chart{
            position:fixed; /* sticky */
            top:0;
            width:100%; /* 65% */
            height:100dvh;
            background:#eceff1;
            z-index:0; /* NEW! */
        }

    }

    /* ======== Mobile OVERLAY IPAD PORTRAIT [END] ======= */





/* ======== SCROLL [END] ======= */




.title_intro {
    background-color: #405280;
    
    color: white;
    padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
}

/*.title_goals {
    background-color: #D1343E;
    
    color: white;
    
    width: 90%;
    padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
}*/
.title_goals {
    
}

.box_red {
    background-color: #D1343E;
    
    color: white;
    
    width: 100%;
    padding: 2px 10px;
    text-align: left;
    box-sizing: border-box;
}

.box_white {
    background-color: #fff;
    
    
    
    width: 100%;
    padding: 2px 10px;
    text-align: left;
    box-sizing: border-box;
}



.box_grey {
    background-color: #A9A6A6;
    
    color: white;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;
}

.box_grey_mid {
    font-family: "Space Grotesk", sans-serif;
    background-color: #A9A6A6;
    font-size: 22px;
    font-weight: 600px;  
    
    color: white;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .box_grey_mid {
        font-family: "Space Grotesk", sans-serif;
        background-color: #A9A6A6;
        font-size: 14px;
        font-weight: 500px;  
        
        color: white;
        
        width: 100%;
        padding: 0px 10px;
        text-align: left;
        box-sizing: border-box;
    }
}

/*.title_assist {
    background-color: #F9D348;
    
    
    width: 60%;
    padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
}*/
.title_assist {
    
}

.box_yellow {
    background-color: #F9D348;
    
    color: black;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;
}

.box_dark {
    background-color: #636262;
    
    color: white;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;
}

/*.sub_title_for_goaler {
    background-color: #405280;
    font-size: 18px;
    color: white;
    font-weight: 300;
    width: 50%;
    padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
}*/

.sub_title_for_goaler {
    
}

.box_blue_mid {
    font-family: "Space Grotesk", sans-serif;
    background-color: #405280;
    font-size: 22px;
    font-weight: 500px;    
    color: white;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;

           
}

 @media (max-width: 768px) {

    .box_blue_mid {
        font-family: "Space Grotesk", sans-serif;
        background-color: #405280;
        font-size: 14px;
        font-weight: 500px;    
        color: white;
        
        width: 100%;
        padding: 0px 10px;
        text-align: left;
        box-sizing: border-box;


    }

}





/*.sub_title_unassisted {
    background-color: #A9A6A6;
    font-size: 18px;
    color: white;
    font-weight: 300;
    width: 50%;
    padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
}*/

.sub_title_unassisted {
    
}

.test_active {
    opacity:0.2;
}


#creditsCover {
    color: black;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 13px;
    margin-bottom: 30px;
}

@media (max-width:768px) {
    #creditsCover {
    color: black;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-size: 12px;
    margin-bottom: 30px;
}
}

#introCover {
    color: #262626;
    text-align: left;
    font-family: "Newsreader", serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 30px;
}

@media (max-width:768px) {
    #introCover {
    color: #262626;
    text-align: left;
    font-family: "Newsreader", serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 30px;
}
}

.img_fun_1 {
    width:50px;
    height: 50px;
    margin-bottom: 24px;

}

@media (max-width: 768px) {

    .img_fun_1 {
        width:25px;
        height: 25px;
        margin-top: 0px;
        margin-bottom: 3px;
    }

}

.img_bar_chart_hor {
    width:350px;
    height: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.3);
    padding: 8px;
    
}

 @media (max-width: 768px) {

    .img_bar_chart_hor {
        width:250px;
        height: auto;
        margin-top: 3px;
        margin-bottom: 3px;
        background: rgba(255, 255, 255, 0.3);
        padding: 8px;
    }

}

 @media (max-width: 430px) {

    .img_bar_chart_hor {
        width:240px;
        height: auto;
/*        display:none;*/
    }

}

.img_bar_chart_matrix_hor {
    width:350px;
    height: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.3);
    padding: 8px;
    
}

 @media (max-width: 768px) {

    .img_bar_chart_matrix_hor {
        width:250px;
        height: auto;
        margin-top: 3px;
        margin-bottom: 3px;
        background: rgba(255, 255, 255, 0.3);
        padding: 8px;
    }

}

 @media (max-width: 430px) {

    .img_bar_chart_matrix_hor {
       /* width:170px;
        height: auto;*/
        display:none;
    }

}

.title_chart {
    font-family: Inter;
    font-size: 14px;
    color: #636262;
}