@charset "UTF-8";
section {
	position: fixed;
	width:100%;
	border-top:5px solid red;
}

.navigation {
	height: 75px;
	background: #ffffff;
	font-weight:bold;
	font-size:1vw;
	width:100vw;
	z-index: 100;
}

.brand {
	position: absolute;
	padding-left: 20px;
	float: left;
	line-height: 70px;
	text-transform: uppercase;
	font-size: 1.4em;
}
.brand a,
.brand a:visited {
	color: #000000;
	text-decoration: none;
}

.nav-container {
	max-width: 90vw;
	margin: 0 auto;
}

nav {
	float: right;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	float: left;
	position: relative;
}
nav ul li a,
nav ul li a:visited {
	display: block;
	padding: 0 20px;
	line-height: 70px;
	background: #ffffff;
	color: #000000;
	text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
	background: #ed3237;
	color: #000000;
	text-decoration: none;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
	padding-left: 4px;
	content: ' ▾';
}
nav ul li ul li {
	min-width: 190px;
}
nav ul li ul li a {
	padding: 15px;
	line-height: 20px;
}

.nav-dropdown {
	position: absolute;
	display: none;
	z-index: 1;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	background: #ffffff;
	height: 70px;
	width: 70px;
}

@media only screen and (max-width: 798px) {
	.nav-mobile {
		display: block;
	}

	nav {
		width: 100%;
		padding: 70px 0 15px;
	}
	nav ul {
		display: none;
		font-size:2vw;
	}
	nav ul li {
		float: none;
	}
	nav ul li a {
		padding: 15px;
		line-height: 20px;
	}
	nav ul li ul li a {
		padding-left: 30px;
	}

	.nav-dropdown {
		position: static;
	}
	.brand h3 {
		display: none!important;
	}
}
@media screen and (min-width: 799px) {
	.nav-list {
		display: block !important;
	}
}
#nav-toggle {
	position: absolute;
	left: 18px;
	top: 22px;
	cursor: pointer;
	padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 5px;
	width: 35px;
	background: #ed3237;
	position: absolute;
	display: block;
	content: '';
	transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
	top: -10px;
}
#nav-toggle span:after {
	bottom: -10px;
}
#nav-toggle.active span {
	background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
	top: 0;
}
#nav-toggle.active span:before {
	transform: rotate(45deg);
}
#nav-toggle.active span:after {
	transform: rotate(-45deg);
}

article {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px;
}















*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #f4f4f4;
}

svg {
	display: block;
	overflow: visible;
}

.slider-container {
	top:75px;
	font-size: 62.5%;
	position: relative;
	height: 500px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: all-scroll;
	z-index: 1;
}

.slider-control {
	z-index: 2;
	position: absolute;
	top: 0;
	width: 12%;
	height: 100%;
	transition: opacity 0.3s;
	will-change: opacity;
	opacity: 0;
}
.slider-control.inactive:hover {
	cursor: auto;
}
.slider-control:not(.inactive):hover {
	opacity: 1;
	cursor: pointer;
}
.slider-control.left {
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
	right: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider-pagi {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 5rem;
	width:max-content;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 0;
	list-style-type: none;
}
.slider-pagi__elem {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 2rem;
	height: 2rem;
	margin: 0 0.5rem;
	border-radius: 50%;
	border: 2px solid #fff;
	cursor: pointer;
}
.slider-pagi__elem:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	border-radius: 50%;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}

.slider {
	z-index: 1;
	position: relative;
	height: 100%;
}
.slider.animating {
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	will-change: transform;
}
.slider.animating .slide__bg {
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	will-change: transform;
}

