body {position: relative;}

.noscroll {overflow: hidden;}

.grid-wrap {
	margin: 10px auto 0;
	max-width: 1280px;
	width: 100%;
	padding: 0;
	-webkit-perspective: 1500px;
			perspective: 1500px;
}

.grid {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	-webkit-transition: all 0.3s cubic-bezier(0,0,0.25,1);
			transition: all 0.3s cubic-bezier(0,0,0.25,1);
	/* -webkit-transform-style: preserve-3d;
			transform-style: preserve-3d; */
}

.view-full .grid {
	/* -webkit-transform: translateZ(-1500px);
			transform: translateZ(-1500px); */
}

.grid figure,
.grid .placeholder {
	position: relative;
}

.grid figure {
	width: calc(16.666% - 10px);
	height: 0;
	margin: 5px;
	padding-top: 16.5%;
	border-radius: 10px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	/* background:  url('../images/1.jpg') 50% 50% no-repeat; */
	background: linear-gradient(rgba(17, 63, 140, 0.8),rgba(3, 31, 78, 0.7)), url("../images/figure_bg.jpg") no-repeat 50% 50% / cover;
	-webkit-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
		user-select: none;
}
.grid figure:hover {background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.5)), url("../images/figure_bg_over.jpg") no-repeat 50% 50% / cover;}

.grid figure div {
	position: absolute;
	top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
}

.grid figure div p {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	margin: 0;
}
.grid figure div p hr {width: 50%; margin: 10px auto 20px;}
.grid figure div span {font-size: 14px; }


@media screen and (max-width: 480px) {
    .grid figure div {font-size: 24px;}
}

.grid figure.active {opacity: 0;}

.grid .placeholder {
	pointer-events: none;
	position: absolute;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
	-webkit-transition: all 0.1s ease-out;
			transition: all 0.1s ease-out;
}

.placeholder > div {
	display: block;
	position: absolute;
	/* width: 100%;
	height: 100%; */
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
}

/* .placeholder .front img {width: 100%;height: 100%;} */
.placeholder .front {opacity: 0 !important}

.placeholder .back {
	background: white;
	-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
}

.view-full .placeholder {
	-webkit-transition: all 0.1s 0.1s cubic-bezier(0,0,0.25,1);
			transition: all 0.1s 0.1s cubic-bezier(0,0,0.25,1);
}

.vertical .view-full .placeholder {
	-webkit-transform: translateZ(1500px) rotateX(-179.9deg);
			transform: translateZ(1500px) rotateX(-179.9deg);
			/* FF, Chrome, can we agree on one direction, pleeease? */
}

.horizontal .view-full .placeholder {
	-webkit-transform: translateZ(1500px) rotateY(-179.9deg);
			transform: translateZ(1500px) rotateY(-179.9deg);
}

/* .grid figure img {display: block;width: 100%;} */

.grid3d .content,
.grid-wrap .loading {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none; /* Careful, does not work in IE < 11 http://caniuse.com/#search=pointer-events */
}

.grid3d .content {
	overflow-y: scroll;
	height: 0; /* What seems to be the problem, officer? Well, we have a second scroll bar in Chrome! */
	background: #fff;
	visibility: hidden;
	z-index: 999;
	-webkit-overflow-scrolling: touch;
	padding: 100px 0;
}

.loading {
	opacity: 0;
	z-index: 1;
	background: transparent url(../img/preloader.gif) no-repeat center center;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: opacity 0.1s, -webkit-transform 0.1s;
			transition: opacity 0.1s, transform 0.1s;
}

.loading.show {	opacity: 1;	-webkit-transform: scale(1); transform: scale(1);}

.grid3d .content.show {	height: auto; pointer-events: auto; visibility: visible;}

.grid3d .content > div {
	z-index: 10;
	position: absolute;
	top: 0;
	width: 100%;
	overflow: hidden;
	height: 0;
	opacity: 0;
	background: #fff;
	padding-top: 100px;
}

.grid3d .content > div.show {
	height: auto;
	opacity: 1;
	-webkit-transition: opacity 0.4s;
			transition: opacity 0.4s;
}

