/* Resets */

*:focus {
   outline: none !important;
}

body {
  background: var( --ms-background );
  color: var( --ms-colour-text );
  margin: 0;
  position: relative;
  background: rgb(191,183,164);
  background: linear-gradient(0deg, rgba(191,183,164,1) 0%, rgba(244,237,226,1) 30%, rgba(244,237,226,1) 100%);   
  /* font-size: 23px;   */

}


form#top-contact {
  display:grid;
  grid-template-rows: auto min-content;
  grid-template-columns: 50% 50%;
  max-width: 600px;
  margin: 10px auto;
  justify-content: center;
}


form#top-contact input[name="fromemail"] {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  font-size: 19px;
  line-height: 30px;
  border: 3px solid var(--ms-colour-boxes);
  border-radius: 5px;
  color: var(--ms-colour-boxes);
  margin: 5px;
  padding: 5px 10px;

}

form#top-contact.focused input[name="fromemail"] {
  grid-row: 1 / 2;
  grid-column: 1 / 3
}

form#top-contact textarea {
  display: none;
  font-size: 19px;
  line-height: 30px;
  border: 3px solid var(--ms-colour-boxes);
  border-radius: 5px;
  color: var(--ms-colour-boxes);
  margin: 5px;
  padding: 5px 10px;
}
form#top-contact.focused textarea {
  display: block;
  min-height: 50px;
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

form#top-contact:not(.focused) button {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

form#top-contact.focused button {
  grid-row: 3 / 4;
  grid-column: 1 / 3
}

.clubs-list {
  max-width: 600px;
  margin: 10px auto;
  text-align: center;
}
.clubs-list > a {
  display: inline-block;
  width: 250px;
  margin: 10 auto;
  border: 5px solid var( --ms-colour-boxes );
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.container {
  max-width: 1200px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  max-width: 100vw;
  overflow: hidden;
}

.getstarted.container {
  display: none;
}

.header-box {
  margin: 0 auto;
  max-width: 835px;
  /* width: 90vw; */
  width: 835px;
  padding: 35px 55px;
  color: var( --ms-colour-header );
  font-size: 70px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: bold;
  border: 7px solid var( --ms-colour-boxes );
  box-sizing: border-box;
  position: relative;
}
.header-box:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0; right: 0;
  border-top: 7px solid var( --ms-colour-boxes );
}



    /* input[contenteditable=true]:empty:before { */
    input::placeholder {
      /* content: attr(placeholder); */
      color: var( --ms-colour-text );
      opacity: 0.25;
    }


/* 

div.try-now-5 {
  text-transform: uppercase;
  font-size: 42px;
  text-align: center;
  padding-top: 48px;
  line-height: 50px;
  background: 0;
  color: var( --ms-colour-text);
  font-weight: bold;
  cursor: pointer;  
  margin: 0 auto;
} */



.main.container {
  height: 2040px;
}


/* Random image */

.carousel-1 .get-random {
  position: absolute;
  right: -45px;
  top: calc( 50% - 21px );
  width: 80px;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 35px;
  transition: 0.15s;
  background: rgba( 0 , 0 , 0 , 0.3 );
  border: 1px solid #555;  
  color: white;
  transition: opacity 0.15s;
}
  .carousel-1 .get-random:before { transition: 0.15s; }
  .carousel-1 .get-random:hover:before { transition: 0.15s; transform: scale( 1.25 ); }


/* Filters */



.ms-editor-tile-filter {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 230px;
  height: 24px;
  padding: 8px 0;
  background: rgba( 0 , 0 , 0 , 0.3 );
  border: 1px solid #555;
  transition: 0.25s;
  color: white;
  border-radius: 30px;
  z-index: 100;
}

.ms-editor-tile-filter > div[class*="icon"]:before {
  line-height: 40px;
}
.ms-editor-tile-filter > div[class*="icon"] {
  position: absolute;
  top: 1px;
  transition: 0.25s;
  font-size: 20px;
  cursor: pointer;
}
  .ms-editor-tile-filter > .icon-right-open { left: auto; right: 0; }
