/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}

:root {box-sizing: border-box;}

*:not(img):not(video):not(svg), *:after, *:before {box-sizing: inherit;}

/* ---------------------------- animations ---------------------- */
/* originally from animate.css */
@-webkit-keyframes backInDown {
  0% {
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}

@-webkit-keyframes backInLeft {
  0% {
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide included as part of animate.css */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

.user-animated {opacity: 0;}

.no-js .user-animated {opacity: 1;}

.user-animated-loaded {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@media print, (prefers-reduced-motion: reduce) {
  .user-animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    opacity: 1;
  }
}

/*
 * jQuery Basic Table
 * Author: Jerry Low
 */

table.bt thead,
table.bt tbody th {
  display: none;
}

table.bt tfoot th,
table.bt tfoot td,
table.bt tbody td {
  border: none;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  vertical-align: top;

  /* IE 9 */
  float: left\9;
  width: 100%\9;
}

table.bt tfoot th::before,
table.bt tfoot td::before,
table.bt tbody td::before {
  content: attr(data-th) ": ";
  display: inline-block;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  font-weight: bold;
  width: 25%
}

table.bt tfoot th.bt-hide,
table.bt tfoot td.bt-hide,
table.bt tbody td.bt-hide {
  display: none;
}

table.bt tfoot th .bt-content,
table.bt tfoot td .bt-content,
table.bt tbody td .bt-content {
  vertical-align: top;
}

.bt-wrapper.active {
  max-height: 310px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table.bt.bt--no-header tfoot td::before,
table.bt.bt--no-header tbody td::before {
  display: none;
}

table {
  width: 100%!important;
  max-width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}

table th, table td {padding: 5px;}

#main table th {background: #c9c9c9;}

#main tr:nth-of-type(odd) { 
  background: #eee; 
}

table.no-border tr:nth-of-type(odd) {
  background: transparent;
}

table.no-border, table.no-border td {border: none;}

/* Slick Slider site specific styles */
.slick-loading .slick-list {background: #fff url('slick/ajax-loader.gif') center center no-repeat;}

/* Arrows */
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 58%;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:before, .slick-next:before, .slick-prev:after, .slick-next:after {
  content: "";
  position: absolute;
  background: #d8d5b7;
  border-radius: .5rem;
  display: block;
  width:  85%;
  height: 25%;
}

.slick-prev:before, .slick-next:before {top: 62%}

.slick-prev:after, .slick-next:after {bottom: 62%}

.slick-prev:before, .slick-next:before, .slick-prev:after, .slick-next:after {width: 85%; height: 25%;}

.slick-prev:before, .slick-next:after {transform: rotate(50deg)}

.slick-next:before, .slick-prev:after {transform: rotate(-50deg)}

.slick-prev {left: -100px;}

[dir='rtl'] .slick-prev {
  right: -100px;
  left: auto;
}

.slick-next {right: -100px;}

[dir='rtl'] .slick-next {
  right: auto;
  left: -100px;
}

/* Dots */
.slick-dotted.slick-slider {margin-bottom: 20px;}

.slick-dots {
  position: absolute;
  bottom: -50px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  background: none;
  font-size: 0;
  line-height: 0;
  display: block;
  width: 16px;
  height: 16px;
  cursor: pointer;
  outline: none;
  border: 1px solid #d8d5b7;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
}

.slick-dots li button:hover, .slick-dots li button:focus, li.slick-active button {border:  8px solid #d8d5b7;}

/* +++++++ Variables +++++++++++++++++++ */

/*
  footer grey - #4c4c4c
  notices yellow - #fdaa3d
  events pink - #da587c
  pool blue - #2ba6aa
  more grey - #bcb9a0
  gym blue - #0094ce
  climbing purple - #8d65ac
  otter beige - #d8d5b7
*/

:root {
  --text-col: #000;
  --text-size: 18px;
  --body-bg-col: #000000;
  --h1-size: 30px;
  --h2-size: 30px;
  --h3-size: 20px;
  --h4-size: 18px;
  --main-font: 'Source Sans Pro', sans-serif;
  --heading-font: 'Zilla Slab', serif;
  --link-col: #0094ce;
  --link-hov: #2ba6aa;
  --link-weight: 700;
  --link-dec: underline;
  --mobile-nav-bg: #024a74;
  --mobile-nav-toggle: #d8d5b7;
  --mobile-nav-toggle-active: #d8d5b7;
  --nav-col: #d8d5b7;
  --nav-size: 18px;
  --nav-font: 'Source Sans Pro', sans-serif;
  --notices: #fdaa3d;
  --events: #da587c;
  --pool: #2ba6aa;
  --gym: #0094ce;
  --courts: #ff6f4f;
  --climbing: #8d65ac;
  --camps: #afcc4a;
  --firstaid: #ab0000;
  --brown: #816a55;
  --otter-beige: #d8d5b7;
  --footer-grey: #4c4c4c;
  --more-grey: #bcb9a0;
  --more-grey-line: #d1ceb4;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@charset "UTF-8";

html, body {
  height: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  background: var(--body-bg-col);
  line-height: 1.5em;
}

body {
  font: 400 normal var(--text-size)/1.5em var(--main-font);
  color: var(--text-col);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {color: inherit; font-weight: inherit; text-decoration: none;}

a.no-click {cursor: unset;}

.user-entered a {color: var(--link-col); text-decoration: var(--link-dec); font-weight: var(--link-weight);}

.user-entered a:hover {color: var(--link-hov); text-decoration: var(--link-dec);}



h1, h2, h3, h4, h5, h6 {margin: 0 0 .5em 0; line-height: 1.2em;}
h1 a, h2 a, h3 a {text-decoration: none; color: inherit; font-weight: inherit;}
h1.tight, h2.tight, h3.tight, h4.tight, h5.tight, h6.tight {margin-bottom: .1em;}

h1 {letter-spacing: 1px; font: normal 700 var(--h1-size)/1em var(--heading-font); margin-bottom: .4em;}
h2 {letter-spacing: 1px; font: normal 700 var(--h2-size)/1.2em var(--heading-font); text-transform: uppercase;}
h3 {letter-spacing:  1px; font: normal 700 var(--h3-size)/1.2em var(--heading-font);}
h4 {font: normal 700 var(--h4-size)/1.2em var(--main-font); text-transform: uppercase;}


strong, b {font-weight: 800;}
i, em {font-style: italic;}
p {margin-top: 0; line-height:  1.3em;}

blockquote {
  border-left: 3px solid var(--gym);
  margin: 3rem 40px;
  padding: 10px 0 10px 40px;
}

hr {
  color:  #d9d9d9;
  margin-top: 35px!important;
  margin-bottom:  40px!important;
}

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

.pool blockquote {border-left: 3px solid var(--pool);}
.gym blockquote {border-left: 3px solid var(--gym);}
.courts blockquote {border-left: 3px solid var(--courts);}
.climbing-wall blockquote {border-left: 3px solid var(--climbing);}
.events blockquote {border-left: 3px solid var(--evemts);}
.notices blockquote {border-left: 3px solid var(--notices);}
.camps blockquote {border-left:  3px solid var(--camps);}
.firstaid blockquote {border-left:  3px solid var(--firstaid);}
.brown blockquote {border-left:  3px solid var(--brown);}

.txtcolour-pool {color: var(--pool);}
.txtcolour-gym {color: var(--gym);}
.txtcolour-courts {color: var(--courts);}
.txtcolour-climbing-wall {color: var(--climbing);}
.txtcolour-events {color: var(--events);}
.txtcolour-notices {color: var(--notices);}
.txtcolour-firstaid {color: var(--firstaid);}
.txtcolour-camps {color: var(--camps);}
.txtcolour-brown {color: var(--brown);}

blockquote p {
  font-weight: 300;
  font-size: 1.4em;
  margin-bottom: 0;
  text-transform: uppercase;
}

blockquote p.quote-author {
  margin-top: 10px;
  font-weight: 800;
  font-style: italic;
  text-align: right;
} 

.wrapper {
  width: 94%;
  margin: 0 auto;
}

img {max-width: 100%; height: auto!important;}

img.right {float: right; margin: 0 0 20px 20px;}

img.left {float: left; margin: 0 20px 20px 0;}

main table {margin: 2em 0;}

.bt-wrapper {margin: 2em 0;}

main .bt-wrapper table {margin: 0;}

main ul {margin-top: 0;}

#utility-bar {
  background: var(--footer-grey);
}

.socials-nav, #utility-nav {
  display: flex;
  justify-content: center;
}

.socials-nav, #utility-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#utility-nav li, .socials-nav li {
  display: inline-block;
  text-align: left;
  color: var(--otter-beige);
  padding: 15px 10px 15px 0;
}

#utility-nav li {padding: 0 10px 15px 0;}

#utility-nav li::after {
    content: "|";
    display: inline-block;
    padding-left: 10px;
}

/* for when search goes back in  #utility-nav li:nth-last-child(2):after */

#utility-nav li:last-child:after, #utility-nav li:first-child:after {
  display: none;
}

.socials svg, #utility-nav svg {
  fill: var(--otter-beige);
  width: 25px;
  top: -4px;
  position: relative;
}

.facebook svg, .socials .svg-facebook {width: 27px;}

#nav-header {
  padding-top: 40px;
  text-align: center;
  position: relative;
}

