/*
 ************************************************************
 *
 * CONTENT
 *
 ************************************************************
 *
 * ----------------------------------------------------------
 *
 * SECTION
 *
 * ----------------------------------------------------------
 *
 * - WRAP
 */

.section:not(.content-head):not(.content-intro)
{
	margin-top: var(--border-margin);
}

@media only screen and (max-width: 767px)
{
	.responsive .section:not(.content-modal)
	{
		--border-height: 80px;
		--border-margin: -80px;
	}
}

@media only screen and (min-width: 768px)
{
	.responsive .section:not(.content-modal)
	{
		--border-height: 120px;
		--border-margin: -120px;
	}
}

@media only screen and (min-width: 1280px)
{
	.responsive .section:not(.content-modal)
	{
		--border-height: 160px;
		--border-margin: -160px;
	}
}

/*
 * - POLYGON
 */

.content-about,
.content-article,
.content-head + section
{
	clip-path: polygon(0 0, 100% var(--border-height), 100% 100%, 0 100%);
}

.content-technology
{
	clip-path: polygon(0 var(--border-height), 100% 0, 100% calc(100% - var(--border-height)), 0 100%);
}

.content-products
{
	clip-path: polygon(0 0, 100% var(--border-height), 100% 100%, 0 100%);
}

.content-request
{
	clip-path: polygon(0 var(--border-height), 100% 0, 100% 100%, 0 100%);
}

.content-awards
{
	clip-path: polygon(0 0, 100% var(--border-height), 100% 100%, 0 100%);
}

.content-blog,
.content-related
{
	clip-path: polygon(0 var(--border-height), 100% 0, 100% 100%, 0 100%);
}

.content-foot
{
	clip-path: polygon(0 0, 100% var(--border-height), 100% 100%, 0 100%);
}

/*
 * - BGIMAGE
 */

.section > .bgimage
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (max-width: 767px)
{
	.responsive .section > .bgimage
	{
		background-attachment: scroll;
	}
}

.content-head > .bgimage,
.content-foot > .bgimage
{
	background-image: url(../img/photo/CR-0001.jpg);
}

.content-about > .bgimage,
.content-request > .bgimage
{
	opacity: 0.15;
}

.content-products > .bgimage
{
	opacity: 0.5;
}

/*
 * ----------------------------------------------------------
 *
 * ALIGN
 *
 * ----------------------------------------------------------
 *
 * - CENTERED
 */

.align-centered .container
{
	align-items: center;
}

.align-centered .heading,
.align-centered .article,
.align-centered .more
{
	margin: 0 auto;
	text-align: center;
}

.align-centered .heading
{
	max-width: 640px;
}

.align-centered .carousel .owl-dots
{
	text-align: center;
}

/*
 * ----------------------------------------------------------
 *
 * STYLE-DEFAULT
 *
 * ----------------------------------------------------------
 *
 * - WHITE & LIGHT
 */

.style-white
{
	background-color: var(--color-white);
}

.style-light
{
	background-color: var(--color-lightgray-1);
}

/*
 * ----------------------------------------------------------
 *
 * STYLE-BLACK
 *
 * ----------------------------------------------------------
 *
 * - BLACK
 */

.style-black
{
	background-color: var(--color-black);
}

.style-black .title-h1,
.style-black .title-h2,
.style-black .entry *:not(.button)
{
	color: var(--color-white);
}

.style-black .article *:not(.button),
.style-black .widgets *:not(.button)
{
	color: var(--color-gray-2);
}

.style-black .article a:not(.button),
.style-black .widgets a:not(.button)
{
	color: var(--color-white);
}

.style-black .article a:not(.button):hover,
.style-black .widgets a:not(.button):hover
{
	color: var(--color-1);
}

.style-black .color-1:hover
{
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-1);
}

/*
 * ----------------------------------------------------------
 *
 * STYLE-COLOR
 *
 * ----------------------------------------------------------
 *
 * - SECTION
 */

.style-color
{
	background-color: var(--color-1);
}

/*
 * - FORM
 */

.style-color ::-webkit-input-placeholder
{
	opacity: 0.7;
	color: var(--color-white);
}
.style-color ::-moz-placeholder
{
	opacity: 0.7;
	color: var(--color-white);
}
.style-color :-ms-input-placeholder
{
	opacity: 0.7;
	color: var(--color-white);
}
.style-color :-moz-placeholder
{
	opacity: 0.7;
	color: var(--color-white);
}

.style-color input[type="text"],
.style-color input[type="input"],
.style-color input[type="password"],
.style-color input[type="email"],
.style-color input[type="number"],
.style-color input[type="url"],
.style-color input[type="tel"],
.style-color input[type="search"],
.style-color textarea,
.style-color select
{
	border-color: rgba(255, 255, 255, 0.5);
	background-color: transparent;
	color: var(--color-white);
}

.style-color .request .wpforms-confirmation-container p
{
	color: var(--color-white);
}

/*
 * - ELEMENT
 */

.style-color .title-h1,
.style-color .title-h2,
.style-color .entry *:not(.button),
.style-color .article *:not(.button)
{
	color: var(--color-white);
}

.style-color .title-h2 .title-tag::before
{
	background-image: url('../icon/svg/title/zigzag-white.svg');
}

.style-color .button,
.style-color .button:focus
{
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.style-color .button:hover
{
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-1);
}

/*
 * - CAROUSEL
 */

.style-color .carousel .owl-dots .owl-dot span
{
	border-color: var(--color-white);
}

.style-color .carousel .owl-dots .owl-dot:hover span,
.style-color .carousel .owl-dots .owl-dot.active span
{
	background-color: var(--color-white);
	border-color: var(--color-white);
}

/*
 * ----------------------------------------------------------
 *
 * HOME
 *
 * ----------------------------------------------------------
 *
 * - ELEMENT
 */

.home .section:not(.align-centered) .heading,
.home .section:not(.align-centered) .article
{
	max-width: 720px;
	margin-left: 0;
	margin-right: auto;
}

/*
 * - INTRO
 */

.home .content-intro
{
	height: 100vh;
}

@media only screen and (min-width: 1280px)
{
	.responsive .home .content-intro
	{
		padding-top: 40px;
	}
}

/*
 * - FOOT
 */

.home .content-foot
{
	height: 100vh;
}

@media only screen and (min-width: 1280px)
{
	.responsive .home .content-foot
	{
		min-height: none;
		height: calc(100vh - 120px);
		padding-bottom: 100px;
	}
}