@media only screen and (max-width: 645px) 
{
    
    header{
        height: var(--header_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
    }

    
    header{
        height: var(--header_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
    }
    
    nav a{
        width:100%;
    }
    nav img{
        height:100%;
        width: auto;
    }
    .menu-div{
        float:right;
        display: block;
    }
    .menu-div i{
        font-size: 60px;
    }
    #menu{
        display: none;
    }
}

/**
 *  This is for tablets
**/
@media only screen and (max-width: 575px) 
{
    html{
        min-height: 100%;
        width:100%;
        padding:0;
        margin:0;
    }
    
    body{
        min-height: 100vh;
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--main_bg_color);
        color: var(--main_text_color);
    }
    
    header{
        height: var(--header_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
    }

    aside{
        display: none;
    }

    
    main{
        min-height: calc(100vh - var(--header_height) - var(--footer_height));
        width:100%;
        float:left;
    }
    
    aside{
        min-height: calc(100vh - var(--header_height) - var(--footer_height));
        width:100%;
        background-color: var(--main_accent_color);
        float:left;
    }
    
    footer{
        height: var(--footer_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
        float:left;
    }
    

    
    header{
        height: var(--header_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
    }
    

    .card{
        width: 100% !important;
    }

    nav a{
        width:100%;
    }
    nav img{
        height:100%;
        width: auto;
    }
    .menu-div{
        float:right;
        display: block;
    }
    .menu-div i{
        font-size: 60px;
    }
    #menu{
        display: none;
    }
    
    footer .col-4{
        width: 100%;
    }

    footer{
        height: fit-content;
        text-align: center;
    }
}



/* @media only screen and (min-width: 401px) 
{
    #menu{
        display: block;
    }
} */
/**
 *  This is for phones
**/
@media only screen and (max-width: 400px) 
{
    html{
        min-height: 100%;
        width:100%;
        padding:0;
        margin:0;
    }

    body{
        min-height: 100vh;
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--main_bg_color);
        color: var(--main_text_color);
    }

    header{
        height: var(--header_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
    }

    main{
        min-height: calc(100vh - var(--header_height) - var(--footer_height));
        width:100%;
        float:left;
    }

    aside{
        display: none;
    }

    footer{
        height: var(--footer_height);
        width:100%;    
        padding:0;
        margin:0;
        background-color: var(--light_bg_color);
        color: var(--text_on_light_color);
        float:left;
    }
    

    .card{
        width: 100% !important;
    }

    nav a{
        width:100%;
    }
    nav img{
        height:100%;
        width: auto;
    }

    .card{
        width:100% !important;
    }

    .col-6{
        width:100% !important;
    }
    .col-4.d-flex.align-items-stretch{
        width:100% !important;
    }
    i.fas{
        display: none;
    }

    .big-card-number h3{
        width:100%;
        text-align: center;
    }

    .team-row{
        width:100%;
        margin:none;
    }

    footer .col-4{
        width: 100%;
    }

    footer{
        height: fit-content;
        text-align: center;
    }
    .partner-card-base{
        width:100% !important;
        text-align: center !important;
    }
    .card-text-align-right p,.card-text-align-right h2,.card-text-align-right h6,
    .card-text-align-left p,.card-text-align-left h2,.card-text-align-left h6{
        width:100% !important;
        text-align: center !important;
    }
    .partner-min{
        display: block;
    }
    .partner-max{
        display: none;
    }
    .menu-div{
        float:right;
        display: block;
    }
    .menu-div i{
        font-size: 60px;
    }
    #menu{
        display: none;
    }

    .row{
        margin:0 auto !important;
    }
}