body{
 padding-top:0px;
 margin:0;
 background-color: rgb(236, 236, 236);;
}

footer{
 width:100%;
 padding-block: 32px 8px;
 text-align: center;
 font-size: x-small;
 color:black;
 background-color: rgb(218, 223, 225);
}

section {
  padding: 32px 10%;
}

.sectionTitle {
  margin-bottom: 32px;
  font-size: xx-large;
  font-weight: 300;
  color: rgb(52, 73, 94);
  text-align: center;
}

.sectionTitleAlternative {
  margin-bottom: 32px;
  font-size: xx-large;
  font-weight: 300;
  color: rgb(236, 236, 236);
  text-align: center
}

#mainSection {
  width: 100%;
  height: 300px;
  background-color: rgb(236, 236, 236);
}

#mainLeftDiv {
  float: left;
  margin-left: 0%;
  width: 0%;
  height: 500px;
  background-color: rgb(236, 236, 236);
}

#mainLeftDiv img {
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
}

#mainRightDiv {
  width: 100%;
  margin-right: 0;
  background-color: transparent;
}

.glass {
    background: rgba(255, 255, 255, 0.416);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.2px);
    -webkit-backdrop-filter: blur(6.2px);
    border: 1px solid rgba(255, 255, 255, 0.48);
}

#navigationBar {
  margin-top: 18px;
  --nav-height: 75px;
  height: var(--nav-height);
  width: 96%;
  background-color: transparent;
  border-radius: calc(var(--nav-height) / 2);
  display: flex;
  justify-content: center;
  margin-inline: auto;
  align-items: center;
}

.navigation-actions {
  display: flex;
  gap: 16px;
  margin-right: 16px;
}

.navigationDiv {
  white-space: nowrap;
  background-color: transparent;
  font-size: 16px;
}

.navigationDiv a {
  font-size: 19;
  color: rgb(108, 122, 137);
  text-decoration: none;
}

.navigationDiv a:hover {
  text-decoration: underline;
}

.navigationSelected {
  text-decoration: underline;
}

.main-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    /* gap:2px; */

    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    color: rgb(108, 122, 137);

    &>*:first-child {
        font-size: 24px;
        font-weight: 700;
        font-style: normal;
        color: rgb(108, 122, 137);
    }
}

#titleDiv {
  width: 100%;
  height: 100px;
  margin-top: 50px;
  background-color: transparent;
  text-align: left;
  color: rgb(108, 122, 137);
}

#titleDiv h1 {
  margin: 0;
  font-family: Helvetica;
  font-size: 35;
  font-weight: 700;
  font-style: normal;
}

#subtitleDiv {
  width: 100%;
  height: 100px;
  background-color: transparent;
  text-align: left;
  color: rgb(108, 122, 137);
}

#subtitleDiv h2 {
  margin: 0;
  font-family: Helvetica;
  font-weight: 400;
  font-style: italic;
  font-size: 25;
  padding-left: 5%;
  padding-right: 5%;
}

#subsubtitleDiv {
  width: 100%;
  height: 50;
  margin-top: 100px;
  background-color: transparent;
  text-align: center;
  color: rgb(108, 122, 137);
}

#subsubtitleDiv h3 {
  margin: 0;
  font-family: Helvetica;
  font-weight: 400;
  font-style: normal;
  font-size: 20;
  padding-left: 5%;
  padding-right: 5%;
}

/* INFO */
#infoSection {
  width: 100%;
  height: 550px;

  background: -webkit-linear-gradient(rgb(236, 236, 236), rgb(218, 223, 225)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgb(236, 236, 236), rgb(218, 223, 225)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(236, 236, 236), rgb(218, 223, 225)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgb(236, 236, 236), rgb(218, 223, 225)); /* Standard syntax */
}

#openingsuren{
 width:90%;
 margin-left:5%;
 top:5%;
 text-align:center;
 z-index: 10;
 background:lightgray;
 opacity:0.9;
 border-radius: 10px;
 overflow:hidden;
 border: 2px solid orange;
}

#openingsuren .table{
 margin:0;
 height:100%;
}

#openingsuren h3{
 margin-top:10px;
}