#banner-header {
  background: url(gfx/mural-bg.jpg) no-repeat top center;
  background-size: cover;
}

#banner-header > div:first-of-type {width: 100%; margin: 0;}

#banner-header .relative {position: relative;}

#logo, #logo a {
  width: 330px;
  height: 61px;
  display: block;
}

#logo {
  background: url(gfx/bvpool-logo.png) no-repeat top left;
  background-size: contain;
  position: absolute;
  top: 37px;
  left: 10px;
  z-index: 200;
  margin: 0;
}

#drawer-toggle {
  position: absolute;
  right: 10px;
  top: 13px;
  opacity: 0;
  z-index: 5002;
  width: 40px;
  height: 40px;
  cursor:pointer;
}

#drawer-toggle-label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  right: 10px;
  top: 28px;
  height: 4px;
  width: 30px;
  border-radius: 1px;
  display: block;
  background: var(--mobile-nav-toggle);
  z-index: 5001;
  cursor: pointer;
}

#drawer-toggle-label:before {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  border-radius: 1px;
  width: 30px;
  background: var(--mobile-nav-toggle);
  top: -8px;
  cursor: pointer;
  right: 0px;
}

#drawer-toggle-label:after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  border-radius: 1px;
  width: 30px;
  background: var(--mobile-nav-toggle);
  top: 8px;
  cursor: pointer;
  right: 0;
}

