/* ====================media queeries================== */
@media screen and (min-width: 1201px){
    html{
        font-size: 62.5%;
    }
}

@media screen and (max-width: 1200px) and (min-width: 993px){
    html{
        font-size: 60%;
    }
}

@media screen and (max-width: 992px) and (min-width: 769px){
    html{
        font-size: 55%;
    }
    .modal-dialog{
        width: 100%;
    }
}

@media screen and (max-width: 768px) and (min-width: 577px){
    html{
        font-size: 50%;
    }
    .navbar-nav{
        padding: 1rem 0;
        border-top: .1rem solid rgba(255, 255, 255, 0.26);
    }
    .brand-logo a{
        font-size: 4rem;
    }
    .modal-dialog{
        width: 100%;
        
    }
}


@media screen and (max-width: 576px) and (min-width: 321px){
    html{
        font-size: 45%;
    }
    .brand-logo a{
        font-size: 3.5rem;
    }
    .navbar-nav{
        padding: 1rem 0;
        border-top: .1rem solid rgba(255, 255, 255, 0.26);
    }
}

@media screen and (max-width: 320px) and (min-width: 291px){
    html{
        font-size: 40%;
    }
    .brand-logo a{
        font-size: 2.5rem;
    }
    .navbar-nav{
        padding: 1rem 0;
        border-top: .1rem solid rgba(255, 255, 255, 0.26);
    }
}


@media screen and (max-width: 290px){
    html{
        font-size: 32%;
    }
    .brand-logo a{
        font-size: 3rem;
    }
    .navbar-nav{
        padding: 1rem 0;
        border-top: .1rem solid rgba(255, 255, 255, 0.26);
    }
}