/****************************************/
/* MAIN
/****************************************/



/* Page sections */
.page-section {
	position: relative;
	direction: rtl;
}

.screen-section {
	min-height: 100vh;
}

.default-section {
	background: #01a2ae;
	color: #fff;
}

.white-section {
	background: #fff;
	color: #000;
}
.light-section {
	background: #30738c;
	color: #fff;
}
.lighter-section {
	background: #bed8e4;
	color: #11303f;
}
.grey-section {
	background: #c3bdbf;
	color: #000;
}
.grey-section .em-text {
	color: #000;
}
.dark-section {
	background: #11303f;
	color: #fff;
}
.black-section {
	background: #000;
	color: #fff;
}

@media (min-width : 1600px) {
	.page-section {
		margin-right: 320px;
	}	
}
/***/



/* Section background */
.section-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.section-bg .swiper-container {
	cursor: e-resize;
	height: 100%;
}
/***/



/* Section image */
.section-img-box {
	position: relative;
}
.section-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}
@media screen and (orientation:portrait) {
	.section-img-box {
		padding-top: 66.66%;
	}
}
@media screen and (orientation:landscape) {
   	.section-img-box {
		padding-top: 56.25%;
	}
}
@media (min-width : 1200px) {
	.section-img-box {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0;
	}
	.floating-section .section-img-box {
		-webkit-transform: translate3d(-360px,0,0);
				transform: translate3d(-360px,0,0);
		-webkit-transition: -webkit-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
				transition: 		transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	}
	.floating-section.floated .section-img-box {
		-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
	}
}
@media (min-width : 1600px) {
	.floating-section .section-img-box {
		-webkit-transform: translate3d(-320px,0,0);
				transform: translate3d(-320px,0,0);
	}
}
/***/



/* Section BG swiper */

/***/



/* Section main */
.section-main-box {
	position: relative;
	padding: 0;
	background-color: inherit;
	color: inherit;
}
.section-main {
	max-width: 640px;
	margin: 0 auto;
	padding: 15px;
}

@media (min-width : 1200px) {
	.section-main-box {
		width: 800px;
		min-height: 100vh;
		margin: 0 0 0 auto;
		padding: 30px 80px 80px 80px;
	}
	.floating-section .section-main-box {
		-webkit-transition: -webkit-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
				transition: 		transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
	}
	.floating-section.floated .section-main-box {
		-webkit-transform: translate3d(100%,0,0);
				transform: translate3d(100%,0,0);
	}
}
/***/



/* Section toggle */
.section-toggle {
	display: none;
}
@media (min-width : 1200px) {
	.section-toggle {
		display: block;
		position: absolute;
		top: 36px;
		left: -23px;
		overflow: hidden;
		background-color: #000;
		-webkit-transition: margin 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
				transition: margin 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
	}
	.floating-section.floated .section-toggle {
		margin-left: -53px;
	}
	.section-toggle:after {
		content: '';
		display: block;
		cursor: pointer;
		width: 46px;
		height: 46px;
		background: url('../img/close-section.png') 0 0 no-repeat;
		opacity: 0.66;
		-webkit-transition: all 0.5s ease 1s;
				transition: all 0.5s ease 1s;
	}
	.floating-section.floated .section-toggle:after {
		opacity: 0.95;
		-webkit-transform: rotate(225deg);
				transform: rotate(225deg);
	}
}
/***/


/* Section logo */
.section-logo {
	text-align: center;
}
@media (min-width : 1200px) {
	.section-logo {
		text-align: initial;
	}	
}	
/***/
	
	

/* Section secondary */
.section-secondary-box {
	position: relative;
	padding: 60px 0;
}
.section-secondary {
	padding: 15px;
}
@media (min-width : 1200px) {
	.section-secondary-box {
		padding: 200px 80px 80px 80px;		
	}
	.floating-section .section-secondary-box {
		-webkit-transition: opacity 1s ease 1s;
				transition: opacity 1s ease 1s;
	}
	.floating-section.floated .section-secondary-box {
		opacity: 0;
	}
}
/***/



/* Section more botton / lightbox toggle */
.section-lightbox-toggle {
	position: absolute;
	top: -50px;
	right: 0;
	padding-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	line-height: 46px;
	font-weight: 500;
}
.section-lightbox-toggle a {
	padding: 0 10px;
	color: inherit;
}
.section-lightbox-toggle a:hover {
	color: #fff;
}

.section-lightbox-toggle a:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 0.3em;
	height: 0.3333em;
	margin: 0 0.5em;
	border: 2px solid;
	-webkit-transition: background 0.2s ease;
	   -moz-transition: background 0.2s ease;
		-ms-transition: background 0.2s ease;
		 -o-transition: background 0.2s ease;
			transition: background 0.2s ease;
}
.section-lightbox-toggle a:hover:before {
	background: #fff;
}

@media (min-width : 1200px) {
	.section-lightbox-toggle {
		top: 36px;
		left: 30px;
		right: auto;
		font-size: 1.235em;
		-webkit-transition: margin 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
				transition: margin 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) 0s;
	}
	.floating-section.floated .section-lightbox-toggle {
		margin-right: 136px;
	}
}
/***/





/* Section elements */
.section-main h2:before {
	content: '';
	display: block;
	width: 200px;
	height: 8px;
	margin-bottom: 1em;
}
.black-section .section-main h2:before {
	background: #dce0df;
}
.white-section .section-main h2:before {
	background: #000;
}
/***/


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