@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?qtxorn');
  src:  url('fonts/icomoon.eot?qtxorn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?qtxorn') format('truetype'),
    url('fonts/icomoon.woff?qtxorn') format('woff'),
    url('fonts/icomoon.svg?qtxorn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"], .pcAlert .dxpc-closeBtn:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-download:before {
  content: "\e91e";
}
.icon-kruis:before {
  content: "\e908";
}
.icon-aarde:before {
  content: "\e900";
}
.icon-appstore:before {
  content: "\e901";
  color: #5290cd;
}
.icon-email .path1:before {
  content: "\e902";
  color: rgb(82, 144, 205);
}
.icon-email .path2:before {
  content: "\e903";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-email .path3:before {
  content: "\e904";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-email .path4:before {
  content: "\e905";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-facebook .path1:before {
  content: "\e906";
}
.icon-facebook .path2:before {
  content: "\e907";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-kruis:before {
  content: "\e908";
}
.icon-kvk .path1:before {
  content: "\e909";
}
.icon-kvk .path2:before {
  content: "\e90a";
  margin-left: -1em;
}
.icon-kvk .path3:before {
  content: "\e90b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-linkedin:before {
  content: "\e90c";
}
.icon-locatie .path1:before {
  content: "\e90d";
  color: rgb(82, 144, 205);
}
.icon-locatie .path2:before {
  content: "\e90e";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-locatie .path3:before {
  content: "\e90f";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-pijl-links:before {
  content: "\e910";
}
.icon-pijl-rechts:before {
  content: "\e911";
}
.icon-playstore:before {
  content: "\e912";
  color: #5290cd;
}
.icon-telefoon .path1:before {
  content: "\e913";
  color: rgb(82, 144, 205);
}
.icon-telefoon .path2:before {
  content: "\e914";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-twitter .path1:before {
  content: "\e915";
}
.icon-twitter .path2:before {
  content: "\e916";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-vernieuwen:before {
  content: "\e917";
}
.icon-whattsapp .path1:before {
  content: "\e918";
}
.icon-whattsapp .path2:before {
  content: "\e919";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-youtube:before {
  content: "\e91a";
}
.icon-faciliteiten:before {
  content: "\e91b";
  color: #fff;
  display:block;
}
.icon-implementatie:before {
  content: "\e91c";
  color: #fff;
  display:block;
}
.icon-training:before {
  content: "\e91d";
  color: #fff;
  display:block;
}
@font-face {
    font-family: 'Marker';
    src: url('fonts/Marker.eot');
    src: url('fonts/Marker.eot?#iefix') format('embedded-opentype'), url('fonts/Marker.woff2') format('woff2'), url('fonts/Marker.woff') format('woff'), url('fonts/Marker.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-display: swap;
}

@font-face {
    font-family: 'TheBoldFont';
    src: url('fonts/TheBoldFont.eot');
    src: url('fonts/TheBoldFont.eot?#iefix') format('embedded-opentype'), url('fonts/TheBoldFont.woff2') format('woff2'), url('fonts/TheBoldFont.woff') format('woff'), url('fonts/TheBoldFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merlo-RoundThin';
    src: url('fonts/Merlo-RoundThin.eot');
    src: url('fonts/Merlo-RoundThin.eot?#iefix') format('embedded-opentype'), url('fonts/Merlo-RoundThin.woff2') format('woff2'), url('fonts/Merlo-RoundThin.woff') format('woff'), url('fonts/Merlo-RoundThin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CentraleSansRegular';
    src: url('fonts/CentraleSansRegular.eot');
    src: url('fonts/CentraleSansRegular.eot?#iefix') format('embedded-opentype'), url('fonts/CentraleSansRegular.woff2') format('woff2'), url('fonts/CentraleSansRegular.woff') format('woff'), url('fonts/CentraleSansRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CentraleSans-Bold';
    src: url('fonts/CentraleSans-Bold.eot');
    src: url('fonts/CentraleSans-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/CentraleSans-Bold.woff2') format('woff2'), url('fonts/CentraleSans-Bold.woff') format('woff'), url('fonts/CentraleSans-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marcher-Book';
    src: url('fonts/Marcher-Book.eot');
    src: url('fonts/Marcher-Book.eot?#iefix') format('embedded-opentype'), url('fonts/Marcher-Book.woff2') format('woff2'), url('fonts/Marcher-Book.woff') format('woff'), url('fonts/Marcher-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --homeSlideWidth: 560px;
}

/*Defaults*/
* {
    outline: none !important;
}

header .errorContentContainer.mobiel, .errorContentContainerOutside.mobiel {
    display: none;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.mobileTaal {
    display: none;
}

nav a .icon-pijl-rechts:before, .btnTrainingTerug, .btnFilterOpenen {
    display: none !important;
}

.mobileSubmenu, .mobileButtonTraining, .mobileTekst, .fotoMobiel {
    display: none;
}

.bgBlauw {
    background: rgb(0,186,238);
}

.bgGrijsBlauw {
    background: rgb(121,161,182);
}

.bgOranje {
    background: rgb(255,120,0);
}

.bgGeel {
    background: rgb(244,188,0);
}

.bgDonkerBlauw {
    background: rgb(54,63,69);
}

.bgLichtBlauw {
    background: rgb(204,241,251);
}

.bgGrijs {
    background: rgb(241,241,241);
}

.smallCol {
    width: 33%;
}

.bigCol {
    width: 67%;
}

p {
    margin: 0;
}

    p.intro, div.intro {
        display: block;
        font-size: 17px;
        line-height: 38px;
    }

        div.intro.referentieIntro {
            display: flex;
            flex-wrap: wrap;
        }

            div.intro.referentieIntro .introTekst {
                width: calc(100% - calc(100% / 3));
            }
        div.intro.referentieIntro img{
            width:100%;
            height:calc(100% - 10px);
            object-fit:contain;
            object-position:center;
            margin:0 !important;
        }

            div.intro.referentieIntro .postITContainer .postITTekst {
                padding:50px 10px 0;
                margin:0;
                height:100%;
            }
            div.intro.referentieIntro .postITContainer .postIT {
                background: url(/images/postIT_grijs.svg) no-repeat;
            }
.datum {
    font-family: 'CentraleSans-Bold';
    color: rgb(82, 144, 205);
    font-size: 15px;
    display: inline-block;
    margin: 0 5px 0 0;
}

.clear {
    clear: both;
}

.clear70 {
    height: 70px;
    clear: both;
}

#content a, .trainingDetailsTekst a, .contactTekst a, #trainingen .intro a {
    color: rgb(82, 144, 205);
    text-decoration: none;
    transition: ease-in-out opacity 0.3s;
}

.trainingDetailsTekst a, .contactTekst a {
    color: rgb(82, 144, 205);
    text-decoration: none;
}

#content a span {
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 10px;
}

#content a:hover, .trainingDetailsTekst a:hover, .contactTekst a:hover, #trainingen .intro a:hover {
    opacity: 0.7;
}

h1 {
    font-family: 'TheBoldFont';
    font-size: 34px;
    line-height: 40px;
    letter-spacing: 1.7px;
    color: rgb(54,63,69);
    font-weight: normal;
    margin: 0 0 40px;
    padding: 0;
}

#homeContent h1, #personeel h1 {
    color: #FFF;
    margin: 0;
}

#personeel h1 {
    color: rgb(54, 63, 69);
}

h2, h3 {
    font-family: 'TheBoldFont';
    font-size: 22px;
    letter-spacing: 1.1px;
    margin: 0 0 50px;
    font-weight: normal;
}

#content h2, #referenties h2, #klanten h2 {
    margin: 0;
}

.trainingDetails h2 {
    margin: 0 0 30px;
}

.trainingDetails strong {
    font-family: 'CentraleSans-Bold';
}

#blogOverzicht .blogOverzicht article h2, #coEventOverzicht .coEventOverzicht article h2, #personeel h3, .referentieSlide h2, h2.quote {
    font-family: 'CentraleSans-Bold';
    color: rgb(82, 144, 205);
    margin: 0 0 35px;
    letter-spacing: normal;
}
    h2.quote{
        font-size:40px;
        line-height:normal;
        margin:0 0 40px !important;
    }
    #personeel h3 {
        margin: 0 0 10px;
    }

#content h3, #training h3, #coeventIntro h3, #coevent h3, #referenties h3 {
    font-family: 'CentraleSans-Bold';
    font-size: 17px;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

h4, h5, h6 {
    font-family: 'CentraleSans-Bold';
    margin: 0;
    font-size: 23px;
    font-weight: normal;
}

#referenties h4 {
    font-size: 15px;
}

h5 {
    font-size: 17px;
    margin: 50px 0 0;
}

#blogOverzicht .smallCol.blogDetail h3, #coEventOverzicht .smallCol.coEventDetail h3, #trainingOverzicht .smallCol.traingingDetail h3 {
    margin: 13px 0 0;
    color: #FFF;
}

.smallCol h5:first-of-type {
    margin: 0;
}

footer h4, #contactGegevens h4 {
    color: rgb(82,144,205);
    margin: 0 0 25px;
}

#homeOnzeKlanten h2, #homeOnzeMensen h2 {
    margin: 0 0 25px;
}

#homeBlogsEnMeer h2 {
    color: #FFF;
}

#homeBlogsEnMeer h3 {
    font-family: 'CentraleSans-Bold';
    margin: 0 0 40px;
    color: rgb(82,144,205);
}

.btnWit, .btnGrijs, .btnBlauw, .btnGrijsSmall, .btnWitSmall, .btnGrijsVerzenden {
    text-decoration: none;
    display: inline-flex;
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'CentraleSans-Bold';
    height: 45px;
    border: 1px solid #FFF;
    padding: 0 30px;
    margin: 0 10px;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.btnGrijsSmall, .btnWitSmall {
    height: 30px;
    padding: 0;
    transition: ease-in-out opacity 0.3s;
}

.btnGrijsSmall {
    padding: 0 10px;
    color: rgb(54,63,69) !important;
    background: rgb(239,239,239);
    margin: 0;
    font-family: 'CentraleSansRegular';
    transition: ease-in-out all 0.3s !important;
}

    .btnGrijsSmall:hover {
        background: rgb(203,241,251);
        color: #000;
        opacity: 1 !important;
    }

.btnWitSmall:hover {
    opacity: 0.7;
}

.btnBlauw {
    border: 1px solid rgb(0,186,238);
    color: rgb(0,186,238);
}

.btnGrijs {
    border: 1px solid rgb(54,63,69);
    color: rgb(54,63,69);
}

.btnGrijsVerzenden {
    border: 1px solid rgb(54,63,69) !important;
    color: rgb(54,63,69) !important;
    margin: 0;
    font-size: 14px !important;
    padding: 0 30px !important;
}

    .btnGrijsVerzenden span {
        font-size: 14px !important;
    }

    .btnGrijsVerzenden:hover {
        opacity: 1 !important;
    }

.btnGrijs.btnTransparent {
    border: 1px solid rgba(54,63,69, 0);
}

.btnWit.btnTransparent {
    border: 1px solid rgba(54,63,69, 0);
}

.btnWit span, .btnGrijs span, .btnBlauw span, .btnGrijsVerzenden span.icon-pijl-rechts {
    font-size: 15px;
    padding: 0 0 0 35px;
    transition: ease-in-out all 0.1s;
}

.btnWit:hover span, .btnGeel:hover span, .btnGrijs:hover span, .btnBlauw:hover span, .btnGrijsVerzenden:hover span.icon-pijl-rechts {
    transform: translateX(4px);
}

.btnGeel, .btnWitTransparent {
    position: relative;
    text-decoration: none !important;
    display: inline-flex;
    font-size: 22px;
    letter-spacing: 1.1px;
    color: rgb(54,63,69);
    font-family: 'TheBoldFont';
    height: 60px;
    border: 1px solid rgb(244,188,20);
    background: rgb(244,188,20);
    padding: 0 25px;
    margin: 0 0 10px;
    align-items: center;
    box-sizing: border-box;
}

.btnTrainingDetails {
    color: rgb(54,63,69) !important;
}

.btnWitTransparent {
    border: 0;
    background: transparent;
    color: #FFF;
    transition: ease-in-out opacity 0.3s;
}

    .btnWitTransparent:hover {
        opacity: 0.7;
    }

    .btnGeel.small, .btnWitTransparent.small {
        font-family: 'CentraleSans-Bold';
        height: 45px;
        font-size: 14px;
        padding: 0 65px 0 25px;
    }

.btnGeel span {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 15px;
    transition: ease-in-out all 0.1s;
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.btnNoBorder {
    border: 0 !important;
}

.btnMeerladen {
    display: inline-flex !important;
    padding: 0 30px !important;
    color: rgb(0,186,238) !important;
}
/*Defaults*/
body {
    margin: 0;
    padding: 18px 15px;
    overflow-x: hidden;
    font-family: 'CentraleSansRegular';
    font-size: 15px;
    color: rgb(54,63,69);
}

.stift {
    position: absolute;
    left: calc(100% - 343px);
    top: 640px;
    pointer-events: none;
    z-index: 2000;
    transform: translate(400px, -300px);
}

    .stift.pauze {
        display: none;
    }

.stiftItem.stift.initialised {
    transform: translate(0,0);
}

.stiftLijn {
    position: absolute;
    top: 680px;
    left: calc(100% - 340px);
    height: 0;
    width: 11px;
    background-image: url('/images/stiftstreep.png');
    background-repeat: no-repeat;
    background-position: center top;
    pointer-events: none;
}

    .stiftLijn.animated {
        transition: ease-in-out height 0.3s;
    }

.stift.animated {
    transition: ease-in-out top 0.3s;
}

.stiftHorizontaal {
    position: absolute;
    height: 11px;
    width: 0;
    background-image: url('/images/stiftstreep_horizontaal.png');
    background-repeat: no-repeat;
    background-position: right top;
    pointer-events: none;
}

#writingHeader {
    position: absolute;
    right: 0;
    top: 90px;
    width: 33%;
}

.wrapperSmall {
    position: relative;
    width: 760px;
    margin: 0 auto;
}

.wrapper {
    position: relative;
    width: 1180px;
    margin: 0 auto;
}

    .wrapper.center {
        text-align: center;
    }

#referenties .wrapper.center {
    margin: 0 auto;
    padding: 0;
}

#content .wrapper, #blogOverzicht .wrapper {
    width: 970px;
}

    #content .wrapper img {
        margin: 0 20px 20px 0;
    }

#content .col33.contentPostIT {
    width: calc(100% / 3);
    position: relative;
    float: right;
}

#onzeMensen .wrapper, #referenties .wrapper, #klanten .wrapper {
    width: 960px;
    padding: 100px 0 200px;
}

#referenties .wrapper, #klanten .wrapper {
    padding: 100px 0;
}

