/** Banner Main **/
h6.banner-small {font-family: CommutersSans,"sans-serif" !important; text-transform: uppercase; font-weight: 300; font-size: .75em; letter-spacing: .2em;  color: #fff;}
h1.banner-main {font-family: Neutra,Arial,"sans-serif" !important; text-transform: uppercase; font-weight: 400; font-size: 3rem; line-height: 4.2rem;
 letter-spacing: .2em !important;}
p.banner-text {font-size:1em; font-family: CommutersSans,'sans-serif' !important;text-transform: uppercase; letter-spacing:2px!important; font-weight:300!important}
div.mid-banner-title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400; font-size: 1.2rem; color: #fff; letter-spacing: 1px; overflow: hidden !important;}
p.mid-banner {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important; font-size: .8em; color:#fff}


/** General **/
.spot {color:#0084B4}
hr.underline {width: 40%; margin-top: 10px; margin-bottom: 0; border-top: 1px solid rgba(0,0,0,.5);}
img.contain {width:100%}
.card-body {padding:0px}
a:hover {text-decoration: underline}
a:visited {color:#222}
a.back-top {position: fixed; bottom: 5px; right: 5px; z-index: 99; border: none; outline: none; color: #e6e6e6; cursor: pointer;padding: 10px 15px; border-radius: 0px; font-size: 3rem;}
a.back-top:hover {color: #222;}
a.back-top:visited {color: #e6e6e6;}
.default-search .form-control {border-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-color: #ebebeb;
    border-right-color: rgb(235, 235, 235); border-right: 0;}
.default-search .input-group-append {border-radius: 0px; border: 1px solid #222; border-left-color: rgb(235, 235, 235); border-left-style: solid;
    border-left-width: 1px; border-left: 0;}
.form-control.text-1 {border:1px solid #222}
/** Button Styles **/
.btn { border-radius: 0px; text-transform: uppercase; font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important;}
.btn-light.general {font-weight: 300px !important; background-color: #fff; color: #222; padding: 8px 16px;  border: 1px solid rgba(0,0,0,.500);}
.btn-light.general:hover, .btn-dark.general:active {background-color:#222; color:#fff!important;padding:8px 16px; border: 1px solid#222;}
.btn-dark.general {background-color: #212121; border-color: #212121 #212121 #080808;  color: #FFFFFF;}
.btn-dark.general:hover, .btn-dark.general:active {background-color:#fff; color:#222!important;padding:8px 16px; border: 1px solid#222;}
.btn-info {background-color: #0084B4; border: 1px solid #0084B4; color:#fff}
/** Newsletter **/
div.news-register {background-color:#f9f9f9; border-top: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);}
div.news-reg-head { font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400; font-size: 1.2rem;   color: #222;
  letter-spacing: 1px;   overflow: hidden !important;}

/** Accordion **/
.card.acc_htl {border-left:0px solid; border-right:0px solid; border-top:0px solid; border-bottom: 1px solid #222; margin-top:0px}
.card-header.acc_htl {padding:0}
.card-header.acc.sm {padding:0!important}
.collapsible-link::before {content: '';  width: 14px; height: 2px; background: #333; position: absolute; top: calc(50% - 1px); right: 1rem;
  display: block; transition: all 0.3s;}
.collapsible-link::after { content: '';  width: 2px; height: 14px; background: #333; position: absolute; top: calc(50% - 7px); right: calc(1rem + 6px);
  display: block; transition: all 0.3s;}
.collapsible-link[aria-expanded='true']::after {transform: rotate(90deg) translateX(-1px);}
.collapsible-link[aria-expanded='true']::before {transform: rotate(180deg);}
.card.acc {border-right:0px!important; border-left:0px; border-right: 1px solid #fff;}
.card.acc.drop {border: 1px solid #222!important;}
.card.acc.drop.page {border: 1px solid #222!important;font-weight:300!important}
.card-head-body.drop {margin-left:15px;margin-right:15px}
.card-head-body.drop.page {margin-left:0px;margin-right:0px}
.card-header.acc {padding-left:0px;padding-right:0px}
h6.card-head { font-size: .8rem;}


/** Hotel Page **/
h2.hotel-titles {font-family: Neutra,Arial,"sans-serif";  text-transform: uppercase; font-size: 1rem !important; color: #0084B4;}

/** MOBILE **/
body, p {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none; font-size: 1.1em; letter-spacing: 1px;}
.news-text p {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important; font-size: .8em;}
/** header area **/
h3.logo {font-family: Neutra,Arial,sans-serif; text-transform:uppercase; font-weight:400; font-size:1.1em; letter-spacing:0px;  margin-bottom:2px}
h3.logo.text-center > a {color:#222;letter-spacing:1px}
h3.logo.text-center > a > span.hi{color:#0084B4!important}
p.by {font-family : CreatoDisplay, Helvetica, Arial,sans-serif; font-weight:400; font-size:.6em; margin-bottom:0px; text-transform:uppercase}
.top-text {font-size: .85em; font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; text-transform: uppercase; font-weight: 300;}
img.atol-protected {margin-right: 8px; height: 32px;}
.head-trinkets p {font-size:.9em}
h2.banner-main.mob {font-family: Neutra,Arial,"sans-serif" !important; text-transform:uppercase; font-weight:400; font-size:1.8rem;  line-height:2.2rem; letter-spacing: .2em !important;}
 h6.banner-small {font-family: Neutra,Arial,sans-serif; text-transform:uppercase; font-weight:300; font-size:.75em; letter-spacing:.2em; color:#fff}
h6.banner-small.upper {font-family: Neutra,Arial,sans-serif; text-transform:uppercase; font-weight:300; font-size:.65em; letter-spacing:.2em; color:#fff}
.mid-banner-title {text-align: center}
/** index page **/
.intro-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.2rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.intro-block.title > a {color:#222}
.intro-block {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;font-size: .8em;padding:0 25px 0 25px}

/** hotel listings **/
.htl-listing {margin-right: 0px; margin-left: 0px;}
.hotel-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.1rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.hotel-block.title > a {color:#222}
.hotel-sub-title  {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: uppercase; font-weight: 400; font-size: .8em; letter-spacing: 2px; color: #222;}
.star-rate {height:16px}
.htl-teaser {background-color: #f9f9f9 !important; border-top: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125); color: #000; font-size: .75em; font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;}
span.hotel-type {font-weight:400; font-size:1.15em}
.link-box {font-family: CreatoDisplay, Helvetica, Arial,sans-serif;font-weight: 300;font-size: .9em;padding-left:15px; padding-right:15px;padding-top:15px}
.link-box > a {font-weight:400; color:#222}
a.openPopup.left {padding-left:15px; font-weight:400; color:#222}
a.openPopup.right {padding-right:15px; font-weight:400; color:#222}
a:hover {text-decoration: underline;}
a:visited {font-weight:400; color:#222}
a.openPopup.mob {font-size:.9em!important}
/** Search Boxes **/
label.control-label.search-front { font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; text-transform: uppercase !important;
  font-size: .9rem !important;  font-weight: 400; color: #222;}
.control-label.search-front.tablet.room {color:#0084B4!important}
.form-control, .form-control.new-srch {font-size:1em!important; color:#000}

/** footer **/
h5.foot-head.white {font-family: CommutersSans,"sans-serif" !important; text-transform: uppercase; font-weight: 300;  font-size: .8em;   letter-spacing: .2em; color: #fff;}
p.foot-body {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300; font-size: .75em;}
ul.list-three {list-style-type: none; font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300; font-size: .8em; margin: 0;
  padding: 0;}
ul.list-three > li {width: 33%; float: left; text-align: center;}
ul.list-three > li a {color:#fff}
.foot-links.white { font-size: .8em; color: #fff; letter-spacing: 2px;}
.foot-links.white > a {color: #fff;}

/** Hotel Page **/
.about-text p { font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important; font-size: .8em;}
h6.options {font-family: Neutra,Arial,"sans-serif"; text-transform: uppercase; line-height: 1.6em;}
ul.features, ul.amenities, ul.sale {list-style-type: square !important;  font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none;
  font-weight: 300;  font-size: 0.8em; letter-spacing: 1px; padding-left: 15px !important;}
ul.amenities > li, ul.rooms > li, ul.features > li, ul.sale > li{line-height: 1.5em;}
ul.amenities > li {margin-bottom:15px}
table.weather-table {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none; font-weight: 300;   font-size: .8em !important;}
td.weather-date, th.weather-date {padding:5px 15px 5px 15px}
h6.options.room-name {font-family: Neutra,Arial,"sans-serif"; text-transform: uppercase; line-height: 1.6em; font-size:1.1em; padding-left:15px}
ul.rooms {list-style-type: none;  font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none;
  font-weight: 300;  font-size: 0.8em; letter-spacing: 1px; padding-left: 15px !important;}
ul.rooms > li {width:49%; float:left; font-weight:400}

.hotel-list-name > a { color: #222;font-family: Neutra,Arial,sans-serif;text-transform: none;font-weight: 400;font-size: 1.4rem;
letter-spacing: 1px;}
.srch-price {text-align:left; margin-left:15px}
}


@media (min-width: 576px) { 
div.container {  max-width: 992px!important;}
body, p {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none; font-size: 1.25em; letter-spacing: 1px;}
/** header area **/
h3.logo {font-family: Neutra,Arial,sans-serif; text-transform:uppercase; font-weight:400; font-size:1.0em; letter-spacing:0px;  margin-bottom:2px}
h3.logo.text-center > a {color:#222;letter-spacing:1px}
h3.logo.text-center > a > span.hi{color:#0084B4!important}
p.by {font-family : CreatoDisplay, Helvetica, Arial,sans-serif; font-weight:300; font-size:.6em; margin-bottom:0px; text-transform:uppercase}
.top-text {font-size: .85em; font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; text-transform: uppercase; font-weight: 300;}
.head-trinkets {font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; font-size: .8em;}
div.head-trinkets > a {color:#000;text-decoration:none}
p.head-trinkets > a {color:#000;text-decoration:none}
.head-trinkets > p > a {color:#000;text-decoration:none}
.bi.bi-telephone-fill { margin-right: 8px}
img.atol-protected {margin-right: 8px; height: 32px;}
/** index page **/
.intro-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.3rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.intro-block.title > a {color:#222}
.intro-block {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;font-size: .8em;}

.mid-banner-title {text-align: left}

/** hotel listings **/
.htl-listing {margin-right: 0px; margin-left: 0px;}
.hotel-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.1rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.hotel-block.title > a {color:#222}
.hotel-sub-title  {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: uppercase; font-weight: 400; font-size: .75em; letter-spacing: 2px; color: #222;}
.star-rate {height:16px}
.htl-teaser {background-color: #f9f9f9 !important; border-top: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125); color: #000; font-size: .75em; font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;}
span.hotel-type {font-weight:400; font-size:1.1em}
.link-box {font-family: CreatoDisplay, Helvetica, Arial,sans-serif;font-weight: 300;font-size: .9em;padding-left:15px; padding-right:15px;padding-top:15px}
.link-box > a {font-weight:400; color:#222}
a.openPopup.left {padding-left:15px; font-weight:400; color:#222}
a.openPopup.right {padding-right:15px; font-weight:400; color:#222}
a:hover {text-decoration: underline;}
a:visited {font-weight:400; color:#222}

/** Search Boxes **/
label.control-label.search-front { font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; text-transform: uppercase !important;
  font-size: 1rem !important;  font-weight: 400; color: #222;}
.control-label.search-front.tablet.room {color:#0084B4!important}
.form-control, .form-control.new-srch {font-size:1em!important; color:#000}
h6.card-head {font-size: 1.1rem!important;}

ul.rooms > li, ul.features > li {width:33%; float:left}

/** Results **/
.hotel-list-name > a { color: #222;font-family: Neutra,Arial,sans-serif;text-transform: none;font-weight: 400;font-size: 1.4rem;
letter-spacing: 1px;}
.srch-price {text-align:right}

}





@media (min-width: 992px) { 
div.container {  max-width: 1180px!important;}
body, p {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none; font-size: 1em; letter-spacing: 1px;}
.news-text p {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important; font-size: .8em;}

/** header area **/
h3.logo {font-family: Neutra,Arial,sans-serif; text-transform:uppercase; font-weight:400; font-size:1.3em; letter-spacing:0px;  margin-bottom:2px}
h3.logo.text-center > a {color:#222;letter-spacing:1px}
h3.logo.text-center > a > span.hi{color:#0084B4!important}
p.by {font-family : CreatoDisplay, Helvetica, Arial,sans-serif; font-weight:300; font-size:.7em; margin-bottom:0px; text-transform:uppercase}
.top-text {font-size: .85em; font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important; text-transform: uppercase; font-weight: 300;}
img.atol-protected {margin-right: 8px; height: 32px;}

/** index page **/
.intro-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.2rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.intro-block.title > a {color:#222}
.intro-block {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;font-size: .8em;}

/** hotel listings **/
.htl-listing {margin-right: 0px; margin-left: 0px;}
.hotel-block.title {font-family: Neutra,Arial,sans-serif; text-transform: uppercase; font-weight: 400!important; font-size: 1.1rem; color: #222; letter-spacing: 1px;overflow : hidden;}
.hotel-block.title > a {color:#222}
.hotel-sub-title  {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: uppercase; font-weight: 400; font-size: .8em; letter-spacing: 2px; color: #222;}
.star-rate {height:16px}
.htl-teaser {background-color: #f9f9f9 !important; border-top: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125); color: #000; font-size: .75em; font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important;}
span.hotel-type {font-weight:400; font-size:1.1em}
.link-box {font-family: CreatoDisplay, Helvetica, Arial,sans-serif;font-weight: 300;font-size: .9em;}
.link-box > a {font-weight:400; color:#222}

/** footer **/
h5.foot-head.white {font-family: CommutersSans,"sans-serif" !important; text-transform: uppercase; font-weight: 300;  font-size: .9em;   letter-spacing: .2em; color: #fff;}
p.foot-body {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300; font-size: .8em;}
ul.list-three {list-style-type: none; font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300; font-size: .8em; margin: 0;
  padding: 0;}
ul.list-three > li {width: 33%; float: left; text-align: center;}
ul.list-three > li a {color:#fff}
.foot-links.white { font-size: .8em; color: #fff; letter-spacing: 2px;}
.foot-links.white > a {color: #fff;}

/** Hotel Page **/
label.control-label.search-front { text-transform: uppercase; font-family: CreatoDisplay,Helvetica,Arial,"sans-serif" !important;  text-transform: uppercase !important; font-size: .8rem !important; font-weight: 300; color: #222;}
.form-container-side.form-horizontal.form-control {height: 50px; font-size: 14px!important;padding: 10px 8px 10px 40px;border: 1px solid #222;}
.about-text p { font-family: CreatoDisplay, Helvetica, Arial,sans-serif; font-weight: 300 !important; font-size: .8em;}
h6.options {font-family: Neutra,Arial,"sans-serif"; text-transform: uppercase; line-height: 1.6em;}
ul.features, ul.amenities {list-style-type: square !important;  font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none;
  font-weight: 300;  font-size: 0.8em; letter-spacing: 1px; padding-left: 15px !important;}
ul.features > li {width:100%; float:none}
ul.amenities > li, ul.rooms > li, ul.features > li {line-height: 1.5em;}
ul.amenities > li {margin-bottom:15px}
h6.card-head { font-size: .9rem!important;}
table.weather-table {font-family: CreatoDisplay, Helvetica, Arial,sans-serif; text-transform: none; font-weight: 300;   font-size: .8em !important;}
td.weather-date, th.weather-date {padding:5px 15px 5px 15px}

.form-container .form-horizontal .form-control {font-size:.875em!important}
.form-container-side .form-horizontal .form-control {font-size:.875em!important}

/** Results **/
.hotel-list-name > a { color: #222;font-family: Neutra,Arial,sans-serif;text-transform: none;font-weight: 400;font-size: 1.2rem;
letter-spacing: 1px;}
.srch-price {text-align:right;padding-top:15px}
.trinket.results {font-size:.9em}
div.protected {margin-bottom:20px}
.from.lower {margin-bottom:40px}


}