body {

    font-family: 'Poppins', sans-serif;
    color: #141414;
    font-size: 16px;

    font-weight: 300;
    overflow-x: hidden;

}

h1,h2,h3,h4,h5,h6 {

    font-family: 'Playfair Display', serif;

    font-weight: 900;

}

h1 {

    font-size: 1.25em;

}
h2 {
    font-size: 3em;
}
h4 {
    font-size: 1.25em;
}
.sticky-nav {
  top: 20px;
  z-index: 999;
  position: fixed !important;
  right: 20px;
}
.sticky-nav form {
  margin-bottom: 0;
}

.nav-menu {
  background: #000;
  border: #fff 5px solid;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
}

.list-group-item {
  background: #000;
  border: none;
}

.date {
    font-size: .875em;
}
.white, a.white {

    color: #fff;

}
.font-body {
    font-family: 'Poppins', sans-serif;
}
.color-primary, a.color-primary {

    color: #f99c1c;

}
.bg-primary {
    background: #f99c1c !important;
}
.title-large {
    font-size: 4em;
}
.z-2 {
    z-index: 2;
}
.color-secondary, a.color-secondary {

    color: #4193af;

}
.bg-primary-opaque{
    background: rgba(249, 156, 28, .75) !important;
}
.hover-primary:hover {

    color: #f99c1c;

}

.hover-secondary:hover {

    color: #4193af;

}
.hero {
    height: 100vh;
    min-height: 1200px;
}
.logo {

    max-width: 800px;

    margin: 0 auto;

}

.logo img {

    max-width: 100%;
    width: 100%;

}

.social-links {

    font-size: 3em;

}
.container-max {
    max-width: 1495px;
    margin: 0 auto;
}
.section-padding {
    padding-top: 7em;
    padding-bottom: 7em;
}

.yt-single {
    background: #141414;
    border-radius: 10px;
}
.yt-thumb {
    max-width: 260px;
    width: 100%;
    display: flex;
    cursor: pointer;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 100%;
}
.date {
    color: #808080;
}
.yt-title {
    color: #ccc;
    font-weight: 900;
}
.yt-single img {
    border-bottom: 3px solid #f99c1c;
    transition: all .25s ease-in-out;
}
.yt-thumb:hover img {
    opacity: .75;
}
.yt-img {
    position: relative;
}
.yt-img:before {
    content: "";
    background-image: url('/images/play-btn.svg');
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -20px;
    right: 20px;
    z-index: 1;
    opacity: 0;
    transition: all .25s ease-in-out;
}
.ypt-now-playing .yt-img:before {
    content: "";
    background-image: url('/images/play-btn.svg');
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: -20px;
    right: 20px;
    z-index: 1;
    opacity: 1;
}
.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.bg-opaque {
    opacity: .5;
}
.bg-jason {
    background-image: url('/images/surfing-bg.jpg');
}
.bg-particles {
    background-image: url('/images/particles-bg.jpg');
    background-position: right;
    background-size: auto 100%;
}
.bg-lines {
    background-image: url('/images/lines-bg.jpg');
}

.bg-merch {
  background-image: url('/images/graffiti-bg.jpg');
  opacity: .05;
  pointer-events: none;
}
.flickity-prev-next-button.next {
    right: -40px;
}
.flickity-prev-next-button.previous {
    left: -40px;
}
.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 40%;
    height: 40%;
}
.flickity-prev-next-button {
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
}
.flickity-button {
    position: absolute;
    background: #141414;
    border: none;
    color: #fff;
}
.flickity-button:hover {
    background: #f99c1c;
    cursor: pointer;
}
.flickity-button:disabled {
    opacity: 1;
    cursor: auto;
    pointer-events: none;
}

