/* basic reset */
body,* { margin: 0; padding: 0; box-sizing: border-box; }
button::-moz-focus-inner { border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, ul, ol { margin: 1em auto 1em auto; line-height: 1.4em; }
input, textarea, select { font-family: inherit; }
input.no-appearance { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: field; }
input.no-appearance::-webkit-inner-spin-button { -webkit-appearance: none; }
input.no-appearance::-webkit-outer-spin-button { -webkit-appearance: none; }
ul,ol { padding-left: 20px; }
li { margin: 5px auto 5px auto; }
a img { border: none; }
/* basic classes */
.text-end { text-align: right; }
.text-center {text-align: center; }
.uppercase { text-transform: uppercase; }
.hidden { display: none; }

html {
	scroll-behavior: smooth;    
	scroll-snap-type: y mandatory;
}

body {
	color: #fff;
	background: #484848;
	font-family: 'Red Hat Display', sans-serif;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
}
body.invert {
	color: #484848;
	background: #e4e4e4;
}
.invert .nav-brand {
	filter: brightness(0.25);
}
.invert #header-wave {
	filter: brightness(0.5);
}

a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
.full-size {
	display: block;
	width: 100%;
	height: auto;
}

.color {
	color: #c6805c;
}

body,
#header,
#footer {
	min-width: 300px;
}

#home-enter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 98vh;
}
#home-enter-btn {
	margin-top: 15vh;
	text-transform: uppercase;
	font-size: 20px;
}
#home-enter-btn:hover {
	color: #c6805c;
}

#header {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
}
#header .contain {
	display: flex;
	flex-direction: row;
}
#header-fill {
	height: 150px;
}

#header-wave {
	width: calc(100% - 40px);
	background: url('./img/wave.svg') center center no-repeat;
	margin: 0 20px;
}

.contain {
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
}
.contain-slim {
	max-width: 1280px;
}

.padding-inner {
	padding: 4vw;
}
.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.text > *:first-child {
	margin-top: 0;
}
.text > *:last-child {
	margin-bottom: 0;
}

.columns .title {
	margin-top: 2em;
	margin-bottom: 2em;
}

.fullsize-img img {
	display: block;
	width: 100%;
	height: auto;
}


.fullsize-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.fullsize-flex {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	width: 100%;
	height: 100%;
}


/*** hamburger ***/
#navigation-show {
	display: none;
}
#navigation-btn {
	display: block;
	height: 60px;
	width: 130px;
	text-align: center;
	position: relative;
	z-index: 20;
	background: #fff;
	color: #c6805c;
	cursor: pointer;
	transition: 0.3s color linear, 0.3s background linear;
}

#navigation-btn:hover,
#navigation-show:checked ~ #footer #navigation-btn {
	background: #c6805c;
	color: #fff;
}

#navigation {
	position: absolute;
	bottom: 60px;
	left: 0;
	overflow: hidden;
	width: 0;
	text-transform: uppercase;
	transition: 0.3s width linear;
}

#footer.active,
#navigation-show:checked ~ #footer {
	bottom: 0;
}
#footer.active #footer-nav,
#navigation-show:checked ~ #footer #footer-nav {
	bottom: 0;
}

#navigation-show:checked ~ #footer #navigation {
	width: auto;
}
#navigation a {
	text-decoration: none;
	transition: 0.3s opacity linear;
}
#navigation a:hover {
	opacity: 0.8;
}
#menu {
	padding: 20px 40px;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
#menu li {
	margin: 0.6rem 0;
}

