/* CSS Document */
.flexpop-block {
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 0;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	
	-webkit-transition: opacity 0.5s ease-in-out,
		transform 0s ease-in-out 0.5s;
	-moz-transition: opacity 0.5s ease-in-out,
		transform 0s ease-in-out 0.5s;
	-o-transition: opacity 0.5s ease-in-out,
		transform 0s ease-in-out 0.5s;
	transition: opacity 0.5s ease-in-out,
		transform 0s ease-in-out 0.5s;	
	
	position: fixed;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: column nowrap;
	    -ms-flex-flow: column nowrap;
	        flex-flow: column nowrap;
	-webkit-box-pack: center;	
	-webkit-justify-content: center;	
	   -moz-box-pack: center;	
	    -ms-flex-pack: center;	
	        justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	z-index: 9999;
}
.flexpop-block.open {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
	
}
.flexpop-bg {
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
}
.flexpop-container {
	position: relative;
	transform: scale(0);
	transition: all 0.5s ease-in-out;
	pointer-events: auto;
	max-width: 100%;
	max-height: 100%;
}
.flexpop-box {
	max-height: 100%;
	max-width: 100%;
}
.flexpop-block.open .flexpop-container {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.flexpop-content {
	overflow-y: auto;	
	max-height: calc(100vh - 110px);
	background-color: #fff;	
	margin: 0px 30px 30px 30px;
	padding: 30px;
}
.flexpop-close {
	text-align: right;
	color: #fff;
	margin-right: 10px;	
}
.flexpop-close i {
	cursor: pointer;
	font-size: 24px;
}
.flexpop-content img {
	max-width: 100%;
	height: auto !important;
}

/* effect: fall */
.flexpop-block.fall .flexpop-container {
	transform: translate(0px, -1000px);
}
.flexpop-block.fall.open .flexpop-container {
	transform: translate(0px, 0px);
}
/* effect: fade */
.flexpop-block.fade .flexpop-container {
	transform: none;
}
.flexpop-block.fade.open .flexpop-container {
	transform: none;
}
/* effect: none */
.flexpop-block.none,
.flexpop-block.none.open
.flexpop-block.none .flexpop-container,
.flexpop-block.none.open .flexpop-container{
	transition: all 0s;
}
/* effect: none */

/* type image */ 
.flexpop-block[data-type="image"] img {
	max-height: calc(100vh - 120px);
	max-width: calc(100vw - 120px);
}

/* iframe */
.flexpop-block iframe {
	max-width: 100%;
}