/*
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 *****/
/*Subfont - Poppuns*/
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraLight.ttf');
	font-weight:100;
	font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Light.ttf');
	font-weight:200;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Thin.ttf');
    font-weight:300;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Regular.ttf');
    font-weight:400;
	font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Medium.ttf');
	font-weight:500;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-SemiBold.ttf');
    font-weight:600;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Bold.ttf');
    font-weight:700;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-ExtraBold.ttf');
    font-weight:800;
    font-style:normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/Poppins-Black.ttf');
    font-weight:900;
    font-style:normal;
}
/*Arial*/
@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial/Arial-Light.ttf');
    font-weight:200;
    font-style:normal;
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial/Arial-Regular.ttf');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial/Arial-Bold.ttf');
    font-weight:600;
    font-style:normal;
}
/*Nunitosans*/
@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Light.ttf');
    font-weight:200;
    font-style:normal;
}
@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Regular.ttf');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family: 'NunitoSans';
    src: url('../fonts/nunitosans/NunitoSans-Bold.ttf');
    font-weight:600;
    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, object::-webkit-scrollbar {
    width: 8px;
    height: 8px;
	border-radius: 10px;
} 
::-webkit-scrollbar-track, object::-webkit-scrollbar-track {
	background: #d7d7d7;
	border-radius: 10px;
} 
::-webkit-scrollbar-thumb, object::-webkit-scrollbar-thumb {
    background-color: #03045e;
	/* outline: 1px solid #fafafa; */
	border-radius: 10px;
}
::-moz-selection { 
    background: #03045e; 
	color:#fafafa;
}
::selection { 
    background: #03045e; 
	color:#fafafa;
}
button:focus, button:active, button:hover{
	outline: 0px;
	/* border:0px; */
}
a{
	text-decoration: none;
}
body{
	position: relative;
	font-family: 'Poppins';
	overflow-x: hidden;
	overflow-y: scroll;
	background: #fff;
}
.main-title {
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	margin-bottom: 1em;
	color: #2c2c2c;
	font-size: 3em;
	letter-spacing: 0.05em;
	text-shadow: 2px 2px 0px #d5d5d5, 5px 5px 0px rgb(0 0 0 / 20%);
}
.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: 114px;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
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;
}
#navigation-logo {
	position: absolute;
	height: 80%;
	top: 10px;
}
div#navigation-content-sec {
	flex: 12;
	position: relative;
	display: flex;
	flex-direction: column;
}
div#navigation-social-sec {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	font-size: 1.7em;
	color: #03045e;
	padding-top: 10px;
	z-index: 400;
}
.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;
	padding-top: 15px;
}
.lower-sec ul {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: flex-end;
	list-style: none;
align-items: center;}
#main-nav li a{
	color: #00b4d8;
	font-size: 15px;
	padding: 5px 20px;
	transition: all .5s ease;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 2;
	position: relative;
	}
.lower-sec a:hover, .lower-sec a:active, .lower-sec a:focus{color: #fff;/* background: #03045e; */}
@media only screen and (max-width:650px){
	nav#regular-navigation{
		font-size: 14px;
	}
}
@media only screen and (max-width:500px){
	
}

