@import 'init';

a:not(.btn):not(.nav-link) {
  text-decoration: underline;
  word-break: break-all;
}

p
/*, li:not(.nav-item) */
{
  font-size: 1.3em;
}
ul {
  padding-inline-start: 20px;
  li {
    margin-bottom: 0;
  }
}
.error, .success {
    padding: 16px 0;
/*    max-width: 500px;*/
    margin: 0 auto;
    .text {
        padding: 8px 16px 8px 54px;
        position: relative;
        color: white;
        border-radius: 32px;
        &::before {
            position: absolute;
            font-family:'FontAwesome';
            font-weight: 700;
            font-size: 26px;
            left: 20px;
            top: 0;
        }
    }
}
.error {
    .text {
        background-color: #eb2f2faa;
        &::before {
            content: '\f00d';
        }
    }
}
.success {
    .text {
        background-color: #3c872eaa;
        &::before {
            content: '\f00c';
        }
    }
}
/* form */
.form-input {
  label {
    .f-teko;
    font-weight: 400;
    font-size: 2em;
    text-transform: uppercase;
  }
  input[type="text"], input[type="date"], input[type="password"], select {
    border: 1px solid @yellow;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 1.3em;
    width: 100%;
    margin-bottom: 30px;
  }
}

.editorContent {
/*  padding: 50px 0;*/
  h3 {
    .f-teko;
    font-size: 3em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2rem;
  }
  h4 {
    .f-teko;
    font-size: 2em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2rem;
  }
  h5 {
    font-weight: 700;
    font-size: 1.83em;
    margin-top: 28px;
    margin-bottom: 16px;
  }
  h6 {
    font-weight: 700;
    font-size: 1.4em;
    margin-top: 28px;
    margin-bottom: 16px;
  }
  hr {
    margin-top: 2rem;
  }
}
  
/* covid */
#covid_resources {
  iframe {
    display: none;
  }
  a {
    cursor: pointer;
  }
  .resource-wrapper {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    .left, .right {
      display: flex;
      align-items: center;
    }
    .right {
      width: 200px;
      justify-content: space-around;
    }
    .info {
      margin-left: 50px;
    }
    .resource- {
      &date, &title {
        .f-teko;
      }
      &date {
        font-size: 1.25em;
      }
      &title {
        font-weight: 400;
        font-size: 2.25em;
      }
    }
  }
}

/* gallery */
.media-wrapper {
  .thumb {
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 15px;
    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: @yellow;
      font-size: 60px;
      opacity: .3;
    }
    &:hover .icon {
      opacity: 1;
    }
  }
}
#highlighted {
  .title {
    text-align: center;
  }
  .thumb {
    height: 300px;
    border: 4px solid @yellow;
    &:hover {
      border-color: @yellow-tr;
    }
  }
}
#videos, #photos {
  .col-lg-3 {
    margin-bottom: 30px;
  }
  .thumb {
    height: 200px;
    &:hover {
      border: 2px solid @yellow;
    }
  }
  .btn {
    padding-left: 48px;
    padding-right: 48px;
  }
}
#videos {
  padding-bottom: 20px;
}

/* news */
#latest {
  .title {
    margin-bottom: 8px;
    font-weight: 400;
  }
  .content {
    font-size: 1.3em;
  }
  .btn {
    margin-top: 1rem;
  }
}
#news {
  .news-wrapper {
    display: flex;
    height: 160px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 7px;
    .image {
      height: 100%;
      width: 130px;
      background-size: cover;
      background-position: center;
      border-radius: 12px;
    }
    .info {
      width: ~'calc(100% - 130px)';
      padding-left: 15px;
      .news-date {
        .f-teko;
        font-size: 1.25em;
        text-transform: uppercase;
      }
      .news-title {
        .f-teko;
        font-weight: 400;
        font-size: 2.25em;
        margin-bottom: 16px;
      }
      .news-content {
        font-size: 1.15em;
        a {
          font-weight: 700;
        }
      }
      @media only screen and (max-width: 1199px) {
        .news-content {
          font-size: 1.05em;
        }
      }
      @media only screen and (max-width: 575px) {
        .news-content {
          font-size: 0.9em;
        }
      }
    }
  }
}