header {
    position: relative;
    width: 100%;
    padding: 0;
    height: calc(100vh - 10px);
    box-sizing: border-box;
    font-family: 'CentraleSans-Bold';
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
}

    header .menuPart {
        position: fixed;
        top: 0;
        left: 15px;
        width: calc(100% - 30px);
        height: 108px;
        box-sizing: border-box;
        padding-top: 18px;
        background: #FFF;
        z-index: 9998;
    }

        header .menuPart .wrapper {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
        }

        header .menuPart.active {
            border-bottom: 1px solid rgb(235,235,235);
        }

    header.volgpagina {
        height: auto;
    }

    header:not(.volgpagina) .extraMenuContainer {
        background: none;
    }

    header .bigCol {
        display: flex;
        padding: 10px 0 0;
        box-sizing: border-box;
    }


    header .logo {
        position: relative;
        padding-top: 5px;
        padding-left: 15px;
        box-sizing: border-box;
    }

    header nav {
        position: relative;
        width: 1180px;
        height: 80px;
        display: flex;
        justify-content: flex-end;
    }

        header nav ul, .mobileSubmenu ul {
            list-style-type: none;
            padding: 27px 0 0;
            box-sizing: border-box;
            margin: 0;
            height: 100%;
        }

            header nav ul li, .mobileSubmenu ul li {
                position: relative;
                display: inline-block;
                padding: 0 65px 0 0;
                z-index: 1000;
            }

                header nav ul li a, .mobileSubmenu ul li a {
                    color: rgb(82,144,205);
                    text-decoration: none;
                    transition: ease-in-out color 0.3s;
                }

                    header nav ul li a.active:after {
                        content: '';
                        display: block;
                        position: relative;
                        margin-bottom: -5px;
                        margin-left: -5px;
                        width: calc(100% + 11px);
                        background-image: url('/images/menu_active.png');
                        background-size: 100%;
                        height: 5px;
                    }

                    header nav ul li a:hover, header .extraMenu a:hover {
                        color: rgb(67,117,164);
                    }

                header nav ul li ul.submenu {
                    position: absolute;
                    display: none;
                    padding: 34px 0 0;
                    border-bottom: 1px solid rgb(235,235,235);
                    height: auto;
                }

                header nav ul li ul.subsubmenu {
                    position: relative;
                    display: none;
                    padding: 0;
                    margin: 0 0 0 -35px;
                    width: calc(100% + 35px + 20px);
                    border-top: 1px solid rgb(235,235,235);
                    min-width: 0;
                }

                header nav ul li:hover .submenu {
                    display: block;
                }

                header nav ul li ul.submenu li {
                    position: relative;
                    border-top: 1px solid rgb(235,235,235);
                    border-left: 1px solid rgb(235,235,235);
                    border-right: 1px solid rgb(235,235,235);
                    padding: 0 20px 0 35px;
                    line-height: 45px;
                    display: block;
                    background: #FFF;
                    box-sizing: border-box;
                    min-width: 200px;
                    transition: background ease-in-out 0.3s;
                    white-space: nowrap;
                }

                header nav ul li ul.subsubmenu li {
                    padding: 0 0 0 60px;
                    border-left: 0;
                    border-right: 0;
                }

                header nav ul li ul.submenu li:first-of-type {
                    border-top: 0;
                }

                header nav ul li ul.submenu li a {
                    color: rgb(54,63,69);
                    display: block;
                }

                header nav ul li ul.submenu li:hover {
                    background: rgb(221,243,250);
                }

                header nav ul li ul.submenu li span {
                    position: absolute;
                    right: 10px;
                    font-size: 7px;
                    line-height: 7px;
                    height: 7px;
                    display: block;
                    top: 10px;
                    padding: 10px;
                    cursor: pointer;
                }

                header nav ul li ul.submenu li.trainingenMenu span.active {
                    transform: rotate(80deg);
                }

    header .extraMenu, header .zoekContainer {
        position: relative;
        padding: 35px 25px 0 0;
        display: flex;
        justify-content: flex-end;
    }

    header .zoekContainer {
        display: none;
        padding: 25px 25px 0 15px;
    }

    header .extraMenu a, header .extraMenu .taalSwith, .taalSwith.mobileTaal a {
        text-decoration: none;
        color: rgb(82, 144, 205);
        display: inline-flex;
        align-items: center;
        height: 25px;
    }

    header .extraMenu .taalSwith {
        position: relative;
        padding-left: 0 !important;
    }

        header .extraMenu .taalSwith img {
            margin: 0 5px;
        }

    header .extraMenu .taalMenu {
        position: absolute;
        top: 60px;
        left: 0;
        display: none;
    }

        header .extraMenu .taalMenu a {
            padding: 0 20px;
            display: block;
            height: 50px;
            line-height: 50px;
            width: 190px;
            background: #FFF;
        }

.taalSwith.mobileTaal a {
    margin-right: 20px;
}

header .extraMenu a.btnZoeken {
    margin: 0 0 0 40px;
}

    header .extraMenu a.btnZoeken span {
        font-size: 16px;
    }

    header .extraMenu a.btnZoeken img {
        display: inline-block;
        margin: 0 10px 0 0;
    }

header .extraMenu .taalSwith {
    padding: 0 40px 0;
}

    header .extraMenu .taalSwith .icon-aarde {
        font-size: 17px;
        display: inline-block;
        padding: 0 10px 0;
        top: 0;
        margin-top: 0px;
    }

    header .extraMenu a span, header .extraMenu .taalSwith span {
        font-size: 25px;
        margin: 2px 5px 0 0;
        position: relative;
    }

header .homeHeader, header .volgHeader {
    display: flex;
    height: calc(100% - 90px);
    width: 100%;
    margin-top: 90px;
}

    header .homeHeader.error404 {
        background-color: rgb(185,239,249);
        background-position: center bottom;
        background-size: 1300px auto;
        background-repeat: no-repeat;
    }

.errorContentContainer {
    position: absolute;
    bottom: 10%;
    left: 46%;
    width: 580px;
    padding: 0 30px;
    text-align: center;
    box-sizing: border-box;
}

    .errorContentContainer .errorContent {
        font-family: 'Marker';
        font-size: 26px;
        color: rgb(43,46,57);
        line-height: normal;
        text-transform: uppercase;
        transform: rotate(-5deg);
    }

        .errorContentContainer .errorContent span {
            font-size: 38px;
            line-height: 36px;
        }

    .errorContentContainer .btnGeel {
        width: 200px;
    }

    .errorContentContainer img {
        height: 150px;
        margin: 30px auto;
    }

header .volgHeader {
    height: 320px;
}

    header .homeHeader .bigCol, header .volgHeader .bigCol {
        background-image: url('/files/bg_homeheader.jpg');
        background-position: left bottom;
        background-size: cover;
    }

        header .homeHeader .bigCol .headerTekst {
            font-family: 'TheBoldFont';
            font-size: 38px;
            text-align: center;
            width: 100%;
            padding: 70px 20px 0 0;
            box-sizing: border-box;
            word-spacing: 5px;
        }

    header .homeHeader .smallCol, header .volgHeader .smallCol {
        padding: 275px 150px 0 90px;
        box-sizing: border-box;
    }

    header .volgHeader .smallCol {
        display: flex;
        padding: 0 0 0 150px;
        align-items: center;
        font-family: 'Marker';
        font-size: 28px;
        color: rgb(43,46,57);
        line-height: 26px;
        text-transform: uppercase;
    }

header .homeHeader .smallCol .btnGeel {
    width: 100%;
}

header .zoekVeldContainer {
    position: relative;
    display: flex;
    background: rgb(242,242,242);
    align-items: center;
    width: 100%;
}

    header .zoekVeldContainer .zoekIcoon {
        width: 50px;
        text-align: center;
    }

    header .zoekVeldContainer .zoekVeld {
        width: calc(100% - 50px - 80px);
    }

    header .zoekVeldContainer .zoekButton {
        width: 60px;
        padding: 0 10px;
    }

        header .zoekVeldContainer .zoekButton a {
            display: inline-flex;
            height: 25px;
            background: #FFF;
            width: 60px;
            justify-content: center;
            align-content: center;
            align-items: center;
            font-family: 'CentraleSans-Bold';
            font-size: 12px;
            text-decoration: none;
            color: rgb(54,63,69);
        }

.kruimelPad {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: rgb(135, 135, 135);
    font-size: 15px;
    font-family: 'CentraleSansRegular';
}

    .kruimelPad a {
        color: rgb(135, 135, 135);
        text-decoration: none;
        transition: ease-in-out opacity 0.3s;
    }

        .kruimelPad a:hover {
            opacity: 0.7;
        }

    .kruimelPad .wrapper, #contact .wrapper {
        position: relative;
        width: 100%;
        padding: 0 0 0 calc((100% / 3) / 3);
        box-sizing: border-box;
    }

#homeContent {
    font-family: 'Marcher-Book';
    position: relative;
    width: 100%;
    text-align: center;
    padding: 100px 0 140px;
    font-size: 17px;
    line-height: 38px;
    color: #FFF;
}

    #homeContent h1 {
        margin: 0 0 70px;
    }

    #homeContent p {
        margin: 0 0 80px;
    }

.writingPostITContainer, .postITContainer {
    position: absolute;
    top: 100px;
    left: calc(100% - 440px);
    width: 200px;
    height: 200px;
    z-index: 1000;
    padding: 10px 0 16px;
    transform: rotate(15deg);
}

#content .col33.contentPostIT .postITContainer {
    position: relative;
    top: auto;
    left: auto;
    transform: rotate(2deg);
    margin: 0 0 0 50px;
}

.postITContainer {
    top: auto;
    left: auto;
    width: 225px;
    height: 225px;
}

#homeOnzeKlanten .col25:nth-of-type(1) .postITContainer {
    transform: rotate(-5deg);
    bottom: 0;
    right: 0;
}

#homeOnzeKlanten .col25:nth-of-type(2) .postITContainer {
    top: 0;
    left: 40px;
    transform: rotate(0);
}

#homeOnzeKlanten .col25:nth-of-type(3) .postITContainer {
    transform: rotate(5deg);
    bottom: 20px;
    right: 60px;
}

#homeOnzeKlanten .col25:nth-of-type(4) .postITContainer {
    transform: rotate(-3deg);
    top: 0;
    left: 0;
}

.writingPostITContainer .postIT, .postITContainer .postIT {
    position: relative;
    height: 100%;
    width: 100%;
    background: url('/images/postIT-vouw-klein.svg') no-repeat;
    background-size: cover;
}

.postITContainer .postIT {
    background: url('/images/postIT.svg') no-repeat;
}

.col25:nth-of-type(2) .postITContainer .postIT, .postITContainer.hoekje .postIT {
    background: url('/images/postIT-vouw.svg') no-repeat;
}

    .postITContainer.hoekje .postIT.klein {
        background: url('/images/postIT-vouw-klein.svg') no-repeat;
    }

.writingPostITContainer .typedText, .postITContainer .postITTekst, .postITContainer .postITTekst.groot {
    position: relative;
    padding: 60px 0 0;
    margin: 0 0 0 -10px;
    width: 100%;
    font-family: 'Marker';
    font-size: 20px;
    color: rgb(43,46,57);
    line-height: 26px;
    text-transform: uppercase;
    transform: rotate(-5deg);
    text-align: center;
}

    .postITContainer .postITTekst.groot {
        font-size: 25px;
        line-height: 30px;
    }

.postITContainer .postITTekst {
    transform: rotate(0);
    font-size: 15px;
    line-height: 26px;
    padding: 60px 20px 0;
    box-sizing: border-box;
    text-align: center;
}

.writingPostITContainer .typedText:after, .volgHeader .typedText:after {
    content: url('/images/stift.png');
    margin-left: -5px;
    margin-top: -20px;
    position: absolute;
    -webkit-animation-name: penschrijven; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.3s; /* Safari 4.0 - 8.0 */
    animation-name: penschrijven;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
}

.volgHeader .typedText.finished:after {
    animation-name: none;
}

.writingPostITContainer .typedText.stop:after {
    display: none;
}

@keyframes penschrijven {
    from {
        transform: translate(0px, -2px);
    }

    to {
        transform: translate(0, -5px);
    }
}

#homeExpertises {
    position: relative;
    padding: 160px 0 170px;
    background: url('/images/bg_pattern.jpg') repeat;
    background-position: center top;
    text-align: center;
    color: rgb(54, 63, 69);
}

    #homeExpertises .wrapper {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;
        display: flex;
        color: #FFF;
        font-family: 'CentraleSansRegular';
        font-size: 15px;
        line-height: 31px;
        z-index: 3000;
    }

        #homeExpertises .wrapper .smallCol {
            padding: 90px 45px 75px;
            position: relative;
        }

            #homeExpertises .wrapper .smallCol span.expertiseItem {
                font-size: 108px;
                height: 110px;
                display: inline-flex;
                align-items: flex-end;
                margin: 0 0 25px;
            }

            #homeExpertises .wrapper .smallCol span.icon-training {
                font-size: 75px;
            }

            #homeExpertises .wrapper .smallCol p {
                margin: 0 0 135px;
            }

    #homeExpertises .buttoncontainer {
        position: absolute;
        bottom: 75px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

#homeOnzeKlanten {
    position: relative;
    padding: 200px 0 180px;
    text-align: center;
    color: rgb(0,186,238);
}

    #homeOnzeKlanten .bigCol {
        display: flex;
    }

        #homeOnzeKlanten .bigCol .col25 {
            position: relative;
            width: 25%;
            height: 350px;
            margin: 0 0 60px;
        }

#homeOnzeMensen {
    position: relative;
    padding: 180px 0 150px;
    color: rgb(0,186,238);
    text-align: center;
}

    #homeOnzeMensen .onzeMensenSlider {
        position: relative;
        margin: 0 0 85px;
        width: 100%;
        height: 390px;
        z-index: 1000;
    }

        #homeOnzeMensen .onzeMensenSlider img {
            width: 240px;
            border: 30px solid #FFF;
            margin: 50px 25px;
        }

        #homeOnzeMensen .onzeMensenSlider a:nth-child(4n+1) img {
            transform: rotate(-5deg);
        }

        #homeOnzeMensen .onzeMensenSlider a:nth-child(4n+2) img {
            transform: rotate(0);
        }

        #homeOnzeMensen .onzeMensenSlider a:nth-child(4n+3) img {
            transform: rotate(5deg);
        }

        #homeOnzeMensen .onzeMensenSlider a:nth-child(4n+4) img {
            transform: rotate(-3deg);
        }

#homeBlogsEnMeer {
    position: relative;
    padding: 120px 0 170px;
    text-align: center;
}

    #homeBlogsEnMeer .wrapperSmall {
        position: relative;
        margin: auto;
        width: calc((100% - 60px) / 3);
        background: #FFF;
        padding: 55px 35px 40px;
        box-sizing: border-box;
        font-family: 'CentraleSansRegular';
        font-size: 15px;
        line-height: 30px;
        text-align: left;
    }

        #homeBlogsEnMeer .wrapperSmall p {
            margin: 0;
        }

        #homeBlogsEnMeer .wrapperSmall span.datum {
            color: rgb(82,144,205);
            font-family: 'CentraleSans-Bold';
            font-size: 15px;
            display: inline-block;
            padding: 0 5px 0 0;
        }

        #homeBlogsEnMeer .wrapperSmall img {
            width: 25%;
            margin: 8px 15px 15px 0;
            float: left;
        }

    #homeBlogsEnMeer .btnGrijs {
        margin: 130px 0 0;
    }

