@font-face {
    font-family: 'round';
    src: url('../fonts/RoundsBlack.otf');
}
@font-face {
    font-family: 'axis';
    src: url('../fonts/AxisExtrabold.otf');
}
@font-face {
    font-family: 'reef';
    src: url('../fonts/Reef.otf');
}

@keyframes slideInLogo {
  from{
    opacity: 0;
    top: 30%;
  }
  to{
    opacity: 1;
    top:50%;
  }
}
@keyframes slideInBackdrop {
  from{
    opacity: 0;
    top: -4%;
  }
  to{
    opacity: 1;
    top: 0%;
  }
}
@keyframes fadeIn {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

#backdrop{
  width: 100%;
  margin: 0px;
  position: absolute;
  top:0px;
  left:50%;
  transform: translateX(-50%);
  animation-name:slideInBackdrop;
  animation-duration:3s;
}
#backdropPic{
  width: 100%;
}
#main{
  background-color: #FFFCF9;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100vh;
}
#mainLogo{
  position: absolute;
  width: 12%;
  z-index: 1002;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-60%);
  animation-name:slideInLogo;
  animation-duration:3s;
}
#backdropCover{
  position: absolute;
  width: 100%;
  top: 80%;
}
#indexBody{
  background-color: #FFFCF9;
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  font-family: round;
  font-size: 80px;
  display: inline-block;
  text-align: center;
  color: #352d39;
  padding-top: 2.5%;
  line-height: 58%;
}
#mics{
  position: absolute;
  min-width: 100%;
  max-width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFFCF9;
}
#on{
  font-family: axis;
  font-size: 60px;
  color: #b1ede8;
  position: relative;
}
#date{
  font-family: axis;
  color: #352d39;
  font-size: 70px;
  position: relative;
}
#smallIcon{
  top: 1%;
  z-index: 1003;
  position: fixed;
  height: 5%;
}
#desc{
  font-family: Reef;
  position: relative;
  font-size: 22px;
  width: 69%;
  line-height: 22px;
  left: 50%;
  transform: translateX(-50%);
}
#artists{
  font-family: axis;
  max-width: 80%;
  font-size: 60px;
}
#artist1{
  position: fixed;
  max-width: 100%;
  min-width: 100%;
  left: 50%;
  transform: translateX(-50%);
  line-height: 105%
}
#slash1{
  color: #b1ede8;
  font-size: 80px;
}
.artists11{
  cursor: pointer;
}
.artists11:hover, .artists12:hover, .artists21:hover, .artists22:hover {
  color: #ff6978;
}
.artists12{
  cursor: pointer;
}
#artist2{
  font-size: 50px;
}
#slash2{
  color: #b1ede8;
  font-size: 80px;
}
#slash22{
  color: #b1ede8;
  font-size: 80px;
  position: fixed;
  left: 66.67%;
  transform: translateX(-50%);
}
.artists21{
  cursor: pointer
}
.artists22{
  cursor: pointer
}
.artists23{
  position: fixed;
  left: 80%;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}
#artist3{
  position: fixed;
  margin-top: 70px;
  max-width: 100%;
  min-width: 100%;
  left: 50%;
  font-size: 40px;
  transform: translateX(-50%);
}
#slash3{
  color: #b1ede8;
  font-size: 80px;
  position: fixed;
  left: 33.33%;
  transform: translateX(-50%);
}
#slash32{
  color: #b1ede8;
  font-size: 80px;
  position: fixed;
  left: 66.67%;
  transform: translateX(-50%);
}
.artists31{
  position: fixed;
  left: 20%;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}
.artists32{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}
.artists33{
  position: fixed;
  left: 80%;
  transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}
#adFranco, #adRedferrie, #adNav, #adThreads, #adStimpies, #adYonkz, #adBrads, #adMylk, #adClaim, #adFure{
  display: none;
  position: absolute;
  z-index: 1006;
  padding: 15px;
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 300px;
  min-height: 200px;
  animation-name: fadeIn;
  animation-duration: 0.5s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
  background-color: #FFFCF9;
  font-family: reef;
  font-size: 18px;
}
#eventLink{
  width: 5.5%;
  float: right;
}
#enq{
  z-index: 1005;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: reef;
  font-size: 20px;
}

#sponsors{
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#micDiv{
  width: 100%;
  height: 100%;
}
#yhlogo{
  width: 10%;
  position: absolute;
  z-index: 1005;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

#blue{
  color: #b1ede8;
}
#red{
  color: #ff6978;
  position: relative;
}
#purple{
  color: #352d39;
}