.slide {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.slide.active .slide__overlay,
.slide.active .slide__text {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.slide__bg {
	position: absolute;
	top: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background-size: contain;
	will-change: transform;
}
.slide:nth-child(1) {
	left: 0;
}
.slide:nth-child(1) .slide__bg {
	left: 0;
	background-image: url("http://pcljkt.com/assets/images/picture/slider/slide-1.jpg");
	background-size:100% 100%;
}
.slide:nth-child(1) .slide__overlay-path {
	fill: #e99c7e;
}
@media (max-width: 991px) {
	.slide:nth-child(1) .slide__text {
		background-color: rgba(233, 156, 126, 0.8);
	}
}
.slide:nth-child(2) {
	left: 100%;
}
.slide:nth-child(2) .slide__bg {
	left: -50%;
	background-image: url("http://pcljkt.com/assets/images/picture/slider/slide-2.jpg");
	background-size:100% 100%;
}
.slide:nth-child(2) .slide__overlay-path {
	fill: #e1ccae;
}
@media (max-width: 991px) {
	.slide:nth-child(2) .slide__text {
		background-color: rgba(225, 204, 174, 0.8);
	}
}
.slide:nth-child(3) {
	left: 200%;
}
.slide:nth-child(3) .slide__bg {
	left: -100%;
	background-image: url("http://pcljkt.com/assets/images/picture/slider/slide-3.jpg");
	background-size:100% 100%;
}
.slide:nth-child(3) .slide__overlay-path {
	fill: #adc5cd;
}
@media (max-width: 991px) {
	.slide:nth-child(3) .slide__text {
		background-color: rgba(173, 197, 205, 0.8);
	}
}
.slide:nth-child(4) {
	left: 300%;
}
.slide:nth-child(4) .slide__bg {
	left: -150%;
	background-image: url("http://pcljkt.com/assets/images/picture/slider/slide-4.jpg");
	background-size:100% 100%;
}
.slide:nth-child(4) .slide__overlay-path {
	fill: #cbc6c3;
}
@media (max-width: 991px) {
	.slide:nth-child(4) .slide__text {
		background-color: rgba(203, 198, 195, 0.8);
	}
}
.slide__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.slide__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
	transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
	transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
	will-change: transform, opacity;
	-webkit-transform: translate3d(-20%, 0, 0);
	transform: translate3d(-20%, 0, 0);
	opacity: 0;
}
@media (max-width: 991px) {
	.slide__overlay {
		display: none;
	}
}
.slide__overlay path {
	opacity: 0.8;
}
.slide__text {
	position: absolute;
	width: 25%;
	bottom: 5%;
	left: 1%;
	color: #000;
	transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
	transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
	transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
	will-change: transform, opacity;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
}
@media (max-width: 991px) {
	.slide__text {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 5rem;
		text-align: center;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
		transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
		transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
		transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
		padding: 0 1rem;
	}
}
.slide__text-heading {
	font-family: "Polar", Helvetica, Arial, sans-serif;
	font-size: 1.8rem;
	margin-bottom: 0.8rem;
	color:black;
}
@media (max-width: 991px) {
	.slide__text-heading {
		font-size: 3.5rem;
	}
}
.slide__text-desc {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	color:black;
}
@media (max-width: 991px) {
	.slide__text-desc {
		display: none;
	}
}
.slide__text-link {
	z-index: 5;
	display: inline-block;
	position: relative;
	padding: 0.5rem;
	cursor: pointer;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 1.3rem;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}
@media (max-width: 991px) {
	.slide__text-link {
		display: none;
	}
}
.slide__text-link a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover
{
	color:white;
}
.slide__text-link:before {
	z-index: -1;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ff0000;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: rotateX(-85deg);
	transform: rotateX(-85deg);
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	will-change: transform;
}
.slide__text-link:hover:before {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}











.sl_body {
	position: relative;
	top:5rem;
	width:100%;
}

.sl_section_1 {
	width:100%;
	display:table;
}

.sl_section_2 {
	width:100%;
	display:table;
	background: #ffffff;
	margin-top:1vh;
	position: inherit;
}

.sl_section_3 {
	width:100%;
	display:inline-block;
	background: #181818;
}

.sl_section_2_1 {
	width:50%;
	display:inline-block;
	height:inherit;
	vertical-align: top;
}

.sl_section_2_2 {
	width:50%;
	display:inline-block;
	height:100%;
	vertical-align: top;
	position: absolute;
	background-size:100% 100%;
	overflow: hidden;
}

.sl_section_2_1_content {
	padding-top:15px;
	padding-left:5vw;
	padding-right:5vw;
}

.sl_section_2_1_content h4 {
	margin-bottom:1vw;
	font-weight:bold;
	font-size:1.7vw;
}

.sl_section_2_1_content p {
	margin-bottom:1vh;
	font-weight:normal;
	font-size:1.1vw;
	color:#727272;
}

.sl_section_3_1 {
	width:35%;
	display:inline-block;
	border-right:1px solid grey;
}

.sl_section_3_2 {
	width:64%;
	display:inline-block;
	text-align:center;
	color:white;
	font-size:1vw;
}

.sl_section_3_2 img {
	width:85%;
	height:65vh;
}

.sl_section_3_1_content {
	padding-top:15px;
	padding-left:5vw;
	padding-right:5vw;
}

.sl_section_3_1_content h4 {
	margin-bottom:1vw;
	font-weight:bold;
	font-size:1.5vw;
	color:white;
}

.sl_section_3_1_a {
	display:inherit;
}

.sl_section_3_1_content p {
	margin-bottom:1vh;
	font-weight:normal;
	font-size:1vw;
	color:#727272;
	margin-left:0.1vw;
	margin-right:0.1vw;
}

.sl_section_3_1_span {
	display:flex;
}

.sl_section_3_1_span i {
	color:red;
	line-height: 1.2;
	font-size:2vw;
	width: 2.2vw;
	text-align: center;
}

.sl_section_1_1 {
	width:65%;
	float:left;
}

.sl_section_1_2 {
	width:35%;
	float:right;
}

.sl_our_service { 
	position: relative;
	z-index: 99;
	font-size:1vw;
	width: 100%;
}

.sl_our_service ul {
	list-style: none;
	border-bottom: 1px solid red;
	padding-left:0px;
	margin-bottom:1vh;
	margin-top:1vh;
}

.sl_our_service ul li {
	list-style: none;
}

.sl_our_service ul li.icon{
	float:left;
	padding-left:1vw;
	padding-right:1vw;
	margin-right:1vw;
	width:20%;
	text-align: center;
	height:3.9vw;
}

.sl_our_service ul li.text{
	display:table-cell;
	height:4vw;
	vertical-align: middle;
}

.sl_our_service h4{
	font-size:1.1vw;
	font-weight:bolder;
}

.sl_our_service_content {
	float: right;
	width: 100%;
	padding: 3% 6% 3% 6%;
	text-align: left;
	background-color: #fff;
	border-bottom: none;
	border-top: 5px solid #D82525;
	margin:auto;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.sl_our_service_content img {
	height:inherit;
	width:auto;
}

.sl_our_service_title {
	text-align: center;
	font-size:2vw;
	margin-bottom:2vh;
}

.sl_template_posts {
	height:100%;
	display:inline-block;
}

.sl_template_posts_1 {
	width:50%;
	float:left;
}

.sl_template_posts_2 {
	width:50%;
	float:right;
}

.sl_content_post {
	width:80%;
	margin:auto;
	height:100%;
	background: #ffffff;
	border-bottom: 4px solid #f4f4f4;
}

.sl_content_post:hover {
	border-bottom: 4px solid #D82525;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.sl_content_post img{
	width:100%;
}

.sl_content_post_header {
	width:100%;
}

.sl_content_post_body {
	padding: 5% 8% 8% 8%;
	color:#727272;
	font-size:1vw;
}

.sl_content_post_body p {
	margin-bottom: 1vh;
}

.sl_content_post_title {
	font-weight:normal;
	color:black;
	border-bottom: dotted 1px #999;
	padding-bottom:1vh;
	font-size:1.7vw;
}

.sl_content_post_readmore {
	font-weight: 600;
	font-size:1vw;
	padding:1vh;
	background-image: url(https://freightexpressindo.com/images/read-more-bg.png);
	background-position: right top;
	text-transform: uppercase;
	color:black;
}

.sl_content_post_readmore a {
	color:black;
	margin-left:1vw;
	text-decoration: none;
}

html , body {
	max-width: 100%;
	background:#f4f4f4;
	overflow-x: hidden;
	overflow-y:overlay;
}













.container {
	margin: 0 auto;
	margin-top:75px;
	font-size:1vw;
}
article {
	padding: 1em;
	margin-bottom: 20px;
}
header,
footer {
	background-color: #421953;
	margin-bottom: 10px;
}
header img {
	width:100%;
	height:25vw;
}
.content {
	width: calc(1000vw -40);
	padding: 1em;
	margin-bottom: 20px;
	-webkit-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
	box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
	color:black;
	height:auto;
	opacity: 0.8;
	fill:#cbc6c3;
	background-color:#cbc6c3;
}
header {
	grid-area: header;
}
footer {
	grid-area: footer;
}
.grid-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: auto;
	grid-gap: 20px;
	grid-template-areas: "left-half right-half";
}
.half-left {
	grid-area: left-half;
	background-color: #F26531;
	padding: 2em;
}
.half-right {
	grid-area: right-half;
	background-color: #F26531;
	padding: 2em;
}
.grid-wrapper-equal-thirds {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: auto auto ;
	grid-gap: 20px;
	grid-template-areas: "left-third middle-third right-third";
}
.grid-wrapper-equal-fourths {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-rows: auto auto auto auto ;
	grid-column-gap: 20px;
	grid-template-areas: "one-fourth" "one-fourth" "one-fourth" "one-fourth";
}
.one-fourth {
	background-color: #72CCD2;
	padding: 2em;
	margin: 0 0 20px 0 !important;
}
.left-third, .middle-third, .right-third {
	background-color: #ff0000;
	padding: 1em;
	margin-bottom: 0;
	background-size:cover;
	-moz-box-shadow:    inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow:         inset 0 0 10px #000000;
}
.sl_wrapper_text {
	color:black;
	text-align:justify;
	font-weight:bold;
	font-family: sans-serif;
	font-size:1vw;
}
.grid-wrapper-two-thirds {
	display: grid;
	grid-template-columns: 
	66% 1fr;
	grid-template-rows: auto auto;
	grid-gap: 20px;
	grid-template-areas: "left-two-thirds right-one-third";
}
.left-two-thirds, .right-one-third {
	padding: 1em;
	margin-bottom: 0;
	padding: 2em;
	width:100%;
	color:black;
	height:auto;
		-webkit-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
	opacity: 0.8;
	fill:#cbc6c3;
	background-color:#cbc6c3;
}

.grid-wrapper-right-two-thirds {
	display: grid;
	grid-template-columns: 
	1fr 66%;
	grid-template-rows: auto auto;
	grid-gap: 20px;
	grid-template-areas: "left-one-third right-two-thirds";
}
.left-one-third, .right-two-thirds {
	padding: 1em;
	margin-bottom: 0;
	padding: 2em;
	width:100%;
		-webkit-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
box-shadow: -2px 8px 39px -2px rgba(0,0,0,0.75);
	opacity: 0.8;
	fill:#cbc6c3;
	background-color:#cbc6c3;
	color:black;
}

@media screen and (max-width: 700px) {
	.grid-wrapper {
		display: block;
	}
	.left-half, .right-half {
		margin: 0px;
	}
	.grid-wrapper-equal-thirds {
		display: block;
	}
	.left-third, .middle-third, .right-third  {
		margin: 0 0 20px 0 ;
	}
	.grid-wrapper-two-thirds {
		display: block;
	}
	.left-two-thirds, .right-one-third    {
		margin-bottom: 20px;
	}
	.grid-wrapper-right-two-thirds {
		display: block;
	}
	.left-one-third , .right-two-thirds {
		margin-bottom: 20px;
	}
	.grid-wrapper-equal-fourths {
		display: block;
	}
}


/* ==== GRID ==== */
.grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.167fr 0.45fr .225fr 0.3fr 0.8fr;
	grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr;
	grid-gap: var(--gutter);
}

.grid figure {
	overflow: hidden;
	background: var(--main-color);
	position: relative;
	opacity: 0;
	transition: .2s;

	/* Fix for Safari 10 */
	display: flex;
	flex-direction: column;
}

.grid figure img {
	vertical-align: middle;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .2s;
	will-change: transform;
	clip-path:
	polygon(
		var(--border-width) var(--border-width),
		calc(100% - var(--border-width)) var(--border-width),
		calc(100% - var(--border-width)) calc(100% - var(--border-width)),
		var(--border-width) calc(100% - var(--border-width))
		);

	/* Fix for Safari 10 */
	flex-grow: 1;
}

figure:hover img {
	/*transform: scale(.995);*/
}

/* ========= LAYOUT AND CLIP-PATH ======== */

.grid figure:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	clip-path: polygon(0 0, 100% 0, 100% 66%, 0% 85%);
}
.grid figure:nth-child(1) img {
	clip-path:
	polygon(
		var(--border-width) var(--border-width),
		calc(100% - var(--border-width)) var(--border-width),
		calc(100% - var(--border-width)) calc(66% - var(--border-width)),
		var(--border-width) calc(85% - var(--border-width))
		);
	/*min-height: 30.5vw;*/
}

