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


/* Sections */
.section {
	position: relative;
	/*padding-top: 64px;*/
}
.default-section {
	background: #e8e8e8;
	color: #8c7756;
}
.green-section {
	background: #92aa9c;
	color: #fff; 
}
.green-section h2,
.green-section h3 {
	color: #d2d6d9;
}
.brown-section {
	background: #8c7857;
	color: #fff;
}
.brown-section h2,
.brown-section h3 {
	color: #d2d6d9;
}
.gray-section {
	background: #d2d6d9;
	color: #002e47;
}
.black-section {
	background: #222;
	color: #fff;
}


.screen-section {
	height: 100vh;
}
.gallery-section {
	height: 100vh;
}
.floating-section {
}
.flex-section {
}
.large-section {
}


@media screen and (orientation:portrait) {
	.gallery-section .section-img-box {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		-webkit-transform: translate3d(0,-50%,0);
				transform: translate3d(0,-50%,0);
	}
}
@media screen and (orientation:landscape) {
}
@media (min-width : 1200px) {
	.section {
		padding-top: 0;
	}
	.section:after {
		content: '';
		display: block;
		clear: both;
	}
	.gallery-section {
		padding: 0;
	}
	
	.flex-section {
		display: flex;
	}
}
/***/



/* Section background */
.section-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}
/***/



/* Section image */
.section-img-box {
	position: relative;
}
.section-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;	
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity 0.2s ease;
			transition: 		transform 1s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity 0.2s ease;
}

.tabbed-section .section-img {
	opacity: 0;
}
.tabbed-section .section-img.active {
	opacity: 1;
	z-index: 3;
}

.section-img > .swiper-container {
	height: 100%;
}

.section-img-box .swiper-button-prev,
.section-img-box .swiper-button-next {
	background-color: #bdd73c;
}
.section-img .swiper-button-prev,
.section-img .swiper-button-next {
	background-color: #bdd73c;
	top: auto;
	bottom: 0;
}
.section-img .swiper-button-prev {
	left: 0;
}
.section-img .swiper-button-next {
	right: 0;
}
.section-img .swiper-slide-caption {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 60px;
	padding: 1em;
	background-color: #fbb03b;
	color: #5e1442;
	font-weight: 400;
}



@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 {
		-webkit-transform: translate3d(320px,0,0);
				transform: translate3d(320px,0,0);
	}
	.floating-section.floated .section-img {
		-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
	}
	.tabbed-section .section-img {
		opacity: 0;
	}
	.tabbed-section .section-img.active {
		opacity: 1;
	}
	
	.section-img .swiper-button-prev,
	.section-img .swiper-button-next {
		bottom: calc(50% - 29px);
	}
	.floating-section .section-img .swiper-button-prev,
	.floating-section .section-img .swiper-button-next {
		transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	}
	.floating-section .section-img .swiper-button-prev {
		left: 158px;
	}
	.floating-section .section-img .swiper-button-next {
		right: 320px;
	}
	.floating-section.floated .section-img .swiper-button-prev {
		left: 10px;
	}
	.floating-section.floated .section-img .swiper-button-next {
		right: 10px;
	}
	
	.section-img .swiper-slide-caption {
		top: 50px;
	}
	.floating-section .section-img .swiper-slide-caption {
		right: 320px;
	}
	.floating-section.floated .section-img .swiper-slide-caption {
		right: 10px;
	}
	
	.section-img .swiper-slide-next .swiper-slide-caption,
	.section-img .swiper-slide-prev .swiper-slide-caption {
		opacity: 0;
		-webkit-transition: opacity 0.5s ease 0s, right 1s cubic-bezier(0.770, 0.000, 0.175, 1.000); 
				transition: opacity 0.5s ease 0s, right 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	}
	.section-img .swiper-slide-active .swiper-slide-caption {
		opacity: 1;
		-webkit-transition: opacity 0.5s ease 1s, right 1s cubic-bezier(0.770, 0.000, 0.175, 1.000); 
				transition: opacity 0.5s ease 1s, right 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
	}
}
@media (min-width : 1600px) {
	
}

.gallery-section .swiper-container, 
.gallery-section .section-img .swiper-slide {
	overflow: visible;
}
.gallery-section .section-img .swiper-slide-caption {
	position: absolute;
	z-index: 10;
	top: 100%;
	right: 0;
	padding: 1em;
	background-color: #fbb03b;
	color: #5e1442;
	font-weight: 400;
}
.gallery-section .section-img-box .swiper-button-prev {
	top: auto;
	bottom: 100%;
	right: 60px;
	left: auto;
}
.gallery-section .section-img-box .swiper-button-next {
	top: auto;
	bottom: 100%;
	right: 0;
	left: auto;
}
@media (min-width : 1200px) {
	.gallery-section .section-img-box .swiper-button-prev {
		top: 50px;
		right: 111px;
		left: auto;
	}
	.gallery-section .section-img-box .swiper-button-next {
		top: 50px;
		right: 50px;
	}
	.gallery-section .section-img .swiper-slide-caption {
		top: 50px;
		right: 172px;
	}
}
/***/



