html,
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    overflow-x: hidden !important;
}

.navbar .navbar-link {
    font-family: 'Josefin Sans', sans-serif;
}


/* -- colors -- */
.yellow {
    color: #f6c12a !important;
}

.d-green {
    color: #7d906d;
}

.d-green-bg {
    background-color: #7d906d;
}

.l-green {
    color: #adc19e;
}

/* -- font styling -- */
.caveat {
    font-family: 'Caveat', cursive;
}

h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 5rem;
}

h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 3rem;
}

h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
}

h4 {
    font-size: 3rem;
}

p {
    margin-bottom: 0 !important;
}

a {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.25s ease-in-out;
}

a:hover {
    text-decoration: none;
}

/* -- Button styling -- */
.d-green-btn {
    background-color: #7d906d;
    padding: 0.5rem 1.5rem;
    border-radius: 15px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.25s ease-in-out;
    display: inline-block;
}

.d-green-btn:hover {
    background-color: #f6c12a;
}


/* -- navigatie -- */
.nav-link {
    color: #7d906d;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 20px;

}

.nav-link:hover {
    color: #000 !important;
}

button:focus {
    outline: none;
}

.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: transparent;
}


.progress-container {
    width: 100%;
    height: 3px;
    background: transparent;
}

.progress-bar {
    height: 3px;
    background: #f6c12a;
    width: 0%;
}


/* -- header -- */



#banner {
    height: 95vh;
    width: 100%;
    background-image: url("../img/banner.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

#banner a i {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.25s ease-in-out;
}

#banner a:hover i {
    color: #7d906d !important;

}

#biographyBlock .d-green:hover {
    color: #f6c12a;

}

/* -- skillsBlock -- */

#skillsBlock {
    background-color: rgba(173, 193, 158, 0.15);
}

#skillsBlock img {
    width: 126px;
}

#skillsBlock h3 {
    font-family: 'Caveat', cursive;
    font-size: 2rem;
    color: #7d906d;
}


/* ---- .grid-gallery incl. responsive ---- */

.btn-gallery {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 1.25rem;
}

/*.btn-gallery:focus {
    color: #f6c12a;
    box-shadow: none;
}

.btn-gallery:hover {
    color: #f6c12a;
} */

.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 33%;
    -moz-column-width: 33%;
    column-width: 33%;
}

.gallery .pics {
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
}

.gallery .animation {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}


/* gallery item onHover */

.pics {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.25s ease-in-out;
}

.pics .onHover {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    background-color: rgba(173, 193, 158, 0.85);
    height: 85%;
    color: #000;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

.pics .onHover .onHoverText {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pics .onHover .onHoverText h5 {
    font-family: 'Caveat', cursive;
    font-size: 2rem;
}

.pics .onHover .onHoverText p {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 1.25rem;

}


.pics:hover .onHover {
    display: block;
}




/* -- quoteBlock -- */

#quoteBlock {
    background-image: url("../img/rath2019.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: 500px;
}

/* -- ContactBlock -- */
#contactBlock a:hover {
    color: #f6c12a !important;
}

#contactBlock i {
    font-size: 1.5rem;
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

#contactBlock i:hover {
    color: #7d906d !important;
}

#contactBlock p a {
    color: #7d906d;
    font-weight: 400;
}

/* -- CopyrightBlock -- */

.copyright {
    font-size: 0.75rem;
}


/* -- Projectpage -- */

#projectBlock {
    background-color: rgba(173, 193, 158, 0.05);
}

#projectBlock a {
    color: #7d906d;
}

#projectBlock a:hover {
    color: #000;
}

/* Project slider */
.project-slider .owl-nav {
    position: relative;
    margin-top: 1rem;
    color: #7d906d;
}

.project-slider .owl-nav .owl-prev {
    position: absolute;
    left: 45%;
}

.project-slider .owl-nav .owl-next {
    position: absolute;
    right: 45%;
}

.owl-carousel .owl-stage,
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: auto;
    touch-action: auto;
}

/* -- Responsive -- */

@media screen and (max-width: 1024px){
    #banner{
        background-attachment: inherit!important;
    }
}

@media screen and (max-width:768px) {
    #banner h1 {
        font-size: 4rem;
        color: #fff !important;
    }

    #banner h4 {
        font-size: 2rem;

    }

    #banner h4 i {
        color: #fff !important;

    }

    #banner {
        background-position: right;
    }

    .pics .onHover .onHoverText h5 {
        font-size: 1.5rem;
    }
}

@media (max-width: 450px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        -moz-column-width: 100%;
        column-width: 100%;
        margin: 0 15px;
    }
}


@media screen and (max-width:425px) {
    .navbar {
        background-color: rgba(255, 255, 255, 0.75);
    }

    #banner h1 {
        font-size: 2rem;
    }

    #banner h4 {
        font-size: 1.15rem;
    }

    #quoteBlock h2 {
        font-size: 2rem;
    }
}

@media (max-width: 400px) {
    .btn.filter {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}