@media only screen and (min-width: 1900px) {
    .hb {
        font-size: 18px;
    }

    .hb-1 {
        font-size: 25px;
    }

    .git {
        font-size: 90px;
    }

    .git2 {
        font-size: 30px;
    }

    .t1 {
        font-size: 130px;
        font-weight: 400;
    }

    .t2 {
        font-size: 110px;
        font-weight: 400;
    }

    .t3 {
        font-size: 50px;
    }

    .vf {
        width: 180px;
    }

    .imgp {
        max-height: 90%;

    }

    .BZ {
        position: absolute;
        left: 50%;
        bottom: 5%;
    }

    .tpc {
        position: absolute;
        top: 20%;
        left: 8%;

    }
    
}



/* ----------------------------- M a x  W i d t h ----------------------------- */


@media only screen and (max-width: 1900px) {
    .hb {
        font-size: 15px;
    }

    .hb-1 {
        font-size: 20px;
    }

    .git {
        font-size: 80px;
    }

    .git2 {
        font-size: 25px;
    }

    .t1 {
        font-size: 110px;
        font-weight: 400;
    }

    .t2 {
        font-size: 80px;
        font-weight: 400;
    }

    .t3 {
        font-size: 40px;
    }

    .jv {
        width: 150px
    }

    .vf {
        width: 150px;
    }

    .imgp {
        max-height: 80%;

    }

    .BZ {
        position: absolute;
        left: 50%;
        bottom: 5%;
    }
    .tpc {
        position: absolute;
        top: 20%;
        right: 8%;

    }

    .main {
        background-image: url("../images/HB-bannerL.webp");
        background-size: cover;
        overflow: hidden;
    }

    
}

@media only screen and (max-width: 1400px) {
    .hb {
        font-size: 10px;
    }

    .hb-1 {
        font-size: 15px;
    }

    .git {
        font-size: 60px;
    }

    .t1 {
        font-size: 90px;
        font-weight: 400;
    }

    .t2 {
        font-size: 70px;
        font-weight: 400;
    }

    .t3 {
        font-size: 35px;
    }

    .jv {
        width: 120px;
    }

    .vf {
        width: 100px;
    }

    .imgp {
        max-height: 70%;

    }
    .tpc {
        position: absolute;
        top: 20%;
        right: 8%;

    }
    .main {
        background-image: url("../images/HB-bannerL.webp");
        background-size: cover;
        overflow: hidden;
    }
    
}

@media only screen and (max-width: 1200px) {
    .hb {
        font-size: 15px;
    }

    .hb-1 {
        font-size: 20px;
    }

    .t1 {
        font-size: 80px;
        font-weight: 400;
    }

    .t2 {
        font-size: 60px;
        font-weight: 400;
    }

    .t3 {
        font-size: 30px;
    }

    .git {
        font-size: 60px;
    }

    .git2 {
        font-size: 20px;
    }

    .jv {
        width: 150px;
    }

    .vf {
        width: 100px;
    }

    .imgp {
        max-height: 60%;

    }
    .tpc {
        position: absolute;
        top: 20%;
        right: 8%;

    }
}

@media only screen and (max-width: 992px) {
    .hb {
        font-size: 15px;

    }

    .hb-1 {
        font-size: 20px;

    }

    .t1 {
        font-size: 55px;
        font-weight: 400;

    }

    .t2 {
        font-size: 45px;
        font-weight: 400;
    }

    .t3 {
        font-size: 20px;
    }

    .git {
        font-size: 50px;
    }

    .vf { 
        width: 100px;
    }

    .imgp {
        max-height: 50%;

    }
    .tpc {
        position: absolute;
        top: 38%;
        right: 8%;

        /*text-shadow: 0px 0px 15px black;*/
    }
    .main {
        background-image: url("../images/HB-banner-sm.webp");
        background-size: cover;
        overflow: hidden;
    }

    .mb2{
        margin-bottom: 30px;
    }
    
    .mt2{
        margin-top: 20px;
    }

    .mbnull{
        margin-bottom: 5px;
    }


}

@media only screen and (max-width: 400px) {
    .t1 {
        font-size: 40px;
        font-weight: 400;
    }

    .t2 {
        font-size: 35px;
        font-weight: 400;
    }

    .t3 {
        font-size: 15px;
    }

    .imgp {
        max-height: 40%;

    }

    .git {
        font-size: 30px;
    }

    .git2 {
        font-size: 15px;
    }

    .ro {
        height: 20px;
    }
    
}

@media only screen and (max-width: 320px) {
    .t1 {
        font-size: 30px;
        font-weight: 400;
    }

    .t2 {
        font-size: 30px;
        font-weight: 400;
    }

    .t3 {
        font-size: 13px;
    }

    .imgp {
        max-height: 30%;

    }


}

@media only screen and (max-width: 266px) {
    .imgp {
        max-height: 25%;

    }

    .git {
        font-size: 25px;
    }

    .git2 {
        font-size: 13px;
    }
}