html {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  color: #333;
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  line-height: 1.1;
}

.small-only {display: none;}

/* HEADER */

.location-banner {text-align: center; background: #3953A4; color: #fff; padding: 0.5em;}
.location-banner a {color: #fff;}

.header {max-width: 1100px; margin: 0px auto; border: 1px solid #fff; padding: 10px 0;}
#logo {background: transparent url(crush_logo.png); background-size: contain; width: 100px; height: 100px; position: fixed; top: 30px; left: 30px; }
#logo a {display: block; width: 100px; height: 100px;  text-indent: -9999px;}

.nav {text-align: right; font-size: 1em; }
.nav p {margin-top: 0;}
.nav a {color: #140011; text-decoration: none; padding: 1rem 1rem; font-weight: 700; transition: 150ms 300ms; display: inline-block;}
.nav a:hover {color: #FEC717;}
.nav .social img{width: 30px; height: 30px; margin-bottom: -5px;}


/* HERO */

.hero {clear: both; border: 1px solid #fff;}
.hero .left {width: 30%; min-height: 40vw; border: 1px solid #fff; display: inline-block; float: left; margin-right: 3vw;
  background: transparent url(left.png) center right no-repeat; background-position: right 0px; background-size: cover;}
.hero .right {width: 30%; height: 40vw; border: 1px solid #fff; display: inline-block; float: right; margin-left: 3vw;
  background: transparent url(right.png) center left no-repeat; background-position: left 0px; background-size: cover;}
.hero .center {width: 33%;  border: 1px solid #fff; display: inline-block; padding-top: 8vw;}

marquee {font-family: "Poppins", sans-serif; background-color: #F6CA49; padding: 0.5em; letter-spacing: 0.5em; font-size: 1.6em; margin-top: -20px; margin-left: -3px; margin-right: -3px; width: 100%;}

/* MACHINE THING */

.main {border: 1px solid #fff; clear: both; padding: 20vh 4% 0 4%; max-width: 1000px; margin: 0px auto; background: transparent url(machine2.png) center top no-repeat; background-size: 25%;}

.main .right {background: rgba(102,102,153,0.2); padding: 1em 2em 1em 5%; margin-left: 60%; border-radius: 10px; margin-top: -40px;}
.main .left {background: rgba(204,102,153,0.2); padding: 1em 5% 1em 2em; margin-right: 60%; border-radius: 10px; margin-top: -40px;}

.machine-overlay {position: relative; top: 0;}


/* SOFAR */

#sofar  {padding-bottom: 15vh; padding-top: 10vh; margin: 0 auto; max-width: 700px;}
#sofar h2 {text-align: left; }
#sofar ul {list-style: none; padding-left: 0; margin: 0px auto;}
#sofar ul li { margin-left: 0; display: inline-block; padding: 20px 30px; margin: 5px;border-radius: 10px; background: rgba(102,102,153,0.2); text-align: center; }
#sofar ul li:nth-child(odd) {background: rgba(204,102,153,0.2);}

/* FAQ */


 #faq {padding-bottom: 10vh; padding-top: 10vh; margin: 0 auto; max-width: 700px;}
 details { max-width: 700px;}
 details summary {cursor: pointer; display: block;  padding: 1rem 0 1rem 0; }
 details p {margin-top: 0; margin-left: 1.2rem;}


 /* FOOTER */

#footer {text-align: center; margin-top: 30vh; padding: 40px 0 140px 0; background: #EF4223 url(checker.png) bottom left repeat-x; color: #fff; font-size: 0.8em}
#footer a {color:#fff;}

.penny-footer {background: transparent url(penny-footer.png) bottom center no-repeat; height: 140px; width: 100%; margin: -140px auto 0 auto; display: block; background-size: contain; bottom: 0; overflow-x:hidden; }


/* MAKE IT MOBILE */

@media only screen and (max-width: 992px) {
  .hero .center {padding-top: 0;}
  h1 {font-size: 1.8em;}
  .main { background: transparent url(machine2.png) center top repeat-y; background-size: 30%;}
  .main .right {background: rgba(102,102,153,0.2); padding: 1em 2em 1em 10%; margin-left: 60%; }
  .main .left {background: rgba(204,102,153,0.2); padding: 1em 10% 1em 2em; margin-right: 60%;}

}

@media only screen and (max-width: 768px) {
  .hero .center {width: 50%; padding: 0 4%;}
  .hero .left, .hero .right {width: 20%; margin: 0;}
  h1 {font-size: 1.4em;}
  .main { padding-top: 10vh; margin-top: 40px; background: transparent url(machine2.png) 5% top repeat-y; background-size: 30%;}
  .main .right {background: rgba(102,102,153,0.2); padding: 1em 1.5em; margin-left: 35%; margin-right: 10px;margin-top: 20px;}
  .main .left {background: rgba(204,102,153,0.2); padding: 1em 1.5em; margin-left: 35%; margin-right: 10px; margin-top: 20px;}
  #faq, #sofar {padding-bottom: 10vh; padding-top: 10vh; padding-left: 10%; padding-right: 10%; margin: 0 auto; max-width: 700px; }
  #footer {margin-top: 10vh;}

}
@media only screen and (max-width: 660px) {
  #logo {background: transparent url(crush_logo.png); background-size: contain; width: 20vw; height: 20vw; position: fixed; top: 80px; left: 40vw; }
  .nav {text-align: center; font-size: 1em; padding-top: 150px;}
  .small-only {display: inherit;}

}

@media only screen and (max-width: 420px) {
  #logo {background: transparent url(crush_logo.png); background-size: contain; width: 34vw; height: 34vw; position: fixed; top: 80px; left: 34vw; }
  h1 {font-size: 1.2em;}

  .nav {text-align: center; font-size: 1em; padding-top: 150px;}
  .nav a {padding: 0.25rem 0.25rem; }
  .hero .left, .hero .right {display: none;}
  .hero .center {width: 90%; padding-left: 5%;}
    .hero .sm-left {width: 49%; min-height: 70vw; border: 1px solid #fff; display: inline-block; float: left; margin-right: 0; background: transparent url(left.png) center right no-repeat; background-position: right 0px; background-size: cover;}
    .hero .sm-right {width: 49%; height: 70vw; border: 1px solid #fff; display: inline-block; margin: 0;;
      background: transparent url(right.png) center left no-repeat; background-position: left 0px; background-size: cover;}
.main .right , .main .left  {padding: 0.75em 1em;}
}