@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
body {
  background: #a4c1ab;
  margin: 0;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  color: #f9f3d3;
  font-size: 0;
}
.loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: black;
  z-index: 999;
}
.loading img {
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.title {
  width: 300px;
  margin-top: 70px;
}
.main {
  width: 90%;
}
.dates {
  display: block;
  padding: 50px;
}
.date {
  position: relative;
  display: inline-block;
  padding: 30px;
  width: 25%;
  font-size: 30px;
  box-sizing: border-box;
  vertical-align: top;
}

.support {
  color: #020203;
}

.past.date {
  color: #f9f3d399;
}

.past .support {
  color: #02020399;
}

.past-header {
  color: #f9f3d3;
  font-size: 35px;
  margin: 60px 0 0 0;
}

.footer {
  font-size: 20px;
  display: block;
  margin: 30px 0 70px;
}
.peace {
  color: #020203;
}
.so:before {
  content: "sold out";
  background: red;
  color: #f9f3d3;
  font-size: small;
  display: block;
  width: 6em;
  margin: -1.5rem auto 0.3rem;
  padding: 0.3rem 0;
}
a .support:after {
  content: "tickets";
  display: block;
  width: 95px;
  margin: auto;
  padding-bottom: 2px;
  color: #f9f3d3;
  border-bottom: solid 4px;
}
a {
  color: inherit;
  text-decoration: none;
}
.so .support:after, .nl .support:after {
  opacity: .5;
}
.nl .support:after {
  content: "";
  display: none;
}

.nl {
  cursor: default;
  pointer-events: none;
}
.social a {
  display: inline-block;
  padding: 10px;
}
.social {
  display: inline-block;
  margin: 30px 0;
}
.small {
  font-size: 20px;
  color: #020203;
}
.more {
  display: block;
  font-size: 25px;
}
@media (min-width: 1000px) {

}
@media (max-width: 1000px) {
  .dates {
    padding: 30px;
  }
  .date {
    font-size: 20px;
    padding: 20px;
  }
}
@media (max-width: 500px) {
  .title {
    width: 200px;
    margin-top: 50px;
  }
  .date {
    width: 100%;
  }
  .footer {
    font-size: 15px;
    margin-bottom: 50px;
  }
  .social {
    margin: 20px 0;
  }
  .small {
    font-size: 15px;
  }
  .support:after {
    width: 64px;
  }
  .more {
    font-size: 15px;
  }
}