/*
Theme Name: c3design
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
ol ol, ol ul, ul ol, ul ul{    margin: 1.5em 0 1.5em 0em;}
.c3-project-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 1.5rem;
}

.c3-project-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

.c3-portfolio-gallery__more {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.c3-portfolio-gallery__button.is-loading {
	opacity: 0.65;
	cursor: wait;
}

.c3-service img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.25em 0;
}

.c3-service h2,
.c3-service h3,
.c3-service h4 {
	margin-top: 1.4em;
}

.home_contact .form-flat input.wpcf7-text, .home_contact .form-flat select{background-color: rgba(255,255,255,.9); min-height: 3em; color: #d4d4d4}
.home_contact .form-flat input::place-holder{color: #d4d4d4 !important}

.wpcf7-form .row input:not(.wpcf7-submit){min-height: 3em;}
.footer-wrapper .wpcf7-form .row input, .footer-wrapper .wpcf7-form .row select{min-height: unset !important; height: 2.3em !important; margin-bottom: .2em}
.wpcf7-form label{font-weight: 500; text-transform: uppercase; margin-bottom: 0}

/* [ux_portfolio] overlay/shade: title top-left, category vertical bottom-left */
.portfolio-box.box-overlay .box-text,
.portfolio-box.box-shade .box-text {
	top: 0 !important;
	bottom: 0 !important;
	left: 0;
	right: 0;
	padding: var(--c3-portfolio-pad, 1.5rem);
}

.portfolio-box.box-overlay .box-text-inner,
.portfolio-box.box-shade .box-text-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
}

.portfolio-box.box-overlay .portfolio-box-title,
.portfolio-box.box-shade .portfolio-box-title {
	margin: 0;
	font-weight: 400;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px black;
	opacity: 1;
}

.portfolio-box.box-overlay .portfolio-box-category,
.portfolio-box.box-shade .portfolio-box-category {
	margin: auto 0 0;
	padding-bottom: 1em;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	line-height: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	letter-spacing: 0.3em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	opacity: 1 !important;
}

.portfolio-box.box-overlay .portfolio-box-category .show-on-hover,
.portfolio-box.box-shade .portfolio-box-category .show-on-hover {
	opacity: 1;
	pointer-events: inherit;
}

/* Match c3design.com.vn type */
body {
	color: #747474;
	line-height: 1.65;
}
.dark .nav-vertical-fly-out>li>a:hover, .dark .nav>li>a:hover, .nav-dark .nav>li>a:hover, .nav-dark a.plain:hover, .nav-dropdown.dark .nav-column>li>a:hover, .nav-dropdown.dark>li>a:hover{color: rgb(197, 164, 126);}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-weight: 400;
	color: #3d3d3d;
}

.luxf-post-header h1,
.page-title h1,
.banner h1,
.banner h2,
.banner h3,
.box-overlay h1,
.box-overlay h2,
.box-overlay h3,
.box-shade h1,
.box-shade h2,
.box-shade h3,
.portfolio-box .portfolio-box-title,
.home_contact h1,
.home_contact h2,
.home_contact h3,
.home_contact p {
	color: inherit;
}

.header-main .nav > li > a.nav-top-link {
    margin-bottom: 0;
    padding: 0.4em 0;
    line-height: 1.9;
	letter-spacing: 0.32em !important;
	text-transform: uppercase;
}

.header-main strong.uppercase.is-xlarge {
	font-weight: 300 !important;
	letter-spacing: 0.1em !important;
}

.section .text h2 {
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 1.2;
	letter-spacing: normal !important;
	text-transform: uppercase;
	color: #3d3d3d !important;
}


h3.col-about-title {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: normal;
	color: #3d3d3d;
}

.icon-box h4,
.featured-box h4,
.icon-box-text h4 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #3d3d3d;
}


.blog-post-inner .post-title {
	font-weight: 400;
	letter-spacing: 0;
	color: #3d3d3d;
}

.single-featured_item h3.uppercase {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #8d8d8d;
}

.single-featured_item .luxf-post-header h1,
.single-featured_item .entry-title {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase !important;
}

.c3-project-copy.is-clamped {
	position: relative;
	overflow: hidden;
}

.c3-project-copy.is-clamped .c3-project-copy__more {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 2.75rem 0 0;
	border: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 58%);
	color: #c5a47e;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.c3-project-copy__more[hidden] {
	display: none !important;
}

@media only screen and (max-width: 48em) {
	.c3-project-gallery {
		grid-template-columns: 1fr;
	}

	.header-main .nav > li > a.nav-top-link {
		font-size: 14px !important;
		letter-spacing: 0.2em !important;
	}

	.section .text h2 {
		font-size: 28px !important;
	}

	.blog-post-inner .post-title {
		min-height: 0;
	}
}