/***** 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: none;
	cursor: pointer;
	position: fixed;
	top: 10px;
	left: 15px;
	z-index: 35;
	padding: 5px;
	background: rgb(0 180 216);
	border-radius: 5px;
	z-index: 1101;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.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: #D8D8D8;
	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;
}
div#pre-footer-cover:after{
	right:0;
}
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: #03045e;
	display: flex;
	flex-direction: row;
	flex-direction: column;
	align-items: center;
	padding: 65px 10vw 0;
}
footer:before, footer:after{
	height: 15px;
	
	position: absolute;
	left:0;
}
footer:before{
	
	
}
footer:after{
	background: #bfbfbf;
	top: 15px;
}
footer a{
	color: antiquewhite;
	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 {
	background: rgb(36, 36, 36);
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: #fff;
	/* font: 300 16px/20px 'Open Sans', sans-serif; */
	padding: 10px 15px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border-radius: 0;
	margin-top: 20px;
	display: inline-block;
}
.btn--primary {
	background: #4834d4;
	color: #fff;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
	border-radius: 23px;
	padding: 10px 36px;
	text-transform: uppercase;
	font-size: .9em;
	font-weight: 800;
	position: relative;
	font-size: 13px;
}
.btn--primary:hover {
	background: #2f2f2f;
}
.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;
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
	margin-top: 20px;
}
.footer-bottom:before{
	position:absolute;
	width:100%;
	height: 1px;
	left:0;
	top:-10px;
	background: #f4efdf;}
.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: calc(100vw / 3);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	
	
	
	
background-image: url(../images/banner.jpg);}
#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 #00b4d8 !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;
	margin-top: 10px;
}
.select .placeholder {
	position: relative;
	display: block;
	background-color: #ffffff;
	z-index: 1;
	padding: 10px;
	border-radius: 2px;
	cursor: pointer;
}
.select .placeholder:hover {
	background: #edeaff;
}
.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: 8px 10px;
	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: 100;
    cursor: pointer;
    margin-right: 20px;
}
.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#side-drawer-inner {
    position: absolute;
    padding: 20px;
    width: 30%;
    height: 100%;
    background: #fff;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
}

div#side-drawer-inner {}

div#side-drawer-back {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.inner-pw.wide {
    width: 75%;
}

.input-contacts {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 95%;
    padding: 30px 10px;
}

div#contact-bulk-show {
    position: relative;
    width: 100%;
    padding: 30px 20px 0;
    height: calc(100% - 180px);
}

button#contact-add {
}

.contact-display {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr 1fr;
    align-content: center;
    justify-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #444;
    padding: 8px;
}

.b_search {
    width: 100%;
    border: 2px solid #666;
    padding: 10px;
    border-radius: 30px;
    font-family: 'Quicksands';
    font-size: 14px;
    font-weight: 800;
    color: #444;
}

.contact-show-box {
    display: grid;
    grid-template-columns: 8fr 2fr 1fr;
}

.cont-detail {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-show-box {
    margin: 10px 0;
}

.cont-detail .box-inner {
    width: 90%;
    display: flex;
    flex-direction: inherit;
}

.media-btn {
    padding: 10px;
    border: 2px solid #4834d4;
    display: block;
    color: #4834d4;
    margin-bottom: 5px;
    border-radius: 20px;
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
}

div#details-sec {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

img#detail-img {
}

div#signin-outerlayer h5 {
    margin: 0;
}

div#user-info-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div#profile-pic {
    position: relative;
    display: flex;
    width: 80px;
    height: 80px;
    border: 5px solid #fff;
    border-radius: 50%;
    margin-bottom: 10px;
    background-position: center;
    background-size: cover;
}

div#profile-info {
    margin-bottom: 10px;
    text-align: center;
}

div#profile-info h5 {
    margin: 0;
}

div#right-coner-details {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div#logo-bar {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.main-title1 {
    font-weight: 900;
    font-size: 4em;
    text-transform: uppercase;
    color: #4834d4;
}

.inner-button {
    background: #fff !important;
    color: #4834d4;
    border: 3px dashed;
    border-radius: 20px;
    font-weight: 800;
    padding: 7px 20px;
    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);
}

.inner-button:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.folder::before {
    top: -24px;
    left: 0;
    width: 96px;
    height: 24px;
    border-radius: 14px 0 0;
    content: '';
    display: block;
    position: absolute;
    background: #4834d4;
}
.folder::after{
	top: -48px;
	left: 72px;
	border: 24px solid transparent;
	content: '';
	display: block;
	position: absolute;
	border-bottom-color: #4834d4;
}
.folder {
    width: 23%;
    margin: 30px 1% 20px;
    border-radius: 0 14px 14px;
    /* border: 2px solid; */
    position:relative;
    background: #e9eefb;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

span.cmp-id {
    color: #8476e3 !important;
    font-size: 13px !important;
}

.cm-hover span {
    font-size: 15px !important;
    color: #4834d4 !important;
}

.container-cover {
    margin: 30px 0 30px 10px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    border-radius: 2em;
    padding: 0 0 0px;
    overflow: hidden;
}

.container-cover h3 {
    font-size: 36px;
    /* margin-bottom: 25px; */
    color: #fff;
}

div#campaign-coposer {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 4fr;
    min-height: 100%;
    /* height: 100%; */
}

