@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*======================================
EXTEND
======================================*/
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/*======================================
MIXINS
======================================*/
/*======================================
FUNCTIONS
======================================*/
form, .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #F2F0EE;
  padding: 2%;
  margin-bottom: 2%; }
  form div, .form div {
    display: flex;
    flex-direction: column;
    margin-top: 10px; }
    form div input, .form div input {
      margin-bottom: 10px;
      padding: 10px;
      border: white; }
  form textarea, .form textarea {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    border: white; }
  form button, .form button {
    margin-top: 10px; }

/*======================================
EXTEND
======================================*/
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/*======================================
MIXINS
======================================*/
/*======================================
FUNCTIONS
======================================*/
/*======================================
BASE
======================================*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  font-size: 14px; }
  @media (min-width: 768px) {
    html, body {
      font-size: 16px; } }

body {
  margin: 0;
  background: #fff;
  color: #424041;
  cursor: auto;
  font-family: Arial;
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75em;
  font-family: 'GillSans-Light', 'Gill Sans';
  font-weight: normal;
  line-height: 1.15; }

h1 {
  font-size: 3.000em;
  /* 48px */ }

h2 {
  font-size: 2.500em;
  /* 40px */ }

h3 {
  font-size: 1.875em;
  /* 30px */ }

h4 {
  font-size: 1.500em;
  /* 24px */ }

h5 {
  font-size: 1.250em;
  /* 20px */ }

h6 {
  font-size: 1.125em;
  /* 18px */ }