footer {
    position: relative;
    padding: 200px 0 0;
}

    footer.contact {
        padding: 0;
    }

    footer .logo {
        position: relative;
        text-align: center;
        width: 320px;
        margin: 0 auto;
    }

        footer .logo p {
            margin: 20px 0 0;
            font-family: 'Marker';
            font-size: 20px;
            color: rgb(43,46,57);
            line-height: 26px;
        }

    footer .wrapper, #contactGegevens .wrapper {
        display: flex;
        margin: 70px auto 40px;
    }

        footer .wrapper .col25, .persoonContactGegevens .col33, #contactGegevens .wrapper .col25 {
            position: relative;
            width: calc(25% - 24px);
            /*height:260px;*/
            margin: 0 7px;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            font-family: 'CentraleSansRegular';
            font-size: 15px;
            line-height: 31px;
            color: rgb(54, 63, 69);
            background: #FFF;
        }

            footer .wrapper .col25.shadow, .persoonContactGegevens .col33.shadow, #contactGegevens .wrapper .col25.shadow {
                -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.2);
                -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.2);
                box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.2);
            }

            footer .wrapper .col25 span, .persoonContactGegevens .col33 span, #contactGegevens .wrapper .col25 span {
                color: rgb(82,144,205);
                font-size: 45px;
                display: inline-block;
                margin: 0 0 10px;
            }

            footer .wrapper .col25 a, .persoonContactGegevens .col33 a, #contactGegevens .wrapper .col25 a {
                text-decoration: none;
                color: rgb(54, 63, 69);
                transition: ease-in-out 0.3s opacity;
            }

                footer .wrapper .col25 a:hover, .persoonContactGegevens .col33 a:hover, #contactGegevens .wrapper .col25 a:hover {
                    opacity: 0.7;
                }

        footer .wrapper .col75 {
            width: calc(75% - 36px);
            margin: 0;
        }

.formContainer, .aanmeldFormContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    background: url('/images/bg_form.png') no-repeat left bottom;
    height: 480px;
    padding: 50px 50px 0px 80px;
    box-sizing: border-box;
}

    .formContainer a {
        color: rgb(54, 63, 69);
    }

.aanmeldFormContainer {
    background: none;
    padding: 0;
    height: auto;
}

    .formContainer .formLbl, .aanmeldFormContainer .formLbl {
        display: flex;
        width: 65px;
        text-align: right;
        margin: 0 0 8px;
        font-size: 15px;
        font-family: 'CentraleSansRegular';
        color: rgb(54, 63, 69);
        align-items: center;
    }

.formLbl.memobox {
    padding-top: 10px;
    align-items: flex-start;
}

.aanmeldFormContainer .formLbl.keuzeVeld {
    text-align: left;
    width: 200px;
    margin: 0 0 40px;
}

.aanmeldFormContainer .formLbl {
    text-align: left;
    width: 200px;
}

.formContainer .formField, .aanmeldFormContainer .formField {
    display: flex;
    flex-direction: column;
    width: calc(100% - 65px);
    margin: 0 0 8px;
}

    .formContainer .formField.flexEnd {
        align-items: flex-end;
    }

.aanmeldFormContainer .formField {
    width: calc(100% - 200px);
}

    .aanmeldFormContainer .formField.full, .aanmeldFormContainer .formLbl.full {
        width: 100%;
    }

    .aanmeldFormContainer .formField.keuzeVeld {
        margin: 0 0 40px;
    }

.box, .selectBox {
    border: 0;
    height: 40px;
    width: 100%;
    font-size: 15px;
    font-family: 'CentraleSansRegular';
    color: rgb(54, 63, 69);
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 30px;
}

    .box.radiobutton {
        width: 75px;
    }

        .box.radiobutton .dxichCellSys {
            padding: 4px 0 0 0;
            vertical-align: top;
            width: 30px;
        }

    .box.memo {
        padding: 15px;
    }

.selectBox {
    padding: 0 0 0 15px;
}

    .selectBox .dxeButtonEditButton {
        background: none;
        border: 0;
    }

.dxeListBox {
    background-color: white;
    border: 1px solid #EBECED;
    font-size: 15px;
    font-family: 'CentraleSansRegular';
    color: rgb(54, 63, 69);
    width: 100%;
    height: 40px;
    height: 109px;
}

.dxeListBoxItemRow {
    cursor: default;
    height: 40px;
}

.dxichCellSys {
    padding: 0 30px 0 0;
    vertical-align: top;
}

.formContainer .dxichCellSys {
    padding: 4px 0 0;
    width: 30px;
    vertical-align: top;
}

#social {
    position: relative;
    padding: 50px 0;
}

    #social .wrapper {
        margin: 0 auto;
    }

    #social a {
        font-size: 15px;
        font-family: 'CentraleSansRegular';
        color: rgb(54, 63, 69);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin: 0 30px 0 0;
        transition: ease-in-out color 0.3s;
    }

        #social a span {
            color: rgb(82,144,205);
            display: inline-block;
            font-size: 34px;
            padding: 0 10px 0 0;
        }

        #social a:hover {
            color: rgba(54, 63, 69, 0.7);
        }

            #social a:hover span {
                opacity: 1;
            }

#payoff {
    position: relative;
    background: rgb(241,241,241);
    line-height: 50px;
    font-size: 15px;
    font-family: 'CentraleSansRegular';
    color: rgb(135,135,135);
}

    #payoff span {
        display: inline-block;
        padding: 0 8px;
    }

    #payoff a {
        color: rgb(135,135,135);
        text-decoration: none;
        transition: ease-in-out opacity 0.3s;
    }

        #payoff a:hover {
            opacity: 0.7;
        }

    #payoff .wrapper {
        margin: 0 auto;
    }

#content {
    position: relative;
    margin: 80px 0;
    line-height: 30px;
    color: rgb(54,63,69);
}

.shareControls {
    position: relative;
    height: 35px;
    display: flex;
    align-items: center;
    margin: 80px 0 0;
}

    .shareControls p {
        display: inline-block;
        margin: 0 10px 0 0;
        font-family: 'CentraleSans-Bold';
    }

    .shareControls a span {
        text-decoration: none !important;
        color: rgb(82,144,205) !important;
        transition: ease-in-out color 0.3s !important;
        font-size: 35px !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    .shareControls a {
        margin: 0 0 0 10px;
    }

        .shareControls a:hover {
            color: rgb(67,117,164);
        }

#trainingOverzicht, #trainingen, #blogs, #blogOverzicht, #training, #coeventIntro, #coEventOverzicht, #coevent, #hoewijwerken, #personeel {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

    #trainingOverzicht .trainingTopBar span {
        display: none;
    }

    .tekstContainer ul, .trainingDetailsTekst ul, .contactTekst ul, #hoewijwerken ul, #coevent .bigCol ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .tekstContainer ul li, .trainingDetailsTekst ul li, .contactTekst ul li, #hoewijwerken ul li, #coevent .bigCol ul li {
            margin: 0;
            padding-left: 18px;
            background: transparent url(/images/listitem.png) 0 11px no-repeat;
            background-size: 10px;
        }

        #hoewijwerken ul li {
            background: transparent url(/images/listitem-wit.png) 0 11px no-repeat;
            background-size: 10px;
        }

.tekstContainer .intro ul li {
    background: transparent url(/images/listitem.png) 0 14px no-repeat;
    background-size: 10px;
}

#hoewijwerken {
    font-size: 15px;
}

#trainingen, #blogs, #contact {
    margin: 80px 0 90px;
}

#blogs {
    margin: 80px 0 0;
}

.overzichtIntro {
    position: relative;
    width: 67%;
    padding: 0 0 0 calc((100% / 3) / 3);
    box-sizing: border-box;
}

#trainingOverzicht .smallCol, #blogOverzicht .smallCol, #coEventOverzicht .smallCol {
    box-sizing: border-box;
    padding: 25px 0 50px calc((100% / 3) / 3);
}

#trainingOverzicht .trainingOverzicht, #blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht, .trainingTopBar .col50.alignRight {
    display: flex;
    padding: 0 34px 25px;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: flex-start;
    align-content: flex-start;
}

    #trainingOverzicht .trainingOverzicht.traingingDetail {
        padding: 0 17px 25px;
    }

#blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht {
    /*padding: 25px calc((100% / 3) / 3) 200px 30px;*/
    padding: 25px 30px 200px 30px;
}

#coEventOverzicht .coEventOverzicht {
    padding-bottom: 0;
}

    #blogOverzicht .blogOverzicht.blogDetail, #coEventOverzicht .coEventOverzicht.blogDetail, #trainingOverzicht .traingingDetail {
        padding-bottom: 5px;
    }

#trainingOverzicht .trainingOverzicht .training, .trainingHeader .training {
    position: relative;
    width: calc(25% - 34px);
    margin: 25px 17px 0;
    padding: 40px 30px 25px;
    box-sizing: border-box;
    color: #FFF;
    font-family: 'TheBoldFont';
    line-height: 33px;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    cursor: pointer;
    transition: ease-in-out opacity 0.3s;
}

    #trainingOverzicht .trainingOverzicht .training:hover {
        opacity: 0.9;
    }

    #trainingOverzicht .trainingOverzicht .training a, .trainingHeader .training a {
        box-sizing: border-box;
        color: #FFF;
        font-family: 'TheBoldFont';
        line-height: 25px;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 1.7px;
        text-decoration: none;
    }

.trainingHeader .training {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 275px;
    height: 250px;
    margin: 0;
}

#trainingOverzicht .trainingOverzicht .training.opMaat {
    border: 1px solid rgb(82,144,205);
    color: rgb(82,144,205);
}

#trainingOverzicht .trainingOverzicht .training:before, .trainingHeader .training:before {
    position: relative;
    content: "";
    display: block;
    padding-top: calc(100% + 10px); /* initial ratio of 1:1*/
}

#trainingOverzicht .trainingOverzicht .training .contentTraining, .trainingHeader .training .contentTraining {
    position: absolute;
    top: 40px;
    left: 30px;
    bottom: 25px;
    right: 30px;
}

#trainingOverzicht .trainingOverzicht .training span, .trainingHeader .training span {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 17px;
    line-height: 17px;
    font-family: 'CentraleSans-Bold';
    text-transform: uppercase;
    letter-spacing: normal;
}

.filterCol .sectorGroep {
    font-family: 'CentraleSans-Bold';
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: normal;
    line-height: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .filterCol .sectorGroep a {
        color: rgb(54,63,69);
        text-decoration: none;
    }

    .filterCol .sectorGroep.active span {
        transform: rotate(90deg);
    }

    .filterCol .sectorGroep span {
        display: inline-block;
        margin: 0 10px 0 0;
        font-size: 9px;
        transition: ease-in-out all 0.3s;
    }

    .filterCol .sectorGroep .checkboxContainer {
        width: 100%;
        display: none;
    }

.periodeFilter {
    position: relative;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-wrap: wrap;
}

    .periodeFilter .col50 {
        box-sizing: border-box;
        padding-right: 15px;
        width: 50%;
    }

.periodeDateEdit {
    height: 40px;
    background: #EFEFEF;
    border: 0;
}

    .periodeDateEdit input {
        background-color: transparent !important;
        font-family: 'CentraleSansRegular' !important;
        color: rgb(54,63,69) !important;
        font-size: 15px !important;
    }

    .periodeDateEdit .dxeButtonLeft.dxeButtonEditButton {
        border: 0 !important;
        background: none !important;
        padding: 0 10px !important;
    }

.trainingTopBar {
    position: relative;
    padding: 10px 0 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 17px;
    font-family: 'CentraleSans-Bold';
    align-content: center;
    align-items: center;
    height: 100px;
    box-sizing: border-box;
}

    .trainingTopBar .col50 {
        width: 230px;
        display: flex;
        flex-wrap: wrap;
        font-size: 17px;
        font-family: 'CentraleSans-Bold';
        align-content: center;
        align-items: center;
    }

        .trainingTopBar .col50.alignRight {
            width: calc(100% - 230px);
            justify-content: flex-end;
            align-content: center;
            align-items: center;
            padding-bottom: 0 !important;
        }

.activeFiltersContainer {
    padding: 0 51px 30px;
    box-sizing: border-box;
    display: flex;
    font-size: 15px;
}

.btnWeergave {
    position: relative;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: inline-flex;
    background: rgb(204,233,245);
    margin: 0 3px;
    border-radius: 100%;
}

    .btnWeergave:first-of-type {
        margin-left: 15px;
    }

    .btnWeergave .st0 {
        fill: #5290CD;
    }

    .btnWeergave.active {
        background: rgb(82,144,205);
    }

        .btnWeergave.active .st0 {
            fill: #FFF;
        }

.sortDropdown {
    border: 1px solid rgb(54,63,69);
    font-size: 17px;
    font-family: 'CentraleSans-Bold';
    color: rgb(54,63,69);
    margin-left: 15px;
    padding: 0 0 0 10px;
}

    .sortDropdown input {
        height: 100%;
    }

    .sortDropdown .dxeButtonEditButton {
        background: none;
        border: 0;
        padding: 0 15px;
    }

#blogOverzicht .activeFiltersContainer {
    padding: 0 30px 25px;
}

.activeFiltersTitel {
    margin: 0 30px 0 0;
    display: inline-flex;
    height: 30px;
    align-items: center;
    font-family: 'CentraleSansRegular';
    font-size: 15px;
}

.activeFilters a, .activeFilters span.empty {
    display: inline-flex;
    padding: 0 15px;
    height: 30px;
    align-items: center;
    background: rgb(239,239,239);
    margin: 0 3px 10px;
    text-decoration: none;
    color: rgb(54,63,69);
    line-height: 30px;
    position: relative;
    font-family: 'CentraleSansRegular';
    font-size: 15px;
}

.activeFilters span.empty {
    background: none;
}

.activeFilters a:before {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: rgb(54,63,69);
    z-index: 1000;
    position: absolute;
    left: 30px;
    transition: ease-in-out width 0.3s;
}

.activeFilters a:hover:before {
    width: calc(100% - 43px);
}

.activeFilters a span {
    color: rgb(54,63,69);
    font-size: 7px;
    line-height: 30px;
    display: inline-block;
    margin: 0 10px 0 0;
}

.activeFilters a.clearAll {
    color: rgb(135,135,135);
    background: #FFF;
    transition: ease-in-out color 0.3s;
}

    .activeFilters a.clearAll:hover {
        color: rgb(54,63,69);
    }

        .activeFilters a.clearAll:hover:before {
            display: none;
        }

#blogOverzicht .blogOverzicht article, #coEventOverzicht .coEventOverzicht article, #blogOverzicht .blogOverzicht .laadMeer, #blogOverzicht .blogOverzicht .dxdvPagerShowMoreItemsContainer {
    position: relative;
    width: 100%;
    margin: 0 0 20px;
    background: #FFF;
    padding: 20px 55px 20px 20px;
}

#blogOverzicht .blogOverzicht article {
    box-sizing: border-box;
}

#blogOverzicht .blogOverzicht .laadMeer, #blogOverzicht .blogOverzicht .dxdvPagerShowMoreItemsContainer {
    background: none;
    padding: 60px 0 0;
    text-decoration: none;
    color: rgb(82, 144, 205) !important;
    font-size: 25px;
    text-align: center;
    text-decoration: none !important;
}

    #blogOverzicht .blogOverzicht .dxdvPagerShowMoreItemsContainer a {
        color: rgb(82, 144, 205) !important;
        font-size: 25px;
        text-align: center;
        text-decoration: none !important;
    }

#blogOverzicht .blogOverzicht article img, #coEventOverzicht .coEventOverzicht article img {
    height: 220px;
    width: 220px;
    float: left;
    margin: 0 50px 0 0;
    object-fit: contain;
    object-position: center center;
    background: rgb(241,241,241);
}

