/* Custom Styles */



/* Global */



html {

	overflow-x: hidden;

}



* {

	margin: 0 auto;

}



body {

	padding: 0 !important;

	position: relative;

	overflow-x: hidden;

	scroll-behavior: smooth;

	background: #fff;

	font-family: 'Raleway', sans-serif;

	font-weight: 500;

	color: #222;

	letter-spacing: 0;

}



p {

	margin-bottom: 16px;

	font-size: 15px;

	color: #777;

	line-height: 23px;

}



a:focus,

input:focus,

button:focus,

textarea:focus {

	text-decoration: none;

	outline: 0;

}



a {

	cursor: pointer;

}



a,

.right-panel .item-resort > a i,

.left-panel .item-resort > a i,

#privacy .modal-header .close {

	-webkit-transition: all .3s ease-in-out;

	-moz-transition: all .3s ease-in-out;

	transition: all .3s ease-in-out;

}



a:hover {

	text-decoration: none;

}



p:last-child {

	margin-bottom: 0;

}



h2 {

	color: #222;

}



ul {

	padding: 0;

	margin: 0;

	list-style: none;

}



/* Header */



header {

	position: fixed;

	top: 0;

	left: 0;

	z-index: 2;

	width: 100%;

	padding: 16px 0;

	text-align: center;

}

	header .container {
		position: relative;
	}



	header img {

		max-height: 88px;

	}



	header h5 {

		margin-top: 24px;

		font-size: 9px;

		font-weight: 800;

		letter-spacing: 2px;

	}



/* Main Content */



.maincontent-panel {

	display: table;

	width: 100%;

	height: 100vh;

	table-layout: fixed;

}



	.right-panel,

	.left-panel {

		position: relative;

		display: table-cell;

		width: 50%;

		overflow: hidden;

		vertical-align: middle;

	}



.right-panel {

	background: #fcfcfc;

/*	border: 2px solid #f24f00;

	border-right: none;*/

}



	.right-panel .triangle,

	.left-panel .triangle {

		position: absolute;

		bottom: -130px;

		left: -130px;

		z-index: 2;

		width: 180px;

		height: 180px;

		background: #f24f00;

		transform: rotate(45deg);

	}



	.left-panel .triangle {

		top: -130px;

		bottom: auto;

		left: auto;

		right: -130px;

		background: #4f8c0d;

	}



.left-panel {

	background: #f7f7f7;

/*	border: 2px solid #4f8c0d;

	border-left: none;*/

}



.item-resort {

	position: relative;

	width: 65%;

	margin-top: 16%;

}



.info-panel {

	display: table;

	width: 100%;

	table-layout: fixed;

}



	.info-panel .title,

	.info-panel .social-media {

		display: table-cell;

		vertical-align: middle;

	}



	.info-panel .title {

		padding: 24px 0;

	}



	.info-panel .title h5 {

		position: relative;

		font-size: 11px;

		font-weight: 800;

		letter-spacing: 2px;

		color: #f24f00;

		line-height: 14px;

	}



	.info-panel .title h5:after {

		content: '';

		position: absolute;

		display: block;

		margin-top: 12px;

		width: 16px;

		height: 2px;

		background: #f24f00;

	}



	.left-panel .info-panel .title h5 {

		color: #4f8c0d;

	}



	.left-panel .info-panel .title h5:after {

		background: #4f8c0d;

	}



	.info-panel .social-media {

		position: relative;

		z-index: 5;

		text-align: right;

	}



	.info-panel .social-media li {

		display: inline-block;

		margin: 0 8px;

	}



	.info-panel .social-media li:last-child {

		margin-right: 0;

	}



	.info-panel .social-media li a {

		font-size: 14px;

		color: #222;

	}



	.info-panel .social-media li a:hover {

		color: #f24f00;

	}



	.left-panel .info-panel .social-media li a:hover {

		color: #4f8c0d;

	}



.right-panel .item-resort .dots {

	position: absolute;

	top: -21px;

	left: -21px;

}



