body {
    background-color: #161B22;
}

.wrapper {
    
}

html {
    position: relative;
    min-height: 100%;
}

a {
    color: #bd916d;
}

a:hover {
    color: #825b3b;
}

body {
    /* bottom = footer height */
    padding-bottom: 0;
}
.footer {

    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow:hidden;
}

.absolute {
    position: absolute;
}

/* index */

.heroImage {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;

-webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.33);
box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.33);

z-index: 10;
}

.scroll {
    background-image: url('assets/img/scrollmouse.png');
    width: 30px;
    height: 100px;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    z-index: 0;
    
}

.scrollWheel {
    background-image: url('assets/img/scrollwheel.png');
    width: 3px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    margin: 0 auto;
    position: relative;
    top: 3px;

    animation-name: wheelMove;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes wheelMove {
    0%   {top: 3px;}
    25%  {top: 3px}
    50%  {top: 10px;}
    100% {top: 3px;}
  }

.scrollArrow {
    background-image: url('assets/img/scrollarrow.png');
    width: 30px;
    height: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    margin: 0 auto;
    position: relative;
    top: 3px;

    animation-name: arrowMove;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}

@keyframes arrowMove {
    0%   {top: 42px;}
    25%  {top: 42px}
    50%  {top: 49px;}
    100% {top: 42px;}
  }


.background {
    position: fixed;
    z-index: -10;
    background-image: url('assets/img/herometalbg.jpg');
    height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.8;

    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    filter: blur(0px);
}

.yellowBackground {
    background-color: #f2be93;
    background-image: none;
    opacity: 1;
}

.ive-pareyns-logo {
    width: 50%;
    height: 50%;
    animation-delay: 0.9s;
    z-index: -5;
}

.nav-bar {
    height: 50px;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: white;
}

.nav-link , .nav-link:link, .nav-link:visited, .nav-link:hover, .nav-link:active {
    color: white;
    z-index: 10;
}

.nav-link:hover {
    border-bottom: 2px solid white;
}

.nav-item {
    padding-top : 0px;
    z-index: 10;
}

.active {
    font-weight: 600;
}

.nav-fixed {
    position: fixed;
    padding: 0;
    z-index: 120;
    -webkit-transition: background-color 1s; /* Safari */
    transition: background-color 1s;
}

.scrolled {
    background-color: #161B22;
    border-bottom: 3px solid #f2be93;

}

.scrolled .nav-link {
    color: white;
}

.scrolled:hover {
    background-color: white;
}

.scrolled:hover .nav-link {
    color: #161B22;
    font-size: 1.1em;
    transition: font-size 0.2s;
}

.animated.delay-100ms {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.animated.delay-200ms {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.animated.delay-300ms {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.animated.delay-400ms {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.animated.delay-500ms {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.animated.delay-600ms {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.animated.delay-700ms {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.animated.delay-800ms {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.who {
    background-color: #F1F1F1;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 40px;
    z-index: 100;
    position: relative;
}

.whoGold {
    
    padding-left: 5%!important;
    padding-right: 5%!important;
    padding-top: 100px;
    padding-bottom: 40px;
    position: relative;
}

.whoWhiteBorder {
    border: 1px solid white;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5%;
    padding-right: 5%;
}

.whoGoldBorder {
    border: 5px solid #f2be93;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1400px;
}

.whoGold .textRow {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;

    margin-bottom: 40px;
}

.titleWhite {
    color: #F1F1F1;
    border-bottom: 4px solid #F1F1F1;
    margin: 0 auto;
    line-height: 55px;
    width: 266px;
    margin-bottom: 30px;
}

.titleYellow {
    color: #bd916d;
    border-bottom: 4px solid #bd916d;
    margin: 0 auto;
    line-height: 55px;
    
    margin-bottom: 30px;
}

.titleExpertiseDomeinen {
        font-family: 'Lato', sans-serif;
        font-weight: 600;
        border-bottom: 3px solid #bd916d;
        margin-bottom: 30px;
        margin-top: 30px;
    
}

.textRow {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    -webkit-column-gap: 4em;
    -moz-column-gap: 4em;
    column-gap: 4em;

    text-align: justify;
    text-justify: inter-word;    
}

.textQuote {
    color: white;
    font-weight: 600;
    font-size: 1.5em;
    margin-top: 20px;
    text-align: center;
}

.textYellow {
    color: #f2be93!important;
}

.quoteLine {
    width: 200px;
    height: 5px;
    background-color: #f2be93;
    margin: 0 auto;
    margin-top: 20px;
}

.footer {
    background-color: #161B22;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    color: white;
    padding: 20px;
}

.footerItem {
margin-left: 5px;
margin-right: 5px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.footerItem img {
    width: 30px;
    height: 30px;
    
}

.footerLogo {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    margin-right: 30px;
    margin-bottom: 20px;
    

}

.footerInfo {
    flex-grow: 8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.footerLogo img {
    margin-right: 20px;
    width: 140px;
}

.footerLogo p {
    font-weight: 600;
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0px;
}

.logoSmall {
    height: 50px;
    align-self: center;
}

a:link {
    text-decoration: none;
}

.page {
    padding-top: 50px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #161B22;
}

/* expertisedomeinen */

.expertisedomeinenb {
    background-color: white;
    background-image: none;
    opacity: 1;
}

.backgroundexpertisedomeinen{
    background-image: url('assets/img/grey_pattern2.png');
    background-repeat: repeat;
    background-size: auto;
}

.expertiseDomeinen {
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
}

.domeinen {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: space-between;

    z-index: -1;
}

.domein {
    width: 300px;
    height: 400px;
    margin-top: 15px;
    margin-right: 15px;
    padding-top: 10px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;


    border: solid 5px #f2be93;
    clip-path: polygon( 
        calc(0% + 4px) calc(0% + 4px), /* top left */
        calc(100% - 4px) calc(0% + 4px), /* top right */
        calc(100% - 4px) calc(100% - 4px), /* bottom right */
        calc(0% + 4px) calc(100% - 4px) /* bottom left */
    );

    text-decoration: none;
   
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;

    -webkit-transition: height 0.5s ease-in-out, width 0.7s ease-in-out, clip-path 0.6s linear, padding-top 0.1s; /* Safari */
    transition: height 0.5s ease-in-out, width 0.7s ease-in-out, clip-path 0.6s linear, padding-top 0.1s;
}

.domein:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding-top: 0px;
    text-decoration-color: white;
}

.domeinOpened {
    width: 100%;
    height: 600px;
}

.domeinOpened.domeinLarge {
    width: 100%;
    height: 1000px;
}

.domeinSmallened {
    width: 10%;
    height: 600px;
}

.domeinSmallened .domeinDiv .title {
    opacity: 0;
}

.domeinOpened .domeinDiv, .domeinOpened .domeinText {
    margin-left: 25px;
    margin-right: 25px;
    font-size: 0.9em;

}

.domeinDiv {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.domeinText {
    display: none;
    overflow: hidden;
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
    color: white;
    margin-top: 30px;

    text-align: justify;
    text-justify: inter-word;
}

.domeinText p {
    display: inline-block;
    text-decoration: none;
}

.domeinDiv .title {
    color: white;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    min-width: 0;
    pointer-events: none;

    opacity: 1;
    
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}

.domeinDiv img {
    max-width: 100px;
    max-height: 50px;
    pointer-events: none;
}

.arrowDown {
    width: 30px;
    margin-top: 20px;
    padding-top: 0px;
    transition: transform 1s ease-in-out;
}

.arrowDown:hover {
    padding-top: 5px;
}

.domeinOpened .domeinDiv .arrowDown {
    transform: rotate(180deg);
}


/* Tarieven */

.subtitle {
    color: #9a6439;
    font-size: 1.2em;
    margin-top: 20px;
}

.textWhite {
    color: white;
    text-align: justify;
}

.textBlack {
    color: black;
}

.whiteFill {
    max-width: 1200px;
}


.tarievenList li {
    list-style-image: url("assets/img/li_rect2.png");

}

/* Contact */


.contact {
    display: flex;
    flex-direction: row;

}

.contactInfo {
    width: 50%;
}

.googlemaps , .googlemaps1, .googlemaps2{
    width: 50%;
    background-color: grey;
    border: 2px solid white;
}


/* Algemene Info */

.algemeneInfo {
    margin-bottom: 200px;
}

.infovelden {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: space-between;

    z-index: -1;
}

.infoveld {
    width: 600px;
    height: 400px;
    margin-top: 15px;
    margin-right: 15px;
    padding-top: 10px;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    cursor: pointer;


    border: solid 5px white; 
    clip-path: polygon( 
        calc(0% + 4px) calc(0% + 4px), /* top left */
        calc(100% - 4px) calc(0% + 4px), /* top right */
        calc(100% - 4px) calc(100% - 4px), /* bottom right */
        calc(0% + 4px) calc(100% - 4px) /* bottom left */
    );

    text-decoration: none;
   
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;

    -webkit-transition: height 0.5s ease-in-out, width 0.7s ease-in-out, clip-path 0.6s linear, padding-top 0.1s; /* Safari */
    transition: height 0.5s ease-in-out, width 0.7s ease-in-out, clip-path 0.6s linear, padding-top 0.1s;
}

.infoveld:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding-top: 0px;
    text-decoration-color: white;
}

.infoveldOpened {
    width: 100%;
    height: inherit;
}

.infoveldSmallened {
    width: 10%;
    height: 600px;
}

.infoveldSmallened .infoveldDiv .title {
    opacity: 0;
}

.infoveldOpened .infoveldDiv, .infoveldOpened .infoveldText {
    margin-left: 25px;
    margin-right: 25px;
}

.infoveldDiv {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.infoveldText {
    display: none;
    overflow: hidden;
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
    color: black;
    margin-top: 30px;

    text-align: justify;
    text-justify: inter-word;
}

.infoveldText p {
    display: inline-block;
    text-decoration: none;
}

.infoveldDiv .title {
    color: white;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    min-width: 0;
    pointer-events: none;

    opacity: 1;
    
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}

.infoveldDiv img {
    max-width: 100px;
    max-height: 50px;
    pointer-events: none;
}

.infoveldOpened .infoveldDiv .arrowDown {
    transform: rotate(180deg);
}

.portrait {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border: 5px solid #f2be93;
    min-height: 400px;
}

.ive {
    background-image: url('assets/img/IvePhoto.png');
}

.wim {
    background-image: url('assets/img/wimPhoto.png');
}

.text-emphasis {
    font-weight: bold;
    
}

.titleBar {
   background-color: #F1F1F1;
}

.hoursTableLarge {
    display: block;
}

.hoursTableSmall {
    display: none;
}

.hoursTableSmall td {
    padding: 10px;
}

/* @media */

@media (min-width: 576px) {

 }

@media (min-width: 768px) {

 }

@media (min-width: 992px) { 

 }

@media (min-width: 1200px) {
    .footer {
        display: fixed;
    }
 }


@media (max-width: 575.98px) {

 }

 @media (max-width: 610px) {
    .page {
        padding-left: 0;
        padding-right: 0;
        padding-top: 100px;
    }

    .whoGoldBorder {
        padding-left: 0;
        padding-right: 0;
    }

    .domeinen, .infovelden {
        padding-right: 5px;
        padding-left: 5px;
    }

    .domeinOpened {
        height: 900px;
    }

    .contactInfo {
        padding-left: 15px;
        padding-right: 15px;
    }

    .googlemaps , .googlemaps1, .googlemaps2 {
        border: none;
    }

    body {
        padding-bottom: 0;
    }

    .footer {
        position: relative;
    }
}

@media (max-width: 767.98px) {
    .backgroundIndex {
        height: 50vh;
    }

    .heroImage {
        height: 40vh;
    }

    .heroImage img {
       width: 90%;
    }

    .textRow, .whoGold .textRow{
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .footerLogo {
        justify-content: start;
        margin-right: 0px!important;
    }

    .footerItem {
        width: 100%;
    }

    .footerItem.footerLogo {
        margin-right: 0px!important;

    }

    .contact {
        flex-direction: column;
    }

    .googlemaps, .googlemaps1, .googlemaps2 {
        width: 100%;
        height: 400px;
    }

    .contactInfo {
        width: 100%;
    }

    .absolute {
        position: relative;
    }

    .scroll {
        display: none;
    }

    .hoursTableSmall {
        display: block;
    }

    .hoursTableLarge {
        display: none;
    }
 }

@media (max-width: 991.98px) {
    .pareyns-column {
        flex-direction: column-reverse;
    }   
}

@media (max-width: 1199.98px) {
    .domeinen {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
    }

    .domein {
        flex-direction: column;
        width: 100%;
        height: 100px;
        transition: none;
    }

    .domeinSmallened {
        width: 100%;
    }

    .domeinOpened {
        height: inherit!important;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .domeinOpened.domeinLarge{
        height: inherit;
    }

    .domeinDiv img {
        width: 100px;
    }

    .domeinDiv .title {
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 1em;

    }

    .domeinDiv .arrowDown {
        display: none;
    }

    .domeinSmallened .domeinDiv .title {
        opacity: 1;
    }

    


    .infovelden {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-content: center;
    }

    .infoveld {
        flex-direction: column;
        width: 100%;
        height: 100px;
    }

    .infoveldSmallened {
        width: 100%;
    }

    .infoveldOpened {
        height: inherit;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .infoveldDiv img {
        width: 100px;
    }

    .infoveldDiv .title {
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 1em;

    }

    .infoveldDiv .arrowDown {
        display: none;
    }

    .infoveldSmallened .infoveldDiv .title {
        opacity: 1;
    }
    
 }

.locationText {
    display: flex;
    flex-direction: row;
    text-align: start;
}