/*
Project -  The Organic Team
Creater -  Createrix Labs 2019 - Omalka Menuwan

-- Structure
1. Common - Font Installation
2. Common - General Stylings
3. Common - Navigation Stylings
4. Common - Pre-Footer Stylings
5. Common - Footer Section Stylings
6. Common - Coming Soon Section Stylings
7. Home - Slider Section Stylings
8. Home - Hotels Map Section
9. About - About Section Stylings
10. Services - Services Section Stylings
11. Hotels - Hotels Section Stylings
12. Contact - Contact Section Stylings
*/


/***** 1. Common - Font Installation *****/
/*Title Font - Nexa Black*/
@font-face {
	font-family: 'Nexa Black';
	src: url('../fonts/nexablack/nexa1.ttf');
	font-weight:normal;
	font-style:normal;
}
/*Subfont - Quicksands*/
@font-face {
	font-family: 'Quicksands';
	src: url('../fonts/quicksands/Quicksand-Light.ttf');
	font-weight:300;
	font-style:normal;
}
@font-face {
	font-family: 'Quicksands';
	src: url('../fonts/quicksands/Quicksand-Regular.ttf');
	font-weight:400;
	font-style:normal;
}
@font-face {
	font-family: 'Quicksands';
	src: url('../fonts/quicksands/Quicksand-Medium.ttf');
	font-weight:600;
	font-style:normal;
}
@font-face {
	font-family: 'Quicksands';
	src: url('../fonts/quicksands/Quicksand-SemiBold.ttf');
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family: 'Quicksands';
	src: url('../fonts/quicksands/Quicksand-Bold.ttf');
	font-weight:800;
	font-style:normal;
}

/****** 2. Common - General Stylings *****/
*{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
	border-radius: 10px;
} 
::-webkit-scrollbar-track {
	background:#fff;
	border-radius: 10px;
} 
::-webkit-scrollbar-thumb {
	background-color: #1f1f1f;
	/* outline: 1px solid #fafafa; */
	border-radius: 10px;
}
::-moz-selection { 
	background: #1f1f1f; 
	color:#fafafa;
}
::selection { 
	background: #1f1f1f; 
	color:#fafafa;
}
button:focus, button:active, button:hover{
	outline: 0px;
	/* border:0px; */
}
a{
	text-decoration: none;
}
body{
	position: relative;
	font-family: 'Quicksands';
	overflow-x: hidden;
	overflow-y: scroll;
}
.main-title {
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	margin-bottom: 1em;
	color: #2c2c2c;
	font-size: 3em;
	/* letter-spacing: 0.05em; */
	/* text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2); */
}
.single-sec{
	padding: 100px;
	position: relative;
}
.single-sec p{
	width:50%;
	margin-bottom: 1em;
	text-align: justify;
}
@media only screen and (max-width: 500px){
	.single-sec{
		padding: 30px !important;
	}
}


/***** 3. Common - Navigation Stylings *****/
nav#regular-navigation {
	position: relative;
	width: 100vw;
	height: 15vh;
	background: #000;
	display: flex;
	flex-direction: row;
}
div#navigation-logo-sec {
	flex: 3;
	position: relative;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px;
	max-width: 20vw;
}
img#navigation-logo {
	position: relative;
	height: 100%;
}
div#navigation-content-sec {
	flex: 12;
	position: relative;
	display: flex;
	flex-direction: column;
}
div#navigation-social-sec {
	flex: 1;
	background: #f3f3f3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: 1.2em;
	color: #1f1f1f;
	z-index: 1000;
}
.upper-sec {
	position: relative;
	padding: 0 3%;
	color: #f1f1f1;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	display: flex;
	/* border-bottom: 1px solid #fff; */
	font-size: .8em;
	font-weight: 700;
}
.upper-sec:after{
	content:'';
	width:90%;
	left:5%;
	position: absolute;
	bottom:0;
	background: #f1f1f1;
	height: 2px;
}
.upper-sec a{
	color: #fff;
}
.lower-sec {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.lower-sec ul {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-evenly;
}
.lower-sec a{
	color: #f1f1f1;
	text-transform: uppercase;
	font-size: .85em;
}
.lower-sec a:hover, .lower-sec a:active, .lower-sec a:focus{
	font-weight: 800;
}
@media only screen and (max-width:650px){
	nav#regular-navigation{
		font-size: 14px;
	}
}
@media only screen and (max-width:500px){
	nav#regular-navigation{
		display: none;
	}
	nav#responsive-navigation{
		display: flex;
	}
}