div#campaign-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    align-items: center;
    /* border: 2px solid; */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    height: 95%;
    top: 3%;
    overflow-y: scroll;
}

div#campaign-preview h2 {
    text-transform: uppercase;
    color: #4834d4;
    font-size: 35px;
}

.step-body {
    width: 100%;
    /* padding-left: 40px; */
}

div#preview-content {
    width: 100%;
    margin-top: 20px;
    /* border: 5px dashed #444; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

span#so-no {
    margin-right: 11px;
}

div#pre-body {
    margin-top: 20px;
    position: relative;
    width: 100%;
}

div#mail-body {
    margin-top: 10px;
    font-size: 13px;
    width: 100%;
}

.pre-span {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    margin-bottom: 5px;
}

span#pre-title {
    margin-top: 15px;
    font-size: 18px;
}

div#pre-body span {
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
}

div#mail-body img {
    position: relative;
    max-width: 100%;
    height: auto;
}

div#mail-body ul {
    margin-left: 30px;
}

div#mail-body ol {
    margin-left: 30px;
}

.atc-thumb i {
    font-size: 2.7em;
    position: relative;
    margin-bottom: 5px;
}

span.file_name {
    font-size: 13px;
    font-weight: 800;
}

.step-cmp:nth-last-child(1) {
    border-bottom: 0px;
}

div#mail-body blockquote {
    margin: 15px 0 15px 40px;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
}

div#mail-body blockquote:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    background: #333;
}

.content-upper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.content-right {
    position: relative;
    width: 100%;
    display: grid;
}

.content-right img {
    position: relative;
    width: 100%;
}

p.content {
    margin: 20px 0 40px;
    position: relative;
    padding: 0 30% 0 0;
    color: #aaa;
    font-weight: 500;
    line-height: 1.6;
    font-size: 14px;
    font-style: italic;
}

.cl-inner-cont {}

.cl-inner-cont {
    position: relative;
    padding-left: 3%;
}

.content-title-bar {
    position: relative;
    width: 100%;
    background: #4834d4;
    display: grid;
    grid-template-columns: 7fr 3fr;
    padding: 15px 40px;
}

.search-area {
    position: relative;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    width: 100%;
}

.search-input {
    position: relative;
    width: 100%;
    background: transparent;
    border: 0px;
    border-bottom: 2px solid #fff;
    padding: 5px 10px 5px 40px;
}


.search-area i {
    position: absolute;
    left: 10px;
    color: #fff;
    margin-bottom: 5px;
}

.search-input::placeholder {
    color:#aaa;
    font-size:13px;
    font-style:italic;
}

.container-still .content-title-bar {
    background: transparent;
}

.container-still .search-area {
    grid-column: 2 / 3;
}

.container-still .search-area i {
    color: #444;
}

.container-still .search-area .search-input {
    border-color: #444;
}

.container-still {
    position: relative;
    margin: 5vh 0;
}

.container-still div#pagination-container {
    margin: 30px 0;
}

div#profile-info h4 {
    color: #fff;
    font-size: 20px;
}

span.center-text {
    text-align: center;
}

div#cat-detail-head span {
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 900;
}

.group-name-cont {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 7fr;
    align-items: center;
    justify-items: center;
}

.group-details {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.user-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: #4834d4;
    border-radius: 50%;
}

.user-icon i {
    color: #fff;
    font-size: 2em;
}

.group-details h5 {
    font-size: 22px;
    margin-bottom: 5px;
    color: #444;
    font-weight: 800;
}

.group-details span {
    font-size: 11px;
    color: #888;
}

.center-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

span.num-stat {
    font-size: 25px;
    font-weight: 300;
}

.cat-action-sec span:hover {
    color: #4834d4;
}






div#chart-area {
    width: 60%;
    position: relative;
    align-self: center;
    justify-self: center;
}

.file-info-part {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 8fr 2fr;
    padding: 15px;
    margin: 5px 0;
    border: 3px solid #4834d4;
    border-radius: 10px;
    background: #f1f1f1;
}

div#files-breakdown {
    position: relative;
    width: 80%;
    margin: 20px 0 30px;
}

.file-info-part i {
    color: #4834d4;
    align-self: center;
    justify-self: center;
    font-size: 1.8em;
}

span.file-title {
    position: relative;
    align-self: center;
    margin-left: 10px;
    color: #4834d4;
    font-size: 20px;
    font-weight: 700;
}

.storage-info {
    position: relative;
    align-self: center;
    color: #4834d4;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

span.st-num {
    font-size: 21px;
    margin-right: 5px;
    line-height: 1;
}

span.st-met {
    font-size: 12px;
    font-weight: 900;
}

.media-layout-list {
    display: grid;
    grid-template-columns: 8fr 2fr 1fr;
    align-items: center;
    padding: 20px 0;
    justify-items: center;
    border-bottom: 2px solid #e3e3e3;
}

span.self-left {
    align-self: flex-start;
    justify-self: flex-start;
    padding: 0 12%;
}

.media-layout-list .group-name-cont i {
    align-self: center;
    justify-self: center;
    font-size: 2.5em;
    color: #444;
}

.p-info-sec {
    margin: 20px;
}

h4.p-info-title {
    text-transform: uppercase;
    color: #4834d4;
    margin-bottom: 10px;
}

.prof-input-cont {
    position: relative;
    display: flex;
    border: 2px solid;
    width: 40%;
    align-items: center;
}

.prof-input-cont .hotel-input-sec {
    position: relative;
}

.prof-edit-btn-cont {
    position: relative;
    width: 50px;
    display: flex;
    flex-direction: column;
}

.prof-edit-btn-cont span {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

span.prof-edit {
    background: #4834d4;
    color: #fff;
}

span.prof-cancel {
    background: red;
    color: #fff;
}

.prof-input-sec {
    position: relative;
    width: calc(100% - 50px);
}

div#attch-cover {
    position: relative;
    width: 100%;
}

div#composer-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 95%;
    width: 90%;
    /* padding: 20px; */
    /* border: 2px solid #000; */
    align-self: center;
    justify-self: center;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