#drawer-toggle-label, #drawer-toggle-label:after, #drawer-toggle-label:before {transition: all 500ms ease-in-out;}

#drawer-toggle:checked ~ #drawer-toggle-label {width: 0;}

#drawer-toggle:checked ~ #drawer-toggle-label:before {
  transform: rotate(45deg);
  top: 0px;
  right: 0px;
}

#drawer-toggle:checked ~ #drawer-toggle-label:after {
  transform: rotate(-45deg);
  top: 0px;
  right: 0px;
}

#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ #drawer-toggle-label:before, #drawer-toggle:checked ~ #drawer-toggle-label:after {background: var(--mobile-nav-toggle-active);}

#main-nav {
  position: absolute;
  height: auto;
  width: 100%;
  left: 0;
  top: -300vh;
  margin: 0;
  padding: 25px 0px 0 0;
  background-color: var(--mobile-nav-bg);
  z-index: 500;
  transition: .6s cubic-bezier(.46,.03,.52,.96);
  box-sizing: border-box;
  max-height: 100vh;
  overflow-y: auto;
  border-bottom: 1px solid #bfd1dc;
}

#drawer-toggle:checked ~ #main-nav {
  top: 0;
  position: absolute;
}

#main-nav ul {
  list-style: none;
  color: var(--mobile-nav-toggle-active);
  padding: 0;
  margin: 0;
}

#main-nav li {
  font: normal 700 var(--nav-size)/1.2 var(--nav-font);
  text-transform: uppercase;
  position: relative;
  padding: 10px 20px;
  margin-bottom: 0px;
}

#main-nav li li {
  float: none;
  width: auto;
  margin-top: 5px;
  margin-bottom: 0px;
  position: relative;
  padding-left: 35px;
}

#main-nav li li:hover:before {
  content: "\00BB";
  position: absolute;
  top: 8px;
  left: 20px;
}

#main-nav ul li a {
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
}

#main-nav ul li a:hover {color: var(--nav-hov-col)}

#main-nav ul li:hover, #main-nav ul li.active {background: none;}

#banner-slider .slick-next, #banner-slider .slick-prev {display: none!important;}

#banner-slider {padding-top: 120px;}

#banner-slider div.item {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5%;
}

.banner-image {display: none;}

div.circle-clip {
  position: relative; 
  border-radius: 50%; 
  overflow: hidden;
}

div.circle-shadow {
  position:  absolute;
  top: 0;
  left: 0;
  z-index: 5;
  border-radius:  50%;
  width:  100%;
  height:  100%;
  box-shadow:  inset 0 0 40px 0px rgba(0,0,0,0.85);
}

.banner-image img {
  width:  100%;
  height: 100%;
}

.banner-info {padding-bottom: 20px;}

.banner-info, .banner-info h2, .banner-info h3, .banner-info h4 {
  color:  var(--otter-beige);
}

.banner-info p.category {
  line-height: 1.5em;
  font-size: 18px;
  border-bottom: 1px solid var(--otter-beige);
  text-transform: lowercase;
}

.banner-info p {font-size:  18px;}

.banner-info p.time {
  font-size: 22px;
  font-weight: 700;
  margin-bottom:  .2em;
}

p.more-button {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
}

.more-button a {
  display: inline-block;
  width: 180px;
  color: #fff;
  padding: 15px 5px;
  border: 2px solid var(--more-grey-line);
  width:  145px;
  text-align: center;
}