/***** 3.1 Responsive Navigation ******/
#responsive-navigation{
	display: none;
	/* position: fixed; */
	/* top: 0; */
}
.bar1, .bar2, .bar3 {
	width: 35px;
	height: 3px;
	background-color: #f3f3f3;
	margin: 6px 0;
	transition: 0.4s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
	transform: rotate(-45deg) translate(-5px, 5px);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}
.container-menu-icon {
	display: inline-block;
	cursor: pointer;
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 35;
	padding: 5px;
	background: rgba(0,0,0,0.5);
}
.menu-sec {
	position: fixed;
	top: 0;
	left: -100%;
	width: 100vw;
	height: 100vh;
	z-index: 30;
	background: #000;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	padding: 30px;
	transition: all .3s ease;
}
.menu-sec.active{
	left:0;
}
.menu-sec a {
	color:#fff;
	line-height: 2em;
	text-transform: uppercase;
}
.menu-area ul{
	text-align: center;
}
.menu-sec div#navigation-social-sec {
	width: 100%;
	position: absolute;
	left: 0;
	align-items: center;
	flex-direction: row;
	padding: 0 20%;
	bottom: 0;
	height: 30px;
}
.menu-sec div#navigation-social-sec a{
	color:#000;
}
.logo-sector{
	background: #000;
	width: 100%;
	height: 100px;
	padding: 10px 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.logo-sector .upper-sec {
	display: none;
}
.menu-area .upper-sec {
	position: absolute;
	bottom: 30px;
	left: 0;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	background: #0e0e0e;
}
.menu-area .upper-sec:after {
	display: none;
}
.menu-area .upper-sec a {
	text-transform: none;
}



/***** 4. Common - Pre-Footer Stylings *****/
#pre-footer{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	box-orient: horizontal;
	flex-direction: row;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
	align-items: center;
	position: relative;
	width: 100vw;
	padding: 20px 5vw;
	height: 150px;
}
.cell {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1 1 calc(100% / 9);
	flex: 1 1 calc(100% / 9);
	padding: 10px;
	margin: 10px;
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
}
.cell img {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	display: block;
	filter: grayscale(1);
}
div#pre-footer-cover {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	background: #fff;
	padding: 30px 0 0 0;
}
div#pre-footer-cover:before, div#pre-footer-cover:after{
	content:'';
	position:absolute;
	height:3px;
	width:50%;
	top:0;
}
div#pre-footer-cover:before{
	left:0;
	background:#1d1d1d;
}
div#pre-footer-cover:after{
	right:0;
	background:#848484;
}
h2.prefooter-title{
	font-family: 'Nexa Black';
	color: #1f1f1f;
	text-transform: uppercase;
	/* background: #bbb; */
	padding: 2px 15px;
	margin-bottom: 25px;
}
@media only screen and (max-width:965px){
	#pre-footer{
		flex-wrap:wrap;
		height: auto;
	}
	.cell{
		flex: 1 0 15%;
	}
}
@media only screen and (max-width:450px){
	.cell{
		flex: 1 0 30%;
		/* max-height: 80px; */
	}
	h2.prefooter-title{
		text-align: center;
	}
}


