/*
Theme Name: Stansfield Vending
Version: 1.0
Description: Custom theme
Author: DigiSage, Inc.
Author URI: https://digisage.com
template: bb-theme
*/

:root {
   --stf-red: #da291c;
   --stf-black: #000000;
}

/* TODO: get rid of after turnstile */
.grecaptcha-badge {
   display: none !important;
}

#masthead {
   background: #fff;
}
#masthead .fl-row-content-wrap {
   position: relative;
   border-bottom: 1px solid #ccc;
}
/* small triangle extension behind logo */
#masthead .fl-row-content-wrap::after {
   content: '';
   display: block;
   position: absolute;
   z-index: 1;
   top: calc(100% - 0px);
   left: calc(50% - 65px);
   width: 130px;
   height: 100px;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 34' fill='%23ffffff'><polygon points='25,34 0,0 50,0'/><path d='M0,0 25,34 50,0' stroke='%23cccccc' stroke-width='.5' /></svg>");
   background-repeat: no-repeat;
   background-position: center top;
}
#masthead .col-left {
   width: calc((100% - 200px) / 2) !important;
}
#masthead .col-left ul#menu-main-menu > li ul {
   padding-top: 10px;
   padding-bottom: 10px;
}
#masthead .col-left ul#menu-main-menu > li > .pp-has-submenu-container > a span.pp-menu-toggle {
   right: 16px;
   margin-top: -11px;
}
#masthead .col-left ul li a span.pp-menu-toggle::before {
   width: 7px;
   height: 7px;
}
#masthead .col-logo {
   position: relative;
   z-index: 10;
   width: 200px !important;
}

#masthead ul li.pay-online a {
   color: var(--stf-red);
}
#masthead ul li.pay-online a:hover {
   color: var(--stf-black);
}
#masthead ul li.social a i span {
   display: none;
}
#masthead ul li.social a {
   padding-top: 0;
   padding-bottom: 0;
}
#masthead ul li.social a i::before {
   font-size: 20px;
}
#masthead ul li.social a:hover i::before {
   color: #1877F2;
}
body:not(.fl-builder-edit) #masthead .col-logo .fl-photo-content a {
   display: block;
   width: 200px;
   height: 150px;
   position: absolute;
   left: 50%;
   top: 0px;
   margin-left: -100px;
}
#masthead .col-right {
   width: calc((100% - 200px) / 2) !important;
}
#masthead .col-right p {
   margin: 0;
}
#masthead button.pp-advanced-menu-mobile-toggle {
   background: none !important;
}
.pp-menu-off-canvas ul.sub-menu {
   margin-left: 15px;
}
@media(max-width:1100px) {
   #masthead ul li.phone {
      display: none;
   }
}
@media(max-width:992px) {
   #masthead .col-left,
   #masthead .col-right {
      width: calc((100% - 150px) / 2) !important;
   }
   #masthead .col-logo {
      width: 150px !important;
   }
   #masthead .fl-row-content-wrap::after {
      width: 100px;
      height: 80px;
      left: calc(50% - 50px);
   }
   body:not(.fl-builder-edit) #masthead .col-logo .fl-photo-content a {
      width: 150px !important;
      max-width: 150px !important;
      height: auto;
      margin-left: -75px;
   }
}
@media(max-width:768px) {
   #masthead .col-right .pp-advanced-menu {
      text-align: right;
   }
   #masthead ul li.facebook a {
      color: #000000 !important;
   }
}
@media(max-width:550px) {
   #masthead .col-right > .fl-col-content {
      padding-top: 0;
   }
   #masthead ul li.facebook {
      display: none;
   }
   #masthead ul li.pay-online a {
      width: 100px;
      text-align: center;
      padding-right: 20px;
      padding-left: 10px;
   }
}
@media(max-width:550px) {
   #masthead ul li.pay-online a {
      width: 100px;
      font-size: 12px;
   }
}
@media(max-width:400px) {
   #masthead .fl-row-content-wrap::after {
      width: 70px;
      height: 50px;
      left: calc(50% - 35px);
   }
   #masthead .col-left,
   #masthead .col-right {
      width: calc((100% - 120px) / 2) !important;
   }
   #masthead .col-logo {
      width: 120px !important;
   }
   body:not(.fl-builder-edit) #masthead .col-logo .fl-photo-content a {
      width: 120px !important;
      max-width: 120px !important;
      height: auto;
      margin-left: -60px;
   }
   #masthead ul li.pay-online a {
      width: 80px;
      padding-right: 0;
      padding-left: 0;
   }
}

