[class^="i-"]:before,
[class*=" i-"]:before {
  font-family: "microsite" !important;
  vertical-align:middle !important;
  position:relative; top:-2px;
}

#vid-text .oc, #vid-text .presents, .btn-call {
	text-transform: uppercase
}
a.down, a:focus {
	text-decoration: none
}
body, html {
	font-size: 100%;
	height: 100%
}
body {
	font-family: 'Muli', sans-serif;
}
h1, h2, h3 {
	font-family: 'KoHo', sans-serif;
}

@media (max-width:576px) {
h2.display-4 {
	font-size: 1.8rem
}
}
p {
	color: #949494
}
a:focus {
	border: none;
	outline: 0
}
section {
	padding-top: 4rem;
	padding-bottom: 4rem
}
.bg-call {
	background-color: #dbba6b
}
.text-link {
	color: #dbba6b!important;
	font-weight: 600
}
.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex
}

h1.title, h3.title {
	font-size: 3rem;
	color: #00566f; font-weight:700;
}

.sub-title {font-size:1.3rem; color:#8da7b1; text-transform:uppercase; font-weight:500;}

.left-border {border-left: 0.5rem solid #dbba6b; padding-left: 0.8rem;}

#content p {
	font-size: 1.1rem;
	line-height: 30px
}

@media (max-width:768px) {
#content h1.title, #content h3.title {
	font-size: 1.8rem
}
#content .sub-title {
	font-size: 14px;
letter-spacing:.01rem;
	line-height: 22px
}
section {
	padding-top: 2rem;
	padding-bottom: 2rem
}
}
.heading-line {
	background-color: #cee5dd;
	width: 50px;
	height: 3px
}
#content, #overlay {
	background-color: #fff;
	position: relative
}
#hero-pic, #overlay, #vid-text {
	height: 100%;
	width: 100%
}
img.logo {
	max-width: 400px
}
a.down span {
	font-size: 22px;
	color: #fff
}
#content {
	z-index: 1;
	overflow: hidden;
	clear: both
}
#overlay {
	left: 0;
	top: 0;
	transition: background-color .3s ease
}
#hero-pic {
	display: block;
	background: url(../img/bg.jpg) center center no-repeat;
	background-size: cover
}
#vid-text {
	backface-visibility: hidden;
	left: 0;
	perspective: 1000;
	position: fixed
}
#vid-text .centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}
#vid-text h2 {
    font-size: 3.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
}
#vid-text .presents {
	font-size: 22px;
	color: #b8dbf1;
	letter-spacing: 2px
}
#vid-text .oc {
	color: #b7dbf1;
	letter-spacing: 1.5px;
	font-size: 16px;
	font-weight: 600
}
@media (max-width:576px) {
#vid-text {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.1)
}
#vid-text h2 {
	font-size: 29px
}
#vid-text .presents {
	font-size: 18px
}
img.logo {
	max-width: 150px
}
}
@media only screen and (max-width:768px) {
/*#vid-text .centered {
	text-align: center
}*/
#overlay {
	height: 100%
}
}
.btn-call {
	padding: 10px 20px;
	background-color: #012f40;
	color: #fff;
font-size:.9rem!important;
	letter-spacing: 2px;
	border-color: #fff;
	border-radius: 0;
	font-weight: 700
}
.btn-call:hover {
	background-color: #dbba6b;
	color: #fff
}
.centered .card {
	background-color: transparent
}
.centered .card p {
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 500
}
.options, .price {
	font-size: 16px;
	color: #fff;
	font-weight: 500
}
@media (min-width:768px) {
.centered .card {
	margin-top: 3rem!important
}
.centered .card p {
	font-size: 24px
}
.options, .price {
	font-size: 20px
}
.btn-call {
	font-size: 16px;
	text-transform: uppercase
}
}
.main-nav {
	position: relative;
	z-index: 9999
}
.main-nav-scrolled {
	position: fixed;
	width: 100%;
	top: 0
}
.fixed-bottom {
	color: #000
}
.fixed-bottom a, .fixed-bottom span {
	position: relative
}
.fixed-bottom a[class^=i-]:before, .fixed-bottom span[class^=i-]:before {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem
}
.fixed-bottom .number {
	color: #000;
	font-weight: 600
}
@media (max-width:992px) {
.fixed-bottom a, .fixed-bottom span {
	position: relative
}
.fixed-bottom a {
	color: #000
}
.fixed-bottom a:active, .fixed-bottom a:focus, .fixed-bottom a:hover {
	color: rgba(255,255,255,.8);
	text-decoration: none
}
.fixed-bottom a[class^=i-]:before, .fixed-bottom span[class^=i-]:before {
	left: -25px;
	font-size: 1.2rem
}
}

#about h3.title {font-size:3rem; color:#012f40; font-weight:700;}