div#cmp-inner-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
}

.cmp-title-header {
    position: relative;
    width: 100%;
    padding: 20px;
    margin-bottom: 10px;
    background: #4834d4;
    color: #fff;
    text-align: center;
}

div#attc-mgt {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

div#attc-type {
    width: 100%;
    display: flex;
    flex-direction: column;
}

div#atc-sel-types {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-content: center;
    justify-content: center;
    margin: 20px 0;
}

div#upload-select {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

div#attc-slec-upld {
    position: relative;
    margin: 20px 0;
}

.media-layer h3 {
    font-size: 18px !important;
    background: #4834d4;
    width: 100%;
    text-align: center;
    padding: 3px;
    color: #fff !important;
    font-weight: 300 !important;
}

.step-inner-input .hotel-input-sec {margin-bottom: 0 !important;}

div#subject-input-cont .hotel-input-sec {
    width: 100%;
}

.upload-butoon-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.upload-butoon-sec span {
    font-size: 12px;
    font-weight: 900;
    color: #4834d4;
}

.cmp-title-header h2 {
    text-transform: uppercase;
    font-size: 2.2em;
}

section#verticle-drawer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 70%);
    z-index: 50;
    left: 0;
    top: -100%;
    display: grid;
    place-items: center;
    transition: all .4s ease;
}

div#verticle-drawer-outer {
    width: 70%;
    height: 70%;
    background: white;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    display: flex;
    flex-direction: column;
}

div#vd-header {
    background: #4834d4;
    color: #fff;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
}

div#verticle-drawer-inner {
    display: grid;
    grid-template-columns: 7fr 3fr;
    position: relative;
    max-height: 90%;
    /* height: 100%; */
}

#media-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