/* Section main */
.section-main-box {
	position: relative;
	z-index: 9;
	padding: 30px 0 60px 0;
	background-color: inherit;
}
.flex-section .section-main-box {
	flex-shrink: 0;
}
.section-main {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
}
@media (min-width : 768px) {
}
@media (min-width : 1200px) {
	.section-main-box {
		width: 640px;
		min-height: 100vh;
		padding: 12.5% 0 100px 0;
		/*padding: 280px 0 100px 0;*/
	}
	.section-main-box.narrow-main-box {
		width: 478px;
	}
	.section-main {
		padding: 0 50px;
	}
	.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);
	}
}
@media (min-width : 1600px) {
	.section-main-box {
	}
}
/***/



/* Section menu */
.section-menu {
	margin: 30px -8px;
	font-weight: 700;
	vertical-align: middle;
	color: #002e47;
}
.section-menu li {
	display: inline-block;
	padding: 4px 0;
}
.section-menu li a {
	padding: 8px;
	font-size: 15px;
}
/***/



/* Section tabs */
.section-tabs {
	position: relative;
	overflow: hidden;
}
.section-tabs .tab {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}
.section-tabs .tab.active {
	position: relative;
	z-index: 1;
	opacity: 1;
}
@media (min-width : 1200px) {
	
}
/***/





/* Section secondary */
.section-secondary-box {
	background: #fffefe;
	color: #010101;
}
.flex-section .section-main-box {
	flex-grow: 1;
}
.section-secondary {
	padding: 20px;
}
@media (min-width : 1200px) {
	.section-secondary-box {
		min-height: 100vh;
	}
	.section-secondary {
		padding: 50px;
	}
}
@media (min-width : 1600px) {
	.section-secondary-box {
	}
}
/***/



/* Containers */
.default-container {
	
}
.wide-container {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
}
.widest-container {
	padding: 0 20px;
}
/***/



/* Main toggle */
.section-main-toggle {
	display: none;
}
@media (min-width : 1200px) {
	.section-main-toggle {
		display: block;
		position: absolute;
		top: 50px;
		left: 100%;
		overflow: hidden;
		background: #bdd73c;
		-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-main-toggle {
		/*margin-left: 268px;*/
		margin-left: 110px;
	}
	.section-main-toggle:after {
		content: '';
		display: block;
		cursor: pointer;
		width: 57px;
		height: 57px;
		background: url('../img/buttons.png') -57px -57px no-repeat;
		-webkit-transition: -webkit-transform 0.5s ease 1s;
				transition: 		transform 0.5s ease 1s;
	}
	.floating-section.floated .section-main-toggle:after {
		-webkit-transform: rotate(225deg);
				transform: rotate(225deg);
	}
}
@media (min-width : 1600px) {
	
}
/***/



/* Section more botton / lightbox toggle */
.section-lightbox-toggle {
	position: absolute;
	top: -28px;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	background: #8c7857;
	color: #fff;
	line-height: 57px;
	font-size: 19px;
	font-weight: 400;
}
.section-lightbox-toggle a {
	padding: 0.75em;
	color: inherit;
}
@media (min-width : 1200px) {
	.section-lightbox-toggle {
		top: 50px;
		left: 100%;
		margin-left: 60px;
		-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-left: 328px;*/
		margin-left: 170px;
	}
}
/***/










/* Section background image */
.section-bg-img {
	position: relative;
	background: #e8e8e8 50% 50% no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;	
}
@media screen and (orientation:portrait) {
	.section-bg-img {
		padding-top: 75%;
	}
}
@media screen and (orientation:landscape) {
   	.section-bg-img {
		padding-top: 56.25%;
	}
}
@media (min-width : 1200px) {
	.section-bg-img {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0;
	}
}
/***/



/* Section background gallery */
.section-bg-gallery {
	position: relative;
	background: #e8e8e8 50% 50% no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;	
}
@media screen and (orientation:portrait) {
	.section-bg-gallery .swiper-slide {
		padding-top: 75%;
	}
}
@media screen and (orientation:landscape) {
   	.section-bg-gallery .swiper-slide {
		padding-top: 56.25%;
	}
}
@media (min-width : 1200px) {
	.section-bg-gallery {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0;
	}
}
/***/



/* Section background video */
.section-bg-video {
	position: relative;
	width: 100%;
	height: 100%;
}
.section-bg-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
			transform: translate3d(-50%,-50%,0);
}
.section-bg-video .poster {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}
@media (max-aspect-ratio: 1920/1080) {
	.section-bg-video video {
		height: 100%;
		width: auto;
	}
}
@media (min-aspect-ratio: 1920/1080) {
	.section-bg-video video {
		height: auto;
		width: 100%;
	}
}
/***/





/* Section misc. */
.deco {
	padding: 30px;
	text-align: center;
}
/***/