#blogOverzicht .blogOverzicht article .articleContent, #coEventOverzicht .coEventOverzicht article .articleContent {
    padding: 10px 0;
    line-height: 30px;
}

    #blogOverzicht .blogOverzicht article .articleContent p, #coEventOverzicht .coEventOverzicht article .articleContent p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* number of lines to show */
        height: 60px; /* fallback */
        margin: 0 0 40px;
        font-family: 'CentraleSansRegular';
        font-size: 15px;
        color: rgb(54, 63, 69);
    }

#blogOverzicht .blogOverzicht article a, #coEventOverzicht .coEventOverzicht article a {
    color: rgb(54,63,69);
    text-decoration: none;
}

#blogOverzicht .blogOverzicht article .articleFooter, #coEventOverzicht .coEventOverzicht article .articleFooter {
    display: flex;
    position: relative;
}

    #blogOverzicht .blogOverzicht article .articleFooter .col50, #coEventOverzicht .coEventOverzicht article .articleFooter .col50 {
        width: 50%;
        text-align: right;
    }

        #blogOverzicht .blogOverzicht article .articleFooter .col50:first-of-type, #coEventOverzicht .coEventOverzicht article .articleFooter .col50:first-of-type {
            text-align: left;
        }

#content .blogHeader, .trainingHeader, .coeventHeader {
    position: relative;
}

.trainingHeader, .coeventHeader {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 80px 0 30px;
}

    .trainingHeader .trainingTitelInfo, .coeventHeader .coeventTitelInfo {
        width: calc(100% - 275px);
        box-sizing: border-box;
        padding: 0 0 0 30px;
    }

#content .blogHeader img {
    margin: 0 50px 50px 0;
    float: left;
}

#training .bigCol, #coeventIntro .bigCol, #coevent .bigCol, #hoewijwerken .bigCol, #personeel .bigCol {
    padding: 0 calc((100% / 3) / 3) 200px calc((100% / 3) / 3);
    box-sizing: border-box;
    line-height: 30px;
}

    #training .bigCol ul, #coeventIntro .bigCol ul, #coevent .bigCol ul, #hoewijwerken .bigCol ul, #personeel .bigCol ul {
        margin: 0;
    }

#hoewijwerken .bigCol {
    padding-top: 100px;
    color: #FFF;
}

#coeventIntro .bigCol {
    padding-bottom: 100px;
    margin: 80px 0 0;
}

.trainingTitelInfo .btnGrijsSmall, .overons .btnGrijsSmall {
    margin: 3px 1px;
}

#training .smallCol, #coeventIntro .smallCol, #coevent .smallCol, #personeel .smallCol {
    position: relative;
    margin: -60px 0 0;
    color: #FFF;
}

    #training .smallCol .trainingDetails, .coeventDetails {
        padding: 140px 60px 65px;
        font-size: 15px;
        line-height: 30px;
    }

        #training .smallCol .trainingDetails a, .coeventDetails a {
            color: #FFF;
        }

            #training .smallCol .trainingDetails a.btnGeel {
                color: rgb(54,63,69);
            }

            #training .smallCol .trainingDetails a.btnWit {
                padding: 0 15px;
            }

    #training .smallCol .trainingAgenda, #coevent .smallCol .coeventAgenda, #coeventIntro .smallCol .coeventAgenda, .smallCol.videoContainer, .smallCol .persooneelDetail {
        padding: 70px 60px 65px;
    }

        .smallCol .persooneelDetail ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

            .smallCol .persooneelDetail ul li {
                position: relative;
                padding: 0 0 0 10px;
            }

                .smallCol .persooneelDetail ul li:before {
                    content: '-';
                    display: block;
                    position: absolute;
                    left: -10px;
                }

        #training .smallCol .trainingAgenda span.vierkant, .coeventAgenda span.vierkant {
            height: 16px;
            width: 16px;
            display: inline-block;
            margin: 0 5px 0 30px;
        }

            #training .smallCol .trainingAgenda span.vierkant:first-of-type, .coeventAgenda span.vierkant:first-of-type {
                margin: 0 5px 0 0;
            }

/*Start datumkiezer kalender*/
.datumKiezer {
    background-color: transparent;
    width: 100%;
    border: 0;
    margin: 70px 0 0;
    max-width: 370px;
}

    .datumKiezer .dxeCalendarDay {
        background-color: #FFF;
        height: 45px;
        width: 50px;
        border: 0;
        color: rgb(54,63,69);
        font-family: 'CentraleSansRegular' !important;
        font-size: 15px !important;
        padding: 0;
    }

        .datumKiezer .dxeCalendarDay.bevatEvent {
            background-color: rgb(0,186,238);
            color: #FFF;
            cursor: pointer;
        }

        .datumKiezer .dxeCalendarDay.otherItem {
            background: rgb(207,241,251);
            cursor: pointer;
        }

        .datumKiezer .dxeCalendarDay.currentItem {
            background: rgb(0,186,238);
            color: #FFF;
            cursor: pointer;
        }

        .datumKiezer .dxeCalendarDay:hover {
            border: 0;
        }

    .datumKiezer .dxeCalendarOtherMonth {
        background: transparent !important;
        color: #FFF !important;
    }

#cphContent_cDatumKiezer_mt {
    border-spacing: 1px;
}

/*.dxeCalendarHeader {
    background-color: transparent;
    border: 0;
}

.dxeCalendarDayHeader {
    padding: 18px 0;
    border-bottom: 0;
    font-family: 'CentraleSans-Bold';
    color: #FFF;
    font-size: 15px;
}*/

/*#cphContent_cDatumKiezer_NMC img, #cphContent_cDatumKiezer_PMC img {
    display: none !important;
}

#cphContent_cDatumKiezer_NMC:before, #cphContent_cDatumKiezer_PMC:before {
    font-family: icomoon !important;
    text-transform: none;
    content: "\e911";
    color: #FFF;
    transition: color .3s ease-in-out;
    font-size:15px;
}

#cphContent_cDatumKiezer_NMC:hover::before, #cphContent_cDatumKiezer_PMC:hover::before {
    color: rgb(0,186,238);
}

#cphContent_cDatumKiezer_PMC:before {
    content: "\e910";
}*/

.datumKiezer .dxeCalendarHeader, .datumKiezer .dxeCalendarHeader table {
    width: auto !important;
    margin: 0 auto;
    font-family: 'TheBoldFont';
    font-size: 22px;
    letter-spacing: 1.1px;
    color: #FFFFFF;
}
/*Eind datumkiezer kalender*/
.postITs {
    position: relative;
    width: 100%;
    display: flex;
    margin: 80px 0 0;
}

    .postITs .col33 {
        width: calc(100% / 3);
    }

        .postITs .col33 .postITContainer {
            transform: rotate(0);
            position: relative;
        }

            .postITs .col33 .postITContainer.hoekje {
            }

        .postITs .col33:first-of-type .postITContainer {
            margin: 70px 0 0;
            transform: rotate(-5deg);
        }

        .postITs .col33:last-of-type .postITContainer {
            margin: 40px 0 0;
            transform: rotate(5deg);
        }

details {
    padding: 0;
    cursor: pointer;
    width: 100%;
    max-width: 370px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

    details.trainingsDagen {
        max-width: none;
    }

    details > summary {
        border: none;
        list-style: none;
        font-family: 'CentraleSans-Bold';
        font-size: 17px;
        margin: 0;
        padding: 0 2px;
        text-transform: none;
        letter-spacing: normal;
        width: 100%;
        line-height: 40px;
        position: relative;
    }

        details > summary:after {
            display: block;
            content: '+';
            font-size: 30px;
            font-family: 'CentraleSansRegular';
            position: absolute;
            top: 0;
            right: 0;
        }

    details:first-of-type > summary.flex {
        display: flex;
        border-top: 1px solid rgba(148, 180, 197, 1);
    }

    details > summary.flex {
        display: flex;
    }

    details > summary .checkbox {
        width: 40px;
        background-image: url('/images/cb_false.png');
        background-size: 15px 15px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    details[open] > summary .checkbox {
        background-image: url('/images/cb_true.png');
    }

    details > summary .datum {
        width: calc(100% - 40px - 170px);
        color: #FFF;
    }

    details > summary .plaats {
        width: 170px;
    }

    details[open] > summary:after {
        content: '-';
    }

    details[open] summary {
        border-bottom: 1px solid rgba(148, 180, 197, 1);
    }

    details > summary::-webkit-details-marker {
        display: none;
    }

    details > p {
        margin: 0;
        padding: 30px 20px 10px 10px;
        line-height: normal;
    }

    details.trainingsDagen > p {
        padding: 30px 0 10px;
    }

    details .lesdagen {
        margin: 0 0 30px;
        padding: 30px 0 10px;
        line-height: 30px;
    }

    details strong {
        font-family: 'CentraleSans-Bold';
        font-weight: normal;
    }

    details .details {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 20px 20px 40px;
    }

    details .buttonContainer {
        margin-bottom: 30px;
    }

.smallCol.videoContainer {
    padding-top: 140px;
    box-sizing: border-box;
}


.hoewijwerkenVideoOverlay {
    position: relative;
    width: 100%;
    max-width: 370px;
}

.hoewijwerkenVideoWrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

    .hoewijwerkenVideoWrapper iframe, .hoewijwerkenVideoWrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }

.videoContainer .postITContainer {
    margin-left: -120px;
    margin-top: 6%;
}

.hoewijwerkenVideoWrapper .button {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: ease-in-out opacity 0.3s;
    z-index: 8000;
}

    .hoewijwerkenVideoWrapper .button:hover {
        opacity: 0.7;
    }

#onzeMensen {
    color: rgb(0,186,238);
    text-align: center;
}

.persoonContainer {
    position: relative;
    display: flex;
    margin: 40px 0;
    width: 100%;
    cursor: pointer;
}

    .persoonContainer:first-of-type {
        margin: 100px 0 0;
    }

    .persoonContainer .persoonInfoContainer {
        position: relative;
        background: #FFF;
        width: calc(100% - 300px);
        padding: 30px;
        text-align: left;
        display: flex;
    }

    .persoonContainer:nth-child(odd) .persoonInfoContainer {
        order: 1;
    }

    .persoonContainer:nth-child(odd) .persoonMotivatie .postITContainer {
        order: 0;
        transform: rotate(10deg) translateX(-51px) translateY(15px);
    }

    .persoonContainer .persoonInfoContainer img {
        width: 240px;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo {
        margin: 0 0 0 50px;
        color: rgb(54, 63, 69);
    }

        .persoonContainer .persoonInfoContainer .persoonInfo .naam {
            font-family: 'CentraleSans-Bold';
            font-weight: bold;
            font-size: 22px;
            line-height: 38px;
            text-transform: uppercase;
        }

        .persoonContainer .persoonInfoContainer .persoonInfo .functie {
            font-size: 14px;
            display: block;
            margin: 0 0 10px;
        }

        .persoonContainer .persoonInfoContainer .persoonInfo .talen {
            margin: 0 0 60px;
        }

            .persoonContainer .persoonInfoContainer .persoonInfo .talen img {
                width: 25px;
                height: 25px;
                margin: 0 5px 0 0;
            }

        .persoonContainer .persoonInfoContainer .persoonInfo a {
            font-family: 'CentraleSans-Bold';
            color: rgb(54, 63, 69);
            transition: ease-in-out opacity 0.3s;
            text-decoration: none;
            line-height: 35px;
        }

            .persoonContainer .persoonInfoContainer .persoonInfo a:hover {
                opacity: 0.7;
            }

        .persoonContainer .persoonInfoContainer .persoonInfo .meerInfo {
            position: absolute;
            bottom: 30px;
            right: 30px;
            border: 1px solid rgb(0,186,238);
            color: rgb(0,186,238);
            width: 45px;
            height: 45px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            transition: ease-in-out all 0.3s;
        }

            .persoonContainer .persoonInfoContainer .persoonInfo .meerInfo:hover {
                border: 1px solid rgba(6,136,217, 1);
                color: rgba(6,136,217, 1);
                opacity: 1 !important;
            }

    .persoonContainer .persoonMotivatie {
        width: 300px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 20px 0 0;
    }

        .persoonContainer .persoonMotivatie .postITContainer {
            transform: rotate(10deg) translateX(20px) translateY(0);
            position: relative;
        }

#referenties {
    position: relative;
    padding: 35px 0 0;
    background: url('/images/bg_pattern.jpg') repeat;
    background-position: center top;
    color: rgb(54, 63, 69);
    font-size: 15px;
    line-height: 30px;
}

.referentieSliderContainer, .klantOverzicht {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc((100% / 3) / 3) 0 calc((100% / 3) / 3);
}

    .referentieSliderContainer .btnPrevRef, .referentieSliderContainer .btnNextRef {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        height: calc(100% - 30px);
        width: 45px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: rgb(0,185,237);
        border-right: 1px solid rgb(0,185,237);
        font-size: 15px;
        left: calc(((100% / 3) / 3) - 45px);
        cursor: pointer;
        z-index: 200;
    }

    .referentieSliderContainer .btnNextRef {
        right: calc(((100% / 3) / 3) - 45px);
        left: auto;
        border-left: 1px solid rgb(0,185,237);
        border-right: 0;
    }

    .referentieSliderContainer .referentieSlider {
        position: relative;
    }

        .referentieSliderContainer .referentieSlider .referentieItemContainer, .klantOverzicht .klantContainer {
            position: relative;
            margin: 0;
            padding: 15px;
            box-sizing: border-box;
            width: calc((((100vw - 17px) - 30px) - (((100vw / 3) / 3) * 2)) / 5);
            height: calc((((100vw - 17px) - 30px) - (((100vw / 3) / 3) * 2)) / 5);
        }

            .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem, .klantOverzicht .klant {
                width: 100%;
                height: 100%;
                box-shadow: 0px 0px 13.06px rgba(0, 0, 0, 0.2);
                filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000000');
                box-sizing: border-box;
                background: #FFF;
                text-align: center;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                padding: 50px 10px 10px;
                position: relative;
            }

                .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieLogo {
                    margin: 0 auto;
                    height: calc((100% - 70px) * 0.7);
                }

                    .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieLogo img {
                        height: 100%;
                        max-width: 100%;
                        object-fit: contain;
                        object-position: center;
                    }

                .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieTekst {
                    position: absolute;
                    bottom: 10px;
                    width: calc(100% - 20px);
                    font-size: 15px;
                    line-height: 20px;
                    color: rgb(54, 63, 69);
                    display: inline-flex;
                    justify-content: center;
                    align-items: flex-start;
                    height: 50px;
                    overflow: hidden;
                }

#klanten {
    position: relative;
    font-size: 15px;
    line-height: 30px;
    color: #FFF;
}

.klantOverzicht {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 115px;
}

    .klantOverzicht .klant img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    .klantOverzicht .klant {
        padding: 10px;
    }

.personeelDetailFoto {
}

#personeel {
    align-items: flex-start;
}

    #personeel .bigCol {
        padding-top: 80px;
    }

    #personeel .personeelDetailFoto {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }

        #personeel .personeelDetailFoto img {
            width: 100%;
        }

    #personeel .talen {
        position: relative;
        margin: 0 0 50px;
    }

        #personeel .talen img {
            width: 25px;
            height: 25px;
            margin: 0 5px 0 0;
        }

.persoonContactGegevens {
    position: relative;
    display: flex;
    margin: 75px 0 0;
}

    .persoonContactGegevens .col33 {
        width: calc(100% / 3);
    }

        .persoonContactGegevens .col33 .icon-linkedin {
            margin: 0 0 20px;
        }

        .persoonContactGegevens .col33 h3 {
            margin: 0 0 20px !important;
        }

