/* ======================================
#Style Sales Marketing Pages
====================================== */
html, body { width: 100%; height: 100% }
body { font-family: 'Noto Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #001f3d }
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400 }
.input-group { margin-bottom: 15px; width: inherit }
.col-fluid { padding-left: 0; padding-right: 0; }
.fa { margin-right: 5px; }
.valign { display: table; width: 100%; height: 100%; }
.valign > .inner { display: table-cell; vertical-align: middle; }
.center-block { display: block; float: none; margin-left: auto; margin-right: auto }
.pg-section.pg-section { display: table; width: 100%; height: 100%; background-size: cover; }
.pg-section.sm { height: 70%; }
.pg-section-wrap { display: table-cell; vertical-align: middle }
a.btn { color: #fff }
.btn-primary { background: #007fff }
.btn-primary:hover { background: #3399ff }
.pg-section.intro { padding: 60px 0 30px }
.pg-section .pg-section-inner { background: #fff; background: rgba(255, 255, 255, 0.8); padding: 15px 60px 30px; margin: 0 -15px }
.pg-section.hero .pg-section-inner { width: auto; padding-left: 60px; background: #fff; background: rgba(255, 255, 255, 0.75); border-radius: 0 0 30px  0; z-index: 10; }
.pg-section .pg-title { font-family: 'Noto Serif', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2em; line-height: normal; margin-bottom: 15px }
.pg-section .pg-title strong { color: #2e6da4 }
.pg-section .pg-content { font-family: 'Noto Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.15em; line-height: 1.425; margin-top: 0 }
.fa-stack.xl { font-size: 500%; }
@media screen and (max-width:767px) {
  .pg-section-inner.pg-section-inner h1 { font-size: 1.825em; margin: 0; }
  .pg-section .pg-section-inner { padding: 0; margin: 0; }
  .pg-section.hero .pg-section-inner { padding: 15px 30px; }
  .pg-section.sm { height: 480px; }
}

/* ======================================
#Page Heros
====================================== */
[id="splash"] { background: url(../images/wl-grlanding/pghero-splash.jpg) no-repeat center center; background-size: cover; }
[id="home"] { background: url(../images/wl-grlanding/pghero-home.jpg) no-repeat center right; background-size: cover; }
[id="youget"] { background: url(../images/wl-grlanding/pghero-what-you-get.jpg) no-repeat center center; background-size: cover; }
[id="hotitworks"] { background: url(../images/wl-grlanding/pghero-how-it-works-2.jpg) no-repeat  center; background-size: cover; }
[id="demo"] { background: url(../images/wl-grlanding/pghero-demo-3.jpg) no-repeat top center; background-size: cover; }
[id="about"] { background: url(../images/wl-grlanding/pghero-about.jpg) no-repeat top right; background-size: cover; }
[id="contact"] { background: url(../images/wl-grlanding/pghero-contact.jpg) no-repeat center right; background-size: cover; }
.section-highlight { background: #007fff }
.section-spacer { padding: 30px 0 }

/* ======================================
#Main Nav
====================================== */
.navbar-main-sm.navbar-main-sm { background: #001f3d; background: rgba(0, 31, 61, 0.9); width: 100%; z-index: 10000; }
.navbar-main-sm .navbar { background: none; margin: 0; border: 0 }
.navbar-main-sm .navbar-brand img { margin-top: -8px; }
.navbar-main-sm .btn.btn { padding: 5px 10px; margin-left: 15px; }
.navbar-main-sm .navbar a, .navbar-main-sm .navbar li a { color: #fff; font-weight: 600; padding: 5px 10px; margin: 15px 0 0 0; }
.navbar .navbar a:hover, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus, .navbar .navbar-nav > li > a:active { background-color: transparent !important; color: #3399ff !important; }
@media screen and (min-width:768px) and (max-width:960px) {
  .navbar-brand.navbar-brand img { width: 160px; margin-top: 0; }
  .navbar-main-sm .btn.btn { font-size: .8em; padding: 5px; }
  .navbar-main-sm .navbar a, .navbar-main-sm .navbar li a { font-size: .8em }
}
@media screen and (max-width:767px) {
  .navbar-brand.navbar-brand img { width: 180px; margin-top: -5px; }
  .navbar-main-sm .navbar-collapse { position: relative; z-index: 100; background: #001f3d; }
  .navbar-main-sm .navbar-btn { left: -8px; top: -5px; }
}

/* ======================================
#Gallery List
====================================== */
.gallery-list { padding: 0; margin-top: 30px; font-size: 1.125em; font-weight: 600; }
.gallery-list li { padding: 15px 30px; overflow: hidden; }
.gallery-list img { margin-bottom: 15px; }

/* ======================================
#Grid Tiles
====================================== */
.grid-tiles .pic { min-height: 360px; background-size: cover; background-repeat: no-repeat; background-position: center center }
.grid-tiles .info { color: #001f3d; position: relative; min-height: 320px; font-weight: 400; border-radius: 0; padding: 15px 60px; margin: 0 }
.grid-tiles .info .title { font-weight: 600; margin-top: 0; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px dotted #001f3d }
.grid-tiles .alpha .info:after, .grid-tiles .omega .info:after { content: ''; position: absolute; top: 45%; display: block; width: 0; height: 0; border-color: transparent; border-style: solid }
.grid-tiles .alpha { background: #d8fbea; margin: 1px 0 }
.grid-tiles .alpha .info:after { left: -15px; border-width: 30px 15px 30px 0; border-right-color: #d8fbea }
.grid-tiles .omega { background: #f4fae5 }
.grid-tiles .omega .info:after { right: -15px; border-width: 30px 0 30px 15px; border-left-color: #f4fae5 }
@media screen and (min-width:768px) and (max-width:1024px) {
  .grid-tiles .inner ul { width: 50% }
}
@media screen and (max-width:767px) {
  .grid-tiles .alpha .info:after, .grid-tiles .omega .info:after { left: 0; right: 0; top: -10px; border-width: 0 30px 10px; border-color: transparent; margin: 0 auto }
  .grid-tiles { margin-bottom: 15px }
  .grid-tiles .pull-right { float: none !important }
  .grid-tiles .info { min-height: 15px; height: auto !important; padding: 30px }
  .grid-tiles .alpha .info:after { border-bottom-color: #d8fbea }
  .grid-tiles .omega .info:after { border-bottom-color: #f4fae5 }
  .grid-tiles .inner ul { width: 33.33333333% }
}
@media screen and (max-width:480px) {
  .grid-tiles .pic { min-height: 240px }
  .grid-tiles .inner ul { width: 50% }
}
@media screen and (max-width:360px) {
  .grid-tiles .inner ul { width: 100% }
}

/* ======================================
#Benefits Thumbnails
====================================== */
.grid-tiles .pic[data-benefit="condos"] { background-image: url(../images/wl-grlanding/th-benefits-condos-3.jpg); }
.grid-tiles .pic[data-benefit="cruises"] { background-image: url(../images/wl-grlanding/th-benefits-cruises-3.jpg); }
.grid-tiles .pic[data-benefit="hotels"] { background-image: url(../images/wl-grlanding/th-benefits-hotels.jpg); }
.grid-tiles .pic[data-benefit="cars"] { background-image: url(../images/wl-grlanding/th-benefits-cars.jpg); }
.grid-tiles .pic[data-benefit="air"] { background-image: url(../images/wl-grlanding/th-benefits-air-2.jpg); }
.grid-tiles .pic[data-benefit="booking"] { background-image: url(../images/wl-grlanding/th-benefits-booking.jpg); }
.grid-tiles .pic[data-benefit="camping"] { background-image: url(../images/wl-grlanding/th-benefits-camping-3.jpg); }
.grid-tiles .pic[data-benefit="concierge"] { background-image: url(../images/wl-grlanding/th-benefits-concierge-5.jpg); }
.grid-tiles .pic[data-benefit="shopping"] { background-image: url(../images/wl-grlanding/th-benefits-mall-4.jpg); }