/* Navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #222;
  color: #eee;
  width: 100%;
  height: 80px;
  position:fixed;
  top: 0;
  padding: 0 20px;
  transition: 0.5s;
  border: border-box;
  z-index: 11;
  opacity: 0.9;
}

.navbar h1 {
  font-size: 32px;
  color: #eee;
}

.navbar ul {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin: 0 30px;
}

.navbar .image {
  height: 40px;
}

.navbar a {
  display: flex;
  color: #eee;
  font-weight: 500;
  padding: 5px 10px;
  margin: 0 5px;
  font-size: 16px;
  text-decoration: none;
}

.navbar a:hover {
  border-bottom: #6abae9 2px solid;
}

.navbar .current {
  border-bottom: #6abae9 2px solid;
}

/* footer */

.footer {
  display: flex;
  /* flex: 4; */
  background-color: #222;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #eee;
}

.social {
  display: flex;
  /* flex: 1; */
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 2rem;
}

.soc_face {
  color: #4267B2;
  font-size: 3rem;
  align-items: left;
}

.address {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.address p {
  font-size: 0.85rem;
  line-height: 1.2rem;
}

.address #email {
  color: #6abae9;
  font-size: 0.85rem;
}

.address #email:hover {
  border-bottom: 2px #6abae9 solid;
}

#info {
  color: #eee;
  font-size: 11px;
}

.social a {
  color: #4267B2;
}

.social a:hover {
  opacity: 0.6;
}

.py-1 { padding: 1.5rem 0; }
.py-2 { padding: 2rem 0; }
.py-3 { padding: 3rem 0; }

.p-1 { padding: 1.5rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }

#contact .map, #contact .contact-form {
  flex: 1;
}