/*CONTACT PAGE*/

/*--------------------------------*/

/*Top Section*/

#topsection {margin: auto; background-image: url("images/contact.jpg"); background-position: 100% 50%; background-size: cover; background-color: #343D5E;}
#topsection .bodyarea {padding-top: 60px; padding-bottom: 80px; color: #FFF;}
#topsection .tophead {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 3em; line-height: 1.15; margin-bottom: 30px;}

@media (max-width: 1340px) {#topsection {background-position: 50% 50%;}}
@media (min-width: 1341px) {
#topsection .bodyarea {-webkit-display: flex; display: flex; -webkit-flex-direction: row; flex-direction: row;}
#topsection .bodyarea section {width: 50%;}
}
@media (max-width: 500px) {#topsection .tophead {font-size: calc(12.5vw - 3px);}}

/*--------------------------------*/

/*Contact*/

#contact .bodyarea {padding-top: 60px; padding-bottom: 80px;} #contact td {vertical-align: top;}
#contact td:last-child {padding: 0 10px; border: 3px solid #FC7D01;}
#contact td:last-child span {display: block; padding: 20px 10px 0 20px;}

@media (min-width: 1286px) {#contact td:first-child {padding-right: 30px;}}
@media (max-width: 1285px) {#contact td {display: block;} #contact td:last-child {margin: 40px auto 0 auto;}}
@media (min-width: 786px) {#contact td:last-child {width: 620px;}}
@media (max-width: 785px) and (min-width: 510px) {#contact td:last-child {width: 400px;}}

#contsoc {margin: 30px 0 40px 0;} #contsoc img {height: 36px; width: 36px; display: inline-block; margin: 0 1px -5px 1px;}
@keyframes shake {20% {-webkit-transform: rotateZ(-8deg);} 80% {-webkit-transform: rotateZ(8deg);}}
#contsoc img:hover {-webkit-animation: shake .16s 5;}