@font-face {
  font-family: 'Soup of Justice';
  src: url('soupofjustice.ttf')  format('truetype')
}

/* This file contains page styles for i88challenge.org */

/* Fonts
font-family: 'Antic Slab', serif;
font-family: 'Comfortaa', cursive;
font-family: 'PT Sans', sans-serif;
font-family: 'Economica', sans-serif;
font-family: 'Soup of Justice', 'Comfortaa', cursive;
 */


/***************
UNIVERSAL STYLES
***************/

/* Full Page */
body {
  text-align:center;
  background-color:#fff;
}
p,a,h3,li,td {font-family:'PT Sans', sans-serif;}
p {font-size:1.2em;}

h1 {
  /*font-family:'Comfortaa', cursive;*/
  font-family: 'Soup of Justice', 'Comfortaa', cursive;
  font-size:2.4em;
}
h2 {
  padding-top:3rem;
  font-family:'Antic Slab', serif;
  font-size:1.2em;
  line-height:1em;
  border-bottom:1px solid currentColor;
  text-transform:uppercase;
  margin:0 0 1.5rem 0;
}
h1 span,
h2 span,
a.more-link span {display:inline-block;}

h3 {
  text-transform:uppercase;
  font-size:1em;
}
.text-shadow {text-shadow: 1px 2px 3px #696969;}
a.more-link {
  text-transform: uppercase;
  color:currentColor !important;
  float:right;
  font-family:'Antic Slab', serif;
  font-size:1.2em;
  text-decoration: none !important;
}
a.more-link::after {
  content:"\00a0>>";
}
.button.rounded {border-radius:5px;}
.body {text-align:left; background-color:#fff;}
.body a {text-decoration: underline;color:currentColor;} 

/* Turn Links Blue */
.body a {
  text-decoration:none;
  border-bottom:1px dotted #3C53BD;
  color:#3C53BD;
}
.body a:hover {
  border-bottom:none;
}
.body a.button,
#home .quicklinks a,
a.more-link,
a.thumbnail,
a.fresco, 
.affiliates a {border-bottom:none;}

ul.square li {list-style-type:circle; margin-left:1rem;}
ul.nobullet li {list-style-type:none;}
ul.centered, 
ul.centered li {
  list-style-position:inside;
  margin:0;
  padding:0;
}
ul.centered {text-align:center;}
.underline {border-bottom:1px solid currentColor;}
a.anchor{
  display:block;
  position:relative;
  top:-90px;
  visibility:hidden;
}
span.c { font-family: 'PT Sans', sans-serif; font-weight: bold;}



/* Material Design-Style Box-Shadows */

.shadow-depth-1,
.hover-depth-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.2s ease-in-out;}
html.no-touch .hover-depth-1:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 6px 6px rgba(0,0,0,0.23);}
.shadow-depth-2,
.shadow-depth-3 {box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 6px 6px rgba(0,0,0,0.23);}

/* Header and Side Menu */

.header {
  position:fixed;
  background-color:#fff;
  text-align:left; 
  width:100%;
  z-index:2;
}
.logo {
  height:auto;
  width:482px;
  text-align:right;
  -webkit-transition: width .5s ease-in-out; /* Safari */
  transition: width .5s ease-in-out;
  justify-self:end;
}
.header.small-vers .logo { width:238px; }
.nav { padding-left:10px; }
.nav a,
.off-canvas a {
  font-family: 'Antic Slab', serif;
  color:#000;
  font-size: 1.1em;
  text-transform:uppercase;
  border-bottom:solid #fff 4px;
  background-color:#fff;
  text-decoration:none;
}
.off-canvas {text-align:left; background-color:#fff;}
.off-canvas li:first-child {padding-top:9.5em;}

.dropdown.menu > li.is-dropdown-submenu-parent > a {text-align:center; padding-right:2.5rem;}
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #000 transparent transparent;    /* Turn Foundation dropdown arrow to black */
  margin-right:1.2rem;
}

