* {
    margin: 0;
    padding: 0;
    font-size: 0;
}

@media only screen and (min-width: 0px) {

    #contact-img {
        display: none;
    }

    #form-header {
        font-size: 22px;
        font-family: 'Hind Siliguri', sans-serif;
        font-weight: 100;
        color: #2e2d2d;
        margin: 20vw 0% 3%;
        transition: opacity 0.6s ease-in-out;
    }
    
    form {
        opacity: 0;
        display: inline-block;
        vertical-align: top;
        width: 80%;
        margin: 0 0 0 10%;
        transition: opacity 0.6s ease-in-out;
    }
    
    .input, #submit {
        display: block;
        height: 40px;
        width: calc(100% - 3vw);
        padding-left: 3vw;
        margin: 2.08vw 0 0;
        font-size: 15px;
        font-family: 'Hind Siliguri', sans-serif;
        border-radius: 4px;
        border: 2px solid rgb(197, 197, 197);
    }
    
    #textarea {
        resize: none;
        height: 50px;
        padding: 2.5vw 0 0 3vw;
    }
    
    #validation {
        margin: 2vw 0 3vw 0;
        vertical-align: middle; 
    }
    
    #submit {
        width: 30%;
        height: auto;
        padding: 0.7vw 4vw;
        font-size: 13px;
        font-family: 'Hind Siliguri', sans-serif;
        color: white;
        background-color: #50015a;
        border-radius: 10px;
        text-decoration: none;
        transition: transform 0.5s ease-in-out;
    }
    
    #submit:hover {
        background-color: #600080;
    }
    
    #statement, #statement a {
        width: 90%;
        color: black;
        display: inline-block;
        font-size: calc(7.5px + .7vw);
        font-family: 'Hind Siliguri', sans-serif;
        vertical-align: middle; 
        margin: 2vw 0 3vw 4vw;
    }

    #statement a {
        width: auto;
        margin: 0;
        vertical-align: top;
    }

    #map {
        opacity: 0;
        display: inline-block;
        width: 80%;
        height: 90vw;
        margin: 10% 0 20% 10%;
        border-radius: 10px;
        vertical-align: top;
        transition: opacity 0.6s ease-in-out;
    }

    #contact-info-title {
        width: 100%;
        margin: 20% 0 0 0;
        font-size: 22px;
        font-family: 'Hind Siliguri', sans-serif;
        font-weight: 100;
    }

    #contact-info-flex-wrapper {
        width: calc(80% - 40px);
        height: 150px;
        margin: 0 calc(10% + 20px);
        display: inline-flex;
        flex-basis: 22%;
        justify-content: space-between;
    }

    .contact-info-fragment {
        opacity: 0;
        width: 80px;
        height: 80px;
        border-radius: 10px;
        transition: opacity 0.6s ease-in-out;
    }

    .contact-info-fragment img {
        width: 40%;
        margin: 30%;
    }

    .contact-info-desc {
        width: 140%;
        margin: 0 0 0 -20%;
        margin-bottom: 0em;
        font-size: 14px;
        font-weight: 100;
        text-align: center;
        font-family: 'Hind Siliguri', sans-serif;
        list-style-type: none;
        word-break: break-all;
    }

    .contact-info:nth-child(2) {
        margin-top: 10%;
    }
}

@media only screen and (min-width: 996px) {

    #contact-img {
        opacity: 0;
        display: inline-block;
        height: 40vw;
        width: 30%;
        margin: 10vw auto 10vw 10%;
        border-radius: 10px;
        background-image: url("northernlights.jpg");
        background-size: cover;
        background-position-x: 70%;
        transition: opacity 0.6s ease-in-out;
    }

    form {
        opacity: 0;
        display: inline-block;
        width: 40%;
        height: auto;
        margin: 10vw 0 0 10%;
        vertical-align: top;
        transition: opacity 0.6s ease-in-out;
    }

    #form-header {
        font-size: 30px;
        font-family:'Hind Siliguri', sans-serif;
        font-weight: 100;
        line-height: 30px;
        margin: 0 0 3vw 0;
    }

    .input {
        display: block;
        width: 97%;
        height: 50px;
        margin: 0 0 2vw;
        padding-left: 2%;
        font-size: 15px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 4px;
        box-shadow: none;
        border: 2px solid rgb(197, 197, 197);
    }

    #textarea {
        padding: 6% 0 0 2%;
        resize: none;    
    }

    #submit {
        display: inline-block;
        width: 30%;
        height: 40px;
        padding: 0;
        margin: 1.5% 0 0 5%;
        font-size: 15px;
        font-family:'Hind Siliguri', sans-serif;
        color: white;
        background-color: #600080;
        border-radius: 4px;
        border: none;
    }

    #validation {
        display: inline-block;
        width: auto;
        vertical-align: top;
        margin: 2.3% 0 0 0;
    }

    #statement {
        width: 57.5%;   
    }

    #statement, #statement a{
        display: inline-block;
        font-size: 0.9vw;
        font-family:'Hind Siliguri', sans-serif;
        vertical-align: top;
        margin: 1.5% 0 0 1vw;
    }

    #statement a {
        margin: 0;
    }

    #contact-info-flex-wrapper {
        opacity: 1;
        width: 35%;
        margin: 0 0 10% 13.5%;
        transition: opacity 0.6s ease-in-out;
    }

    .contact-info-desc  {
        width: 160px;
        margin: 0 0 0 -40px;
        text-align: center;
    }
    
    .contact-info:nth-child(2) {
        margin-top: 10%;
    }

    #map {
        opacity: 0;
        display: inline-block;
        width: 30%;
        height: 25vw;
        margin: 0 0 17vw 10%;
        border-radius: 10px;
        vertical-align: top;
        transition: opacity 0.6s ease-in-out;
    }


}

@media only screen and (min-width: 1480px) {

    main {
        width: 1480px;
        margin: 0 auto;
    }

    #contact-img {
        height: 592px;
        margin: 148px auto 148px 10%;
    }

    form {
        margin: 148px 0 0 10%;
    }

    #form-header {
        margin: 0 0 44.4px 0;
    }

    .input {
        margin: 0 0 29.6px;
    }

    #validation {
        margin: 2.3% 0 0 14.8px;
    }

    #statement, #statement a {
        font-size: 13.32px;
        margin: 1.5% 0 0 14.8px;
    }

    #statement a {
        margin: 0;
    }

    #map {
        height: 370px;
    }
}