.banner-info .more-button a {
  border: 2px solid var(--otter-beige);
  color:  var(--otter-beige);
  width: auto;
  padding: 10px 25px;
}

.banner-info p.more-button {
  margin-top: 50px;
  padding-bottom:  15px;
  font-size: 18px;
}

.more-button.grey-more a {background-color: var(--more-grey);}

.more-button.courts-more a {background-color: var(--courts);}

.pool.more-button a {background-color: var(--pool);}

.courts.more-button a {background-color: var(--courts);}

.gym.more-button a {background-color: var(--gym);}

.climbing-wall.more-button a {background-color: var(--climbing);}

.events.more-button a {background-color: var(--events);}

.notices.more-button a {background-color: var(--notices);}

.camps.more-button a {background-color: var(--camps);}

.firstaid.more-button a {background-color: var(--firstaid);}

.brown.more-button a {background-color: var(--brown);}

.facility-more-block .grey-more, .facility-more-block .courts-more {
  display: inline-block;
  padding: 0 12px;
}

.facility-more-block .grey-more a, .facility-more-block .courts-more a {width:  180px;}

.facility-more-block {
  text-align: center;
  margin-top: 40px;
}

.facility-more-block p.more-button {font-size: 20px;}

.courts-bottom {margin-top: 30px}

.special-notice .svg-notices {
  width: 32px;
  height: auto;
  margin-top: -10px;
  padding-right:  18px;
  fill: var(--notices);
}

.special-notice {
  font-weight: bold;
  text-align: center;
  color: var(--notices);
  font-size: 26px;
}

.program-group {
  margin-bottom: 5px;
}

.program-group-header {
  background-color: #bbb8a2;
  padding: 18px 11px;
}

.program-group-header.closed.pool {background: var(--pool);}
.program-group-header.closed.gym {background: var(--gym);}
.program-group-header.closed.courts {background: var(--courts);}
.program-group-header.closed.climbing-wall {background: var(--climbing);}
.program-group-header.closed.firstaid {background: var(--firstaid);}
.program-group-header.closed.camps {background: var(--camps);}
.program-group-header.closed.brown {background: var(--brown);}

.inner-padding > div:first-of-type, .program-group-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 30px;
}

.inner-padding {padding:  18px 11px;}

.program-group-header-text {
  align-self: center;
  color: #fff;
}

.ind-program {
  background: #e4e4db;
  border-bottom: 1px solid #fff;
}