.nav a.active {border-bottom:solid #000 4px;}
.nav a:hover, .nav a:focus {border-bottom:solid #cc0809 4px;}

.header {
  display:grid;
  grid-template-columns:auto 482px;
}
.header.small-vers { grid-template-columns: auto 238px; }

.header > .nav > .menu {
  height:158px;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content: flex-start;
  align-items:center;
  align-content:center;
}

.header > .nav > .menu > li {
  padding: 5px 1rem;
}

.header > .nav > .menu > li > a {
  padding: 0 .5rem;
  line-height:1.2;
  -webkit-transition: line-height .5s ease-in-out, height .5s ease-in-out; /* Safari */
  transition: line-height .5s ease-in-out, height .5s ease-in-out;
}
#sub { top:50px; }
#sub > li {
  border:solid black 1px;
  border-top:none;
}
#sub > li > a {
  text-align:left;
  line-height: 2.5em;
  height:auto;
  white-space:nowrap;
  border-left:solid white 5px;
  border-bottom:none;
}
#sub > li > a:hover {
  border-left:solid #d9d9d9 5px;
}
.off-canvas .menu a.active {font-weight:900;font-style:italic;}

.header.small-vers > .nav > .menu {
  height:75px;
}
.menu-button {
  position:absolute; 
  top:.4rem; 
  right:2rem;
  color:black;
  font-size:3em;
  -webkit-transition: top .5s ease-in-out; /* Safari */
  transition: top .5s ease-in-out;
}
.menu a.inactive {cursor:default; opacity:0.55;}
.nav a.inactive:hover {border-bottom:solid #fff 4px;}
.menu-spacer {width:100%;height:152px;background:url('../images/diamond_upholstery_@half.png') repeat;} /* Style under menu - shows during transition */

/* Footer */

#footer {
  background-color:#464646;
  color:#fff;
}
#footer p {margin:0;padding:.4em 1em .25em 1em;}
.copy {/*font-family:'Comfortaa', cursive;*/font-family: 'Soup of Justice', 'Comfortaa', cursive;text-transform: uppercase;}
.design-by a {font-family:'Economica', sans-serif;color:#fff;}
.design-by span {font-size:1.2em;line-height: 1em}

/* Universal Reveal-Modal Styles */

#home .reveal .close-button,
.not-home .reveal .close-button {
  color:black;
  text-shadow: -1px 0 2px #fff,0 1px 2px #fff,1px 0 2px #fff,0 -1px 2px #fff !important;
  margin-top:0;
  margin-right:8px;
  font-size:3.5em;
}

/* Media Queries */


@media screen and (max-width:1277px) and (min-width:64em) {
  /*.header .menu > li > a {padding: 0 1rem;}
  .nav {padding-right:10px;} */
  .dropdown.menu > li.is-dropdown-submenu-parent > a {padding-right:1.7rem;}
  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {margin-right:.4rem;}
}
@media screen and (max-width:1024px) {
  .header { grid-template-columns:auto 206px; }
  .logo { width:206px; }
  .header.small-vers { grid-template-columns:auto 101px; }
  .header.small-vers .logo { width:101px; }
}

@media screen and (max-width:900px) {
  /*.header .menu > li > a {padding: 0 1rem;}
  .nav {padding-right:10px;}*/
  .dropdown.menu > li.is-dropdown-submenu-parent > a {padding-right:1.7rem;}
  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {margin-right:.4rem;}
}

@media screen and (max-width:768px) {
  .header > .nav > .menu > li > a {padding: 0; font-size:.95em;}
  .dropdown.menu > li.is-dropdown-submenu-parent > a {padding-right:1.7rem;}
  .dropdown.menu > li.is-dropdown-submenu-parent > a::after {margin-right:.4rem;}
}

@media screen and (max-width:639px) {
  h1 {font-size:1.8em;}
  p {font-size:1em;}
  img.small-12,
  .small-12>img {width:100%;}
  .header {text-align:left; display:block;}
  .nav {display:none;}
  .logo {
    width:206px;
    height:auto;
    margin-left:30px;
    text-align:right;
    -webkit-transition: margin-left .5s ease-in-out, left .5s ease-in-out, width .5s ease-in-out; /* Safari */
    transition: margin-left .5s ease-in-out, left .5s ease-in-out, width .5s ease-in-out;
  }
  .menu-spacer {height:113px}
  .header.small-vers .logo {
    width:101px;
    margin-left:10px;
    right:0;
  }
  #footer p {
    float:none !important;
    clear:both;
    padding:1em 0 0 0;
    margin:0 auto;
  }
  #footer {padding-bottom:1em;text-align:center;}
}

