@charset 'utf-8';




/**************/
/*** Resets ***/
/**************/

html, body, p, div, img, h1, h2, h3, h4, h5, li, ul, ol, dl, dd, dt, form, table, td, tr, a {margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; border-image-width: 0px;}

.clearDiv {clear: both;}

html {font-size: 100%;}

body {width: 100%; font-family: "acumin-pro-wide", sans-serif; color: #444444; background-color: #ffffff; font-size: 12px; font-weight: 300;}

* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: "acumin-pro-wide", sans-serif;}

a {color: #297ea5; text-decoration: none;}
a:hover {text-decoration: underline;}







/***************/
/*** General ***/
/***************/

.container {width: 100%; margin: auto; font-size: 0rem;}
.content {width: 100%; margin: auto; padding-left: 20px; padding-right: 20px; text-align: left;}



ul.messages {display: none; margin: auto; font-size: 0rem; list-style-type: none; color: #222222; margin-bottom: 20px;}
ul.messages li {display: block; text-align: center; font-size: 0.9rem;}
ul.messages li:first-child {font-weight: bold;}

ul.messages.success {color: #00aa00;}
ul.messages.error {color: #aa0000;}




ul.suggestionBox {position: absolute; top: 100px; left: 200px; display: none; background-color: #f4f6f8; list-style-type: none; padding: 0px; border-radius: 0px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #dee2bc; width: 300px; z-index: 5000; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);}
ul.suggestionBox li {display: block; width: 100%; text-align: left; padding-top: 10px; padding-bottom: 10px; font-size: 1.0rem; text-align: left; cursor: pointer; margin-top: 0px; margin-bottom: 0px; padding-left: 20px; padding-right: 20px;}
ul.suggestionBox li:hover {background-color: #ffffff;}



.ctaButton {width: 100%; max-width: 500px; height: 60px; line-height: 60px; color: #ffffff; text-align: center; margin: auto; margin-top: 40px; font-size: 1.1rem; background-color: #ed0f68; border-radius: 3px; font-weight: bold; cursor: pointer;}




.headerContainer {background-color: #ffffff; border-top: 8px solid #ed0f68; border-bottom: 1px solid #dee2ec;}
.header {padding-bottom: 10px; padding: 0px; position: relative; top: 0px; padding-top: 10px; padding-bottom: 10px;}

.header .logo {float: left; padding-left: 20px;}
.header .logo img {height: 35px;}

.header .links {float: right; padding-right: 20px;}
.header .links ul {text-align: center;}
.header .links ul li {display: inline-block; vertical-align: top; padding-left: 30px; padding-right: 30px; font-size: 0.8rem; color: #444444; text-align: center; height: 45px; line-height: 45px; cursor: pointer; font-weight: 100; display: none;}
.header .links ul li#menu-button {display: inline-block; padding-left: 0px; padding-right: 0px; height: auto; line-height: 0px; padding-top: 7px;}
.header .links ul li.gray {background-color: #f4f4f4;}
.header .links ul li.gray:hover {background-color: #e4e4e4;}
.header .links ul li.darkGray {background-color: #e4e4e4;}
.header .links ul li.darkGray:hover {background-color: #d4d4d4;}
.header .links ul li.lightBlue {background-color: #297ea5;}
.header .links ul li.lightBlue:hover {background-color: #196e95;}
.header .links ul li.darkBlue {background-color: #5d99c0;}
.header .links ul li.darkBlue:hover {background-color: #4d89b0;}
.header .links ul li.orange {background-color: #ff6640;}
.header .links ul li.orange:hover {background-color: #ef5630;}

.header .links ul li a {display: block; width: 100%; height: 100%; color: #444444; text-decoration: none;}
.header .links ul li a:hover {text-decoration: underline;}

.header .links ul li.highlight {border-radius: 3px; background-color: #00abcc; color: #ffffff; padding-left: 0px; padding-right: 0px;}
.header .links ul li.highlight a {color: #ffffff; padding-left: 30px; padding-right: 30px; font-weight: bold;}




.linkMenu {width: 100%; position: absolute; background-color: #ffffff; top: 0px; left: 0px; z-index: 2000; display: none; border: 1px solid #dee2ec;}
.linkMenu ul {display: block; width: 100%; font-size: 0rem;}
.linkMenu ul li {display: block; height: 55px; line-height: 55px; font-size: 0.8rem; padding-left: 20px; padding-right: 20px; text-align: center; width: 100%; color: #ffffff; font-weight: 100; text-transform: uppercase;}
.linkMenu ul li:hover {background-color: fbfbfd;}
.linkMenu ul li a {display: block; width: 100%; height: 100%; color: #444444; text-decoration: none;}
.linkMenu ul li a:hover {text-decoration: underline;}



.searchBar {display: block; max-width: 900px; margin: auto; margin-bottom: 40px;}
.searchBar .tabHolder {text-align: center;}

.searchBar .tabHolder .tab {display: inline-block; padding: 10px; padding-left: 0px; padding-right: 0px; background-color: rgba(251, 251, 253, 0.9); height: 50px; width: 40px; vertical-align: top; margin-right: 1px; position: relative; text-align: center; color: #555555; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; top: 5px;}
.searchBar .tabHolder .tab i {font-size: 1.0rem; margin-top: 4px; display: block; margin-bottom: 8px; color: #999999;}

.searchBar .tabHolder .tab.active {color: #444444; background-color: #ffffff; border: 1px solid #dee2ec; border-bottom: 0px; z-index: 200; top: 1px; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.05);}
.searchBar .tabHolder .tab.active i {color: #444444;}
.searchBar .tabContent {padding: 30px; width: auto; background-color: #ffffff; position: relative; z-index: 100; text-align: left; display: none; border-radius: 3px; border: 1px solid #dee2ec; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);}

.searchBar .tabContent .fieldHolder {display: block;}

.searchBar .tabContent .field {display: block; height: 50px; line-height: 50px; margin-bottom: 10px;}
.searchBar .tabContent .field .icon {display: block; float: left; padding: 5px; width: 50px; background-color: #0591f2; color: #ffffff; height: 50px; line-height: 40px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-size: 1.1rem; text-align: center;}
.searchBar .tabContent .field input {display: block; float: right; width: calc(100% - 50px); background-color: #f4f6f8; border: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 0.9rem; height: 50px; padding-left: 20px; border: 1px solid #dee2ec; border-left: 0px;}

.searchBar .tabContent .field select {display: block; float: right; width: calc(100% - 50px); background-color: #f4f6f8; border: 1px solid #dee2ec; border-left: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 0.9rem; height: 50px; padding-left: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.searchBar .tabContent input:focus {outline: none; border: 1px solid #0591f2; border-left: 0px;}

.searchBar .tabContent .button {width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 1.0rem; font-weight: bold; color: #ffffff; /*background-color: #6dc12c;*/ background-color: #0591f2; border-radius: 3px; display: inline-block; vertical-align: top; cursor: pointer; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4); margin-top: 10px;}

.searchBar .tabContent select {display: block; width: 100%; height: 40px; line-height: 40px; background-color: #ffffff; border: none; border-radius: 3px; font-size: 0.8rem; color: #666666; margin-bottom: 10px;}
.searchBar .tabContent select.flightPassengers {width: 150px;}
.searchBar .tabContent select.flightSeatType {width: 120px;}

.searchBar .tabContent input.fly {display: inline-block; width: calc(50% - 5px); background-image: url("img/icon-search-gray.png"); background-size: 14px 14px; background-repeat: no-repeat; background-position: 10px center; padding-left: 40px;}

.searchBar .tabContent select.cruise {display: block; width: 100%;}

.searchBar .tabContent input.car {display: block; width: 100%; background-image: url("img/icon-search-gray.png"); background-size: 14px 14px; background-repeat: no-repeat; background-position: 10px center; padding-left: 35px;}


.searchBar .tabContent .leftSpacing {margin-left: 10px;}



.carouselContainer {/*background-image: url("img/cutc_hero.jpg");*/ background-size: auto 500px; background-position: -675px 0px; background-repeat: no-repeat; margin-top: 110px;}
.carousel {height: 500px;}

.carousel .preamble {padding-top: 150px;}

.carousel .preamble .bigText {text-align: center; margin-bottom: 10px;}
.carousel .preamble h1 {display: inline; font-size: 2.1rem; line-height: 3.85rem; color: #ffffff; text-align: center; background-color: rgba(0, 0, 0, 0.7); margin-bottom: 0px; box-shadow: 10px 0px 0px rgba(0, 0, 0, 0.7), -10px 0px 0px rgba(0, 0, 0, 0.7); padding-top: 10px; padding-bottom: 10px;}

.carousel .preamble h2 {display: inline; font-size: 1.1rem; line-height: 2.60rem; color: #ffffff; text-align: center; font-weight: normal; background-color: rgba(0, 0, 0, 0.7); padding-top: 10px; padding-bottom: 10px; box-shadow: 10px 0px 0px rgba(0, 0, 0, 0.7), -10px 0px 0px rgba(0, 0, 0, 0.7);}

.carousel .getStarted {}




.pageContainer {}
.page {padding-top: 40px; padding-bottom: 40px;}

.page h1 {text-align: center; color: #444444; font-size: 2.0rem; margin-top: 40px; margin-bottom: 0px; padding: 10px; padding-left: 20px; padding-right: 20px; font-weight: bold; letter-spacing: 0.0rem;}
.page h2 {color: #297ea5; font-size: 1.1rem; text-align: center; background-color: #ffffff; margin-top: 10px; font-weight: 300;}
.page p {display: block; padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: 1.1rem; margin: auto;}

.page h5 {display: block; font-weight: bold; font-size: 0.8rem; text-align: center; margin-bottom: 5px; margin-top: 20px;}
.page input {display: block; width: 100%; max-width: 500px; height: 50px; line-height: 50px; padding-left: 10px; padding-right: 10px; border: none; text-align: center; border-radius: 3px; margin: auto; font-size: 1.0rem; border: 1px solid #cccccc; font-weight: 100;}
.page input[type="submit"] {background-color: #0591f2; text-align: center; color: #ffffff; margin: auto; border: none; font-weight: bold; cursor: pointer; border-radius: 3px;}
.page input[type="submit"].mini {width: calc(40% - 20px); margin-left: 10px; margin-right: 10px; font-size: 0.8rem; display: inline-block;}
.page select {display: block; width: 100%; max-width: 500px; height: 50px; line-height: 50px; padding-left: 10px; padding-right: 10px; border: none; text-align: center; border-radius: 3px; margin: auto; font-size: 1.0rem; border: 1px solid #cccccc; font-weight: 100;}

.page .blueButton {background-color: #0591f2; text-align: center; color: #ffffff; margin: auto; border: none; font-weight: bold; cursor: pointer; border-radius: 3px; height: 50px; line-height: 50px; max-width: 500px; font-size: 1.0rem; text-align: center;}

.page ul.messages {width: 100%; margin: auto; max-width: 500px; display: none;}
.page ul.messages.errors {color: #aa0000;}
.page ul.messages li {display: block; width: 100%; text-align: center; font-size: 0.9rem;}
.page ul.messages li:first-child {font-weight: bold;}

@media (max-width: 800px)
{

.page input[type="submit"].mini {width: 100%; display: block; margin: auto;}

}


.bookContainer {background-repeat: no-repeat; background-size: cover; height: auto; position: relative; overflow: hidden; background-color: #fbfbfd; background-image: url("img/big-bg-thailand.jpg"); background-position: center -200px;}
.bookContainerImage {position: absolute; top: 0px; left: 0px; width: 100%; height: 700px; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden;}
.bookContainerImage video {height: 100%; width: auto;}
.book {text-align: center; position: relative; top: 0px;}

.book h1 {display: inline-block; text-align: center; color: #ffffff; font-size: 2.0rem; margin-top: 40px; margin-bottom: 0px; background-color: rgba(0, 0, 0, 0.0); padding: 10px; padding-left: 20px; padding-right: 20px; font-weight: bold; letter-spacing: 0.00rem; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);}
.book h2 {display: block; text-align: center; font-size: 1.3rem; color: #fafafa; font-weight: 500; margin-bottom: 40px; font-weight: 100;}
.book h3 {display: block; text-align: center; font-size: 0.9rem; color: #ffffff; font-weight: 200; margin-bottom: 20px; font-weight: 100;}
.book .summary {display: block; width: 100%; margin-top: 20px; font-size: 0.9rem; color: #ffffff; text-align: center;}
.book .summary a {color: #ffffff;}
.book input {display: block; width: 100%; max-width: 500px; margin: auto; margin-bottom: 10px; height: 50px; line-height: 50px; padding-left: 10px; padding-right: 10px; border: none; text-align: left; border-radius: 2px; color: #444444; font-size: 1.0rem;}
.book input[type="submit"] {background-color: #6dc12c; color: #ffffff; font-weight: bold; cursor: pointer;}

.exploreContainer {background-color: /*#fbfbfd;*/ #ffffff;}
.explore {padding-top: 40px; padding-bottom: 40px;}

.explore .block {width: 100%; max-width: 366px; height: 280px; margin: auto; display: block; margin-bottom: 40px; background-position: center; padding: 0px; cursor: pointer; text-align: center; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; background-size: cover; text-align: left; padding: 40px;}
.explore .block .title {color: #ffffff; text-align: left; font-size: 1.2rem; font-weight: bold; margin-top: 145px;}
.explore .block .savings {display: inline-block; color: #ffffff; font-weight: 100; font-size: 0.9rem; text-align: center; margin-top: 0px; padding: 10px; background-color: #ed0f68; width: auto; border-radius: 3px; padding-top: 2px; padding-bottom: 5px;}
.explore .block .savings i {font-size: 0.7rem; padding-bottom: 5px; margin-right: 5px;}
.explore .block .save {display: inline-block; margin: auto; color: #ffffff; text-align: center; padding: 10px; font-size: 0.8rem; margin-top: 0px; height: 42px; font-weight: 300;}
.explore .block .stay {display: inline-block; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; text-align: center; padding: 10px; font-size: 0.7rem; margin-top: 0px;}

.explore .seeMoreButton {display: block; margin: auto; width: 100%; max-width: 500px; height: 50px; line-height: 50px; color: #ffffff; background-color: #297ea5; font-size: 0.9rem; text-align: center; font-weight: 100; text-transform: uppercase; cursor: pointer;}



.featuresContainer {background-color: #ffffff;}
.features {padding-top: 40px; padding-bottom: 40px;}

.features > h1 {font-size: 1.5rem; color: #8b1c8b; text-align: center; margin-bottom: 40px;}
.features p {display: block; font-size: 0.9rem; color: #222222; text-align: center; margin-bottom: 40px;}
.features p a {color: #297ea5;}

.features img {max-width: 100%; display: block; margin: auto;}

.features p.icons img {display: inline; margin-left: 5px; margin-right: 5px; width: 36px;}

.features .block {display: inline-block; vertical-align: top; padding: 40px; padding-left: 0px; padding-right: 0px; border: 1px solid #cce0ec; margin-bottom: 25px;}
.features .block h1 {text-align: center; font-size: 2.4rem; color: #222222; font-weight: bold;}
.features .block h2 {text-align: center; font-size: 0.9rem; color: #222222; font-weight: normal;}

.features .largeBlock {width: 100%;}
.features .smallBlock {width: calc(50% - 12.5px);}
.features .leftSmallBlock {margin-right: 12.5px;}
.features .rightSmallBlock {margin-left: 12.5px;}





.benefitsContainer {background-color: #ffffff;}
.benefits {padding-top: 40px; padding-bottom: 40px;}

.benefits > h1 {font-size: 1.8rem; color: #444444; text-align: center; margin-bottom: 40px;}
.benefits p {display: block; font-size: 0.9rem; color: #222222; text-align: center; margin-bottom: 40px;}
.benefits img {max-width: 100%; display: block; margin: auto;}

.benefits h2 {font-size: 1.0rem; color: #00657f; text-align: center; margin-bottom: 10px; font-weight: bold;}

.benefits .benefit {}





.faqContainer {}
.faq {padding-top: 40px; padding-bottom: 40px;}

.faq > h1 {font-size: 1.8rem; color: #444444; text-align: center; margin-bottom: 40px;}
.faq p {display: block; font-size: 0.9rem; color: #222222; text-align: center; margin-bottom: 40px;}

.faq h2 {font-size: 1.0rem; color: #00657f; text-align: center; margin-bottom: 10px; font-weight: bold;}

.faq a {color: #00657f;}





.prefooterContainer {background-image: url("img/bg-footer2.jpg"); background-repeat: no-repeat; height: 673px; background-size: cover; background-position: center;}
.prefooter {padding-top: 80px; padding-bottom: 0px; text-align: center;}
.prefooter h1 {font-size: 2.5rem; color: #ffffff; font-weight: 500; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); margin-bottom: 20px;}

.prefooter ul {display: block; font-size: 0rem; margin-bottom: 20px; margin-top: 20px;}
.prefooter ul li {display: block; text-align: center; font-size: 0.8rem; color: #ffffff; margin-bottom: 10px; font-weight: 300; text-transform: uppercase;}
.prefooter ul li a {color: #ffffff; text-decoration: none;}
.prefooter ul li a:hover {text-decoration: underline;}


.prefooter ul li.copyrightLink {color: #222222; margin-top: 160px;}



.footerContainer {background-color: #00587e;}
.footer {padding-top: 40px; padding-bottom: 40px; text-align: center;}

.footer ul {display: block; font-size: 0rem; margin-bottom: 20px;}
.footer ul li {display: block; text-align: center; font-size: 0.9rem; color: #ffffff; margin-bottom: 10px;}
.footer ul li input {display: inline-block; vertical-align: top; height: 40px; line-height: 40px; font-size: 0.9rem; width: 300px;}
.footer ul li .button {display: inline-block; vertical-align: top; height: 40px; line-height: 40px; padding-left: 20px; padding-right: 20px; text-align: center; font-size: 0.9rem; background-color: #cce0ec; color: #00587e; font-weight: bold; border-left: 1px solid #00587e;}
.footer ul li a {color: #ffffff; text-decoration: none;}
.footer ul li a:hover {text-decoration: underline;}





@media (min-width: 800px)
{

.content {max-width: 1170px;}

.header {max-width: 100%;}
.header .logo {width: 50%; float: left; text-align: left; padding-left: 20px;}
.header .links {width: 50%; float: right; padding-right: 40px;}
.header .links ul {text-align: right; margin-top: 0px;}
.header .links ul li {display: inline-block;}
.header .links ul li#menu-button {display: none;}


.searchBar .tabHolder .tab {display: inline-block; padding: 10px; padding-left: 0px; padding-right: 0px; height: 70px; width: 110px; vertical-align: top; margin-right: 1px; position: relative; text-align: center; font-size: 0.70rem; color: #555555; letter-spacing: 0.05rem; font-weight: 100; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px;}
.searchBar .tabHolder .tab i {font-size: 1.2rem; margin-top: 8px; display: block; margin-bottom: 8px;}
.searchBar .tabContent {padding: 30px; width: 100%; position: relative; text-align: center; display: none; border-radius: 3px;}
.searchBar .tabContent .fieldHolder {display: flex;}

.searchBar .tabContent .field {flex: 1; margin-bottom: 0px;}

.searchBar .tabContent .button {flex: 0 0 150px; margin-left: 10px; margin-top: 0px;}

.searchBar .tabContent select {display: inline-block; height: 40px; line-height: 40px; background-color: #ffffff; border: none; border-radius: 3px; font-size: 0.8rem; color: #666666;}
.searchBar .tabContent select.flightPassengers {width: 150px;}
.searchBar .tabContent select.flightSeatType {width: 120px;}

.searchBar .tabContent input.fly {width: 175px; background-image: url("img/icon-search-gray.png"); background-size: 14px 14px; background-repeat: no-repeat; background-position: 10px center; padding-left: 40px;}

.searchBar .tabContent select.cruise {display: inline-block; vertical-align: top; width: 335px; margin-bottom: 0px;}

.searchBar .tabContent input.car {display: inline-block; vertical-align: top; width: 175px; margin-bottom: 0px;}


.searchBar .tabContent .inlineSpacing {margin-left: 10px;}





.carouselContainer {background-position: -350px 0px; margin-top: 55px;}

.carousel {}

.carousel .preamble {padding-top: 200px;}


.pageContainer {}
.page {}
.page h1 {text-align: center;}
.page h2 {}
.page p {text-align: left; font-weight: 100; color: #000000; text-align: center;}
.page ul {list-style-position: inside; max-width: 80%; margin: auto; background-color: #ffffff;}
.page ul li {font-size: 0.9rem;}

.bookContainer {}
.book {}
.book h1 {margin-top: 70px; font-size: 2.5rem;}
.book h2 {font-size: 1.5rem;}

.exploreContainer {}
.explore {}
.explore .block {display: inline-block; vertical-align: top; margin-left: 20px; margin-right: 20px; width: calc(50% - 40px); }


.benefits .benefit {display: inline-block; vertical-align: top; width: calc(50% - 40px); margin-left: 20px; margin-right: 20px;}
.benefits h2 {}
.benefits .benefit p {}

.benefits .benefit-2 {display: inline-block; vertical-align: top; width: calc(25% - 40px); margin-left: 20px; margin-right: 20px;}
.benefits .benefit-2 p {}

.faq .left {float: left; width: calc(50% - 40px); margin-left: 20px; margin-right: 20px;}
.faq .right {float: right; width: calc(50% - 40px); margin-left: 20px; margin-right: 20px;}
.faq h2 {text-align: center;}
.faq .left p {text-align: center;}
.faq .right p {text-align: center;}

.prefooter {padding-top: 100px;}
.prefooter h1 {font-size: 5.5rem; margin-bottom: 20px; height: auto;}

.prefooter ul {margin-top: 0px;}
.prefooter ul li {display: inline-block; margin-left: 20px; margin-right: 20px;}

.prefooter ul li.copyrightLink {color: #ffffff; margin-top: 0px;}

.footer ul {display: inline-block; vertical-align: top; margin-left: 20px; margin-right: 20px;}
.footer ul li {text-align: left;}


}

@media (min-width: 1000px)
{

.carouselContainer {background-position: center;}

.carousel .preamble .bigText {text-align: left;}


.features img {display: inline-block; vertical-align: top; width: 280px;}

.features .blockHolder {max-width: 80%; margin: auto; text-align: center;}

.features .block {margin-left: 12.5px; margin-right: 12.5px; padding-left: 25px; padding-right: 25px;}
.features .largeBlock {width: auto;}
.features .smallBlock {width: auto;}




.exploreContainer {}
.explore {}
.explore .block {display: inline-block; vertical-align: top; margin-left: 20px; margin-right: 20px; width: calc(33% - 40px); }



}





@media (min-width: 1250px)
{

.header .links {padding-right: 0px;}

.bookContainerImage video {width: 100%; height: auto;}


}





.overlay {position: fixed; display: none; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; background-color: rgba(0, 0, 0, 0.6);}


.popupBox {position: relative; margin: auto; width: calc(100% - 20px); max-width: 500px; background-color: #ffffff; padding: 20px; padding-bottom: 40px; border-radius: 3px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); margin-top: 75px;}

.popupBox > .close {display: block; position: absolute; top: 10px; right: 20px; z-index: 20000; font-size: 1.5rem; cursor: pointer;}


@media (min-width: 800px)
{

.popupBox {margin-top: 150px; padding: 40px;}

}

.popupBox h1 {font-size: 1.4rem; text-align: center; color: #444444; margin-bottom: 20px;}

.popupBox p {display: block; text-align: center; font-size: 0.9rem; color: #666666; margin-top: 10px; margin-bottom: 20px;}

.popupBox .field {width: 100%; height: 50px; line-height: 50px; margin-bottom: 10px;}
.popupBox .field .icon {float: left; width: 50px; padding: 5px; background-color: #0591f2; color: #ffffff; height: 50px; line-height: 40px; text-align: center; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-size: 1.1rem;}
.popupBox .field input {display: block; float: right; width: calc(100% - 50px - 1px); background-color: #f4f6f8; border: 1px solid #dee2ec; border-left: 0px; padding-left: 20px; padding-right: 20px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 0.9rem; height: 50px;}


.popupBox .field select {display: block; float: right; width: calc(100% - 50px - 1px); background-color: #f4f6f8; border: 1px solid #dee2ec; border-left: 0px; padding-left: 20px; padding-right: 20px; border-radius: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 0.9rem; height: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.popupBox .field select.birthMonth {width: calc(43% - 17px - 1px); float: left;}
.popupBox .field select.birthDay {width: calc(23% - 17px - 1px); float: left; margin-left: 10px; border-left: 1px solid #dee2ec; border-radius: 3px; text-align: center;}
.popupBox .field select.birthYear {width: calc(30% - 17px - 1px); float: left; margin-left: 10px; border-left: 1px solid #dee2ec; border-radius: 3px;}

.popupBox .button {display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; font-weight: bold; border-radius: 3px; background-color: #0591f2; color: #ffffff; font-size: 0.9rem; margin-top: 20px; cursor: pointer;}

.popupBox .postButtonText {display: block; width: 100%; text-align: center; margin-top: 10px; font-size: 0.9rem; color: #666666;}
.popupBox .postButtonText a {color: #0591f2;}





.destinationImageContainer {background-size: cover; background-repeat: none;}
.destinationImage {padding-top: 180px; padding-bottom: 180px;}
.destinationImage h1 {font-size: 2.5rem; text-align: center; color: #ffffff;}
.destinationImage h2 {font-size: 1.0rem; text-align: center; color: #ffffff; font-weight: 100;}

.dealsImageContainer {background-position: 0px -340px;}


@media (max-width: 800px)
{

.dealsImageContainer {background-position: 0px 0px;}

}


.destinationContainer {background-size: cover; background-color: #fafafa;}
.destination {padding-top: 40px; padding-bottom: 40px;}

.destination > h2 {font-size: 1.4rem; text-align: left;}

.destination > .info {float: left; width: calc(100% - 350px); padding-right: 40px;}

.destination > .bestHotel {float: right; width: 350px; background-color: #ffffff; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border: 1px solid #e6e5ef; border-radius: 3px; margin-top: -180px; padding-bottom: 20px;}

.destination > .bestHotel > .bookBar {border-bottom: 1px solid #e6e5ef; padding: 20px; height: 90px;}
.destination > .bestHotel > .bookBar > .label {float: left; width: 70px; font-size: 0.7rem; color: #222222; text-transform: uppercase; font-weight: bold; text-align: left; padding-top: 3px;}
.destination > .bestHotel > .bookBar > .price {float: left; text-align: center; font-size: 2.5rem; color: #222222; padding-top: 5px; font-weight: bold; margin-top: -20px; width: calc(100% - 70px - 70px); padding-top: 8px;}
.destination > .bestHotel > .bookBar > .price sup {font-size: 1.0rem; padding-right: 2px; font-weight: 300;}
.destination > .bestHotel > .bookBar > .bookButton {float: right; padding: 10px; padding-left: 20px; padding-right: 20px; background-color: #82c341; border-radius: 3px; font-size: 0.8rem; font-weight: bold; color: #ffffff; width: 70px; text-align: center; cursor: pointer;}
.destination > .bestHotel > .bookBar > .savings {float: left; width: 50px; color: #00aa00; font-size: 1.2rem; line-height: 16px; font-weight: bold; text-align: left;}
.destination > .bestHotel > .bookBar > .disclaimer {text-align: center; font-size: 0.6rem; color: #666666; margin-top: 5px;}

.destination > .bestHotel > .image {width: 100%; max-height: 200px; overflow: hidden; position: relative;}
.destination > .bestHotel > .image > .percentBanner {position: absolute; top: 0px; left: 0px; box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.3); z-index: 100; background-color: #34b72c; padding: 15px; padding-top: 8px; padding-bottom: 8px; text-align: center; color: #ffffff; font-size: 0.9rem; font-weight: bold; font-family: "proxima-nova", sans-serif;}
.destination > .bestHotel > .image > .percentBanner sup {font-size: 0.6rem;}
.destination > .bestHotel > .image img {width: 100%;}

.destination > .bestHotel > h3 {font-size: 1.0rem; text-align: left; color: #222222; padding-left: 20px; padding-right: 20px; margin-top: 20px;}

.destination > .bestHotel > .ratings {padding-left: 20px; padding-right: 20px; margin-top: 5px;}
.destination > .bestHotel > .ratings > .starRating {float: right; font-size: 1.0rem; text-align: right;}
.destination > .bestHotel > .ratings > .taRating {float: left; font-size: 0.7rem; text-align: left;}


@media (max-width: 1000px)
{
    
.destination > .info {float: none; width: 100%;}
.destination > .bestHotel {display: none;}

}


.destination .dates {padding: 20px; border-bottom: 1px solid #e6e5ef;}
.destination .dates .field {}
.destination .dates .field .icon {float: left; width: 50px; padding: 5px; background-color: #0591f2; color: #ffffff; height: 50px; line-height: 40px; text-align: center; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-size: 1.1rem;}
.destination .dates .field input {display: block; float: right; width: calc(100% - 50px - 1px); background-color: #f4f6f8; border: 1px solid #dee2ec; border-left: 0px; padding-left: 20px; padding-right: 20px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 0.9rem; height: 50px;}

.destination .bestHotels {display: block; width: 100%; padding: 20px; border-bottom: 1px solid #e6e5ef;} 
.destination .bestHotels .hotel {display: block; width: 100%; margin-bottom: 40px;}
.destination .bestHotels .hotel img {display: block; margin-bottom: 10px; border-radius: 3px; width: 100%;}
.destination .bestHotels .hotel h3 {font-size: 1.0rem; font-family: "proxima-nova", sans-serif; color: #444444; text-align: left; margin-bottom: 4px;}
.destination .bestHotels .hotel h4 {font-size: 0.9rem; font-family: "proxima-nova", sans-serif; color: #666666; text-align: left; font-weight: 300; margin-bottom: 4px; }
.destination .bestHotels .hotel h5 {font-size: 1.0rem; font-family: "proxima-nova", sans-serif; color: #444444; text-align: left; font-weight: bold;}
.destination .bestHotels .hotel .button {display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; color: #ffffff; font-family: "proxima-nova", sans-serif; font-size: 0.8rem; background-color: #ed0f68; border-radius: 3px; font-weight: bold; cursor: pointer; margin-top: 8px;}

.destination ul.options {list-style-type: none; text-align: left;}
.destination ul.options li {display: inline-block; text-align: left; color: #666666; padding-bottom: 20px; font-size: 0.9rem; margin-right: 0px; font-weight: 300; padding-left: 20px; padding-right: 20px; text-align: center;}
.destination ul.options li.active {color: #2b85ac;}
.destination ul.options li i {padding-right: 5px;}


.destination .title {margin-bottom: 20px;}
.destination .title .icon {float: left; width: 80px; height: 60px; margin-top: 5px; text-align: center;}
.destination .title .icon i {font-size: 2.5rem; color: #2b85ac;}
.destination .title .text {float: left; width: calc(100% - 80px); border-left: 1px solid #ed0f68; padding-left: 20px;}
.destination h1 {text-align: left; color: #444444; font-size: 2.0rem; font-weight: bold; letter-spacing: 0.00rem;}
.destination h2 {text-align: left; color: #666666; font-size: 1.4rem; font-weight: 100; letter-spacing: 0.00rem;}
.destination h3 {text-align: left; color: #444444; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.00rem;}
.destination h4 {text-align: left; color: #666666; font-size: 0.9rem; font-weight: 100; letter-spacing: 0.00rem;}
.destination p {display: block; font-size: 1.0rem; color: #666666; text-align: left; margin-top: 20px;}

.destination .wideButton {display: block; width: 100%; max-width: 500px; margin: auto; height: 40px; line-height: 40px; border-radius: 3px; background-color: #0591f2; color: #ffffff; font-weight: bold; font-size: 0.9rem; text-align: center;}


.destination .block {width: 100%; background-color: #ffffff; border-radius: 3px;}



.destination .miniTitle {margin-bottom: 20px; display: inline-block; width: calc(33% - 54px); vertical-align: top; margin-left: 10px; margin-right: 10px;}
.destination .miniTitle > .icon {float: left; width: 50px; height: 50px; margin-top: 5px; text-align: center;}
.destination .miniTitle > .icon i {font-size: 2.0rem; color: #2b85ac;}
.destination .miniTitle > .text {float: left; width: calc(100% - 50px); border-left: 1px solid #ed0f68; padding-left: 20px;}
.destination .miniTitle > h3 {text-align: left; color: #444444; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.00rem;}
.destination .miniTitle > h4 {text-align: left; color: #666666; font-size: 0.9rem; font-weight: 100; letter-spacing: 0.00rem;}
.destination .miniTitle > .bookButton {display: block; width: 100%; max-width: 500px; margin: auto; height: 40px; line-height: 40px; border-radius: 3px; background-color: #0591f2; color: #ffffff; font-weight: bold; font-size: 0.9rem; text-align: center; margin-top: 20px; cursor: pointer;}

.destination .miniTitleFlights {margin-left: 0px; margin-right: 40px;}
.destination .miniTitleCars {margin-left: 40px; margin-right: 40px;}
.destination .miniTitleActivities {margin-left: 40px; margin-right: 0px;}


@media (max-width: 800px)
{


.destination .miniTitleFlights {margin: auto;}
.destination .miniTitleCars {margin: auto;}
.destination .miniTitleActivities {margin: auto;}

.destination .miniTitle {display: block; width: 100%; margin-bottom: 40px;}
.destination .miniTitle > .icon {float: none; width: 100%; text-align: center;}
.destination .miniTitle > .text {float: none; width: 100%; border-left: 0px; text-align: center; padding-left: 0px;}
.destination .miniTitle > .text > h3 {text-align: center;}
.destination .miniTitle > .text > h4 {text-align: center;}


}





.destination .hotels {width: 100%;}
.destination .hotelHolder {width: calc(100%);}
.destination .hotelMap {width: 100%; height: 600px; margin-bottom: 40px;}



.destination .hotel {display: inline-block; width: calc(33% - 20px); vertical-align: top; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; background-color: #ffffff; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border: 1px solid #e6e5ef; border-radius: 3px;}

.destination .hotel > .hotelLocation {display: block; width: 100%; height: 30px; background-color: #2b85ac; text-align: center; color: #ffffff; font-size: 0.7rem; line-height: 30px;}

.destination .hotel > .hotelPhoto {display: block; width: 100%; height: 200px; background-size: cover; border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: pointer; position: relative;}
.destination .hotel > .hotelPhoto > .percentBanner {position: absolute; top: 0px; box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.3); z-index: 100; background-color: #34b72c; padding: 15px; padding-top: 8px; padding-bottom: 8px; text-align: center; color: #ffffff; font-size: 0.9rem; font-weight: bold; font-family: "proxima-nova", sans-serif;}
.destination .hotel > .hotelPhoto > .percentBanner sup {font-size: 0.6rem;}

.destination .hotel > .hotelData {width: calc(100% - 40px); margin: auto; margin-top: 10px;}
.destination .hotel > .hotelData > h3 {text-align: left; color: #444444; font-size: 1.0rem; font-weight: bold; letter-spacing: 0.00rem; margin-top: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.destination .hotel > .hotelData > h4 {text-align: left; color: #555555; font-size: 1.0rem; font-weight: 100; font-family: "proxima-nova", sans-serif; margin-top: 5px;}
.destination .hotel > .hotelData > .starRating {font-size: 0.9rem; margin-top: 2px; color: #888888;}
.destination .hotel > .hotelData > .reviewCount {font-size: 0.7rem; margin-top: 5px; color: #666666;}

.destination .hotel > .hotelData > .ratings {margin-top: 5px;}
.destination .hotel > .hotelData > .ratings > .starRating {float: right; font-size: 1.0rem; text-align: right;}
.destination .hotel > .hotelData > .ratings > .taRating {float: left; font-size: 0.7rem; text-align: left;}

.destination .hotel > .bookBar {height: 80px; padding: 20px;}
.destination .hotel > .bookBar > .label {float: left; width: 50px; font-size: 0.7rem; color: #222222; text-transform: uppercase; font-weight: bold; text-align: left; padding-top: 3px;}
.destination .hotel > .bookBar > .price {float: left; text-align: center; font-size: 2.5rem; color: #222222; padding-top: 5px; font-weight: bold; margin-top: -20px; width: calc(100% - 50px - 70px); padding-top: 8px;}
.destination .hotel > .bookBar > .price sup {font-size: 1.0rem; padding-right: 2px; font-weight: 300;}
.destination .hotel > .bookBar > .bookButton {float: right; padding: 10px; padding-left: 20px; padding-right: 20px; background-color: #ed0f68; border-radius: 3px; font-size: 0.8rem; font-weight: bold; color: #ffffff; width: 70px; text-align: center; cursor: pointer;}


.destination .viewAllHotels {font-size: 1.1rem; text-align: center; padding-top: 150px; height: 360px; border: 0px; font-weight: bold; cursor: pointer;}




@media (max-width: 700px)
{

.destination .hotel {display: block; width: 100%; max-width: 340px; margin: auto; margin-bottom: 20px;}

}

@media (min-width: 701px) and (max-width: 1100px)
{

.destination .hotel {display: inline-block; width: calc(50% - 20px);}

}


@media (min-width: 1101px) and (max-width: 1100px)
{


}



.destination .room {display: width: 100%; border-bottom: 1px solid #e6e5ef; padding: 20px;}
.destination .room > .hotelPhoto {display: block; float: left; width: 100px; height: 100px; background-size: cover;}
.destination .room > .hotelData {float: right; width: calc(100% - 100px - 100px - 40px); padding-right: 20px;}
.destination .room > .hotelData > h3 {text-align: left; color: #444444; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.00rem; margin-top: 0px; white-space: nowrap; overflow: hidden; height: 40px;}
.destination .room > .hotelData > h4 {text-align: left; color: #555555; font-size: 1.0rem; font-weight: 100; font-family: "proxima-nova", sans-serif; margin-top: 5px;}
.destination .room > .hotelData > .starRating {font-size: 0.9rem; margin-top: 2px; color: #888888;}
.destination .room > .hotelData > .reviewCount {font-size: 0.7rem; margin-top: 5px; color: #666666;}

.destination .room > .hotelPrice {display: block; float: right; width: 100px; height: 100px; max-height: 100px; padding-top: 0px;}
.destination .room > .hotelPrice .label {font-size: 0.8rem; text-align: center; font-family: "proxima-nova", sans-serif;}
.destination .room > .hotelPrice > h3 {text-align: center; color: #444444; font-size: 2.4rem; font-weight: bold; font-family: "proxima-nova", sans-serif;}
.destination .room > .hotelPrice > h3 sup {font-size: 1.0rem; padding-right: 2px;}
.destination .room > .hotelPrice > .bookButton {width: 100%; text-align: center; padding: 10px; color: #ffffff; font-size: 0.9rem; font-weight: bold; font-family: "proxima-nova", sans-serif; background-color: #ed0f68; border-radius: 3px; display: block; text-decoration: none; margin-top: 5px;}




.hotelMiniMarker {max-width: 75px;}
.hotelMiniMarker > .markerContent {padding: 10px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); border-radius: 3px; background-color: #ffffff;}
.hotelMiniMarker > .markerContent > .name {text-align: left; font-size: 0.8rem; font-weight: 300; color: #444444; font-family: "proxima-nova", sans-serif; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.hotelMiniMarker > .markerContent > .image {width: 100%; max-height: 60px; overflow: hidden;}
.hotelMiniMarker > .markerContent > .image img {width: 100%;}
.hotelMiniMarker > .markerContent > .price {text-align: left; font-size: 0.8rem; font-weight: 500; color: #222222; font-family: "proxima-nova", sans-serif;}

.hotelMiniMarker > .point {background-image: url("img/marker-point.png"); background-repeat: no-repeat; background-position: center top; background-size: auto 4px; height: 4px;}


.hotelPopup {width: 250px; border-radius: 3px;}

.hotelPopup > .popupContent {padding-bottom: 10px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); border-radius: 3px; background-color: #ffffff;}
.hotelPopup > .popupContent > .imageContent {width: 100%; padding: 10px; padding-top: 150px; background-size: cover; background-repeat: no-repeat;}
.hotelPopup > .popupContent > .imageContent > h3 {font-size: 0.9rem; color: #ffffff; text-align: left;}
.hotelPopup > .popupContent > .name {text-align: left; font-size: 0.9rem; font-weight: bold; color: #444444; padding-left: 10px; padding-right: 10px; margin-bottom: 7px;}
.hotelPopup > .popupContent > .image {width: 100%; max-height: 150px; overflow: hidden; margin-bottom: 8px;}
.hotelPopup > .popupContent > .image img {width: 100%;}

.hotelPopup > .popupContent > .pricing {float: left; text-align: left; padding-left: 10px; width: 60%;}
.hotelPopup > .popupContent > .pricing > .price {font-size: 2.4rem; font-weight: 600; color: #222222;}
.hotelPopup > .popupContent > .pricing > .price sup {font-size: 1.0rem; font-weight: 300; padding-right: 2px;}
.hotelPopup > .popupContent > .pricing > .discount {font-size: 0.9rem; color: #00aa00; margin-top: 14px; padding-left: 5px; font-weight: bold;}

.hotelPopup > .popupContent > .ratings {float: right; width: 40%; text-align: right; padding-right: 10px;}
.hotelPopup > .popupContent > .ratings > .taRating {width: 100%; text-align: right;}
.hotelPopup > .popupContent > .ratings > .taReviewCount {width: 100%; text-align: right; margin-top: -4px;}
.hotelPopup > .popupContent > .ratings > .starRating {width: 100%; text-align: right;}


.hotelPopup > .popupContent > .bookButton {display: block; width: calc(100% - 20px); text-align: center; height: 30px; line-height: 30px; border-radius: 3px; background-color: #ed0f68; font-weight: bold; color: #ffffff; margin-left: 10px; margin-right: 10px; margin-top: 10px; text-decoration: none; cursor: pointer;}


.mapboxglPopupStyle {padding: 0px; padding-top: 0px;}
.mapboxgl-popup-content {padding: 0px 0px 0px 0px !important;}
.mapboxgl-popup-close-button {color: #ffffff; font-size: 1.0rem;}
.mapboxgl-popup {border-radius: 3px;}





@media (min-width: 800px)
{

.destination h1 {font-size: 2.5rem;}

}




.backToTopBar {position: fixed; bottom: 0px; width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 0.9rem; color: #ffffff; background-color: #2b85ac; z-index: 58000; font-weight: bold; cursor: pointer;}
.backToTopBar i {font-size: 1.4rem; padding-top: 15px; vertical-align: top; padding-left: 5px;}