#contact{
display: none;
background-color: rgb(223, 213, 213);
}
#contact a{
color: blue;
font-weight: 600;
text-align: left;
}
#contact section{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.contact-info{
flex-grow: 1;
background-color: white;
position: relative;
}
.contact-info-wrapper{
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
display: flex;
flex-direction: column;
}
.contact-info-wrapper h1,
.contact-info-wrapper h2
{
flex-grow: 1;
width: 80%;
margin-left: 10%;
padding:auto 0;
color: black;
font-size: 1.3rem;
text-decoration-line: underline;
}
.contact-info-wrapper a{
text-decoration-line: none;
margin-left: 10px;
}
.contact-info-wrapper  a:hover{
font-size: 1.5rem;
border-bottom: 1px solid blue;
text-decoration-line: none;
}
.contact-map{
flex-grow: 1;
background-color: rgb(8, 8, 8);
position: relative;
}
.map-limit{
position: absolute;
width: 80%;
height: 70%;
overflow: hidden;
z-index: 1;
margin: auto;
left: 10%;
top: 15%;
border: 10px solid white;
}
@media screen and (max-width: 769px) {
.map-limit{
width: 90%;
height: 80%;
margin: auto;
left: 5%;
top: 10%;
}
#contact section{
height: 100%;
flex-direction: column;
text-align: center;
}
.contact-info-wrapper{
top: 18%;
height: 82%;
}
.contact-info-wrapper h1,
.contact-info-wrapper h2,
.contact-info-wrapper a{
font-size: 1rem;
}
}
@media screen and (min-width: 768px) and  (max-width: 1204px) {
.map-limit{
width: 90%;
height: 80%;
margin: auto;
left: 5%;
top: 10%;
}
.contact-info-wrapper h1,
.contact-info-wrapper h2
{
flex-grow: 1;
width: 90%;
margin-left: 5%;
padding:0;
font-size: 1.2rem;
}
.contact-info-wrapper a{
  margin-left: 5px;
}
.contact-info-wrapper > h1{
text-align: center;
}
}