/* Mailchimp styles */
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#home #mc_embed_signup .close-button,
#mc_embed_signup .close-button { top:0; right:0; font-size:2rem; }

/***************************************
These Apply to all pages other than Home
***************************************/

.not-home h1 {
  margin-top:3rem;
  margin-bottom:2rem;
}

.not-home .top-banner {margin:0 auto; text-align:center;}

.not-home .inc-margin {margin:0 15px;}

.not-home img.right-corner {position:absolute; right:-30px; top:-30px;}
.not-home img.left-corner {position:absolute; left:-30px; top:-30px;}

@media screen and (max-width:639px) {
  .not-home .inc-margin {margin:0 10px;}
}


/***************
Home Page Styles
***************/

#home h1 {margin:0 0 0 15px;}
#home h2 {margin:0 0 1.5em 15px;}


#home .news p {font-size:1em;}

/* Splash */

#home div.splash {width:100%; margin:0 auto;}
#home div.splash img {width:100%;}
#home .splash img {visibility:hidden;}

@media screen and (min-width:0) and (max-width:639px) {
  #home .splash-sm .splash-1 {background:url(../images/splash_2020sponsors_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-sm .splash-2 {background:url(../images/splash_2024registration_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-sm .splash-3 {background:url(../images/splash_2024about_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-sm .splash-4 {background:url(../images/splash_field_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-sm .splash-5 {background:url(../images/splash_foti_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-sm .splash-6 {background:url(../images/splash_2022registration_sm.jpg) no-repeat;background-size:cover;}
  #home .splash-md,#home .splash-lg{display:none;}
  #home .splash-sm {display:block;}
}

@media screen and (min-width:640px) and (max-width:1200px) {
  #home .splash-md .splash-1 {background:url(../images/splash_2020sponsors.jpg) no-repeat;background-size:cover;}
  #home .splash-md .splash-2 {background:url(../images/splash_2024registration.jpg) no-repeat;background-size:cover;}
  #home .splash-md .splash-3 {background:url(../images/splash_2024about.jpg) no-repeat;background-size:cover;}
  #home .splash-md .splash-4 {background:url(../images/splash_field.jpg) no-repeat;background-size:cover;}
  #home .splash-md .splash-5 {background:url(../images/splash_foti.jpg) no-repeat;background-size:cover;}
  #home .splash-md .splash-6 {background:url(../images/splash_2022registration.jpg) no-repeat;background-size:cover;}
  #home .splash-sm,#home .splash-lg{display:none;}
  #home .splash-md{display:block;}
}

@media screen and (min-width:1201px){
  #home .splash-lg .splash-1 {background:url(../images/splash_2020sponsors_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-lg .splash-2 {background:url(../images/splash_2024registration_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-lg .splash-3 {background:url(../images/splash_2024about_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-lg .splash-4 {background:url(../images/splash_field_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-lg .splash-5 {background:url(../images/splash_foti_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-lg .splash-6 {background:url(../images/splash_2022registration_lg.jpg) no-repeat;background-size:cover;}
  #home .splash-sm,#home .splash-md{display:none;}
  #home .splash-lg{display:block;}
}

/* White Info Section */
#home .splash,
#home .info-wrapper {max-width:1920px;margin:auto;}