#menu-lang {
	text-transform: uppercase;
}
#menu-lang ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#social {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 0 20px;
	white-space: nowrap;
}
#social span {
	display: none;
}
.social {
	display: block;
	width: 25px;
	height: 25px;
	background-color: #fff;
	mask-position: center center;
	mask-size: 100% 100%;
	text-align: center;
	transition: 0.25s background linear;
}
.social:hover {
	background-color: #c6805c;
}
.social-x {
	mask-image: url("data:image/svg+xml,%3csvg width='29' height='24' viewBox='0 0 29 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.5162 3.66265C26.7403 3.46988 27.8701 3.27711 29 2.6988C28.2468 3.95181 27.211 5.10843 25.8929 5.87952C26.2695 14.5542 20.0552 24 9.03896 24C-1.97727 24 2.73052 22.8434 0 21.2048C3.10714 21.5904 6.30844 20.6265 8.47403 18.988C5.74351 18.988 3.57792 17.1566 2.82468 14.747C3.76623 14.9398 4.61364 14.747 5.5552 14.5542C2.82468 13.7831 0.847403 11.1807 0.847403 8.48193C1.78896 8.86747 2.63636 9.25301 3.57792 9.25301C1.12987 7.42169 0.188312 3.85542 1.78896 1.15663C4.8961 4.81928 9.22727 7.22892 14.1234 7.42169C13.1818 3.75904 16.1007 0 19.961 0C23.8214 0 23.2565 0.771084 24.2922 1.83133C25.7045 1.44578 27.0227 1.06024 28.0584 0.385542C27.6818 1.83133 26.8344 2.98795 25.5162 3.75904V3.66265Z' fill='%23B46F2E'/%3e%3c/svg%3e");
}
.social-fb {
	mask-image: url("data:image/svg+xml,%3csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5 0C19.4 0 25 5.6 25 12.5C25 19.4 20.5 24.1 14.2 25V16.1H17.2L17.8 12.5H14.4V10.2C14.4 9.3 14.9 8.3 16.4 8.3H18V5.2C18 5.2 16.6 4.9 15.2 4.9C12.4 4.9 10.5 6.6 10.5 9.7V12.5H7.4V16.1H10.5V24.9C4.5 23.9 0 18.8 0 12.5C0 6.2 5.6 0 12.5 0Z' fill='%23B46F2E'/%3e%3c/svg%3e");
}
.social-insta {
	mask-image: url("data:image/svg+xml,%3csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5 6C8.9 6 6 8.9 6 12.5C6 16.1 8.9 19 12.5 19C16.1 19 19 16.1 19 12.5C19 8.9 16.1 6 12.5 6ZM12.5 16.7C10.2 16.7 8.3 14.9 8.3 12.5C8.3 10.1 10.1 8.3 12.5 8.3C14.9 8.3 16.7 10.1 16.7 12.5C16.7 14.9 14.7 16.7 12.5 16.7ZM24.4 4.4C24.1 3.6 23.6 2.9 22.9 2.1C22.2 1.3 21.5 1 20.6 0.6C19.8 0.3 18.9 0.1 17.6 0H7.4C6 0 5.1 0.3 4.4 0.6C3.7 0.9 2.9 1.4 2.1 2.1C1.3 2.8 1 3.5 0.6 4.4C0.3 5.2 0.1 6.1 0 7.4V17.6C0 19 0.3 19.9 0.6 20.6C0.9 21.4 1.4 22.1 2.1 22.9C2.8 23.7 3.5 24 4.4 24.4C5.2 24.7 6.1 24.9 7.4 25H17.6C19 25 19.9 24.7 20.6 24.4C21.3 24.1 22.1 23.6 22.9 22.9C23.7 22.2 24 21.5 24.4 20.6C24.7 19.8 24.9 18.9 25 17.6V7.4C25 6 24.7 5.1 24.4 4.4ZM22.7 17.6C22.7 18.6 22.5 19.2 22.3 19.6V19.8C22.3 19.9 22.2 20 22.1 20.2C21.9 20.6 21.7 21 21.4 21.3C20.9 21.8 20.5 22.1 19.9 22.2C19.4 22.4 18.8 22.5 17.6 22.7H7.4C6.4 22.7 5.8 22.5 5.4 22.3H5.2C5.1 22.3 5 22.2 4.8 22.1C4.4 21.9 4 21.7 3.7 21.4C3.2 20.9 2.9 20.5 2.8 19.9C2.6 19.4 2.5 18.8 2.3 17.6V7.4C2.3 6.4 2.5 5.8 2.7 5.4V5.2C2.7 5.1 2.8 5 2.9 4.8C3.1 4.4 3.3 4 3.6 3.7C4.1 3.2 4.5 2.9 5.1 2.8C5.6 2.6 6.2 2.5 7.4 2.3H17.6C18.6 2.3 19.2 2.5 19.6 2.7H19.8C19.9 2.7 20 2.8 20.2 2.9C20.6 3.1 21 3.3 21.3 3.6C21.6 3.9 22.1 4.5 22.2 5.1C22.4 5.6 22.5 6.2 22.7 7.4V17.6ZM19.1 4.4C18.3 4.4 17.6 5.1 17.6 5.9C17.6 6.7 18.3 7.4 19.1 7.4C19.9 7.4 20.6 6.7 20.6 5.9C20.6 5.1 19.9 4.4 19.1 4.4Z' fill='%23B46F2E'/%3e%3c/svg%3e");
}

