body {font-family: "museo-sans",sans-serif; font-weight: 100; color: #003D4D; font-size: 16px;}
a {text-decoration: none; color:#003D4D;}
.kleur {color:#7397a1;}
 a:hover {color: #7397a1;}
.bold {font-weight: 900;}
.blok-margin {margin: 8rem auto; display: block; text-align: center;}
.header {text-align: center; margin-top: 3rem;}
.header img{ width: 25%;}
.max-w {max-width: 60%;}
.bodytekst {text-align: center;}

.mainfoto img {max-width: 60%; }

.sloganblok{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slogantekst { display: block; min-width: 60%;}
.rmndr-table { text-align: left; border-collapse: separate; border-spacing: 0 1.5rem;}
.accent {color: #7397a1; width: 40%;}

.sloganfoto {width: 40%; text-align: right;}
.sloganfoto img {max-height: 400px; }


.motto {
    display: flex;
    justify-content: space-around;
    text-align: center;
    text-transform: uppercase;
    border-top:#7397a1 1px solid;
    border-bottom: #7397a1 1px solid;
}
.motto div {padding: 1rem 0;}

#carouselExampleControls {max-width: 80%; margin: 0 auto;}
.carousel-control-prev-icon {background-image: url("../img/prev.svg");}
.carousel-control-next-icon {background-image: url("../img/next.svg");}
.carousel-control-prev-icon, .carousel-control-next-icon {width: 4rem; height: 4rem;}
.fotoslider {
    max-width: 75%;
    margin: 0 auto;
}
.h-100 {margin: 0 auto;}

.uppercase {text-transform: uppercase;}
.footer {
    border-top: 1px solid #7397a1;
    padding-top: 2rem;
    display: block;
    margin-bottom: 2rem;;
}
#mail { display:block; margin: 1rem auto;}
#mail svg {

    width: 45px;
    height: 30px;
    fill: #003D4D;
  }
  svg:hover {
    fill: #7397a1;
  }
  

@media (min-width: 1400px) {}

@media (min-width: 1200px) {}

@media (min-width: 992px) {}

@media (max-width: 768px) {
    .header img{ width: 40%;}
    .mainfoto img {max-width: 100%; }
    .blok-margin {margin: 5rem auto;}
    .header {margin-top: 3rem;}
    .max-w {max-width: 100%;}

}

@media (max-width: 576px) {
    .header img{ width: 60%;}
    .blok-margin {margin: 3rem auto;}
    .sloganblok {display: block;}
    .slogantekst {width: 100%;}
    .sloganfoto {width: 100%;}
    .sloganfoto img {width: 100%; max-height: 100%;}
    .fotoslider {max-width: 100%;}
    #carouselExampleControls {max-width: 100%; margin: 0 auto;}
    .h-100 {height: auto; width: 100%;}
}