/* =======================================================
	prd content
======================================================= */
.grid3d .content > div.show .content_inner {max-width: 960px; margin: 0 auto;}
.grid3d .content > div.show .content_inner h1 {text-align: center; color: #222; font-weight: 700;}
.grid3d .content > div.show .content_inner h1:after {margin: 20px auto 20px;}
.grid3d .content > div.show .content_inner h3 {margin-top: 50px; padding-left: 20px; color: #444;}
.grid3d .content > div.show .content_inner h4 {margin-bottom: 50px; text-align: center; font-weight: 40;}
@media screen and (max-width: 810px) {
	.grid3d .content > div.show .content_inner {margin: 0 30px;}
	.grid3d .content > div.show .content_inner h3 {}
}

.prd-img,
.prd-text,
.features {
	max-width: 960px;
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
			transition: opacity 0.5s, transform 0.5s;
}

.vertical .prd-img,
.vertical .prd-text,
.vertical .features {
	-webkit-transform: translateY(100px);
			transform: translateY(100px);
}

.horizontal .prd-img,
.horizontal .prd-text,
.horizontal .features {
	-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
}

.grid3d .content > div.show .prd-img,
.grid3d .content > div.show .prd-text,
.grid3d .content > div.show .features {
	opacity: 1;
}

.vertical .content > div.show .prd-img,
.vertical .content > div.show .prd-text,
.vertical .content > div.show .features {
	-webkit-transform: translateY(0);
			transform: translateY(0);
}

.horizontal .content > div.show .prd-img,
.horizontal .content > div.show .prd-text,
.horizontal .content > div.show .features {
	-webkit-transform: translateX(0);
			transform: translateX(0);
}

p.prd-text:nth-child(2) {
	-webkit-transition-delay: 0.1s;
			transition-delay: 0.1s;
}

p.prd-text:nth-child(3) {
	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
}

.prd-btn {margin-top: -20px; margin-bottom: 60px;}
.prd-img {background-color: #fff; margin: 30px auto; text-align: center;}
.prd-img img {width: 50%;}
.prd-text,
.features {
	text-align: left;
	margin: 0 auto;
	padding: 10px 0px;
	color: #666;
	font-size: 18px;
}

.prd-text:last-child {
	padding-bottom: 100px;
}
@media screen and (max-width: 1000px) {
	.prd-text {font-size: 16px;}
}
@media screen and (max-width: 480px) {
	.prd-img img {width: 100%;}
}

/* ------------------------------------------------------------------ */
/* table Styles
/* ------------------------------------------------------------------ */
.tbl_wrap {margin:0 0 0px 0px;}
.tbl01, .tbl02, .tbl03 {width: 100%;}
.bor_left {border-left: 1px solid #fff !important}
@media screen and (max-width: 480px) {
	.tbl_wrap {overflow-x: scroll;}

}

/* Table */
.tbl01 thead {border-left: 1px solid #1e5a69;border-right: 1px solid #1e5a69;}
.tbl01 thead th {
    padding: 20px 6px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #293c74;
    border-left: 1px solid #eee;
    border-top: 1px solid #1e5a69;
    border-bottom: 1px solid #1e5a69;
}
.tbl01 thead th:nth-child(1) {width: 30%; border-left: none;}
.tbl01 thead th:nth-child(2) {width: 70%;}
.tbl01 tbody td {
    padding: 10px 20px;
    font-size: 16px;
    color: #666;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    font-weight: 400;
}
.tbl01 tbody td.sort {text-align: center; color: #666; background: #f5f5f5; font-weight: 500;}

@media screen and (max-width: 480px) {
    .tbl01 td {padding: 10px 10px;}
}

/* Table */
.tbl02 {margin-top: 50px; margin-bottom: 60px;}
.tbl02 thead {border-left: 1px solid #1e5a69;border-right: 1px solid #1e5a69;}
.tbl02 thead th {
    padding: 20px 6px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
	vertical-align: middle;
    background: #293c74;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.tbl02 thead th:nth-child(1) {width: 30%; border-left: none;}
.tbl02 thead th:nth-child(2) {width: 50%;}
.tbl02 thead th:nth-child(3) {width: 20%;}
.tbl02 td {
    padding: 10px 20px;
    font-size: 16px;
    color: #666;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    font-weight: 400;
    text-align: center;
    word-break: keep-all;
}
.tbl02 td.sort {  width: 20%; text-align: center; color: #666; background: #f5f5f5; font-weight: 500;}


@media screen and (max-width: 480px) {
    .tbl02 thead th:nth-child(1) {width: 30%;}
    .tbl02 thead th:nth-child(2) {width: 50%;}
    .tbl02 thead th:nth-child(3) {width: 20%;}
    .tbl02 td {padding: 10px 10px;}
}

/* Table */
.tbl03 { background: none;}
.tbl03 thead th {
    padding: 10px 6px;
    font-size: 16px;
    font-weight: 500;
    color: #f5f5f5;
    background: #293c74;
    border-left: 1px solid #fff;
}
.tbl03 thead th:first-child {border-left: none}
.tbl03 thead th:nth-child(1) {width: 25%;}
.tbl03 thead th:nth-child(2) {width: 25%;}
.tbl03 thead th:nth-child(3) {width: 25%;}
.tbl03 thead th:nth-child(4) {width: 25%;}
.tbl03 td.subject { text-align: center; color: #fff; background: #999; font-weight: 500;}
.tbl03 td {
    padding: 10px 15px;
    font-size: 16px;
    color: #666;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    text-align: center;
    font-weight: 400;
}
.tbl03 tbody td:nth-child(1) { text-align: center; color: #666; background: #f5f5f5; font-weight: 500;}
.tbl03 tbody td:nth-child(3) { text-align: center; color: #666; background: #f5f5f5; font-weight: 500;}

@media screen and (max-width: 480px) {
  .tbl01 th, .tbl01 td,
  .tbl02 th, .tbl02 td,
  .tbl03 th, .tbl03 td {font-size: 13px !important;}
}

.icon:before {
	font-family: 'Font Awesome 5 Free';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.close-content {
	position: fixed;
	top: 0; right: 15px;
	padding: 30px;
	font-size: 2em;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	background: #333;
	pointer-events: none;
	opacity: 0;
	z-index: 1000;
	-webkit-transition: opacity 0.3s;
			transition: opacity 0.3s;
}

.close-content:hover {color: #999;}

.content > div.show ~ .close-content {opacity: 1; pointer-events: auto;}

.close-content:before {	content: "\f00d";}

@media screen and (max-width: 480px) {
	.close-content {right: 0; font-size: 1em; padding: 20px; }
}



/* Simple fallback */
/* if any of these are not supported, a simple fallback will be shown */
.no-pointerevents .content,
.no-csstransforms3d .content,
.no-csstransitions .content,
.no-pointerevents .content > div,
.no-csstransforms3d .content > div,
.no-csstransitions .content > div,
.no-pointerevents .close-content,
.no-csstransforms3d .close-content,
.no-csstransitions .close-content {
	opacity: 1;
	visibility: visible;
	display: none;
	height: auto;
}

.no-pointerevents .show .close-content,
.no-csstransforms3d .show .close-content,
.no-csstransition .show .close-content,
.no-pointerevents div.show,
.no-csstransforms3d div.show,
.no-csstransitions div.show,
.no-csstransitions .prd-img,
.no-csstransitions .prd-text,
.no-csstransforms3d .prd-img,
.no-csstransforms3d .prd-text,
.no-pointerevents .prd-img,
.no-pointerevents .prd-text {
	display: block !important;
	opacity: 1;
}

@media screen and (max-width: 1280px) {

	.grid figure,
	.grid .placeholder {
		width: calc(25% - 10px);
		padding-top: 25%;
	}

}

@media screen and (max-width: 480px) {

	.grid figure,
	.grid .placeholder {
		width: calc(50% - 10px);
		padding-top: 50%;
	}

}