h1 {
  color: #888; }

h3.section-title {
  font-family: 'GillSans';
  font-size: 1.375em;
  /* 22px */ }
  h3.section-title a, h3.section-title a:hover, h3.section-title a:focus {
    color: #424041;
    text-decoration: none; }
  h3.section-title a:hover {
    text-decoration: underline; }

p {
  text-indent: 3em;
  margin: 0 0 1em;
  /* 16px */ }

a {
  color: #89957D;
  text-decoration: none;
  padding: 0 0.5em 0 0.5em; }
  a:hover, a:focus {
    color: #89957D;
    background-color: white; }
  a.no-underline {
    text-decoration: none !important; }
  a.text-black, a.text-black:hover, a.text-black:focus {
    color: #424041; }

.font-bold {
  font-weight: bold; }

hr {
  height: 1px;
  margin-top: 25px;
  margin-bottom: 40px;
  border: 0;
  background: #D1CFD0; }
  hr.dashed {
    background-color: transparent;
    border-top: 1px solid #D1CFD0; }

img {
  display: block;
  margin-bottom: 16px;
  border-style: none; }
  img.fluid {
    width: 100%;
    height: auto; }

.image-mask-square {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("http://blog.babylonstoren.com/wp-content/uploads/2013/09/Babel-Cookbook.jpg"); }

.image-ratio-2-1 {
  display: inline-block;
  position: relative;
  width: 100%;
  margin-bottom: 15px; }
  .image-ratio-2-1:after {
    padding-top: 50%;
    display: block;
    content: ''; }
  .image-ratio-2-1 img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

ul {
  padding: 0 0 0 16px;
  list-style-type: none; }
  ul li {
    position: relative;
    margin: 0 0 6px; }

ol {
  padding-left: 25px; }
  ol li {
    margin: 0 0 0.625em;
    /* 10px */ }

.transition-all {
  -webkit-transition: all;
  -moz-transition: all;
  -ms-transition: all;
  -o-transition: all;
  transition: all; }

.no-wrap {
  white-space: nowrap; }

.inline {
  display: inline-block; }

.mouse-pointer:hover {
  cursor: pointer; }

.backgroundWhite {
  color: #89957D; }
  .backgroundWhite * {
    color: #89957D; }

.backgroundBlack {
  color: white; }
  .backgroundBlack * {
    color: white; }

/*======================================
LAYOUT
======================================*/
.row {
  padding: 0 20px; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto; }

.left {
  float: left; }

.right {
  float: right; }

/*======================================
FONT-SIZE
======================================*/
.small {
  margin-bottom: 0.625em;
  /* 10px */
  font-size: 0.8125em;
  /* 14px */
  line-height: 1.35; }

@media (min-width: 992px) {
  .small-on-md-up {
    margin-bottom: 0.625em;
    /* 10px */
    font-size: 0.8em;
    /* 13px */
    line-height: 1.35; } }
/*======================================
TEXT-TRANSFORM
======================================*/
.text-uppercase {
  text-transform: uppercase; }

.text-lowercase {
  text-transform: lowercase; }

/*======================================
HELPER CLASSES
======================================*/
.align-vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.text-left {
  text-align: left !important; }

.text-center {
  text-align: center !important; }

.text-right {
  text-align: right !important; }

.text-justify {
  text-align: justify !important; }

.color-green-1 {
  background-color: #E7EDE3; }

.color-brown-1 {
  background-color: #F2F0EE; }

.text-color-green-3 {
  color: #91B57F; }

.border-none {
  border: none !important; }

.border-brown-3 {
  border: 1px solid #D1CFD0; }

/*======================================
BUTTONS
======================================*/
.button, button {
  display: inline-block;
  margin: 0 15px 15px 0;
  padding: 9px 12px;
  background-color: #C7D3BD;
  border: none;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  font-size: 0.875em;
  /* 14px */
  font-family: 'GillSans-SemiBold'; }
  .button:hover, .button:focus, button:hover, button:focus {
    background-color: #bac9ae;
    color: #fff; }
  .button.small, button.small {
    padding: 6px 12px;
    font-size: 1em;
    font-family: 'GillSans'; }
  .button.large, button.large {
    font-size: 1.125em;
    padding: 12px 20px 14px; }
  .button.outline, button.outline {
    padding: 7px 15px 5px;
    background-color: transparent;
    border: 1px solid #333;
    color: #999;
    font-family: 'GillSans'; }
    .button.outline:hover, .button.outline:focus, button.outline:hover, button.outline:focus {
      background-color: #d4d0cf;
      color: #fff; }
  .button.white, button.white {
    background-color: #fff;
    color: #91B57F; }
    .button.white:hover, .button.white:focus, button.white:hover, button.white:focus {
      background-color: #fbfafa;
      color: #91B57F; }
  .button.grey, button.grey {
    background-color: #F2F0EE;
    color: #c5c2c3; }
    .button.grey:hover, .button.grey:focus, button.grey:hover, button.grey:focus {
      background-color: #e7e3e0;
      color: #c5c2c3; }
  .button.brown, button.brown {
    background-color: #D1CFD0;
    color: #fff; }
    .button.brown:hover, .button.brown:focus, button.brown:hover, button.brown:focus {
      background-color: #c5c2c3;
      color: #fff; }
  .button.expand, button.expand {
    display: block;
    margin-right: 0; }
  .button.arrow, button.arrow {
    display: block;
    position: relative;
    margin-right: 0;
    padding: 1em 1.25em;
    /* 16px 20px */
    background-color: transparent;
    border: 1px solid #D1CFD0;
    color: #716C68;
    font-family: 'GillSans';
    font-size: 1.125em;
    /* 18px */
    line-height: 1; }
    .button.arrow:hover, .button.arrow:focus, button.arrow:hover, button.arrow:focus {
      background-color: rgba(0, 0, 0, 0.05);
      color: #716C68; }
    .button.arrow .arrow-icon, button.arrow .arrow-icon {
      position: absolute;
      top: 0;
      right: 15px;
      bottom: 0;
      display: block;
      width: 14px;
      background: url("../img/icons/arrow-3-right.png") no-repeat right center; }

.taula {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0; }
  .taula .tCell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 0.5em;
    overflow: hidden;
    list-style: none;
    border: solid 3px white;
    background-color: #C7D3BD; }
    .taula .tCell > h1, .taula .tCell > h2, .taula .tCell > h3, .taula .tCell > h4, .taula .tCell > h5, .taula .tCell > h6 {
      margin: 0; }
  .taula .tCellTitle {
    background-color: #bac9ae; }
  .taula .tCellOcupat {
    background-color: #CD3333; }
  .taula .tCellPre {
    background: #EEB4B4; }
  .taula .primerDia {
    position: relative;
    border: solid; }
    .taula .primerDia:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #CD3333;
      transform-origin: right top;
      transform: rotate(-50deg); }
  .taula .primerDiaPre {
    position: relative;
    overflow: hidden;
    border: solid; }
    .taula .primerDiaPre:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #EEB4B4;
      transform-origin: right top;
      transform: rotate(-50deg); }
  .taula .darrerDia {
    position: relative;
    overflow: hidden;
    border: solid; }
    .taula .darrerDia:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #CD3333;
      transform-origin: left top;
      transform: rotate(50deg); }
  .taula .darrerDiaPre {
    position: relative;
    overflow: hidden;
    border: solid; }
    .taula .darrerDiaPre:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #EEB4B4;
      transform-origin: left top;
      transform: rotate(50deg); }
  .taula .tCellWhite {
    background-color: white; }

.taula--2cols > .tCell {
  width: 50%; }

.taula--3cols > .tCell {
  width: 33%; }

.taula--4cols > .tCell {
  width: 25%; }

.taula--5cols > .tCell {
  width: 20%; }

.taula--6cols > .tCell {
  width: 16.6%; }

.taula--7cols > .tCell {
  width: 14.28%; }

#menuCalendari {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #89957D; }
  #menuCalendari #mes {
    flex-grow: 2;
    text-align: center;
    padding-left: 20px; }
  #menuCalendari #any {
    padding-right: 20px; }
  #menuCalendari #mesEnvant, #menuCalendari #mesEnrera {
    font-size: 300%; }

#preReserva {
  display: flex;
  justify-content: space-around; }

#dataArribada, #dataSortida {
  max-width: 100%; }

#layout {
  overflow-x: hidden;
  /*
  To change this license header, choose License Headers in Project Properties.
  To change this template file, choose Tools | Templates
  and open the template in the editor.
  */
  /* 
      Created on : 31-may-2016, 14:07:12
      Author     : Andreu Adrover
  */ }
  #layout #header {
    height: 490px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover; }
    #layout #header #headerBar {
      padding-top: 40px;
      width: calc(50% + 42px);
      align-self: flex-start;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between; }
      #layout #header #headerBar #headerNav {
        align-self: flex-start;
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center; }
      #layout #header #headerBar #homeIcon {
        width: 85px;
        height: 85px;
        padding: 0; }
        #layout #header #headerBar #homeIcon:hover, #layout #header #headerBar #homeIcon:focus {
          color: none;
          background-color: green; }
      @media screen and (max-device-width: 480px) {
        #layout #header #headerBar {
          margin-top: 5%;
          width: calc(90%);
          font-size: 200%; } }
    #layout #header #headerContent {
      width: 40vw; }
    #layout #header #langMenu {
      position: absolute;
      top: 1vw;
      right: 1vw; }
      @media screen and (max-device-width: 480px) {
        #layout #header #langMenu {
          font-size: 200%; } }
  #layout #content {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    padding: 3%; }
    #layout #content .up-align {
      align-self: flex-start; }
    #layout #content .descripcio {
      width: 50%; }
      @media screen and (max-device-width: 480px) {
        #layout #content .descripcio {
          width: 90%; } }
    #layout #content .fotosSonNicolauet, #layout #content .fotosHort {
      width: 48%; }
      #layout #content .fotosSonNicolauet img, #layout #content .fotosHort img {
        width: 100%; }
    #layout #content .firstFoto {
      align-self: flex-end; }
  #layout #footer {
    background-color: grey;
    height: 171.5px;
    opacity: 0.7;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%; }
    #layout #footer ul#contactar {
      padding-left: 7%; }
      #layout #footer ul#contactar li {
        list-style-type: none; }
      #layout #footer ul#contactar li::before {
        background-color: #5F5F5F;
        font-size: 26px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        margin: 4px; }
      #layout #footer ul#contactar li:nth-child(2)::before {
        content: "✉ "; }
      #layout #footer ul#contactar li:nth-child(3)::before {
        content: "☎ "; }

/*# sourceMappingURL=style.css.map */