/*
Theme Name: Bushwig v1.0
*/
:root{
  --sitemargin: 1rem;
    --purple: #841aea;
    --yellow: #e8f71e;
    --blue: #4bf6ff;
    --pink: #ff30d0;
    --red: #d93737;
    --green: #a2ff49;
    --orange: #f3821c;
    --dkblue: #3412ff;
}


@font-face {
  font-family: 'PPF';
  src: url('fonts/PPFormula-CondensedBlack.otf');
  src: url('fonts/PPFormula-CondensedBlack.woff2') format('woff2'),
      url('fonts/PPFormula-CondensedBlack.woff') format('woff'),
      url('fonts/PPFormula-CondensedBlack.ttf') format('truetype');
}
@font-face {
  font-family: 'PPF';
  font-weight: 100;
  src: url('fonts/FormulaCondensed-Light.otf');
 
}

.purple{
  background: var(--purple);
  color: var(--yellow);
}
.green{
  background: var(--green);
  color: var(--pink);
}
.red{
  background: var(--red);
  color: var(--blue);
}
.orange{
  background: var(--orange);
  color: var(--dkblue);
}
.yellow{
  background: var(--yellow);
  color: var(--purple);
}
.pink{
  background: var(--pink);
  color: var(--green);
}
.blue{
  background: var(--blue);
  color: var(--red);
}
.dkblue{
  background: var(--dkblue);
  color: var(--orange);
}

.socials{
  display: flex;
}
.socials a{
  background: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  margin-left: 0.2rem;
}

.socials svg{
fill: var(--purple);
}