div#media-search-bar {
    background: white;
    padding: 13px 30px;
    box-shadow: 0 2px 11px rgb(0 0 0 / 16%), 0 2px 14px rgb(0 0 0 / 15%);
}

div#capacity-calc {
    background: #f9f9f9;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    width: 100%;
    display: grid;
    grid-template-rows: 9fr 2fr;
    place-items: center;
}

div#media-container-inner {
    padding: 30px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div#mc-scrollable {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 0 10px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: hidden;
    align-items: center;
    justify-items: center;
}

div#vd-header h4 {
    font-size: 2em;
}

#media-search-bar .search-input {
    border-color: #444;
}

div#media-search-bar .search-area i {
    color: #444;
}

.media-image-sec {
    width: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.media-image-sec img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.media-image-sec:before {
    display: block;
    content: '';
    padding-bottom: 100%;
}

.media-img-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 5px;
    border: 2px solid #ddd;
    cursor: pointer;
    overflow: hidden;
}

section#verticle-drawer.active {
    top: 0;
}

.media-img.selected {
    border: 5px solid #4834d4;
}

.media-img.selected:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #4834d4;
    z-index: 10;
    left: 0;
    top: 0;
}

.media-img-desc {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #ddd;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

span.img-name-d {
    font-size: 13px;
    font-weight: 700;
}

span.img-size-d {
    font-weight: 700;
    font-size: 11px;
    color: #888;
}

.selected .media-img-desc {
    color: #fff;
    background: #4834d4;
}

.selected .media-img-desc span.img-size-d {
    color: #f1f1f1;
}

.img-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
}

.img-preview img {
    position: relative;
    max-width: 100%;
    max-height: 300px;
}

div#calc-area {
    position: relative;
    width: 100%;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.attc-img-sec {
    grid-template-columns: 1fr !important;
}

.atc-img-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

div#pre-img {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

div#pre-img img {
    position: relative;
    max-width: 100%;
}

.atc-img-thumb img {
    max-width: 300px;
}

input#img-upload {
    display: none;
}

.media-attc.active {
    border: 3px solid red;
}

.files-preview {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #4834d4;
}

.files-preview i {
    font-size: 7em;
}

.files-preview .img-name {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 800;
}

.files-preview .img-size {
    line-height: 1;
    font-size: 13px;
    font-weight: 800;
    color: #8274df;
}

div#pre-attc {
    margin-top: 20px;
    width: 100%;
    position: relative;
}

div#attc-inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

section#preview-drawer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    left: 0;
    top: -200%;
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    transition: all .3s ease;
}

section#preview-drawer.active {
    top: 0;
}

div#preview-body {
    width: 70%;
    height: 100%;
    padding: 20px;
    border: 2px solid;
    overflow-y: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: center;
}

div#pd-sec-left {
    position: relative;
    width: 100%;
    height: 100vh;
    display: grid;
    flex-direction: column;
    grid-template-rows: 2fr 7fr 2fr;
    justify-content: center;
    grid-template-columns: 1fr;
}

div#signature-options .visibility-check {
    position: relative;
    right: 0;
    top: 0;
    margin-top: 30px;
    flex-direction: column-reverse;
}

input#logo-upload {
    display: none;
}

.profile-info-sec-l {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

img#company-logo {
    position: relative;
    width: 200px;
    margin: 10px 0 30px;
}

div#pd-sec-left h3 {
    place-self: center;
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
}

div#signature-div img {
    width: 100px;
}

div#signature-div td {
    padding: 0;
}

div#signature-div {
    margin-top: 30px;
}

img.social-ico {
    width: 30px !important;
}

td#social-icon-sec {
    padding-top: 15px !important;
}

