* {
  box-sizing: border-box;
}
html {
  font-size: 1em;
  color: #222;
  font-family: 'Oxygen', sans-serif;
}
img {
  max-width: 100%;
  height: auto;
}

/* Font */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,500&display=swap" rel="stylesheet');

* {
  font-family: 'Roboto', sans-serif;
}

h1 {
  color: #2d91cb;
}
h1, h2, h3 {
  font-weight: 300;
}
p, li {
  font-size: 1.1em;
  line-height: 1.2em;
  font-weight: 300;
}
.field--name-body p,
.field--name-body li {
  font-size: 1.2em;
  line-height: 1.4em;
}
.field--name-body li::marker {
  color: #2d91cb;
}

/* Layout */

body:not(.path-frontpage) .region-highlighted {
  /*padding-top: 64px;*/
}
.area {

}
.area .area__content {

}
.area--flush {

}
.area--wide .area__content {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
}
.area--flush .area__content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Forms */

label {
  display: block;
  padding-bottom: .25rem;
  color: #777;
  text-transform: uppercase;
  font-size: 0.8em;
}
.form-required:after {
  background-image: none;
  content: '*';
  color: #f6c215;
}
.form-item:first-child {
  margin-top: 0;
}
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="text"] {
  width: 100%;
  height: 2.5rem;
  border: 1px solid #cfcfcf;
  padding: .25rem;
}
textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  padding: .25rem;
}
input[type="submit"] {
  color: #fff;
  text-align: center;
  font-size: 1.2em;
  line-height: 2em;
  text-transform: uppercase;
  border: none;
  background: #0a6eb4;
  transition: background-color .2s;
}
input[type="submit"]:hover {
  background-color: #0c97ed;
  transition: background-color .2s;
}

/* COMMON */

.page__title {
  color: #2d91cb;
  width: 100%;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Table */

table tr td {
  padding: .5rem;
}
table tr td:first-child {
  padding-left: 0;
}
table tr td:last-child {
  padding-right: 0;
}

/* Header */

@media screen and (min-width: 1024px) {
  header.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #2d91cb;
  }
  body:not(.user-logged-in) .region-primary-menu {
    padding-top: 103px;
  }
}
.region-header .block.block-system-branding-block {
  grid-column: 1 / 1;
  padding-top: 1rem;
}
.region-header .block.block-system-branding-block .site-logo img {
  max-width: 240px;
}
.region-header .block.menu--main {
  grid-column: 2 / 2;
}
@media screen and (max-width: 1023px) {
  .header {
    position: relative !important;
  }
}
@media screen and (min-width: 1024px) {
  .region-header {
    display: grid;
    grid-template-columns: 40% 60%;
  }
  .region-header .block.block-system-branding-block .site-logo img {
    width: 240px;
    height: 80px;
  }
  .region-header {
    grid-template-columns: 20% 80%;
  }
}

/* Footer */

.footer {
  background-color: #333;
  color: #fff;
  border-top: 8px solid #f6c215;
}
.footer .area__content {
  padding-bottom: 2.5rem;
}
.footer a {
  color: #fff;
}
@media screen and (min-width: 768px) {
  .footer .region-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer .block:first-child {
    grid-column: 1 / 1;
  }
  .footer .block:nth-child(2) {
    grid-column: 2 / 2;
  }
  .footer .block:last-child {
    grid-column: 3 / 3;
  }
}
/* menu */
#block-junglebeach-footer .menu {
  margin-left: 0;
}
/* Where we are */
#block-whereweare .field--name-body p {
  margin: 0;
}
/* Contact details */
#block-contactdetails .field--name-body a {
  display: inline-block;
  background-color: #2d91cb;
  font-size: 2em;
  line-height: 1.125em;
  padding: .75rem;
  margin-right: .5rem;
  width: 60px;
  height: 60px;
  text-align: center;
  transition: background-color .2s;
}
#block-contactdetails .field--name-body a:hover {
  background-color: #f6c215;
  transition: background-color .2s;
}

/* Copyright */

