/* ******************************** RESET ********************************** */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* ******************************* FONTS *********************************** */
@font-face {
  font-family: "Magilio";
  src: url("Fonts/magilio-font/MagilioRegular-8Mxvg.otf") format("opentype");
}
@font-face {
  font-family: "Gerbil";
  src: url("Fonts/Gerbil/Gerbil.otf") format("opentype");
}
@font-face {
  font-family: "PPWriter-Bold";
  src: url("Fonts/PPWriter/PPWriter-Bold.otf") format("opentype");
}
@font-face {
  font-family: "PPWriter-Book";
  src: url("Fonts/PPWriter/PPWriter-Book.otf") format("opentype");
}
@font-face {
  font-family: "PPWriter-ThinText";
  src: url("Fonts/PPWriter/PPWriter-ThinText.otf") format("opentype");
}
@font-face {
  font-family: "PPWriter-Itallic";
  src: url("Fonts/PPWriter/PPWriter-RegularItalic.otf") format("opentype");
}
h1 {
  font-family: "Magilio" !important;
}

h2 {
  font-family: "Gerbil" !important;
}

/* ******************************* VARIABLES ******************************* */
:root {
  --countdown-other-fs: 2rem;
  --countdown-text-fs: 1.5rem;
  --countdown-numbers-fs: 2.5rem;
  --margin: 0px 3px;
  --date-location-fs: 3rem;
  --content-section-padding: 50px 0px;
  --header-fs: 4rem;
  --paragraph-fs: 2rem;
  --img-max-width: 500px;
  --green-frame-height: 500px;
  --pink-frame-height: 500px;
  --content-page-p-fs: calc(0.5*var(--header-fs));
  --footer-margin-top: 300px;
  --footer-icon-height: 45px;
}

@media (max-width: 1700px) {
  :root {
    --header-fs: 3rem;
    --paragraph-fs: 1.8rem;
    --img-max-width: 300px;
  }
}
@media (max-width: 1400px) {
  :root {
    --paragraph-fs: 1.6rem;
    --green-frame-height: 400px;
    --pink-frame-height: 400px;
    --footer-margin-top: 250px;
    --footer-icon-height: 35px;
  }
}
@media (max-width: 1000px) {
  :root {
    --header-fs: 2.75rem;
    --paragraph-fs: 1.4rem;
    --green-frame-height: 300px;
    --pink-frame-height: 300px;
    --footer-margin-top: 200px;
    --footer-icon-height: 30px;
  }
}
@media (max-width: 750px) {
  :root {
    --header-fs: 2.2rem;
    --paragraph-fs: 1.2rem;
  }
}
@media (max-width: 650px) {
  :root {
    --header-fs: 2rem;
    --paragraph-fs: 1rem;
  }
}
@media (max-width: 460px) {
  :root {
    --countdown-other-fs: 2.2rem;
    --countdown-text-fs: 1rem;
    --countdown-numbers-fs: 2.2rem;
    --margin: 0px 3px;
    --date-location-fs: 1.3rem;
    --footer-margin-top: 100px;
  }
}
@media (max-width: 375px) {
  :root {
    --countdown-other-fs: 1.8rem;
    --countdown-text-fs: 1rem;
    --countdown-numbers-fs: 1.8rem;
    --margin: 0px 3px;
    --date-location-fs: 1.2rem;
    --green-frame-height: 200px;
    --pink-frame-height: 300px;
    --footer-margin-top: 100px;
    --footer-icon-height: 25px;
  }
}
@media (max-width: 320px) {
  :root {
    --countdown-other-fs: 1.5rem;
    --countdown-text-fs: 0.75rem;
    --countdown-numbers-fs: 1.5rem;
    --margin: 0px 3px;
    --date-location-fs: 1rem;
  }
}
/*
Apply to all four sides 
margin: 1em;

top and bottom | left and right
margin: 5% auto;

top | left and right | bottom
margin: 1em auto 2em;

 top | right | bottom | left
margin: 2px 1em 0 auto;
*/
/* **************************** BACKGROUND ********************************* */
html, body {
  overflow-x: hidden;
}

body {
  background-image: url(assets/canvas-texture-bg.jpg);
  background-repeat: repeat-y;
  background-size: 100%;
  position: relative;
}

