body, html { margin: 0; padding: 0; width: 100%; height: 100%; color: #676767; }
body { font-family: "Maven Pro", sans-serif; font-weight: inherit; letter-spacing: .5px; font-size: 14px; line-height: 24px; }
.nobottommargin { margin-bottom: 0 !important; }
.notopmargin { margin-top: 0 !important; }
.textcolor1 { color: #333 }
    .textcolor1 h3 { color: #26679d }
.backcolor1 { background-color: #ebebe7; color: #333 }
.backcolor2 { background-color: #669cd0; color: #fff }
.backcolor1 h3 { color: #333 }
h1, h2, h3 { font-family: "Montserrat", sans-serif; }
h1 { text-transform: uppercase; font-weight: 400; font-size: 32px; line-height: 36px; text-align: center; letter-spacing: .5px; color: #013f5f}
h2 { text-transform: uppercase; font-weight: 600; font-size: 30px; line-height: 35px; text-align: center }
h3 { text-transform: uppercase; font-weight: 600; font-size: 25px; line-height: 30px; }
.h3underline h3 { border-bottom: 1px solid #333; }
h2.headertitle { color: #fff }

 h2, h3 { text-transform: uppercase; }



.wrapper { width: 100%; display: flex; justify-content: center; position: relative; padding: 40px 0 }
    .wrapper > div { max-width: 1200px; width: 100%; position: relative }


.logo { position: absolute; left: 72px; top: 15px; width: 250px; height: 99px; display: block; background: url(../css/LogisticsParkMoerdijk.png) no-repeat; background-size: auto; z-index: 9999; background-size: 250px 99px; }
/* Icons */
.icon { width: 25px; height: 25px; border: 1px solid #333; border-radius: 50%; display: inline-block; padding: 1px; margin-left: 10px; background-size: 12px 12px !important; background-position: center !important; }
    .icon:hover { background-color: #999 }
    .icon:first-child { margin-left: 0 }

.centertext > div { text-align: center; padding: 0 20px }
.verticalcenter .scaletxt { display: flex; flex-direction: column; justify-content: center; }

/*  Header */
.wrapper.nav { background: #fff; margin: 0;padding:0 }
h2.headertitle { text-shadow: 5px 5px 5px #333;}
.topbar { height: 85px; left: 0; overflow: visible; padding: 0; width: 100%; z-index: 999; margin-bottom: 0; margin-top: 0px; display: flex; justify-content: flex-end; align-items: center; width: 100%; }
    .topbar .socialtop { margin-right: 20px; margin-top: 4px }

#nav { z-index: 999; margin-right:20px}
    #nav .touch { text-transform: uppercase; font-weight: 600; border-radius: 5px; color: #fff; cursor: pointer; display: none; font-size: 12px; line-height: 40px; position: relative; z-index: 999; right: 10px; top: 10px; width: 35px; height: 25px; position: absolute; top: 17px; }
    #nav li { position: relative; list-style: none; text-align: left; display: inline-block; margin: 0 5px }
        #nav li a { color: #333; display: block; text-decoration: none; font-size: 20px; margin: 0; padding-left: 8px; padding-right: 8px }
            #nav li a:active, #nav li a:hover { text-decoration: underline }

.menuonheader .topbar { height: 0; }
    .menuonheader .topbar > nav, .menuonheader .topbar > div { padding-top: 80px }

.scrolled .down-arrow{display:none}
.down-arrow {  position: absolute;  top: calc(100vh - 60px);  left: calc(50% - 14px);  width: 0;  height: 30px;  border: 2px solid #fff;  border-radius: 2px;z-index:1000; animation: jumpInfinite 1.5s infinite;}
.down-arrow:after { content: " ";  position: absolute;  top: 12px;  left: -10px;  width: 16px;  height: 16px;  border-bottom: 4px solid #fff;  border-right: 4px solid #fff;  border-radius: 4px;  transform: rotateZ(45deg);}
@keyframes jumpInfinite {  0% {    margin-top: 0;  }  50% {    margin-top: 20px;  }  100% {    margin-top: 0;  }}
/* Vimeo */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
    .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* imageblock */
.imgblock .smallbar { display: flex; justify-content: space-between; padding: 0 5px; flex-flow: row wrap; }
.col2 > div > div { width: calc((100% - 30px) / 2); }
.col3 > div > div { width: calc((100% - 30px) / 3); }
.col4 > div > div { width: calc((100% - 30px) / 4); }
.col5 > div > div { width: calc((100% - 30px) / 5); }

.imgblock > div .imgcolwide { width: 100% }

.photoitem { text-align: center; position: relative }
    .photoitem img { width: 100%; margin-bottom: -10px }
    .photoitem h3 { text-transform: uppercase; font-weight: 600;font-size:18px;line-height:22px }
.wrapper > div.photoitem { width: 100%; max-width: 3000px }


.widephoto h3 { position: absolute; top: 30%; font-size: 30px; text-shadow: 2px 2px 10px #000; width: 100%; text-align: center; color: #fff; }

.col2 .imgcolwide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.col3 .imgcolwide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.col4 .imgcolwide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.col5 .imgcolwide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.imgcolwide > a > img { width: 100%; height: auto; display: block }


.smallbar .col1 { width: 100%; max-width: 500px; margin: 0 auto; }
.wrapper.textimagecombi > div { display: block; }
.wrapper.textimagecombi .scaleimg { width: 100%; padding: 0; }
    .wrapper.textimagecombi .scaleimg > img { width: 100% }
.textimagecombi > div > div { padding: 0 20px 20px 20px }
.scaletxt .textblock { max-width: 500px; }
.textblock .toppicon { width: 20% }
.iscale20 img { width: 20% }
.iscale30 img { width: 30% }
.iscale50 img { width: 50% }
.bottomline { position: absolute; bottom: 0px; }
.centertext .bottomline { left: 0; width: 100% }
a { color: #faa619; text-decoration: none; }
.distancetable td { padding:3px 10px}

.textblock .col1 { font-size:15px;line-height:28px}


 a .arrow { width: 2rem; border-top: 2px solid currentColor; display: inline-block; vertical-align: middle; margin-left: 1em; position: relative; transition: 0.2s; }
 a:hover .arrow { width: 3rem; }
a .arrow:after { border: 2px solid currentColor; border-top-width: 2px; border-left-width: 2px; border-left-width: 0; border-top-width: 0; content: ""; display: inline-block; height: auto; padding: 2.5px; position: absolute; right: 0; top: 50%; width: auto; transition: 0.1s; transform: translateY(-4.5px) rotate(-45deg); }
                            .scaleimg { overflow: hidden }
.scaleimg > img { width: 100%; height: auto; object-fit: cover; transform: scale(1); transition: transform 2s ease; display: block; }
.wrapper.inview .scaleimg > img { transform: scale(1.1); }
.scaleimg:hover > img { transform: scale(1.1); }


.wrapper.footer > div > div:not(:last-child) { margin-right: 20px; }
.footer .icon{height:30px;width:30px;border:2px solid #eee}

.fullscreen-header { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;   transform: scale(1);background-size: cover; background-position: center; text-align: center; color: white; }
    .fullscreen-header h2 { font-size: 60px !important; line-height: 85px !important; color: #ffffff !important;  margin: 260px; font-family: "Montserrat", sans-serif; max-width: 900px; } 



.small-header { position: relative; width: 100%; height: 25vw; min-height: 200px; overflow: hidden; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; text-align: center; color: white; }
.headertitleblock { position: absolute; bottom: 0; background-color: rgba(38,103,157,0.8); padding: 0 30px; }
    .headertitleblock .back { background: #26679d; margin: 0; opacity: 0.8; position: absolute; width: 100%; height: 100%; }
    .headertitleblock h1 { padding: 0 25px; position: relative }


.wrapper.footer { background-color: #669cd0;display: block; color: #fff; padding: 30px 0; margin: 0 }
    .wrapper.footer h3 { font-weight: 400; color: #013f5f; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;line-height:20px }
    .wrapper.footer > div { justify-content: space-between; padding: 0 20px; width: calc(100% - 40px);}

        .wrapper.footer > div > div:not(:last-child) { margin-right: 20px; }

.wrapper.notopmargin {padding-top:0}
.wrapper.nobottommargin {padding-bottom:0}
.wrapper.columnmargin.col3 >div>div>a:not(:last-child){padding-right:15px;}

.footermenu ul { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0 }
    .footermenu ul > li { position: relative; list-style: none; text-align: left; display: inline-block; width: calc((100% - 20px) / 3); min-width: 150px }
        .footermenu ul > li > a { color: #fff; text-decoration: none }

.wrapper.footerbar { background: #000; color: #fff; height: 25px; padding: 20px 0; margin: 0 }
    .wrapper.footerbar .left { position: absolute; left: 0; }
    .wrapper.footerbar .right { position: absolute; right: 0 }
    .wrapper.footerbar a { text-decoration: none; color: #ccc; font-size: 8px }

.largefont { font-size: 22px; font-weight: 300; line-height: 30px; }

@media screen and (max-width: 1300px) {
    body { font-size: 13px; line-height: 24px }
    .fullscreen-header h2 { font-size: 60px !important; line-height: 65px !important; font-family: "Montserrat", sans-serif; margin: 0 125px }
    #nav li { margin: 0 }
        #nav li a { font-size: 16px; }
}


@media screen and (max-width: 1000px) {
    .fullscreen-header h2 { font-size: 50px !important; line-height: 55px !important; font-family: "Montserrat", sans-serif; margin: 0 50px }
    #nav li { margin: 0 }
        #nav li a { font-size: 11px; }
    .col4 > div > div { width: calc((100% - 30px) /2); }
    .col5 > div > div { width: calc((100% - 30px) /2); }
}

@media screen and (max-width: 750px) {
    .socialtop { display: none }


    .topbar #nav { right: 0; width: 100%; z-index: 9999; }
        .topbar #nav .menubar { position: absolute; top: 30px; display: none; right: 0 }
    .tssopbar #nav .touch { color: #ee7219; display: block; font-weight: 800; font-size: 16px; line-height: 25px; height: 25px; position: absolute; right: 20px; text-transform: uppercase; top: 10px; width: 70px; }

    .topbar #nav .touch { height: 23px; width: 35px; position: absolute; top: 17px; right: 20px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }

    .topbar #nav ul { padding: 0; }
        .topbar #nav ul li { padding: 0; left: 0px; display: block; line-height: 40px; height: 40px; padding-left: 20px; width: 150px; background: #26679d; color: #fff }

            .topbar #nav ul li a { color: #fff }
}

@media screen and (min-width: 750px) {
    .wrapper.textimagecombi > div { display: flex }
    .wrapper.textimagecombi .scaleimg { width: 50%; padding: 0; }
    .wrapper.textimagecombi > div > .scaleimg > img { object-fit: cover; width: 50%; min-height: 100%; min-width: 100%; }
    .wrapper.textimagecombi > div > .scaletxt { width: calc(50% - 40px); padding-bottom: 30px; align-items: center; }

    .wrapper:nth-child(even) div > .scaleimg { order: 2; }
    .wrapper:nth-child(even) div > div { order: 1; }
}

@media screen and (min-width: 600px) {
    .wrapper.footer > div { display: flex }
        .wrapper.footer > div > div { width: calc((100% - 20px) / 3); }
    .smallbar .col2 { display: flex; justify-content: center; }
        .smallbar .col2 > span { width: calc((100% - 20px) / 2); padding: 0 20px }
            .smallbar .col2 > span:not(:last-child) { margin-right: 20px; }
}

@media screen and (max-width: 600px) {
    .col4 h3 { font-size: 12px; }
    .col5 h3 { font-size: 12px; }
    h1 { font-size: 18px; line-height: 26px; }

    .fullscreen-header h2 { font-size: 35px !important; line-height: 40px !important; font-family: "Montserrat", sans-serif; margin: 0 50px }
    #nav li a { font-size: 11px !important; }
    .wrapper.footer > div > div { width: 100%; }
    .gglogo { height: 70px; background-size: auto; background-size: 70px 70px; }
}


.hamburgermenu { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>'); }

.youtube.black { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" ><path fill="%2333" d="M282 256.2l-95.2-54.1V310.3L282 256.2zM384 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm14.4 136.1c7.6 28.6 7.6 88.2 7.6 88.2s0 59.6-7.6 88.1c-4.2 15.8-16.5 27.7-32.2 31.9C337.9 384 224 384 224 384s-113.9 0-142.2-7.6c-15.7-4.2-28-16.1-32.2-31.9C42 315.9 42 256.3 42 256.3s0-59.7 7.6-88.2c4.2-15.8 16.5-28.2 32.2-32.4C110.1 128 224 128 224 128s113.9 0 142.2 7.7c15.7 4.2 28 16.6 32.2 32.4z"/></svg>') }

.linkedin.black { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  ><path fill="%2333" d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>'); }

.vimeo.black { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%2333" d="M447.8 153.6c-2 43.6-32.4 103.3-91.4 179.1-60.9 79.2-112.4 118.8-154.6 118.8-26.1 0-48.2-24.1-66.3-72.3C100.3 250 85.3 174.3 56.2 174.3c-3.4 0-15.1 7.1-35.2 21.1L0 168.2c51.6-45.3 100.9-95.7 131.8-98.5 34.9-3.4 56.3 20.5 64.4 71.5 28.7 181.5 41.4 208.9 93.6 126.7 18.7-29.6 28.8-52.1 30.2-67.6 4.8-45.9-35.8-42.8-63.3-31 22-72.1 64.1-107.1 126.2-105.1 45.8 1.2 67.5 31.1 64.9 89.4z"/></svg>'); }

.youtube.white { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  ><path fill="%23fff" d="M282 256.2l-95.2-54.1V310.3L282 256.2zM384 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm14.4 136.1c7.6 28.6 7.6 88.2 7.6 88.2s0 59.6-7.6 88.1c-4.2 15.8-16.5 27.7-32.2 31.9C337.9 384 224 384 224 384s-113.9 0-142.2-7.6c-15.7-4.2-28-16.1-32.2-31.9C42 315.9 42 256.3 42 256.3s0-59.7 7.6-88.2c4.2-15.8 16.5-28.2 32.2-32.4C110.1 128 224 128 224 128s113.9 0 142.2 7.7c15.7 4.2 28 16.6 32.2 32.4z"/></svg>') }

.linkedin.white { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" ><path  fill="%23fff" d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>'); }

.vimeo.white { background: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M447.8 153.6c-2 43.6-32.4 103.3-91.4 179.1-60.9 79.2-112.4 118.8-154.6 118.8-26.1 0-48.2-24.1-66.3-72.3C100.3 250 85.3 174.3 56.2 174.3c-3.4 0-15.1 7.1-35.2 21.1L0 168.2c51.6-45.3 100.9-95.7 131.8-98.5 34.9-3.4 56.3 20.5 64.4 71.5 28.7 181.5 41.4 208.9 93.6 126.7 18.7-29.6 28.8-52.1 30.2-67.6 4.8-45.9-35.8-42.8-63.3-31 22-72.1 64.1-107.1 126.2-105.1 45.8 1.2 67.5 31.1 64.9 89.4z"/></svg>'); }