/***** 5. Common - Footer Section Styling *****/
footer{
	position: relative;
	width:100vw;
	height: auto;
	background: #0c0c0c;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 100px;
}
footer:before, footer:after{
	content:'';
	height: 15px;
	width:100%;
	position: absolute;
	left:0;
}
footer:before{
	top:0px;
	background: #f3f3f3;
}
footer:after{
	background: #bfbfbf;
	top: 15px;
}
footer a{
	color: #eee;
	transition : all .3s ease;
}
footer a:hover, footer a:active, footer a:focus{
	color: #fff;
}
footer h2{
	color:#f1f1f1;
	font-size: 15px;
	margin-bottom: 20px;
}
footer p,footer span {
	color: #f1f1f1;
	font-size: 12px;
	margin-bottom: 20px;
	display:block;
}
.footer-col{
	flex: 1 0 33%;
	position: relative;
	height: 100%;
	padding: 0 10px;
}
.footer-col.partner-col{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
img.partner {
	filter: grayscale(1) invert(1);
	max-width: 30%;
	margin: 1%;
	padding: 10px;
	/* background: red; */
}
.btn {
	display: inline-block;
	background: transparent;
	color: inherit;
	font: inherit;
	border: 0;
	outline: 0;
	padding: 0;
	transition: all 200ms ease-in;
	cursor: pointer;
}
.btn--primary {
	background: #f10387;
	color: #fff;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	padding: 10px 36px;
	text-transform: uppercase;
	font-size: .9em;
	font-weight: 700;
	position: relative;
}
.btn--primary:hover {
	background: #14a9e3;
}
.btn--primary:active {
	background: #444444;
	box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.btn--inside {
	margin-left: -15%;
}
.form__field {
	width: 80%;
	background: #fff;
	color: #a3a3a3;
	font-size: 13px;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
	border: 0;
	outline: 0;
	padding: 15px 10px;
}
form.form {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.footer-bottom{
	padding: 20px 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #111;
}
.footer-bottom:before{
	content:'';
	position:absolute;
	width:100%;
	height:20px;
	left:0;
	top:-10px;
	background:#0e0e0e
}
.footer-bottom span{
	color:#ddd;
	font-size: .6em;
	display: flex;
	align-items: center;
	margin: 0;
}
span.footer-social {
	font-size: 1.2em;
}
span.footer-social i{
	margin-right:10px;
}
@media only screen and (max-width:1200px){
	footer .form__field{
		width: 90%;
	}
	.btn-inside{
		margin-left: -35%;
	}
}
@media only screen and (max-width:950px){
	footer{
		flex-wrap: wrap;
	}
	.footer-col{
		flex: 1 0 50%;
	}
}
@media only screen and (max-width:800px){
	form.form{
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	footer .form__field{
		width:100%;
	}
	.btn--inside{
		margin: 10px 0;
	}
}
@media only screen and (max-width:450px){
	footer{
		padding: 100px 40px;
	}
	.footer-col{
		flex: 1 0 100%;
	}
	.footer-bottom{
		padding: 20px;
	}
	.footer-bottom span{
		width:40%;
	}
}


/***** 6. Common - Coming Soon Section Stylings *****/
.outer-layer-cs{
	width:100vw;
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
#cs-logo{
	width:15%;
	position: relative;
	margin-bottom: 20px;
}
.outer-layer-cs h1{
	text-transform: uppercase;
	margin: 0;
}


/***** 7. Home - Slider Section Stylings *****/
div#caption-container {
	position: absolute;
	bottom: 10vh;
	z-index: 20;
	left: 15vh;
	width: 100vw;
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
section#slider {
	position: relative;
	width: 100%;
}
#home-slider{
	position: relative;
	display: block;
}
.slider-section{
	position: relative;
	width: 100vw;
	height: 85vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 10vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	color: #fff;
	text-transform: uppercase;
	font-size: 4em;
	font-weight: 900;
}
#ella-slide{
	background-image: url(../images/slider/ella.jpg);
}
#sigiriya-slide{
	background-image: url(../images/slider/sigiriya.jpg);
}
#kandy-slide{
	background-image: url(../images/slider/kandy.jpg);
}
#nuwaraeliya-slide{
	background-image: url(../images/slider/nuwaraeliya.jpg);
}
#galle-slide{
	background-image: url(../images/slider/galle.jpg);
}
.rotating-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.rotating-text p {
	display: flex;
	margin: 0;
	vertical-align: top;
	font-size: 1.4em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1;
}
.text-container p.word, .words {
	/*position: absolute;
	display: flex;
	opacity: 0;
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Nexa Black';*/
	display: flex;
	margin: 0;
	vertical-align: top;
	font-size: 1.4em;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1;
}
.text-container p.word .letter {
	text-transform: uppercase;
	transform-origin: center center 25px;
}
.text-container p.word .letter.out {
	transform: rotateX(90deg);
	transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.text-container p.word .letter.in {
	transition: 0.38s ease;
}
.text-container p.word .letter.behind {
	transform: rotateX(-90deg);
}
.text-container {
	position: absolute;
	width: 80%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.text-container p {
	font-size: 0.4em;
	font-weight: 300;
	text-transform: uppercase;
}

.text-container p.word {
	font-size: 0.9em;
	font-weight: 700;
	font-family: 'Nexa Black';
	overflow: hidden;
}
@media only screen and (max-width:1100px){
	.text-container{
		display:flex;
	}
	#caption-container{
		display: none !important;
	}
}
@media only screen and (max-width:490px){
	.text-container{
		font-size: 40px;
	}
}

/***** 8. Home - Hotels Map Section ******/
section#hotel-map {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	align-items: center;
}
div#map {
	width: 70%;
	height: 100%;
}
div#hotel-details-container {
	width: 30%;
	height: 100%;
	position: relative;
	display: flex;
	background: #fffefe;
	padding: 3% 20px;
	flex-direction: column;
	align-items: center;
	justify-content: stretch;
}
div#hotel-scroller {
	position: relative;
	width: 100%;
	overflow-y: scroll;
	height: 90vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}