.grid figure:nth-child(2) {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
}

.grid figure:nth-child(3) {
	grid-column: 4 / 6;
	grid-row: 1 / 2;
}

.grid figure:nth-child(4) {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
	clip-path: polygon(0 22%, 100% 4px, 100% 100%, 0% 100%);
}
.grid figure:nth-child(4) img {
	clip-path:
	polygon(
		var(--border-width) calc(22% + var(--border-width)),
		calc(100% - var(--border-width)) 7px,
		calc(100% - var(--border-width)) calc(100% - var(--border-width)),
		var(--border-width) calc(100% - var(--border-width))
		);
}

.grid figure:nth-child(5) {
	grid-column: 2 / 4;
	grid-row: 3 / 4;
}

.grid figure:nth-child(6) {
	grid-column: 4 / 6;
	grid-row: 2 / 4;
}

.grid figure:nth-child(7) {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
}

.grid figure:nth-child(8) {
	grid-column: 2 / 3;
	grid-row: 4 / 5;
	clip-path: polygon(
		0 0,
		100% 0,
		88% 100%,
		0% 100%
		);
	/*width: 115%;*/
	width: calc(100% + var(--gutter));
}
.grid figure:nth-child(8) img {
	clip-path:
	polygon(
		var(--border-width) var(--border-width),
		calc(100% - var(--border-width)) var(--border-width),
		calc(88% - var(--border-width)) calc(100% - var(--border-width)),
		var(--border-width) calc(100% - var(--border-width))
		);
}

