@charset "UTF-8";
/*
==========================================================================
Style.css - based on SCSS
==========================================================================
*/
/*------------------------------------*\
Index - Stylesheet: style.css

	0.  Variables
	1.  Mixins
	2.  Helper Classes
	3.  Global (body, page sructure)
	4.  Header
	5.  Navigation
	6.  Pagination
	7.  Breadcrumb
	8.  Images
	9.  Media
	10. Buttons
	11. Lists
	12. Forms
	13. Links
	14. Tables
    ---
	15. Selectors
	16. Footer

\*------------------------------------*/
/*------------------------------------*\
    0. Variables
\*------------------------------------*/
/*------------------------------------*\
    $Fonts
\*------------------------------------*/
* {
  font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: uppercase; }

p {
  font-size: 16px;
  line-height: 32px; }
  p.emphasis {
    border-bottom: 1px solid #eeeeee;
    font-size: 26px;
    font-style: italic;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 60px;
    padding: 0 0 72px 0px; }

.bold {
  font-weight: bold; }

.center {
  text-align: center; }

.uppercase {
  text-transform: uppercase; }

/*------------------------------------*\
    $Brand-Colors
\*------------------------------------*/
/*------------------------------------*\
    Include.scss
\*------------------------------------*/
/**
 * Generic helper classes and project mixins.
**/
/*------------------------------------*\
    1. Mixins
\*------------------------------------*/
/**
 * Vendor Prefix base setup
**/
/**
 * CSS keyframe animations
**/
/*------------------------------------*\
    2. Helper
\*------------------------------------*/
/**
 * A series of helper classes
**/
.fr {
  float: right; }

.fl {
  float: left; }

.text-center,
.text-centre {
  text-align: center; }

/**
 * Add a help cursor to any element that gives the user extra information on
 * `:hover`.
**/
.informative {
  cursor: help; }

/**
 * Mute an object by reducing its opacity.
**/
.muted {
  opacity: 0.5;
  filter: alpha(opacity=50); }

/**
 * Align items to the right where they imply progression/movement forward, e.g.:
 * 
   <p class=proceed><a href=#>Read more...</a></p>
 * 
**/
.proceed {
  text-align: right; }

/**
 * Add a right-angled quote to links that imply movement, e.g.:
 * 
   <a href=# class=go>Read more</a>
 * 
**/
.go:after {
  content: " »"; }

/**
 * Apply capital case to an element (usually a `strong`).
**/
.caps {
  text-transform: uppercase; }

/**
 * Hide content off-screen without resorting to `display:none;`
**/
.accessibility {
  position: absolute;
  left: -99999px; }

[dir=rtl] .accessibility {
  left: auto;
  right: -99999px; }

/**
 * Hide content based on breakpoint
**/
.hide {
  position: absolute;
  left: -9999px; }

/**
 * Includes all the various parts
**/
/*------------------------------------*\
    3.  Global (body, page sructure)
\*------------------------------------*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased; }

p {
  color: #656c78; }
  p.emphasis {
    color: #e60000; }

.image-container {
  display: table;
  margin: 0 auto;
  padding: 120px 0;
  overflow: hidden; }
  .image-container ul {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 200%; }
  .image-container li {
    float: left;
    list-style: none;
    margin-right: 18px; }
    .image-container li:last-child {
      margin-right: 0; }

.content-wrapper p {
  margin-bottom: 24px; }
.content-wrapper section {
  margin-bottom: 120px; }
  .content-wrapper section:last-child {
    border-bottom: none; }

/*------------------------------------*\
    4.  Header
\*------------------------------------*/
.header-wrapper {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  color: #fff;
  min-height: 800px;
  position: relative;
  text-align: center; }
  .header-wrapper a {
    color: white; }
    .header-wrapper a:hover {
      text-decoration: none; }
    .header-wrapper a:visited {
      color: white; }
  .header-wrapper h1#logo {
    font-size: 32px;
    letter-spacing: 20px;
    margin-bottom: 0px;
    text-transform: uppercase; }
    .header-wrapper h1#logo:first-letter {
      margin-left: 20px; }
  .header-wrapper p.tag {
    color: #fff;
    font-size: 13px;
    font-style: italic;
    letter-spacing: normal;
    text-transform: capitalize; }
  .header-wrapper h2 {
    display: none;
    font-size: 36px;
    letter-spacing: 12px;
    margin-top: 180px;
    text-transform: uppercase; }
  .header-wrapper .overlay {
    background: linear-gradient(rgba(5, 10, 29, 0.66), rgba(5, 10, 29, 0));
    display: block;
    height: 50%;
    width: 100%;
    position: absolute; }

