/********************************************************************************/
/* PRIMARY
/********************************************************************************/

#primary {
	direction: rtl;
}
.page-section {
	min-height: 100vh;
	-webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
			transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);	
}
#page-header.nav-open + #primary .page-section {
	-webkit-transform: translateX(-160px);
			transform: translateX(-160px);
}
@media (min-width : 1200px) {
	#page-header.nav-open + #primary .page-section {
		-webkit-transform: translateX(-220px);
				transform: translateX(-220px);
	}
}



/* Page sections */
.page-sections-group {
	background-position: 50% 100%;
}

.page-section {
	position: relative;
	overflow: hidden;
}
.screen-section {
	height: 100vh;
}

.black-section {
	background-color: rgba(0,0,0,0.8);
	color: #fff;
}
.dark-section {
}
.light-section {
	background-color: rgba(234,205,172,0.8);
	color: #000;
}
.white-section {
	background-color: #fff;
	color: #000;
}
.cold-section {
}
.cool-section {
}
.warm-section {
	background-color: #fff;
	color: #8f7c5b;
}
.hot-section {
	background-color: #f4f1ec;
	color: #8f7c5b;
}
.fancy-section {
	background-color: #f4f1ec;
	color: #8f7c5b;
}
.custom-section {
}
/***/



/* Section layout */
.section-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}
.section-bg-spacer {
	height: 40vh;
}

.section-main {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	padding: 100px 15px;
}
.section-bg ~ .section-main {
	position: relative;
	z-index: 9;
}
.floating-main {
	-webkit-transform: none;
			transform: none;
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.83, 0, 0.17, 1);
			transition: 		transform 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.floating-main.closed {
	-webkit-transform: translateX(101%);
			transform: translateX(101%);	
}

.section-content {
	padding: 0 15px;
}
.section-more-content {
	margin-top: 75px;
}

@media (min-width : 1200px) {
	.page-section {
	}
	.half-section-bg {
		width: 50%;
	}
	.section-main {
		min-height: 100vh;
		padding: 100px 55px 60px 55px;
	}
	.divided-section {
		display: flex;
	}
	.divided-section.odd-section {
		flex-direction: row-reverse;
	}
	.divided-section.odd-section .floating-main.closed {
		-webkit-transform: translateX(-101%);
				transform: translateX(-101%);	
	}
	
	.divided-section .section-main,
	.divided-section .section-img {
		width: 50%;
	}
}

@media (min-width: 1600px) {
	.section-main {
		padding: 160px 70px 80px 70px;
	}
}
/***/




/* Section toggle button */
.section-toggle-btn {
	position: absolute;
	z-index: 99;
	top: 10px;
	left: 5px;
	width: 48px;
	height: 48px;
	padding: 10px;
	cursor: pointer;
	-webkit-transition: all 0.4s cubic-bezier(0.83, 0, 0.17, 1) 0s, color 0.4s ease 0s;
			transition: all 0.4s cubic-bezier(0.83, 0, 0.17, 1) 0s, color 0.4s ease 0s;
}
.floating-main.closed .section-toggle-btn {
	color: #fff;
	left: -100px;
	transform: rotateZ(45deg);
	-webkit-transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.6s, color 0.4s ease 0s;
			transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.6s, color 0.4s ease 0s;
}
.section-toggle-btn::before,
.section-toggle-btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 24px;
	left: 11px;
	width: 28px;
	border: 1px solid;
	border-top-width: 2px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.5);
	-webkit-transition: all 0.4s ease 1s;
			transition: all 0.4s ease 1s;
}

.section-toggle-btn::before {
	transform: rotateZ(45deg);
}
.section-toggle-btn::after {
	transform: rotateZ(-45deg);
}
.section-toggle-btn.animate::before,
.section-toggle-btn.animate::after {
	opacity: 0;
	transform: none;
}
.section-toggle-btn.animated::before {
	opacity: 1;
	transform: rotateZ(45deg);
}
.section-toggle-btn.animated::after {
	opacity: 1;
	transform: rotateZ(-45deg);
}

@media (min-width : 1200px) {
	.section-toggle-btn {
		top: 36px;
		left: 50px;
	}
	.odd-section .section-toggle-btn {
		left: auto;
		right: 50px;
	}
	
	.floating-main.closed .section-toggle-btn {
		left: -158px;
	}
	.odd-section .floating-main.closed .section-toggle-btn {
		left: auto;
		right: -158px;
	}
}

@media (min-width: 1600px) {
	.section-toggle-btn {
		top: 60px;
		left: 75px;
	}
	.odd-section .section-toggle-btn {
		left: auto;
		right: 75px;
	}
	
	.floating-main.closed .section-toggle-btn {
		left: -240px;
	}
	.odd-section .floating-main.closed .section-toggle-btn {
		left: auto;
		right: -240px;
	}
}
/***/



/* Section breadcrumbs */
.breadcrumbs {
	font-size: 1.4em;
}
.breadcrumbs.animate {
	opacity: 0;
	-webkit-transition: all 0.8s ease;
			transition: all 0.8s ease;	
}
.breadcrumbs.animated {
	opacity: 1;
}
.breadcrumbs > span.animate {
	display: inline-block;
	opacity: 0;
	-webkit-transform: translateY(-1em);
			transform: translateY(-1em);	
	-webkit-transition: all 0.8s ease;
			transition: all 0.8s ease;	
}
.breadcrumbs > span.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;	
}
/***/



/* Section content elements */
.section-title {
	margin-bottom: 0;
	
}
.section-title h2 {
	line-height: 0.9;
}
.section-pretitle {
	font-size: 0.5em;
}
.section-title.animate {
	opacity: 0;
	-webkit-transform: translateX(-1em);
			transform: translateX(-1em);	
	-webkit-transition: all 1s ease;
			transition: all 1s ease;	
}
.section-title.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;		
}
.section-text {
}
.section-text.animate {
	opacity: 0;
	-webkit-transform: translateY(2em);
			transform: translateY(2em);	
	-webkit-transition: all 1s ease;
			transition: all 1s ease;	
}
.section-text.animated {
	opacity: 1;
	-webkit-transform: none;
			transform: none;		
}
/***/



/* Section deco */
.section-deco-line {
	flex-grow: 0; 
	display: inline-block;
	width: 8em;
	height: 0;
	margin-top: auto;
	border-bottom: 4px solid;
	padding-top: 80px;
}
.section-deco-line.animate {
	width: 0;
	-webkit-transition: width 0.8s cubic-bezier(0.83, 0, 0.17, 1);
			transition: width 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}
.section-deco-line.animated {
	width: 8em;
}

@media (min-width : 1200px) {
}
/***/




/********************************************************************************/