body{
  -webkit-appearance: none;
  appearance: none;
  font-family: "stadio-now-variable", sans-serif;
  font-variation-settings: "opsz" 1000, "wght" 700;
  background: var(--yellow);
  margin: 0px;
  text-rendering: optimizeLegibility!important;
  -webkit-font-smoothing: antialiased!important;
  -webkit-tap-highlight-color: transparent;
  font-size: 2.5rem;
  font-weight: 400;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  color: var(--purple);
}
#landing{
  position: relative;
 
    overflow: hidden;
}
#landing .bg{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#landing > div:last-child{
  margin-bottom: 6rem;
}
.logo{
  position: relative;
    width: 65%;
    transform: translateX(-50%);
    left: 50%;
}
.social{
  margin-top: 6rem;
}
.social > div{
  position: relative;
  height: 25vw;
    text-align: center;
   
}
.face{
  position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

footer .bg{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insta,.tickets,.facebook,.twitter{
    position: absolute;
    display: block;
    height: 9vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.insta{
  left: 16%;
  top: 6%;
}
.tickets{
  left: 82%;
  top: 16%;
  height: 12vw;
}
.facebook{
  left: 22%;
  top: 115%;
}
.twitter{
  left: 80%;
  top: 74%;
}

.st0{
  fill:#FF0000;
}
#intro span{
  font-weight: 100;
}
#line-up .pill{
  font-weight: 100;
}
body > *{
  -webkit-appearance: none;
  appearance: none;
}
a{
  text-decoration: none;
  color: inherit;
}
p{
  position: relative;
  text-align: center;
}
p img{
  width: 90%;
  height: auto;
}
.menu{
  padding: 0px;
  margin: 0px;
  
}
.menu div{
  padding-top: 0.3rem;
}
content{
  background-color: var(--yellow);
  flex-grow: 1;
position: relative;
  padding-left: 16rem;
  padding-right: 16rem;
  width: calc(100vw - 32rem);

}
video{
  
  left: -14vw;
  position: relative;
  width: 100vw;
  height: calc(100vh - 10rem);
  object-fit: contain;
  transition: height 2s;

}

.sitewrap:not(.fixed-header){
  position: static;
  top: 0px;
}

.fixed-header video{
  height: calc(66vh - 10rem);
}
.menu{
  width: 100vw;
  position: relative;
}
#tickets{
  min-height: auto;
  font-size: 3rem;
}
.pill{
  background: var(--purple);
  color: var(--yellow);
  padding-top: 0.6rem;
  border-radius: 16rem;
  display: block;
  text-align: center;
  width: fit-content;
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: 6rem;
  margin-bottom: 3rem;
}
media{
  position: relative;
  width: 54vw;
  height: 36vw;
  border: 2px solid var(--purple);
  border-radius: 3rem;
  display: inline-block;
  overflow: hidden;
  margin: auto;

  display: block;
}
media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.white{
  color: var(--green) !important;
}
.cont-item{
  position: relative;
    margin-top: 0px;
    background-color: var(--yellow);
    min-height: 20rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.bigbg{
  position: fixed;
  font-family: 'PPF';
  left: 50%;
  top: 47%;
  transform: translate(-50%,-50%);
  font-size: 14rem;
  color: #9d9d9d;
  z-index: 1;
  width: 90vw;
  text-align: center;
  mix-blend-mode: overlay;
}
.notfixed{
  position: absolute !important;
  top: 53%;
  
}
.headliners,.others,.description{
  position: relative;
  z-index: 2;
}
.description{
  text-align: center;
}
section{
  position: relative;
  padding-left: 15vw;
  padding-right: 15vw;
}
ticketcircle{
  position: absolute;
  background: var(--purple);
  bottom: 42rem;
  right: 4rem;
  height: 12rem;
  width: 12rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--yellow);
    line-height: 1;
    -webkit-animation: rotating 6s linear infinite;
    -moz-animation: rotating 6s linear infinite;
    -ms-animation: rotating 6s linear infinite;
    -o-animation: rotating 6s linear infinite;
    animation: rotating 6s linear infinite;
}
ticketcircle:hover{
  animation-play-state: paused;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.headliners{
  position: relative;
  font-feature-settings: "ss01";
    z-index: 2;
    font-size: 3rem;
    font-family: 'PPF';
    text-align: center;
}
.others{
  text-align: center;
  font-size: 2.7rem;
  font-weight: 100;
}
.content > *{
  z-index: 2;
}
.content media{
  z-index: 1;
}
.straplineone{
  font-family: 'PPF';
  text-align: center;
  font-size: 4rem;
  line-height: 4.4rem;
  margin-top: 9vh;
  position: relative;
}
.straplinetwo{
  text-align: center;
    font-size: 1.6rem;
    margin-top: 6vh;
    margin-bottom: 6vh;
    position: relative;
}
.header{
  margin-top: 2rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 5rem;
  z-index: 2;
  position: relative;
  font-style: italic;
  margin-bottom: 2rem;
}
.sitewrap{
 
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.timeslot{
  font-family: "lores-12", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.timeslot p{
  margin: 0px;
}

.menu{
  display: flex;
  position: fixed;
  top: 0px;
  z-index: 999;
  background: var(--yellow);
  justify-content: space-around;
  font-size: 4rem;
    font-style: italic;
    font-variation-settings: "opsz" 100, "wght" 900;
    padding: 1rem;
    padding-bottom: 0.3rem;
    width: calc(100vw - 2rem);
}

waves{
  z-index: 7;
  position: relative;
}
waves:first-child svg{
  display: block !important;
  width: 50% !important;
  position: absolute !important;
  top: 0.5px !important;
  left: 0px !important;
  padding: 0px !important;
  transform: translateY(-100%) !important;
  
}
waves svg .st0{
  fill: var(--pink) !important;
}
waves:first-child svg:nth-child(2){
  transform: rotateY(180deg) translateY(-100%) !important;
  left: auto !important;
  right: 0px;
}

waves:last-child{
  position: absolute;
    bottom: 0px;
    transform: translateY(calc(100% - 1px));
}
waves:last-child svg{
  display: block !important;
    width: 50vw !important;
    position: absolute !important;
    bottom: 0.5px !important;
    left: 0px !important;
    padding: 0px !important;
    transform: translateY(0%) rotateX(180deg) !important;
  
}
waves:last-child svg:last-child{
  transform: translateY(0) rotateX(180deg) rotateY(180deg) !important;
  left: 50vw !important;
  top: 0px;
}

#lineupsimple{
  background: var(--pink);
  color: var(--green);
  width: 100% !important;
  font-family: "lores-12", sans-serif;
}
#lineupsimple .header{
  font-family: "stadio-now-variable", sans-serif;
  font-variation-settings: "opsz" 1000, "wght" 700;
}
#lineup, #lineup > div{
  display: block !important;
  flex-wrap: wrap;
}
#lineup > div{
  width: 50%;
  position: relative;
}
#lineup > div svg:first-child{
  width: 100%;
  position: absolute;
  top: 0.5px;
  left: 0px;
  padding: 0px;
  transform: translateY(-100%);
}
#lineup > div svg:last-child{
  width: 100%;
  position: absolute;
  bottom: 0.5px;
  left: 0px;
  padding: 0px;
  transform: rotateX(180deg) translateY(-100%);
}
#lineup > div svg:last-child .st0{
  fill: var(--orange);

}
#lineup > div:nth-child(2) svg:first-child{
  transform: translateY(-100%) rotateY(180deg);
}
#lineup > div:nth-child(2) svg:last-child{
  transform: rotateX(180deg) translateY(-100%) rotateY(180deg);
}
#lineup > div:nth-child(2) svg:last-child .st0{
  fill: var(--dkblue);
}
#lineup > div:nth-child(2) svg:first-child .st0{
  fill: var(--yellow);
}
#lineup > div svg:first-child .st0{
  fill: var(--purple);
}
#lineup > div > *{
  padding-left: 6rem;
  padding-right: 6rem;
  width: 100%;
  padding-bottom: 2rem;
}