#contactGegevens {
    z-index: 1000;
    position: relative;
}

.mapContainer {
    position: relative;
    margin-top: -430px;
}

#map {
    width: 100%;
    height: 580px;
    z-index: 100;
}

.mapsPen {
    position: absolute;
    z-index: 1000;
    height: 126px;
    width: 185px;
    margin: auto;
    top: 55px;
    bottom: 0;
    left: 230px;
    right: 0;
}

.pcAlert {
    width: 650px;
    height: 350px;
}

    .pcAlert .dxpc-closeBtn img {
        display: none;
    }

    .pcAlert .dxpc-closeBtn:after {
        content: "\e908";
        display: block;
        height: 20px;
        width: 20px;
        font-size: 15px;
        color: rgb(54,63,69);
    }

    .pcAlert .dxpc-header {
        background: none;
        border: none;
        padding: 16px 12px;
    }

    .pcAlert .dxpc-content {
        padding: 20px 30px;
        text-align: center;
        font-family: 'CentraleSansRegular';
        font-size: 15px;
        color: rgb(54, 63, 69);
        line-height: 30px;
    }

    .pcAlert .alertHeader {
        font-family: 'CentraleSans-Bold';
        font-size: 23px;
        color: rgb(82, 144, 205);
        margin: 0 0 15px;
        display: block;
    }

    .pcAlert .dxpnlControl {
        text-align: center;
        font-family: 'CentraleSansRegular';
        font-size: 15px;
        color: rgb(54, 63, 69);
        line-height: 30px;
    }

.customCheckbox {
    margin: 15px 0 0;
}

    .customCheckbox .dxWeb_edtCheckBoxUnchecked {
        background-image: none !important;
        background-color: rgb(201,241,250);
    }

    .customCheckbox .dxWeb_edtCheckBoxChecked {
        background-image: url('/images/cb_true.png');
        background-position: center center;
        background-size: 15px 15px;
        /*background-color: rgb(255,120,0);*/
    }

    .customCheckbox label {
        font-family: 'CentraleSansRegular' !important;
        font-size: 15px !important;
        color: rgb(54, 63, 69) !important;
        padding: 0 0 0 20px;
        line-height: 18px !important;
    }

    .customCheckbox .dxichCellSys span {
        margin: 0 0 0 3px;
    }

    .customCheckbox .dxichCellSys, .customCheckbox .dxichTextCellSys {
        padding: 0 !important;
    }

#blogOverzicht .blogOverzicht .dxdvFlowItemsContainer {
    margin: 0 !important;
    width: 100% !important;
}

#blogOverzicht .blogOverzicht .dxdvFlowItem {
    height: 100% !important;
    margin: 0 !important;
    width: 100% !important;
}

.downloadContainer a {
    color: rgb(82,144,205) !important;
    text-decoration: none !important;
    font-size: 15px;
}

    .downloadContainer a:before {
        font-size: 10px;
        position: relative;
        display: inline-block;
        content: "\e91e";
        margin: 0 10px 0 0;
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.btnTerug {
    font-family: 'CentraleSans-Bold';
    font-size: 17px;
    text-decoration: none !important;
    color: rgb(54,63,69);
    transition: ease-in-out opacity 0.3s;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    align-content: center;
}

    .btnTerug span {
        display: inline-block;
        margin: 0 10px 0 0;
    }

    .btnTerug:hover {
        opacity: 0.7;
    }

#blogOverzicht.zoekresultaten .blogOverzicht article {
    cursor: pointer;
    margin-bottom: 5px;
}

#blogOverzicht.zoekresultaten h5 {
    margin: 20px 0 5px;
    font-family: 'CentraleSans-Bold';
    font-size: 17px;
    line-height: 38px;
    color: #363F45;
    color: rgb(54, 63, 69);
}

#blogOverzicht.zoekresultaten .blogOverzicht h2 {
    font-size: 15px;
    margin: 0 0 10px;
    color: rgb(54, 63, 69);
}

#blogOverzicht.zoekresultaten .blogOverzicht article .articleContent p, #blogOverzicht.zoekresultaten .kruimelPad {
    margin-left: 30px;
    margin-bottom: 0;
    height: auto;
    line-height: 30px;
}

#blogOverzicht.zoekresultaten .kruimelPad {
    margin-top: 20px;
}

#content.zoekResultaten h1 {
    margin: 0;
}

#content.zoekResultaten h2 {
    color: rgb(0,186,238);
}

#content.zoekResultaten .intro {
    margin: 30px 0 0;
}

#content .wrapper .dxeButtonEditButton img {
    margin: 0;
}

#trainingOverzichtLijst {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

    #trainingOverzichtLijst .trainingRow {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #EFEFEF;
        background: #FFF;
        font-family: 'CentraleSansRegular' !important;
        font-size: 15px !important;
        cursor: pointer;
    }

        #trainingOverzichtLijst .trainingRow.kop {
            margin: 25px 0 25px;
            font-size: 17px !important;
            font-family: 'CentraleSans-Bold' !important;
            background: none;
            border-bottom: 0;
            cursor: default;
        }

        #trainingOverzichtLijst .trainingRow.addMargin {
            margin-top: 10px;
        }

    #trainingOverzichtLijst .trainingKleur {
        height: 100%;
        width: 30px;
    }

    #trainingOverzichtLijst .trainingType {
        width: 120px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #trainingOverzichtLijst .trainingNaam {
        width: calc(100% - 30px - 120px - 220px - 140px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #trainingOverzichtLijst .trainingLocatie {
        width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #trainingOverzichtLijst .trainingStartdatum {
        width: 140px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: right;
    }

.referentieSliderContainerHome {
    display: flex;
    justify-content: flex-end;
    width: calc(5 * var(--homeSlideWidth)- 4 * 100px); /* 5 * 200px */
}

.referentieSliderHome {
    position: relative;
    width: calc(var(--homeSlideWidth) + 4 * 170px); /* 5 * 200px */
    height: 660px;
    margin: 0 0 0 50px;
    padding: 50px 0 50px;
    box-sizing: border-box;
    overflow: hidden;
}

.referentieSliderContainerHome .sliderControls {
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 20px;
}

    .referentieSliderContainerHome .sliderControls a {
        display: block;
        margin: 0 10px;
        cursor: pointer;
    }

.referentieSliderHome:after {
    content: '';
    height: 100%;
    width: 1px;
    background: rgb(0,186,238);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

.referentieSliderHome .referentieSlide, .referentieGrid .wrapper .referentieSlide {
    position: absolute;
    background: #FFF;
    aspect-ratio: 1;
    width: var(--homeSlideWidth);
    padding: 50px 45px;
    box-sizing: border-box;
    border: 1px solid rgb(54,63,69);
    border-right: 0;
    color: rgb(54,63,69);
    text-align: left;
    transition: all 0.8s ease;
}

    .referentieSliderHome .referentieSlide a, .referentieGrid .wrapper .referentieSlide a {
        font-family: 'CentraleSans-Bold';
        color: rgb(54,63,69);
    }

.referentieSlide h2, h2.quote {
    line-height: 1.2em;
    min-height: 3.6em;
    margin: 0;
}

.referentieSlide img {
    position: absolute;
    bottom: 50px;
    left: 45px;
    object-fit: contain;
    object-position: left bottom;
    width: 200px;
    height: 200px;
}

.referentieSlide .referentieTekst .tekst {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
}

.referentieSlide .referentieTekst a {
    white-space: nowrap
}

#homeOnzeKlanten .writingPostITContainer {
    position: absolute;
    top: 0;
    left: calc(100% - 440px);
    width: 200px;
    height: 200px;
    z-index: 1000;
    padding: 10px 0 16px;
    transform: rotate(15deg);
    bottom: 0;
    margin: auto;
}

.referentieGrid {
    position: relative;
    padding: 120px 0 200px;
}

    .referentieGrid .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 60px;
    }

    .referentieGrid:after {
        content: '';
        display: block;
        height: calc(100% - 400px);
        width: 100%;
        position: absolute;
        left: 0;
        top: 400px;
        background: rgb(54,63,69);
        z-index: -1;
    }

    .referentieGrid .wrapper .referentieSlide {
        position: relative;
        border: 1px solid rgb(54,63,69);
    }

        .referentieGrid .wrapper .referentieSlide:nth-child(odd) {
            transform: translateY(100px);
        }

@media screen and (max-width:1900px) {
    :root {
        --homeSlideWidth: 460px;
    }

    .referentieSliderContainerHome {
        flex-wrap: wrap;
    }

        .referentieSliderContainerHome .sliderControls {
            position: absolute;
            width: 100%;
            left: 0;
            top: calc(var(--homeSlideWidth) + 340px);
            height: auto;
            margin: 0;
        }

    .referentieSliderHome:after {
        display: none;
    }

    .referentieSlide img {
        width: 100px;
        height: 100px;
    }

    .referentieSliderHome .referentieSlide, .referentieGrid .wrapper .referentieSlide {
        padding: 40px 35px;
    }

    header .volgHeader {
        height: 220px;
    }

    header nav ul li {
        padding: 0 25px 0 0;
    }

    header .logo {
        padding-top: 14px;
    }

        header .logo img {
            height: 35px;
        }

    header .bigCol {
        padding: 10px 0 0 50px;
    }

    header .extraMenu, header .zoekContainer {
        padding: 35px 50px 0 0;
    }

    .btnGeel, .btnWitTransparent {
        font-size: 16px;
        letter-spacing: 0.8px;
    }

    header .homeHeader .smallCol, header .volgHeader .smallCol {
        padding: 240px 60px 0;
        box-sizing: border-box;
    }

    header .volgHeader .smallCol {
        padding: 0 0 0 50px;
    }

    .stiftLijn {
        left: calc(100% - ((100% / 3) - ((100% / 3) / 2)));
        /*left: auto;
        right: calc(((100% / 3) - ((100% / 3) / 2)));*/
    }

    .stift {
        left: auto;
        right: calc((((100% / 3) - ((100% / 3) / 2))) - 185px);
    }

    .writingPostITContainer, #homeOnzeKlanten .writingPostITContainer {
        left: calc((100% - ((100% / 3) - ((100% / 3) / 2))) - 90px);
    }

    .wrapperSmall {
        width: 570px;
    }

    #homeOnzeKlanten .bigCol .col25 {
        width: calc(100% / 3);
        /*        height: 350px;*/
        margin: 0 0 60px;
    }

        #homeOnzeKlanten .bigCol .col25:last-of-type {
            display: none;
        }

    #homeOnzeKlanten .col25:nth-of-type(3) .postITContainer {
        right: 0;
    }

    #onzeKlantenPostITContainer {
        top: 300px;
    }

    #homeBlogsEnMeer .wrapperSmall {
        width: 600px;
    }

    #homeBlogsEnMeerPostITContainer {
        transform: rotate(-10deg);
        top: 300px;
    }

    .referentieSliderContainer .referentieSlider .referentieItemContainer, .klantOverzicht .klantContainer {
        width: calc((((100vw - 17px) - 30px) - (((100vw / 3) / 3) * 2)) / 4);
        height: calc((((100vw - 17px) - 30px) - (((100vw / 3) / 3) * 2)) / 4);
    }

    #trainingOverzicht .trainingOverzicht, #blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht, .trainingTopBar .col50.alignRight {
        padding: 0 calc(((100% / 3) / 3) - 17px) 25px 34px;
    }

    #blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht {
        padding-top: 25px;
    }

    #trainingOverzicht .trainingOverzicht .training {
        position: relative;
        width: calc((100% / 3) - 34px);
        padding: 40px 30px 25px;
        line-height: 25px;
        font-size: 24px;
    }

        #trainingOverzicht .trainingOverzicht .training a, .trainingHeader .training a {
            line-height: 19px;
            font-size: 18px;
        }

    #training .postITs {
        flex-wrap: wrap;
    }

        #training .postITs .col33 {
            width: 50%;
        }

            #training .postITs .col33:last-of-type {
                width: 100%;
            }

            #training .postITs .col33 .postITContainer {
                margin: 0 auto;
            }

    #training .smallCol .trainingDetails, .coeventDetails {
        padding: 140px 50px 65px;
        font-size: 15px;
        line-height: 30px;
    }
}

