#cerabox-loading {
	position:fixed;
	top:50%;
	left:50%;
	width:40px;
	height:40px;
	margin-top:-20px;
	margin-left:-20px;
	cursor:pointer;
	overflow:hidden;
	z-index:1106;
	display:none;

	-webkit-transform:scale(1);
	-webkit-transform-origin:50% 50%;
	transform:scale(1);
	transform-origin:50% 50%;
}

#cerabox-loading div {
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:480px;
	background-image:url("../img/cerabox.png");
}

#cerabox-background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1100;
	display:none;
	background:#000;
	opacity:.4;
}

#cerabox {
	position:absolute;
	top:50%;
	left:50%;
	z-index:1101;
	display:none;
	opacity:0;
	background:#fff;

	-webkit-transform:scale(1);
	-webkit-transform-origin:0 0;
	transform:scale(1);
	transform-origin:0 0;
}

#cerabox .cerabox-content {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	outline:none;
	position:relative;
	overflow:hidden;
	z-index:1102;
	border:0.3em solid #fff; 
	box-sizing:border-box;
	/*CSS3*/
	-moz-box-shadow:0 0 30px -5px #333;
	-webkit-box-shadow:0 0 30px -5px #333;
	box-shadow:0 0 30px -5px #333;
}

#cerabox span.cerabox-error, #cerabox .cerabox-title span {
	font-family:Helvetica;
	font-size:1em;
	color:#000;
	line-height:normal;
	padding:1em;
	display:block;
}
#cerabox span.cerabox-error { text-align:justify; }
#cerabox .cerabox-title span { display:none; color:#000; }

#cerabox .cerabox-title {
	z-index:1102;
	position:absolute;
	bottom:0;
	left:0;
	color:#fff;
	text-align:left;
	background:#fff;
	background:rgba(255, 255, 255, 0.99);
	width:100%;

	-webkit-transform:scale(1);
	-webkit-transform-origin:0 100%;
	transform:scale(1);
	transform-origin:0 100%;
}

#cerabox a.cerabox-close:link, #cerabox a.cerabox-close:visited  {
	position:absolute;
	top:0;
	right:0;
	width:40px;
	height:40px;
	color:#000;
	text-decoration:none; 
	background:#fff; 
	color:#000;
	z-index:1105;

	-webkit-transform:scale(1);
	-webkit-transform-origin:100% 0;
	transform:scale(1);
	transform-origin:100% 0;
	transition-duration:0.6s;
}

#cerabox a.cerabox-close span {position:absolute; top:-100em; left:-100em; width:1px; height:1px; padding:0; margin:0; text-indent:-1000em;}
#cerabox a.cerabox-close:hover, #cerabox a.cerabox-close:focus { color:#fff;background:#000;  }
#cerabox a.cerabox-close:before { font-family:"Consolas", monospace; content:"x"; font-size:1.3em; line-height:1em; position:absolute; top:50%; transform:translate(0,-50%); -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); left:0; width:100%; text-align:center;}


#cerabox .cerabox-content img.ceraImage {
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	border:none;
	outline:none;
	line-height:0;
	vertical-align:top;
}

#cerabox .cerabox-content iframe.ceraIframe {
	width:100%;
	height:100%;
	border:none;
	display:block;
}

#cerabox a.cerabox-left, #cerabox a.cerabox-right {
	position:absolute;
	bottom:0;
	height:100%;
	width:35%;
	cursor:pointer;
	outline:none;
	background:transparent;
	z-index:1104;
	display:none;
}
#cerabox a.cerabox-left { left:0; }
#cerabox a.cerabox-right { right:0; }

#cerabox a.cerabox-left span, #cerabox a.cerabox-right span {
	position:absolute;
	top:50%;
	width:40px;
	height:40px;
	margin-top:-20px;
	cursor:pointer;
	z-index:1104;
	display:block;
	color:#000;
	text-indent:-1000em;

	-webkit-transform:scale(1);
	-webkit-transform-origin:0 50%;
	transform:scale(1);
	transform-origin:0 50%;
}
#cerabox a.cerabox-left span { left:0; }
#cerabox a.cerabox-right span { right:0; }
#cerabox a.cerabox-left:hover span, #cerabox a.cerabox-right:hover span { background:#fff; }
#cerabox a.cerabox-left:hover span:before,
#cerabox a.cerabox-right:hover span:before { font-family:"Consolas", monospace; content:"<"; font-size:1.3em; line-height:1em; color:#000; position:absolute; top:50%; transform:translate(0, -50%);-ms-transform:translate(0, -50%);-webkit-transform:translate(0, -50%); left:0; width:100%; text-indent:0; text-align:center; text-decoration:none; }
#cerabox a.cerabox-right:hover span:before { content:">"; }


#cerabox .cerabox-content-protection {
	display:none;
	position:absolute;
	background:transparent url('../img/blank.gif');
	z-index:1103;
	left:0;
	right:0;
	bottom:0;
	top:0;
	-moz-user-select:none;
	-khtml-user-select:none;
	/*user-select:none;*/
}

/*IE6*/
#cerabox-loading.ceraboxbox-ie6 {
	position:absolute; margin-top:0;
	/*top:expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 :document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop )) + 'px');*/
}



/*Mobile*/
#cerabox.mobile {
	/*width:100% !important;
	height:100% !important;*/
	background:#fff;
}

#cerabox.mobile .cerabox-content {
	background:#fff;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

#cerabox.mobile .cerabox-content:first-child {
	background:#fff;
}

#cerabox.mobile a.cerabox-left, #cerabox.mobile a.cerabox-right {
	width:40%;
}


#cerabox.mobile .cerabox-title span { 	
	font-size:0.8em;
	text-align:center;
}

/* @2x  -------------------------------------------------------------------------------*/

@media (min-resolution:192dpi)
{

	#cerabox-loading div {
		/* Reference the @2x Sprite */
		background-image:url('../img/cerabox@2x.png');
		/* Translate the @2x sprite's dimensions back to 1x */
		background-size:82px auto;
	}
	#cerabox .cerabox-close,
	#cerabox a.cerabox-left:hover span, #cerabox.mobile a.cerabox-left span,
	#cerabox a.cerabox-right:hover span, #cerabox.mobile a.cerabox-right span {
		width:20px;
		height:20px;
	}
}