div#inner-preview img {
    position: relative;
    width: 100%;
}
.w-0 {
    width: 0;
}
.f-w-0 {
    filter: url(#w-0);
}
.stop1 {
    stop-color: rgb(168 85 247);
}
.stop2 {
    stop-color: rgb(37 99 235);
}
.path-class {
    animation: key01 8s infinite linear;
    stroke-dasharray: 180 800;
    fill: none;
    stroke: url(#gradient);
    stroke-width: 23;
    stroke-linecap: round;
}
.cricle-class {
    animation: key01 4s infinite linear;
    stroke-dasharray: 26 54;
    fill: none;
    stroke: url(#gradient);
    stroke-width: 23;
    stroke-linecap: round;
}
.svg-class-1 {
    filter: blur(5px);
    opacity: 0.3;
    position: absolute;
    transform: translate(3px, 3px);
}
@keyframes key01 {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -403px;
    }
}

div#inner-cont-loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
}
.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
}
.success-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
    content: "";
    height: 100px;
    position: absolute;
    background: #FFFFFF;
    transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
    height: 5px;
    background-color: #4834d4;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}
.success-checkmark .check-icon .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}
.success-checkmark .check-icon .icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgb(72 52 212 / 50%);
}
.success-checkmark .check-icon .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #FFFFFF;
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
    }
}
@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}
@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

div#cmp-loader {
    position: relative;
    display: flex;
}

div#bulk-header {
    color: #4834d4;
    align-items: center;
    justify-items: center;
    padding: 10px 5px;
    border-bottom: 5px solid #9999;
    font-weight: 700;
}

div#bulk-header.contact-display {font-weight: 900;text-transform: uppercase;}

input#cmp-search {
    color: #fff;
}

section#preview-drawer.manual-contact-add {
    grid-template-columns: 3fr 7fr;
}

div#contact-display-sec {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

div#contact-add-header {
    width: 100%;
    padding: 20px;
    text-align: center;
    background: #7566dd;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 30px;
}

div#manual-add-header {
    width: 100%;
    position: relative;
    background: #4834d4;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 2em;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#manual-add-header h3 {
    font-weight: 300;
    text-transform: uppercase;
}

div#bulk-add-btn {
    height: 100px;
    display: flex;
    justify-content: flex-end;
}

div#bulk-add-btn button {
    margin-right: 60px;
}

div#result-preview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    background: rgb(255 255 255 / 80%);
    z-index: 80;
    display: grid;
    place-items: center;
    transition: all .4s ease;
}

div#result-preview-inner {
    width: 50vw;
    height: 60vh;
    background: white;
    box-shadow: 2px 0px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    position: relative;
    display: grid;
    grid-template-rows: 3fr 5fr 1fr;
    padding: 20px;
    overflow: hidden;
    border: 7px solid #4834d4;
}

div#repre-button-area {
    position: relative;
    display: grid;
    place-items: center;
}

div#repre-title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

label#re-number {
    font-size: 2.9em;
    line-height: 1;
    color: #7d6deb;
}

span.normal-res {
    font-size: 12px;
    color: #adadad;
    font-weight: 800;
}

div#repre-title-area h4 {
    text-transform: uppercase;
    font-size: 1.8em;
    line-height: 1;
    font-weight: 900;
    color: #4834d4;
}

div#repre-title-area span.normal-res {
    margin-top: 5px;
}

div#repre-slider-area {
    position: relative;
    width: 60%;
    height: 100%;
    display: block;
    overflow: hidden;
    place-self: center;
}

.rslt-cont {
    /* width: 200px !important; */
    height: 200px;
    /* background: red; */
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div#inner-slider-m {
    width: 500px;
    height: 500px;
    display: block;
    align-items: center;
}

div#repre-slider-area .slick-arrow:before {
    color: #4834d4;
}

span.rslt-num {
    font-size: 5em;
    line-height: 1;
    font-weight: 900;
}

.rslt-text {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

span.mortal {
    font-size: 11px;
    font-weight: 700;
    color: #888;
}

span.immortal {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: 700;
    color: #4834d4;
}

.btn--secondary {
    background: #fff;
    /* padding: 5px 18px; */
    color: #00b4d8;
    border: 2px solid #00b4d8;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

div#results-show {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 85;
    top: -100%;
    left: 0;
    transition: all .4s ease;
    display: grid;
    grid-template-rows: 1fr 5fr 1fr;
}

div#results-show.active {
    top: 0;
}

div#results-show h3 {
    place-self: center;
    font-weight: 900;
    font-size: 2em;
    text-transform: uppercase;
    color: #4834d4;
}

