:root{
    --primary : #1C143C;
    --accent : #FFC107;
}
.mw_logo_overlay {
    z-index: 999999999999999999999999999999!important;
    /* width: 100vw; */
    /* height: 100vh; */
    background-color: Var(--primary);
    /* position: fixed!important; */
    display: flex!important;
    /* top: 0px; */
    /* left: 0px; */
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.mw_logo_overlay>* {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mw_logo_overlay>.mw_logo {
    transform: translate(-50%, -50%) scale(2.73);
}

@keyframes slideDown {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(50%);
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(60%);
    }

    100% {
        transform: translateY(20%);
    }
}

.animate__animated {
    animation-duration: .5s !important;
    animation-fill-mode: both !important;
    transition: all 500ms cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
    transition-timing-function: cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
}

.mw_logo_overlay>h1 {
    color: white;
    font-size: 80px;
    font-weight: 700;
    font-family: "ExoTwo" !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    text-align: center;
    left: 0px;
    transform-origin: center;
    transform: none;
}

.mw_logo_overlay>h1:before {
    content: "";
    position: absolute;
    top: -46px;
    left: 0px;
    width: 100%;
    height: 183px;
    z-index: -1;
    background-image: url(https://marine-olie.ruw-web.nl/wp-content/uploads/2024/07/marine-olie-wereldbol.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}

.mw_page_transition {
    width: 100vw;
    height: 100vh;
    position: fixed!important;
    top: 0px;
    left: 0px;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    z-index: 999999999999999999999999999999!important;
    display: none;
}

.mw_logo_overlay.mw_page_transition_el {
    transform: translateY(0%) !important;
    transition: all 500ms cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
    transition-timing-function: cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
    position: relative;
}


.mw_menu_item,
.mw_menu_item>* {
    cursor: pointer;
}

.animate__animated.animate__fadeInLeftSubtile {
    animation-name: fadeInLeftSubtile !important;
    animation-duration: .5s !important;
}

.animate__animated.animate__fadeInRightSubtile {
    animation-name: fadeInRightSubtile !important;
    animation-duration: .5s !important;
}

@-webkit-keyframes fadeInLeftSubtile {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }

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

@keyframes fadeInLeftSubtile {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-300px, 0, 0);
        transform: translate3d(-300px, 0, 0);
    }

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

@-webkit-keyframes fadeInRightSubtile {
    from {
        opacity: 0;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

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

@keyframes fadeInRightSubtile {
    from {
        opacity: 0;
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

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

.mwp_projects>* {
    transition: all 500ms cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
    transition-timing-function: cubic-bezier(0.000, 0.615, 0.210, 0.940) !important;
    /* custom */
}

.mwp_projects:hover>* {
    transform: scale(0.95);
    opacity: 0.8;
}

.mwp_projects:hover>*:hover {
    transform: scale(1.1);
    opacity: 1;
}

.mwp_filter:hover {
    background-color: rgb(208, 208, 208);
}

.mw_offerte_modal_content>.mw_mobile_menu_close,
.mw_offerte_modal>.mw_mobile_menu_close {
    position: absolute;
    top: 30px;
    right: 25px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: var(--accent);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' data-name='Laag 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='5.8' y='17.3' width='27.71' height='5.41' rx='2.7' ry='2.7' transform='translate(-8.39 19.75) rotate(-45)'/%3E%3Crect class='cls-1' x='16.95' y='6.14' width='5.41' height='27.71' rx='2.7' ry='2.7' transform='translate(-8.39 19.75) rotate(-45)'/%3E%3C/svg%3E");
    cursor: pointer;
}

.mw_offerte_modal_content>.mw_mobile_menu_close {
    background-color: Red;
    position: absolute;
    right: 30px;
    top: 30px;
    color: white;
    width: 30px;
    height: 30px;
    background-color: var(--accent);
    border-radius: 2px;
    z-index: 9999
}

@media screen and (min-width: 700px) {
    .mw_offerte_modal_content {
        padding: 30px;
        max-height: 630px;
        max-width: 700px;
    }
}

/* on mobile, dont render .mw_glow*/
@media screen and (max-width: 600px) {
    .mw_glow {
        display: none;
    }

    /* also disable all animations*/
    .animate__animated {
        animation-duration: 0s !important;
        animation-fill-mode: none !important;
        transition: none !important;
        transition-timing-function: none !important;
    }

    .mw_logo_overlay>h1 {
        transform: none !important;
    }

    .mw_logo_overlay>h1:before {
        display: none !important;
    }

    * {
        animation: none !important;
    }
}

@media all and (max-width: 581px) {

    /*
	.et_animated {
		opacity: 1 !important
	}
    .et_pb_section,
	.et_pb_section * {
		-o-transition-property: none!important;
		-moz-transition-property: none!important;
		-webkit-transition-property: none!important;
		transition-property: none!important;
		-webkit-animation: none!important;
		-moz-animation: none!important;
		-o-animation: none!important;
		animation: none !important;
        animation-delay: 0s!important;
        transition-delay: 0s!important;
        transition-duration:0s!important;
	}
    .et_pb_row:before, .et_pb_row:after {
        display: none!important;
    }
    .et_pb_section:after, .et_pb_section:before {
        display: none!important;
    }
    *:hover{
        transform: none!important;
    }*/
    .mw_page_transition {
        display: none !important;
    }
}



.mw_slider_nav {
    transition-duration: .2s;
    perspective: 670px;
    perspective-origin: 50% 50%;
}

.mw_slider_nav:hover {
    perspective: 309px;
}

.mw_slider_nav:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.mw_slider_nav:has(.mw_slick_prev:active) {
    transform: scaleX(1) scaleY(1) scaleZ(3) rotateX(23deg) rotateY(-20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);

}

.mw_slider_nav:has(.mw_slick_next:active) {
    transform: scaleX(1) scaleY(1) scaleZ(3) rotateX(23deg) rotateY(21deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);

}
.mo_transparent{
    color: rgba(0,0,0,0)!important;
}