@media (min-width:992px) {
.main-nav a.active {
	border-bottom: 2px solid #dbba6b
}
#about {
	padding-top: 8rem
}
#about .row {
	margin-bottom: 5rem
}
#about h3.title {font-size:4.2rem;}
}

#highlights h1 {color:#fff; line-height:60px; font-size:3.4rem; font-weight:700;}
#highlights .col-lg-8 {
	border: 2px dotted #8b7b67;
	background: rgba(193,211,115,1);
	background: -moz-linear-gradient(left, rgba(193,211,115,.3) 0, rgba(159,204,176,.3) 50%, rgba(124,197,237,.3) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0, rgba(193,211,115,.3)), color-stop(50%, rgba(159,204,176,.3)), color-stop(100%, rgba(124,197,237,.3)));
	background: -webkit-linear-gradient(left, rgba(193,211,115,.3) 0, rgba(159,204,176,.3) 50%, rgba(124,197,237,.3) 100%);
	background: -o-linear-gradient(left, rgba(193,211,115,.3) 0, rgba(159,204,176,.3) 50%, rgba(124,197,237,.3) 100%);
	background: -ms-linear-gradient(left, rgba(193,211,115,.3) 0, rgba(159,204,176,.3) 50%, rgba(124,197,237,.3) 100%);
	background: linear-gradient(to right, rgba(193,211,115,.3) 0, rgba(159,204,176,.3) 50%, rgba(124,197,237,.3) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1d373', endColorstr='#7cc5ed', GradientType=1 )
}
#highlights ul {
	padding-left: 30px;
	color: #434a54;
	line-height: 28px;
	list-style-position: inside; list-style:none;
}
#highlights ul li {position:relative; padding-bottom: 12px; font-size: 1.1rem; font-weight: 500; color: #cbd9de;}

#highlights ul li:before {position:absolute; content:'\32'; font-family: "microsite"; font-size:26px; left:-30px; color:#cfb869;}

@media (max-width:576px) {
	#highlights h4 {font-size: 1rem; letter-spacing: 1px;}
	#highlights h1 {line-height:60px; font-size:2.8rem;}
	
	}

#amenities .card-body, #gallery .card-body {
padding:.6rem .6rem 0
}
#amenities ul li {
	padding-bottom: 10px;
	color: #6d747a; font-weight:500;
}
#amenities .card-title, #gallery .card-title {
	font-size: 16px;
	font-weight: 600
}
#amenities h5 {
	font-size: 18px;
	padding-bottom: 1rem;
	padding-top: 1rem
}
#location .card-header {background: #f8f8f8;}

#contact .contact-form {
	background: #f7fdff;
	border-radius: 10px;
	border: 1px solid #eee
}
.contact-form .form-field {
	position: relative;
	margin: 32px 0
}
.contact-form .input-text {
	display: block;
	width: 100%;
	height: 36px;
	border-width: 0 0 2px;
	border-color: #dedede;
	font-size: 15px;
	line-height: 26px;
	font-weight: 400;
	background-color: transparent
}
.contact-form .input-text:focus {
	outline: 0;
	border-color: #dbba6b;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s
}
.contact-form .input-text.not-empty+.label, .contact-form .input-text:focus+.label {
	-webkit-transform: translateY(-24px);
	transform: translateY(-24px)
}
.contact-form .label {
	position: absolute;
	left: 20px;
	bottom: 14px;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: #888;
	cursor: text;
	transition: -webkit-transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
}
.map-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative
}
.map-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute
}
.more:after, .more[aria-expanded=false]:after {
	content: "More..."
}
.more[aria-expanded=true]:after {
	content: "Less"
}
#disclaimer {
	background-color: #f7f7f7;
	padding-bottom: 60px;
	margin-top: 80px
}
footer {
	margin-bottom: 56px
}
.bg-footer {
	background-color: #ececec
}
footer p {
font-size:.9rem!important;
	color: #5d5d5d
}
.line {
	font-size: 40px;
	color: #14f7c1;
	letter-spacing: 10px;
	position: absolute;
	opacity: 0
}
.placeholder {
	background-color: #f6f6f6;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden
}
.placeholder img {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 1s linear
}
.placeholder img.loaded {
	opacity: 1
}
.img-small {
	filter: blur(50px);
	transform: scale(1)
}
.less, .more {
	color: #000;
	cursor: pointer;
	font-size: 14px;
	text-align: center
}

.bd-callout-warning {
    border-left-color: #f0ad4e;
}
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.centered .left-border {padding-top: 1rem;}
#highlights .left-border {padding-top: 0;}
#amenities .left-border {padding-top: 0;}
#gallery .left-border {padding-top: 0.2rem;}
#contact .sub-title {font-size:1rem; font-weight:600;}
#contact .left-border {padding-top: 1.3rem;}
#location .left-border, #configurations .left-border {padding-top:0;}