.hotel-thumb {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 20px;
	background: #fff;
	cursor: pointer;
}
div#hotel-details-container h1 {
	margin-bottom: 20px;
}
div.hotel-image{
	width: 30%;
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid #777;
	padding: 2%;
}
div.hotel-image:after{
	content: "";
	display: block;
	padding-bottom: 100%
}
.hotel-thumb .hotel-details {
	font-size: .8em;
	margin-left: 20px;
}
.hotel-thumb:after {
	content: '';
	position: absolute;
	width: 90%;
	bottom: 0;
	background: #666;
	height: 2px;
}
.hotel-thumb .hotel-details span {
	padding: 0;
}
.hotel-thumb .hotel-details span.hotel-city {
	background: transparent;
	color: #222;
	font-size: 1em;
}
img.hotels-logo {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	padding: 5%;
}
@media only screen and (max-width:1100px){
	section#hotel-map{
		flex-direction: column;
	}
	div#hotel-details-container{
		width:100%;
		padding: 20px 20px 0;
	}
	.hotel-thumb{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: auto;
		flex: 1 0 250px;
	}
	div#hotel-scroller{
		height: 200px;
		flex-direction: row;
		overflow-y: hidden;
		overflow-x: scroll;
	}
	div.hotel-image{
		width:50%;
	}
	.hotel-thumb:after{
		display: none;
	}
	.hotel-thumb .hotel-details{
		margin: auto;
		width: auto;
		text-align: center;
		align-items: center;
	}
	div#map{
		width:100%;
	}
}
@media only screen and (max-width:500px){
	div#map{
		height:500px;
	}
	section#hotel-map{
		height: auto;
		font-size: 14px;
	}
	.hotel-thumb{
		flex:1 0 200px;
	}
}
@media only screen and (max-width:400px){
	.hotel-thumb{
		flex:1 0 90vw;
	}
}


/***** 9. About - About Section Stylings *****/
.statistics {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 20px 0;
	margin-top: 10vh;
}
.number-sec {
	position: relative;
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
span.number {
	font-size: 3.5em;
	font-weight: 300;
	color: #6f6f6f;
}
.statistics:after, .statistics:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 8px;
	background: #444;
	left: 0%;
}
.statistics:before{
	top:0;
	border-top: 6px solid #666;
}
.statistics:after{
	bottom:0;
	border-bottom: 6px solid #666;
}
span.number-title {
	text-align: center;
	text-transform: uppercase;
	font-weight: 900;
	color: #888;
}
@media only screen and (max-width: 1025px){
	#about-sec p{
		width:100%;
	}
}
@media only screen and (max-width: 900px){
	h1.main-title{
		text-align: center;
	}
}
@media only screen and (max-width: 725px){
	.statistics{
		flex-wrap: wrap;
	}
	.number-sec{
		width:100%;
		margin: 20px 0;
	}
}


