html {
  font-size: 62.5%;
  display: flex;
  justify-content: center;
}

html, body {
  background-color: #FFF3EE;
}

body {
  margin: 0;
  width: 100%;
  font-size: 1.4rem;
  font-family: anonymous-pro, monospace;
  font-weight: 400;
  color: #A49475;
}

body, section, form, footer, footer > div {
  display: flex;
  flex-direction: column;         
  align-items: center;    
}

header {
  position: absolute;
  top: 5.4rem;
  display: flex;        
  justify-content: center;    
  align-items: flex-end;
}

header, main, footer, footer > div {
  width: 100%;
}

header h1 {
  margin: 0;
}

header img {  
  /* Logo is nooit groter dan 71.17% van het scherm */
  width: 71.17vw;
  
  /* Maar stopt bij 440px breedte op grotere schermen */
  max-width: 44rem;       
}

main {
  /* Fallback */  
  background-image: url("../img/firstrodeo/firstrodeo_bg_mobile.jpg");

  /* Prefixed */
  background-image: -webkit-image-set(
    url("../img/firstrodeo/firstrodeo_bg_mobile.webp") type("image/webp"),
    url("../img/firstrodeo/firstrodeo_bg_mobile.jpg") type("image/jpeg")
  );

  background-image: image-set(
    url("../img/firstrodeo/firstrodeo_bg_mobile.webp") type("image/webp"),
    url("../img/firstrodeo/firstrodeo_bg_mobile.jpg") type("image/jpeg")
  );

  background-size: contain;
  background-position: center 0;
  background-repeat: no-repeat;
  background-color: #FFF3EE;
}

h2 {
  font-family: "din-2014", sans-serif;
  font-weight: 800;
  font-size: 2.7rem;
  letter-spacing: -1px;
  -webkit-text-stroke: 1px #A49475;
  text-transform: uppercase;
  color: #A49475;
  margin: 0 0 3.2rem;
}

h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1em;
}

hr {
  width: 23.9rem;
  border: 1px solid #A49475;
  border-width: 1px 0 0;
  margin: 0 0 0.7rem;
}

a:link, a:visited {
  color: inherit;  
}

a:hover, a:active {
  color: #060200;
}

a.button:link, a.button:visited {
  background: #F7A21B;
  color: #000;
  font-family: "din-2014", sans-serif;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  border: 0.2rem solid #F7A21B;
  border-radius: 0.3rem;
}

a.button.red:link, a.button.red:visited {
  background: #C61515;
  color: #FFF;
}

a.button:hover, a.button:active {
  background: #FFB61B;
  border-color: #FFB61B;
}

a.button.red:hover, a.button.red:active {
  background: #D61915;
  border-color: #D61915;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

#presave-stream {
  position: relative;
  box-sizing: border-box;
  justify-content: flex-end;
  height: 178vw; /* oude browser fallback */
}

@supports (aspect-ratio: 1 / 1.78) {
  #presave-stream {
    height: unset;
    aspect-ratio: 1 / 1.78; /* mobile ratio */
  }
}



#presave-stream h2, #presave-stream hr, #presave-stream img, #release-date, #presave-stream ul {
  position: absolute;
}

#presave-stream h2, #release-date {
  top: 17.9%;
  font-weight: 600;
  font-family: anonymous-pro, monospace;
  font-size: clamp(2.5rem, 6.36vw, 3.5rem);
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  text-transform: uppercase;
  color: #FFF3EE; 
}

#first-rodeo-handwr {    
    top: 24%;
    width: clamp(10rem, 50vw, 29rem);
}

#release-date {
  top: 33%;
}

#first-rodeo-prebuttons {
  top: 43.4%;
  display: flex;
}

#first-rodeo-prebuttons li:first-child a {
  margin-right: 1.25em;
}

#presave-stream a {  
  padding: 0.75em 1em;
  font-size: clamp(1.2rem, 2.68vw, 1.4rem); /* geldt alleen voor portrait */
  line-height: 1;
}