@media screen and (max-width:1300px) {
    :root {
        --homeSlideWidth: 400px;
    }

    .referentieGrid .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
    }

        .referentieGrid .wrapper .referentieSlide {
            width: auto;
        }

    .referentieSliderHome {
        height: 550px;
    }

    header .logo, header nav {
        margin-left: 20px;
    }

    .tekstContainer ul li, .trainingDetailsTekst ul li, .contactTekst ul li, #hoewijwerken ul li, #coevent .bigCol ul li {
        background: transparent url(/images/listitem.png) 0 8px no-repeat;
        background-size: 10px;
    }

    header .homeHeader .bigCol .headerTekst {
        font-family: 'TheBoldFont';
        font-size: 30px;
        text-align: center;
        width: 100%;
        padding: 40px 40px 0;
        word-spacing: 4px;
    }

    #hoewijwerken ul li {
        background: transparent url(/images/listitem-wit.png) 0 8px no-repeat;
        background-size: 10px;
    }

    header .menuPart .wrapper {
        width: 100%;
        padding: 0;
    }

    header .bigCol {
        flex-wrap: wrap;
        padding: 0;
        width: calc(((100% - 940px) / 2) + (940px * 0.67));
    }

    #training .bigCol, #trainingOverzicht .bigCol, #coeventIntro .bigCol, #coevent .bigCol, #hoewijwerken .bigCol, #personeel .bigCol, .overzichtIntro {
        padding: 0 115px 0 40px;
    }

    #training .bigCol, #trainingOverzicht .bigCol, #coeventIntro .bigCol, #coevent .bigCol, #hoewijwerken .bigCol, #personeel .bigCol, .overzichtIntro, .blogOverzicht.bigCol {
        width: calc(((100% - 940px) / 2) + (940px * 0.67));
    }

    header .homeHeader .smallCol, header .volgHeader .smallCol {
        padding: 240px 30px 0 30px;
        box-sizing: border-box;
    }

    .smallCol {
        width: calc(((100% - 940px) / 2) + (940px * 0.33));
    }

    .extraMenuContainer {
        width: calc(((100% - 940px) / 2) + (940px * 0.33));
    }

    .kruimelPad {
        width: calc(((100% - 940px) / 2) + (940px * 0.67));
    }

        .kruimelPad .wrapper, #trainingOverzicht .smallCol, #blogOverzicht .smallCol, #coEventOverzicht .smallCol {
            padding: 0 0 0 40px;
        }

    header .logo {
        padding: 0;
        height: 30px;
    }

        header .logo img {
            height: 30px;
        }

    header nav {
        width: 100%;
        height: auto;
        justify-content: flex-start;
    }

        header nav ul {
            padding: 0;
        }

            header nav ul li ul.submenu {
                padding: 20px 0 0;
            }

    header .extraMenu a.btnZoeken span {
        display: none;
    }

    header {
        height: 665px;
    }

        header .homeHeader.error404 {
            background-size: contain;
        }

    .errorContentContainer {
        position: absolute;
        bottom: 20px;
        left: 46%;
        width: 390px;
    }

        .errorContentContainer .errorContent {
            font-size: 20px;
        }

        .errorContentContainer img {
            height: 100px;
        }

        .errorContentContainer .errorContent span {
            font-size: 27px;
            line-height: 25px;
        }

    header .homeHeader {
        height: 575px;
    }

    header .extraMenu a.btnZoeken {
        margin: 0 0 0 5px;
    }

    header .extraMenu .taalSwith {
        padding: 0 20px 0;
    }

    header .extraMenu, header .zoekContainer {
        padding: 49px 30px 0 0;
    }

    header .volgHeader .smallCol {
        padding: 0 0 0 50px;
        font-size: 15px;
    }

    h1 {
        font-size: 24px;
        letter-spacing: 1.2px;
        line-height: 26px;
    }

    h2, h3 {
        font-size: 15px;
        letter-spacing: 0.75px;
        margin: 0 0 25px;
    }

    h4, h5, h6 {
        font-size: 15px;
    }

    #homeContent h1 {
        margin: 0 0 40px;
    }

    .wrapperSmall {
        width: 460px;
    }

    #homeContent {
        padding: 90px 0 100px;
        font-size: 15px;
        line-height: 28px;
    }

    .writingPostITContainer .typedText, .postITContainer .postITTekst, .postITContainer .postITTekst.groot {
        font-size: 15px;
        line-height: 16px;
        padding: 50px 0 0;
        margin: 0;
    }

    .writingPostITContainer, #homeOnzeKlanten .writingPostITContainer {
        left: calc((100% - ((100% / 3) - ((100% / 3) / 2))) - 50px);
        width: 140px;
        height: 140px;
        padding: 25px 0;
    }

    .postITContainer {
        top: auto;
        left: auto;
        width: 160px;
        height: 160px;
    }

        .postITContainer .postITTekst {
            font-size: 10px;
            padding: 50px 10px 0;
        }

    .bigCol .postITContainer.hoekje .postIT {
        background-size: 160px;
    }

    .bigCol .postITContainer .postITTekst {
        padding: 40px 10px;
    }

    .btnWit, .btnGrijs, .btnBlauw, .btnGrijsSmall, .btnWitSmall, .btnGrijsVerzenden {
        padding: 0 25px;
    }

    #homeExpertises .wrapper {
        width: 1024px;
        padding: 0;
        font-size: 13px;
        line-height: 23px;
    }

        #homeExpertises .wrapper .smallCol {
            padding: 40px 30px 60px;
            position: relative;
        }

            #homeExpertises .wrapper .smallCol span.expertiseItem {
                font-size: 81px;
                height: 80px;
                margin: 0 0 20px;
            }

            #homeExpertises .wrapper .smallCol p {
                margin: 0 0 40px;
            }

    #homeExpertises .buttoncontainer {
        bottom: 40px;
    }

    #homeBlogsEnMeer .wrapperSmall {
        width: 490px;
    }

    #homeBlogsEnMeer .btnGrijs {
        margin: 100px 0 0;
    }

    .wrapper {
        width: 940px;
    }

    footer .wrapper .col25 span, .persoonContactGegevens .col33 span, #contactGegevens .wrapper .col25 span {
        font-size: 30px;
    }

    footer .wrapper .col25, .persoonContactGegevens .col33, #contactGegevens .wrapper .col25 {
        font-size: 13px;
        line-height: 17px;
    }

    .box, .selectBox {
        font-size: 13px;
    }

    .formContainer .formLbl, .aanmeldFormContainer .formLbl {
        font-size: 13px;
    }

    #social a {
        font-size: 13px;
        margin: 0 10px 0 0;
    }

    #payoff {
        font-size: 11px;
    }

    p.intro, div.intro {
        display: block;
        font-size: 15px;
        line-height: 28px;
    }

    body {
        font-size: 13px;
    }

    #content {
        line-height: 23px;
    }

    .trainingHeader .training {
        flex-basis: 135px;
        height: 125px;
    }

        #trainingOverzicht .trainingOverzicht .training span, .trainingHeader .training span {
            font-size: 8px;
            line-height: 8px;
        }

    #trainingOverzicht .trainingOverzicht .training, .trainingHeader .training {
        font-size: 12px;
        line-height: 17.27px;
        letter-spacing: 0.8px;
    }

    #trainingOverzicht .trainingOverzicht .training {
        padding: 20px 30px 20px;
        margin: 20px 10px 0;
    }

        #trainingOverzicht .trainingOverzicht .training .contentTraining, .trainingHeader .training .contentTraining {
            position: absolute;
            top: 15px;
            left: 20px;
            bottom: 15px;
            right: 20px;
        }

    .trainingHeader .trainingTitelInfo, .coeventHeader .coeventTitelInfo {
        width: calc(100% - 135px);
        padding: 0 0 0 25px;
    }

    #training .smallCol .trainingDetails, .coeventDetails {
        padding: 140px 30px 65px;
        font-size: 15px;
        line-height: 30px;
    }

    .datum {
        font-size: 13px;
    }

    details > summary .plaats {
        width: 100px;
    }

    details > summary .datum {
        width: calc(100% - 40px - 100px);
        color: #FFF;
    }

    details > summary {
        font-size: 13px;
    }

    details .lesdagen {
        margin: 0 0 30px;
        padding: 15px 0 10px;
        line-height: 30px;
    }

    details .details {
        width: 100%;
        box-sizing: border-box;
        padding: 5px 5px 25px 5px;
    }

    #training .smallCol .trainingDetails .buttonContainer .btnWit, .coeventDetails .buttonContainer .btnWit {
        display: none !important;
    }

    #training .smallCol .trainingDetails, .coeventDetails {
        font-size: 13px;
        line-height: 20px;
    }

    .postITContainer .postIT {
        background: url(/images/postIT.svg) no-repeat;
        background-size: 160px;
    }

    #training .postITs .col33:first-of-type {
        width: 50%;
    }

    #training .postITs .col33:last-of-type {
        order: -1;
        width: 50%;
    }

    #training .postITs .col33 {
        width: 100%;
    }

    #training {
        padding-bottom: 100px;
    }

    #trainingOverzicht .bigCol {
        padding: 0 0 0 20px;
        box-sizing: border-box;
    }

    .customCheckbox {
        margin: 5px 0 0;
    }

        .customCheckbox label {
            font-size: 13px !important;
        }

    h5 {
        margin: 30px 0 0;
    }

    #content .wrapper {
        padding: 0 30px;
        width: 100%;
        box-sizing: border-box;
    }

    #blogOverzicht .blogOverzicht article, #coEventOverzicht .coEventOverzicht article, #blogOverzicht .blogOverzicht .laadMeer, #blogOverzicht .blogOverzicht .dxdvPagerShowMoreItemsContainer {
        padding: 20px 20px 20px 20px;
    }

        #blogOverzicht .blogOverzicht article img, #coEventOverzicht .coEventOverzicht article img {
            height: 160px;
            width: 160px;
            margin: 0 50px 0 0;
        }

    .mapContainer {
        position: relative;
        margin-top: -350px;
    }

    #hoewijwerken .bigCol {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .persoonContainer .persoonInfoContainer img {
        width: 175px;
        height: 175px;
        object-fit: cover;
        object-position: center center;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo .naam {
        font-size: 15px;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo .functie {
        font-size: 13px;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo a {
        font-size: 13px;
        line-height: 20px;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo .talen {
        margin: 0 0 20px;
    }

    #onzeMensen .wrapper {
        width: 770px;
    }

    .persoonContainer .persoonMotivatie {
        width: 240px;
    }

    .persoonContainer .persoonInfoContainer {
        position: relative;
        background: #FFF;
        width: calc(100% - 240px);
        padding: 30px;
    }

    .persoonContainer .persoonMotivatie .postITContainer {
        transform: rotate(10deg) translateX(-10px) translateY(0);
    }

    .persoonContainer:nth-child(odd) .persoonMotivatie .postITContainer {
        order: 0;
        transform: rotate(10deg) translateX(-23px) translateY(15px);
    }

    #referenties, .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieTekst, #klanten {
        font-size: 13px;
        line-height: 23px;
    }

    #homeOnzeMensen .onzeMensenSlider img {
        width: 170px;
        border: 15px solid #FFF;
        margin: 50px 25px;
    }
}

@media screen and (max-width:1030px) {
    :root {
        --homeSlideWidth: 360px;
    }

    .referentieSliderHome {
        height: 450px;
    }

    .referentieSliderContainerHome .sliderControls {
        top: 520px
    }

    .referentieSlide img {
        width: 100px;
        height: 100px;
        left: 25px;
        bottom: 20px;
    }

    .referentieSliderHome .referentieSlide, .referentieGrid .wrapper .referentieSlide {
        padding: 20px 25px;
    }

    .referentieSliderHome {
        padding: 0;
        margin: 0;
    }

    .hamburger {
        display: inline-block !important;
    }

    .taalSwith.mobileTaal {
        display: block;
        position: absolute;
        bottom: 200px;
        left: 50px;
    }

    body {
        padding: 0;
    }

    h1 {
        font-size: 17px;
        letter-spacing: 1.2px;
        line-height: 24px;
    }

    h2, h3 {
        font-size: 15px;
        letter-spacing: 1.1px;
    }

    .wrapper {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }

    header nav, header .menuPart .smallCol {
        display: none;
    }

    header .logo, header nav {
        margin-left: 0;
    }

        header .logo img {
            height: 35px;
        }

    header .menuPart {
        top: 0;
        height: 85px;
        padding-top: 25px;
        left: 0;
        width: 100%;
        padding: 25px 30px 0;
    }

    header .homeHeader, header .volgHeader {
        margin-top: 85px;
    }

    header .homeHeader {
        height: 530px;
    }

    .errorContentContainer {
        left: 40%;
        width: 455px;
    }

        .errorContentContainer img {
            height: 80px;
            margin: 15px auto;
        }

    header {
        height: 615px;
    }

        header .homeHeader .smallCol .btnGeel {
            font-size: 11px;
            height: 43px;
            letter-spacing: 0.5px;
            padding: 0 15px 0 10px;
        }

        header .bigCol {
            width: 67%;
        }

        header .volgHeader {
            height: 150px;
        }

    .smallCol {
        width: 33%;
    }

    .homeHeader .smallCol {
        padding: 240px 25px 0 25px;
        box-sizing: border-box;
    }

    .btnGeel span {
        font-size: 10px;
        right: 15px;
        top: 0;
    }

    #homeContent .wrapperSmall {
        width: 67%;
        margin: 0;
        padding: 0 15px 0 30px;
        text-align: left;
        box-sizing: border-box;
    }

    #homeExpertises .wrapper {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }

    #homeExpertises {
        padding: 60px 0 45px;
        background-size: 15px 15px;
    }

        #homeExpertises .btnWit {
            border: 0;
        }

            #homeExpertises .btnWit span {
                display: none;
            }

    #homeOnzeKlanten {
        padding: 80px 30px 70px;
    }

        #homeOnzeKlanten .bigCol {
            width: 75%;
        }

        #homeOnzeKlanten .smallCol {
            width: 25%;
        }

        #homeOnzeKlanten .bigCol .col25 {
            height: 200px;
        }

        #homeOnzeKlanten .col25 .postITContainer {
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

        #homeOnzeKlanten .col25:nth-of-type(2) .postITContainer {
            left: 10px;
        }

    #onzeKlantenPostITContainer {
        top: 90px;
    }

    #homeOnzeMensen {
        padding: 80px 0 75px;
    }

        #homeOnzeMensen .onzeMensenSlider {
            margin: 0 0 30px;
            height: auto;
        }

    #homeBlogsEnMeer .wrapperSmall {
        width: calc(67% - 30px);
        margin: 0 0 0 30px;
    }

    #homeBlogsEnMeer {
        position: relative;
        padding: 80px 0 90px;
        text-align: left;
    }

        #homeBlogsEnMeer h2 {
            margin-left: 65px;
        }

    footer .wrapper .col25, .persoonContactGegevens .col33, #contactGegevens .wrapper .col25 {
        font-size: 11px;
        line-height: 15px;
    }

    .box, .selectBox {
        font-size: 11px;
    }

    .checkbox .box {
        height: 20px;
        line-height: 10px;
    }

    .formContainer .formField.checkbox, .aanmeldFormContainer .formField.checkbox {
        margin: 0 0 20px;
    }

    #social .bigCol, #payoff .bigCol {
        width: 60%;
    }

    #social .smallCol, #payoff .smallCol {
        width: 40%;
    }

    #social a {
        font-size: 11px;
        margin: 0 10px 0 0;
    }

    #hoewijwerken .bigCol, #hoewijwerken .smallCol {
        position: relative;
        width: 100%;
        padding: 90px 30px;
    }

    #hoewijwerken .smallCol {
        margin: 0 auto;
        width: 450px;
    }

        #hoewijwerken .smallCol.videoContainer .postITContainer {
            left: 150px;
            top: -50px;
        }

    #onzeMensen .wrapper {
        padding: 90px 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .persoonContainer:first-of-type {
        margin: 70px 0 0;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo {
        margin: 0 0 0 30px;
    }

    .persoonMotivatie .postITContainer {
        width: 140px;
        height: 140px;
    }

    .postITContainer.hoekje .postIT.klein {
        background: url(/images/postIT-vouw-klein.svg) no-repeat;
        background-size: 140px;
    }

    .persoonContainer .persoonInfoContainer {
        width: calc(100% - 190px);
        padding: 20px;
    }

    .persoonContainer .persoonMotivatie {
        width: 190px;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo a, .persoonContainer .persoonInfoContainer .persoonInfo .functie {
        font-size: 11px;
        line-height: 20px;
    }

    .persoonContainer .persoonInfoContainer .persoonInfo .talen img {
        width: 15px;
        height: 15px;
        margin: 0 5px 0 0;
    }

    #onzeMensen .wrapper {
    }

    #referenties .wrapper, #klanten .wrapper {
        width: 100%;
        padding: 100px 30px 200px;
        box-sizing: border-box;
    }

    #referenties {
        background-size: 15px 15px;
    }

        #referenties .wrapper {
            padding: 70px 40px 30px;
        }

    .referentieSliderContainer .referentieSlider .referentieItemContainer {
        width: 223px;
        height: 223px;
    }

        .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem {
            padding: 20px 10px 10px;
        }

            .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieLogo {
                height: calc(100% - 50px);
            }

                .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieLogo img {
                    max-width: 100%;
                    object-fit: contain;
                }

            .referentieSliderContainer .referentieSlider .referentieItemContainer .referentieItem .referentieTekst {
                font-size: 10px;
                line-height: 16.3px;
            }

    .referentieSliderContainer .btnPrevRef, .referentieSliderContainer .btnNextRef {
        display: none !important;
    }

    .referentieSliderContainer, .klantOverzicht {
        padding: 0 30px;
    }

    #referenties .wrapper.center {
        text-align: left;
        padding: 0 0 0 45px;
    }

    #klanten {
        padding: 70px 0;
    }

        #klanten .wrapper {
            width: 100%;
            padding: 0 30px;
            box-sizing: border-box;
        }

    .referentieSliderContainer .referentieSlider .referentieItemContainer, .klantOverzicht .klantContainer {
        width: 223px;
        height: 223px;
    }

    #trainingOverzicht .trainingOverzicht, #blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht, .trainingTopBar .col50.alignRight {
        padding: 25px 30px 25px;
    }

    .kruimelPad {
        font-size: 11px;
        width: 100%;
    }

        .kruimelPad .wrapper {
            padding: 0 30px;
        }

    .overzichtIntro {
        width: 100%;
        padding: 0 30px;
    }

    #trainingen, #blogs, #contact {
        margin: 80px 0 50px;
    }

    .filterCol, #training .smallCol, .smallCol.traingingDetail, #blogOverzicht .smallCol, #coEventOverzicht .smallCol, .smallCol.filteredItems {
        /*display: none;*/
        transform: translate3d(-100%, 0, 0);
        -webkit-animation-duration: 300ms;
        animation-duration: 300ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .activeFiltersContainer {
        padding: 0 25px !important;
    }

    #trainingOverzicht .trainingOverzicht .training a, .trainingHeader .training a {
        line-height: 17px;
        font-size: 13px;
        letter-spacing: 1.3px;
    }

    #trainingOverzicht .trainingOverzicht, #blogOverzicht .blogOverzicht, #coEventOverzicht .coEventOverzicht, #trainingOverzicht .bigCol {
        padding: 0 30px 30px;
        width: 100%;
        justify-content: center;
    }

    #trainingOverzicht .bigCol {
    }

    .trainingTopBar .col50 {
        padding: 0 0 0 15px;
        box-sizing: border-box;
    }

        .trainingTopBar .col50.alignRight {
            padding: 0 30px;
        }

    #trainingOverzicht .trainingOverzicht {
        justify-content: flex-start;
    }

    #blogOverzicht .blogOverzicht article .articleContent p, #coEventOverzicht .coEventOverzicht article .articleContent p {
        font-size: 13px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        height: 60px;
        line-height: 20px;
    }

    #training .bigCol {
        width: 100%;
    }

    .formContainer {
        /*background: url(/images/bg_form_small.png) no-repeat left bottom;*/
    }

    #blogOverzicht .blogOverzicht {
        padding-top: 35px;
    }

    nav.IsActive, .mobileSubmenu {
        width: 100vw !important;
        height: calc(100vh - 85px) !important;
        background: #FFF !important;
        position: fixed !important;
        top: 85px !important;
        left: 0 !important;
        display: block;
        padding: 120px 150px 150px !important;
        box-sizing: border-box;
        z-index: 8000;
    }

    .mobileSubmenu {
        z-index: 9999;
    }

    .mobileSubmenu {
        transform: translate3d(-100%, 0, 0);
        -webkit-animation-duration: 300ms;
        animation-duration: 300ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .slideInRight {
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight;
        display: block !important;
    }

    nav .IsActive ul, .mobileSubmenu ul {
        display: block;
        width: 100%;
    }

        nav.IsActive ul li, .mobileSubmenu ul li {
            display: block;
            width: 100%;
            margin-bottom: 50px;
        }

        .mobileSubmenu ul li {
            margin-bottom: 30px;
        }

    nav a .icon-pijl-rechts:before {
        display: block !important;
        font-size: 10px;
        margin: 0 0 0 5px;
    }

    header nav ul li a, .mobileSubmenu ul li a {
        display: inline-block;
    }

        header nav ul li a.active:after, .mobileSubmenu ul li a.active:after {
            content: '';
            display: block;
            position: relative;
            margin-bottom: -5px;
            margin-left: -7px;
            width: calc(100% + 16px);
            background-image: url('/images/menu_active.png');
            background-size: 100%;
            height: 5px;
        }

    header nav ul li:hover .submenu {
        display: none;
    }

    .mobileSubmenu .btnGrijs {
        position: absolute;
        top: 50px;
        left: 20px;
    }

        .mobileSubmenu .btnGrijs span, .btnTrainingTerug span {
            padding: 0 15px 0 0;
        }

    .mobileSubmenu .subsubmenu {
        display: none;
    }

    #coeventIntro .smallCol, #coevent .smallCol {
        display: none;
    }

    #coeventIntro .bigCol, #coevent .bigCol {
        width: 100%;
        padding-bottom: 70px;
    }

    #coEventOverzicht .coEventOverzicht {
        padding-top: 25px;
    }

    .coeventHeader img {
        width: 100%;
    }

    .coeventHeader .coeventTitelInfo {
        width: 100%;
        padding: 0;
        order: -1;
    }

    .btnGeel, .btnWitTransparent {
        font-size: 14px;
        letter-spacing: 0.8px;
    }

    .mobileButtonTraining {
        display: block;
        width: 100%;
        text-align: center;
        margin: 45px 0;
    }

    #training .smallCol, #coevent .smallCol, #trainingOverzicht .smallCol.filterCol {
        position: fixed;
        top: 85px;
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        z-index: 8000;
    }

    #trainingOverzicht .smallCol.filterCol {
        height: calc(100vh - 65px);
    }

    #trainingOverzicht .smallCol.filterCol {
        padding-top: 100px;
    }

    #trainingOverzicht .smallCol.filterCol {
        background: #fff;
    }

    #training .smallCol .trainingDetails, #coevent .smallCol .coeventDetails {
        min-height: 100%;
        box-sizing: border-box;
    }

    #coevent .smallCol .coeventAgenda {
        display: none;
    }

    #training .smallCol .trainingDetails, .coeventDetails {
        padding: 230px 30px 65px;
    }

    .btnTrainingTerug {
        display: inline-flex !important;
        position: absolute;
        top: 135px;
        left: 20px;
    }

    #trainingOverzicht .smallCol.filterCol .btnTrainingTerug {
        top: 20px;
    }

    #personeel .bigCol {
        width: 100%;
        padding: 80px 30px;
    }

    #personeel .smallCol {
        display: none;
    }

    #personeel h3 {
        font-size: 15px;
    }

    #content .blogHeader img {
        width: 125px;
    }

    #content .wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    .btnFilterOpenen {
        display: inline-flex !important;
        margin: 0 0 30px 0;
        width: calc(100% - 5px);
        justify-content: left;
    }

    .activeFiltersContainer {
        width: 100% !important;
        margin-bottom: 15px;
    }

    #trainingOverzichtLijst .trainingRow, #trainingOverzichtLijst .trainingRow.kop {
        font-size: 13px !important;
    }

    #trainingOverzichtLijst .trainingType {
        width: 80px;
    }

    #trainingOverzichtLijst .trainingStartdatum {
        width: 140px;
    }

    #trainingOverzichtLijst .trainingLocatie {
        width: 180px;
    }

    #trainingOverzichtLijst .trainingNaam {
        width: calc(100% - 30px - 80px - 180px - 140px);
    }
}