/***** 10. Services - Services Section Stylings *****/
.service-container {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.service {
	position: relative;
	padding: 20px;
	margin: 10px calc(25% / 6);
	width: 25%;
	border: 5px solid #8a8a8a;
	display: flex;
	align-items: center;
}
.service p {
	width: 100%;
	padding-left: 20%;
	font-weight: 800;
	color: #2b2a2a;
	text-align: left;
}
.service-icon {
	position: absolute;
	/* height: 100%; */
	width: 30%;
	background: #101010;
	left: -15%;
	border-radius: 50%;
}
.service-icon  img{
	position:relative;
	max-width:100%;
	max-height:100%;
	padding: 20%;
	filter: grayscale(1) invert(1);
	opacity: .8;
}
.service-icon:after {
	content: "";
	position:absolute;
	display: block;
	padding-bottom: 100%
}
@media only screen and (max-width: 1150px){
	.service{
		width:35%;
		margin: 10px auto;
	}
}
@media only screen and (max-width: 850px){
	.service{
		width: 40%;
	}
}
@media only screen and (max-width: 720px){
	.service{
		width: 60%;
	}
}
@media only screen and (max-width: 720px){
	.service{
		width:80%;
	}
}


/***** 11. Hotels - Hotels Section Stylings *****/
#boutique-hotels{
	width:100vw;
	position: relative;
	background: #0c0c0c;
	padding: 100px;
}
#boutique-hotels:before, #boutique-hotels:after{
	content:'';
	position: absolute;
	width: calc(100% - 200px);
	height: calc(100% - 200px);
}
#boutique-hotels:before{
	border-top:4px solid #f1f1f1;
	border-right:4px solid #f1f1f1;
	top: 50px;
	right: 50px;
}
#boutique-hotels:after{
	border-bottom:4px solid #f1f1f1;
	border-left:4px solid #f1f1f1;
	bottom: 50px;
	left: 50px;
}
#boutique-hotels h1.main-title{
	color:#f1f1f1;
	text-shadow: 4px 4px 0px #6f6f6f, 7px 7px 0px rgba(0, 0, 0, 0.2);
}
.hotels-section-b {
	position: relative;
	margin: 30px 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}
.hotel-snippet {
	height: 40vh;
	width: 45%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	cursor: pointer;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-blend-mode: normal;
	background-color: #848484;
	transition: all .3s ease;
}
#hotel-1{
	background-image: url(../images/hotels/1.jpg);
}
#hotel-2{
	background-image: url(../images/hotels/2.jpg);
}
#hotel-3{
	background-image: url(../images/hotels/3.jpg);
}
#hotel-4{
	background-image: url(../images/hotels/4.jpg);
}
#hotel-5{
	background-image: url(../images/hotels/5.jpg);
}
#hotel-6{
	background-image: url(../images/hotels/6.jpg);
}
#hotel-7{
	background-image: url(../images/hotels/7.jpg);
}
#hotel-8{
	background-image: url(../images/hotels/8.jpg);
}
#hotel-9{
	background-image: url(../images/hotels/9.jpg);
}
#hotel-10{
	background-image: url(../images/hotels/10.jpg);
}
#hotel-11{
	background-image: url(../images/hotels/11.jpg);
}
.hotels-container-i {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: safe;
}
.hotels-container-i .hotel-snippet{
	width: 30%;
	margin: calc(10% / 6);
}
.hotel-details {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	width: 0%;
	transition: all .3s ease;
}
span.hotel-title {
	position: relative;
	padding: .3em 15px;
	background: #ffff;
	font-weight: 800;
	font-size: 1.2em;
	width:0%;
	transition: all .3s ease;
	min-width: max-content;
	text-align: inherit;
}
span.hotel-city {
	position: relative;
	padding: .3em 15px;
	font-weight: 500;
	background: #0d0d0d;
	color: #ddd;
	font-size: .9em;
	width:0;
	min-width: max-content;
}
.hotel-snippet:hover{
	background-blend-mode: screen;
}
.hotel-snippet:hover .hotel-details{
	width: 100%;
}
.hotel-snippet:hover span.hotel-title, .hotel-snippet:hover span.hotel-city{
	width:100%;
	text-align: center;
	transition: all .3s ease-out;

}
@media only screen and (max-width:1210px){
	.hotels-container-i .hotel-snippet{
		width:45%;
		margin:10px auto;
	}
}
@media only screen and (max-width:820px){
	.hotel-snippet{
		width:70% !important;
		margin:10px auto;
	}
}
@media only screen and (max-width:600px){
	.hotel-snippet{
		width:100% !important;
	}
}
@media only screen and (max-width:480px){
	#boutique-hotels{
		padding: 30px;
	}
	#boutique-hotels:before, #boutique-hotels:after{
		display: none;
	}
	.hotel-snippet{
		margin:20px auto;
	}
}
@media only screen and (max-width:340px){
	#boutique-hotels, #hotels-team{
		font-size: 14px;
	}
}
@media only screen and (max-width:310px){
	#boutique-hotels, #hotels-team{
		font-size: 12px;
	}
}