.left-panel .item-resort .dots {

	position: absolute;

	top: auto;

	left: auto;

	bottom: -21px;

	right: -21px;

}



.right-panel .item-resort > h2 {

	position: absolute;

	top: 220px;

	left: -290px;

	font-size: 130px;

	font-weight: 900;

	color: #f5f5f5;

	transform: rotate(-90deg);

}



.left-panel .item-resort > h2 {

	position: absolute;

	bottom: 315px;

	right: -328px;

	font-size: 130px;

	font-weight: 900;

	color: #eee;

	transform: rotate(90deg);

}



.right-panel .item-resort > a,

.left-panel .item-resort > a {

	position: absolute;

	bottom: 124px;

	left: -100px;

	display: inline-block;

	font-size: 11px;

	font-weight: 800;

	color: #222;

	letter-spacing: 2px;

	transform: rotate(-90deg);

}



	.right-panel .item-resort > a:hover {

		color: #f24f00;

	}



	.right-panel .item-resort > a i,

	.left-panel .item-resort > a i {

		margin-left: 12px;

		font-weight: 800;

		width: 14px;

		height: 14px;

		background: #222;

		font-size: 8px;

		color: #fff;

		line-height: 14px;

		border-radius: 7px;

		text-align: center;

		padding-left: 2px;

	}



	.item-resort > a:hover i {

		background: #f24f00;

	}



.left-panel .item-resort > a {

	left: auto;

	bottom: auto;

	top: 62px;

	right: -95px;

	transform: rotate(90deg);

}



	.left-panel .item-resort > a:hover {

		color: #4f8c0d;

	}



	.left-panel .item-resort > a:hover i {

		background: #4f8c0d;

	}



.img-panel {

	position: relative;

}



/* Footer */



footer {

	position: fixed;

	bottom: 0;

	left: 0;

	z-index: 2;

	width: 100%;

	padding: 24px 0;

	text-align: center;

}



footer ul {

	

}



	footer ul li {

		display: inline-block;

		padding: 0 12px;

		border-right: 1px solid #ddd;

		font-size: 9px;

		font-weight: 700;

		color: #aaa;

		letter-spacing: 1px;

	}



	footer ul li:last-child {

		padding-right: 0;

		border: none;

	}



	footer ul li a {

		color: #aaa;

	}



	footer ul li a:hover {

		color: #222;

	}



footer img {

	display: none;

	position: absolute;

	bottom: -52px;

	left: calc(50% - 33px);

}



/*.img-panel:after {

	content: '';

	position: absolute;

	top: 0;

	right: 0;

	z-index: 3;

	width: 6px;

	height: 100%;

	background: #fcfcfc;

}



.left-panel .img-panel:after {

	background: #f6f6f6;

}*/



/* Preloader */



#loading {

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f5f5+0,dddddd+98 */

	background: rgb(245,245,245); /* Old browsers */

	background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(221,221,221,1) 98%); /* FF3.6-15 */

	background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(221,221,221,1) 98%); /* Chrome10-25,Safari5.1-6 */

	background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(221,221,221,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */

	height: 100%;

	width: 100%;

	position: fixed;

	z-index: 999;

	margin-top: 0px;

	top: 0px;

	text-align: center;

}



	#loading .copyright {

		position: absolute;

		bottom: 24px;

		left: 0;

		width: 100%;

		font-size: 13px;

		color: #888;

		text-align: center;

		letter-spacing: .5px;

	}



	#loading .title {

		position: absolute;

		top: calc(55% - 180px);

		left: 0;

		width: 100%;

		text-align: center;

	}



	#loading h5 {

		margin: 24px 0 8px 0;

		font-size: 10px;

		color: #888;

		letter-spacing: 2px;

		text-transform: uppercase;

	}



	#loading h3 {

		font-size: 20px;

		font-weight: 600;

		color: #333;

		letter-spacing: 1px;

	}



