@media only screen and (min-width:1000px) and (max-width:1200px){ 
 :root {
        --font-size-83:60px;
        --font-size-30:26px;
        --font-size-25:22px;
    }

}
@media only screen and (min-width:768px) and (max-width:999px){
 .nav-item + .nav-item {margin-left:0;}
    .navbar-toggler{margin-left:20px;}
    :root {
        --font-size-83:50px;
        --font-size-30:18px;
        --font-size-25:14px;
        --font-size-27:22px;
    }
    .banner .bannercontent{top:10%;}
    .banner .bannertext{padding-top: 5px;} 
    .banner .bannertext h1, .banner .bannertext p{margin-bottom: 5px;}
    .banner .bannertext a{padding: 5px;}
 
} 

@media only screen and (min-width:480px) and (max-width:767px){ 
 .nav-item + .nav-item {margin-left:0;}
    .navbar-toggler{margin-left:20px;}
    :root {
        --font-size-83:30px;
        --font-size-30:18px;
        --font-size-25:14px;
        --font-size-27:22px;
    }
    .banner .bannercontent{top:10%;}
    .banner .bannertext{padding-top: 5px;} 
    .banner .bannertext h1, .banner .bannertext p{margin-bottom: 5px;}
    .banner .bannertext a{padding: 5px;}
}

@media only screen and (max-width:479px){  
    .nav-item + .nav-item {margin-left:0;}
    .navbar-toggler{margin-left:20px;}
    :root {
        --font-size-83:16px;
        --font-size-30:14px;
        --font-size-25:13px;
        --font-size-48:30px;
        --font-size-27:22px;
        --font-size-21:18px;
    }
    .banner .bannercontent{top:5%;}
    .banner .bannertext{padding-top: 5px;}
    .banner .bannertext h1 span{display: inline-block;}
    .banner .bannertext h1, .banner .bannertext p{margin-bottom: 5px;}
    .banner .bannertext a{padding: 5px;}
}