#presave-stream #album-cover {
  top: 55.5%;
  width: 21.5rem;
  width: 54.7vw;
  max-width: 24rem;
  box-shadow: 2px 4px 4px rgb(0 0 0 / 25%), 2px 8px 8px rgb(0 0 0 / 25%), 2px 16px 16px rgb(0 0 0 / 25%), 2px 32px 32px rgb(0 0 0 / 25%);
  border: 1px solid rgb(0 0 0 / 40%);
}

#video {  
  margin-bottom: 5.5rem;
  position: relative; 
  border: 1rem solid #FFF3EE;
}

#video hr {
  top: 3.8rem;
  z-index: 2;
  margin-bottom: 0;
  border-color: #FFF;
}

#video h2 {   
  top: 4.1rem;
  z-index: 2;
  margin-bottom: 0;
  -webkit-text-stroke: 1px #FFF3EE;
  color: #FFF3EE; 
  text-align: center;
}

#video ul {
  width: 100%;
}

#video li {
  position: relative;
  padding: 6.2rem 0 8.8rem;
  display: flex;
  justify-content: center;
  background: #000;
}

#video video {
  width: 100%;
  max-width: 96rem;
}

#video hr, #video h2, #video .opacity-overlay, #video img, #video .play-button {
  position: absolute;
}

#video img, #video svg {
  /* Safari fixes */
  contain: paint;
  display: block;
  will-change: opacity, transform;
}

.lyrics-overlay {
  bottom: -17.00%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 70.34vw;
  max-width: 31.3rem;
  z-index: 2;
}

.play-button {
  bottom: 47%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 5.3rem;
  z-index: 3;
}

.video-container {
  position: relative;
}

.opacity-overlay {
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 30%);
  
  /* Safari fixes */
  contain: paint; 
  will-change: opacity, transform;
}

/* Alleen voor desktop */
 .video-container a:hover > .opacity-overlay {
  background-color: rgb(0 0 0 / 15%);

}

.slide-safehaven .opacity-overlay {
  background-color: rgb(0 0 0 / 50%);
}

:root {
  --plyr-color-main: #F0A100;
}

.glide__arrows {
  display: none;
}

.glide__arrows button {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 1.5rem));
  background: none;
  border: 0;
  padding: 0;
  color: #FFF;
  cursor: pointer;
  opacity: 0.5;
  width: 3.2rem;
  height: 5.6rem;
}

.glide__arrows button:hover {
  opacity: 1;
}

.glide__arrows svg {
  width: 3.2rem; 
}

.slide-icbw .lyrics-overlay, .slide-safehaven .lyrics-overlay {
  width: 85.36vw;
  bottom: -16.5%;
  max-width: 37.9rem;
 
}

.slide-icbw .play-button {
  bottom: 50%;
}

.slide-lbl .lyrics-overlay {
  width: 78vw;
  bottom: -8.0%;
  max-width: 35.8rem;
 
}

.slide-safehaven .lyrics-overlay {
  bottom: -26.5%;
}

.slide-stay .lyrics-overlay {
  width: 60.79vw;
  bottom: -12.0%;
  max-width: 27.9rem;

}



#merch {
  margin-bottom: 10.8rem;
}

#merch ul {
  display: flex;
  align-items: center;
}

#merch li {
  display: none;
}

#merch li:nth-child(5) {
  display: block;
}

#merch li a {
  display: block;
}


#merch img {
  width: 36.3rem;
}

#merch .haze {
  margin-top: -300px;
  width: 100%;
  height: 32rem;
  background: linear-gradient(0deg, #FFF3EE 20.83%, rgb(255 243 238 / 0%) 90.77%);
  pointer-events: none;
}

#merch a.button {
  margin-top: -2rem;
  padding: 0.8em 1.25em;
  font-size: 1.2rem;
}

#tourdates table {
  border-collapse: collapse;
  width: 83.2vw;
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 7.6rem;
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) td, .only-row td {
  background: rgb(164 148 117 / 10%);
}

td {
  box-sizing: border-box;
  padding: 1rem;
  height: 5rem;
  border-bottom: 0.1rem solid #FCDCE1;
}

