/* notification */
.mk_plugin_notificationinformatie { display: none; overflow: hidden; visibility: hidden; height: 0; opacity: 0; }

.mk_plugin_notification { padding: 0;  transition: 500ms; -webkit-transition: 500ms; opacity: 1; background: #000; color:#fff;  position: relative; top: 0; z-index: 99999999999999; width: 100%;  }
.mk_plugin_notification .close { position: absolute;  right: -30px; top: 0px; text-align: center; font-weight: 700; cursor: pointer;  padding: 10px;  z-index: 999; }

.mk_plugin_notification .mk_rij { padding: 30px 0; position: relative; width: 80%; max-width: 1200px; margin: 0 auto; }
.mk_plugin_notification .mk_rij .text { max-width: 1000px; margin: 0 auto; }
.mk_plugin_notification .mk_rij::after { content: ""; clear: both; display: block; height: 0; visibility: hidden; opacity: 0; }

.mk_plugin_notification h2 { padding-bottom: 10px; }

/* transform: translateY(-100%); -webkit-transform: translateY(-100%); */

.mk_plugin_notification.hide { opacity: 0;  overflow: hidden; max-height: 0 !important; }
.mk_plugin_notification.delete { display: none; }
.mk_plugin_notification.bottom { bottom: 0; top: auto; }


.mk_plugin_notification .mk_plugin_knop { margin-top: 10px; text-align: center; }
.mk_plugin_notification .mk_plugin_knop a { overflow: hidden;  background-color: #fff; color: #000; padding: 10px 15px; cursor: pointer; position: relative; transition: 500ms; -webkit-transition: 500ms; display: inline-block; }


.mk_plugin_notification.top .content { float: left; max-width: calc(100% - 160px); width: 100%; padding-right: 30px; }
.mk_plugin_notification.top .titel { display: none; }
.mk_plugin_notification.top .close { bottom: -40px; top: auto; background-color: #000; width: 40px; height: 40px; line-height: 1.3em; border-radius: 0 0 10px 10px; right: 0;  }

.mk_plugin_notification.top .mk_plugin_knop { float: right; margin: 0; position: relative;  width: 160px; }
.mk_plugin_notification.top .mk_plugin_knop a { width: 100%; border-radius: 10px; }

.mk_plugin_notification.top.nobutton .content { max-width: 100%; }


@media only screen and (max-width: 980px) {

    .mk_plugin_notification.top .content { max-width: 100%; padding: 0; }
    .mk_plugin_notification.top .mk_plugin_knop { max-width: 100%; margin-top: 20px; width: 100%; }
    .mk_plugin_notification.top .mk_plugin_knop a { width: auto; }
}



/* popup */
.mk_plugin_notificationinformatie_popup { overflow: auto; position: fixed; top: 0px; z-index: 9999999999999999; text-align: center; width: 100%; height: 100%; padding-top: 100px; background-color: rgba(0,0,0,0.3); }
.mk_plugin_notificationinformatie_popup .popup-inner { text-align: left; padding: 60px; margin-bottom: 50px; background-color: #fff; color: #000; display: inline-block; max-width: 1000px; position: relative; box-shadow: 0 0 15px rgba(0,0,0,0.4); }
.mk_plugin_notificationinformatie_popup .popup-inner img { display: block; }
.mk_plugin_notificationinformatie_popup .popup-close { position: absolute; right: 0; z-index: 9; top: 0; padding: 15px; cursor: pointer; }
.mk_plugin_notificationinformatie_popup .popup-close svg,
.mk_plugin_notificationinformatie_popup .popup-close img { width: 25px; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: 200ms; -webkit-transition: 200ms; }
.mk_plugin_notificationinformatie_popup .popup-close:hover svg,
.mk_plugin_notificationinformatie_popup .popup-close:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); }
.mk_plugin_notificationinformatie_popup .popup-image img.mobile { display: none; }
.mk_plugin_notificationinformatie_popup.open { display: block !important; }

.mk_plugin_notificationinformatie_popup .knop { margin-top: 20px; }
.mk_plugin_notificationinformatie_popup .knop a { overflow: hidden;  background-color: #fff; color: #000; padding: 10px 15px; cursor: pointer; position: relative; transition: 500ms; -webkit-transition: 500ms; display: inline-block; }
.mk_plugin_notificationinformatie_popup .knop a svg { width: 20px; display: inline-block; top: 2px; position: relative; }


.mk_plugin_notificationinformatie_popup.popup2 .popup-image { float: left; width: 50%; }

.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_400 .popup-inner { max-width: 400px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_500 .popup-inner { max-width: 500px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_600 .popup-inner { max-width: 600px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_700 .popup-inner { max-width: 700px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_800 .popup-inner { max-width: 800px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_900 .popup-inner { max-width: 900px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_1100 .popup-inner { max-width: 1100px; }
.mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_1200 .popup-inner { max-width: 1200px; }


.mk_plugin_notificationinformatie_popup { opacity: 0; animation-name: inherit; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: 0.1s; }
.mk_plugin_notificationinformatie_popup.open { animation-name: fade; }

.mk_plugin_notificationinformatie_popup .popup-inner { opacity: 0; animation-name: inherit; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: 0.3s; }
.mk_plugin_notificationinformatie_popup.open .popup-inner { animation-name: fadebottom; }


@-webkit-keyframes fadebottom{0%{opacity:0;-webkit-transform:translateY(10%)}100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadebottom{0%{opacity:0;-moz-transform:translateY(10%)}100%{opacity:1;-moz-transform:translateX(0)}}
@-o-keyframes fadebottom{0%{opacity:0;-o-transform:translateY(10%)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadebottom{0%{opacity:0;transform:translateY(10%)}100%{opacity:1;transform:translateX(0)}}

@-webkit-keyframes fade {0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes fade {0%{opacity:0;}100%{opacity:1;}}
@-o-keyframes fade {0%{opacity:0;}100%{opacity:1;}}
@keyframes fade {0%{opacity:0;}100%{opacity:1;}}


@media only screen and (max-width: 640px) {
    .mk_plugin_notificationinformatie_popup { padding-top:0px; padding-bottom: 0px !important; }
    .mk_plugin_notificationinformatie_popup .popup-inner { display: block; padding: 60px 5%; margin-bottom: 0; }


    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_400,
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_500 { padding-top:50px; }
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_400 .popup-inner,
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_500 .popup-inner { display: inline-block; padding: 60px 5%; margin-bottom: 50px; }
}


@media only screen and (max-width: 520px) {

    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_400,
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_500 { padding-top:0px; }
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_400 .popup-inner,
    .mk_plugin_notificationinformatie_popup.mk_plugin_popup_breedte_500 .popup-inner { display: block; margin-bottom: 0; max-width: 100%; }

}






/* mk_plugin_notificationinformatie_icon */
.mk_plugin_notificationinformatie_icon { position: fixed; right: 0; top: 10%; z-index: 99999999; }
.mk_plugin_notificationinformatie_icon .inner { position: relative; }

.mk_plugin_notificationinformatie_icon .inner .info { background-color: #e8514e;  color: #fff;  z-index: 1; width: 50px; height: 50px; font-size: 26px; text-align: center; border-radius: 5px 0 0 5px; padding: 10.5px 0px; position: absolute; right: 0px; }
.mk_plugin_notificationinformatie_icon .inner .info svg { width: 28px; display: inline-block; }

.mk_plugin_notificationinformatie_icon .inner .item { width: 330px; position: absolute;  margin-right: -330px; z-index: 2; 
    transition: 500ms; -webkit-transition: 500ms; -ms-transition: 500ms; -o-transition: 500ms; }

.mk_plugin_notificationinformatie_icon .inner .content { background-color: #eeeceb; color: #4a5463; font-size:20px; padding: 20px 20px; }
.mk_plugin_notificationinformatie_icon .inner .content span { display: block; font-size:16px; font-weight:700; }

.mk_plugin_notificationinformatie_icon .inner .knop { background-color: #4a5463;  color: #eeeceb; border-radius: 0 0 0 20px; padding: 10px 20px; }
.mk_plugin_notificationinformatie_icon .inner .knop span { display: inline-block; margin-right: 0px; font-weight: 700; transition: 200ms; -webkit-transition: 200ms; }
.mk_plugin_notificationinformatie_icon .inner:hover .knop span { margin-right: 10px; }
.mk_plugin_notificationinformatie_icon .inner .knop svg { width: 20px; display: inline-block; position: relative; top: 2px; fill: #fff; }

.mk_plugin_notificationinformatie_icon .inner .close { cursor: pointer; z-index: 99; position: absolute;  left: 0; top: 0; background-color: #e8514e; color: #fff; width: 40px; height: 40px; border-radius: 10px 0 0 10px; font-size: 18px; font-weight: 700; text-align: center; border-radius: 10px 0 0 10px; line-height: 39px;
    transition: 500ms; -webkit-transition: 500ms; -ms-transition: 500ms; -o-transition: 500ms; }

.mk_plugin_notificationinformatie_icon .inner.active .item { transform: translateX(-330px); -webkit-transform: translateX(-330px); -ms-transform: translateX(-330px); -o-transform: translateX(-330px); }
.mk_plugin_notificationinformatie_icon .inner.active .close { z-index: -1; left: -40px; top: 0; transform: translateX(-330px); -webkit-transform: translateX(-330px); -ms-transform: translateX(-330px); -o-transform: translateX(-330px); }


.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_20 { top: 20%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_30 { top: 30%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_40 { top: 40%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_50 { top: 50%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_60 { top: 60%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_70 { top: 70%; }
.mk_plugin_notificationinformatie_icon.mk_plugin_icon_top_80 { top: 80%; }



.note_datum { display: none; visibility: hidden; opacity: 0; height: 0; }