canvas {
	position: absolute;
	top: 0; 
    left: 0;
	z-index: 1;
    width: 200% !important;
    height: 200% !important;
    pointer-events: none;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.product-single {
  margin-bottom: 40px;
  position: relative;
}

.product-description h2 {
  font-size: 1.35em;
}

.product-description h3 {
  font-size: 1.15em;
  font-family: inherit;
  font-weight: 300;
}

.product-description h4 {
  font-family: inherit;
  font-weight: 300;
  font-size: 1em;
  color: #f99c1c;
}

table {
  margin: 0 auto 20px;
  color: #fff;
  text-align: center;
}


video {

  object-fit: cover;

  width: 100vw;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;
  opacity: .5;

}
.contact-box {
    max-width: 700px;
}

.warlocks {
  z-index: 1;
  bottom: 0;
  right: 0;
}
.warlocks img {
  width: 20px;
  margin-left: 5px;
}
.text-small {
  font-size: .75em;
}



.glitch {
    position: relative;
    color: white;
    font-size: 4em;
    letter-spacing: .25em;
    /* Animation provies a slight random skew. Check bottom of doc
    for more information on how to random skew. */
    animation: glitch-skew 1s infinite linear alternate-reverse;
  }
  .glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    /* Creates an initial clip for our glitch. This works in
    a typical top,right,bottom,left fashion and creates a mask
    to only show a certain part of the glitch at a time. */
    clip: rect(44px, 450px, 56px, 0);
    /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
    with an alternating animation to keep things fresh. */
    animation: glitch-anim 5s infinite linear alternate-reverse;
  }
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
  }
  
  /* Creates an animation with 20 steaps. For each step, it calculates 
  a percentage for the specific step. It then generates a random clip
  box to be used for the random glitch effect. Also adds a very subtle
  skew to change the 'thickness' of the glitch.*/
  @keyframes glitch-anim {
    0% {
      clip: rect(48px, 9999px, 48px, 0);
      transform: skew(0.43deg);
    }
    5% {
      clip: rect(12px, 9999px, 27px, 0);
      transform: skew(0.31deg);
    }
    10% {
      clip: rect(47px, 9999px, 60px, 0);
      transform: skew(0.8deg);
    }
    15% {
      clip: rect(46px, 9999px, 14px, 0);
      transform: skew(0.37deg);
    }
    20% {
      clip: rect(79px, 9999px, 27px, 0);
      transform: skew(0.32deg);
    }
    25% {
      clip: rect(34px, 9999px, 54px, 0);
      transform: skew(1deg);
    }
    30% {
      clip: rect(38px, 9999px, 44px, 0);
      transform: skew(0.57deg);
    }
    35% {
      clip: rect(14px, 9999px, 3px, 0);
      transform: skew(0.02deg);
    }
    40% {
      clip: rect(5px, 9999px, 84px, 0);
      transform: skew(0.29deg);
    }
    45% {
      clip: rect(7px, 9999px, 9px, 0);
      transform: skew(0.18deg);
    }
    50% {
      clip: rect(22px, 9999px, 70px, 0);
      transform: skew(0.22deg);
    }
    55% {
      clip: rect(10px, 9999px, 37px, 0);
      transform: skew(0.92deg);
    }
    60% {
      clip: rect(99px, 9999px, 63px, 0);
      transform: skew(0.99deg);
    }
    65% {
      clip: rect(34px, 9999px, 47px, 0);
      transform: skew(0.37deg);
    }
    70% {
      clip: rect(75px, 9999px, 40px, 0);
      transform: skew(0.73deg);
    }
    75% {
      clip: rect(68px, 9999px, 9px, 0);
      transform: skew(0.58deg);
    }
    80% {
      clip: rect(49px, 9999px, 96px, 0);
      transform: skew(0.66deg);
    }
    85% {
      clip: rect(52px, 9999px, 84px, 0);
      transform: skew(0.77deg);
    }
    90% {
      clip: rect(71px, 9999px, 13px, 0);
      transform: skew(0.27deg);
    }
    95% {
      clip: rect(2px, 9999px, 86px, 0);
      transform: skew(0.05deg);
    }
    100% {
      clip: rect(93px, 9999px, 34px, 0);
      transform: skew(0.66deg);
    }
  }
  @keyframes glitch-anim2 {
    0% {
      clip: rect(75px, 9999px, 34px, 0);
      transform: skew(0.29deg);
    }
    5% {
      clip: rect(39px, 9999px, 43px, 0);
      transform: skew(0.84deg);
    }
    10% {
      clip: rect(24px, 9999px, 24px, 0);
      transform: skew(0.63deg);
    }
    15% {
      clip: rect(20px, 9999px, 2px, 0);
      transform: skew(0.09deg);
    }
    20% {
      clip: rect(10px, 9999px, 25px, 0);
      transform: skew(0.75deg);
    }
    25% {
      clip: rect(44px, 9999px, 17px, 0);
      transform: skew(0.77deg);
    }
    30% {
      clip: rect(69px, 9999px, 56px, 0);
      transform: skew(0.15deg);
    }
    35% {
      clip: rect(26px, 9999px, 73px, 0);
      transform: skew(0.86deg);
    }
    40% {
      clip: rect(76px, 9999px, 67px, 0);
      transform: skew(0.54deg);
    }
    45% {
      clip: rect(61px, 9999px, 29px, 0);
      transform: skew(0.9deg);
    }
    50% {
      clip: rect(40px, 9999px, 52px, 0);
      transform: skew(0.95deg);
    }
    55% {
      clip: rect(1px, 9999px, 71px, 0);
      transform: skew(1deg);
    }
    60% {
      clip: rect(12px, 9999px, 91px, 0);
      transform: skew(0.16deg);
    }
    65% {
      clip: rect(60px, 9999px, 82px, 0);
      transform: skew(0.14deg);
    }
    70% {
      clip: rect(45px, 9999px, 18px, 0);
      transform: skew(0.14deg);
    }
    75% {
      clip: rect(35px, 9999px, 27px, 0);
      transform: skew(0.22deg);
    }
    80% {
      clip: rect(65px, 9999px, 18px, 0);
      transform: skew(0.48deg);
    }
    85% {
      clip: rect(37px, 9999px, 72px, 0);
      transform: skew(0.28deg);
    }
    90% {
      clip: rect(36px, 9999px, 47px, 0);
      transform: skew(0.94deg);
    }
    95% {
      clip: rect(67px, 9999px, 80px, 0);
      transform: skew(0.54deg);
    }
    100% {
      clip: rect(89px, 9999px, 49px, 0);
      transform: skew(0.46deg);
    }
  }
  @keyframes glitch-skew {
    0% {
      transform: skew(0deg);
    }
    10% {
      transform: skew(-2deg);
    }
    20% {
      transform: skew(5deg);
    }
    30% {
      transform: skew(-3deg);
    }
    40% {
      transform: skew(-4deg);
    }
    50% {
      transform: skew(3deg);
    }
    60% {
      transform: skew(3deg);
    }
    70% {
      transform: skew(4deg);
    }
    80% {
      transform: skew(-4deg);
    }
    90% {
      transform: skew(-3deg);
    }
    100% {
      transform: skew(1deg);
    }
  }
  



@media screen and (max-width: 575px) {
    .hero {
      min-height: 750px;
    }
    .glitch {
        font-size: 1em;
    }
    .flickity-prev-next-button.next {
        right: -32px;
    }
    .flickity-prev-next-button.previous {
        left: -32px;
    }
}