/*
	Theme Name: BP Pickems
	Theme URI: www.pickems.tomanikgroup.com
	Author: Mike Garces
	Author URI: www.mikegarces.com
	Description: This is a theme designed for the Boston Pizza Pickems app in Calgary, Alberta, Canada.
	Version: 1.0
	License: Private, All rights reserved
	License URI: http://www.mikegarces.ninja

	For more information please contact info@mikegarces.ninja

*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
* {
  box-sizing: border-box; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  overflow-x: hidden; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: 'aardvark';
  src: url("css/fonts/aardvark/AardvarkBold.woff2") format("woff2"), url("css/fonts/aardvark/AardvarkBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'alfa-slab-one';
  src: url("css/fonts/alfa-slab-one/AlfaSlabOne-Regular.woff2") format("woff2"), url("css/fonts/alfa-slab-one/AlfaSlabOne-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@media only screen and (max-width: 667px) {
  #desktop-header {
    display: none; }

  #page-content {
    margin-bottom: 10%; }

  #page-image-header {
    width: 100%; }
    #page-image-header img {
      width: 100%;
      height: auto; }

  #mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1; }
    #mobile-header .toggler {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      cursor: pointer;
      width: 50px;
      height: 50px;
      opacity: 0; }
    #mobile-header .hamburger {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      width: 60px;
      height: 60px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center; }
    #mobile-header .hamburger > div {
      position: relative;
      width: 100%;
      height: 2px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease; }
    #mobile-header .hamburger > div:before, #mobile-header .hamburger > div:after {
      content: '';
      position: absolute;
      z-index: 4;
      top: -10px;
      width: 100%;
      height: 2px;
      background: inherit; }
    #mobile-header .hamburger > div:after {
      top: 10px; }
    #mobile-header .toggler:checked + .hamburger > div {
      transform: rotate(135deg); }
    #mobile-header .toggler:checked + .hamburger > div:before,
    #mobile-header .toggler:checked + .hamburger > div:after {
      top: 0;
      transform: rotate(90deg); }
    #mobile-header .toggler:checked ~ .mobile-menu {
      visibility: visible; }
    #mobile-header .toggler:checked ~ .mobile-menu > div {
      transform: scale(1);
      transition-duration: 0.4s; }
    #mobile-header .toggler:checked ~ .mobile-menu > div > div {
      opacity: 1;
      transition: opacity 0.4s ease; }
    #mobile-header .mobile-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      overflow: hidden;
      align-items: center;
      justify-content: center; }
    #mobile-header .mobile-menu > div {
      background: rgba(0, 0, 0, 0.9);
      width: 100%;
      height: 100vh;
      flex: none;
      align-items: center;
      justify-content: center;
      transform: scale(0);
      transition: all 0.4s ease; }
    #mobile-header .mobile-menu > div > div {
      text-align: center;
      max-width: 100%;
      height: 80vh;
      opacity: 0;
      transition: opacity 0.4s ease; }
      #mobile-header .mobile-menu > div > div #logo {
        width: 80%;
        margin: 0 auto;
        padding: 1% 0; }
        #mobile-header .mobile-menu > div > div #logo img {
          width: 100%;
          height: auto; }
    #mobile-header .mobile-nav {
      margin: 5% 0; }
      #mobile-header .mobile-nav li {
        margin: 3% 0; }
        #mobile-header .mobile-nav li a {
          color: white;
          text-decoration: none;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 6vw;
          font-weight: bolder; }

  .login-page {
    margin: 0; }

  .login-container {
    width: 100%;
    height: 100vh;
    border: 1px solid black;
    margin: 0;
    background-image: url("img/bg-main.jpg");
    background-size: contain; }

  .profile-page {
    background-image: url("img/bg-main.jpg");
    background-size: contain;
    width: 100%;
    height: 100vh; }

  .profile-container {
    border: 1px solid white;
    background-color: rgba(51, 107, 177, 0.7);
    padding: 5%; }
    .profile-container .swpm-form-label-wrap {
      color: white;
      font-size: 4vw;
      font-family: 'alfa-slab-one'; }
    .profile-container .swpm-form-input-wrap {
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      font-size: 5vw; }
      .profile-container .swpm-form-input-wrap input {
        padding: 1%;
        font-size: 4vw; }
    .profile-container .swpm-phone-row, .profile-container .swpm-street-row, .profile-container .swpm-city-row, .profile-container .swpm-state-row, .profile-container .swpm-zipcode-row, .profile-container .swpm-country-row, .profile-container .swpm-company-row {
      display: none; }
    .profile-container .swpm-profile-submit-button {
      width: 60%;
      padding: 5%;
      background-color: #001c79;
      color: white;
      font-family: 'alfa-slab-one';
      border: 1px solid white; }

  .swpm-registration-success-msg {
    border: 1px solid white;
    background-color: rgba(51, 107, 177, 0.7);
    padding: 5%; }

  .site-logo {
    width: 100%; }
    .site-logo img {
      width: 100%;
      height: auto; }

  .registration-logo {
    width: 70%;
    margin: 0 auto; }
    .registration-logo img {
      width: 100%;
      height: auto; }

  #swpm-login-form {
    border: 1px solid white;
    font-family: 'alfa-slab-one';
    background-color: rgba(51, 107, 177, 0.7); }
    #swpm-login-form .swpm-password-toggle-checkbox {
      width: 10%; }
      #swpm-login-form .swpm-password-toggle-checkbox input[type='checkbox'] {
        width: 20px;
        height: 20px; }
    #swpm-login-form .swpm-login-form-inner {
      width: 90%;
      margin: 0 auto;
      padding: 5%;
      color: white; }
      #swpm-login-form .swpm-login-form-inner .swpm-remember-checkbox {
        width: 10%; }
        #swpm-login-form .swpm-login-form-inner .swpm-remember-checkbox input[type='checkbox'] {
          width: 20px;
          height: 20px; }
      #swpm-login-form .swpm-login-form-inner label {
        font-size: 5vw; }
      #swpm-login-form .swpm-login-form-inner .swpm-username-label, #swpm-login-form .swpm-login-form-inner .swpm-password-label {
        margin-bottom: 3%; }
      #swpm-login-form .swpm-login-form-inner input {
        width: 95%;
        font-size: 5vw;
        padding: 1%; }
      #swpm-login-form .swpm-login-form-inner .swpm-login-submit {
        margin: 6% 0; }
        #swpm-login-form .swpm-login-form-inner .swpm-login-submit input[type="submit"] {
          width: 95%;
          padding: 5%;
          background-color: #001c79;
          color: white;
          font-family: 'alfa-slab-one';
          border: 1px solid white; }
      #swpm-login-form .swpm-login-form-inner .swpm-forgot-pass-link {
        margin: 9% 0; }
        #swpm-login-form .swpm-login-form-inner .swpm-forgot-pass-link a {
          color: white;
          font-size: 5vw; }
      #swpm-login-form .swpm-login-form-inner .swpm-join-us-link {
        display: none; }

  .swpm-form-desc ul li {
    color: white !important;
    font-size: 4vw; }

  .swpm-registration-form-section {
    border: 1px solid white;
    background-color: rgba(51, 107, 177, 0.7);
    padding: 5%; }
    .swpm-registration-form-section .swpm-form-row {
      color: white; }
      .swpm-registration-form-section .swpm-form-row label {
        font-size: 5vw;
        font-family: 'alfa-slab-one'; }
      .swpm-registration-form-section .swpm-form-row input {
        width: 95%;
        font-size: 5vw;
        padding: 1%; }
    .swpm-registration-form-section .swpm-registration-submit-section .swpm-registration-submit-button {
      width: 70%;
      padding: 5%;
      background-color: #001c79;
      color: white;
      font-family: 'alfa-slab-one';
      font-size: 5vw;
      border: 1px solid white; }
    .swpm-registration-form-section .swpm-membership-level-row {
      display: none; }

  .login-btn-container {
    border: 1px solid white;
    width: 50%;
    margin: 0 auto 3% auto;
    text-align: center;
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    padding: 3%;
    border: 2px solid #001c79; }
    .login-btn-container a {
      color: black;
      text-decoration: none;
      font-size: 5vw;
      font-family: 'alfa-slab-one'; }

  .login-text {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #001c79;
    font-size: 4vw; }

  .swpm-login-widget-logged {
    border: 1px solid white;
    background-color: rgba(51, 107, 177, 0.7);
    padding: 5%;
    color: white; }
    .swpm-login-widget-logged .swpm-logged-label {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 5vw;
      margin-bottom: 1%; }
    .swpm-login-widget-logged .swpm-logged-value {
      font-family: 'alfa-slab-one';
      font-size: 5vw;
      letter-spacing: 0.05rem;
      margin-bottom: 4%; }
    .swpm-login-widget-logged .swpm-logged-expiry {
      display: none; }
    .swpm-login-widget-logged .swpm-edit-profile-link, .swpm-login-widget-logged .swpm-logged-logout-link {
      margin: 6% 0; }
      .swpm-login-widget-logged .swpm-edit-profile-link a, .swpm-login-widget-logged .swpm-logged-logout-link a {
        color: white;
        text-decoration: none;
        font-size: 4vw;
        font-family: Arial, Helvetica, sans-serif; }

  #page-title {
    text-align: center;
    padding: 3% 0;
    background-color: black; }
    #page-title h1 {
      font-size: 5vw;
      font-family: 'aardvark';
      text-transform: uppercase;
      margin: 0 auto;
      color: white;
      letter-spacing: 0.05rem; }

  .game-pick-section {
    border: 1px solid black;
    position: relative; }
    .game-pick-section .game-title {
      border: 1px solid white;
      text-align: center;
      background-color: black;
      padding: 2% 0;
      position: relative;
      letter-spacing: 0.05rem; }
      .game-pick-section .game-title h2 {
        font-family: 'aardvark';
        color: white;
        font-size: 3.15vw; }
    .game-pick-section .picks-row {
      border: 1px solid black;
      display: flex; }
    .game-pick-section .team-left, .game-pick-section .team-right {
      flex-basis: 50%;
      position: relative;
      background-color: white; }
      .game-pick-section .team-left .team-img-left img, .game-pick-section .team-left .team-img-right img, .game-pick-section .team-right .team-img-left img, .game-pick-section .team-right .team-img-right img {
        width: 100%;
        height: auto; }
      .game-pick-section .team-left .team-input-left, .game-pick-section .team-left .team-input-right, .game-pick-section .team-right .team-input-left, .game-pick-section .team-right .team-input-right {
        border: 1px solid black;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 6%;
        padding-left: 20%; }
        .game-pick-section .team-left .team-input-left input, .game-pick-section .team-left .team-input-right input, .game-pick-section .team-right .team-input-left input, .game-pick-section .team-right .team-input-right input {
          display: none; }
        .game-pick-section .team-left .team-input-left .input-label, .game-pick-section .team-left .team-input-right .input-label, .game-pick-section .team-right .team-input-left .input-label, .game-pick-section .team-right .team-input-right .input-label {
          font-family: "aardvark";
          font-size: 4vw;
          padding: 3.5%;
          text-transform: uppercase; }
    .game-pick-section .picks-row::after {
      content: '';
      display: block;
      position: relative; }

  .selected {
    background-color: rgba(87, 176, 189, 0.5) !important;
    color: #001c79;
    font-weight: bolder; }

  #fight-submit-form {
    width: 100%;
    border: 1px solid black; }

  .acf-form-submit {
    text-align: center; }
    .acf-form-submit input {
      font-size: 6vw;
      width: 50%;
      margin: 5% auto;
      padding: 3% 10%;
      text-transform: uppercase;
      font-weight: bolder;
      border: 1px solid black;
      background-color: #0a1b49;
      color: white; }

  #server-name-container {
    text-align: center;
    padding: 3% 0; }
    #server-name-container input {
      width: 50%;
      border: 1px solid black;
      font-size: 4vw;
      padding: 1%; }
    #server-name-container label {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold; }

  .user-message {
    font-family: 'aardvark';
    text-align: center;
    font-size: 5vw;
    color: red;
    padding: 5% 10%;
    text-shadow: 2px 3px black;
    line-height: 2rem; }

  #message {
    display: none; }

  .user-title {
    border: 4px solid white;
    background-color: #0a1b49;
    color: white;
    font-family: 'alfa-slab-one';
    letter-spacing: 0.06rem;
    padding: 3%;
    text-align: center;
    font-size: 3vw; }
    .user-title .user-header {
      text-transform: uppercase; }
    .user-title .user-position {
      width: 100%;
      border: 1px solid white;
      font-size: 5vw;
      padding: 1%;
      margin-bottom: 3%;
      background-color: #153896; }
    .user-title .user-name, .user-title .user-email {
      padding: 2%;
      margin: 2% 0; }
    .user-title .user-name {
      background-color: #495e99; }
    .user-title .user-email {
      text-transform: lowercase; }

  .members-access-error {
    border: 1px solid white;
    font-family: 'alfa-slab-one';
    padding: 10%;
    font-size: 6vw;
    color: white; }
    .members-access-error p {
      margin: 5% auto;
      text-align: center; }
    .members-access-error .swpm-login-widget-form {
      margin-top: 5%; }

  .swpm-pw-reset-widget-form {
    border: 1px solid white;
    font-family: 'alfa-slab-one';
    background-color: rgba(51, 107, 177, 0.7);
    padding: 10%;
    color: white;
    font-size: 5vw; }
    .swpm-pw-reset-widget-form input[type=text] {
      font-size: 5vw; }
    .swpm-pw-reset-widget-form .swpm-pw-reset-submit-button input {
      font-size: 4vw; }

  .swpm-pw-reset-using-link-widget-form {
    border: 1px solid white;
    font-family: 'alfa-slab-one';
    background-color: rgba(51, 107, 177, 0.7);
    padding: 10%;
    color: white;
    font-size: 5vw; }
    .swpm-pw-reset-using-link-widget-form input[type=password] {
      font-size: 5vw;
      width: 95%; }
    .swpm-pw-reset-using-link-widget-form .swpm-pw-reset-submit-button input {
      font-size: 4vw; }

  .swpm-reset-pw-success-box {
    font-size: 5vw;
    color: black;
    font-family: 'alfa-slab-one';
    padding: 8%; }
    .swpm-reset-pw-success-box div {
      margin: 5% 0; }

  .swpm-reset-pw-error, .swpm-reset-pw-error-email {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4vw;
    padding: 2% 5%;
    margin: 1% 0;
    background-color: rgba(255, 255, 255, 0.768); }

  .how-to-play {
    font-family: 'alfa-slab-one';
    height: 190vh !important;
    color: white;
    line-height: 1.25rem;
    font-size: 3.5vw;
    background-color: rgba(16, 36, 60, 0.9);
    padding: 5% 15% 15% 15%; }
    .how-to-play p {
      margin: 6% 0; }
    .how-to-play ol li {
      list-style: decimal;
      margin: 3% 0; }
    .how-to-play ul li {
      list-style: disc;
      margin: 3% 0; }
    .how-to-play h2 {
      font-size: 6vw;
      text-decoration: underline;
      margin: 12% 0 8% 0; }

  #bonus-pts-submit-form .acf-form-submit .acf-button {
    width: 65%; }

  #bonus-pts-content {
    width: 90%;
    margin: 5% auto;
    text-align: center; }
    #bonus-pts-content h2 {
      font-family: 'alfa-slab-one';
      font-size: 6vw;
      margin: 5% 0;
      color: #001c79; }
    #bonus-pts-content p {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2.75vw;
      font-weight: bolder;
      color: #001c79; }

  .my-picks-row {
    background-color: white;
    font-family: 'alfa-slab-one';
    text-align: center;
    padding: 3% 0;
    text-transform: uppercase;
    color: #001c79; }

  .no-picks {
    background-color: white;
    font-family: 'alfa-slab-one';
    text-align: center;
    padding: 3% 0;
    font-size: 6vw;
    text-transform: uppercase;
    color: #001c79; }

  .drop-down-menu .select-box {
    border: 1px solid black;
    text-align: center;
    font-family: 'alfa-slab-one';
    background-color: black;
    color: white;
    padding: 3% 0;
    font-size: 4vw;
    position: relative; }
    .drop-down-menu .select-box select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: base-select;
      border: 1px solid white;
      width: 98vw;
      font-family: 'alfa-slab-one';
      font-size: 5vw;
      text-align: center;
      color: white;
      background-color: black;
      padding: 3%;
      -webkit-border-radius: 0;
      border-radius: 0;
      text-align-last: center;
      background-image: url("img/down-arrow.svg");
      background-repeat: no-repeat;
      background-position: right 46px center;
      /* Adjust positioning */
      background-size: 25px;
      /* Adjust size */
      padding-right: 50px; }
      .drop-down-menu .select-box select option {
        margin: 5% 0;
        text-align: center;
        font-family: 'alfa-slab-one';
        font-size: 6vw; }
    .drop-down-menu .select-box ::picker(select) {
      font-family: 'alfa-slab-one';
      width: 100%;
      text-align: center;
      font-size: 5vw;
      appearance: base-select;
      border-radius: 0;
      background-color: #343434;
      color: white;
      padding: 2% 10%; }

  #user-count-container {
    width: 100%;
    border: 4px solid white;
    background-color: #0a1b49;
    font-family: 'alfa-slab-one';
    color: white;
    text-align: center;
    padding: 3% 0;
    margin-bottom: 3%; }
    #user-count-container .user-count-title {
      padding: 2% 0; }
      #user-count-container .user-count-title h2 {
        font-size: 7vw; }
    #user-count-container .sign-ups {
      padding: 2% 0; }
      #user-count-container .sign-ups p {
        font-size: 5vw; }

  #server-totals-cont {
    width: 100%;
    border: 4px solid white;
    background-color: #0a1b49;
    color: white;
    text-align: center;
    font-family: 'alfa-slab-one'; }
    #server-totals-cont .server-totals-title {
      padding: 2% 0; }
      #server-totals-cont .server-totals-title h2 {
        font-size: 5vw; }
    #server-totals-cont .server-listing-container {
      border: 1px solid white;
      background-color: #495e99;
      width: 90%;
      padding: 2% 15%;
      margin: 2% auto;
      text-align: left;
      display: flex;
      font-size: 5vw; }
      #server-totals-cont .server-listing-container .server-name {
        text-transform: capitalize;
        flex-basis: 70%; }
      #server-totals-cont .server-listing-container .server-number {
        flex-basis: 30%; } }
/*// DESKTOP STYLES //*/
html, body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  /* For WebKit browsers like Chrome and Safari */
  -moz-osx-font-smoothing: grayscale;
  /* For Firefox on macOS */ }

body {
  width: 100%;
  height: 160vh;
  margin: 0;
  background-image: url("img/bg-main.jpg");
  background-size: cover !important;
  background-repeat: no-repeat; }

#page-content {
  overflow-y: hidden;
  margin: 0; }

.acf-form-fields {
  display: none; }

#username {
  display: none; }

.hidden {
  display: none; }

.bonus-pts-container .acf-form-fields {
  display: none !important; }

/*** MOBILE STYLES ***/
/*** DESKTOP STYLES ***/
/*** MOBILE STYLES ***/
/*** DESKTOP STYLES ***/