@media only screen and (max-width: 480px) {

    .navbar {

        padding-left: 0rem !important;

    }

    #topcontrol {

        right: 20px !important;
    }

    #vantajs {

        margin: auto;

    }

    .header-text {

        font-size: 10pt;

    }

    .under-line {

        width: 25%;

    }

    .under-line2 {

        width: 25%;

    }

    .demo {

        padding-top: 1rem;
    }

    .skill-bar {

        padding-top: 2rem;
        padding: 2rem;

    }

    .skills {

        padding-bottom: 0rem !important;
        padding-top: 3rem;

    }

    .img-fluid {

        height: 200px;
        width: max-content;

    }

    .portfolio-caption {

        font-size: 40%;
    }

    .contact-form {
        padding: 1rem;
    }

    .INTRO {

        font-size: 60% !important;
    }

    .mod-title {

        font-size: 200% !important;

    }

    .img-modal {
        width: 240px;
        height: 300px;
    }

    .to-top {
        padding-top: 0.5rem;
        padding: 0rem !important;
    }

    #contact {
        padding-bottom: 1rem;
    }

    .icon-wrap {
        margin-top: 0rem !important;
    }
}

@media only screen and (max-width: 767px) {

    .navbar {

        padding-left: 0rem !important;

    }

    #vantajs {

        margin: auto;

    }

    .header-text {

        font-size: 20pt;

    }

    .under-line {

        width: 25%;

    }

    .under-line2 {

        width: 25%;

    }

    .demo {

        padding-top: 1rem;
    }

    .skill-bar {

        padding-top: 2rem;

    }

    .skills {

        padding-bottom: 3rem;
        padding-top: 3rem;

    }

    .INTRO {
        font-size: 60%;
    }

    .img-fluid {

        height: 200px;

    }

    .portfolio-caption {

        font-size: 40%;
    }

    .contact-form {
        padding: 1rem;
    }

    .to-top {
        padding: 0.5rem;
    }

    #contact {
        padding-bottom: 1rem;
    }

}

@media only screen and (max-width: 1023px) {

    .navbar {

        padding-left: 0rem !important;

    }

    #vantajs {

        margin: auto;

    }

    .header-text {

        font-size: 30pt;

    }

    .under-line {

        width: 15%;

    }

    .under-line2 {

        width: 25%;

    }

    .demo {

        padding-top: 1rem;
    }

    .skill-bar {

        padding-top: 0 rem;

    }

    .skills {

        padding-bottom: 3rem;
        padding-top: 3rem;

    }

    .INTRO {

        font-size: 66%;
    }


    .img-fluid {

        height: 200px;

    }

    .portfolio-caption h4 {

        font-size: 14pt;

    }

    .portfolio-caption p {

        font-size: 12px !important;

    }

    .contact-form {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .to-top {
        padding: 0.5rem;
    }

    #contact {
        padding-bottom: 1rem;
    }

}

@media only screen and (max-width: 1200px) {

    #vantajs {

        margin: auto;

    }

    .header-text {

        font-size: 30pt;

    }

    .under-line {

        width: 15%;

    }

    .under-line2 {

        width: 15%;

    }

    .demo {

        padding-top: 1rem;
    }

    .skill-bar {

        padding-top: 0 rem;

    }

    .skills {

        padding-bottom: 3rem;
        padding-top: 3rem;

    }

    .INTRO {

        font-size: 90%;
    }


    .img-fluid {

        height: 200px;

    }

    .portfolio-caption h4 {

        font-size: 14pt;

    }

    .portfolio-caption p {

        font-size: 12px !important;

    }

    .contact-form {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .to-top {
        padding: 0.5rem;
    }

    #contact {
        padding-bottom: 1rem;
    }
}