@media screen and (max-width:850px) {
    .formContainer {
        background: url(/images/bg_form_small.png) no-repeat left bottom;
    }

    .errorContentContainer {
        left: 40%;
        width: 425px;
    }
}

@media screen and (max-width:750px) {
    div.intro.referentieIntro .introTekst{
        width:100%;
    }
    .referentieGrid .wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
    }

        .referentieGrid .wrapper .referentieSlide:nth-child(odd) {
            transform: translateY(0);
        }

        .referentieGrid .wrapper .referentieSlide {
            width: auto;
        }

    .referentieSliderContainerHome .sliderControls {
        top: 550px
    }

    .referentieSliderHome, .referentieSliderContainerHome {
        width: 100%;
        flex-wrap: wrap;
        height: calc(var(--homeSlideWidth) + 100px);
    }

        .referentieSliderContainerHome .sliderControls {
            height: auto;
            width: 100%;
            margin-top: -100px;
            z-index: 9999;
        }

        .referentieSliderHome:after {
            display: none;
        }

        .referentieSliderHome .referentieSlide {
            margin: 0 auto;
        }

    header .homeHeader.error404 {
        height: 290px;
        background-size: cover;
        background-position: left -70px bottom -50px;
        position: relative;
    }

    header .errorContentContainer.desktop {
        display: none;
    }

    header .errorContentContainer.mobiel {
        display: block;
        width: auto;
        bottom: 50px;
        left: 140px;
        font-size: 50px;
        font-family: 'Marker';
        line-height: normal;
        text-transform: uppercase;
        transform: rotate(-5deg);
        padding: 0;
    }

    .errorContentContainerOutside.mobiel {
        display: block;
        width: 100%;
        text-align: center;
        margin: 40px 0;
        overflow: hidden;
    }

        .errorContentContainerOutside.mobiel img {
        }

            .errorContentContainerOutside.mobiel img.arrowDown {
                margin: 15px 0;
                height: 70px;
            }

    .errorContentContainerOutsideContent {
        font-size: 15px;
        font-family: 'Marker';
        line-height: normal;
        text-transform: uppercase;
    }

    .kruimelPad {
        display: none;
    }

    #training .bigCol, #trainingOverzicht .bigCol, #coeventIntro .bigCol, #coevent .bigCol, #hoewijwerken .bigCol, #personeel .bigCol, .overzichtIntro {
        padding: 0 25px;
    }

    .wrapper {
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;
    }

    header .menuPart {
        height: 65px;
        width: 100%;
        padding: 20px 30px 0;
    }

    header .volgHeader {
        height: 80px;
    }

    header .homeHeader, header .volgHeader {
        margin-top: 65px;
    }

    header .bigCol {
        width: 100%;
    }

    header .homeHeader .bigCol {
        height: 400px;
    }

        header .homeHeader .bigCol .headerTekst {
            font-size: 17px;
            padding: 20px;
        }

    header .logo img {
        height: 25px;
    }

    header .homeHeader {
        display: block;
    }

        header .homeHeader .smallCol, header .volgHeader .smallCol {
            width: 100%;
            padding: 30px 25px;
        }

    #writingHeader {
        display: none;
    }

    .hamburger {
        right: 25px !important;
        top: 15px !important;
    }

    .mobileTekst {
        position: relative;
        width: 100%;
        padding: 30px 0;
        box-sizing: border-box;
        display: block;
        font-family: 'Marker';
        font-size: 18px;
        text-align: center;
    }

    header, header .homeHeader {
        height: auto;
    }

    .writingPostITContainer, #homeOnzeKlanten .writingPostITContainer {
        display: none;
    }

    .stiftItem {
        display: none !important;
    }

    #homeContent {
        padding: 70px 0;
    }

        #homeContent h1 {
            font-size: 24px;
            line-height: 30px;
        }

        #homeContent .wrapperSmall, #homeBlogsEnMeer .wrapperSmall {
            width: 100%;
            padding: 0 25px;
            text-align: center;
        }

        #homeContent p {
            margin: 0 0 40px;
        }

        #homeContent .btnWit, #homeOnzeKlanten .btnGrijs, #homeOnzeMensen .btnBlauw, #homeBlogsEnMeer .btnGrijs {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            margin: 10px 0 0;
            text-align: left;
            justify-content: left;
        }

    #homeBlogsEnMeer .btnGrijs {
        margin-top: 40px;
    }

        #homeBlogsEnMeer .btnGrijs.btnTransparent {
            justify-content: center;
            margin-top: 20px;
        }

        #homeContent .btnWit span, #homeOnzeKlanten .btnGrijs span, #homeOnzeMensen .btnBlauw span, #homeBlogsEnMeer .btnGrijs span {
            position: absolute;
            right: 15px;
            top: 14px;
        }

    #homeExpertises {
        padding: 60px 0 0;
        background-size: 15px 15px;
    }

        #homeExpertises .wrapper {
            padding: 0;
            display: block;
        }

            #homeExpertises .wrapper .smallCol {
                width: 100%;
                box-sizing: border-box;
            }

    #homeOnzeKlanten {
        padding: 20px 0 70px;
    }

        #homeOnzeKlanten .bigCol {
            display: block;
            width: 100%;
            /*height: 250px;*/
        }

            #homeOnzeKlanten .bigCol .col25 {
                width: 50vw;
                margin: 0;
                height: 250px;
            }

        #homeOnzeKlanten .col25 .postITContainer {
            padding-top: 40px;
        }

    #homeBlogsEnMeer .wrapperSmall {
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        padding: 60px 25px 50px;
    }

    #homeBlogsEnMeer {
        text-align: center;
        padding: 80px 30px 90px;
    }

        #homeBlogsEnMeer h2, #homeBlogsEnMeer h3 {
            margin-left: 0;
        }

    footer {
        position: relative;
        padding: 50px 0 0;
    }

        footer .wrapper, #contactGegevens .wrapper {
            flex-direction: row;
            flex-wrap: wrap;
        }

            footer .wrapper .col25.shadow, .persoonContactGegevens .col33.shadow, #contactGegevens .wrapper .col25.shadow {
                width: calc(50% - 20px);
                margin-bottom: 15px;
                margin: 10px 10px 15px;
            }

            footer .wrapper .col25, .persoonContactGegevens .col33, #contactGegevens .wrapper .col25 {
                width: 100%;
                margin: 0;
            }

            footer .wrapper .col75 {
                width: 100%;
            }

    .formContainer {
        background-color: rgb(237,237,237);
        background-image: none;
        padding: 50px 25px 0px;
        width: 100%;
        height: auto;
    }

        .formContainer .formLbl, .aanmeldFormContainer .formLbl {
            width: 100%;
            text-align: left;
            font-size: 11px;
        }

    footer .wrapper.formWrapper {
        display: block;
        padding: 0;
        margin-bottom: 0;
    }

    .formContainer .formField, .aanmeldFormContainer .formField {
        width: 100%;
    }

        .formContainer .formField.flexEnd {
            margin-bottom: 40px;
        }

    #social .bigCol, #payoff .bigCol, #social .smallCol, #payoff .smallCol {
        width: 100%;
        margin-bottom: 20px;
    }

    footer h4, #contactGegevens h4 {
        margin: 0 0 10px;
    }

    #social a {
        width: 100%;
        margin: 0 0 10px 0;
    }

    #payoff .bigCol {
        margin-bottom: 0;
        margin-top: 20px;
        text-align: center;
    }

    #payoff .smallCol {
        text-align: center;
    }

    #payoff {
        line-height: 30px;
    }

    nav.IsActive, .mobileSubmenu {
        top: 65px !important;
        padding: 50px 0 100px 50px !important;
        height: calc(100vh - 65px) !important;
    }

        nav.IsActive ul li, .mobileSubmenu ul li {
            margin-bottom: 20px;
        }

        .mobileSubmenu .btnGrijs {
            top: 10px;
        }

    header .volgHeader .smallCol {
        display: none;
    }

    #trainingen, #blogs, #contact, #content, #coeventIntro .bigCol {
        margin: 30px 0;
    }

    #personeel .bigCol {
        padding: 30px 25px;
    }

    #content .col33.contentPostIT {
        display: none;
    }

    #onzeMensen .wrapper {
        padding: 50px 25px;
        width: 100%;
        box-sizing: border-box;
    }

    .overons .btnGrijsSmall {
        width: 100%;
        box-sizing: border-box;
    }

    .fotoMobiel {
        display: block;
        width: 135px;
        height: 135px;
        object-fit: cover;
        object-position: center center;
        order: 0;
    }

    .persoonContainer {
        flex-wrap: wrap;
        margin-top: 60px;
    }

        .persoonContainer .persoonMotivatie {
            order: 1;
            width: calc(100% - 135px);
            margin: -10px 0 0;
        }

        .persoonContainer:nth-child(odd) .persoonMotivatie {
            order: -1;
        }

        .persoonContainer .persoonInfoContainer, .persoonContainer:nth-child(odd) .persoonInfoContainer {
            order: 2;
            width: 100%;
        }

            .persoonContainer .persoonInfoContainer .persoonInfo {
                margin: 0;
            }

    .persoonInfoContainer img {
        display: none;
    }

    .persoonContainer .persoonInfoContainer {
        padding: 20px 25px;
    }

        .persoonContainer .persoonInfoContainer .persoonInfo .meerInfo {
            border: 0;
            font-size: 15px;
            bottom: 20px;
            right: 15px;
        }

    .postITContainer.hoekje .postIT.klein {
        background-size: 130px;
    }

    .postITContainer .postIT.klein .postITTekst {
        font-size: 10px;
        padding: 40px 10px 0;
    }

    .persoonContainer .persoonMotivatie .postITContainer {
        transform: rotate(5deg) translateX(-10px) translateY(0);
    }

    .persoonContainer:nth-child(odd) .persoonMotivatie .postITContainer {
        order: 0;
        transform: rotate(5deg) translateX(-40px) translateY(0px);
    }

    .persoonContactGegevens {
        flex-wrap: wrap;
    }

    .klantOverzicht .klantContainer {
        width: calc(50vw - 30px);
        height: calc(50vw - 30px);
        padding: 10px;
    }

    #blogOverzicht .blogOverzicht article img, #coEventOverzicht .coEventOverzicht article img {
        height: 75px;
        width: 75px;
        margin: 0 15px 0 0;
    }

    #blogOverzicht .blogOverzicht article h2, #coEventOverzicht .coEventOverzicht article h2, #personeel h3 {
        font-size: 15px;
        line-height: 20px;
    }

    #blogOverzicht .blogOverzicht article .articleFooter, #coEventOverzicht .coEventOverzicht article .articleFooter {
        display: block;
    }

        #blogOverzicht .blogOverzicht article .articleFooter .col50, #coEventOverzicht .coEventOverzicht article .articleFooter .col50 {
            width: 100%;
        }

    #blogOverzicht .blogOverzicht article, #coEventOverzicht .coEventOverzicht article, #blogOverzicht .blogOverzicht .laadMeer, #blogOverzicht .blogOverzicht .dxdvPagerShowMoreItemsContainer {
        padding-bottom: 0;
    }

        #blogOverzicht .blogOverzicht article a, #coEventOverzicht .coEventOverzicht article a {
            padding: 0;
        }

    #content .blogHeader img {
        height: 75px;
        width: 75px;
        margin: 0 15px 0 0;
    }

    #trainingOverzicht .bigCol {
        padding: 0;
    }

    #trainingOverzicht .trainingOverzicht {
        padding: 10px 15px 0;
    }

        #trainingOverzicht .trainingOverzicht .training {
            width: calc((100% / 2) - 20px);
        }

    .trainingHeader .training {
        font-size: 11px;
    }

    .trainingHeader, .coeventHeader {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 40px 0 30px;
    }

    .btnGeel, .btnWitTransparent {
        height: 45px;
        font-size: 14px;
    }

    h2, h3 {
        line-height: normal;
    }

    #hoewijwerken {
        padding: 60px 0;
    }

    #trainingOverzicht .smallCol.filterCol {
        top: 65px;
        padding-bottom: 20px;
    }

    .activeFiltersContainer {
        flex-wrap: wrap;
    }

    .activeFilters, .activeFiltersTitel {
        width: 100%;
    }

    #trainingOverzicht .trainingOverzicht .training .contentTraining, .trainingHeader .training .contentTraining {
        position: absolute;
        top: 10px;
        left: 10px;
        bottom: 10px;
        right: 10px;
    }

    #hoewijwerken .smallCol.videoContainer .postITContainer {
        top: 0;
        width: 130px;
        height: 160px;
    }

    .hoewijwerkenVideoWrapper {
        margin-top: 40px;
    }

    .pcAlert {
        width: 90vw;
        height: 350px;
    }

    .sortDropdown {
        border: 0;
        width: 100px;
        font-size: 14px;
        height: 30px !important;
    }

    .btnWeergave {
        height: 25px;
        width: 25px;
    }

        .btnWeergave svg {
            height: 10px;
            width: 10px;
        }

    .sortDropdown .dxeButtonEditButton {
        padding: 0;
    }

    .trainingTopBar {
        height: auto;
        padding: 10px 0 10px;
    }

    #trainingOverzichtLijst .trainingRow.kop, #trainingOverzichtLijst .trainingType {
        display: none;
    }

    #trainingOverzichtLijst .trainingRow {
        font-size: 13px !important;
        height: auto;
        flex-direction: column;
        padding: 10px 15px;
        position: relative;
        box-sizing: border-box;
    }

    #trainingOverzichtLijst .trainingKleur {
        position: absolute;
        top: 0px;
        left: 0;
        height: 100%;
        width: 5px;
    }

    #trainingOverzichtLijst .trainingNaam, #trainingOverzichtLijst .trainingLocatie, #trainingOverzichtLijst .trainingStartdatum {
        width: calc(100% - 5px);
        text-align: left;
        line-height: 20px;
    }

    .trainingTopBar .col50 {
        padding: 0;
    }

        .trainingTopBar .col50.alignRight {
            padding: 0 15px 0 0;
        }
}