#medewerkers{
 width:90%;
 margin-left:5%;
 margin-top:25px;
 background-color: transparent;
}

.medewerker{
 width:100%;
 height:150px;
 padding:5px;
 margin-bottom:10px;
}

.medewerker img{
 float:left;
 width:140px;
 height:100%;
 border-radius:70px;
 border:0px solid black;
}

.medewerker-info{
 float:left;
 width:60%;
 height:100%;
 margin-left:5%;
 color:black;
}

.medewerker-naam{
 width:100%;
 height:30%;
 margin-top:25px;
 font-size:25px;
 font-style:oblique;
}

.medewerker-functie{
 width:100%;
 height:40%;
 font-size:15px;
 padding-left:3%;
}

#contactSection {
  width: 100%;
  background-color: rgb(52, 73, 94);
  color: rgb(218, 223, 225); 
}

#contactDiv {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  color: rgb(52, 73, 94);
}

#contactTitle {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background-color: transparent;
}

#contactTitle h3 {
  margin: 0;
  font-family: Helvetica;
  font-size: 35;
  font-weight: 700;
  font-style: normal;
}

#contactSubtitle {
  width: 100%;
  height: 75px;
  vertical-align: middle;
  text-align: center;
  background-color: transparent;
}

#contactSubtitle h4 {
  margin: 0;
  font-family: Helvetica;
  font-weight: 300;
  font-style: italic;
  font-size: 23;
}

#contactInfo {
  width: 100%;
  height: auto;
  padding: 20px;
  overflow: auto;
  text-align: left;
  background-color: white;
  font-family: Helvetica;
  font-size: 19;
  font-weight: 200;
  font-style: normal;
  line-height: 1.4em;

  border-radius: 15px;
  border: 1px solid black;
}

#contactInfo a {
  text-decoration: none;
  color: black;
  color: rgb(108, 122, 137)
}

#contactInfo span {
  margin-right: 10px;
}

#contactFormDiv{
 float:left;
 width:100%;
 background-color: transparent;
}

#contact-form{
 padding-top:20px; 
 padding-right:5%;
 bottom:0;
}

#contact-form .form-group{
 margin-left:10%;
 margin-right:10%;
}

#header{
 width:100%;
 height:75px;
 position:relative;
 border-bottom: 3px solid gray;
 background-color: rgb(225, 225, 225);
 padding-left: 1%;
}

.headerButton{
  float:left;
  width:10%;
  height:100%;
  position:relative;
  text-align: center;
}

.headerButton:hover{
  cursor:pointer;
}

.headerButtonImage{
  width:100%;
  height:70%;
}

.headerButtonImage img{
  margin-top:5%;
  max-width:100%;
  max-height:80%;
}

.headerButtonText{
  width:100%;
  height:30%;
}

#container{
 width:100%;
 height:auto;
 background:orange;
}

.section{
 width:100%;
 position:relative;
}


#contact-div{
 float:left;
 width:45%;
 height:85%;
 margin-top:50px;
 margin-left:10%;
 border-radius: 20px;
 background:lightgray;
 overflow:hidden;
}

#contact-top{
 position:relative;
 width:100%;
 height:40%;
}

#contact-bottom{
 width:100%;
 height:55%;
}

#qr{
 float:left;
 width:40%;
 height:100%;
 margin-left:auto;
 margin-right:auto;
 margin-top:5%;
 border-right: 2px solid white;
}

#qr img{
 margin-top:10%;
 margin-left:25%;
 margin-right:auto;
 height:80%;
 width:auto;
}

#contact-info{
 float:left;
 width:60%;
 height:100%;
 padding-left:5%;
 padding-top:5%;
 font-size: 15px;
}

#contact-info .highlight{
 font-size: 20px;
 margin-bottom:5px;
}

#contact-info table{
 margin-left:5%;
}

#contact-info a{	
 text-decoration: none;
 color:black;
}

#contact-bottom iframe{
 position:relative;
 margin-left:10%;
 height:80%;
 width:80%;
 margin-top:5%;
}

#dienstenSection {
  width: 100%;
}

#verzekeringen-section{
 width:100%;
 height:750px;
 background:#f1dc76;
}

#verzekeringen{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 25px;
  height:auto;
}