/* executives */
@e-img: 120px;
#executives {
  .inner-wrapper {
    display: flex;
    border-radius: 8px;
    .image {
      width: @e-img;
      height: @e-img;
      border-radius: 8px;
    }
    .info {
      flex: 0 0 ~'calc(100% - @{e-img})';
      width: ~'calc(100% - @{e-img})';
      padding: 10px 20px;
      .member- {
        &name, &position {
          .f-teko;
          font-weight: 400;
        }
        &name {
          font-size: 2em;
        }
        &position {
          font-size: 1.5em;
          margin-bottom: 8px;
        }
        &email, &desc {
          line-height: 1;
        }
        &email {
          text-decoration: none;
        }
      }
    }
  }
  @media only screen and (max-width: 1599px) {
    .inner-wrapper {
      .info {
        member-position {
          font-size: 1.3em;
        }
      }
    }
  }
  @media only screen and (max-width: 575px) {
    .inner-wrapper {
      flex-direction: column;
      .info {
        flex: 0 0 100%;
        width: 100%;
        padding: 8px;
      }
      .member-position {
        font-size: 1.2em;
      }
    }
  }
}
/* sponsors */
@s-img: 210px;
#sponsors {
  .inner-wrapper {
    display: flex;
    border-radius: 8px;
    .image {
      width: @s-img;
      height: @s-img;
      border-radius: 8px;
    }
    .info {
      flex: 0 0 ~'calc(100% - @{s-img})';
      width: ~'calc(100% - @{s-img})';
      padding: 10px 20px;
      .name {
        .f-teko;
        font-weight: 400;
        font-size: 2em;
        margin-bottom: 8px;
      }
      .phone, .url, .address, .email {
        line-height: 1.5;
      }
      /*.url {
        word-break: break-all;
      }
      .url, .email {
        text-decoration: none;
      }*/
      .btn-wrapper {
        margin-top: 8px;
      }
    }
  }
  @media only screen and (max-width: 575px) {
    .inner-wrapper {
      flex-direction: column;
      .info {
        flex: 0 0 100%;
        width: 100%;
        padding: 8px;
      }
    }
  }
}

/* contact */
#map {
  .responsive_map {
    border-radius: 15px;
    border: 3px solid @yellow;
    overflow:hidden;
/*    padding-bottom:56.25%;*/
    position:relative;
    height: 400px;
    width: 100%;
/*    height: 0;*/
    iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
  }
}
#contact {
  padding-top: 50px;
  .content {
    margin-bottom: 2rem;
  }
  .links {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .icon {
      margin-right: 16px;
    }
    .info {
      .f-teko;
      font-weight: 400;
      font-size: 2.25em;
    }
  }
  a.links {
    text-decoration: none;
  }
}
#secondary #main-schedule .tbody-wrapper {
/*  height: 304px;*/
}
#schedule-calendar {
  .btn {
    text-transform: initial; 
  }
}

/* checkbox */
  /* Base for label styling */
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 2.3em;
    font-size: 1em;
    line-height: 1.2;
    cursor: pointer;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid @black;
    background: @yellow;
    border-radius: .2em;
  /*  box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);*/
    -webkit-transition: all .275s;
        transition: all .275s;
  }

  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: '\2713';
    position: absolute;
    top: .525em;
    left: .18em;
    font-size: 1.375em;
    color: @black;
    line-height: 0;
    -webkit-transition: all .2s;
        transition: all .2s;
  }

  /* checked mark aspect changes */
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
  }

  [type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
  }

  /* Disabled checkbox */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #e9e9e9;
  }

  [type="checkbox"]:disabled:checked + label:after {
    color: #777;
  }

  [type="checkbox"]:disabled + label {
    color: #aaa;
  }

  /* Accessibility */
  [type="checkbox"]:checked:focus + label:before,
  [type="checkbox"]:not(:checked):focus + label:before {
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(253, 195, 14, .2);
  }

/* end checkbox */
/*}*/