#footer {
	position: fixed;
	z-index: 51;
	bottom: -60px;
	left: 0;
	right: 0;
	width: 100%;
	background: rgba(39, 39, 39, 0.5);
	color: #fff;
	transition: 0.3s bottom linear;
}
#footer > .contain {
	display: flex;
	flex-direction: row;
	justify-content: start;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 60px;
	text-transform: uppercase;
	height: 60px;
}
#footer-nav {
	position: relative;
	left: 0;
    bottom: 60px;
	transition: 0.3s bottom linear;
}
#footer-more {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}
#footer-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-grow: 1;
	margin: 0 10px;
	display: none;
}

.title {
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
}
.subtitle {
	margin-top: 0;
}

.btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.5rem 3rem;
	color: #2F607E;
	border-bottom: 3px solid #2F607E;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	width: 100%;
}

/*** carousel ***/
.carousel {
	position: relative;
}
.carousel-box {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
}
.carousel-view {
	position: relative;
	overflow: hidden;
}
.carousel-window {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	top: 0;
	left: 0;
	right: 0;
}
.carousel-endless-box {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-wrap: nowrap;
}
.carousel-item {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 15px;
}
.carousel-item-header {
	margin-bottom: 1em;
}

/*** Slideshow ***/
.slider-block {
	position: relative;
	margin: 0 0 20px 0;
}
.slider-frame {
	position: relative;
	overflow: hidden;
}
.slideshow {
	position: relative;
	z-index: 11;
	height: auto;
	width: 100%;
	overflow: hidden;
}
.slide {
	position: relative;
	z-index: 12;
	top: 0;
	left: 0;
	width: 100%;
}
.slide img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 100vh;
	object-fit: cover;
}
.slide.active {
	display: block;
	position: relative;
	z-index: 13;
}
.slide.slide-off {
	display: block;
	position: absolute;
	z-index: 11;
}

.slide-over {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 60px;
	display: flex;
	align-items: end;
}
.slide-over-text {
	text-align: left;
	color: #fff;
	background: rgba(39, 39, 39, 0.5);
	padding: 10px;
}
.slider-block-over {
	position: relative;
} 


/*** modification for CSS only effect ***/
.slideshow-css .slide {
	height: 0;
	overflow: hidden;
	opacity: 0;
}
.slideshow-css .slide.slide-show,
.slideshow-css .slide.active {
	opacity: 1;
}
.slideshow-css .slide.slide-hide {
	position: absolute;
	z-index: 11;
}
.slideshow-css .slide.active,
.slideshow-css .slide.slide-show,
.slideshow-css .slide.slide-hide {
	height: auto;
	min-height: 300px;
	transition: opacity 0.3s ease-in-out;
}

/*** arrows ***/
.slider-arrows {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.carousel-arrows button,
.slider-arrows button {
	position: absolute;
	top: calc(50% - 16px);
	width: 15px;
	height: 30px;
	background: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 1;
	z-index: 20;
	border: none;
	cursor: pointer;
}
.slider-arrows button:hover {
	opacity: 1;
}
.carousel-arrows button.carousel-arrows-left,
.slider-arrows button.slider-arrows-left {
	left: 5px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-linejoin='square' stroke-width='4' d='M18 2L3 17L18 32'/%3e%3c/svg%3e");
}
.carousel-arrows button.carousel-arrows-right,
.slider-arrows button.slider-arrows-right {
	right: 5px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-linejoin='square' stroke-width='4' d='M2 2L17 17L2 32'/%3e%3c/svg%3e");
}
.carousel-arrows button.carousel-arrows-left {
	top: calc(35% - 16px);
	left: -5px;
}
.carousel-arrows button.carousel-arrows-right {
	top: calc(35% - 16px);
	right: -5px;
}

@media (min-width: 575px) {
	.col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	.col-sm-10 {
		-ms-flex: 0 0 83.3333%;
		flex: 0 0 83.3333%;
		width: 83.3333%;
	}
	.col-sm-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		width: 75%;
	}
	.col-sm-8 {
		-ms-flex: 0 0 66.6666%;
		flex: 0 0 66.6666%;
		width: 66.6666%;
	}
	.col-sm-7 {
		-ms-flex: 0 0 58.3333%;
		flex: 0 0 58.3333%;
		width: 58.3333%;
	}
	.col-sm-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		width: 50%;
	}
	.col-sm-5 {
		-ms-flex: 0 0 41.6666%;
		flex: 0 0 41.6666%;
		width: 41.6666%;
	}
	.col-sm-4 {
		-ms-flex: 0 0 33.3333%;
		flex: 0 0 33.3333%;
		width: 33.3333%;
	}
	.col-sm-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		width: 25%;
	}
	.col-sm-2 {
		-ms-flex: 0 0 16.6666%;
		flex: 0 0 16.6666%;
		width: 16.6666%;
	}
	.col-sm-1 {
		-ms-flex: 0 0 8.3333%;
		flex: 0 0 8.3333%;
		width: 8.3333%;
	}
	
	#social {
		margin: 0 20px;
	}
	#social span {
		display: block;
	}
}

