/*
Theme Name: Fontaine
Theme URI: https://themeshaper.com/fontaine/
Author: Automattic
Author URI: https://automattic.com/
Description: Fontaine is a portfolio/profile theme designed for visual designers who appreciate the bold simplicity of Brutalist aesthetics. The goal was to create a theme that gracefully steps back, allowing your content to shine and capture the spotlight.
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 5.7
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fontaine
Tags: portfolio, one-column, block-patterns, block-styles, full-site-editing, rtl-language-support, threaded-comments, translation-ready,
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline >.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--theme-4);
	border-color: var(--wp--preset--color--theme-4);
	color: var(--wp--preset--color--theme-1);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-decoration-style: solid !important;
	text-underline-offset: 3px;
}

/*
 * Navigation Block
 * Reset the padding from List block
 * https://github.com/WordPress/gutenberg/issues/50486
 */
.wp-block-navigation ul {
	padding: unset;
}

/*
 * Pull quote Block
 * Reset the browser default margins for blockquote and paragraph element
 * https://github.com/WordPress/gutenberg/issues/44129
 */
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
}

/*
 * Jetpack Contact Form Block
 */
.contact-form label,
.wp-block-jetpack-contact-form label,
.jetpack-field-label .rich-text.jetpack-field-label__input {
	font-weight: 500;
}

.contact-form__input-error {
	font-size: var(--wp--preset--font-size--small);
}

:where(.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=url],.contact-form textarea) {
	padding: 8px;
}

/*
 * Custom CSS applied to the sticky header
 */
.blending-mode {
	mix-blend-mode: exclusion;
}


body,html {
	height: 100%;
	width: 100%
}

body {
	font-family: Roboto,sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}

hr.section-content-separator {
	border-color: #ee4137;
	border-width: 2px;
	max-width: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
}

hr.light {
	border-color: #fff
}

a {
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	transition: all .35s;
	color: #ee4137
}

a:focus,a:hover {
	color: #df1e13
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 300;
	margin: 0;
	/*margin-bottom: 1em*/
}

p {
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 10px;
	/*margin-bottom: 1em*/
}

ul {
	list-style-type: none;
	padding-left: 0;
}


.bg-primary {
	color: #fff;
	background-color: #ee4137
}

.bg-dark {
	background-color: #222;
	color: #fff
}

.text-faded {
	color: rgba(255,255,255,.9)
}

.text-center {
	text-align: center;
}

aside {
	padding: 50px 0;
	margin: 0!important;
}

.no-padding {
	padding: 0;
}

.no-margin {
	margin: 0;
}

.container-fluid, .container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}

	.col-lg-8 {
		width: 66.66666667%;
	}
}

/*--header--*/
.header-main {
	background-color: #fff;

	.wp-block-navigation {
		.wp-block-navigation-item {
			.wp-block-navigation-item__content {
				display: inherit;
				padding: 45px 0;
				.wp-block-navigation-item__label {
					text-transform: uppercase;
					font-weight: 400;
					font-size: 18px;
					line-height: 20px;
					border: 0;
					color: #222;
				}
			}
		}
	}
}

.footer-main {
	padding: 50px 0;
	background: #2a2730;

	.wp-block-navigation__container {
		padding-left: 0;
		margin-bottom: 15px;
		.wp-block-navigation-item__content {
			.wp-block-navigation-item__label {
				font-size: 16px;
				font-weight: 400;
				color: #fff;
			}
			& .wp-block-navigation-item__label:hover {
				text-decoration: underline;
			}
		}
	}

	.sub-footer {
		p {
			margin: 0;
			font-size: 14px;
			color: #99979c;
		}
	}
}

main {
	section {
		margin-top: 0!important;
		padding: 100px 0;
	}

	section.has-global-padding {
		padding-right: 0;
		padding-left: 0;
	}

	#header-overlay {
		max-width: 100%;
		background: rgba(0, 0, 0, .4);
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		top: 0;
		left: 0;
	}

	.section-header-content {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		min-height: 100vh;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
		background-position: center;
		background-image: url(/app/uploads/background/bg-header.jpg);
		text-align: center;
		color: #fff;
		padding: 0;
	}

	.section-header-content .header-content {
		margin: 0 auto;
		z-index: 200;
	}

	.section-header-content .header-content .header-content-inner {
		padding: 0 15px;
	}

	.section-header-content .header-content .header-content-inner hr {
		margin: 30px auto
	}

	.section-header-content .header-content .header-content-inner h1 {
		font-size: 25px;
		line-height: 1.1;
	}

	.section-header-content .header-content .header-content-inner  strong {
		color: #fff;
		font-weight: 500
	}

	.section-header-content .header-content .header-content-inner p {
		font-size: 16px;
		font-weight: 300;
		line-height: 1.5;
		color: #eee;
		margin-top: 0;
		margin-bottom: 20px;
	}

	.section-header-content .header-content .header-content-inner p.btn {
		margin-bottom: 0;
		display: inline;

		a {
			color: #fff;
		}
	}

	.section-about {
		.text-faded {
			margin: 0 0 10px 0;
			font-size: 17px;
			line-height: 1.5;
			strong {
				font-weight: 700;
			}
		}

		.about-list {
			margin-bottom: 0;
			padding-left: 0;

			li {
				font-size: 1.2em;
				color: #fff;
				line-height: 1.6;
				list-style: none;
				padding-bottom: .5em
			}
		}

		.btn a {
			visibility: visible;
			-webkit-transform: translateY(0) scale(1);
			transform: translateY(0) scale(1);
			opacity: 1;
			-webkit-transition: 0.35s,
			-webkit-transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.2s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.2s;
			transition: 0.35s, transform 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.2s, opacity 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0.2s;
		}
	}

	aside {
		padding: 50px 0;
	}

	.section-services {
		.list-box-service {
			.service-item {
				margin: 0;
				padding-right: 15px;
				padding-left: 15px;
			}
		}
	}

	.section-portfolio {
		padding-top: 50px;
		padding-bottom: 0;
		.list-portfolio {
			.item-portfolio {
				margin: 0;
				.portfolio-box {
					position: relative;
					display: block;
					max-width: 650px;
					height: 100%;
					margin: 0 auto;
					img {
						height: 100%;
					}
				}
				.portfolio-box-caption {
					color: #fff;
					opacity: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(238, 65, 55, .9);
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					-webkit-transition: all .35s;
					-moz-transition: all .35s;
					transition: all .35s;
					cursor: pointer;
				}
			}
		}
	}

	.section-contact {
		p a:hover {
			text-decoration: underline;
		}
	}
}