.copyright {
  background-color: #222;
  color: #fff;
}
.copyright .area__content {
  display: grid;
  grid-template-columns: 50% 50%;
}
.copyright .copyright__statement {
  grid-column: 1 / 1;
}
.copyright .copyright__social-media {
  grid-column: 2 / 2;
}
.copyright a {
  color: #fff;
}
/* Social media */
.copyright #block-smlinks .field--name-body {
  text-align: right;
}
.copyright #block-smlinks .field--name-body a {
  display: inline-block;
  font-size: 1.25em;
  margin: 0 .25rem;
}

/* Sites - Homepage */

/* Main content */
.path-frontpage #block-junglebeach-page-title {
  padding-left: .5rem;
  padding-right: .5rem;
}
.path-frontpage .page-title {
  text-align: center;
}
.node--type-homepage .main-content-wrapper {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto;
}
.node--type-homepage .main-content-wrapper .group-left {
  padding: 0 1rem 1rem;
}
.node--type-homepage .main-content-wrapper .group-right {
  padding: 1rem 1rem 0;
}
.node--type-homepage .main-content-wrapper .field--name-field-link a {
  color: #2d91cb;
  text-decoration: none;
  font-size: 1.2em;
  transition: color .2s;
}
.node--type-homepage .main-content-wrapper .field--name-field-link a:hover {
  color: #0a6eb4;
  transition: color .2s;
}
.node--type-homepage .main-content-wrapper .field--name-field-m-image img {
  height: auto;
}
@media screen and (min-width: 768px) {
  .node--type-homepage .main-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
  }
  .node--type-homepage .main-content-wrapper .group-left {
    grid-column: 1 / 1;
    padding: 0 1rem;
  }
  .node--type-homepage .main-content-wrapper .group-right {
    grid-column: 2 / 2;
    padding: 0 1rem;
  }
}
/* Promo blocks */
.node--type-homepage .field--name-field-promo-blocks {
  padding: 2rem .5rem;
  background: url(/themes/junglebeach/images/bg--promo-blocks--front.jpg) center center no-repeat;
  background-size: cover;
  margin: 2rem auto;
  position: relative;
  color: #fff;
}
.node--type-homepage .field--name-field-promo-blocks .label-wrapper {
  font-size: 2em;
  color: #fff;
  text-align: center;
  padding: .25rem .5rem;
  z-index: 2;
  position: relative;
}
.path-frontpage .field--name-field-promo-blocks > .field__items:after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(45, 145, 203, .8);
}
.path-frontpage .field--name-field-promo-blocks > .field__items .field__item {
  padding: 8px;
  position: relative;
  z-index: 1;
}
.path-frontpage .field--name-field-promo-blocks > .field__items .field__item:first-child {
  grid-column: 1 / 1;
}
.path-frontpage .field--name-field-promo-blocks > .field__items .field__item:nth-child(2) {
  grid-column: 2 / 2;
}
.path-frontpage .field--name-field-promo-blocks > .field__items .field__item:last-child {
  grid-column: 3 / 3;
}
.node--type-homepage .field--name-field-promo-blocks .field--name-node-title h2 {
  margin: 0;
}
.node--type-homepage .field--name-field-promo-blocks .field--name-body {
  text-align: left;
  padding: 0;
}
.node--type-homepage .field--name-field-promo-blocks .field--name-field-link a {
  color: #f6c215;
  transition: color .2s;
}
.node--type-homepage .field--name-field-promo-blocks .field--name-field-link a:hover {
  color: #fff;
  transition: color .2s;
}
@media screen and (min-width: 768px) {
  .path-frontpage .field--name-field-promo-blocks > .field__items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 80rem;
    padding: 1rem;
    margin: 0 auto;
  }
}
/* Testimonials */
#block-views-block-homepage-testimonials-block-1 {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto 1.5rem;
}
#block-views-block-homepage-testimonials-block-1 .block__title {
  text-align: center;
}
#block-views-block-homepage-testimonials-block-1 .views-row {
  width: 100%;
  padding: 0 4rem;
  text-align: center;
}
#block-views-block-homepage-testimonials-block-1 .views-row .field-name-node-title {
  font-size: 1.2em;
  font-weight: bold;
}
#block-views-block-homepage-testimonials-block-1 .views-row .field--name-body {
  font-style: italic;
}
#block-views-block-homepage-testimonials-block-1 .views-row .field--name-field-country {
  color: #777;
}