.grid figure:nth-child(9) {
	grid-column: 3 / 5;
	grid-row: 4 / 5;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}
.grid figure:nth-child(9) img {
	clip-path:
	polygon(
		calc(12% + var(--border-width)) var(--border-width),
		calc(100% - var(--border-width)) var(--border-width),
		calc(100% - var(--border-width)) calc(100% - var(--border-width)),
		var(--border-width) calc(100% - var(--border-width))
		);
}

/* ======= CAPTION ======= */

.grid figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 2;
}
.grid figure:nth-child(1) figcaption {
	bottom: 15%;
	height: 17%;
	text-align: left;
	padding-left: 5%;
}

.grid figcaption h3 {
	font-weight: 700;
	color: #fdfdfd;
	margin-left: 10px;
	font-size: calc(.5em + 1.7vw);
	line-height: 1;
}

/* Caption effect */

figure:hover figcaption div {
	transform: none;
}

figure:hover figcaption:before,
figure:hover figcaption:after {
	transform: scaleY(1);
}

figcaption:before,
figcaption:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(237, 28, 36, 0.4);
	height: 150%;
	transition: .3s;
	transform: scaleY(0);
	transform-origin: bottom;
	z-index: -1;
}

figcaption:before {
	clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
}

figcaption:after {
	height: 120%;
	background: rgba(237, 28, 36, 0.5);
	clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
}

