@import url("font-awesome.min.css");
@import url("//fonts.googleapis.com/css?family=Lato:300,400,900");

/* Globals
=====================================================================*/
html, body {
  background: #f3f6fa;
  color: #333;
  font-family: 'Lato', sans-serif;
  font-size: 15pt;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.75em;
  box-sizing: border-box;
  /* overflow-x: hidden; */

}

body * {box-sizing: border-box;}

.anchor{
  display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;
}

a {color:#df445b;font-weight: bold;}
.login-utility {list-style: none;margin:0;padding:10px 0 0 0;}
.login-utility li {font-size: .8em;font-weight: bold;}
.inline-list {list-style: none;margin:0;}

/* Utilities
=====================================================================*/
.red {background:red;}
.blue {background:blue;}
.yellow {background:yellow;}
.green {background:green;}
.purple {background:purple;}
.pink {background:pink;}

.blue-border {
  /*border-top: 5px solid #117da9;*/
  border-bottom: 5px solid #117da9;
}
.yellow-border {
  /*border-top: 5px solid #f0c345;*/
  border-bottom: 5px solid #f0c345;
}
.red-border {
  /*border-top: 5px solid #df445b;*/
  border-bottom: 5px solid #df445b;
}

.spinning-circles {
  position: fixed;
  z-index:9999;
  top:0px;
  bottom: 0px;
  right: 0px;
  left:0px;
  background:rgba(0, 0, 0, 0.8);
  display:none;
}
.spinning-circles img{
  height:50vh;
  margin-top:25vh;
}

.feature-button, .register-button, .login-button{padding: 1em; border:1px solid #fff;text-transform: uppercase;font-weight: 700;color:#fff;font-size:1em;}
#admin .register-button {font-size:.75em;}

@media only screen and (max-width: 39.063em) {
  .admin-buttons {text-align:left;}
}


.register-button, .login-button, .event-button  {background: #df445b;}
.button, .register-button a, .event-button {padding: 1em; border:1px solid #fff;text-transform: uppercase;font-weight: 700;background: #df445b;}
.feature-button a {color:#fff;}

.event-button {margin: 0 0 1em 0;color:#fff;padding:3.2vh;}
a.button:hover, a.feature-button:hover, a.login-button:hover, a.register-button:hover,
a.button:focus, a.feature-button:focus, a.login-button:focus, a.register-button:focus {color: #fff; background-color: #14679e;}

#promo { display: none; }
.payment-form .stripe-button-el {display:none;}


.large-annoucement{margin-top:20px;background:#df445b;padding:1em;color:#fff;}
.large-annoucement h2{margin:0;padding:0;}

/* Typography
=====================================================================*/
h1, h2, h3, h4, h5 {
  color: inherit;
  font-weight: 300;
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0em;
  font-family: "futura-pt";
}
h1 {font-size: 2em;color:#117da9;text-transform: uppercase;font-weight:700;}
h2 {font-size: 1.5em;font-weight: 700;}
h3 {font-size: 1em;font-weight: 700;}
h4 {font-size: .9em;font-weight: 700;line-height: .5em;padding: 10px 0 0 0;}
h5 {font-size: 1.3em;text-transform: uppercase;font-weight: 700;}

.lt-headline {font-weight: 400;}

/* Header & Navigation
=====================================================================*/
header {
  position: fixed;
  width:100%;
  font-size: .75em;
  font-weight: normal;
  color:#fff;
  text-transform: uppercase;
  z-index: 8888;
  margin-top: 10px;
  background: transparent;
  transition: background 0.2s ease, margin-top 0.2s ease;
}
header.active {
  margin-top: 0;
  background: rgba(0, 0, 0, 0.8);
}
/* Non-home pages: header always semi-transparent black */
body.header-solid header {
  margin-top: 0;
  background: rgba(0, 0, 0, 0.8);
}
header a {
  color: #fff;
}
.header-content {
  padding:.5em 0;
}
.header-content.active {
  padding:.5em 0;
}
.main-nav ul li {padding-bottom: 00px;}
.main-nav ul li a:hover, .right-nav ul li a:hover {
  color: #fff;
}

/* Featured Banner
=====================================================================*/
.banner {
  /* height:60vh; */
  min-height:65vh;
  position: relative;
  top:0px;
  z-index: 1;
  background:
    /* top, transparent red, faked with gradient */
    linear-gradient(
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.35)
    ),
    /* bottom, image */
    url('../img/banners/slide-1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 5px solid #485463;
  padding: 0px;
}
.banner-content {
  background-color:rgba(0,0,0,0.75);
  color: #fff;padding:2em 0;margin:3em 0 0 0;
}
.banner-content h1 {font-size: 2.25em;color:#fff;line-height: 1.5em;}
.banner-content h2 {font-size: 1.5em;color:#fff;line-height: 1.5em;}

.banner-content img {max-height:200px;}
.headline-date {
  padding:80px 0 30px 0;
}
/*
.videoContainer{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
.videoContainer video{
  min-width: 100%;
  min-height: 100%;
}
*/

/* The Grid
=====================================================================*/
.interior-wrapper {
  padding-top: 160px;
}
section {padding:4em 0;}
section#sponsors {padding:0;}

.new, .details, .events, .promo, .merch, .faq {padding:3em;}
.new h1, .details h1, .events h1, .promo h1, .merch.h1, .faq h1 {padding:0 0 .5em 0;}
.detail-tile {
  padding:1em 2em;
}
.detail-tile-content {
  padding: 0 0;
}
.detail-tile-content p,
.detail-tile-content ul li {
  font-size: .9em;
}
.new, .details, .promo, .sponsors {
  background: #fff;
}
.sponsors {
  padding:1em 0;
}
.sponors b {
  padding-bottom: 10px;
}
.promo {
  border-top: 5px solid #485463;
  border-bottom: 5px solid #485463;
}
.promo ul {
  text-decoration: none;
  list-style: none;
}
.promo-tile{font-size: .9em;}
.promo-tile img, .faq-tile img {margin-bottom: 1em;}
h1.ticket-price{padding:0;color:#df445b;}


#sponsors .sponsors img {
  max-height: 110px;
  max-width: 220px;
  width: auto;
  height: auto;
  margin-bottom: 2em;
}
#sponsors .sponsors .sponsor-logo--small {
  max-height: 90px;
  max-width: 200px;
}
@media only screen and (max-width: 50.063em) {
  #sponsors .sponsors img {
    max-height: 90px;
    max-width: 200px;
  }
}

/* FAQ
=====================================================================*/
.faq ul {
  margin-left: 50px;
}
.faq-container {
  position: relative;
  padding:1em;
  margin:0 0 1em 0;
  background: #fff;
  cursor: pointer;
}
.faq-caret {
  text-align: right;
}

/* Schedule
=====================================================================*/
.schedule-wrapper {padding-top:160px;}
.schedule section {padding:1em 1em;}

@media only screen and (max-width: 50.063em) {
  .schedule-wrapper {padding-top:60px !important;}
}


.event-slot{
  padding:1em 0;
  border-bottom:1px solid #333;
}
.event-50,
.event-ball,
.event-tug,
.event-warrior,
.event-wheelbarrow,
.event-break {
  padding-left:.5em;
  color:#fff;
  font-weight: bold;
}
.event-50 {background:#117da9;}
.event-break {background:#e8532b;}
.event-ball {background:#019f6e;}
.event-tug {background:#f18231;}
.event-warrior {background:#be498f;}
.event-wheelbarrow {background:#c54343;}

/* Donate Page
=====================================================================*/
.interior-wrapper .donate {
  padding:2em;
}
/* The Footer
=====================================================================*/
footer {padding: 2em 0;}
footer ul {font-size: .6em;text-transform: uppercase;}
footer ul li a {color:#333;}
footer ul li .twitter {color: #70aecd;}
footer ul li .twitter:hover {color: #7fb7d2;}
footer ul li .facebook {color: #7490c3;}
footer ul li .facebook:hover {color: #829bc9;}
footer ul li .instagram {color: #df445b;}
footer ul li .instagram:hover {color: #df7b77;}
footer ul li .youtube {color: #485463;}
footer ul li .youtube:hover {color: #576372;}

/* Forms
=====================================================================*/
input {font-size: 12px;}
input[type=checkbox] {
  margin: 0 10px 30px 5px;
  /* All browsers except webkit*/
  transform: scale(2);
  /* Webkit browsers*/
  -webkit-transform: scale(2);
}
.social-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  padding: 12px 16px;
}
.social-button__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #1877f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.social-button__icon--google {
  color: #ea4335;
}
.social-facebook {
  background: #1877f2;
  color: #fff;
}
.social-facebook:hover,
.social-facebook:focus {
  background: #166fe0;
  color: #fff;
}
.social-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.social-google:hover,
.social-google:focus {
  background: #f8f9fa;
  color: #3c4043;
}
.social-button__icon--google {
  background: #fff;
  color: #4285f4;
}
.social-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.social-google:hover,
.social-google:focus {
  background: #f8f9fa;
  color: #3c4043;
  border-color: #d2d5d9;
}
.alert, .alert-danger {
  background:#df445b;
  font-weight: bold;
  padding:1em;
  font-size: 1em;
}
.alert, .alert-danger h3  {
  font-weight: bold;
}
.alert, .alert-danger ul  {
  color:#fff;
}
.reg-form {
  background:#fff;
  padding:2em;
}
.login-form input{
  margin:0;
}
.registration-landing {
  padding:2em 2em 0 2em;
}
.confirm-table {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .confirm-table.stack td {
    position: relative;
    text-align: left;
    padding-left: 45%;
  }

  .confirm-table.stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    top: 0.5rem;
    width: 40%;
    font-weight: 700;
    text-transform: uppercase;
    color: #485462;
  }

  .confirm-table.stack td .button {
    margin: 0.25em 0 0.75em 0;
  }

  .confirm-table.stack td a {
    word-break: break-word;
  }

  .confirm-table.stack td:last-child {
    text-align: center;
    padding-left: 0;
  }

  .confirm-table.stack td:last-child::before {
    content: "";
  }

  .confirm-table.stack tbody tr {
    margin-bottom: 10px;
    border-bottom: 10px solid transparent;
  }
}
.confirm-team-options {
  padding:0 10px;
}
.welcome-back {
  /*border:1px solid #000;*/
  padding:20px;
  text-transform: uppercase;
}

/* Donation Form
=====================================================================*/

#raffle #donationForm {
 width:50%;
}

#otherAmount {display: none;}

/* Dashboard
=====================================================================*/
.dashboard-wrapper section {padding:0em;}
.dashboard-wrapper section:first-of-type {padding-top:3em;}
.packet-pickup-dashboard{margin-top:40px;background:#df445b;padding:1em;color:#fff;}
.packet-pickup-dashboard h2, .packet-pickup-dashboard h3{color:#fff;}
.dashboard-buttons a {font-size:.75em;}

.team-list-table .match {background: #fffbc8;font-weight: bold;}
.team-list-table .no-waiver {background: #ffa1a1; font-weight: bold;}
.team-list-table .yes-waiver {background: #defade;}

@media screen and (max-width: 640px) {
  .dashboard-buttons {
    text-align: left;
    margin-top: 1em;
  }

  .dashboard-buttons .register-button {
    display: block;
    width: 100%;
    margin: 0 0 0.75em 0;
  }

  .dashboard-buttons .register-button:last-child {
    margin-bottom: 0;
  }
}




/* Admin
=====================================================================*/
.admin-wrapper section {padding:1em 1em;}
.admin-wrapper section:first-of-type {padding-top:3em;}
.admin-sidebar {
  height: 100vh;
  background: #485462;
  color:#fff;
}
#admin-menu li a{
  white-space: nowrap;
}

.admin-button {
  margin-bottom: 60px;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .admin-wrapper .input-group {
    display: block;
  }

  .admin-wrapper .input-group-label,
  .admin-wrapper .input-group-field,
  .admin-wrapper .input-group-button {
    display: block;
    width: 100%;
  }

  .admin-wrapper .input-group-button {
    margin-top: 0.5em;
  }

  .admin-wrapper .input-group-button .button {
    width: 100%;
    padding: 0.85em 1.5em;
  }

  .admin-wrapper .team-list-table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
}

.capslock-warning {
  color: #b00020;
  font-size: 0.85rem;
  margin-top: 4px;
}

.field-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}

.field-error-message {
  background: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  font-size: 0.9rem;
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 4px;
}
.pickup-list table {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.pickup-list th {background: #333;color:#fff;text-align: center;}
.pickup-list input[type=checkbox] {margin:0 !important;}
.pickup-list td {padding:3px !important;}
.pickup-list td a {
  color:#333;
  font-weight: 500;
}
.pickup-active,
.pickup-active a,
.pickup-active:nth-of-type(even),
.pickup-active:nth-of-type(odd){
  background-color:#8ae891;
  font-weight: 500;
  color:#333;
}
.pickup-disabled,
.pickup-disabled a,
.pickup-disabled:nth-of-type(even),
.pickup-disabled:nth-of-type(odd){
  background-color:#efc250;
  font-weight: 500;
}
.dashboard table {
  font-size: .75em;
  line-height: 1em;
}
.dashboard table th {
  text-align: center;
}
.dashboard h2, .dashboard h3 {
  line-height: 1em;
}


/* Registration
=====================================================================*/
.registration-annoucement{margin-top:40px;background:#df445b;padding:1em;color:#fff;}
.registration-annoucement h2{margin:0;padding:0;}

#extra-shirt-size, #raffle-reg-form{display: none;}

.remaining-teams-table {margin:1em 0;}
.remaining-teams-table th {background:#117da9;color:#fff;}
.remaining-teams-table td {font-weight: bold;}

.registration-progress {
  position: fixed;
  width:100%;
  background: rgba(0, 0, 0, 0.8);
  color:#fff;
  font-weight: 900;
  text-transform: uppercase;
  padding: .5em 0;
}
.registration-progress .column:nth-child(2) {
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}
.registration-review {padding:1em 0;}
.event-link {
  text-transform: uppercase;
  font-size: 14px;
}
.guide-link::before {
  display: block;
  content: " ";
  margin-top: -200px;
  height: 200px;
  visibility: hidden;
  pointer-events: none;
}

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

/* Mobile - Portrait & Landscape ----------- */
@media only screen and (max-width: 40.063em) {

  .align-left-small {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    
  }

  body {
    font-size: 12pt;
  }
  .merch-items {text-align: center;}
  #swell-bottle {font-size: .4em;}
  /* Featured Banner
  =====================================================================*/
  .banner {
    min-height:40vh;
  }
  .banner-content {
    position: relative;
    color: #fff;
    min-width: 0px;
    padding:1.5em;
    z-index: 3;
    display:block;
    margin:5em 0 0 0;

  }


  /*
  .videoContainer{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow: hidden;
  }
  .videoContainer video{
    min-width: 100%;
    min-height: 100%;
  }
  */

  /* The Grid
  =====================================================================*/
  section {padding:2em;}
  .new h1, .details h1, .events h1, .promo h1, .faq h1 {padding:.5em 0}
  .new, .details, .events, .promo, .faq {padding:.6em;}
  .detail-tile-content {min-height: 50px;padding:0 1em;}
  .detail-tile{padding:0;}

  /* Donate Page
  =====================================================================*/
  .interior-wrapper {
    padding: 60px 1em 0 1em;
  }
  #raffle #donationForm {
   width:100%;
  }

  #raffle ul li {font-size: .8em;margin:0;padding:0;}
  /* About Page
  =====================================================================*/
  .about h2 {font-size: 1.25em;}
  .about img {
    padding-bottom: 10px;
  }
  .welcome-back {border:none;}
  .dashboard table {font-size: 1em;line-height: 1em;}
  .dashboard-buttons {text-align:left;}

  /* Schedule
  =====================================================================*/
  a.anchor {
    display: block;
    position: relative;
    top: 50px;
    visibility: hidden;
}

}
/* Medium screens */
@media only screen
  and (min-width: 40.063em)
  and (max-width: 64.063em){

    .align-left-medium {
      -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
      justify-content: center !important;
    }

  /* The Grid
  =====================================================================*/
  section {padding:2em;}
  .banner {
    min-height:40vh;
  }
  .banner-content {
    /* margin: 75px 0 0 0; */
    margin: 2em 0 0 0;
    padding:.5em;
  }

  .banner-content h1 {font-size: 1.5em;color:#fff;}
  .banner-content h2 {font-size: 1.25em;color:#fff;}
  .headline-date {padding:35px 0}
  /* Donate Page
  =====================================================================*/
  .interior-wrapper {padding-top: 70px;}
  .dashboard table {font-size: 1em;line-height: 1em;}
  #raffle #donationForm {
   width:100%;
  }
}
@media only screen and (max-width: 40.063em)
and (orientation : landscape) {
  .banner {
    /* height:95vh; */
    height:50vh;
  }
}

/* Large screens */
/* min-width 1025px, large screens */
@media only screen
  and (min-width: 64.063em)
  and (max-width: 90.062em){
    .banner {
      /* height:80vh; */
      height:50vh;
    }
  }


/* XLarge screens */
@media only screen and (min-width: 90.063em) {
  .banner {
    /* height:80vh; */
    height:70vh;
  }
  .banner-content h1 {font-size: 2.75em;color:#fff;line-height: 1.5em;}

  } /* min-width 1441px, xlarge screens */


/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */