@font-face { font-family:'cerabox'; src: url('../icons/cerabox.woff') format('woff'), url('../icons/cerabox.woff2') format('woff2'), url('../icons/ipn.ttf') format('truetype'); font-weight:normal; font-style:normal;}

:root {
 --font: "Arial";
 --font-cerabox-icon: "cerabox";
 --color-body-bg: #fff;
 --color-light-bg: #fff;
 --color-dark-bg: #222;
 --color-text: #111;
 --color-light-text: #f4f4f4;
 
 --gradient: linear-gradient(180deg, rgba(0,74,105,0.85) 0%, rgba(0,160,227,0.3) 100%);
 --border-radius: 0px;
 --border-radius-button: 1px;
 --box-shadow: 0 0 10px rgba(160,160,160,0.2);
 --vcenter: translate(-50%,0);
 --hcenter: translate(0,-50%);
 --center: translate(-50%,-50%);
 
 --cerabox-border-width: 0.3em;
 --cerabox-button-width: 40px;
 --cerabox-button-height: 40px;
}


#cerabox-loading {
	position:fixed;
	top:50%;
	left:50%;
	width:var(--cerabox-button-width);
	height:var(--cerabox-button-height);
	margin-top:calc(-0.5 * var(--cerabox-button-height));
	margin-left:calc(-0.5 * var(--cerabox-button-width));
	overflow:hidden;
	z-index:1106;
	display:none;
	transform:scale(1);
	transform-origin:50% 50%;
	-webkit-transform:scale(1);
	-webkit-transform-origin:50% 50%;
}

#cerabox-loading div.cerabox-loading {
	position:absolute;
	top:0;
	left:0;
	width:var(--cerabox-button-width);
	height:var(--cerabox-button-height);
	background:var(--color-light-bg);
	border-radius:100%;
	box-shadow:var(--box-shadow)
}
#cerabox-loading div.cerabox-loading:before {
	position:relative;
	display:block;
	width:var(--cerabox-button-width);
	height:var(--cerabox-button-height);
	line-height:var(--cerabox-button-height);
	text-align:center;
	font-size:2em;
	color:var(--color-text); 
	animation: spin 7s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#cerabox .cerabox-content-protection { display:none; position:absolute; left:0; right:0; bottom:0; top:0; background-color:transparent; z-index:1103; -moz-user-select:none; -khtml-user-select:none; }


#cerabox-background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1100;
	display:none;
	background:var(--color-body-bg);
	opacity:.8;
}

#cerabox {
	position:absolute;
	top:50%;
	left:50%;
	z-index:1101;
	display:none;
	opacity:0;
	background:var(--color-light-bg);
	transform:scale(1);
	transform-origin:0 0;
	-webkit-transform:scale(1);
	-webkit-transform-origin:0 0;
}

#cerabox .cerabox-content {
	position:relative;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	outline:none;
	overflow:hidden;
	border-width:var(--cerabox-border-width);
	border-style: solid;
	border-color: var(--color-light-bg);
	box-sizing:border-box;
	z-index:1102;
	box-shadow:var(--box-shadow);
}

#cerabox .cerabox-title {
	position:absolute;
	bottom:0;
	left:0;
	z-index:1103;
	color:var(--color-text);
	background:var(--color-light-bg);
	width:100%;
	transform:scale(1);
	transform-origin:0 100%;
	-webkit-transform:scale(1);
	-webkit-transform-origin:0 100%;
}

#cerabox span.cerabox-error, #cerabox .cerabox-title span {
	font-family:var(--font);
	font-size:1em;
	color:var(--color-text);
	line-height:1em;
	padding:1em;
	display:block;
}
#cerabox .cerabox-title span { display:none; }

#cerabox .cerabox-content img.ceraImage {
	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;
	display:none;
	height:100%;
	width:25%;
	cursor:pointer;
	outline:none;
	background:transparent;
	z-index:1104;
}
#cerabox a.cerabox-left { left:0; }
#cerabox a.cerabox-right { right:0; }

#cerabox a.cerabox-left:before, #cerabox a.cerabox-right:before {
	position:absolute;
	top:50%;
	width:var(--cerabox-button-width);
	height:var(--cerabox-button-height);
	display:block;
	font-size:1.3em; 
	line-height:var(--cerabox-button-height);
	text-align:center;
	opacity:0;
	color:var(--color-text); 
	background:var(--color-light-bg); 
	border-radius:var(--border-radius-button);
	-webkit-transform:scale(1);
	-webkit-transform-origin:0 50%;
	transform:scale(1);
	transform-origin:0 50%;
}

#cerabox a.cerabox-left:before { left:0; }
#cerabox a.cerabox-right:before { right:0; }

#cerabox a.cerabox-left:hover:before, #cerabox a.cerabox-right:hover:before {
	color:var(--color-light-text); 
	background:var(--color-dark-bg); 
	opacity:1;
	transition-duration:0.6s;
}

#cerabox a.cerabox-close, 
#cerabox a.cerabox-zoomIn,
#cerabox a.cerabox-zoomOut {
	position:absolute;
	top:0;
	width:var(--cerabox-button-width);
	height:var(--cerabox-button-height);
	color:var(--color-text);
	background:var(--color-light-bg);
	border-radius:var(--border-radius-button);
	text-decoration:none;
	z-index:1105;
	transform:scale(1);
	transform-origin:100% 0;
	transition-duration:0.6s;
	-webkit-transform:scale(1);
	-webkit-transform-origin:100% 0;
}

#cerabox a.cerabox-close {
	right:0;
}
#cerabox a.cerabox-zoomOut {
	left:0;
}
#cerabox a.cerabox-zoomIn {
	left:var(--cerabox-button-width);
}

#cerabox a.cerabox-close:hover, #cerabox a.cerabox-close:focus,
#cerabox a.cerabox-zoomIn:hover, #cerabox a.cerabox-zoomIn:focus,
#cerabox a.cerabox-zoomOut:hover, #cerabox a.cerabox-zoomOut:focus { color:var(--color-light-text); background:var(--color-dark-bg); }
#cerabox a.cerabox-close:before,#cerabox a.cerabox-zoomIn:before,#cerabox a.cerabox-zoomOut:before {  position:relative; width:var(--cerabox-button-width); height:var(--cerabox-button-height); display:block; font-size:1.3em; line-height:var(--cerabox-button-height); text-align:center; }

#cerabox a.cerabox-left span, #cerabox a.cerabox-right span, #cerabox a.cerabox-close span,#cerabox a.cerabox-zoomIn span,#cerabox a.cerabox-zoomOut span {position:absolute; top:-100em; left:-100em; width:1px; height:1px; padding:0; margin:0; text-indent:-1000em;}



/*Mobile*/
#cerabox.mobile {
	background:var(--color-light-bg);
}

#cerabox.mobile .cerabox-content {
	background:var(--color-light-bg);
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}

#cerabox.mobile .cerabox-content:first-child {
	background:var(--color-light-bg);
}

#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) {

	:root {
	 --cerabox-button-width: 22px;
	 --cerabox-button-height: 22px;
	}
	#cerabox .cerabox-content { overflow-y:auto; }

}

/* icons */
[class^="cerabox-"], [class*=" cerabox-"] { font-family:var(--font-cerabox-icon); speak:never; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; }

.cerabox-left:before {
  content: "\e500";
}
.cerabox-right:before {
  content: "\e501";
}
.cerabox-close:before {
  content: "\e502";
}
.cerabox-zoomOut:before {
  content: "\e503";
}
.cerabox-zoomIn:before {
  content: "\e504";
}
.cerabox-loading:before {
  content: "\e505";
}