/*------------------------------------*\
    5.  Navigation
\*------------------------------------*/
header nav a,
footer nav a {
  color: white;
  font-weight: 600;
  text-transform: uppercase; }
  header nav a:hover,
  footer nav a:hover {
    color: white;
    border-bottom: 1px solid white;
    text-decoration: none; }
  header nav a:visited,
  footer nav a:visited {
    color: white; }

header nav {
  margin-top: 38px; }

/*------------------------------------*\
    6.  Pagination
\*------------------------------------*/
/*------------------------------------*\
    7.  Breadcrumb
\*------------------------------------*/
/*------------------------------------*\
    8.  Images
\*------------------------------------*/
/*------------------------------------*\
    9.  Media
\*------------------------------------*/
/*------------------------------------*\
    10. Buttons
\*------------------------------------*/
.button {
  color: #656c78;
  border: 2px solid #656c78;
  font-size: 18px;
  font-weight: 600;
  padding: 24px 36px; }
  .button:hover {
    background: #656c78;
    color: white;
    text-decoration: none; }

/*------------------------------------*\
    11. Lists
\*------------------------------------*/
ul.inline {
  margin: 0px;
  padding: 0px; }
  ul.inline li {
    display: inline-block;
    list-style: none;
    margin-right: 30px; }
    ul.inline li:last-child {
      margin-right: 0; }

/*------------------------------------*\
    12. Forms
\*------------------------------------*/
/*------------------------------------*\
    13. Links
\*------------------------------------*/
/*------------------------------------*\
    14. Tables
\*------------------------------------*/
/*------------------------------------*\
    16.  Footer
\*------------------------------------*/
.footer-wrapper {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  color: #fff;
  font-size: 18px;
  line-height: 32px;
  min-height: 805px;
  padding: 240px 0 0 0;
  text-align: center; }
  .footer-wrapper h3 {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 8px;
    margin-bottom: 46px;
    text-transform: uppercase; }
  .footer-wrapper footer {
    font-size: 14px;
    padding: 120px 0; }
  .footer-wrapper p {
    font-size: 18px;
    color: white; }
    .footer-wrapper p.copyright {
      font-size: 14px; }
  .footer-wrapper .feature {
    margin-bottom: 80px; }

/*------------------------------------*\
    15. Selectors
\*------------------------------------*/
.homepage section {
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 0;
  padding: 120px 0; }
  .homepage section:last-child {
    border-bottom: none; }
  .homepage section h2 {
    color: #212f45;
    letter-spacing: 8px;
    margin: 40px 0 30px 0; }
  .homepage section p {
    margin-bottom: 60px; }
.homepage .header-wrapper {
  background-image: url(../../img/homepage-header.jpg); }
  .homepage .header-wrapper h2 {
    display: block; }
.homepage .footer-wrapper {
  background-image: url(../../img/homepage-footer.jpg); }

.about .header-wrapper {
  background-image: url(../../img/header-wrapper-hotel.jpg); }

.automobiles .header-wrapper {
  background-image: url(../../img/header-wrapper-automobiles.jpg); }

.cube-sugar .header-wrapper {
  background-image: url(../../img/header-wrapper-cube-sugar.jpg); }

.hotel .header-wrapper {
  background-image: url(../../img/header-wrapper-hotel.jpg); }

.juice .header-wrapper {
  background-image: url(../../img/header-wrapper-juice.jpg); }

.rice .header-wrapper {
  background-image: url(../../img/header-wrapper-rice.jpg); }

.shipping .header-wrapper {
  background-image: url(../../img/header-wrapper-shipping.jpg); }

.products .header-wrapper {
  background-image: url(../../img/header-wrapper-hotel-man.jpg); }
.products .product {
  margin-top: 24px;
  text-align: left; }
  .products .product a {
    color: #656c78; }
    .products .product a:hover {
      text-decoration: none; }
    .products .product a:visited {
      color: #656c78; }
  .products .product h2 {
    margin-bottom: 60px; }
  .products .product h3 {
    text-transform: capitalize; }
  .products .product p {
    margin-bottom: 24px; }

.footer-wrapper {
  background-image: url(../../img/footer-wrapper-hotel.jpg); }