.bg-frame {
  position: absolute;
  filter: blur(3px);
  z-index: -1;
}

#green-frame {
  transform: rotate(-30deg);
  height: var(--green-frame-height);
  width: auto;
  top: -50px;
  right: -100px;
  animation: green-rotate 10s ease-in-out 0s infinite normal;
}

#pink-frame {
  transform: rotate(30deg);
  height: var(--pink-frame-height);
  width: auto;
  top: 150px;
  left: -250px;
  animation: pink-rotate 11s ease-in-out 0s infinite normal;
}

.bg-star {
  animation: none;
}

@media (max-width: 500px) {
  .bg-star {
    animation: stars-idle 10s ease-in-out 0s infinite normal;
  }
}
@keyframes green-rotate {
  50% {
    transform: rotate(-20deg) translate(40px, 30px);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes pink-rotate {
  50% {
    transform: rotate(20deg) translate(-40px, 40px);
  }
  100% {
    transform: rotate(30deg);
  }
}
@keyframes stars-idle {
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* ******************************* NAVBAR ********************************** */
nav {
  font-family: "Gerbil";
}
@media (min-width: 992px) {
  nav {
    background-color: rgba(217, 217, 217, 0.8156862745);
  }
}
nav .navbar-brand:hover {
  filter: drop-shadow(0.8px 0.8px 0.8px #F49002);
}
nav li {
  padding-left: 15px;
  padding-right: 15px;
}
nav .nav-item:hover .nav-link {
  color: #F49002 !important;
}
nav .dropdown-item:hover {
  color: #F49002 !important;
}
nav .dropdown-item:active {
  color: #FFFFFF !important;
  background-color: #F49002;
}
nav .dropdown-item.active {
  background-color: #F49002 !important;
}
nav .dropdown-item.active:hover {
  color: #000000 !important;
}
@media (min-width: 992px) {
  nav .navbar-brand {
    position: absolute !important;
  }
}

/* *************************** HERO SECTION ******************************** */
a[role=button]:hover {
  filter: brightness(0.9);
}

#homepage-hero {
  padding-top: 20px;
}

.date-location {
  font-family: "PPWriter-Book";
  font-size: var(--date-location-fs);
}

.countdown .countdown__timer .countdown__timer__other,
.countdown .countdown__timer .countdown__timer__days,
.countdown .countdown__timer .countdown__timer__hours,
.countdown .countdown__timer .countdown__timer__minutes,
.countdown .countdown__timer .countdown__timer__seconds {
  font-weight: 300;
  font-family: "PPWriter-Itallic";
  font-size: var(--countdown-other-fs);
  vertical-align: top;
  display: inline-block;
  margin: var(--margin);
}
.countdown .countdown__timer .countdown__timer__other p,
.countdown .countdown__timer .countdown__timer__days p,
.countdown .countdown__timer .countdown__timer__hours p,
.countdown .countdown__timer .countdown__timer__minutes p,
.countdown .countdown__timer .countdown__timer__seconds p {
  margin-bottom: 0px;
}
.countdown .countdown__timer #days, .countdown .countdown__timer #hours, .countdown .countdown__timer #minutes, .countdown .countdown__timer #seconds, .countdown .countdown__timer #T-minus {
  font-size: var(--countdown-numbers-fs);
}
.countdown .countdown__timer .text {
  font-size: var(--countdown-text-fs);
}
.countdown span {
  vertical-align: bottom;
}

/* ************************* HOME PAGE LINEUP SECTION ********************** */
.artist-img {
  transform: rotate(0deg);
  transition: 0.4s ease-in-out;
}

.artist-img:hover {
  filter: drop-shadow(5px 5px 5px #F49002);
  transform: rotate(5deg);
  transition: 0.4s ease-in-out;
}

#lineup-page-section .slider {
  position: relative;
  width: 300px;
  height: 300px;
  margin-top: 80px;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  /* animation: rotate 30s linear infinite; */
  /* background-color:  red; */
}
@keyframes rotate {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}
#lineup-page-section .slider span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 72deg)) translateZ(200px);
}
#lineup-page-section .slider span img {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 1s;
}
#lineup-page-section .slider span:hover img {
  transform: translateY(-50px) scale(1.2);
  filter: drop-shadow(5px 5px 5px #f49002);
}
#lineup-page-section .card {
  border-radius: 13px;
}
#lineup-page-section .lineup-page-img {
  height: 60vh;
  margin-bottom: 50px;
  transform-origin: 50% -100%;
  transform: rotate(-90deg);
}
#lineup-page-section .active .lineup-page-img {
  transform-origin: 50% -100%;
  animation: swing-in 1.5s both;
}
@keyframes swing-in {
  60% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#lineup-page-section .carousel-control-prev, #lineup-page-section .carousel-control-next {
  height: 400px;
}