figcaption div {
	margin: 0;
	transition: .3s transform;
	will-change: transform;
	backface-visibility: hidden;
}

figcaption > div {
	overflow: hidden;
	display: inline-block;
	transform: translateY(100%);
}

figcaption > div div {
	transform: translateY(-100%);
	display: inline-block;
}

/* ========= COPYRIGHT ========= */

.copyright {
	color: var(--main-color);
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	right: -1.9vw;
	writing-mode: vertical-rl;
	font-size: 1.5vw;
}

/* writing-mode doesn't rotate the copyright symbol */
.copyright:before {
	content: '\00a9';
	display: inline-block;
	transform: rotate(90deg);
}


/* ============== RESPONSIVENESS ============== */

@media (max-width: 800px) {
	.grid figure:nth-child(1) figcaption {
		padding-left: 0;
		height: 40px;
	}
}

@media (max-width: 600px) {
	.grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 200px;
		grid-auto-rows: 200px;
	}
	.grid figure {
		grid-column: auto!important;
		grid-row: auto!important;
		clip-path: unset!important;
	}
	.grid figure:nth-child(2),
	.grid figure:nth-child(8),
	.grid figure:nth-child(9),
	.grid figure:nth-child(10) {
		grid-row: auto / span 2 !important;
		width: auto;
	}
}

@media (max-width: 420px) {
	.grid {
		grid-template-columns: 1fr;
	}
	.grid figure {
		grid-column-end: div 1!important;
		grid-row: auto!important;
	}
}

















.section_contact_us {
    position: fixed;
    opacity: 1;
    vertical-align: middle;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
	display:none;
}

.section_contact_us_setting {
    position: fixed;
    opacity: 1;
    vertical-align: middle;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#F9F9F9;
	padding:25px;
	margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 30vw;
    height: max-content;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 1.5vw;
	font-weight: 400;
}

#contact label {
	font-size:1vw;
	margin:0px;
}

#contact h4 {
	margin:0px;
	display:block;
	font-size:1vw;
}

fieldset {
	border: medium none !important;
	margin: 0;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:red;
	color:black;
	font-weight:bold;
	margin:0 0 5px;
	padding:10px;
	font-size:1vw;
}

#contact button[type="submit"]:hover {
	background:#ab0000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#cancel-submit {
	cursor:pointer;
	border:none;
	background:red;
	color:black;
	font-weight:bold;
	margin:0 0 5px;
	padding:10px;
	float:right;
	font-size:1vw;
}

#cancel-submit:hover {
	background:#ab0000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#cancel-submit:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

#contact fieldset {
	padding:0.1vw;
	color:black;
}