#modal { display: none; position: fixed;  z-index: 999; }
#modal,
#modal .overlay { width: 100%; height: 100%; left: 0; top: 0; }

#modal .modal-inner { width: 92%; max-width: 1200px; height: 80%; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: absolute; z-index: 2; }
#modal .overlay { z-index: 1; position: absolute; background: rgba(0, 0, 0, 0.7); cursor: pointer; }
#modal .close { position: absolute; z-index: 1; right: 50px; top: 40px; cursor: pointer; }
#modal iframe { border-radius: 10px; position: relative; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; border: none; }

#modal2 { display: none; width: 92%; max-width: 640px; height: 600px; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: fixed; z-index: 9999; }
#modal2 .close { position: absolute; z-index: 1; right: 50px; top: 40px; cursor: pointer; }

/* ------------------------------------------------------------ slide_modal */

#slide-modal { transition: 0.5s ease-in-out; left: -100%; position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; }
#slide-modal.open { left: 0%; }
#slide-modal .overlay { position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; }
#slide-modal .inner { max-width: 880px; position: relative; width: 88%; left: 0; top: 0; height: 100%; background: #fff;  }
#slide-modal .inner .close { position: absolute; top: 30px; left: 20px; z-index: 1; }
#slide-modal .inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; z-index: 0; }


@media only screen and (max-width: 768px) {
	
	#modal .close { width: 30px; height: auto; right: 30px; top: 30px;}
	#modal2 .close { width: 30px; height: auto; right: 30px; top: 30px;}
	#modal2 { height: 70%; }
	#youtube_modal .close { width: 30px; height: auto; }
}