html{
/*    height:0%;*/

}

body{
    width:90%;
/*    height:90%*/
    padding: 0;
    margin: 0 auto;
    
}

contactpage{

height: 95%;
/*    border: solid black 2px;*/
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
/*    width: 100%;*/
    margin: 10em  auto 1em auto;
    max-width: 85em;

}

.contactbox{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 90%;
/*    padding: 0;*/
    margin: 1em;
/*    max-width: 35em;*/
    margin-top:0em;
    max-height: 60%;
    
    
} 



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

form{
    display: flex;
    flex-direction: column;
    
    justify-content:center;
    align-content:flex-start;
    
/*    border: 1px white solid;*/
    padding:4em 2em 4em 2em;
    background-color: rgba(0, 0, 0, 0.67);
    border-radius: 1em;
     margin-top:0em;
    width:80%;
    height: 100%;
    min-height: 30em;
/*     margin: 0 1em;*/
    
}
form h4{
    color: white;
    font-size: 1.6em;
    text-align: center;
}

form label{
    width:100%;
    padding: .1em;
    padding-top: 1em;
    margin-left:3em;
    color:White;
    font-size: 1.1em;
    
}

form input{
    align-content: center;
    width:80%;
    margin: .3em auto;
    padding:.5em;
    height: 1em;
    font-size: 1.2em;
    
}

form #mess{
    height: 2em;
    font-size: 1.2em;
    text-align: left;
    justify-content: flex-start;
    
}

form #sub{
    align-self: center;
/*    padding: 1em;*/
    width: 60%;
    font-size: 1.2em;
    margin: .6em;
    text-align: center;
    height: 2.6em;
    
    
}

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


.contact{
    display: flex;
    flex-direction: column;
    
    justify-content:flex-start;
    align-content:flex-start;
    
/*    border: 1px white solid;*/
    padding:2em 2em 2em 2em;
    background-color: rgba(0, 0, 0, 0.67);
    border-radius: 1em;
    
    width:25%;
    height: 100%;
    color:white;
}

.contact h3{
    padding: .2em;
    font-size: 1.4em;
}

.contact ul{
    padding: .2em;
    margin-top: 2.6em;
}

.contact ul li{
    padding: .3em;
    font-size: 1.4em;
    
}

/*   --------     Location Map      --------   */



button.cta{
/*    margin: auto;*/
    margin-right:50%;
    margin-left:10%;

}


/* --------- 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;
    
    
}

    
    
}