/* Sites - Basic page */

.node--type-page.node--view-mode-full {
  padding: 2rem 0;
  margin: 0 auto;
}
.node--type-page.node--view-mode-full .field--name-body {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto 1.5rem;
}

/* 2 col paragraph */

.paragraph--type-two-col-panel {
  position: relative;
  overflow: hidden;
}
.paragraph--type-two-col-panel .paragraph__shaped-bg-top {
  background: #eaeaea;
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  transform: skewY(2deg);
  transform-origin: 0;
}
.paragraph--type-two-col-panel .paragraph__shaped-bg-btm {
  background: #eaeaea;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  transform: skewY(-2deg);
  transform-origin: 0;
}
.paragraph--type-two-col-panel .paragraph__content {
  width: 100%;
  max-width: 80rem;
  padding: 3rem .5rem;
  margin: 0 auto;
}
.paragraph--type-two-col-panel .panel__title {
  color: #2d91cb;
}
.paragraph--type-two-col-panel .field-name-field-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.paragraph--type-two-col-panel .field-name-field-link a {
  color: #fff;
  background-color: #0a6eb4;
  text-decoration: none;
  font-size: 1.2em;
  padding: .5rem 1.5rem;
  border: 2px solid #0a6eb4;
  transition: all .4s;
}
.paragraph--type-two-col-panel .field-name-field-link a:hover {
  background-color: #0c97ed;
  border: 2px solid #0c97ed;
  transition: all .4s;
}
@media screen and (min-width: 768px) {
  .paragraph--type-two-col-panel .paragraph__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3rem .5rem;
  }
  .paragraph--type-two-col-panel .group-left {
    grid-column: 1 / 1;
    padding: 1rem;
  }
  .paragraph--type-two-col-panel .group-right {
    grid-column: 2 / 2;
    padding: 1rem;
  }
  .paragraph--type-two-col-panel.panel--reversed .group-left {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  .paragraph--type-two-col-panel.panel--reversed .group-right {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }
  .paragraph--type-two-col-panel .field--name-field-paragraph-titel h2 {
    font-size: 2em;
  }
  .paragraph--type-two-col-panel .field--name-field-paragraph-titel h2 {
    margin-top: 0;
  }
  .paragraph--type-two-col-panel .field--name-field-paragraph-body p,
  .paragraph--type-two-col-panel .field--name-field-paragraph-body li {
    font-size: 1.2em;
  }
}

/* Paragraph type text */
.paragraph--type-text {
  max-width: 80rem;
  width: 100%;
  padding: 1rem;
  margin: 0 auto 1.5rem;
}

/* Paragraoh type image */

.paragraph--type--image {
  text-align: center;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .paragraph--type--image {
    padding: 2rem 1rem;
  }
}

/* Booking - webform page */

.node--type-webform.node--view-mode-full .group-right .field--name-webform {
  background-color: #efefef;
  padding: 1rem;
}
.node--type-webform.node--view-mode-full .group-left {
  padding: 1rem 0;
}
.node--type-webform.node--view-mode-full .group-right {
  padding: 1rem 0;
}
.node--type-webform.node--view-mode-full h1 {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .node--type-webform.node--view-mode-full {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2rem 0;
  }
  .node--type-webform.node--view-mode-full .group-left {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
    padding: 1rem 4rem;
  }
  .node--type-webform.node--view-mode-full .group-right {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }
  .node--type-webform.node--view-mode-full .group-right .field--name-webform {
    padding: 2rem;
  }
}

/* Contact page */

.path-contact .main-content .area__content {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto 1.5rem;
}
.page-node-type-webform .main-content .area__content {
  max-width: 80rem;
  padding: 1rem;
  margin: 0 auto 1.5rem;
}
#block-views-block-webform-map-block-1 {
  margin-bottom: -4px;
}