#tourdates .only-row td {
  border-top: 0.1rem solid #FCDCE1;
  border-bottom: 0.1rem solid #FCDCE1;
}

.col-date {
    text-align: right;
    text-wrap: nowrap;
}

.col-venue {
    text-align: center;
    width: 22rem;
    text-wrap: balance;
}

.col-venue span {
  text-wrap: nowrap;
}

.col-tickets {
    text-align: left;
}

.col-tickets a.button, #tourdates .sold-out {
  font-weight: 600;
  font-size: 1.1rem;
}

.col-tickets a, .col-tickets span {
  display: block;
  width: 9.2rem;
  text-align: center;
}

.col-tickets a.button {
  padding: 0.3rem;
  border: 0.3rem solid transparent;
  border-radius: 0.3rem; 
}

#tourdates .sold-out {
  color: #C61515;
  font-size: 1.8rem;
  text-decoration: line-through;
  width: 9.8rem;
}

#tourdates .sold-out, #tourdates .on-sale-soon {
  padding: 0 0.3rem;
}

.col-tickets .on-sale-soon {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2D437F;
}

form {
  display: none;
}

iframe#umg-form {
  width: 21rem;
  border: 0;
  min-height: 28.3rem;
  margin-bottom: 4.7rem;
  overflow: hidden;
}

p {
  margin: 0;
}

#social-links ul {
  display: flex;
  margin: 0 0 7rem;
  padding: 0;  
}

#social-links li {
  list-style: none;
  margin-right: 1.66rem;
}

#social-links li:last-child {
  margin-right: 0;
}

#social-links svg {
  width: 2.5rem;
  height: 2.5rem;
}

#social-x svg, #social-tt svg, #social-sc svg {
  width: 2.6rem;
}

#social-webshop svg {
  fill: #F7A21B;
  margin-left: -0.1rem;
}

#social-links a:hover path, #social-links a:active path {
  fill: #060200;
}

footer {
  /* Fallback */  
  background-image: url("../img/presave/backroad_mobile.jpg");

  /* Prefixed */
  background-image: -webkit-image-set(
    url("../img/presave/backroad_mobile.webp") type("image/webp"),
    url("../img/presave/backroad_mobile.jpg") type("image/jpeg")
  );

  background-image: image-set(
    url("../img/presave/backroad_mobile.webp") type("image/webp"),
    url("../img/presave/backroad_mobile.jpg") type("image/jpeg")
  );

  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

footer > div {
  max-width: 86.8vw;
  padding: 0 1.8rem;
  box-sizing: border-box;
  border-top: 1px solid #A49475;
  text-align: center;
}

#contact-details {
  margin: 1.9rem 0 1.7rem;
}

#contact-details div:nth-child(2) {
  margin-left: -3.47%; /* center fix */
}

#contact-details p {
  margin-bottom: 4rem;
}

#copyright {
  font-weight: 700;
}

#disclaimer {
  margin-top: 1em;
}

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


@media (orientation: portrait) {
  footer {
    padding-bottom: 48%;
  }

  #contact-details, #copyright, #disclaimer{
    max-width: 60.8vw;
  }
}

@media (orientation: portrait) and (max-width: 445px) {
  .col-date {
    text-align: center;
    text-wrap: wrap;
  }

  .col-date .date-month {
    text-wrap: nowrap;
  }

  .col-date .comma {
    display: none;
  }

  #tourdates table {
    width: 86.8vw;
  }
}

@media (orientation: portrait) and (min-width: 445.01px) {
  #video .play-button {
    bottom: 11rem;
  }

  #video .lyrics-overlay {
    bottom: -4.1rem;
  }

  #video .slide-lbl .lyrics-overlay {
    bottom: -2.1rem;
  }

  #video .slide-safehaven .lyrics-overlay {
    bottom: -2.1rem;
  }

  #video .slide-stay .lyrics-overlay {
    bottom: -3rem;
  }
}

@media (orientation: portrait) and (min-width: 550px) {
  #video .play-button {
    top: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
  }
}

@media (orientation: landscape) and (max-width: 650px) {
  footer {
    padding-bottom: 48%;
  }
}