.ind-program.light {background: #f1f1ed;}

p.expand-trigger {
  text-align: right;
  position: relative;
}

p.expand-trigger a {text-align: right;}

.program-group-header.closed .expand-trigger a {
  background: #fff;
  color: #bcb9a3;
}

.expand-trigger .pull-down {
  left: 20px;
  top: 37px;
}

.expand-trigger a {padding-right:  15px;}

.program-group-header.closed .pull-down:after, .program-group-header.closed .pull-down:before {background: #bcb9a3;}

.program-group-header.closed ~ .ind-program.ingroup, p.read-more.closed + .read-more-container {
  max-height: 0px;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

.program-group-header ~ .ind-program.ingroup, p.read-more + .read-more-container {
  max-height: 5000px;
  transition: max-height 0.25s ease-in;
}

p.read-more {
  font-style: italic;
  font-size: 16px;
  display: none;
  color: #888;
  cursor: pointer;
}

p.read-more.closed {
  display: block;
}

/* ------------ Home Notices Events ----------------------------- */



.home-notice-event {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 20px;
  margin-bottom: 45px;
}

.data-header {position: relative;}

.data-header svg {
  float: left;
  width:  41px!important;
  padding-left: 20px;
  height: auto!important;
}

.data-header svg.svg-calendar {
  padding-top: 36px;
}

.data-header svg.svg-notices {
  fill: #fff;
  padding-top: 30px;
}

.events .data-header {background: var(--events);}
.notices .data-header {background: var(--notices);}

.data-header h2 {
  float: left;
  padding: 33px 50px 24px 22px;
  margin: 0;
  color:  #fff;
  text-transform: none;
}

.data-header button.pull-down {
  top: 50%;
  right:  30px;
  left: auto;
}

.home-single {
  display: grid;
  grid-template-columns: .7fr .3fr;
  grid-gap: 4%;
  padding: 10px;
  border-top: 1px solid #fff;
}

.events .home-single {background: #f1b6c5;}

.events .home-single.light {background: #fadbe2;}

.notices .home-single {background: #feddba;}

.notices .home-single.light {background: #ffeedd;}

.home-single .circle-clip {border: 2px solid #bcb9a3;}

.home-single h3 {text-transform: uppercase; font-size: 22px;}

.events p.time, .home-single .cost {
  color: var(--events);
  font-weight: bold;
}

.home-single .cost {margin-top: -18px;}

.circle-image-container {align-self: center;}

.fb-link {
  padding: 5px 0 5px 40px;
  background: url(gfx/fb-cert.png) no-repeat center left;
}

.other-open {
  max-height: 1500px;
  transition: max-height 0.25s ease-in;
}

.other-closed {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

/* Rates Table ------------------------------------------*/

.rates-table th, .rates-table td:before {
  background: #bcb9a3;
  color: #fff;
}

.rates-table td {padding: 0;}

.rates-table .bt-content {padding: 5px 5px 5px 10px;}

table.rates-table tbody td:before {
  width: 50%; 
  padding: 5px 10px 5px 5px;
  text-align: right;
}

.rates-table tr {border-bottom: 1px solid #fff;}

.rates-table tr.even {background: #e4e4db;}

.rates-table tr.odd {background: #f1f1ec;}

.rates-table td {text-align: center;}

.rates-table {margin-bottom: 10px;}

/* Main Content Blocks Layout Stuff ----------------------*/

#main {
  background: url(gfx/mirror.jpg) no-repeat top center #fff;
  background-size: 100% auto;
  padding: 60px 0 50px 0;
}

article .wrapper, article.wrapper {
  margin: 0 auto;
  width: 100%;
}

.constrain-wrapper {max-width: 1200px;}

.narrow-wrapper {max-width: 800px;}

.banner-wrapper {max-width: 1000px; padding-bottom: 50px;}

.mid-wrapper {max-width: 1000px;}

.block {
  margin-top: 2.2rem; 
  margin-bottom: 2.2rem;
}

.video-container {
  padding: 60px 0;
} 

.responsive-video {
    overflow:hidden;
    position:relative;
    margin: 0 auto;
}

.responsive-video:before {
  content: '';
  display: block;
  position: relative;
  padding-bottom: 56.25%;
}

.responsive-video.square {
  max-width: 600px;
}

.responsive-video.square:before {
  padding-bottom: 100%;
}

.responsive-video.vertical {
  max-width: 400px;
}

.responsive-video.vertical:before {
  padding-bottom: 179%;
}

.responsive-video iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.responsive-video p {display: none;}

.dfcolumns .dform_text_input input {width:95%}

.inline-gallery-container {
  padding-bottom: 65%;
  padding-bottom: min(65%, 100VH);
}

.lg-content {
  z-index: 2000;
  padding-bottom: 20%;
  bottom: 125px!important;
}

main ul {
  padding-left: 30px;
  line-height: 1.3em;
}

/*Footer Stuff ------------------------------------------*/

#footer {
  background: #4c4c4c;
  padding: 85px 0 0 0;
}

#footer, #footer h2, #footer h3, #footer h4, #footer p, #footer ul, #footer li, #footer a {color: var(--otter-beige); text-decoration: none;}

#footer a {font-weight: 700;}

#footer a:hover {color: #fff;}

#footer-info .wrapper {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr;
  text-align: center;
}

.footer-block {
  margin: 0;
  width: auto;
}

.footer-reception tr:first-child:hover {
  cursor: pointer;
}

.footer-reception {
  max-width: 300px;
  margin: 0 auto;
}

.footer-reception td {padding: 0;}

.footer-reception td p {display: inline-block; margin-bottom: 0;}

.footer-reception .arrow {
  display: inline-block;
  margin-left: 5px;
}

.footer-reception .arrow {
  display: inline-block;
  margin-left: 5px;
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent; 
  border-top: 10px solid var(--otter-beige);
}

.footer-reception:hover .arrow {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--otter-beige);
  border-top: none;
}

.footer-reception div {
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);  
  max-height: 0;
}

.footer-reception tr.first div {max-height: 38px;}

.footer-reception:hover div {
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;   
    max-height: 400px;
}

.hour-links ul {
  list-style: none;
  padding-left: 0;
}

#footer-logo img {
  width: 350px; 
  margin: 50px auto 25px auto;
  display: block;
}

#site-credit {
  padding: 25px 0;
  clear: both;
  background: #000000;
}

#site-credit > div {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(1, auto);
}

#site-credit p {
  font-size: 14px;
  color: var(--otter-beige);
  text-align: center;
  margin-bottom: 0;
  line-height: 1.3em;
}

#site-credit .copyright p {font-size: 18px;}

#site-credit a {
  color: var(--otter-beige);
  text-decoration: none;
  font-weight: 400;
}

#site-credit a:hover {color: inherit; text-decoration: none;}

#site-credit ul {text-align: center; margin: 0; padding: 0;}

#site-credit li {display: inline-block; padding: 0px 10px;}

/* -----------Search --------------------------------------------------- */

#search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
  visibility: hidden;
  z-index: 2000;
}

#search-overlay .directory-search {
  padding: 50px 50px 30px 50px;
  background: #fff;
}