.ms-editor-tile-filter > .filter-name {
  position: absolute;
  top: 12px; left: 25px; right: 25px;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.ms-editor-tile-brightness {
  position: absolute;
  top: 10px; left: 10px;
  width: 40px;
  padding: 0;
  height: 100px;
  background: rgba( 0 , 0 , 0 , 0.3 );
  border: 1px solid #555;
  transition: 0.25s;
  color: white;
  border-radius: 30px;
}

.ms-editor-tile-brightness div[class*="icon-sun"] {
  position: absolute;
  top: 5px; left: 0px;
  transition: 0.25s;
  opacity: 1;
  font-size: 20px;
  cursor: pointer;
}
.ms-editor-tile-brightness div[class*="icon-sun"]:hover { transform: scale( 1.25 ); }
.ms-editor-tile-brightness div.icon-sun { top: auto; bottom: 5px; }

.ms-editor-tile-brightness .brightness-bar {
  position: absolute;
  top:47px; left: 5px;
  transition: 0.25s;
  border: 1px solid #bbb;
  background: #bbb;
  height: 2px;
  border-radius: 2px;
  width: 28px;
  opacity: 1;
}

/* Image adjustments */

.brightness-darkest .brightness-bar { top: 61px; }
.brightness-darker .brightness-bar { top: 54px; }
.brightness-lighter .brightness-bar { top: 40px; }
.brightness-lightest .brightness-bar { top: 33px; }

 .ms-editor-tile-filter .filter-name::before { content : 'Normal'; }
.filter-xpro2 .ms-editor-tile-filter .filter-name::before { content : 'X-Pro 2'; }
.filter-willow .ms-editor-tile-filter .filter-name::before { content : 'Willow'; }
.filter-walden .ms-editor-tile-filter .filter-name::before { content : 'Walden'; }
.filter-valencia .ms-editor-tile-filter .filter-name::before { content : 'Valencia'; }
.filter-toaster .ms-editor-tile-filter .filter-name::before { content : 'Toaster'; }
.filter-sutro .ms-editor-tile-filter .filter-name::before { content : 'Sutro'; }
.filter-nashville .ms-editor-tile-filter .filter-name::before { content : 'Nashville'; }
.filter-amaro .ms-editor-tile-filter .filter-name::before { content : 'Amaro'; }
.filter-1977 .ms-editor-tile-filter .filter-name::before { content : '1977'; }




div[class*="box-"] {
  position: absolute;
  border: 7px solid var( --ms-colour-boxes);
  z-index: 200;
  box-sizing: border-box;
  background: var( --ms-background );    
}
div[class*="circle-"] {
  position: absolute;
  width: 220px;
  height: 220px;
  line-height: 198px;
  font-size: 100px;
  border: 11px solid var( --ms-colour-circles);
  color: var( --ms-colour-circles);
  background: var( --ms-background );
  z-index: 200;
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
}
div[class*="circle-"]::before {
  width: 100%;
}
  div[class*="circle-"].big-circle {
    width: 440px;
    height: 440px;
  }


div[class*="line-"] {
  position: absolute;
  z-index: 100;
  border: 0 solid var( --ms-colour-lines);
  box-sizing: border-box;
}
div[class*="text-"] {
  position: absolute;
  z-index: 250;
  border: 0;
  box-sizing: border-box;
}
  div[class*="text-"] > h3 {
    font-size: 1.2em;
    color: var( --ms-colour-text );
    font-weight: lighter;
    text-transform: uppercase;
    margin: 0 0 5px 0;
  }
  div[class*="text-"] > p {
    font-weight: bold;
    margin: 0 0 5px 0;
  }

.carousel-1 {
  position: absolute;
  z-index: 250;
  border: 0;
  box-sizing: border-box;
  background: #f4ede2;
  border: 1px solid #efefef;
  overflow: hidden;
}

.carousel-1 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.75s;
  opacity: 1;
}

div.box-1 {
  left: 184px;
  top: 57px;
  height: 466px;
}
div.box-1a {
  left: 184px;
  top: 57px;
  width: 835px;
  height: 29px;
}

div.box-2 {
  left: 196px;
  top: 2089px;
  width: 806px;
  height: 427px;

}

div.circle-1 {
  left: 79px;
  top: 381px;
  width: 440px;
  height: 440px;
  line-height: 418px;
  font-size: 200px;
}

.circle-2 {
  left: 895px;
  top: 748px;
}

div.line-1 {
  left: 292px;
  top: 775px;
  width: 717px;
  height: 89px;
  border-width: 0px 0px 7px 7px;
}

div.line-2 {
  left: 1002px;
  top: 959px;
  width: 7px;
  height: 565px;
  border-width: 0 0 0 7px;
}

div.line-3 {
  left: 474px;
  top: 1710px;
  width: 536px;
  height: 157px;
  border-width: 0 7px 7px 0;
}

div.line-4 {
  left: 393px;
  top: 1972px;
  width: 17px;
  height: 129px;
  border-width: 0 0 0 7px;
}

div.line-5 {
  left: 596px;
  top: 2500px;
  width: 22px;
  height: 62px;
  border-width: 0 0 0 7px;
}

.circle-3 {
  left: 895px;
  top: 1513px;
}
.circle-4 {
  left: 284px;
  top: 1750px;
}

.text-1 {
  left: 608px;
  top: 581px;
  width: 314px;
  line-height: 
}
.text-2 {
  left: 202px;
  top: 928px;
  width: 444px;
}

.text-3 {
  left: 410px;
  top: 1562px;
  width: 343px;
}

.text-4 {
  left: 607px;
  top: 1915px;
  width: 360px;
}

.carousel-1 {
  left: 202px;
  top: 1069px;
  width: 692px;
  height: 445px;
}
.carousel-1a {
  position: absolute;
  left: 0px;
  top: 1069px;
  width: 160px;
  height: 445px;
  object-fit: cover;
}

.carousel-2 {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100vw;
  width: 100vw;
  margin-bottom: 25px;
}
.carousel-slider {
  display: flex;
}

.carousel-2 > * > * {
  display: inline-block;
  position: relative;
  left: 0;
  flex: 0 0 450px;
  object-fit: cover;  
}