/* Presave-stream aspect ratio alvast naar 3:4 bij tablets zoals Nexus */
@media (orientation: portrait) and (min-width: 600px) {
  #presave-stream {
    height: 133.333vw; /* oude browser fallback */
  }

  @supports (aspect-ratio: 3 / 4) {
    #presave-stream {
      height: unset;
      aspect-ratio: 3 / 4; 
    }
  }
}

/* Tablets in portrait mode */
@media (orientation: portrait) and (min-width: 768px) {   
  #presave-stream h2, #release-date {
    font-size: clamp(2.5rem, 6.36vw, 4.0rem);
  }

  #first-rodeo-handwr {
    width: clamp(10rem, 50vw, 29rem);
  }

  #presave-stream #album-cover {
    top: 53.25%;
    max-width: 34rem;
  }
}

/* Pro tablets in portrait mode */
@media (orientation: portrait) and (min-width: 1024px) {
  header img {
    max-width: 64rem;
  }

  #presave-stream h2, #release-date {
    font-size: clamp(2.5rem, 6.36vw, 5.5rem);
  }


  #first-rodeo-handwr {
    width: clamp(10rem, 50vw, 39rem);
  }

  #presave-stream a {
    font-size: clamp(1.2rem, 2.68vw, 2rem);
  }

  #presave-stream #album-cover {  
    max-width: 50rem;
  }
}


@media (orientation: landscape) {
  header img { 
    max-width: 28rem;
  }

  .play-button {
    width: 6.6rem;
  }

  #video .play-button {
    top: 50%;
    transform: translate(-50%, calc(-50% - 0.3rem));
    bottom: auto;
  }

  #video .lyrics-overlay {
    bottom: 8%;
  }

  #video .slide-lbl .lyrics-overlay {
    bottom: 13%;
  }

  #video .slide-stay .lyrics-overlay {
    bottom: 11%;
  }


  #social-links ul {
    margin-bottom: 5.5rem;
  }
}

/* Kleine tablets en smartphones in landscape orientation */
@media (orientation: landscape) and (min-width: 650.01px) {
  body {
    max-width: 1440px; 
  }

  
  main {
    /* Fallback */  
    background-image: url("../img/firstrodeo/firstrodeo_bg_fullsize.jpg");

    /* Prefixed */
    background-image: -webkit-image-set(
      url("../img/firstrodeo/firstrodeo_bg_fullsize.webp") type("image/webp"),
      url("../img/firstrodeo/firstrodeo_bg_fullsize.jpg") type("image/jpeg")
    );

    background-image: image-set(
      url("../img/firstrodeo/firstrodeo_bg_fullsize.webp") type("image/webp"),
      url("../img/firstrodeo/firstrodeo_bg_fullsize.jpg") type("image/jpeg")
    );
  }


  #presave-stream {
    height: 53.68vw; /* oude browser fallback */
  
  }

  @supports (aspect-ratio: 1440 / 773) {
    #presave-stream {
      height: unset;
      aspect-ratio: 1440 / 773; 
    }
  }
  



  #presave-stream h2, #release-date {
    top: 32.5%;
    font-size: 2.5rem;
  }

  #presave-stream img {
    top: 42.1%;
    width: clamp(10rem, 50vw, 20rem);
  }

#first-rodeo-handwr {
    max-width: 28.3rem; 
  }
 

  #release-date {
    top: 60%;
  }

  #first-rodeo-prebuttons {
    top: 77.00%;
  }

  #presave-stream a {
    border-width: 0.3rem;
    font-size: 1.2rem;
  }

  #presave-stream #album-cover {
      display: none;
  }
 
  #contact-details, #copyright, #disclaimer {
    max-width: 86.8vw;
  }

  footer {    
    /* Fallback */  
    background-image: url("../img/presave/backroad_fullsize.jpg");

    /* Prefixed */
    background-image: -webkit-image-set(
      url("../img/presave/backroad_fullsize.webp") type("image/webp"),
      url("../img/presave/backroad_fullsize.jpg") type("image/jpeg")
    );

    background-image: image-set(
      url("../img/presave/backroad_fullsize.webp") type("image/webp"),
      url("../img/presave/backroad_fullsize.jpg") type("image/jpeg")
    );

    padding: 0 1.8rem;
    box-sizing: border-box;
    padding-bottom: 51%;
  }
  
  #contact-details {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5em;
  }

  #contact-details div:nth-child(2) {
    margin-left: -3.47%; /* center fix */
  }

  #contact-details p {
    margin-bottom: 0;
  }

  #copyright {
    width: 100%;
    margin-top: 1rem;
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (any-hover: hover) {
  .glide__arrows {
    display: block;
  }
}   


