/*

All you need to add is specifially css regarding this page

Use unique identifiers.

class="name" , .name{}

id="name" , #name{}


*/

main{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    width:100%;
    margin: auto;
    
}

.contactbox{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    padding: 0;
    max-width: 30em;
    
    
}



/*     -----------------     FORM        -----------------   */

form{
    display: flex;
    flex-direction: column;
    
    justify-content:flex-start;
    align-content:flex-start;
    
/*    border: 1px white solid;*/
    padding:1em 2em 1em 2em;
    background-color: rgba(0, 0, 0, 0.47);
    
    width:90%;
    height: 27em;
    
}

form label{
    width:100%;
    padding: .1em;
    padding-top: 1em;
    color:White;
    
}

form input{
    width:100%;
    padding:.1em;
}

form #mess{
    height: 10em;
}

form #sub{
    align-self: flex-end;
    padding: 1em;
    width: 20em;
    margin: 1em;
    
}

/*     -----------------     Contact info        -----------------   */


.contact{

    padding: 1em;
    
}

.contact h3{
    padding: .2em;
}

.contact ul{
    padding: .2em;
}

.contact ul li{
    padding: .2em;
}

/*   --------     Location Map      --------   */
#officelocation{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    margin: 2em;
    padding: 1em;
    width: 90%;
    
}


/* --------- MOBILE TIME  ------------*/

@media screen and (max-width: 800px) {
    
    main{
        display:flex;
        flex-direction: column;
        justify-content:space-between;
        width:100%;
        margin: auto;
    
    }
    
    .contactbox{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 90%;
        padding: 0;
        max-width: 30em;
    
    
}
    #officelocation{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0em;
    padding: 1em 0em;
    width: 100%;
    min-height: 25em; 
    
}
    
    
    
}