/***** 12. Contact - Contact Section Stylings *****/
.input-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 80%;
	justify-content: space-between;
	margin: 20px 0;
}
form.contact-form {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 0 5%;
	align-items: flex-start;
}
form.contact-form .btn--inside {
	margin: 20px 0 0;
}
form.contact-form:before {
	content: '';
	width: 5px;
	position: absolute;
	height: 100%;
	background: #666;
	left: 0;
	top: 0;
}
form.contact-form:after{
	content: '';
	width: 12px;
	position: absolute;
	height: 100%;
	background: #1d1c1c;
	left: 5px;
	top: 0;
}
form.contact-form .form__field, form.contact-form textarea {
	border: 2px solid !important;
}
form.contact-form span {
	font-weight: 700;
}
form.contact-form textarea{
	width:80%;
	height:20vh;
	background: #fff;
	color: #a3a3a3;
	font-size: 13px;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
	border: 0;
	outline: 0;
	padding: 15px 10px;
}
.select {
	position: relative;
	display: block;
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
	width: 80%;
	color: #8a8a8a;
	border: 2px solid !important;
	vertical-align: middle;
	text-align: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.select .placeholder {
	position: relative;
	display: block;
	background-color: #efefef;
	z-index: 1;
	padding: 1em;
	border-radius: 2px;
	cursor: pointer;
}
.select .placeholder:hover {
	background: #34383c;
}
.select .placeholder:after {
	position: absolute;
	right: 1em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: 'FontAwesome';
	content: '\f078';
	z-index: 10;
}
.select.is-open .placeholder:after {
	content: '\f077';
}
.select.is-open ul {
	display: block;
}
.select.select--white .placeholder {
	background: #fff;
	color: #999;
}
.select.select--white .placeholder:hover {
	background: #fafafa;
}
.select ul {
	display: none;
	position: absolute;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	top: 100%;
	max-height: 300px;
	left: 0;
	list-style: none;
	margin: 5px 0 0 0;
	padding: 0;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	overflow-y: scroll;
}
.select ul li {
	display: block;
	text-align: left;
	padding: 0.8em 1em 0.8em 1em;
	color: #999;
	cursor: pointer;
	font-size: 14px;
}
.select ul li:hover {
	background: #444;
	color: #fff;
}
@media only screen and (max-width:850px){
	.input-wrapper{
		width:100%;
	}
}
@media only screen and (max-width:750px){
	#contact-sec{
		padding: 50px;
	}
}
@media only screen and (max-width:645px){
	form.contact-form{
		padding: 0;
	}
	form.contact-form:before, form.contact-form:after{
		display: none;
	}
}
@media only screen and (max-width:600px){
	.input-wrapper{		
		flex-direction: column;		
		align-items: flex-start;
	}
	.form__field, .select,form.contact-form textarea{
		width:100%;
	}
}













/*Destination Section*/
.destination-container {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.destination {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 30%;
	margin: 10px auto;
	padding: 20px;
	cursor: pointer;
	background: #f5f5f5;
}
.destination img{
	position:relative;
	width:100%;
}
.destination h3{
	font-weight: 800;
	font-size: 1.7em;
	margin-top: 20px;
	text-transform: uppercase;
	font-family: 'Nexa Black';
	line-height: 1;
}
.destination h5{
	font-size: 1em;
	font-weight: 400;
}
.card {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

div#map-section {
    width: 34%;
    position: relative;
}

div#hotel-logo-sec {
    width: 65%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

div#hotel-logo-sec .hotel-thumb {
    width: 45%;
}

div#hotel-logo-sec span.hotel-title {
    font-size: 1.5em;
    width: 100%;
    display: contents;
}

div#hotel-logo-sec .hotel-details {
    width: 70%;
    flex-wrap: wrap;
}

.logo-thumb.active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #444;
    border-radius: 20px;
}