.directory-search .search-trigger {
  font-size: 20px;
  color: #a2a2a2;
  position: absolute;
  top: 15px;
  right: 15px;
}

.directory-search .search-trigger:hover {
  color: #414141;
  text-decoration: none;
}

.directory-search .search-trigger strong {font-size: 24px; font-weight: bold; color: #414141;}

.directory-search form {position: relative;}

.directory-search {position: relative;}

.directory-search input[name="keywords"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
  border: none;
  border-bottom: 2px solid #a2a2a2;
  outline: none;
  padding: 0 0 0 5rem;
}

.directory-search input[name="keywords"]::placeholder {color: #d7d7d7}

.directory-search {
  color: #a2a2a2;
  position: relative;
  font-size: 50px;
}

.directory-search .svg-search, .directory-search .svg-search2 {
  position: absolute;
  top: .2rem;
  width: 50px;
  height: 50px;
  color: #a2a2a2;
  fill: #a2a2a2;
}

.directory-search .submit {display: none;}

/* ========== Hours ============================== */

.simple-hours .dark {background: #e4e4db;}
.simple-hours .light {background: #f1f1ed;}

.colour-pool, .colour-pool .dark {background: #b6dcdc;}
.colour-pool .light {background: #dbeeee;}

.colour-climbing-wall, .colour-climbing-wall .dark {background: #d4c2de;}
.colour-climbing-wall .light {background: #e9e1ef}

.colour-courts, .colour-courts .dark {background: #ffc7b7;}
.colour-courts .light {background: #ffe3dc;}

.colour-gym, .colour-gym .dark {background: #afd4ec;}
.colour-gym .light {background: #d8eaf6;}

.colour-main-reception, .colour-main-reception .dark {background: #efefdb;}

.week-container {
  width: 100%;
  padding: 30px 0;
}

.week-container p {
  margin-bottom: .4em;
  line-height: 1.02em;
  font-weight:  300;
}

.week-container p strong {font-weight:  700;}

.day-container {width: 308px;}

.day-header {
  text-align: center;
  padding: 7px;
}

.day-header h3 {
  font: 700 normal var(--text-size)/1.5em var(--main-font);
  line-height: 1em;
  margin-bottom: 0;
}

.day-row {
  display: grid;
  grid-template-columns: 166px 142px;
  border-bottom: 1px solid rgba(255,255,255,.7);
}

.day-row:last-child {border-bottom: none;}

.item-text {padding: 10px 10px 0px 10px;}

.item-hours {padding: 10px 10px 0 5px;}

.item-hours {
  display: grid;
  align-content: center;
}

.day-container {margin-right: 18px;}

.hours-slider .slick-track {display: flex !important;}

.hours-slider .slick-slide {
  height: inherit !important;
  opacity:  .5;
}

.hours-slider .slick-slide.slick-active, .hours-slider .slick-slide.slick-current {opacity: 1;}

.hours-slider .slick-next {right: 25px; z-index: 50; top: 50%;}

.hours-slider .slick-prev {left: 25px; z-index: 50; top: 50%;}

.hours-slider .slick-prev:before, .hours-slider .slick-next:before, .hours-slider .slick-prev:after, .hours-slider .slick-next:after {background: #000000;}

.simple-hours {
  max-width: 750px;
  margin-bottom:  30px;
}

.simple-day-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.simple-day {
  text-align:  right;
  padding: 15px;
}

.simple-hour {padding: 15px;}

.simple-day p {font-weight: bold;}

svg#alert {width: 41px; height: 54px;}

.simple-day p:last-of-type, .simple-hour p:last-of-type {margin-bottom: 0;}

.facility-expando.closed {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

.facility-expando {
  max-height: 1500px;
  transition: max-height 0.25s ease-in;
}


/* +++++++++++++++++++++++ Hours NAvigation +++++++++++++++++++++++++ */

.hour-nav {padding:  0 0 30px 0;}

.circle-clip img {
  width:  100%;
  height:  auto;
}

.circle-clip {position: relative;}

.circle-clip h2 {
  text-align: center;
  position:  absolute;
  bottom: 13%;
  color: #ffffff;
  width: 92%;
  margin-left: 3%;
  margin-right: 3%;
  z-index: 5;
  font-size: 28px;
  word-break: normal;
}

.facility-hours-nav {
  --grid-item--max-width: calc((100% - 150px) / 2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(150px, var(--grid-item--max-width)), 1fr));
  grid-gap: 30px;
}

.facility-hours-nav .circle-clip {cursor: pointer;}

.gradient-overlay {
  width: 100%;
  height:  100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0,147,206,0.2) 0%, rgba(0,147,206,0.3) 60%, rgba(0,147,206,1) 100%);
}

.gradient-overlay.pool {background: linear-gradient(180deg, rgba(43,166,170,0.2) 0%, rgba(43,166,170,0.3) 60%, rgba(43,166,170,1) 100%)}

.gradient-overlay.courts {background: linear-gradient(180deg, rgba(225,113,70,0.2) 0%, rgba(255,113,70,0.3) 60%, rgba(255,113,70,1) 100%);}

.gradient-overlay.gym {background: linear-gradient(180deg, rgba(0,147,206,0.2) 0%, rgba(0,147,206,0.3) 60%, rgba(0,147,206,1) 100%);}

.gradient-overlay.climbing-wall {background: linear-gradient(180deg, rgba(141,100,171,0.2) 0%, rgba(141,100,171,0.3) 60%, rgba(141,100,171,1) 100%);}

.gradient-overlay.camps {background: linear-gradient(180deg, rgba(175,204,74,0.2) 0%, rgba(175,204,74,0.3) 60%, rgba(175,204,74,1) 100%);}

.gradient-overlay.firstaid {background: linear-gradient(180deg, rgba(171,0,0,0.2) 0%, rgba(171,0,0,0.3) 60%, rgba(171,0,0,1) 100%);}

.gradient-overlay.brown {background: linear-gradient(180deg, rgba(129,106,85,0.2) 0%, rgba(129,106,85,0.3) 60%, rgba(129,106,85,1) 100%);}

.pull-down {
  font-size: 0;
  line-height: 0;
  position: absolute;
  bottom: 8%;
  left: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 5;
}

.pull-down:before, .pull-down:after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: .5rem;
  display: block;
  width:  25%;
  height: 85%;
}

.pull-down:before {bottom: 0; left: 25%}

.pull-down:after {bottom: 0; left: -25%}

.pull-down:before {transform: rotate(50deg)}

.pull-down:after {transform: rotate(-50deg)}

.view-all-fac .pull-down {right: 0; left: auto; top: 10px;}

.view-all-fac .pull-down:before, .view-all-fac .pull-down:after {background: var(--footer-grey);}

.pull-up.pull-down:before {transform: rotate(-230deg);}

.pull-up.pull-down:after {transform: rotate(230deg);}

.caps {text-transform: uppercase;}

h3.view-all-fac, h3.view-by-fac {
  color: var(--footer-grey); 
  margin-bottom: 30px;
}

.view-all-fac {
  float: right; 
  position: relative; 
  padding-right: 35px; 
}

.view-by-fac {float: left;}

/* Facility Headers ------------ */

.facility-header.colour-pool {background: var(--pool);}
.facility-header.colour-climbing-wall {background: var(--climbing);}
.facility-header.colour-gym {background: var(--gym);}
.facility-header.colour-courts {background: var(--courts);}

.facility-header {
  position: relative;
  margin: 100px 0;
  padding-top: 100px;
  padding-bottom: 10px;
}

.facility-bullets {
  color: #fff;
}

ul.desc-left {margin-bottom: 0;}

ul.desc-right {margin-top: 0;}

.facility-header .circle-clip {
  position: absolute;
  width:  205px;
  height: 205px;
  left: 50%;
  top: 0%;
  margin-left: -102px;
  margin-top: -102px;
}



/* ==========================================================================
   Media Queries
   =============================================================================================== */

@media only screen and (min-width: 510px) {

  .hours-slider .slick-next {right: 50px;}

  .hours-slider .slick-prev {left: 50px;}
}


@media only screen and (min-width: 700px) {

  :root {
  --h1-size: 40px;
  --h2-size: 36px;
  --h3-size: 24px;
  }

  #banner-slider div.item {grid-template-columns: 1fr 1.5fr; grid-gap: 10%}

  .banner-image {
    display: block;
    width:  100%;
    height: auto;
    position: relative;
  }

  .banner-info h1 {font-size: 40px}

  /* Main Content Blocks Layout Stuff -----------------------*/

  article .wrapper, article.wrapper {
    margin: 0 auto;
    width: 100%;
  }

  .image-50 {
    width: auto;
    max-width: 47%;
    padding: 0 3% 30px 0;
    float: left;
  }

  .wrapped .image-50 {padding: 0 6% 30px 0;}

  .text-50 {
    float: right;
    max-width: 47%;
  }

  .text-image-50.right .image-50 {
    float: right;
    padding: 0 0 30px 3%;
  }

  .text-image-50.rght.wrapped .image-50 {padding: 0 0 30px 6%;}

  .text-image-50.right .text-50 {
    float: left;
  }

  .wide-image {display: flex; justify-content: center;}

  .sidebyside > div {max-width: 47%;}

  .sidebyside > div:first-child {
    max-width: 47%;
    float: left;
    margin-bottom: 20px;
  }

  .sidebyside > div:last-child {
    max-width: 47%;
    float: right;
  }

  #footer-info .wrapper {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
  }

  .footer-reception {margin: 0;}

  #site-credit > div {grid-template-columns: repeat(3, auto); grid-gap: 30px;}
  #site-credit p {text-align: left;}
  #site-credit .copyright p {text-align: right;}

  .facility-header {padding-top: 0; padding-bottom: 0;}

  .facility-bullets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 210px;
  }

  .desc-left {
    text-align: right;
    direction: rtl;
  }

  ul.desc-left {margin-bottom: 1em;}

  ul.desc-right {margin-top: 1em;}

  .facility-header .circle-clip {top: 50%;}

}

@media only screen and (min-width: 850px) {

  .two-columns {
    column-count: 2;
    column-gap: 50px;
  }

  .facility-hours-nav {
    --grid-item--max-width: calc((100% - 150px) / 4);
    grid-template-columns: repeat(auto-fill, minmax(max(150px, var(--grid-item--max-width)), 1fr));
    grid-gap: 50px;
  }

}

@media only screen and (min-width: 875px) {

  .banner-info p, .banner-info p.time {font-size:  22px;}
 
  #drawer-toggle, #drawer-toggle-label, #main-nav .sub-nav-trigger, #main-nav .sub-nav-trigger + label {display: none;}

  #banner-slider {padding-top: 180px;}

  #main-nav .sub-nav-trigger + label + ul, #main-nav .sub-nav-trigger:checked + label + ul {height: auto; max-height: none;}

  #drawer-toggle:checked ~ #main-nav {
    top: auto;
    position: relative;
  }

  .socials-nav {
    float: left;
    display: block;
  }

  #utility-nav {
    float: right;
    display: block;
  }  

  #utility-nav li {padding: 15px 10px 15px 0;}

  #main-nav {
    position: relative;
    left: auto;
    right: auto;
    top: 100px;
    bottom: auto;
    height: auto;
    width: auto;
    padding: 0;
    overflow-y: visible;
    overflow-x: visible;
    transition: .5s ease-in-out;
    text-align: center;
    background-color: transparent;
    border-bottom: none;
  }

  #drawer-toggle:checked ~ #main-nav {
    top: 55px;
    position: relative;
  }

  #main-nav li {
    margin: 0;
    list-style: none;
    padding: 15px 35px 15px 5px;
    border-left: 4px solid var(--notices);
  }

  #main-nav li li {border: none;}

  #main-nav li.facilities {border-color: var(--pool);}
  #main-nav li.hours-rates {border-color: var(--climbing);}
  #main-nav li.programs {border-color: var(--gym);}
  #main-nav li.events {border-color: var(--events);}

  #main-nav li:hover, #main-nav li ul {background: var(--notices);}
  #main-nav li.facilities:hover, #main-nav li.facilities ul {background: var(--pool);}
  #main-nav li.hours-rates:hover, #main-nav li.hours-rates ul {background: var(--climbing);}
  #main-nav li.programs:hover, #main-nav li.programs ul {background:  var(--gym);} 
  #main-nav li.events:hover, #main-nav li.events ul {background:  var(--events);} 

  #main-nav li ul {left: -4px;}

  #main-nav li li:hover::before {display: none;}

  #primary-nav {
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    position: relative;
    float: right;
  }

  #primary-nav > li {
    display: flex;
    justify-content: right;
    align-items: right;
    padding: 10px 23px;
    position: relative;
  }

  #primary-nav > li:hover ul {display: block;}

  #primary-nav ul {
    display: none;
    position: absolute;
    top: 2.3em;
    left: 0;
    text-align: left;
    background: #237f99;
    min-width: 100%;
  }

  #primary-nav ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
  }

  #banner-header > div:first-of-type {width: 94% ;margin: 0 auto;}

  #footer-logo img {width: 517px;}

}

@media only screen and (min-width: 1150px) {
#banner-slider .slick-next {display:  inline-block!important; right: -50px;}
#banner-slider .slick-prev {display: inline-block!important; left: -50px;}
#logo, #logo a {width:  450px; height: 85px; top:  30px;}
.circle-clip h2 {font-size: 35px;}
}

@media only screen and (min-width: 1170px) {
  #main-nav {top: 55px;}
   #banner-slider {padding-top: 145px;}
}

@media only screen and (min-width: 1300px) {
#banner-slider .slick-next {display:  block; right: -100px;}
#banner-slider .slick-prev {display: block; left: -100px;}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

visuallyhidden.focusable:active,
visually.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * 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 receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}