html,
body{
    margin:0;font-family:Inter
}

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

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



#scrolly__section{
    display:flex
}

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



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

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

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

.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_grey {
    background-color: #A9A6A6;
    
    color: white;
    
    width: 100%;
    padding: 0px 10px;
    text-align: left;
    box-sizing: border-box;
}

.box_grey_mid {
    background-color: #A9A6A6;
    font-size: 22px;
    font-weight: 600px;  
    
    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 {
    background-color: #405280;
    font-size: 22px;
    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;
}

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

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

}

.img_bar_chart_hor {
    width:350px;
    height: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    
}

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