#home #info {width:66%;padding:4rem 0 2.5rem 0;}
#home #ball {
  width:33%;
  background-image:url('../images/soccer_ball.jpg');
  background-repeat:no-repeat;
  background-position:100% 50%;
  background-size:auto 80%;
}
#home #info>.row{margin-right:3em;}
#home #info li span {display:inline-block;}
#home #info li {margin-bottom:.25em;}
#home .news .lead {font-weight: 700;}
#home h2.news {margin-bottom:0;}
#home .news h3 {margin-top:2em; border-bottom:1px dotted #ccc}
#home .news img {margin-bottom:2rem;}
#home .quicklinks>div {text-align:center;}
#home .quicklinks .inactive {opacity:0.55;}
#home .quicklinks a {
  font-size:.8em; color:black;
  display:block;      
  -webkit-transition: all .2s ease; /* Safari */
      transition: all .2s ease;
  text-decoration:none;
}
#home .quicklinks span {display:inline-block;}
#home .quicklinks a::after {
  content:"\00a0>";
}
#home .quicklinks a:hover {
  -ms-transform: scale(.95); /* IE 9 */
      -webkit-transform: scale(.95); /* Chrome, Safari, Opera */
      transform: scale(.95);
}
#home .quicklinks a.inactive:hover{
    -ms-transform: none; /* IE 9 */
-webkit-transform: none; /* Chrome, Safari, Opera */
        transform: none;
        cursor:default;
        -webkit-filter: drop-shadow( 3px 3px 4px #aaa );
        filter: drop-shadow( 3px 3px 4px #aaa );
}
#home .shadow a:hover {
  -webkit-filter: drop-shadow( 2px 2px 2px #888 ); /* app.js removes this style from HTML for Safari browsers due to flicker bug */
      filter: drop-shadow( 2px 2px 2px #888 ); 
}
#home .shadow .inactive a:hover{
  -webkit-filter: drop-shadow( 3px 3px 4px #aaa ); /* app.js removes this style from HTML for Safari browsers due to flicker bug */
      filter: drop-shadow( 3px 3px 4px #aaa ); 
}
#home .shadow a {
  -webkit-filter: drop-shadow( 3px 3px 4px #aaa );
      filter: drop-shadow( 3px 3px 4px #aaa );
}
#home .quicklinks img {width:80%;margin-bottom:10px;}

/* Blue Info Section */

#home #other-info {
  text-align:left;
  clear:both; 
  background-color:#cc0809;
  background:#cc0809 url(../images/redgrad.png) repeat-x top left;
  background-size:auto 100%;
  padding:0 1em 2em 1em;
  color:#fff;
}
#home #other-info>.row{max-width:1080px;}
#home .sponsor-nm {font-size:1.2em;margin-bottom:0;}
#home .affiliates {padding-top:2em;}
#home .bottom-wrapper {padding-bottom:3em;}
#home .bottom-wrapper>.row {max-width:1080px;}
#home .logo-box {text-align:center;}
#home .logo-box img {max-height:160px;}

/* Media Queries */

@media screen and (min-width:1350px) {
  #home #info>.row{margin-right:8em;}
}

@media screen and (max-width:63.9375em) { /* Medium or Smaller */
  #home .quicklinks a {padding-top:3em;}
  /* Activate for 5 quicklinks, comment out for 6 
  #home .quicklinks .forms {margin-left:17%} */
}

@media screen and (max-width:639px) {
  #home #info {width:100%;padding:2rem 0 0 0;margin-bottom:-1px;}
  #home .small-ball img {margin-top:2rem;}
  #home #info>.row{margin-right:0;}
  #home .quicklinks a {padding-top:3em;}
  #home .mail-icon {margin-left:17%;}
  #home h1 {margin:1rem 0 0 10px;}
  #home h2 {margin:0 0 1.5em 10px;}
  #home #other-info {padding:0 0 2rem 0;}
  #home .logo-box img {max-height:600px;}
  #home .sponsor-info {text-align:center;}
  #home .sponsor-info .more-link {margin-top:1.5rem;}
  #home .sponsor-nm {margin-top:2rem;}
  #home .affiliates {padding-top:3em;margin:0 .5em;}
}

/***************
News Page Styles
***************/

#news .body {margin-bottom:3rem;}
#news .news .lead {font-weight: 700;}
#news h2.news {margin-bottom:0;}
#news .news h3 {margin-top:2rem; border-bottom:1px dotted #ccc}
#news .news img {margin-bottom:2rem;}

/****************
About Page Styles
****************/

#about .contact {min-width:300px;margin-right:40px; position:relative;}
#about .contact .callout {margin-top:3rem;min-width:300px;border-top:6px solid rgba(10, 10, 10, 0.25);}
#about .contact p {font-size:1em;}
#about .contact p.lead {font-size:1.25em;}
#about .body p {font-size:1.2em;}
#about .body {padding-bottom:0;}
#about .redsection {
  text-align:left; 
  color:#fff; 
  background:#cc0809 url(../images/redgrad.png) repeat-x top left;
  background-size:auto 100%;
  padding-bottom:3rem;
  margin-top:1rem;
}
#about ul.indent li {margin-left:15px;}
#about li img {display:inline;height:3em;margin-right:5px;}
#about .first-ul {margin-bottom:0;}
#about .redsection a {color:currentColor;}
#about .vol-info li {
  margin-left:15px;
}
#about .notes {background-color:#e8e8e8;padding:2rem 0 1rem 0;}


@media screen and (max-width:639px) {
  #about .contact {
    margin:3rem auto 0 auto; 
    width:80%;
    float:none !important; 
    clear:both;
  }
  #about .body p {font-size:1.1em;}
  #about .inc-margin {clear:both;}
  #about .redsection h3 {font-size:1.1em; padding-top:2rem;}
  #about .redsection ul {padding:0 1.5em;}
  #about .circle-pic {
  margin-top:0;
  margin-bottom:0;
  -webkit-transform:none;
          transform:none;
  }
  #about .travel {margin-top:1rem;padding-top:2rem;border-top:solid 1px rgba(255,255,255,.2);}
}