/* registration */
/*#pricing,*/
#registration-info,
#form-payment {
  /* table */
  .table-head, .table-body {
    padding: 16px 24px;
    border-radius: 8px;
  }
  .table-head {
    background-color: @yellow;
    .f-teko;
    font-weight: 400;
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .table-body {
    font-size: 1.3em;
    margin-bottom: 30px;
    div {
      margin-bottom: 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
#registration-info {
  padding-bottom: 20px;
}

/* section section with no padding */
#form-registration, 
#form-payment,
#pricing_details {
  padding-top: 0;
}
#pricing, #pricing-multi {
  /*.table-body {
    margin-bottom: 8px;
    @media only screen and (min-width: 576px) {
      div {
        margin-bottom: 0;
      }
    }
  }*/
  table { 
    width: 100%; 
    border-collapse: inherit;
    border-spacing: 0 16px;
    margin-top: -16px;
    margin-bottom: -16px;
  }
  /* Zebra striping */
  /*tr:nth-of-type(odd) { 
    background: #eee; 
  }*/
  th { 
    background: @yellow; 
    .f-teko;
    font-weight: 400;
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 20px; 
  }
  td {
    font-size: 1.3em;
  }
  td, th { 
    padding: 16px 24px; 
    text-align: left; 
    &:first-of-type {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    &:last-of-type {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
/*  @media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {*/
  @media only screen and (max-width: 991px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
      display: block; 
    }
    table {
      margin-top: 0;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    
    tr { 
/*      border: 1px solid #ccc; */
      margin-bottom: 16px;
      border-radius: 8px;
    }
    
    td { 
      /* Behave  like a "row" */
      border: none;
/*      border-bottom: 1px solid #eee; */
      position: relative;
      padding: 8px 24px 8px 50%;
      font-size: 1.2em;
    }
    
    td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0px;
      left: 0px;
      width: 45%; 
      padding: 8px 24px;
/*      padding-right: 10px; */
      white-space: nowrap;
      .f-teko;
      font-weight: 400;
      font-size: 23px;
      text-transform: uppercase;
      background-color: @yellow;
      
    }
    td:first-of-type:before {
      border-top-left-radius: 8px;
    }
    td:last-of-type:before {
      border-bottom-left-radius: 8px;
    }
    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "Division"; }
    td:nth-of-type(2):before { content: "Year Born"; }
    td:nth-of-type(3):before { content: "Price"; }
  }
}
#pricing {
  #th-division {
    width: 41.666%;
  }
  #th-year {
    width: 33.333%;
  }
  #th-price {
    width: 25%;
  }
}
#pricing-multi {
  #th-division {
    width: 25%;
  }
  #th-year {
    width: 25%;
  }
  #th-price, #th-two, #th-three {
    width: 16.666%;
  }
  @media only screen and (max-width: 991px) {
    td:nth-of-type(4):before { content: "2 Players"; }
    td:nth-of-type(5):before { content: "3+ Players"; }
  }
}
#form-registration {
  .addChild {
    float: right;
  }
}
#pricing_info {
  /* table */
  .table-head, .table-body {
    padding: 16px 24px;
    border-radius: 8px;
  }
  .table-head {
    background-color: @yellow;
    .f-teko;
    font-weight: 400;
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .table-body {
    font-size: 1.3em;
    margin-bottom: 8px;
  }
  @media only screen and (max-width: 575px) {
    .col-xl-5 {
      margin-bottom: 16px;
    }
    .table-head {
      margin-bottom: 8px;
    }
  }
}
#form-payment {
  ul {
    margin-top: 16px;
  }
}
/* faq */
@faq-margin: 36px;
#faq {
  .contents {
    margin-bottom: @faq-margin;
  }
}
.faq-wrapper {
  border-top: 2px solid @grey;
  position:relative;
  &:last-of-type {
    border-bottom: 2px solid @grey;
  }
}
.faq-arrows {
  color: @yellow;
  font-size: 32px;
/*  float: right;*/
  margin-top: @faq-margin;
  margin-right: 15px;
  position:absolute;
  width:100%;
  text-align:right;
  
  i {
    display: none;
    &.active {
      display: inline-block;
    }
  }
  &:hover {
    cursor:pointer;
  }
}
.faq-question {
  font-size: 1.83em;
  margin: @faq-margin 0;
  padding-right:40px;
}
.faq-answer {
  max-height: 0;
  transition: margin .4s ease-out, max-height .4s ease-out;
  overflow: hidden;
  margin-bottom: 0;
  p {
    margin-bottom: 0;
  }
  &.active {
    max-height: 100px;
    transition: margin .4s ease-out, max-height .4s ease-out;
    margin-bottom: @faq-margin;
  }
}

