/* ----------------------------------------height */
.H25 {
    height: 25vh;
}
.H50 {
    height: 50vh;
}
.H75 {
    height: 75vh;
}
.H100 {
    height: 100vh;
}
/* width */
.W25 {
    width: 25%;
}
.W50 {
    width: 50%;
}
.W75 {
    width: 75%;
}
.W100 {
    width: 100%;
}
/* ------------------------------------------margin */
.MT10 {
    margin-top: 10%;
}
.ML25 {
    margin-left: 25%;
}
.ML50 {
    margin-left: 50%;
}
.ML75 {
    margin-left: 75%;
}
.ML100 {
    margin-left: 100%;
}

/* -----------------------------------------------padding */
.PT5 {
    padding-top: 5vh;
}
.PT10 {
    padding-top: 10%;
}

.Logo {
    position: relative;
    margin-left: 20vh;
    margin-top: 0vh;
}
.Logo .BrandImg {
    width: 15%;
}
.Footer{
  margin-top: 0vh;
}

@media screen and (min-width: 0px) and (max-width: 576px) {
  .Footer{
    margin-top: 35vh;
  }
    .MT5 {
        margin-top: 5vh;
    }
    .Logo {
        position: relative;
        margin-top: -4vh;
        padding: 7%;
    }
    .Logo img {
        position: absolute;
        width: 10vh;
        margin: -40%;
    }
    .nav {
        background-color: red;
    }
    .W50 {
        width: 100%;
    }
    .PT5 {
        padding-top: 15vh;
    }
    .PT10 {
        padding-top: 20%;
    }
    .MT10 {
        margin-top: 10%;
    }
    .MT10 {
        margin-top: 20%;
    }
    .ML25 {
        margin-left: 0%;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
  .Footer{
    margin-top: 0vh;
  }
    .nav {
        background-color: green;
    }
    .W50 {
        width: 90%;
    }
    .PT10 {
        padding-top: 20%;
    }
    .PT5 {
        padding-top: 15vh;
    }
    .MT10 {
        margin-top: 10%;
    }
    .ML25 {
        margin-left: 5%;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
  .Footer{
    margin-top: 20vh;
  }
    .nav {
        background-color: yellow;
    }
    .W50 {
        width: 80%;
    }
    .PT5 {
        padding-top: 15vh;
    }
    .PT10 {
        padding-top: 10%;
    }
    .MT10 {
        margin-top: 10%;
    }
    .ML25 {
        margin-left: 10%;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .Footer{
    margin-top: 0vh;
  }
    .nav {
        background-color: rgb(214, 0, 247);
    }
    .W50 {
        width: 60%;
    }
    .PT5 {
        padding-top: 10%;
    }
    .PT10 {
        padding-top: 10%;
    }
    .MT10 {
        margin-top: 5%;
    }
    .ML25 {
        margin-left: 20%;
    }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .Footer{
    margin-top: 0vh;
  }
    .nav {
        background-color: rgb(59, 6, 231);
    }
    .W50 {
        width: 50%;
    }
    .PT10 {
        padding-top: 10%;
    }
    .MT10 {
        margin-top: 5%;
    }
}
@media (min-width: 1400px) {
  .Footer{
    margin-top: 0vh;
  }
    .Logo {
        position: relative;
    }
    .Logo .BrandImg {
        position: absolute;
        width: 10%;
        margin-left: 20vh;
        margin-top: 10vh;
    }

    .nav {
        background-color: rgb(0, 255, 145);
    }
    .W50 {
        width: 50%;
    }
    .PT10 {
        padding-top: 10%;
    }
    .MT10 {
        margin-top: 5%;
    }
}