@media screen and (max-width:359px) {
  #about .right-corner {display:none;}
  #about .contact {width:100%;}
}

/***********************
Past Champs Pages Styles
***********************/

/* Programs Links Page */

#pastchamps .body {
  margin-bottom:3rem;
}

/*****************
Events Page Styles
*****************/

#events h1 {margin-bottom:0;}
#events .spacer {width:100%; height:2rem;}
#events h2 {margin-bottom:2rem;}
#events .body {padding-bottom:3em;}

@media only screen and (max-width:639px) {
  #events h2 {margin-bottom:0;}
  #events .event-img {text-align: center;}
  #events .event-img img {width:80%;}
}

/****************
Venue Page Styles
****************/

#venue .body {padding-bottom:3rem;}
#venue .callout {
  position:relative;
  padding:3rem 2rem 2rem 2rem;
  margin:3rem 40px 3rem 40px;
  border-top:6px solid rgba(10, 10, 10, 0.25);
}
#venue .top-banner {max-width:1600px;}
#venue .body ul {padding-left:2rem;}
#venue .sidebar p {font-size:1em;}
#venue .map {display:block; border:1px solid #aaa;}
#venue .map img {border:2px solid #fff;}
#venue .restrictions {text-align:center;}
#venue .restrictions img {width:75%;}

@media only screen and (min-width:40em) and (max-width:64em) {
  #venue .restrictions img {width:100%;}
}

@media only screen and (max-width:639px) {
  #venue .sidebar iframe {height:400px;}
  #venue ul {padding-left:1rem;}
  #venue .callout {
    margin:3rem auto; 
    padding:3.5rem 1rem;
    width:80%;
    float:none !important; 
    clear:both;
  }
}
@media screen and (max-width:359px) {
  #venue .left-corner {display:none;}
  #venue .callout {width:100%;padding:2em;}
}