.progress-bar {

	position: absolute;

	top: calc(55% - 5px);

	left: 0;

	width: 100%;

	height: 10px;

	background: rgba(0,0,0,.08);

	border-bottom: 1px solid rgba(255,255,255,1);

}



.progress-lvl {

	position: absolute;

	top: 3px;

	width: 0;

	height: 3px;

	z-index: :5;

	background: #adaba6;

	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,.08);

	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,.08);

	box-shadow: 0px 0px 12px 0px rgba(0,0,0,.08);

	-webkit-animation: progress 3s;  /* Safari 4.0 - 8.0 */

	-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */

	animation: progress 3s;

	animation-iteration-count: infinite;

}



@keyframes progress {

  100% {width: 100%;}

  50% {width: 50%;}

}



/* Modal */



/* Modal */



.modal-backdrop.in {

	opacity: .8;

}



#privacy .modal-content {

	background: transparent;

	border-radius: 0;

}



	#privacy .modal-header {

		padding: 16px 24px;

		background: #adaba6;

	}



	#privacy .modal-header h4 {

		font-weight: 600;

		color: #fff;

	}



	#privacy .modal-header .close {

		margin: 0;

		text-shadow: none;

		font-size: 28px;

		color: #fff;

		filter: alpha(opacity=56);

		opacity: .56;

	}



	#privacy .modal-header .close:hover {

		filter: alpha(opacity=100);

		opacity: 1;		

	}



#privacy .modal-body {

	padding: 32px;

	background: #fff;

}



	#privacy .modal-body h3 {

		margin-bottom: 16px;

		font-size: 14px;

		font-weight: 700;

		color: #222;

	}



	#privacy .modal-body p,

	#privacy .modal-body ul {

		font-size: 13px;

		line-height: 21px;

	}



	#privacy .modal-body ul {

		padding: 0;

		margin: 0 0 16px 16px;

		list-style: disc;

	}



	#privacy .modal-body ul li {

		margin-bottom: 8px;

	}



	#privacy .modal-body ul:last-child,

	#privacy .modal-body ul li:last-child {

		margin-bottom: 0;

	}



	#privacy .modal-body a {

		color: #adaba6;

		text-decoration: underline;

	}



.item-slide {

	overflow: hidden;

}



.diagline {

	position: absolute;

	top: calc(50%);

	left: calc(50% - 20px);

	z-index: 3;

	width: 40px;

	height: 1px;

	background: #ddd;

	transform: rotate(-25deg);

}



.owl-stage {

	display: -webkit-box;

	display: -moz-box;

	display: -ms-box;

	display: box;

}



.left-panel .item-resort {

	margin-left: 40px;

	margin-right: auto;

}



.right-panel .item-resort {

	margin-right: 40px;

	margin-left: auto;

}


#covid-ads .close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 500;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    color: #fff;
    line-height: 32px;
    text-shadow: none;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}


#covid-ads .modal-pop article  {

	text-align: center;
    width: 90%;
    margin: 24px auto;
}

#covid-ads .modal-pop article p  {

	color: #fff;
}



#covid-ads .modal-pop h2 {

	color: #fff;
	font-weight: 600;
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom: 24px;
}

#covid-ads .modal-pop h3 {

	color: #fff;
	font-weight: 500;
	font-size: 24px;
	margin-top: 24px;
	text-align: center;
}


#covid-ads .modal-content {

	background: transparent;
	border-radius: 0;
	border:none;
	box-shadow: none;
}


#covid-ads .modal-pop img {

	width: 100%;
}


#covid-ads .modal-dialog {

	width: 1200px;
	margin: 86px auto;
}

/* BLOG */

.blog-page {
	background: #e5e5e5;
}