#daynight{
  font-family: axis;
  line-height: 70%;
  color: #352d39;
  position: relative;
}
#location{
  font-family: axis;
  position: fixed;
  max-width: 80%;
  width: 80%;
  line-height: 100%;
  font-size: 60px;
  left: 50%;
  transform: translateX(-50%);
}
#map{
  position: fixed;
  width: 60%;
  height: 40vh;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
}
#title{
  color: #ff6978;
  position: relative;
}
#textlogo{
  position: relative;
  z-index: 1005;
  width: 40%;
}
#faq{
  font-family: Reef;
  position: relative;
  font-size: 22px;
  width: 70%;
  line-height: 22px;
  text-align: left;
  left: 50%;
  transform: translateX(-50%);
}
.faqQ{
  font-family: axis;
  font-size: 22px;
  color: #ff6978;
}
.faqQQ{
  font-size: 27px;
}
.posAb{
  position: absolute;
}
#paymentScreen{
  display: none;
  height: 30%;
  width: 40%;
  background: #FFFCF9;
  z-index: 1005;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20px;
}
#discScreen{
  display: none;
  height: 30%;
  width: 40%;
  background: #FFFCF9;
  z-index: 1005;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20px;
}
#discDesc{
  font-family: Reef;
  font-size: 20px;
  color: #352d39;
  line-height: 10%;
}
#discSuccess{
  position: absolute;
  font-family: axis;
  font-size: 40px;
  color: #ff6978;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#paymentDesc{
  font-family: Reef;
  font-size: 20px;
  color: #352d39;
  line-height: 20px;
}
#paySuccess{
  position: absolute;
  font-family: axis;
  font-size: 40px;
  color: #ff6978;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#cross{
  position: absolute;
  width: 30px;
  top: 12%;
  left: 95%;
  opacity: 50%;
  -webkit-font-smoothing: antialiased;
  transform: translate(-50%,-50%);
  cursor: pointer;
}
#adCross{
  position: absolute;
  width: 25px;
  opacity: 50%;
  cursor: pointer;
  top: 5%;
  left: 93%;
  transform: translate(-50%,-50%);
}
#ig{
  width: 35px;
  margin-right: 15px
}
#spotify{
  width: 35px;
  margin-right: 15px
}

#navbar {
  overflow: hidden;
  z-index: 1005;
}
#navbar a {
  float: left;
  margin-top: 1%;
  font-family: axis;
  z-index: 1005;
  display: block;
  text-align: center;
  text-decoration: none;
}
#homeButton{
  color: #352d39;
  position: relative;
  left: 12.5%;
  transform: translateX(-50%);
}
#detailsButton{
  color: #352d39;
  position: absolute;
  left: 37.5%;
  transform: translateX(-50%);
}
#faqButton{
  color: #b1ede8;
  position: absolute;
  left: 62.5%;
  transform: translateX(-50%);
}
#ticketsButton{
  color: #b1ede8;
  position: absolute;
  left: 87.5%;
  transform: translateX(-50%);
}
#homeButtonF{
  color: #ff6978;
  position: relative;
  left: 12.5%;
  transform: translateX(-50%);
}
#detailsButtonF{
  color: #ff6978;
  position: absolute;
  left: 37.5%;
  transform: translateX(-50%);
}
#faqButtonF{
  color: #ff6978;
  position: absolute;
  left: 62.5%;
  transform: translateX(-50%);
}
#ticketsButtonF{
  color: #ff6978;
  position: absolute;
  left: 87.5%;
  transform: translateX(-50%);
}
#price{
  position: relative;
  width: 270px;
  min-height: 300px;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: 20px;
  border: 1px solid #ff6978;
  background-color: #FFFCF9;
  border-radius: 20px;
  font-family: sans-serif;
  font-size: 12px;
  padding: 25px;
  line-height: 100%;
}
#priceTitle{
  float: left;
}
#priceCheckout{
  float: right;
}
#priceTotal{
  float: right;
}
#priceInstruction{
  float: left;
}
#line{
  width: 100%;
  height: 1px;
  background-color: black;
  margin-bottom: 4px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 0px;
  width: 100%;
  z-index: 1005;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  border: 0;
  font-weight: 500;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#form-container {
  position: relative;
  width: 380px;
  min-height: 200px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.third {
  float: left;
  width: calc((100% - 32px) / 3);
  padding: 0;
  margin: 0 16px 16px 0;
}

.third:last-of-type {
  margin-right: 0;
}

/* Define how SqPaymentForm iframes should look */
.sq-input {
  height: 56px;
  box-sizing: border-box;
  border: 1px solid #ff6978;
  background-color: #FFFCF9;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
  border: 1px solid #4A90E2;
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  border: 1px solid #E02F2F;
}

#sq-card-number {
  margin-bottom: 16px;
}

#sq-name, #sq-email, #sq-discount {
  height: 56px;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
  border: 1px solid #ff6978;
  background-color: #FFFCF9;
  border-radius: 6px;
  display: inline-block;
}

/* Customize the "Pay with Credit Card" button */
.button-credit-card {
  width: 100%;
  height: 56px;
  margin-top: 10px;
  background: #b1ede8;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}

.button-credit-card:hover {
  background-color: #352d39;
}