@media (max-width: 600px) {
	.hungdong-logo {
		padding: 5px 0;
	}

	.mobile-menu {
		.wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
			padding: 0;
		}

		.wp-block-navigation__responsive-container.is-menu-open {
			background-color: rgba(0, 0, 0, 0)!important;
		}

		.wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
			.wp-block-navigation__responsive-container-content {
				padding-top: calc(2rem + 59px);
			}
			.wp-block-navigation__responsive-container-close {
				background-color: #fff;
				right: 0;
				padding: 5px 15px;
			}
		}

		.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
			display: block;
			width: 100%;
			height: calc(100vh - (2rem + 59px));
			background: #3333334a !important;
			.wp-block-navigation-item {
				display: block;
				.wp-block-navigation-item__content {
					padding: 20px 15px;
					border: 1px solid #ccc;
					background: #3333334a;
					span {
						color: #fff;
					}
				}
			}
			.wp-block-navigation-item.nav-item--active {
				.wp-block-navigation-item__content {
					border-top: 1px solid #e7e7e7;
					background: #fff;
					.wp-block-navigation-item__label {
						color: #ee4137;
					}

				}
			}

		}
		button {
			color: #ee4137;
			svg {
				width: 30px;
				height: 30px;
			}
		}
	}
}

@media (min-width: 768px) {
	.header-main {
		.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item.nav-item--active a span,
		.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item a:hover span {
			color: #ee4137;
		}
	}

	main {
		.section-header-content .header-content .header-content-inner {
			max-width: 1000px;
			padding: 0 50px;
		}
		.section-header-content .header-content .header-content-inner h1 {
			font-size: 45px
		}
		.section-header-content .header-content .header-content-inner p {
			font-size: 18px;
			max-width: 80%;
		}

		.section-services .wp-block-columns {
			display: block;
		}

		.section-portfolio .list-portfolio {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto;
		}

		.section-portfolio .portfolio-box-caption .portfolio-box-caption-content .project-category {
			font-size:16px
		}

		.section-portfolio .portfolio-box-caption .portfolio-box-caption-content .project-name {
			font-size: 22px
		}
	}

}

.section-heading {
	margin-top: 0;
	font-weight: 300;
	margin-bottom: 1em;
	font-size: 30px;
	font-family: inherit;
	line-height: 1.1;
	color: inherit;
}

.section-services .list-box-service .service-box {
	max-width: 400px;
	margin: 50px auto 0;
	h3 {
		font-weight: 300;
		margin-bottom: 1em;
		margin-top: 20px;
		font-family: inherit;
		line-height: 1.1;
		color: inherit;
	}
	p {
		color: #777;
		margin-bottom: 0;
	}

}


@media (min-width: 992px) {
	.section-services .list-box-service .service-box {
		margin:20px auto 0
	}

	.section-services .wp-block-columns .list-box-service {
		display: flex;
		.service-item {
			width: 50%;
		}
	}
}

@media (min-width: 1200px) {
	main {
		.section-services .wp-block-columns {
			display: flex;
			flex-flow: row;
			.wp-block-column {
				display: flex;
			}
		}

		.section-portfolio .list-portfolio {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
	width: 100%;
	text-align: center;
	padding: 0 15px;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 2px;
	margin-top: 5px
}

.section-portfolio .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-size: 18px
}

.section-portfolio .list-portfolio .item-portfolio .portfolio-box .portfolio-box-caption:hover {
	opacity: 1;
}

.section-portfolio .list-portfolio .item-portfolio .portfolio-box:focus {
	outline: 0;
}

.call-to-action h2 {
	margin: 0 auto 20px;
	font-family: inherit;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.1;
	color: inherit;
}
.call-to-action p {
	margin-top: 0;
}

.text-primary {
	color: #ee4137
}

.btn-default a {
	color: #222;
	background-color: #fff;
	border-color: #fff;
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	transition: all .35s
}

.btn-default.active a,.btn-default.focus a,.btn-default:active a,.btn-default:focus a,.btn-default:hover a,.open>.dropdown-toggle.btn-default {
	color: #222;
	background-color: #f2f2f2;
	border-color: #ededed
}

main .btn-primary a {
	background-color: #ee4137;
	border-color: #ee4137;
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	transition: all .35s
}

.btn-primary.active a,.btn-primary.focus a,.btn-primary:active a,.btn-primary:focus a,.btn-primary:hover a,.open>.dropdown-toggle.btn-primary a{
	color: #fff;
	background-color: #ec2b1f;
	border-color: #eb2216
}

.btn a {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

main .btn a {
	font-family: Roboto,sans-serif;
	border: none;
	border-radius: 300px;
	font-weight: 700;
	text-transform: uppercase;
}

.btn-xl a {
	padding: 15px 30px
}


::selection {
	color: #fff;
	text-shadow: none;
	background: #ee4137
}
img {
	width: 100%;
	height: auto;
}