body {
    font-family: 'Arial', sans-serif;
    color: rgba(57,55,58);;
    background-color: rgb(245,246,250);
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    line-height: 1.8rem;
}

.container-fluid {
    width: 100%;
    padding:0;
}


/* KLEUREN WEBSITE */
/* ANTRACIET: rgba(57,55,58); */
.db-antraciet {
    color: rgb(57,55,58);;
}
/* BEIGE: rgba(57,55,58); */
.db-bg-beige {
    background-color: rgb(253,229,208);
}
/* WIT: rgba(255,255,255);FFF */
.db-white {
    color: rgb(255,255,255)!important;
}

.db-bg-white {
    background-color: rgb(255,255,255);
}
/* SCHADUW */
.db-shadow {
    text-shadow: 0 .3rem 1rem rgba(0,0,0,.50);
}

.text-shadow {
    text-shadow: rgb(57,55,58) 0.06em 0.06em 0.09em;
}


/* FADEIN ANIMATION*/
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 


/* PROGRESSBAR */
.progress-content {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    background-color: transparent;
}

.progress-container {
    width: 100%;
    height: 5px;
    background: rgba(80,84,80,0.3);
}

.progress-bar {
    height: 5px;
    background: rgb(253,229,208);
    width: 0%;
}


/* BUTTONS */
.btn-primary {
    color:  rgb(57,55,58);
    background-color: rgb(253,229,208);
    border-color: rgb(253,229,208);
}

.btn-primary:hover {
    color: rgb(255,255,255);
    background-color: rgb(255,115,32);
    border-color: rgb(255,115,32);
}

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.rounded, .btn-primary, .btn-secondary {
    border-radius: 1.0rem !important;
}

/* SCROLLSPY*/
.sticky-leftmenu {
    position: sticky;
    position: -webkit-sticky;
    align-self: flex-start;
    padding-top: 50px;
    top: 0px;
}


/* TYPOGRAFIE */
@font-face {
    font-family: "TheMixSemiLight";
    src: url("../fonts/TheMixOsF-SemiLight.otf");
}

@font-face {
    font-family: "TheMixPlain";
    src: url("../fonts/TheMixOsF-Plain.otf");
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

h1, display-1 {
    font-family: TheMixSemiLight;

}

h1 {
    color: #3C3C3B;
}

.display-1 {
    color: #ffffff;
}

h3, h4 {
    font-family: "TheMixPlain";
}

h4{
    color:#3C3C3B;
}

h5 {
    font-family: "TheMixPlain";
    color: #fde5d0;
}

h2, display-2 {
    font-family: "TheMixSemiLight";
    color: #3C3C3B;
}

p {
    line-height: 1.8rem;
}

a, .list-group a {
    text-decoration: none;
    color: rgb(57,55,58);
}

a:hover, .list-group a:hover {
    color: rgb(57,55,58);
}

.bg-link {
    background-size: cover; 
    cursor: pointer;
}


/* ICONS */
.icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
}

.icon-facebook {
    background-image: url(../img/icons/SocialIcon_Facebook-Antraciet.svg);
}

    .icon-facebook:hover,
    .icon-facebook:focus {
        background-image: url(../img/icons/SocialIcon_Facebook-Oranje.svg);
    }

.icon-twitter {
    background-image: url(../img/icons/SocialIcon_Twitter-Antraciet.svg);
}

    .icon-twitter:hover,
    .icon-twitter:focus {
        background-image: url(../img/icons/SocialIcon_Twitter-Oranje.svg);
    }

.icon-instagram {
    background-image: url(../img/icons/SocialIcon_Instagram-Antraciet.svg);
}

    .icon-instagram:hover,
    .icon-instagram:focus {
        background-image: url(../img/icons/SocialIcon_Instagram-Oranje.svg);
    }

.icon-linkedin {
    background-image: url(../img/icons/SocialIcon_LinkedIn-Antraciet.svg);
}

    .icon-linkedin:hover,
    .icon-linkedin:focus {
        background-image: url(../img/icons/SocialIcon_LinkedIn-Oranje.svg);
    }

.icon-youtube {
    background-image: url(../img/icons/SocialIcon_Youtube-Antraciet.svg);
}

    .icon-youtube:hover,
    .icon-youtube:focus {
        background-image: url(../img/icons/SocialIcon_Youtube-Oranje.svg);
    }

.icon-tiktok {
    background-image: url(../img/icons/SocialIcon_TikTok-Antraciet.svg);
}

    .icon-tiktok:hover,
    .icon-tiktok:focus {
        background-image: url(../img/icons/SocialIcon_TikTok-Oranje.svg);
    }

.icon-pinterest {
    background-image: url(../img/icons/SocialIcon_Pinterest-Antraciet.svg);
}

    .icon-pinterest:hover,
    .icon-pinterest:focus {
        background-image: url(../img/icons/SocialIcon_Pinterest-Oranje.svg);
    }