.carousel-2 > * > div > img {
  display: block;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  margin: 20px auto;
  object-fit: cover;
}
.carousel-2 > * > div > p {
  width: 320px;
  text-align: center;
  margin: 20px auto 10px auto;
}


@media (max-width: 400px) {
  .main-container {
    overflow: hidden;
  }
}

@media (max-width: 1000px) {

  .container {
    max-width: 400px;
    min-width: 350px;
    width: 100vw;
    margin: 0 auto;
    overflow: initial;
  }
  .container.main {
    height: 1180px;
  }


  div[class*="circle-"], div[class*="circle-"].big-circle {
    width: 100px;
    height: 100px;
    font-size: 50px;
    line-height: 90px;
    border-width: 5px;
    left: 18px;
  }
  div.circle-1 { top: 319px; }
  div.circle-2 { top: 479px; }
  div.circle-3 { top: 881px; }
  div.circle-4 { top: 1039px; }
  div.try-now {
    width: 100px;
    height: 100px;
    font-size: 20px;
    line-height: 30px;
    border-width: 5px;
  }

  div[class*="box-"] {
    border: 5px solid var( --ms-colour-boxes);
    font-size: 35px;
  }
  .header-box {
    width: 371px;
    /* border-left: 0; */
    padding: 20px 0px 35px 90px;
    line-height: 50px;
    font-size: 44px;
    border: 5px solid var( --ms-colour-boxes);
    font-size: 35px;    
    left: -20px;
  }
    .header-box:before {
      border-top: 5px solid var( --ms-colour-boxes );
    }

  .header-box.box-1 {
    top: 34px;
    height: 257px;
    left: -20px;
  }

  .hand.container .hand {
    height: 280px;
  }

  .content-box > .icon {
    width: 80px;
    height: 80px;
    line-height: 70px;
    border-width: 5px;
  }

  .spacer-line { border-width: 0 0 0 4px; margin-left: 38px; }

  .info-box { border-width: 5px; }

  div.box-2 { display: none; }

  div[class*="line-"] {
    left: 66px;
    width: 0;
  }
  div.line-1 {
    top: 286px;
    height: 42px;
    border-width: 0px 0px 0px 4px;
  }
  div.line-2 {
    top: 417px;
    height: 618px;
    border-width: 0px 0px 0px 4px;
  }
  div.line-3 {
    top: 577px;
    height: 312px;
    border-width: 0px 0px 0px 4px;
  }
  div.line-3 {
    top: 981px;
    height: 120px;
    border-width: 0px 0px 0px 4px;
  }
  div.line-4 {
    top: 1339px;
    height: 46px;
    left: 197px;
    border-width: 0px 0px 0px 4px;
  }
  div.line-5 { display: none; }
  
  .carousel-1 {
      left: 49px;
      top: 625px;
      width: 300px;
      height: 200px;
  }

  .carousel-1a {
      left: 0x;
      top: 625px;
      width: 31px;
      height: 200px;
  }

  div[class*="text-"] {
    font-size: 16px;
    line-height: 22px;
    left: 140px;
    width: 220px;
  }
  div[class*="text-"] > h3 { margin-bottom: 2px; }  
  .text-1 { top: 324px; }
  .text-2 { top: 487px; }
  .text-3 { top: 885px; }
  .text-4 { top: 1045px; }

}


.popup-mask {
  position: fixed;
  top: 110vh;
  height: 100vh;
  left: 0;
  width: 100vw;
  background: rgba( 0 , 0 , 0 , 0.5 );
  z-index: 999;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 2s, backdrop-filter 2s;
}
.popup-mask.active {
  top: 0;
  opacity: 1;
}

.popup {
  position: fixed;
  top: -100vh;
  height: calc( 100vh - 20px );
  left: calc( 50vw - min( 400px , calc( 50vw - 10px ) ) );
  width: calc( 100vw - 20px );
  max-width: 800px;
  background: rgba( 255 , 255 , 255 , 0.75 );
  /* display: none; */
    display: grid;
  grid-template-rows: min-content auto min-content;
  z-index: 1000;
  border-radius: 10px;
  transition: 0.66s;
  opacity: 0;
}
.popup.active {
  top: 10px;
  opacity: 1;
}

.popup h1, .popup h2, .popup h3 {
  text-align: center;
  margin: 20px auto;
}

.popup .popup-head {
  grid-row: 1 / 2;
}

.popup .popup-body {
  grid-row: 2 / 3;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.popup .popup-footer {
  grid-row: 3 / 4;
}

button {
  background: white;
  display: block;
  margin: 10px auto;
  color: var( --ms-colour-boxes );
  border: 3px solid var( --ms-colour-boxes );
}

.popup .popup-circular {
  display: block;
  height: min( 250px , 50vw );
  width: min( 250px , 50vw );
  border-radius: 50%;
  object-fit: cover;
  margin: 10px auto;
}

.popup p {
  margin: 10px;
}


.block-center {
  display: block;
  margin: 20px auto;
  text-align: center;
}

.italic {
  font-style: italic;
}