.center{
    background-image: url("/wp-content/sweco_uploads/afbeeldingen/UX/achtergrond.jpg");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 88vh;
    align-content: flex-start;
    
}

.flex-container {
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: 1175px;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    justify-content: center;
    -webkit-justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2.5%;
    align-items: center;
 }

 .flex-container a {
     text-decoration: none !important;
 }

 .flex-container a:focus {
     background: none !important;
 }

 .flexcol {
    display: flex;
    width: 470px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
 }

 .flexcol#three {
     width: 235px;
 }

.flex-item {
    width: 225px;
    height: 225px;
    max-height: 235px;
    margin: 5px;
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    position: relative;
}

.flex-item.div1 {
    background-color: rgba(var(--main-color));
}

.flex-item.div2 {
    background-color: rgba(var(--tegels2-color));
}

.flex-item.div3 {
    background-color: rgba(var(--tegels3-color));
}

.flex-item.div4 {
    background-color: grey;
}


#kaart{
    width: 460px;
}

.material-icons{
    /* margin: top right bottom left */
    margin: 75px auto 40px auto;
    font-size: 68px;
}

/* .center .fas {
    margin: 75px auto 40px auto;
    font-size: 68px;
} */

.branding-bar{
    height: 32px;
    color: white;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 20px;
}

 .paars div:hover span{
    color: #c1e1ec;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.donkerblauw div:hover span{
    color: #c1e1ec;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.lichtblauw div:hover span{
    color: #f2f2f2;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.info{
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0px;
    right: 0px;
    margin:10px;
    border-radius: 50%;
    border: 1px solid;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    
    transition: all 0.15s ease;
    padding: 10px;
    color: black;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;
    z-index: 99;
    width: 20vw;
}

[data-tooltip]:hover:before {
    opacity: 1;
    background: #f2f2f2;
    margin-top: -50px;
    margin-left: 20px;
    z-index: 99;
    width: 20vw;    
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

/* css voor derde kolom tooltip */
#three [data-tooltip]:before {
    width: 10vw;
} 

#three [data-tooltip]:hover:before {
    width: 10vw;
} 

.extra {
    display: flex;
    justify-content: center;
    padding-top: 2.5%;
}

.extra a {
    text-decoration: none !important;
}

#intro.titel {
    background-color: grey;
    font-weight: normal;
    width: 225px;
}

.titel {
    text-align: center;
    font-size: 20px;
    color: white;
    border-radius: 3px;
}