@font-face {
    font-family: 'League Spartan';
    src: url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.eot');
    src: url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.woff2') format('woff2'),
         url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.woff') format('woff'),
         url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.ttf') format('truetype'),
         url('/wp-content/themes/world-ocean-day/fonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
    font-weight: bold;
    font-style: normal;

}



    .main {
      position:relative;
    }

    h1, h2, h3, h4, h5, h5 a {
      color: #043857;
      font-family: 'Sigmar One', sans-serif;
      font-weight: 100;
    }

    .header h1, .resource-inner h3 {
      color: #043857!important;
    }

    .resource-inner h3 {
      text-align: left;
    }

    .main h1 {
      color:white;
      text-align: center;
    }

    .post-home-august-2020 h1,
    .post-home-august-2020 h2,
    .post-home-august-2020 h3{
      color: white;
    }

    h5 a, h5 {
      font-family: 'League Spartan', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    h1 {
      font-size: 50px;
        line-height: 1.1;
        max-width: 820px;
        max-width: 650px;
        width: 90%;
        margin: 5% auto 20px;
        position:relative;
    }

    @media (max-width : 800px) {
      h1 {
        font-size: 40px;
      }
    }



    h3 {
      font-size: 30px;
      line-height: 40px;
    }

    h5 {
      font-size: 20px;
    }

    .header {
      background-color:#D5EBEA;
      /*background-image:url("/wp-content/themes/world-ocean-day-2022/header-upper.png"), url("/wp-content/themes/world-ocean-day-2022/header-wave-2022.png"), url("/wp-content/themes/world-ocean-day-2022/boat-2022.png");*/
      /*background-image:url("/wp-content/themes/world-ocean-day-2022/images/sun-corner-flipped.png"), url("/wp-content/themes/world-ocean-day-2022/wave-2022-v2.png"), url("/wp-content/themes/world-ocean-day-2022/boat-2022.png");*/
      background-image:url("/wp-content/themes/world-ocean-day-2022/images/sun-corner-flipped.png"), url("/wp-content/themes/world-ocean-day-2022/wave-2022-v2.png");
      /*background-size: 20% auto, 143px auto, 189px auto;*/
      background-size: 20% auto, 143px auto;
      /*background-repeat: no-repeat, repeat-x, no-repeat;*/
      background-repeat: no-repeat, repeat-x;
      /*background-position: right 0%, 0 bottom, right bottom;*/
      background-position: right 0%, 0 bottom;
      overflow: hidden;
      text-align: center;
      min-height: 100px;
        padding-bottom: 140px;
    }

    .header-waves {
      /*background-color: #D6EBEA;*/
      height:0px;
      padding-bottom: 2.5%;
      /*background-image:url("/wp-content/themes/world-ocean-day-2022/header-wave-2022.png");*/
      background-size:7% 101%;
      background-repeat: repeat-x;
      background-position: 0 1px;
      animation-name: waves;
      transform: translateZ(0); /*performance hack*/
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        /*animation-timing-function:ease-in-out;*/
        animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .clouds-right {
      position:absolute;
      background-image:url("/wp-content/themes/world-ocean-day-2020/images/clouds-right-v2.png");
      background-size: 20% auto;
      background-repeat: no-repeat;
      height: 0;
      background-position: right 0;
      padding-bottom: 25%;
      width: 100%;
    }

    .balloon {
      position:absolute;
      background-image:url("/wp-content/themes/world-ocean-day/images/balloon.png");
      background-size: 100%;
      background-repeat: no-repeat;
      height: 0;
      background-position: right 0;
      padding-bottom: 25%;
      width: 12.5%;
      right: 5%;
      top:40px;
        /*animation-name: balloon;*/
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function:ease-in-out;
        transform: translateZ(0); /*performance hack*/
        /*animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
    }

    .balloon h2{
      color: white;
      font-size: 40px;
      line-height: 1;
      padding-top:6%;
    }



    .tshirts {
      transform:rotateZ(30deg);
      position:absolute;
      right:15%;
      top:44%;
      width: 100px;
      height:100px;
      border:solid 5px #083956;
      border-radius: 50%;
    }
    
    .tshirts h2 {
      font-size: 16px;
      line-height: 1.2;
      margin-top: 20px; 
    }
    
    .tshirts {
      text-decoration: none;
      color: #083956
    }

    .tshirts:hover {
      border-color:#179F98;
    }

    .tshirts:hover, .tshirts:hover h2 {
      color:#179F98!important;
    }
    

    @media (max-width : 1000px) {
      .tshirts {
        /*display:none;*/
      }
    }

    html, body {
      margin:0;
      padding:0;
    }

    p, td {
      font-family: "Didact Gothic", sans-serif;
    }

    .main {
      background:#1CABAB;
      /*overflow: hidden;*/
      background-image: url("sea-left-2022.png"), url("sea-right.png"), url("jellyfish.png"), url("lower-decoration.png");
      /*background-attachment: fixed;*/

      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 253px auto, 253px auto, 205px auto;
      background-size: 16% auto, 16% auto, 10% auto, 16% auto;
      background-position: 0 40px, right 400px, right 40%, left 50%;
      
      padding:40px 0 0;
      min-height: 200vh;
    }

    .footer {
      background:#F5AF42;
      overflow: hidden;
      /*code below overlaps the footer image to stop the sub-pixel line of blue peeking through*/
      position: relative;
      top: -1px;
    }
    .footer-image {
      background-image:url("/wp-content/themes/world-ocean-day-2022/footer-2022.png");
      background-color: #1f8786;
      background-color: #1CABAB;
      /*background-color: linear-gradient(to bottom, #1CABAB 0%,#1CABAB 98%,#1CABAB 98%,#F5AF42 99%,#F5AF42 99%,#F5AF42 99%,#F5AF42 100%);*/
      background-size: 100% auto;
      background-repeat: no-repeat;
      height: 0;
      padding-bottom: 25%;
        background-position: center top;
        padding-bottom: 20.9%;


    }

    .post-1386-2 .footer-image {
      background-color: #1f8786;
    }
    .template-page-home-style .footer-image,
    .post-we-are-watery-beings .footer-image,
    .post-welcome .footer-image{
      background-color: #1f8786;
    }
    /*.post-blog .footer-image,
    .post-resources-2020 .footer-image,
    .post-register .footer-image {
      background-color: #1CABAB;
    }
*/
    .sea-left {
      /*background-image: url(/wp-content/themes/world-ocean-day/images/sea-left.png);
      background-size: 20% auto;
      background-repeat: no-repeat;
      height: 800px;
      position: absolute;
      width: 100%;
      background-position: left top;*/
        

    }

    .sea-left {
      /*position:absolute;*/
      /*top:0;*/
      /*left:0;*/
      float: left;
      width: 20%;
      position:sticky;
      top:-100px;
    }

    .sea-left img, .sea-right img {
      width:100%;
    }

    .sea-right {
      /*position:absolute;*/
      /*top:0;*/
      /*right:0;*/
      float: left;
      width: 20%;
      position:sticky;
      top:40px;
    }

    .sea-main-wrapper {
      /*position: absolute;*/
/*      left:0;
      top:0;
      width:60%;
      float:left;
      position:relative;
      z-index: 1;*/

    }

    .sea-main {
      width:90%;
      max-width: 800px;
      margin:0 auto;
    }

    .planner-items {
      text-align: center;
    }

.planner-grid-items {
  overflow:hidden;  
    width: 120%;
    margin-left: -10%;
    display: flex;
    flex-wrap: wrap;
}

.planner-grid-item {
  float:left;
  padding: 1%;
  box-sizing: border-box;
  cursor:pointer;
  display: flex;
  /*transform: perspective(100px) translateZ(0px);*/
  transition: all 0.1s;
}

.planner-grid-item:hover {
  /*transform: perspective(100px) translateZ(1px);*/
}

.planner-grid-item-inner {
  width:100%;
  background:#f4fbfa;
  
  transition: background 0.3s;  
}

.planner-grid-item-inner:hover {
  background:white;
  transition-duration: 0s;  
}

.planner-grid-item p {
  color: #00395D;
    /*padding: 10px;*/
    font-size: 100%;
    box-sizing: border-box;

    margin-bottom: 0;
}

.planner-grid-item p a {
  color: #00395D;
}

.planner-grid-item p a:hover {
  opacity: 0.7;
}

.resources-description {
  width:90%;
  max-width: 800px;
  margin:0 auto;
  font-size: 18px;
  line-height: 1.4;
}


.footer-logos {
  margin: 0 auto;
  padding: 20px 0;
  /*width:90%;*/
  max-width:1140px;
  text-align: center;;
}

.footer-logos img {
  width: 10%;
  margin: 15px 30px;
  display: inline-block;
  vertical-align: middle;
  min-width: 100px;
}

@media (max-width : 700px) {
  .footer-logos img {
      margin: 20px 20px;
  }
}

.button, .wp-block-button__link {
    /*font-family: 'Didact Gothic', sans-serif;*/
    font-family:  'Kalam', sans-serif;
    font-family:  'League Spartan', sans-serif;
    /*font-weight: bold;*/
    display: inline-block;
    
    background-color: #F9B233;
;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: white;
    text-decoration: none;
    padding: 1em 2em;
    vertical-align: middle;
    transition: background 0.3s;
    margin:5px;
    border-radius: 4px;
    text-decoration: none!important;
    border-bottom: solid 4px #CC922A;
}



.button:hover, .wp-block-button__link:hover {
  background:#f9b948;
}

.dress-up {
        position: absolute;
    background-image: url(/wp-content/themes/world-ocean-day/images/dress-up-in-blue.png);
    width: 120px;
    height: 120px;
    background-size: 100%;
    left: 9.2%;
    top: 0.8%;
    transform: rotateZ(-45deg);
    background-repeat: no-repeat;
    z-index: 1;
}

.js-regular-link-wrapper a {
  cursor: pointer!important;
}

@keyframes waves {
  from {background-position: -2.5% 1px;}
  to {background-position: 2.5% 1px;}
}

@keyframes balloon {
  from {top:9%;}
  to {top:7%;}
}


    @media (max-width : 1400px) {
      .tshirts {
        right:8%;
      }
    }


@media (max-width: 1440px){
.balloon h2 {
    font-size: 35px;
}
}


    @media (max-width : 1220px) {
      .balloon h2 {
        font-size: 30px;
      }

      .resources-description {
        max-width: 540px!important;
      }

      .header h1 {
        max-width: 550px!important;
      }

      /*.header h1:first-line {*/
      .header h1 {
        font-size: 50px;
      }

      .header h1 {
        font-size: 40px;
      }
    } 

    @media (max-width : 1000px) {
      .balloon h2 {
        font-size: 24px;
      }

      .balloon {
        margin-top:30px;
      }

      .tshirts {
        right:20px;
        top:360px;
      }
    }

    @media (max-width : 800px) {
      .tshirts {
        display: none!important;
      }
    }


/* Corner Ribbon Code:
Copyright (c) 2019 by Miro Karilahti (https://codepen.io/miroot/pen/wiKAp)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.cr {
  width: 200px;
  padding: 16px 13px 10px;
  position: absolute;
  text-align: center;
  color: #f0f0f0;
  z-index:10000;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color:#0D6B67!important;
  color:white;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
  font-family: 'League Spartan';
}

.cr-sticky {
  position: fixed;
}

/* Positions */

.cr-top    { top: 15px; }
.cr-bottom { bottom: 25px; }
.cr-left   { left: -50px; }
.cr-right  { right: -75px; }

/* Rotations */

.cr-top.cr-left,
.cr-bottom.cr-right {
  transform: rotate(-45deg);
}

.cr-top.cr-right,
.cr-bottom.cr-left {
  transform: rotate(45deg);
}



/* Colors */

.cr-white     { background-color: #f0f0f0; color: #444; }
.cr-black     { background-color: #333; }
.cr-grey      { background-color: #999; }
.cr-blue      { background-color: rgba(38, 114, 129, 0.8); }
.cr-green     { background-color: #2c7; }
.cr-turquoise { background-color: #1b9; }
.cr-purple    { background-color: #95b; }
.cr-red       { background-color: #e43; }
.cr-orange    { background-color: #e82; }
.cr-yellow    { background-color: #ec0; }





@font-face {
  font-family: 'fontello';
  src: url('/wp-content/themes/world-ocean-day/fonts/fontello.eot?48987175');
  src: url('/wp-content/themes/world-ocean-day/fonts/fontello.eot?48987175#iefix') format('embedded-opentype'),
       url('/wp-content/themes/world-ocean-day/fonts/fontello.woff2?48987175') format('woff2'),
       url('/wp-content/themes/world-ocean-day/fonts/fontello.woff?48987175') format('woff'),
       url('/wp-content/themes/world-ocean-day/fonts/fontello.ttf?48987175') format('truetype'),
       url('/wp-content/themes/world-ocean-day/fonts/fontello.svg?48987175#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?48987175#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-mail:before { content: '\e800'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-youtube:before { content: '\f167'; } /* '' */

.social-links {
  width: 200px;
    right: 0;
    position: absolute;
    z-index: 3;
    top: 10px;
    font-size: 20px;
}

.social-links-large {
  position:static;
  width:100%;
  font-size: 25px;
  margin:30px 0;
}

.social-links a {
  color:#043857;
}



.social-links a:hover{
  color:#179F98;
}
.social-links-large a:hover{
  color:white;
}

.social-share-icons {
  animation:socialfadein;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  /*animation-direction: alternate;*/
  /*animation-timing-function:ease-in-out;*/
  animation-timing-function:linear;
  animation-delay: 2s;
  animation-fill-mode: forwards; 
}

.fb-share-button {
  vertical-align: top!important;
}

@keyframes socialfadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.responsive-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.responsive-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



.nav {
  text-align: center;
  float:none;
  width:auto;
  position: relative;
  z-index: 1;
  /*border-bottom: solid 1px rgba(28,171,171,0.25);*/
}

.nav a, .mm-listitem__text {
  margin-left: 20px;
    margin-right: 20px;
    font-size: 16px;
    text-decoration: none;
    color: #04395C;
    padding: 15px 0;
    display: inline-block;
    font-family: Satoshi, sans-serif;
    font-weight: bold;
}

.nav a:hover {
  color:white;
  cursor: pointer;
}



.vignette-radial {
  position: relative;
  /*height: 400px;*/
  /*display: block;*/
  /*background-image: url('../images/posts/css-effects/3/atx-rooftop.jpg');*/
  /*background-size: cover;*/
}

.vignette-radial:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, transparent 50%, black 150%);
}

.featured-resources {
  width:150%;
  margin-left:-25%;
}

.cta-wrapper {
    text-align: center;
}

.resource h3 {
  font-family: "League Spartan", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

h2 {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 0.5em;
}

.main p {
  margin-top:0;
  margin-bottom: 30px;
  font-size: 20px;
  line-height: 1.4;
  color: #003758;
  font-family: 'Satoshi', sans-serif;

}

.main label {
  color: #003758;
}

.main h2 {
  text-align: center;
}

.header-illustration-2020 {
  position:absolute;top:0%;margin-top: 0%;right: -170px;
  width:160px;
  height:240px;
  background-size:100%; 
  background-repeat: no-repeat;
  /*background-image: url("/wp-content/themes/world-ocean-day/images/header-images-2020/Celebrate400.png");*/
}



.icon-2020 {
  width:160px;
  height: 160px;
  border-radius: 50%;
  /*float:left;*/
  background-size:100%; 
  margin:20px;
  display: inline-block;
}

.icon-2020-1 { background-image: url("/wp-content/themes/world-ocean-day/images/icon-1.jpg"); }
.icon-2020-2 { background-image: url("/wp-content/themes/world-ocean-day/images/icon-2.jpg"); }
.icon-2020-3 { background-image: url("/wp-content/themes/world-ocean-day/images/icon-3.jpg"); }
.icon-2020-4 { background-image: url("/wp-content/themes/world-ocean-day/images/icon-4.jpg"); }
.icon-2020-5 { background-image: url("/wp-content/themes/world-ocean-day/images/icon-5.jpg"); }

.instagram_gallery a {
    opacity: 0.9;
}

.instagram_gallery a:hover {
    opacity: 1;
}

.featured-resources {
  display: flex;
    flex-wrap: wrap;
}

.featured-resources .resource {
  /*display: flex;*/
}

.text-content h1, h2, h3 {
  text-align: center;
}

.about-august-2020 .text-content h1,
.about-august-2020 .text-content h2,
.about-august-2020 .text-content h3 {
  color:white;
}

.about-august-2020 blockquote p {
    font-family: 'Sigmar One', sans-serif;
    /*font-family: 'Thunder Stone All Caps Vector', sans-serif;*/
    font-size: 40px!important;
    line-height: 1;
    /*width: 140%;*/
    /*margin-left: -20%;*/
    text-align: center;
    margin-top: 60px!important;
    margin-bottom: 40px!important;
    color:#043857;
}

.wod-slider {
  padding: 0px 0 60px;
}

.slick-slider blockquote {
  margin: 0;
  padding: 0;
}

.slick-slider blockquote p {
  /*width: 80%;*/
  max-width: 640px;
  margin: 0 auto;
}

.about-august-2020 .wp-block-table {
  width: 140%;
    margin-left: -20%;
}

.about-august-2020 td {
  text-align: center;
  padding:20px;
  /*font-weight: bold;*/
  font-family: 'League Spartan', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:#043857;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: top;
}

.blocks-gallery-grid {
  margin:0 auto;
}
.wp-block-buttons {
  text-align: center;
  width: 100%;
}

.wp-block-button {
  display: inline-block;
}

.blocks-gallery-item figure {
  padding: 20px;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}







.resource {
    box-sizing: border-box;
    opacity: 0.9;
    width: 30.9%;
    display: inline-block;
    vertical-align: top;
    margin: 0 1% 2%;
    background: white;
    padding: 15px;
    transition: opacity 0.3s;
    box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.05);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    width: calc(33.3% - 44px);
        padding: 0;
    opacity: 1;
}

.resource-inner {
    padding: 0px 15px 15px;
}

.resource img {
  width: 100%;
}

.resource {
	position: relative;
}

  .resources .inner-wrapper {
    max-width: 1200px;
  }

  .resource {
    padding:0;
    opacity: 1;
  }

  .resource p {
    font-size: 18px;
  }

  .resource-inner {
    padding:0px 15px 15px;
  }

  .cta-wrapper {
    text-align: center;
  }

  .resource h3 {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1.5px;
  }

  .resource {
    margin-left:20px;
    margin-right:20px;
    margin-bottom: 40px;
    width: calc(33.3% - 44px);
  }

  @media (max-width: 900px){
    .resource {
      width: calc(50% - 40px);  
    }
  }

  @media (max-width: 600px){
    .resource {
      width: calc(100% - 40px); 
    }
  }

  .resource--featured {
    width: calc(66.6% - 40px);  
  }

  .resource .button {
    display: block;
    text-align: center;
    display: inline-block;
    text-align: center;
    padding: 10px 19px 8px;
    font-size: 14px;
}

.ribbon, .resource-filter {
     display: block!important; 
}

label, table, table th, table td {
    font-family: 'Didact Gothic', sans-serif;
}

table {
  margin-bottom: 20px;
}

table th, table td {
  border: solid 1px rgba(0, 57, 93, 0.2);
  padding:5px;
}

table th {
  background: rgba(0, 57, 93, 0.05);
}

.resource table {
  width: 100%;
  text-align: left;
  border-collapse:collapse;
}

.resources-description a {
  text-decoration: underline;
}

/*https://codepen.io/michmy/pen/jBQQpp*/

.control-group {
  display: inline-block;
  vertical-align: top;
  /*background: #fff;*/
  text-align: left;
  /*box-shadow: 0 1px 2px rgba(0,0,0,0.1);*/
  padding: 30px;
  /*width: 200px;*/
  width: 120px;
  /*height: 210px;*/
  margin: 10px;
}

@media (max-width : 1500px) {
  .control-group {
    padding:15px;
  }
}

.filters-line-break {
  display: none;
}

@media (max-width : 1380px) {
  .filters-line-break{
    display: block;
  }
}

@media (max-width : 700px) {
  .control-group {
    width:280px!important;
  }
}


.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  cursor: pointer;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 0px;
  left: 0;
  height: 16px;
  width: 16px;
  background: #fff;
  border: 1px solid #ccc;
/*
  .control:hover input:not([disabled]):checked ~ &,
  .control input:checked:focus ~ &
    border-color: #666
    */
}
.control--checkbox .control__indicator {
  border-radius: 3px;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input:not([disabled]) ~ .control__indicator,
.control input:focus ~ .control__indicator {
  border-color: #666;
}
.control input:checked ~ .control__indicator {
  background: #fff;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 5px;
  top: 0px;
  width: 5px;
  height: 12px;
  border: solid #34bb92;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 5px;
  top: 5px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #34bb92;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}
.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
  border-top-color: #000;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

.noUi-tooltip {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
    padding: 2px 5px;
}


.control-group-durations {
  width:280px;
}

.control-group-durations .control {
  float:left;
  width:100px;
}

.resource-container {
  /*opacity: 0;*/
}


.main {
  /*overflow: hidden;*/
}

.resources-aug-2020 .sea-main-wrapper{
  /*max-width: 1200px;*/
  /*width: 60%;*/
}

.resources-aug-2020 .resources-section {
  max-width: 1200px;
  margin: 40px auto;
  /*width: 150%;*/
  /*transform: translateX(-25%);*/
  /*display: inline-block;*/
}

.resources-aug-2020 .sea-left,
.resources-aug-2020 .sea-right {
  width:20%;
}

.sea-left img,
.sea-right img {
  /*width: 200%;*/

  /*position: absolute;*/
}

.sea-right img {
  right: 0;
  /*height: 2px;*/
}

.sea-main-wrapper-inner {
/*      margin-left: -20%;
    margin-right: -20%;*/
}

.resources-aug-2020 .sea-main {
  max-width: none;
}

.resource-controls {
  text-align: center;
}


.ribbon {

  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#97D0CA 0%, #84c8c1 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 19px; left: -21px;
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 1px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #97D0CA;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #97D0CA;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #97D0CA;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #97D0CA;
}

.association img {
  max-width: 70px;
    /* float: right; */
    position: absolute;
    top: 10px;
    right: 10px;
    border: solid 1px #92cdc7;
}

.body-copy a {
  text-decoration: none;
  color: #00395D;
  /*transition: color 0.2s;*/
}

.body-copy a {
  text-decoration: underline;
}

.body-copy a:hover,
.resources-description a:hover,
.resources-section a:hover {
  color: white;
}

.quick-links a{
  padding:5px;
  white-space: nowrap;
}

.body-copy p,
.body-copy a,
.body-copy li{
  font-weight: normal;
  text-align: left;
  font-family: Satoshi, sans-serif;
  /*color:#24626E;*/
  color: #00395D;
  font-size: 20px;
  width:90%;
  max-width:none;
}

img.aligncenter {
    margin: 0 auto;
    display: block;
}

.post-thanks-for-registering .button {
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    text-decoration: none;
    padding: 1em 2em;
    vertical-align: middle;
    transition: background 0.3s;
    width:auto;
}

.post-thanks-for-registering .button:hover {
    color: white;
}

.negative-margin-top {
  margin-top:-22px!important;
}

@media (min-width : 1200px) {

    /*h1:first-line {*/
    h1 {
      font-size: 70px;
       font-size: 56px;
       line-height: 48px;
    }

    .text-content h1:first-line {
      /*font-size: 50px;*/
    }
}

@media (max-width : 700px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 22px;
    line-height: 1.1;
  }

  .main p {
    font-size: 17px;
  }

  .negative-margin-top {
    margin-top:-10px!important;
  }
}

.header h1 img {
  width:160px;
  /*position:absolute;*/
  /*left:10%;*/
  /*top:0%;*/
  /*margin-top: 0%;*/
  /*left: -170px;*/
  display: block;
  margin: 20px auto 50px;
}

.header h1 br {
  display: none;
}

@media (max-width : 1000px) {
.header h1 br {
  display: block;
}
.header h1 img {
  position: static;
}
.header h1 {
  position: static;
}

.header-illustration-2020 {
    
    top: 0%;
    margin-top: 0%;
    right: 1%;
    top: 6%;
    width: 12%;
    height: 240px;
    background-size: 100%;
    
}
}

@media (max-width : 600px) {
  .header {
    /*padding-top:30px;*/
  }

  .nav a {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
    text-decoration: none;
    color: #04395C;
    padding-top: 20px;
  }
}

#mc_embed_signup .button {
  display: block!important;
    margin: 1em auto!important;
}

#mc_embed_signup .mc-field-group {
    padding: 3% 3%!important;
    box-sizing: border-box!important;
}

.stamps {
  text-align:center;
}
.stamp {
  display:inline-flex;
  border-radius:50%;
  padding:20px;
  margin:10px;
  height: 300px;
  width:300px;
  /*line-height: 140px;*/
  text-align: center;
  background: #ABD6D6;
  justify-content: center;
  align-items: center;
  /*border: 5px solid #016b68;*/
}
.stamp span {
  display: inline-block;
  /*vertical-align: middle;*/
  /*line-height: normal;*/
  font-family: 'Sigmar One', sans-serif;
    /*text-transform: uppercase;*/
    /*letter-spacing: 1px;*/
    color: #043857;
    font-size: 22px;
    line-height: 1;
    /*align-items: flex-start;*/

}

.festival-intro {
  text-align: center;
}




@media (max-width : 1440px) {
  .planner-grid-items-5 {
    width:140%!important;
    margin-left:-20%!important;
  }

  .planner-grid-items-5 .planner-grid-item {
      width: 33.3%!important;
  }
}

@media (max-width : 1150px) {

  .planner-grid-items-3, .planner-grid-items-5 {
    width:100%!important;
    margin-left:0!important;
  }

  .planner-grid-items-3 .planner-grid-item, 
  .planner-grid-items-5 .planner-grid-item {
      width: 50%!important;
  }

}

@media (max-width : 600px) {

  .planner-grid-items .planner-grid-items {
    width:100%!important;
    margin-left:0!important;
  }

  .planner-grid-items .planner-grid-item {
      width: 100%!important;
  }

  .about-august-2020 blockquote p {
    font-size: 20px!important;
    line-height: 1.1!important;
  }

  

.icon-2020 {
  width:80px;
  height: 80px;
  border-radius: 50%;
  /*float:left;*/
  background-size:100%; 
  background-repeat: no-repeat; 
  margin:10px;
  display: inline-block;
}

}



.text-white {
  color: white!important;
}

.about-august-2020 .wp-block-embed-youtube {
  width: 100%;
  margin-left:0;
}

.about-august-2020 .blocks-gallery-grid {
  display: block;
  text-align: center;
}

.about-august-2020 .blocks-gallery-item {
  display: inline-block;
  margin:0;
}

.has-text-align-center {
  text-align: center!important;
  width: 100%!important;
}

.wp-block-column .wp-block-image {
  margin:0;
}

.wp-block-column .wp-block-image img {
  height: auto!important;
}

.sea-main-wrapper .body-copy p {
  width: 100%!important;
}

.text-content .wp-block-image img {
 height: auto!important;
}

.text-content .wp-block-button__link {
  width: auto!important;
  /*font-family: 'Thunder Stone All Caps Vector', sans-serif;*/
}

.text-content .wp-block-image {
  margin:0 0 1em!important;

}

html { margin-top: 0px !important; }
  * html body { margin-top: 0px !important; }
  @media screen and ( max-width: 782px ) {
    html { margin-top: 0px !important; }
    * html body { margin-top: 0px !important; }
  }

.wp-block-column .wp-block-embed {
  margin-top:0;
  margin-left: 0;
    margin-right: 0;
}


/*2022 updates*/

.sea-main-wrapper {
  overflow-x: hidden;
}

.alignfull, .stamps {
/*  width: 100vw;
  max-width:100%;  Stops horizontal scrollbar  
  margin-left: -50%;*/
  width: 100vw;

    /* max-width: 100%; */
    /* margin-left: -50%; */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);  
}

.alignfull .gb-layout-column-wrap{
  width: 90%;
}

.stamps-inner {
  max-width: 1200px;
  margin: 40px auto 0;
}

.has-white-color p {
  color: #fff!important;
}

.slick-dots li button:before {
    font-size: 10px!important;
    color: white!important;
}

/* to vertically center quote blocks  */
.slick-track {
    display: flex!important;
    align-items: center!important;
}

.dark-blue-wave {
  background: url(dark-blue-wave.png);
  background-repeat: repeat-x;
  background-size: auto 100px;
  background-position: top right;
  height: 100px;
}

.dark-blue-wave-alt {
  background: url(dark-blue-wave-v2.png);
  background-repeat: repeat-x;
  background-size: auto 100px;
  background-position: top right;
  height: 100px;
}

.dark-blue-wave--inverted {
  background: url(blue-wave-inverted.png);
  background-color: #1f8786;
  background-repeat: repeat-x;
  background-size: auto 100px;

  height: 100px;
}

.light-blue-wave--inverted {
  background: url(light-blue-wave-inverted.png);
  background-color: #1f8786;
  background-repeat: repeat-x;
  background-size: auto 100px;

  height: 100px;
}

.dark-blue-wave--inverted-alt {
  background: url(blue-wave-inverted-v2.png);
  background-color: #1f8786;
  background-repeat: repeat-x;
  background-size: auto 100px;

  height: 100px;
}

.dark-blue-wave--inverted-alt-no-bg-color {
    background: url(blue-wave-inverted-v2.png);
  background-color: #1f8786;
  background-repeat: repeat-x;
  background-size: auto 100px;

  height: 100px;
  background-color: transparent;
}

.coral-2022 {
    /*background: #1CABAB;*/
    background-image: url(coral-2022.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-size: 12% auto,;
    background-position: right bottom;
    height: 160px;
    position: relative;
    bottom: -30px;
  }

@media (max-width : 1200px) {
  .sea-main {
      width: 75%;
      max-width: 800px;
  }

  .main {
    background-color: #1CABAB;
    background-size: 12% auto, 12% auto, 12% auto, 12% auto;
    /*background-position: 0 40px, right 400px, right 40%;*/
    background-position: 0 40px, right 400px, right 30%, left 40%;
    padding: 40px 0 0;
  }

  .header {
    background-size: 30% auto, 100px auto, 120px auto;
    padding-bottom: 140px;
    
  }

  .header .nav {
    margin-top: 30px;
  }

  .wod-slider .gb-layout-column-wrap {
    width: 80%;
    max-width: 600px!important;
  }

  .social-links {
    font-size: 18px;
  }
}

@media (max-width : 640px) {
  .header {
    background-size: 50% auto, 60px auto, 70px auto, 70px auto;
    padding-bottom: 100px;
  }
  .wod-slider .gb-layout-column-wrap {
    width: 90%;
    max-width: 300px!important;
  }

  .sea-main {
      width: 70%;
  }

  .main {
   
    background-position: 0 40px, right 400px, right 30%, left 35%;
   
  }
}

.header-logo-wrapper {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 1140px;
}

.header-logo-wrapper a{
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width : 1000px) {

  .header .nav-wrapper {
    overflow: hidden;
  }

}

/* Mmen customisation  */

.mm-panel {
  background: rgb(213, 235, 234)!important;
}

.mm-listitem__text {
  color: rgb(13, 68, 102)!important;
}

.mm-listitem__text:hover {
  color: rgb(28, 171, 171)!important;
}

.menu-button {
  color: rgb(13, 68, 102)!important;
  fill: rgb(13, 68, 102)!important;
  display: none!important;
}

@media (max-width : 900px) {
  
  .nav {
    /*padding-right: 20px;*/
    float: right;
  }

  .nav a{
    display: none;
  }

  .nav .menu-button {
    display: block!important;
    margin-right: 29px!important;
  }

  .header h1 {
    margin-top: 80px;
  }

  .balloon {
    right: 30%;
    top: 10px;
    margin-top: 0;

  }

  .balloon h2 {
    font-size: 18px;
    letter-spacing: 1px;
  }
}

@media (max-width : 650px) {
  .balloon h2 {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-family: Satoshi, sans-serif;
    font-weight: bold;
    margin-top: 25%;
  }

  .balloon {
    margin-top: 30px;
    min-width: 50px;
  }
}

@media (max-width : 450px) {
  .balloon h2 {
    
    font-size: 10px;
    
    margin-top: 10px;
  }

  
}

body {
  overflow-x: hidden!important;
    position: relative!important;
}
}

.header h1 {
  margin-top: 80px;
}

.control-group--search {
  width: auto!important;
}

.post-competition .sea-main-wrapper {
  overflow: hidden;
}


.post-competition .main {
  /* need to remove some bg images because this is a short page */
  background-image: url("sea-left-2022.png"), url("sea-right.png");
  background-position: 0 40px, right 100px;

  min-height: 0;
  padding-bottom: 400px;
}

.custom-slider .custom-slide {
  height: 0;
  padding-bottom: 18.75%;
  width: 100vw;
  background-position: center;
  background-size: cover;
}

.custom-slider .slick-prev {
    left: 25px;
    z-index: 100;
}
.custom-slider .slick-next {
    right: 25px;
    z-index: 100;
}

.alignfull.wod-slider-custom .gb-layout-column-wrap {
    width: 100%;
}

.dark-blue-wave--inverted--on-light-blue {
  background-color: #1CABAB;
}

/*Dropdown menu*/

/* The container <div> - needed to position the dropdown content */
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding-left: 0;
  text-align: left;
  margin-top: 0;
}

/* Links inside the dropdown */
.dropdown-content li {
  color: black;
  padding: 12px 6px;
  /*padding-left: 10px;*/
  text-decoration: none;
  display: block;
}

.dropdown-content li a {
  padding: 5px 0;
}

.dropdown-content a:hover {
  color: #1cabab;
}


/* Show the dropdown menu on hover */
.dropdown-wrapper:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-wrapper:hover .dropbtn {background-color: #3e8e41;}

.submenu-icon {
  font-size: 10px;
}

.mm-menu {
  /*border-right: solid 1px rgba(0, 0, 0, 0.1);*/
}

.mm-menu .submenu {
  /*border-top: solid 1px rgba(0, 0, 0, 0.1);*/
}

.custom-slider-block-buttons {
  position: absolute;
  bottom: 20px;
}

.custom-slider-block-button {
    font-size: 20px!important;
}

.slick-prev:before, .slick-next:before {
    font-size: 50px!important;
}

.slick-prev, .slick-next {
  width: 50px!important;
  height: 50px!important;
}

.slick-dots li button:before {
    font-size: 15px!important;
}

@media (max-width : 1200px) {
.custom-slider-block-button {
    /*margin-top: 30%!important;*/
    font-size: 14px!important;
}
.slick-prev:before, .slick-next:before {
    font-size: 30px!important;
}
.slick-prev, .slick-next {
  width: 30px!important;
  height: 30px!important;
}
}

@media (max-width : 900px) {
.custom-slider-block-button {
    /*margin-top: 30%!important;*/
    font-size: 10px!important;
}
.slick-prev:before, .slick-next:before {
    font-size: 25px!important;
}
.slick-prev, .slick-next {
  width: 25px!important;
  height: 25px!important;
}

.custom-slider-block-buttons {
    bottom: 0px;
}
.custom-slider .custom-slide {
  padding-bottom: 21%;
}
}

.twentytwentytwo-carousel .slick-dots {
  bottom: -40px!important;
}

.twentytwentytwo-carousel .custom-slider-block-buttons {
    bottom: 10px;
}

.wp-block-column {
  margin: 10px;
}