#verzekeringen-brochure{
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 25px;
  height:auto;
}

.panel{
 background-color: rgba(245, 245, 245, 0.9);
}

#links-section{
 width:100%;
 background-color: rgb(218, 223, 225);
}

#weblinks-div{
 top:50px;
}

#links-section .well{
 float:left;
 width:100%;
 height:auto;
 margin-bottom:25px;
}

#privacySection {
  width: 100%;
  padding-top: 10px;
  background-color: rgb(218, 223, 225);  

  &>a {
    text-decoration: none;
  }
}

#backFromGDPR{
  width: 70%;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

#backText {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgb(38,38,38);
  text-decoration: none;
}

#backText p {
  font-family: Helvetica;
  font-size: 20px;
  font-weight: 50;
  font-style: normal;
  color: black;
}

#backButtonDiv {
  width: 20px;
  height: 20px;
  font-size: 35;
  line-height: 50px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

#backButtonDiv img {
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

#GDPR {
  width:100%;
  background-color: rgb(218, 223, 225);
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 50px;
  clear: all;
  padding-bottom: 25px;
}

#GDPR h2 {
  font-family: Helvetica;
  font-size: 24px;
  font-weight: 300;
  font-style: normal;
}

.day {
    display: flex;
    margin-block: 8px;
    gap:16px;

    &>*:first-child {
        width: 12ch;
        text-align: right;
    }
}

.hours {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    
    &>* {
        width: 20ch;
        text-align: left;
    }
}

.contact-section{
    text-align: left;
    margin-block: 32px;
}

.contact-section-title {
    font-size: small;
    font-weight: 500;
    margin-bottom: 8px;
}

.contact-container {
    display: flex;
    justify-content: space-around;
    
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.services-container {
    display: flex;
    gap: 32px;
    margin-inline: auto;
    justify-content: center;
    flex-direction: column;
}

.service-card {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 0 8px black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-img {
    width: 100%;
    height: 100px;

    &>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.card-content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-block: 0px 16px;
  padding-inline: 32px;
}

.card-title {
    font-weight: 600;
    margin-block: 16px;
    font-size: large;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.services-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap:8px;
    align-items: center;

    & img {
        width: 20px;
        height: 20px;
        padding: 5px;
    }

    & a {
        color: black;
    }
}

.link-card {
    display: flex;
    gap: 16px;

    background-color: rgb(213, 215, 218);
    padding: 16px 16px;
    border-radius: 1rem;
    margin-block: 8px;
}

.link-img {
    width: 0px;

    &>img {
        width: 100%;
        height: 100%;
        object-fit:contain;
    }
}

.link-content {
    flex: 1;

    &>h3 {
        font-size: large;
        margin: 0;
        margin-block: 4px;
    }

    & img {
        margin-left: 4px;;
        width: 10px;
        height: 10px;
        object-fit: contain;
    }
}

@media only screen and (min-width: 480px) {

  .card-img {
    height: 150px;
  }

}

@media only screen and (min-width: 768px) {

  .sectionTitle {
    text-align: left;
  }

  .sectionTitleAlternative {
    text-align: left;
  }

  .service-card {
    flex-direction: row;
    height: 250px;
  }

  .card-img {
    width: 250px;
    height: 100%;
  }

  .card-content-container {
    flex: 1 0;
  }

  .contact-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .link-img {
    width: 125px;
  }

	#verzekeringen-brochure{
		float: left;
		margin-left: 2%;
		width:44%;
	}

  #backFromGDPR{
    width: 40%;
  }
}

@media only screen and (min-width: 900px) {

  section {
    padding: 32px 128px;
  }

  .services-container {
    flex-direction: row;
  }

  .service-card {
    width: 350px;
    height: 450px;
    flex-direction: column;
    align-items: center;
  }

  .card-img {
    width: 100%;
    height: 140px;
  }

  .card-content-container {
    text-align: center;
    align-items: center;
  }

  #backFromGDPR{
    width: 35%;
  }
}

@media only screen and (min-width: 1200px) {

  .contact-container {
    width: 943px;
    margin-inline: auto;
  }

  .link-card {
    width: 943px;
    margin-inline: auto;
  }
}