/* ************************* HOMEPAGE CONTENT SECTIONS ********************* */
.content-section {
  padding: var(--content-section-padding);
}
.content-section h2 {
  font-size: var(--header-fs);
}
.content-section p {
  font-size: var(--paragraph-fs);
  font-family: "PPWriter-ThinText";
}
.content-section .frame-graphic {
  max-width: var(--img-max-width);
  max-height: calc(1.25 * var(--img-max-width));
}

#about-section {
  margin-top: -2px;
  background-color: #59C3CC;
}

#reg-section-border {
  margin-top: -2px;
  background-color: #59C3CC;
}

#reg-section {
  background-color: #B1CF01;
}

#volunteers-section-border {
  margin-top: -2px;
  background-color: #B1CF01;
}

#volunteers-section {
  margin-top: -2px;
  background-color: #F282C5;
}
#volunteers-section a {
  color: #F49002;
}

#sg4ac-section-border {
  margin-top: -2px;
  background-color: #F282C5;
}

#sg4ac-section {
  margin-top: -2px;
  background-color: #FFBF0B;
}

/* **************************** CONTENT PAGES ****************************** */
.content-page section {
  margin-top: 25px;
  margin-bottom: 100px;
  font-family: "PPWriter-ThinText";
  font-size: 15.2px;
  max-width: 900px;
}
.content-page section h1 {
  font-size: 35px;
  margin-bottom: 60px;
}
.content-page section h2 {
  font-size: 20px;
  margin-top: 60px;
}
.content-page section h3 button {
  font-family: "PPWriter-Book";
  font-size: 15.2px;
}
@media (min-width: 768px) {
  .content-page section {
    font-size: 19px;
  }
  .content-page section h1 {
    font-size: 45px;
  }
  .content-page section h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .content-page section h3 button {
    font-size: 20px;
  }
}
.content-page section li {
  padding-left: 10px;
}
.content-page section li::marker {
  content: url(assets/stars/black-bullet.svg);
}
.content-page section a {
  color: #F49002;
}
.content-page section a:hover {
  color: #c66d1a;
}

/* ******************************* BABIES ********************************** */
#babies-section #baby-rules-portrait {
  width: 350px;
  margin-top: 20px;
}
#babies-section #baby-rules-landscape {
  width: 550px;
  margin-top: 50px;
}

/* ******************************* SPONSORS ******************************** */
#sponsors-section img {
  margin: 2rem 0px;
  transition: 0.4s;
}
#sponsors-section img:hover {
  transform: scale(1.2);
  filter: drop-shadow(5px 5px 5px #666666);
  transition: 0.4s;
}
#sponsors-section .square-logo {
  display: flex;
  justify-content: center;
}
#sponsors-section #prime-student {
  padding: 10px;
}
#sponsors-section #nyx {
  padding: 10px;
}
#sponsors-section #rockstar {
  padding: 10px;
}
#sponsors-section #guayaki {
  padding: 10px;
  width: 100%;
  max-width: 250px;
}
#sponsors-section #liquid-death {
  padding: 10px;
  width: 100%;
  max-width: 220px;
}
#sponsors-section #to {
  padding: 10px;
  width: 100%;
  max-width: 225px;
}
#sponsors-section #asgs {
  padding: 10px;
}

/* ******************************* FOOTER ********************************** */
footer {
  margin-top: var(--footer-margin-top) !important;
}
footer img {
  height: var(--footer-icon-height);
  filter: invert(20%) sepia(27%) saturate(316%) hue-rotate(352deg) brightness(93%) contrast(87%);
}
footer img:hover {
  filter: none;
}/*# sourceMappingURL=style.css.map */