@media (min-width: 768px) {
	.col-md-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	.col-md-10 {
		-ms-flex: 0 0 83.3333%;
		flex: 0 0 83.3333%;
		max-width: 83.3333%;
	}
	.col-md-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-8 {
		-ms-flex: 0 0 66.6666%;
		flex: 0 0 66.6666%;
		max-width: 66.6666%;
	}
	.col-md-7 {
		-ms-flex: 0 0 58.3333%;
		flex: 0 0 58.3333%;
		max-width: 58.3333%;
	}
	.col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-5 {
		-ms-flex: 0 0 41.6666%;
		flex: 0 0 41.6666%;
		max-width: 41.6666%;
	}
	.col-md-4 {
		-ms-flex: 0 0 33.3333%;
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	.col-md-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-2 {
		-ms-flex: 0 0 16.6666%;
		flex: 0 0 16.6666%;
		max-width: 16.6666%;
	}
	.col-md-1 {
		-ms-flex: 0 0 8.3333%;
		flex: 0 0 8.3333%;
		max-width: 8.3333%;
	}

	.display-pc {
		display: block !important;
	}
	.display-mob {
		display: none !important;
	}
	
	.contain {
		padding: 30px;
	}
	.carousel-box {
		padding: 0 20px;
	}
	
	.columns .title {
		margin-top: 0;
	}
	.columns > *:not(:first-child) {
		padding-left: 30px;
	}
	.columns > *:not(:last-child) {
		padding-right: 30px;
	}

	#social {
		justify-content: flex-start;
	}
	
	#footer-menu {
		display: flex;
		margin: 0 20px 0 0;
	}

	.carousel-item {
		width: 50%;
	}
	
	.slider-arrows {
		position: unset;
		bottom: auto;
	}
	.slider-arrows button.slider-arrows-left {
		left: 20px;
	}
	.slider-arrows button.slider-arrows-right {
		right: 20px;
	}
	
	.slider-pager {
		text-align: right;
	}
	.slider-pager button {
		margin: 0 10px;
	}
	.slider-pager button:last-of-type {
		margin-right: 0;
	}

	.slider-block-over .slider-pager {
		text-align: center;
	}
	.slide-over {
		justify-content: end;
	}
	.slide-over-text {
		max-width: calc(100% - 120px);
		padding: 30px;
		margin-right: 60px;
	}
	.slide-over-text .text {
		padding-top: 15px;
		padding-left: 30px;
	}
}

@media (min-width: 1200px) {
	.col-lg-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	.col-lg-10 {
		-ms-flex: 0 0 83.3333%;
		flex: 0 0 83.3333%;
		width: 83.3333%;
	}
	.col-lg-9 {
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		width: 75%;
	}
	.col-lg-8 {
		-ms-flex: 0 0 66.6666%;
		flex: 0 0 66.6666%;
		width: 66.6666%;
	}
	.col-lg-7 {
		-ms-flex: 0 0 58.3333%;
		flex: 0 0 58.3333%;
		width: 58.3333%;
	}
	.col-lg-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		width: 50%;
	}
	.col-lg-5 {
		-ms-flex: 0 0 41.6666%;
		flex: 0 0 41.6666%;
		width: 41.6666%;
	}
	.col-lg-4 {
		-ms-flex: 0 0 33.3333%;
		flex: 0 0 33.3333%;
		width: 33.3333%;
	}
	.col-lg-3 {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		width: 25%;
	}
	.col-lg-2 {
		-ms-flex: 0 0 16.6666%;
		flex: 0 0 16.6666%;
		width: 16.6666%;
	}
	.col-lg-1 {
		-ms-flex: 0 0 8.3333%;
		flex: 0 0 8.3333%;
		width: 8.3333%;
	}
	
	#header-wave {
		background-size: 100% 100%;
	}
	
	#footer-menu {
		justify-content: flex-end;
		gap: 50px;
		margin: 0 60px 0 0;
	}
	
	#social {
		margin: 0 30px;
		gap: 30px;
	}
	
	.carousel-item {
		width: 33.3333%;
	}
	
	.contain {
		padding: 30px 60px;
	}
	.carousel-box {
		padding: 0 40px;
	}
	
	.slide-over-text {
		max-width: 55%;
	}
	.slide-over-text {
		padding: 60px;
	}
}