div#hotel-logo-sec img.hotels-logo {
    /* filter: grayscale(1); */
}
@media only screen and (max-width:1100px){
	.destination-container{
		flex-direction: column;
	}
	div#map-section, div#hotel-logo-sec{
		width:100%;
		display: flex;
	}
	div#hotel-logo-sec{
		flex-wrap: nowrap;
		overflow-y: hidden;
		overflow-x: scroll;
	}
	div#map-section svg{
		width:50%;
		margin: 30px auto 0;
	}
	.logo-thumb.active:before{
		width:100%;
		height: 5px;
	}
}
@media only screen and (max-width:1100px){
	div#map-section svg{
		width:80%;
	}
}

a.social-icon-link {
    position: relative;
    display: inline-block;
    z-index: 10000;
    cursor: pointer;
}
.reveal #sl-layer {
	stroke-width: 2;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: draw;
	animation-timing-function: cubic-bezier(0.6, 0.15, 0.36, 0.59);
	stroke-dasharray: 4800;
	stroke-dashoffset: 4800;
	animation-duration: 4s;
	animation-delay: .5s;
}
.st1{
	animation-duration: .7s;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	/*opacity: 0;
	transition: all 3s ease;*/
}
.st1:nth-child(9){
	animation-delay: 2.300s;
}
.st1:nth-child(7){
	animation-delay: 2.350s;
}
.st1:nth-child(3){
	animation-delay: 2.400s;
}
.st1:nth-child(4){
	animation-delay: 2.430s;
}
.st1:nth-child(5){
	animation-delay: 2.480s;
}
.st1:nth-child(6){
	animation-delay: 2.500s;
}
.st1:nth-child(10){
	animation-delay: 2.530s;
}
.st1:nth-child(8){
	animation-delay: 2.550s;
}
.st1:nth-child(11){
	animation-delay: 2.580s;
}
.st1:nth-child(12){
	animation-delay: 2.600s;
}
.st1:nth-child(13){
	animation-delay: 2.800s;
}
.reveal .st1{
	opacity: 1;
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
}
@-webkit-keyframes bounceInDown {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes bounceInDown {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0);
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
}
@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}



button#new-hotel {
    border: 0;
    background: #000;
    padding: 10px 30px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Quicksands';
}

div#home-stat {
    justify-content: space-around;
}







.db-table tr {
    border-bottom: 2px solid #c7c7c7;
}

.db-table tr:nth-child(even) {
    background: #f1f1ea;
}

span#modified-date {
    font-size: 12px;
    font-weight: 800;
    color: #adadad;
    margin-top: 10px;
    font-style: italic;
}

.wide h4 {
    margin-bottom: 10px;
    font-weight: 900;
    color: #555;
    font-size: 20px;
}

.wide table thead tr td {
    font-size: 13px;
}

tr.total-footer {
    border-top: 2px solid #444 !important;
    color: #ee5253;
    border-bottom: 2px double #444;
    font-size: 12px;
}

tr.total-footer td {
    font-size: 13px;
}

span.dates-report {
    font-size: 13px;
    font-weight: 700;
    color: #999;
}

.wide h3 {
    margin-bottom: 10px;
}

span.dates-report:nth-child(3) {
    margin-bottom: 20px;
}

thead tr {
    position: sticky;
    top: 0;
}

div#ta-s-box {
    position: absolute;
    width: 100%;
    background: #f1f1f1;
    top: 70px;
    padding: 20px;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    display: none;
}

ul#ta-type {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
}

ul#ta-type li {
    padding: 5px;
    cursor: pointer;
    transition: all .4s ease;
}

ul#ta-type li:hover {
    background: #444;
    color: #fff;
}

span#b-display-total {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 5px;
}

span.minor-details {
    font-size: 10px;
    color: #999;
}

div#remark-display-sec {
    margin-bottom: 30px;
}

span.remark-edit {
    font-size: 12px;
    margin-left: 15px;
    cursor: pointer;
    transition: all .3s ease;
}

span.remark-edit:hover {
    color: #999;
}

.remarks-input-sec.txt-area {
    padding: 0;
    width: 80%;
}

.remark-btn-cont {
    margin: 20px 0;
    position: relative;
    display: flex;
}

.remark-btn-cont button {
    margin-right: 15px;
}

div#p-remarks {
    grid-column: 1/3;
}

.pay-action-btn {
    position: relative;
    display: flex;
    width: 60px;
    justify-content: space-around;
}

.pay-action-btn span {
    cursor: pointer;
}

.table-outer-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}