/* =======================================================================
   Style Guide
   ======================================================================= */

.color-primary { #2f343b; }
.color-accent { #f5d25d; }
.color-background { #ddd; }
.color-shadow { #373c44; }

/* =======================================================================
   Basic styles
   ======================================================================= */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html { font: 400 100%/1.5 "Muli", serif; }

@media screen and (max-width: 600px) {
  html { font-size: 95%; }
}

body {
  background: #dcdcdc;
  color: #2c2c2c;
  padding: 0;
}

.login-background {
  background: #2f343b;
  margin: 2rem 0;
}

a {
  color: #5c5c5c;
  text-decoration: none;
  -o-transition: color .2s;
  -ms-transition: color .2s;
  -moz-transition: color .2s;
  -webkit-transition: color.2s;
  transition: color .2s;
}

header { 
  background: #2f343b;
  margin-bottom: 3rem;
  padding: 1.5rem 0;
}

.container {
  margin: 0 auto;
  max-width: 900px;
  padding: 0;
  width: 90%;
}

@media screen and (max-width: 600px) {
  .container { width: 94%; }
}

.page-header-container {
  margin-bottom: 2rem;
  width: 100%; 
}

/* =======================================================================
   Typography
   ======================================================================= */

h1, h2, h3, h4, h5 {
  color: #2f343b;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

h1 { font-size: 2.4rem; }

h2 { font-size: 1.4rem; }

h4 { font-size: 1rem; }

p {
  display: block;
  margin: 0 0 1.2rem 0;
}

/* =======================================================================
   Logo
   ======================================================================= */

.logo {
  background: #373c44;
  border-radius: 3px;
  color: #f5d25d;
  float: left;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 3px;
  padding: .1em .9em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  .logo {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 164px;
  }
}

.logo--login {
  display: block;
  float: none;
  font-size: 1.6rem;
  margin: 0 auto 2rem auto;
  text-align: center;
  width: 164px;
}

.logo--footer {
  display: inline-block;
  float: none;
  margin: 0 0 .8rem 0;
}

/* =======================================================================
   Nav
   ======================================================================= */

nav { float: right; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  padding-right: 1rem;
}

nav li:last-child { padding-right: 0; }

nav li a { 
  color: #fff; 
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 37px;
}

nav a:hover { color: #ddd; }

@media screen and (max-width: 600px) {
  nav {
    display: block;
    float: none;
    margin-top: 1.2rem;
    text-align: center;
  }
}

/* =======================================================================
   Forms
   ======================================================================= */

.login-container {
  margin: 0 auto;
  max-width: 450px;
}

.login-form {
  border-radius: 3px;
  background: #f1f1f1;
  padding: 2rem;
}

.login-form label { 
  display: block;
  margin-bottom: .5rem;
}

.form-textfield {
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  color: #555;
  margin-bottom: 1.5rem;
  outline: none;
  padding: 1rem;
  width: 100%;
}

.box-sort-menu { margin-bottom: 1.5rem; }

.box-sort-menu h2 { float: left; }

@media screen and (max-width: 600px) {
  .box-sort-menu h2 { 
    float: none;
    margin-bottom: .5rem;
  }
}

.box-sort-menu form { float: right; }

@media screen and (max-width: 600px) {
  .box-sort-menu form { float: none; }
}

.sort-order {
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  color: #555;
  font-size: .9rem;
  outline: none;
  padding: .5rem;
}

.button {  
  border: none;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  margin: 0 auto;
  outline: none;
  padding: 1rem;
  width: 100%;
  -webkit-appearance: none;
  -o-transition: background .2s;
  -ms-transition: background .2s;
  -moz-transition: background .2s;
  -webkit-transition: background.2s;
  transition: background .2s;
}

.button-primary { background: #61a667; }

.button-primary:hover { background: #599d5f; }

.login-link {
  display: block;
  font-size: 1rem;
  margin-top: 2rem;
  text-align: center;
}

.search {
  background: #fff url('../images/search-icon.svg') 1rem center no-repeat;
  background-size: 20px;
  margin-bottom: 0;
  padding-left: 3.3rem;
}

/* =======================================================================
   Footer
   ======================================================================= */

footer {
  background: #2f343b;
  color: #fff;
  font-size: .9rem;
  margin-top: 3rem;
  padding: 1rem 0;
}

.footer-container {
  margin: 0 auto;
  width: 90%; 
}

.footer-header {
  border-bottom: 1px solid #373c44;
  padding: 1rem;
}

.slogan { color: #ddd; }

.footer-section { margin-bottom: 1rem; }

.footer-section:last-child { margin-bottom: 0; }

.footer-section h4 { color: #fff; }

footer ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section a { color: #646e7d; }

.footer-section a:hover { color: #86909f; }

/* =======================================================================
   Tables
   ======================================================================= */

.vacation-package {
  background: #fff;
  border-radius: 3px;
  font-size: .9rem;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
}

.vacation-package th:first-child { padding: 1rem 2rem; }
.vacation-package td { padding: .7rem 0;}

.vacation-package td:first-child { padding-left: 2rem; }
.vacation-package td:last-child { padding-right: 2rem; }

.vacation-package__header {
  background: #2f343b;
  color: #fff;
  font-weight: 400;
  text-align: left;
}

.vacation-package__dates { }
.vacation-package__days { width: 15%; }
.vacation-package__daily-price { width: 15%; }
.vacation-package__total-price { width: 15%; }
.vacation-package__button { max-width: 100px; }

.vacation-package__button button {
  display: block;
  font-size: .7rem;
  margin: 0 0 0 auto;
  max-width: 75px;
  padding: .4rem;
  text-transform: uppercase;
}

.vacation-package__row { border-top: 1px solid #ddd; }
.vacation-package__row:first-child { border-top: none; }

/*.vacation-package__row:nth-child(odd) { background: #ddd; }*/

.vacation-package__row--unavailable { 
  background: #f7f7f7;
  color: #bbb; 
}

.vacation-package__row--unavailable .vacation-package__button button { 
  background: #d9d9d9;
  color: #bbb;
  cursor: default;
}

.vacation-package__row--sale { background: #fbedbd; }

/* =======================================================================
   Grid
   ======================================================================= */

.box {
  background: #f1f1f1;
  border-radius: 3px;
  margin: 2rem 0;
  padding: 1.5rem;
}

.row:last-child { margin-bottom: 0; }

.column {
  float: left;
  margin: 0;
  padding: 1rem ;
}

@media screen and (max-width: 600px) {
  .column { padding: 1rem .5rem; }
}

.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }

.column.one-fifth { width: 20%; }
.column.two-fifths { width: 40%; }

@media screen and (max-width: 720px) {
  .column.third, .column.one-fifth, .column.two-fifths { width: 100%; }
}

/* =======================================================================
   Cards
   ======================================================================= */

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  display: block;
  overflow: hidden;
  width: 100%;
  -o-transition: border, box-shadow .2s;
  -ms-transition: border, box-shadow .2s;
  -moz-transition: border, box-shadow .2s;
  -webkit-transition: border, box-shadow .2s;
  transition: border, box-shadow .2s;
}

.card:hover {
  border: 1px solid #bbb;
  box-shadow: 0 0 6px #bbb;
}

.thumbnail {
  height: 200px;
  width: 100%;
}

.card-box { padding: .7rem 1rem; }

.card-box-title { 
  font-weight: 700;
  margin-bottom: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-data-left { float: left; }
.meta-data-right { float: right; }

.price {
  color: #61a667;
  font-weight: 700;
}

/* =======================================================================
   Destinations
   ======================================================================= */

.london { 
  background: url('../images/locations/london/london.jpeg');
  background-position: 50%;
  background-size: cover;
}

.paris {
  background: url('../images/locations/paris.jpeg');
  background-position: 50%;
  background-size: cover;
}

.newyork { 
  background: url('../images/locations/newyork.jpeg');
  background-position: 50%;
  background-size: cover;
}

.rome { 
  background: url('../images/locations/rome.jpeg');
  background-position: 50%;
  background-size: cover;
}

.cancun { 
  background: url('../images/locations/cancun.jpeg');
  background-position: 50%;
  background-size: cover;
}

.miami { 
  background: url('../images/locations/miami.jpeg');
  background-position: 50%;
  background-size: cover;
}

.munich { 
  background: url('../images/locations/munich.jpg');
  background-position: 50%;
  background-size: cover;
}

.ochorios { 
  background: url('../images/locations/ochorios.jpg');
  background-position: 50% 55%;
  background-size: cover;
}

.sanjuan { 
  background: url('../images/locations/sanjuan.jpg');
  background-position: 50%;
  background-size: cover;
}

.sandiego { 
  background: url('../images/locations/sandiego.jpg');
  background-position: 50%;
  background-size: cover;
}

/* =======================================================================
   Gallery
   ======================================================================= */

.london-national-gallery { 
  background: url('../images/locations/london/london-national-gallery.jpg');
  background-size: cover;
  border-radius: 3px;
}

.london-eye {
  background: url('../images/locations/london/london-eye.jpg');
  background-size: cover;
  border-radius: 3px;
}

.tower-bridge {
  background: url('../images/locations/london/tower-bridge.jpg');
  background-size: cover;
  border-radius: 3px;
}

.london-downtown {
  background: url('../images/locations/london/london-downtown.jpg');
  background-size: cover;
  border-radius: 3px;
}

/* =======================================================================
   Hotels
   ======================================================================= */

.belgraves { 
  background: url('../images/hotels/belgraves.jpg');
  background-position: 50% 40%;
  background-size: cover;
}

.claridge { 
  background: url('../images/hotels/claridge.jpg');
  background-size: cover;
}

.townhall { 
  background: url('../images/hotels/townhall.jpg');
  background-size: cover;
}

/* =======================================================================
   Clearfix
   ======================================================================= */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after { clear: both; }

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  clear: both;
  *zoom: 1;
}