button#reshow-close {
    place-self: center;
}

div#grid-containers {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 20px;
}

div#grid-table-outer {
    position: relative;
    width: 100%;
    overflow-y: scroll;
    height: 100%;
}

.contact-group {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 5fr 5fr;
    padding: 5px 3px;
    font-size: 12px;
    font-weight: 800;
    color: #888;
    place-items: center;
    border-bottom: 2px solid #eee;
}

div#view-contact-header {
    text-transform: uppercase;
    color: #4834d4;
    border-bottom: 5px solid #eee;
    padding: 8px 3px;
    font-weight: 900;
}

div#result-preview.active {
    top: 0;
}

.c-details-container {
    display: flex;
    flex-direction: column;
}

.c-details-container h5 {
    font-size: 2.5em;
    font-weight: 900;
    text-transform: uppercase;
    color: #4834d4;
    margin-top: 20px;
}

span.title-body {}

.c-details-container h6 {
    font-size: 19px;
    font-style: italic;
    color: #9384fb;
    margin-bottom: 30px;
}

.btn-container {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
}

div#result-upper {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 50px;
    align-items: center;
    justify-content: center;
}

div#result-lower {
    position: relative;
    width: 100%;
    padding: 50px;
}

div#rslt-upper {
    position: relative;
    width: 100%;
}

.stat-chunk {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 1fr;
    font-size: 13px;
    font-weight: 800;
    color: #888;
    padding: 5px;
    border-bottom: 2px solid #eee;
}

div#rslt-pagination {
    position: relative;
    display: grid;
    margin: 20px 0;
    place-items: center;
    padding: 20px;
}

div#result-stat-header {
    text-transform: uppercase;
    place-items: center;
    color: #4834d4;
    border-bottom: 5px solid #eee;
}

span.status-rslt {
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 900;
    color: #4834d4;
}

span.result-num-x {
    font-size: 2em;
    color: #8979f5;
}

div#result-upper span:nth-child(1) {
    font-size: 18px;
    color: #888;
}





#main-nav li {
    margin-right: 10px;
    position: relative;
    }

a.home-experience:hover .he-desc {
    padding: 20px 0;
    opacity: .95;
}

.fp-sec {
    width: 100%;
margin-bottom: 50px;}

a.package {
    margin: 20px 0;
    position: relative;
    width: 100%;
    display: flex;
}

div#wos {
    position: relative;
    margin: 50px 0;
}

.wos-ic-sec {
    position: relative;
    margin: 30px 0;
    display: flex;
}

li.hoverable {
    position: relative;
}

section.sl-a {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.sl-a-cont h3 {
    margin-bottom: 10px;
}

.sl-a-inner.hotel-inner {
    grid-template-columns: 3fr 8fr;
    margin-bottom: 25px;
}

.sl-a-content h3 {
    margin-bottom: 10px;
}

div#m-inner {
    position: relative;
    width: 90%;
    height: 90%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

img#m-logo {
    width: 200px;
    margin-bottom: 15px;
}

img.pkg-img {
    width: 80%;
}

.article-img {position: relative;height: auto;width: 100%;overflow: hidden;background-position: center;background-size: cover;}

section#home-videos:before {content: '';
    position: absolute;
    z-index: 100;
    border-left: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-bottom: 15vh solid #00b4d8;
    left: 0;
    bottom: 100%;}

div#video-reel {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr;}

.tnp-field.tnp-field-email {position: relative;display: grid;grid-template-columns: 7fr 3fr;align-items: center;justify-items: self-start;}

.btn--bold {
    display: block;
    padding: 0.65rem 0.85rem;
    /* border-radius: 10rem; */
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    font-weight: 500;
    }

.about-content {padding-left: 30px;position: relative;color: #00b4d8;text-align: justify;}

div#abt-footer h4 {font-size: 2em;}

div#abt-vision p {margin-top: 20px;font-size: 14px;text-align: justify;}

div#video-inner-container {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;}

.comment-inner {
    position: relative;
    display: flex;
    flex-direction: column;
}