/* fields */
.field-wrapper {
  margin: 0;
  margin-bottom: 30px;
  border-radius: 15px;
}
@media only screen and (max-width: 991px) {
  .field-wrapper {
    margin-bottom: 16px;
  }
}
.field-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}
.field-location {
  font-weight: 700;
  font-size: 1.4em;
  margin-bottom: 20px;
}
.field-address {
  font-size: 1.15em;
  margin-bottom: 24px;
}
.field-link {
  max-width: max-content;
  padding: 8px 32px;
}
.field-map {
  .responsive_map {
    border-radius: 15px;
    border: 3px solid @yellow;
    overflow:hidden;
/*    padding-bottom:56.25%;*/
    position:relative;
    height: 200px;
    width: 100%;
/*    height: 0;*/
    iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
  }
}
.editorContent {
  blockquote, li {
    font-size:1.3em;
  }
  @media only screen and (max-width:1599px) {
    blockquote, li {
      font-size:1.1em;
    }
  }
  @media only screen and (max-width:991px) {
    blockquote, li {
      font-size:1em;
    }
  }
}
@media only screen and (max-width: 1599px) {
  p,
  li:not(.nav-link),
  #latest .content,
  #pricing .table-body,
  #registration-info .table-body, 
  #form-payment .table-body, 
  #pricing_info .table-body,
  .form-input input[type="text"], 
  .form-input input[type="date"], 
  .form-input input[type="password"], 
  .form-input select {
    font-size: 1.1em;
  }
  .field-location,
  .editorContent h6 {
    font-size: 1.2em;
  }
  #faq .faq-question,
  .editorContent h5 {
    font-size: 1.4em;
  }
  #contact .links .info,
  #covid_resources .resource-wrapper .resource-title {
    font-size: 1.7em;
  }
  #sponsors .inner-wrapper .info .name,
  #pacing .table-head,
  #registration-info .table-head, 
  #form-payment .table-head,
  #pricing_info .table-head,
  .form-input label {
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 1199px) {
  .field-location,
  .editorContent h6 {
    font-size: 1.1em;
  }
  .field-address {
    font-size: 1.05em;
  }
  #faq .faq-question,
  .editorContent h5 {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 991px) {
  p,
  li:not(.nav-link),
  #latest .content,
  #pricing .table-body,
  #registration-info .table-body, 
  #form-payment .table-body, 
  #pricing_info .table-body,
  .form-input input[type="text"], 
  .form-input input[type="date"], 
  .form-input input[type="password"], 
  .form-input select {
    font-size: 1em;
  }
  .field-location,
  .editorContent h6 {
    font-size: 1em;
  }
  #faq .faq-question,
  .editorContent h5 {
    font-size: 1.2em;
  }
  
  #contact .links .info,
  #covid_resources .resource-wrapper .resource-title {
    font-size: 1.3em;
  }
  #sponsors .inner-wrapper .info .name,
  #pacing .table-head,
  #registration-info .table-head, 
  #form-payment .table-head,
  #pricing_info .table-head,
  .form-input label {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 575px) {
  .field-address {
    font-size: 0.9em;
  }
  
}
@media only screen and (max-width: 575px) {
  .banner {
    height: 200px;
  }
  .editorContent {
    hr,
    h5,
    h6 {
      margin-top: 1rem;
    }
  }
  .form-input {
    input[type="text"], input[type="date"], input[type="password"], select {
      margin-bottom: 16px;
    }
  }
  #pricing, #registration-info, #form-payment {
    .table-head, .table-body {
      padding: 15px 0;
    }
  }
  #pricing_info {
    .table-head, .table-body {
      padding: 15px;
    }
  }
  #covid {
    padding-bottom: 16px;
  }
  #covid_resources .resource-wrapper {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    .info {
      margin-left: 0;
    }
    .left {
      .icons {
        display: none;
      }
    }
    .right {
      justify-content: space-around;
      width: 100%;
    }
  }
  .field-location,
  .field-address {
    margin-bottom: 15px;
  }
}