/*=======================================
 	Pizza Challenge Page
========================================*/
html { font-size: 1em; scroll-behavior: smooth; } 
body { line-height:1.5; color:#1D1E20; -webkit-font-smoothing:antialiased; font-family:'Open Sans', sans-serif; text-align: center;}
h1, h2, h3, a { font-family: 'cooper-black-std', serif; text-transform:uppercase;}
h1 { font-size: 32px; color: #fff; margin-bottom: 30px; }
h2 { font-size: 28px; margin-bottom: 30px; }
h3 { font-size: 20px; margin-bottom: 15px; }
.btn { background:#D6001C; border-radius:0; color:#fff !important; display:inline-block; font-family: 'cooper-black-std', serif; padding:13px 25px; margin-top:20px; text-align:center; text-transform:uppercase; text-shadow: none; white-space: revert; }
.btn:hover { background:#cb021c; color:#FFF; }
img { width: 100%;}

section, footer { padding: 4em 20px }
nav p, footer p, #highlights p { color: var(--yellow); }
#highlights h2, footer h3, nav a, footer a { color: #fff; transition: all .3s ease-in; }
nav a:hover, footer a:hover { text-decoration: underline; color: #D6001C }
#highlights, footer { background: #000; color: #fff}
.content-inner { max-width: 1240px; margin: auto; }

nav { background-image: url(/images/challenge/hero.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; height: auto; padding: 20px; color: #fff; font-size: 18px; text-shadow: 0px 0px 15px 0px 0px 15px rgba(0,0,0,.3); }
nav #logo { position: unset}
nav #logo img { max-width: 100px;}
nav h1, nav p { max-width: 820px; margin-right: auto }
nav > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
nav > div:last-child { padding: 5em 0 6em; }
#pizzachallenge-register nav > div:last-child { padding: 0 !important; }
#pizzachallenge-register section * { text-align: center;}
#pizzachallenge-register section h2 { color: #D6001C }

#challenge-nav-toggle { font-size: 26px; z-index: 999; cursor: pointer; width: 30px; }
#challenge-nav { display: none;}
#challenge-nav li { margin: 10px 30px 20px 0; }
#challenge-nav li:last-child { margin-right: 0 }
#challenge-nav .fab { font-size: 30px;}
.noscroll.show-nav #challenge-nav.toggled { display: block; width: 300px; background: #000; z-index: 999; right: 0; position: fixed; top: 0; height: 100%; padding: 100px 0 0 50px; text-align: left;}

#order { position: relative; overflow: hidden;}
#order h2 { color: #FFF; }
#order video { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; top: 0; left: 0; z-index: -1;}

#rules h2 { color: #01803D; }
#rules .content-inner img { max-width: 450px; margin-bottom: 20px; }
#rules .content-inner span { font-weight: 700; color:#D6001C; }
#rules .content-inner > ul > li { margin: 10px 0 }
#rules .content-inner > ul > li:last-child { background: rgba(255, 193, 7, .2); padding: 30px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
#rules .content-inner > ul, footer ul { display: flex; flex-direction: column; justify-content: center; }
#rules .content-inner > ul > li ul li { list-style-type: disc; list-style-position: inside; }

#highlights .content-inner > iframe { max-width: 330px; margin: 10px }
#highlights .content-inner > div { margin-bottom: 30px; }

footer a { text-decoration: underline; margin-bottom: 15px; display: inline-block; }
footer .fab { font-size: 24px; }

@media (min-width:700px){
  body, h1, h2, h3 { text-align: left;}
  h1 { font-size: 70px }
  h2 { font-size: 48px}
  h3 { font-size: 24px}
  section, footer { padding: 7em 20px; font-size: 17px; }

  nav p { font-size: 24px; }
  nav > div:last-child { padding: 8em 0 10em; }
  #challenge-nav { display: flex;}
  #challenge-nav-toggle { display: none;}
  .noscroll.show-nav #challenge-nav.toggled { }
  nav #logo img { max-width: 150px;}

  #rules h3 { text-align: center;}
  #rules .content-inner img { margin-bottom: 30px; max-width: fit-content; }
  #rules .content-inner > ul > li { margin: 30px 0; width: calc(50% - 30px); text-align: center; }
  #rules .content-inner > ul, footer ul { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  footer ul li { flex: 1 }

  #highlights .content-inner > iframe { height: auto; width: calc(33.333% - 17px); margin: 20px 20px 0 0; max-width: none;}
  #highlights .content-inner > iframe:nth-of-type(3n) { margin-right: 0 }
}