/*
 Theme Name:   Mediakanjers
 Theme URI:    http://www.mediakanjers.nl
 Description:  MKTheme Child Theme
 Author:       Mediakanjers
 Author URI:   http://www.mediakanjers.nl
 Template:     MKTheme
 Version:      1.7.0
 Text Domain:  MKTheme-child
*/

/* popup */
body.freeze { overflow-y: hidden !important; }
.popup_body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,0.4); opacity: 0; transition: 200ms; -webkit-transition: 200ms; }
.popup_body.hide { display: none !important; }

.popup_body .popup_outer .popup_container .popup_inner .popup_content { margin: -2px; }
.popup_body .popup_outer { max-height: 850px; position: absolute; top: 50%; width: 100%; height: calc(100% - 40px); transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.popup_body .popup_container {  overflow-y: auto; overflow-x: hidden; max-height: 100%; position: absolute; max-width: 60%; width: calc(100% - 40px); background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); box-shadow: 0 0 5px rgba(0,0,0,0.4); border-radius: 0px; }
.popup_body .popup_close { cursor: pointer; float: right; position: absolute; top: 10px; right: 10px; z-index: 999;}
.popup_body .popup_close img { width: 18px; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: 200ms; -webkit-transition: 200ms; }
.popup_body .popup_close:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); }

.popup_header { float: left; width: 100%; padding: 10px 30px 0 30px; font-size: 18px; background-color: #fff;  }
.popup_titel { float: left; display: none; }
.popup_terug { float: right; cursor: pointer; text-transform: uppercase; font-weight: 700; font-size: 16px; line-height: 1.8em; }

.popup_inner { float: left; width: 100%; position: relative; }
.popup_inner h3 { margin-bottom: 20px; }

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

.popup_body .popup_container { opacity: 0; animation-name: inherit; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: 0.2s; }
.popup_body.open .popup_container{ animation-name: fadebottom_popup; opacity: 1;}

.popup_body .mk_button { width: 100%; text-align: center; }

#bedrijfsfilm .popup_container {background-color: transparent; }
#bedrijfsfilm .popup_content { margin: 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;}}

@-webkit-keyframes fadebottom_popup{0%{opacity:0;margin-top: 30px;}100%{opacity:1;margin-top: 0px;}}
@-moz-keyframes fadebottom_popup{0%{opacity:0;margin-top: 30px;}100%{opacity:1;margin-top: 0px;}}
@-o-keyframes fadebottom_popup{0%{opacity:0;margin-top: 30px;}100%{opacity:1;margin-top: 0px;}}
@keyframes fadebottom_popup{0%{opacity:0;margin-top: 30px;}100%{opacity:1;margin-top: 0px;}}

@media only screen and (max-width: 640px) { 
    .popup_body .popup_outer { height: 100%; transform: none; -webkit-transform: none; top: 0; max-height: 100%; }
    .popup_body .popup_container { width: 90%; max-width: 90%; height: auto; border-radius: 0px; margin: auto; transform: none; -webkit-transform: none; top: 50%; left: 5%; transform: translate(0%,-50%); }
    .popup_body .popup_container { transition-delay: 0ms; }
    .popup_body.open .popup_container { animation-name: inherit; opacity: 1; }
}

@media only screen and (max-height: 640px) { 
    .popup_body .popup_outer { height: 100%; transform: none; -webkit-transform: none; top: 0; max-height: 100%; }
    .popup_body .popup_container { width: 100%; max-width: 100%; height: 100%; border-radius: 0px; transform: none; -webkit-transform: none; top: 0; left: 0; }
} 

.bedrijfsvideopageouter { max-height: 100%!important; }
.bedrijfsvideopage { max-width: 85%!important; }