.hamburger--3dx .hamburger-box, .hamburger--3dx-r .hamburger-box, .hamburger--3dy .hamburger-box, .hamburger--3dy-r .hamburger-box {
    perspective: 80px
}

.hamburger {
    position: fixed;
    right: 30px;
    top: 30px;
    font: inherit;
    display: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
    z-index:9999;
}

.hamburger--emphatic, .hamburger--emphatic-r {
    overflow: hidden
}

.hamburger:hover .hamburger-inner, .hamburger:hover .hamburger-inner:after, .hamburger:hover .hamburger-inner:before {
    background-image: url('/images/bg_hamburger.svg');
}
    .hamburger:hover .hamburger-inner:before {
        background-image: none;
    }
    .hamburger-box {
        position: relative;
        display: inline-block;
        width: 24px;
        height: 24px
    }

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px;
    
}

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        position: absolute;
        width: 24px;
        height: 3px;
        transition-timing-function: ease;
        transition-duration: .15s;
        transition-property: transform;
        border-radius: 0;
        background-image: url('/images/bg_hamburger.svg');
    }

        .hamburger-inner:after, .hamburger-inner:before {
            display: block;
            content: ""
        }

        .hamburger-inner:before {
            top: -10px;
            background-image:none;
        }

        .hamburger-inner:after {
            bottom: -10px
        }

.hamburger--3dx .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx .hamburger-inner:after, .hamburger--3dx .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx.is-active .hamburger-inner {
    transform: rotateY(180deg);
    background-color: transparent
}

    .hamburger--3dx.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dx-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dx-r .hamburger-inner:after, .hamburger--3dx-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dx-r.is-active .hamburger-inner {
    transform: rotateY(-180deg);
    background-color: transparent
}

    .hamburger--3dx-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dx-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy .hamburger-inner:after, .hamburger--3dy .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy.is-active .hamburger-inner {
    transform: rotateX(-180deg);
    background-color: transparent
}

    .hamburger--3dy.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--3dy-r .hamburger-inner {
    transition: transform .15s cubic-bezier(.645,.045,.355,1),background-color 0 cubic-bezier(.645,.045,.355,1) .1s
}

    .hamburger--3dy-r .hamburger-inner:after, .hamburger--3dy-r .hamburger-inner:before {
        transition: transform 0 cubic-bezier(.645,.045,.355,1) .1s
    }

.hamburger--3dy-r.is-active .hamburger-inner {
    transform: rotateX(180deg);
    background-color: transparent
}

    .hamburger--3dy-r.is-active .hamburger-inner:before {
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--3dy-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-10px,0) rotate(-45deg)
    }

.hamburger--arrow.is-active .hamburger-inner:before {
    transform: translate3d(-8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrow.is-active .hamburger-inner:after {
    transform: translate3d(-8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:before {
    transform: translate3d(8px,0,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrow-r.is-active .hamburger-inner:after {
    transform: translate3d(8px,0,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,-10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--arrowalt.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(-8px,10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r .hamburger-inner:before {
    transition: top .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r .hamburger-inner:after {
    transition: bottom .1s ease .1s,transform .1s cubic-bezier(.165,.84,.44,1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,-10px,0) rotate(45deg) scaleX(.7)
}

.hamburger--arrowalt-r.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease,transform .1s cubic-bezier(.895,.03,.685,.22) .1s;
    transform: translate3d(8px,10px,0) rotate(-45deg) scaleX(.7)
}

.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner:after, .hamburger--boring .hamburger-inner:before {
    transition-property: none
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg)
}

    .hamburger--boring.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--boring.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--collapse.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(-90deg)
    }

.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--collapse-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear
    }

    .hamburger--collapse-r .hamburger-inner:before {
        transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--collapse-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(45deg)
}

    .hamburger--collapse-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
        opacity: 0
    }

    .hamburger--collapse-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
        transform: rotate(90deg)
    }

.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(135deg)
}

    .hamburger--elastic.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(-270deg)
    }

.hamburger--elastic-r .hamburger-inner {
    top: 2px;
    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
    transition-duration: .275s
}

    .hamburger--elastic-r .hamburger-inner:before {
        top: 10px;
        transition: opacity .125s ease .275s
    }

    .hamburger--elastic-r .hamburger-inner:after {
        top: 20px;
        transition: transform .275s cubic-bezier(.68,-.55,.265,1.55)
    }

.hamburger--elastic-r.is-active .hamburger-inner {
    transition-delay: 75ms;
    transform: translate3d(0,10px,0) rotate(-135deg)
}

    .hamburger--elastic-r.is-active .hamburger-inner:before {
        transition-delay: 0;
        opacity: 0
    }

    .hamburger--elastic-r.is-active .hamburger-inner:after {
        transition-delay: 75ms;
        transform: translate3d(0,-20px,0) rotate(270deg)
    }

.hamburger--emphatic .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic.is-active .hamburger-inner:before {
        top: -80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,80px,0) rotate(45deg)
    }

    .hamburger--emphatic.is-active .hamburger-inner:after {
        top: -80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,80px,0) rotate(-45deg)
    }

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color .125s ease-in .175s
}

    .hamburger--emphatic-r .hamburger-inner:before {
        left: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s
    }

    .hamburger--emphatic-r .hamburger-inner:after {
        top: 10px;
        right: 0;
        transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s
    }

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0;
    transition-timing-function: ease-out;
    background-color: transparent
}

    .hamburger--emphatic-r.is-active .hamburger-inner:before {
        top: 80px;
        left: -80px;
        transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(80px,-80px,0) rotate(-45deg)
    }

    .hamburger--emphatic-r.is-active .hamburger-inner:after {
        top: 80px;
        right: -80px;
        transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
        transform: translate3d(-80px,-80px,0) rotate(45deg)
    }

.hamburger--slider .hamburger-inner:before, .hamburger--slider-r .hamburger-inner:before {
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform,opacity
}

.hamburger--slider .hamburger-inner {
    top: 2px
}

    .hamburger--slider .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(45deg)
}

    .hamburger--slider.is-active .hamburger-inner:before {
        transform: rotate(-45deg) translate3d(-5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(-90deg)
    }

.hamburger--slider-r .hamburger-inner {
    top: 2px
}

    .hamburger--slider-r .hamburger-inner:before {
        top: 10px
    }

    .hamburger--slider-r .hamburger-inner:after {
        top: 20px
    }

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(-45deg)
}

    .hamburger--slider-r.is-active .hamburger-inner:before {
        transform: rotate(45deg) translate3d(5.71px,-6px,0);
        opacity: 0
    }

    .hamburger--slider-r.is-active .hamburger-inner:after {
        transform: translate3d(0,-20px,0) rotate(90deg)
    }

.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0 linear .13s
}

    .hamburger--spring .hamburger-inner:before {
        top: 10px;
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

    .hamburger--spring .hamburger-inner:after {
        top: 20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: .22s;
    background-color: transparent
}

    .hamburger--spring.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(45deg)
    }

    .hamburger--spring.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: translate3d(0,10px,0) rotate(-45deg)
    }

.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-delay: 0;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

    .hamburger--spring-r .hamburger-inner:after {
        top: -20px;
        transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0 linear
    }

    .hamburger--spring-r .hamburger-inner:before {
        transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spring-r.is-active .hamburger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

    .hamburger--spring-r.is-active .hamburger-inner:after {
        top: 0;
        transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0 linear .22s;
        opacity: 0
    }

    .hamburger--spring-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
        transform: rotate(90deg)
    }

.hamburger--stand .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(90deg);
    background-color: transparent
}

    .hamburger--stand.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--stand-r .hamburger-inner {
    transition: transform 75ms cubic-bezier(.55,.055,.675,.19) .15s,background-color 0 linear 75ms
}

    .hamburger--stand-r .hamburger-inner:before {
        transition: top 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

    .hamburger--stand-r .hamburger-inner:after {
        transition: bottom 75ms ease-in 75ms,transform 75ms cubic-bezier(.55,.055,.675,.19) 0
    }

.hamburger--stand-r.is-active .hamburger-inner {
    transition: transform 75ms cubic-bezier(.215,.61,.355,1) 0s,background-color 0 linear .15s;
    transform: rotate(-90deg);
    background-color: transparent
}

    .hamburger--stand-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(-45deg)
    }

    .hamburger--stand-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease-out .1s,transform 75ms cubic-bezier(.215,.61,.355,1) .15s;
        transform: rotate(45deg)
    }

.hamburger--spin .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(225deg)
}

    .hamburger--spin.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--spin-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s
}

    .hamburger--spin-r .hamburger-inner:before {
        transition: top .1s ease-in .25s,opacity .1s ease-in
    }

    .hamburger--spin-r .hamburger-inner:after {
        transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--spin-r.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(-225deg)
}

    .hamburger--spin-r.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s ease-out .12s;
        opacity: 0
    }

    .hamburger--spin-r.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(90deg)
    }

.hamburger--squeeze .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: 75ms
}

    .hamburger--squeeze .hamburger-inner:before {
        transition: top 75ms ease .12s,opacity 75ms ease
    }

    .hamburger--squeeze .hamburger-inner:after {
        transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19)
    }

.hamburger--squeeze.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(45deg)
}

    .hamburger--squeeze.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease,opacity 75ms ease .12s;
        opacity: 0
    }

    .hamburger--squeeze.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
        transform: rotate(-90deg)
    }

.hamburger--vortex .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex .hamburger-inner:after, .hamburger--vortex .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(765deg)
}

    .hamburger--vortex.is-active .hamburger-inner:after, .hamburger--vortex.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(90deg)
    }

.hamburger--vortex-r .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-duration: .2s
}

    .hamburger--vortex-r .hamburger-inner:after, .hamburger--vortex-r .hamburger-inner:before {
        transition-delay: .1s;
        transition-timing-function: linear;
        transition-duration: 0
    }

    .hamburger--vortex-r .hamburger-inner:before {
        transition-property: top,opacity
    }

    .hamburger--vortex-r .hamburger-inner:after {
        transition-property: bottom,transform
    }

.hamburger--vortex-r.is-active .hamburger-inner {
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    transform: rotate(-765deg)
}

    .hamburger--vortex-r.is-active .hamburger-inner:after, .hamburger--vortex-r.is-active .hamburger-inner:before {
        transition-delay: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:before {
        top: 0;
        opacity: 0
    }

    .hamburger--vortex-r.is-active .hamburger-inner:after {
        bottom: 0;
        transform: rotate(-90deg)
    }

.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}