.blog-page header {
	position: relative;
	padding: 160px 40px;
	background: #232323;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

	.blog-page header img {
		position: absolute;
		width: 100%;
		height: auto;
		max-height: none;
	}

	.blog-page header .overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background: rgb(0,0,0,.72);
	}

	.blog-page header .title-page {
		position: relative;
		z-index: 3;
	}

	.blog-page header h1 {
		color: #fff;
		font-size: 48px;
		font-weight: 600;
	}

	.blog-page header a {
		display: inline-block;
		margin-top: 24px;
		color: rgba(255,255,255,.5);
		transition: all .3s ease-in-out;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1px;
	}

	.blog-page header a:hover {
		color: rgba(255,255,255,1);
	}

	.blog-page header a i {
		margin-right: 12px;
		transition: all .3s ease-in-out;
	}

	.blog-page header a:hover i {
		margin-right: 16px;
	}

.blogroll {
	position: relative;
	z-index: 2;
	margin-top: -80px;
}

	.blogroll .container {
		position: relative;
		max-width: 1024px;
		padding: 80px;
		background: #fff;
		overflow: hidden;
		-webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.12);
		-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.12);
		box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.12);
	}

.blogroll .item-blog {
	display: table;
	width: 100%;
	border-bottom: 3px double #ddd;
	margin-bottom: 16px;
	padding-bottom: 16px;
}

	.blogroll .item-blog:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;		
	}

	.blogroll .item-blog .blog-img,
	.blogroll .item-blog .blog-content {
		display: table-cell;
		vertical-align: middle;
	}

	.blogroll .item-blog .blog-img img {
		max-width: 240px;
		border: 8px solid #fff;
		-webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
		-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
		box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
	}

	.blogroll .item-blog .blog-img {
		padding-right: 16px;
	}

	.blogroll .item-blog .blog-content {
		padding-left: 16px;
	}

.blogroll .item-blog .blog-title {
	margin-bottom: 16px;
}

	.blogroll .item-blog .blog-title h2 {
		font-weight: 800;
	}

	.blogroll .item-blog .blog-title small {
		display: block;
		margin-top: 16px;
		color: #888;
	}

	.blogroll .item-blog .blog-title small i {
		margin-right: 12px;
	}

.blogroll .item-blog .blog-content a {
	display: inline-block;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	color: #232323;
	letter-spacing: 1px;
}

	.blogroll .item-blog .blog-content a i {
		margin-left: 12px;
		color: #232323;	
		transition: all .3s ease-in-out;
	}

	.blogroll .item-blog .blog-content a:hover i {
		margin-left: 16px;
	}

.r-triangle,
.l-triangle {
	position: absolute;
	bottom: -130px;
	left: -130px;
	z-index: 2;
	width: 180px;
	height: 180px;
	background: #f24f00;
	transform: rotate(45deg);
}

.l-triangle {
	top: -130px;
	bottom: auto;
	left: auto;
	right: -130px;
	background: #4f8c0d;
}

.blog-page .footer {
	padding: 64px 0;
	text-align: center;
	color: #888;
}

	.blog-page .footer small {
		vertical-align: middle;
		font-style: 14px;
	}

	.blog-page .footer a {
		margin-left: 16px;
		color: #888;
		vertical-align: middle;
		transition: all .3s ease-in-out;
	}

	.blog-page .footer a:hover {
		color: #222;
	}

.blogroll .item-blog-full img {
	max-width: 100%;
	border: 8px solid #fff;
	-webkit-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
	box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.24);
}

	.blogroll .item-blog-full small {
		text-align: center;
		display: block;
		margin-top: 8px;
		font-size: 11px;
		line-height: 15px;
		font-style: italic;
	}

nav {
	position: absolute;
	top: 0;
	right: 16px;
}

	nav ul {
		margin: 0;
		padding: 0;
	}

	nav ul li {
		display: inline-block;
	}

	nav ul li a {
		display: block;
		padding: 10px 16px;
		border: 1px solid #e5e5e5;
		background: #eee;
		border-radius: 3px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1px;
		color: #222;
		transition: all .3s ease-in-out;
	}

	nav ul li a:hover {
		background: #222;
		border: 1px solid #222;
		color: #fff;
	}