/* ALGEMENE STYLING */
a, a:visited {
  color: #575756;
}
a:hover {
  color: #538c83;
}
#logo {
  width: 25vw;
  padding-bottom: 50px;
}
hr {
  border-top: 3px solid #538c83;
  width: 200px;
}
#contact hr {
  margin-inline-start: 0 !important;
}
#online-afspraak {
  margin: 10rem;
  width: 14rem;
}
.iframe {
  padding-top: 25px;
}
/* ALGEMENE TYPO  */
* {
  color: #575756;
  font-family: 'Ubuntu', sans-serif;
}
strong {
  font-weight: 700;
}
.custom-name {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
}
.custom-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.5rem;
  line-height: 0rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 200;
  color: #d5af94;
}
#contact {
  font-weight: 400;
  line-height: 150%;
  font-size: 1.1rem;
}
.openingsuren {
  position: absolute;
  left: 10em;
}
ul {
  list-style-type: none;
  padding: 0;
}
.list-openingsuren {}
.tab-indent {
  margin-left: 1.2em;
}
.list-contact li {
  font-weight: 400;
  padding-bottom: 0.5em;
}
i.fas {
  color: #538c83;
  padding-right: 0.5em;
}
/* DIV STYLING */
.bg-img {
  background-image: url("../images/bg_opaal_logo.svg");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position-x: 130%;
  background-position-y: bottom;
}
.container {
  box-shadow: 1px 0px 20px 5px #00000024;
}
.bg-opaal {
  /*background-image: url("../images/bg_opaal.svg"), url("../images/bg_opaal2.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 115%;*/
  height: 45vh;
}
.container {
  background-image: url(../images/bg_opaal.svg), url(../images/bg_opaal2.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 365px;
  background-size: 115%;
}
/* FOOTER */
footer {
  font-size: 0.75rem;
  background-image: url("../images/bg_footer.svg");
  background-repeat: no-repeat;
  background-position: top;
  margin-top: 3vh;
  background-size: 120%;
  display: flex;
  height: 90px;
}
#copyright {
  vertical-align: bottom;
  align-self: flex-end;
  padding-bottom: 16px;
}
#info {
  align-self: flex-end;
}
@media (min-width:200px) {
  .custom-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
  }
  .custom-title {
    font-size: 1rem;
  }
  #logo {
    width: 60vw;
    padding-bottom: 30px;
    padding-top: 5vw;
  }
  #online-afspraak {
    margin: 3rem;
    width: 8rem;
  }
  .bg-opaal {
    height: 20vh;
  }
  footer {
    font-size: 0.6rem;
    background-image: url(../images/bg_footer.svg);
    background-repeat: no-repeat;
    background-position: top;
    /* margin-top: 3vh; */
    background-size: 241%;
    height: 11vh;
  }
  .container {
    background-size: 120%;
    background-position-y: 380px;
  }
  #contact hr {
    margin-inline-start: auto;
  }
  .iframe {
    padding-top: 25px;
    width: 200px;
  }
}
@media (min-width:400px) {
  #logo {
    width: 35vw;
    padding-bottom: 50px;
    padding-top: 5vw;
  }
  #online-afspraak {
    margin: 5rem;
    width: 10rem;
  }
  .bg-opaal {
    height: 28vh;
  }
  footer {
    font-size: 0.75rem;
    background-image: url(../images/bg_footer.svg);
    background-repeat: no-repeat;
    background-position: top;
    /* margin-top: 3vh; */
    background-size: 150%;
    height: 130px;
  }
  .container {
    background-size: 125%;
  }
  .iframe {
    padding-top: 25px;
    width: 400px;
  }
}
@media (min-width:576px) {
  #logo {
    width: 25vw;
    padding-bottom: 50px;
    padding-top: 2vw;
  }
  #online-afspraak {
    margin: 5rem;
    width: 10rem;
  }
  .bg-opaal {
    height: 28vh;
  }
  .custom-name {
    font-size: 2.2rem;
  }
  .custom-title {
    font-size: 1.5rem;
  }
  .iframe {
    padding-top: 25px;
    width: 500px;
  }
}
@media (max-width:768px) {
  #online-afspraak {
    margin: 5rem;
    width: 11rem;
  }
  .bg-opaal {
    height: 260px;
  }
  #contact hr {
    margin-inline-start: auto;
  }
}
@media (min-width:992px) {
  #online-afspraak {
    margin: 7rem;
    width: 10rem;
  }
  .bg-opaal {
    height: 35vh;
  }
  .iframe {
    padding-top: 25px;
    width: 800px;
  }
}
@media (min-width:1200px) {
  #logo {
    width: 20vw;
    padding-bottom: 40px;
    padding-top: 1vw;
  }
  .bg-opaal {
    height: 500px;
  }
  #online-afspraak {
    margin: 10rem;
    width: 10rem;
  }
  #google-maps {
    padding: 3rem !important;
  }
}
@media (min-width:1440px) {
  #logo {
    width: 16vw;
    padding-bottom: 50px;
    padding-top: 1vw;
  }
  #online-afspraak {
    margin: 7rem;
    width: 13vw;
  }
  .bg-opaal {
    height: 500px;
  }
  .container {
    background-position-y: 386px;
  }
}