/**************
FAQ Page Styles
**************/

#faq p {font-size:1em;}
#faq p.q {font-size:1.4em;font-weight:700;}
#faq .body {padding-bottom:3rem;}

#faq .callout {
  position:relative;
  padding:3rem 2rem 2rem 2rem;
  margin:0 40px 0 0;
  border-top:6px solid rgba(10, 10, 10, 0.25);
}
#faq .restrictions {
  margin:0 40px 0 0;
}

@media only screen and (max-width:639px) {
  #faq .callout {
    margin:3rem auto; 
    padding:3rem 1rem 2rem 1rem;
    width:80%;
    float:none !important; 
    clear:both;
  }
}

@media screen and (max-width:359px) {
  #faq .right-corner {display:none;}
  #faq .callout {width:100%;padding:3rem 2rem 2rem 2rem;}
}

/***************************
Food and Lodging Page Styles
***************************/

#localservices .body { padding-bottom:2rem; }
#localservices .colorful-header {
  width:100%;
  padding:12px;
  color:#fff;
  font-size:24px;
  font-weight:bold;
  letter-spacing:1px;
}
#localservices #lodging-header {
  background: rgb(102,44,144);
  background: linear-gradient(90deg, rgba(102,44,144,1) 0%, rgba(102,44,144,0.99) 50%, rgba(102,44,144,0.3) 100%);
  margin-top:3rem;
}
#localservices #food-header {
  background: rgb(12,147,70);
  background: linear-gradient(90deg, rgba(12,147,70,1) 0%, rgba(12,147,70,0.99) 50%, rgba(12,147,70,0.3) 100%);
  margin-top:2rem;
}
#localservices #lodging-links img,
#localservices #food-links img { width:75%; } 
#localservices .top-banner { position:relative;}
#localservices .top-banner h1 {
  margin-top:0;
  margin-bottom:0;
  position:absolute;
  bottom:6%;
  right:12%;
  pointer-events:none;
}
#localservices .zoom-notice {
  position:absolute;
  bottom:5px;
  left:5px;
  background-color:rgba(0,0,0,0.5);
  color:#fff;
  padding:5px;
  font-size:12px;
  pointer-events:none;
  text-align:center;
}

#localservices .zoom-notice.m-close {
  position:fixed;
  top:5px;
  left:5px;
  bottom:auto;
  right:auto;
  z-index:999;
  pointer-events:none;
}
#localservices .zoom-notice.m-close p { margin-bottom:0; }

#localservices .zoom-notice span {
  font-weight:bold;
  font-size:14px;
  pointer-events:none;
}

#localservices .sponsor-name { margin-top:1em; }

#localservices .sponsor-name,
#localservices .sponsor-address,
#localservices .sponsor-phone,
#localservices .directions-link {
  display:inline-block;
  font-size:14px;
}

#localservices .directions-link { display:inline; }

@media screen and (max-width:900px) {
  #localservices .top-banner h1 {
    font-size:26px;
    bottom:4%;
    right:8%;
  }
}
@media screen and (max-width:639px) {
  #localservices .top-banner h1 {
    bottom:.5rem;
    right:.5rem;
    font-size:21px;
  }
  #localservices #lodging-links img,
  #localservices #food-links img { width:100%; } 
}

/*******************
Sponsors Page Styles
*******************/

#sponsors .body {padding-bottom:3em;}
#sponsors .sponsors .busname {font-weight:bold;margin:.5em 0 0 0;}
#sponsors .sponsors>div {padding:0 1.5rem;}
#sponsors .field.sponsors>div {padding:0 4rem;}
#sponsors .field.sponsors p {font-size:1em;}
#sponsors .sponsors p {font-size:.9em;}
#sponsors .sponsors p a {display:inline-block;}

#sponsors .sponsors img {
  margin-top:6rem;
}

/******************
Gallery Page Styles
******************/

#gallery .body {padding-bottom:3rem;}