footer{
  margin-top: -3rem;
  position: relative;
}
.foot{
  position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
footer .item{
  padding-bottom: 23rem;
  padding-top: 23rem;
  text-align: center;
  display: block;
    z-index: 999;
    position: relative;
    color: var(--yellow);
}
.mainmenu{
  font-family: 'PPF';
  font-size: 3rem;
  color: var(--yellow);
  background-color: var(--purple);
  border-radius: 4rem;
  z-index: 999;
}

.social a{
  margin-left: 1rem;
}
.mainmenu a:hover{
  color: black;
}
.menu .item{
  padding-left: var(--sitemargin);
  padding-right: var(--sitemargin);
}
.menu .item:first-child{
  padding-top: var(--sitemargin);
}
.mobmenu,.mobclose{
  display: none;
}
.mobburger svg,.mobclose svg{
  zoom: 1.8;
}






@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
ticker{
  position: relative;
  height: 3rem;
  overflow: hidden;
  
  width: 100%;
  font-size: 2rem;
  font-weight: 500;
}
.ticker{
  width: auto;
  cursor: default;
}
.ticker:hover{
  animation-play-state: paused;
}
.ticker-wrap {
	position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background: var(--green);
  color: var(--purple);
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  line-height: 4.9rem;
    display: inline-block;
    height: 4rem;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 90s;
    animation-duration: 90s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
}
.item{
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1430px) {
  content{
    padding-left: 5rem;
    padding-right: 5rem;
    width: calc(100vw - 10rem);
  }
  .bigbg{
    font-size: 12rem;
  }
}
@media screen and (max-width: 930px) {

  .facebook{
    left: 17%;
    top: 90%;
  }

  #lineup > div {
    width: 100%;
}

#lineup > div > * {
  padding-left: 1rem;
  padding-right: 1rem;
  width: calc(100% - 2rem);
}
.header{
  font-size: 4rem;
}
.menu{
  flex-wrap: wrap;
    width: calc(100% - 2rem);
    justify-content: space-between;
    font-size: 2.2rem;
}
.menu div{
  width: 50%;
}
.social > div{
  height: 11rem;
}

  body {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    font-size: 1.8rem;
  }
  section{
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #tickets div{
    margin-top: 7rem !important;
    margin-bottom: 5rem !important;
  }
  media{
    height: 60vw;

  }
  ticketcircle{
    bottom: 11rem;
    right: 2rem;
    height: 8rem;
    width: 8rem;
    z-index: 888;
  }
  .mobmenu{
    background: var(--purple);
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    z-index: 999;
  }
  .mobmenu svg{
    fill: var(--yellow);
    zoom: 1.2;
    margin-top: 0.1rem;
  }
  .mainmenu{
    background: transparent;
  }
  .mainmenu .mobilemenuu{
    background: var(--purple);
    position: fixed;
    width: 100vw;
    left: 0px;
    top: 0px;
    height: 100vh;
    z-index: 888;
    
    display: none;
    
  }
  mobwrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 4rem;
  }
 
  .headliners{
    font-size: 2rem;
  }
  video{
    left: -1rem;
    height: 14rem !important;
  }
  html {
    height: -webkit-fill-available;
  }
  
  .menu .item:last-child{
    font-size: 0.7rem;
  }
  ticker{
    font-size: 1rem;
    height: 2rem;
    line-height: 5.9rem;
  }
  content{
    padding-left: var(--sitemargin);
    padding-right: var(--sitemargin);
    width: calc(100vw - var(--sitemargin)*2);
    overflow-x: hidden;
  }

  media{
    width: 100%;
  }
  .mainmenu{
    flex-wrap: wrap;
  }
  .mainmenu a:not(.logo){
    display: none;
  }
  .bigbg{
    font-size: 5rem;
    width: 100vw;
  }
  .cont-item{
    margin-top: 0rem;
    margin-bottom: 7rem;
  }
  .notfixed{
    position: relative !important;
    top: 0px;
    transform: none;
    left: -1rem;
  }
  
}