/* 
*  Styles Overrides
*  Add client specific overrides for this website
*/

/* MOBILE SMALL - Non-Retina - (0-767px) */
/* --------------- Header Font styles ---------------- */
/* Brand block */
.name-slogan {
  /*display: none;*/ /* Remove comment to hide the site name and slogan text - if using a logo */
}
.site-slogan { /* Site slogan */
  /*display: none;*/ /* Remove comment to hide the site slogan only */
}
#block-footerblock .layout__region-col2 h4 {
  /*display: none;*/ /* Hide H4 title in col 2 on mobile */
}
/* if banner image overlay is required, un comment This */
/*.banner-container:after {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(33,33,33,0.65);
  content: '';
  display: block;
  top: 0;
  box-shadow: inset 0 0 100px 50px rgba(0, 0, 0, 0.35);
}*/

/* Local Overrides */
strong, .strong, b {
  font-weight: calc(var(--d-font-weight) + 300);
}
#header {
  background: url(../images/backgrounds/Cocoon-Header-Background-mobile.jpg) top -1rem left 0 var(--color-six);
  background-repeat: no-repeat;
}
.fixed-header #header {
  background-position: top -3.5rem left 0;
}
.js #header-wrap {
  height: calc(var(--d-heading-height-total) + var(--d-navigation-height) + 0.4rem); /* Add on the height of the padding below the menu icon (minus 1px) to the normal calc */
}
#block-designit-headercontact {
  top: 1.6rem;
  position: absolute;
  right: 0;
}
#block-designit-headercontact p {
  font-size: 1.3rem;
}
.header {
  align-items: flex-end;
}
.menu-icons-wrap {
  padding-bottom: 0.5rem;
}
.fixed-header .menu-icons-wrap {
  padding-bottom: 0;
}
#block-designit-tagline .content {
  padding-top: 1rem;
}
#block-designit-tagline h4 {
  font-size: 1.3rem;
  display: inline;
}
#block-designit-tagline {
  position: relative;
  margin-top: 0;
}
.fixed-header #block-designit-tagline .content {
  margin-top: -30rem;
}
#block-designit-footermain {
  background: linear-gradient(0deg, var(--color-three-hover) 3%, var(--color-three) 65%, var(--color-three) 95%, var(--color-six) 98%);
}
.paragraph--id-492 {
  background: url(../images/backgrounds/cocoon-footer-background-mobiles-large.jpg) bottom center var(--color-six); 
  background-size: contain;
  background-repeat: no-repeat;
  height: 13rem;
}
.js .slideshow.fixed-height .bg-contain img, .js .slideshow.fixed-height .paragraph--type-image img {
  max-height: none !important; /* override base settings */
}
/* Image Border Radius */
.paragraph--view-mode-_-column-square img,
div:not(.accordion-wrap) > .bgcol,
.paragraph--type-link .link-button,
.paragraph--type-link .link-button .media {
  border-top-right-radius: 8rem;
  border-bottom-left-radius: 8rem;
}
.paragraph--view-mode-_-column-cropped img {
  border-radius: 2rem;
}
/* home page colour boxes */
.paragraph--id-496,
.paragraph--id-497,
.paragraph--id-498 {
  display: flex;
  height: 100%;
}
.layout__region:has(.paragraph--id-496), 
.layout__region:has(.paragraph--id-497), 
.layout__region:has(.paragraph--id-498) {
  margin-bottom: var(--d-margin-bottom);
}
button,
.button {
  text-transform: uppercase;
}
div.darkblue a.button {
  background: #00498a;
  border-color:#00498a;
}
div.darkblue a.button:hover,
div.darkblue a.button:focus {
  background: #002f6a;
  border-color:#002f6a;
}
div.green a.button {
  background: #4e9600;
  border-color: #4e9600;
}
div.green a.button:hover,
div.green a.button:focus {
  background: #337700;
  border-color: #337700;
}
div.pink a.button {
  background: #d74b73;
  border-color: #d74b73;
}
div.pink a.button:hover,
div.pink a.button:focus {
  background: #c63053;
  border-color: #c63053;
}
div.lightblue a.button {
  background: #0071b3;
  border-color: #0071b3;
}
div.lightblue a.button:hover,
div.lightblue a.button:focus {
  background: #005198;
  border-color: #005198;
}
div.orange .button {
  background: #ea7c00;
  border-color: #ea7c00;
  color: var(--color-dark-grey)
}
div.orange .button:hover,
div.orange .button:focus {
  background: #e05c00;
  border-color: #e05c00;
}
.paragraph--type-link .paragraph--type-text h5 {
  background: url(../images/cloud.svg) bottom right no-repeat;
  padding: 2.4rem 4.8rem 3.2rem 2.4rem;
  background-size: cover;
  display: inline-block;
}
/* Find a Creche */
#block-designit-exposedformcreche-mappage-1 .form--inline,
#block-exposedformcreche-mappage-1--3 .form--inline,
#views-exposed-form-creche-map-page-1 .form--inline {
  display: block;
}
#block-designit-exposedformcreche-mappage-1 label,
#block-designit-exposedformcreche-mappage-1 div,
#block-exposedformcreche-mappage-1--3 label,
#block-exposedformcreche-mappage-1--3 div {
  color: var(--color-dark-grey);
}
#block-designit-exposedformcreche-mappage-1 .form--inline .form-item,
#block-designit-exposedformcreche-mappage-1 .form-actions .button,
#block-exposedformcreche-mappage-1--3 .form--inline .form-item,
#block-exposedformcreche-mappage-1--3 .form-actions .button,
.block-views-exposed-filter-blockcreche-map-page-1 .form--inline .form-item {
  margin-right: 0;
}
#block-designit-exposedformcreche-mappage-1 .form-actions,
#block-exposedformcreche-mappage-1--3 .form-actions {
  text-align: right;
  padding-bottom: 0;
}
.block-views-blockfind-a-creche-filter-block-heading-block-1 .bgcol {
  border-bottom-left-radius: 0 !important;
  margin-bottom: 0 !important;
}
.block-views-blockfind-a-creche-filter-block-heading-block-1 .bgcol .paragraph-content {
  padding-bottom: 0 !important;
}
.block-views-exposed-filter-blockcreche-map-page-1 .bgcol {
  border-top-right-radius: 0 !important;
}
.block-views-exposed-filter-blockcreche-map-page-1 .bgcol .paragraph-content {
  padding-top: 0 !important;
}
.block-views-exposed-filter-blockcreche-map-page-1 label, 
.block-views-exposed-filter-blockcreche-map-page-1 .description {
  color: var(--color-dark-grey);
}
.block-views-exposed-filter-blockcreche-map-page-1 .form-search, 
.block-views-exposed-filter-blockcreche-map-page-1 .form-number {
  border-color: var(--color-dark-grey);
}
#views-exposed-form-creche-map-page-1 .location-input-geocoder {
  display: none !important;
}
/* Quote */
.view-quote h3 {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
/* Blockquotes */
blockquote.white {
  border-left-color: var(--color-white);
}
blockquote.red {
  border-left-color: var(--color-red);
}
blockquote.orange {
  border-left-color: var(--color-four);
}
blockquote.lightblue {
  border-left-color: var(--color-one);
}
blockquote.green {
  border-left-color: var(--color-three);
}
blockquote.pink {
  border-left-color: var(--color-five);
}
blockquote.darkblue {
  border-left-color: var(--color-two);
}
blockquote {
  background: rgba(255,255,255,0.35);
}
.paragraph--id-12, /* Contact Form */
.paragraph--id-503 { /* Booking Deposit Form */
  background-color:rgba(68,201,229,0.25);
  border-radius: 1rem;
}
.paragraph--id-12 .form-actions,
.paragraph--id-503 .form-actions {
  padding-bottom: 0 !important;
}
.paragraph--id-503 .field-prefix {
  background-color: var(--color-three);
  border-color: var(--color-three);
  color: var(--color-white);
}
/* Payment Steps */
.path-checkout #edit-payment-information-add-payment-method-billing-information::before {
  --d-font-size: 2.2rem;
  --d-color: var(--color-two);
  --d-margin-top: var(--d-space-zero);
  --d-margin-bottom: var(--d-space-s);
  --d-text-align: left;
  --d-font-weight: 400;
  --d-line-height: var(--d-line-height-s);
  content: 'Billing Address';
  display: block;
  font-size: var(--d-font-size);
  color: var(--d-color);
  padding-top: var(--d-margin-top);
  margin-top: 3rem;
  margin-bottom: var(--d-margin-bottom);
  text-align: var(--d-text-align);
  font-weight: var(--d-font-weight);
  line-height: var(--d-line-height);
  font-family: var(--d-font-family);
}
.view-commerce-checkout-order-summary .view-content {
  border-bottom: 1px solid var(--color-mid-grey);
  margin-bottom: 1rem;
}
.view-commerce-checkout-order-summary .views-row {
  display: flex;
  border-top: 1px solid var(--color-mid-grey);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.view-commerce-checkout-order-summary .views-row .views-field {
  padding-left:1rem;
  padding-right:1rem;
}
.order-total-line.order-total-line__total {
  padding-bottom:2.4rem;
}
/* Custom commerce progress bar */
.commerce-progress-bar,
.commerce-progress-bar .content {
  position:relative;
}
.commerce-progress-bar .content li {
  list-style: none !important;
  margin-left: 0 !important;
  text-align: center;
  background:var(--color-mid-grey);
  padding: 5px 15px !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 3rem;
  color: var(--color-dark-grey);
  z-index:3;
  margin-bottom: 0.5rem;
}
.commerce-progress-bar .content li:before {
  content: '' !important;
  margin-left: 0 !important;
  width: 0 !important;
}
.commerce-progress-bar .content li.is-active {
  background:var(--color-three);
  color: var(--color-white);
}
.commerce-progress-bar .content li a {
  color: var(--color-white) !important;
  text-decoration: none !important;
}
.layout-region.layout-region-checkout-secondary {
  background-color: transparent !important;
  padding: 0 !important;
}
.paragraph--id-547 {
  border-radius: 0 !important; /* no border radius on the section with the call to action button under the video on the home page */
}
 
/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */
@media all and (min-width: 768px) {
  /* TABLET - Non-Retina - (768px-1024px) */

  /* Local Overrides */
  #header { /*background images for main content */
    background: url('../images/backgrounds/Cocoon-Header-Background-tablet.jpg') top -1rem left 0 var(--color-six);
    background-repeat: no-repeat;
  }
  .fixed-header #header { /*background images for main content */
    background-position: top -9rem left 0;
  }
  #header-top-wrap .header-top-content {
    top: 2rem;
    max-height: 100%;
  }
  #block-designit-headercontact {
    top: 0;
    position: relative;
  }
  .region.region-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;
    max-width: 80%;
  }   
  #block-designit-tagline h4:last-child {
    padding-left: 4rem;
    margin-bottom: 0;
  }
  #block-designit-headercontact p  {
    font-size: 1.5rem;
  }
  #block-designit-tagline h4 {
    font-size: 1.8rem;
    display: block;
  }
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .container-item, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width-content-contained, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-contained .layout-wrap,
  .twocol-sideleft .col1 .container-item.non-node {
    padding-left: 0;
  }
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .container-item, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width-content-contained .layout-wrap,
  .twocol-sideleft .col1 .container-item.non-node {
      max-width: calc(845px - var(--border-width-vert));
  }
  .paragraph--id-492 {
    background: url(../images/backgrounds/cocoon-footer-background-tablets.jpg) bottom center var(--color-six); 
    background-size: contain;
    background-repeat: no-repeat;
    height: 17rem;
  }
  /* Payment Steps */
  .path-checkout #edit-payment-information-add-payment-method-billing-information::before {
    --d-font-size: 2.4rem;
  }
  /* Custom commerce progress bar */
  .commerce-progress-bar .content ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: flex-start;
    padding-bottom: 3.5rem;
  }
  .commerce-progress-bar .content ul:after {
    display: block;
    position: absolute;
    width: 90%;
    height: 1rem;
    background:var(--color-mid-grey);
    content:"";
    z-index:0;
    top:1.25rem;
    margin-left: 5%;
  }
  .commerce-progress-bar .content li {
    margin-bottom: 0;
  }


}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 768px),
only screen and (min-resolution: 2dppx) and (min-width: 768px) { 
  /* TABLET - Retina - (768px-1024px) */
  
}
@media all and (min-width: 1025px), print {
  /* DESKTOP SMALL - Non-Retina - (1025px-1280px) */
  
  /* Local Overrides */
  .js #header-wrap {
    height: calc(var(--d-heading-height-total) + var(--d-navigation-height) + 11rem); /* Add on the height of the padding above the the .header to the normal calc */
  }  
  #header { /*background images for main content */
    background: url(../images/backgrounds/Cocoon-Header-Background-desktop-small.jpg) top center var(--color-six);
    background-repeat: no-repeat;
  }
  .fixed-header #header {
    background-position: top -10rem center;
  }  
  .header {
    padding-top: 11rem !important;
  }
  .fixed-header .header {
    padding-top: var(--d-heading-padding-tb-fixed) !important;
  }
  #block-designit-headercontact {
    top: 3.5rem;
    position: relative;
  }
  #block-designit-tagline {
    padding-left: 2.4rem !important;
  }
  #block-designit-tagline h4 {
    font-size: 2.4rem;
  }
  #main-navigation {
    position: relative;
  }
  .fullwidth-searchbox-menubox-wrap .navigation-wrap {
    background-color: transparent;
    background: linear-gradient(0deg, rgba(221,231,243,1) 0%, rgba(221,231,243,0) 95%);
    padding-bottom: var(--d-heading-padding-tb);
  }  
  .fixed-header .fullwidth-searchbox-menubox-wrap .navigation-wrap {
    padding-bottom: 0;
  }
  .region.region-navigation-full-width,
  nav.nav-menu.menu--main {
    width: 100%;
  }
  .fixed-header .region-navigation-full-width {
    position: absolute;
    width: 82%;
    right: var(--inner-padding-lr);
    bottom: var(--d-heading-padding-tb-fixed);
  }
  nav.nav-menu.menu--main ul.menu {
    border-left: none !important;
    border-right: none !important;
  }
  nav.nav-menu.menu--main ul.menu:not(.dropdown-menu) > li {
    flex: 1 1 auto;
  }
  nav.nav-menu.menu--main ul.menu:not(.dropdown-menu) > li a {
    text-align: center;
    border-left-color: var(--color-six) !important;
  }
  nav.nav-menu.menu--main ul.menu:not(.dropdown-menu) > li:first-child{
    max-width: calc(var(--d-nav-padding-lr) + var(--d-nav-padding-lr) + 3rem);
  }
  nav.nav-menu.menu--main ul.menu:not(.dropdown-menu) > li:first-child a {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    width: 3rem;
    height: calc(100% - var(--d-nav-padding-tb) - var(--d-nav-padding-tb) - 0.2rem);
    background-image: url(../images/home-ico.svg);
    background-size: 22px 18px;
    background-position: center center;
    text-transform: capitalize;
    background-repeat: no-repeat;
    text-indent: -9999px;
    position: relative;
    border-left-color: var(--color-four) !important;
  }
  nav.nav-menu.menu--main ul.menu:not(.dropdown-menu) > li:last-child a {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  nav.nav-menu.menu--main ul.menu li.expanded ul li {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: calc(100% - 3rem) !important;
    background-color: var(--color-white-hover);
    padding-top: 0.5rem;
  }
  nav.nav-menu.menu--main ul.menu li.expanded ul li:last-child {
    padding-bottom: 1rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  nav.nav-menu.menu--main ul.menu li.expanded ul li a {
    border-radius: var(--d-button-border-radius);
    margin-bottom: 0;
    box-shadow: inset 0px 0px 10px 0px var(--color-four-hover);
  }
  .paragraph--id-492 {
    background: url(../images/backgrounds/cocoon-footer-background-desktops-small.jpg) bottom center var(--color-six); 
    background-size: contain;
    background-repeat: no-repeat;
    height: 23rem;
  }
  .path-frontpage .paragraph--type-link .paragraph--type-text h5 {
    padding: 3.2rem 6.4rem 4.8rem 3.2rem;
  }
  .node--id-39 .page-title, 
  .node--id-39 .paragraph--id-502, 
  .node--id-39 .paragraph--id-503, 
  .node--id-39 .commerce-progress-bar .content { /* Booking Deposit Form */
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
    /* Payment Steps */
    .path-checkout #edit-payment-information-add-payment-method-billing-information::before {
      --d-font-size: 2.6rem;
    }  

}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min-resolution: 192dpi) and (min-width: 1025px),
only screen and (min-resolution: 2dppx) and (min-width: 1025px) { 
  /* DESKTOP SMALL - Retina - (1025px-1280px) */
  
}
@media all and (min-width: 1281px), print {
  /* DESKTOP - Non-Retina - (1281px-1920px) */
  
  /* Local Overrides */
  #header { /*background images for main content */
    background: url(../images/backgrounds/Cocoon-Header-Background-desktop.jpg) top center  var(--color-six);
    background-repeat: no-repeat;
  }
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .container-item, 
  .twocol-sideleft .col1 .container-item.non-node,
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width-content-contained, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width, 
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-contained .layout-wrap {
    padding-left: calc(var(--inner-padding-lr) / 4);
  }
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .container-item, 
  .twocol-sideleft .col1 .container-item.non-node,
  .twocol-sideleft .col1 div:not(.accordion-wrap) > .layout-full-width-content-contained .layout-wrap {
    max-width: calc(845px - (var(--inner-padding-lr) / 4) - var(--border-width-vert));
  }
  .paragraph--id-492 {
    background: url(../images/backgrounds/cocoon-footer-background-desktops.jpg) bottom center var(--color-six); 
    background-size: contain;
    background-repeat: no-repeat;
    height: 31rem;
  }
  .paragraph--type-link .paragraph--type-text h5 {
    font-size: 2.4rem;
  }
  

}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min-resolution: 192dpi) and (min-width: 1281px),
only screen and (min-resolution: 2dppx) and (min-width: 1281px) { 
  /* DESKTOP - Retina - (1281px-1920px) */
  
  /* Local Overrides */
  
}
@media all and (min-width: 1921px), print {
  /* DESKTOP LARGE - Non-Retina - (1921px and larger) */
  
  /* Local Overrides */
  #header { /*background images for main content */
    background: url(../images/backgrounds/Cocoon-Header-Background-desktop-large.jpg) top center var(--color-six);
    background-repeat: no-repeat;
  }
  .paragraph--id-492 {
    background: url(../images/backgrounds/cocoon-footer-background-desktop-larger.jpg) bottom center var(--color-six); 
    background-size: contain;
    background-repeat: no-repeat;
    height: 34rem;
  }
  
}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1920px),
only screen and (min-resolution: 192dpi) and (min-width: 1920px),
only screen and (min-resolution: 2dppx) and (min-width: 1920px) { 
  /* Desktop & Extra Large screen, retina, stuff to override above media query */
  
  /* Local Overrides */
  
}