/* Normale tablets in landscape orientation */


@media (orientation: landscape) and (min-width: 1024px) {
#presave-stream h2, #release-date {
    top: 18.89%;
    font-size: 2.5rem;
  }

  #presave-stream img {
    top: 27.1%;
    width: clamp(10rem, 50vw, 20rem);
  }

#first-rodeo-handwr {
    max-width: 28.3rem; 
  }
 

  #release-date {
    top: 39.65%;
  }

  #first-rodeo-prebuttons {
    top: 50.97%;
  }

  #presave-stream #album-cover {
    display: block;
    top: 62%;
    width: 18rem;
  }


  .glide__arrow--left {
    left: calc(((100vw - 980px) / 4) - 20px);
  }

  .glide__arrow--right {
    right: calc(((100vw - 980px) / 4) - 20px);
  }
}

/* Pak alle laptops vanaf 1280 breed al mee */
@media (orientation: landscape) and (min-width: 1280px) {
  header img {
    max-width: 34rem;
  }

  #presave-stream h2, #release-date {
    top: 17.1%;
    font-size: 3.2rem;
  }

  #presave-stream img {
    top: 23.5%;
    width: 23rem;
  }

  #release-date {
    top: 33.15%;
  }
   
  #first-rodeo-prebuttons {
    top: 45.3%;
  }

  #presave-stream a {
    font-size: clamp(1.2rem, 2.68vw, 1.4rem); 
  }

  #presave-stream #album-cover {
    top: 54.5%;
    width: 24rem;
  }

  hr, footer > div {
    max-width: 125rem;
  }

  #tourdates table {
    max-width: 121.4rem;
  }

  .glide__arrow--left {
    left: 9.4rem;
  }

  .glide__arrow--right {
    right: 9.4rem;
  }
}  


@media (orientation: landscape) and (min-width: 1440px) and (min-height: 900px) {
    #presave-stream #album-cover {
      width: 25rem;
      top: 61%;
    }
}

@media (min-width: 600.01px) and (max-width: 800px) {
  #merch li:last-child {
    display: block;
    margin-left: -19.6rem;
  }
}

@media (min-width: 800.01px) and (max-width: 1000px) {
  #merch li:nth-child(4), #merch li:last-child {
    display: block;
    margin-left: -19.6rem;
  }

  #merch li:nth-child(4) {
    margin-left: 0;
  }

  #merch li:nth-child(5) {
    margin-left: -19.6rem;
  }
}

@media (min-width: 1000.01px) and (max-width: 1200px) {
  #merch li:nth-child(3), #merch li:nth-child(4), #merch li:nth-child(5), #merch li:last-child {
    display: block;
    margin-left: -19.6rem;
  }

  #merch li:nth-child(3) {
    margin-left: 0;
  }
}

@media (min-width: 1200.01px) and (max-width: 1400px) {
  #merch li:nth-child(2), #merch li:nth-child(3), #merch li:nth-child(4), #merch li:nth-child(5), #merch li:last-child {
    display: block;
    margin-left: -19.6rem;
  }

  #merch li:nth-child(2) {
    margin-left: 0;
  }
}

@media (min-width: 1400.01px) {
  #merch ul li {
    display: block;
    margin-left: -19.6rem;
  }

  #merch li:nth-child(1) {
    margin-left: 0;
  }
}

@media (min-width: 600.01px) {
  #merch a.button {
    margin-top: -7.9rem;
  }
}