/* mobile toggle */
button.pp-advanced-menu-mobile-toggle {
   border: none !important;
}

/* page title row - all breakpoint font sizes MUST be set in site options */
.small-title {
   font-size: 20px;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
   font-family: 'oswald', sans-serif;
}
#page-title h1,
#page-title .faux-h1 {
   margin: 0;
   padding: 0;
   text-align: center;
   text-transform: uppercase;
   font-family: 'oswald', sans-serif;
   font-size: var(--fl-global-h1-font-size);
}
@media(max-width:1200px) {
   #page-title h1,
   #page-title .faux-h1 {
      font-size: var(--fl-global-h1-font-size-large);
   }
}
@media(max-width:992px) {
   #page-title h1,
   #page-title .faux-h1 {
      font-size: var(--fl-global-h1-font-size-medium);
   }
}
@media(max-width:768px) {
   #page-title h1,
   #page-title .faux-h1 {
      font-size: var(--fl-global-h1-font-size-responsive);
   }
}

/* forcing the previous existing pages (that have not been edited yet in BB)
   to be closer to our page width */
.fl-full-width .container {
   width: 1160px;
}

/* force sitemap on 4040 page to use 2 a column list */
.sitemap .wsp-container > ul {
   column-count: 2;
   column-gap: 50px;
}

/* league and any other custom templates that need to match the site's page width */
.custom-page {
   max-width: 1200px;
   margin: 0 auto;
   padding: 50px 20px 50px 20px;
}

/* single league view - icons */
.single-leagues .user-actions {
   width: 700px;
   max-width: 100%;
   margin:30px 0;
}
.user-actions a.callout {
   display:block;
   width:calc(100% / 3);
   height:190px;
   float:left;
   text-align:center;
   margin:0;
   padding:0 20px;
}
.user-actions a.callout span {
   display:block;
   text-align:center;
}
.user-actions a.callout span.circle-icon {
   width:100px;
   height:100px;
   margin:0 auto 10px auto;
   background-repeat:no-repeat;
   background-position:center center;
   background-color:#FF5100;
   -moz-border-radius:     50%;
   -webkit-border-radius:  50%;
   border-radius:          50%;
   -khtml-border-radius:   50%;
   -o-transition:       .3s;
   -ms-transition:      .3s;
   -moz-transition:     .3s;
   -webkit-transition:  .3s;
   transition:          .3s;
}
/* svg icons on home page */
.user-actions a.callout path {
   fill:#fff;
}
.user-actions a.callout circle.register {
   fill:#FF5100;
}
.user-actions a.callout circle.schedule {
   fill:#3b5ea7;
}
.user-actions a.callout circle.calendar {
   fill:#5d9e4d;
}
.user-actions a.callout circle.trophy {
   fill:#f2b840;
}
.user-actions a.callout:hover svg circle {
   fill:#fc123c;
}

.user-actions a.callout span.circle-icon.weekly-team-stats,
.user-actions a.callout span.circle-icon.standings {
   background-image:url(assets/images/icon-standings.svg);
}
.user-actions a.callout:hover span.circle-icon.weekly-team-stats,
.user-actions a.callout:hover span.circle-icon.standings {
   background-image:url(assets/images/icon-standings-red.svg);
}
.user-actions a.callout span.circle-icon.schedule {
   background-image:url(assets/images/icon-schedule.svg);
}
.user-actions a.callout:hover span.circle-icon.schedule {
   background-image:url(assets/images/icon-schedule-red.svg);
}
.user-actions a.callout span.circle-icon.player-stats,
.user-actions a.callout span.circle-icon.weekly-player-performance,
.user-actions a.callout span.circle-icon.player-of-the-week {
   background-image:url(assets/images/icon-player.svg);
}
.user-actions a.callout:hover span.circle-icon.player-stats,
.user-actions a.callout:hover span.circle-icon.weekly-player-performance,
.user-actions a.callout:hover span.circle-icon.player-of-the-week {
   background-image:url(assets/images/icon-player-red.svg);
}

.user-actions a.callout span.circle-icon.league-info {
   background: #fff url(assets/images/league-sprite.png) no-repeat -140px 25px;
}

.user-actions a.callout span.title {
   font-size:22px;
   color:#4d4d4f;
   -o-transition:    .3s;
   -ms-transition:      .3s;
   -moz-transition:  .3s;
   -webkit-transition:  .3s;
   transition:       .3s;
}
.user-actions a.callout:hover span.title {
   color:#fc123c;
}