/******************************* 
Web Design by © 2023 Boyan Donev 
www.boyans.com 
*******************************/

body {
    position: relative;
    font-size: 1.3em;
    font-family: 'Nunito Sans', sans-serif;
    color: #000000;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Pattaya', sans-serif;
    color: #010355;
}
section {
    padding-top: 80px;
}

/* Navbar */
.navbar {
    background-image: linear-gradient(rgba(70, 130, 180, 0.5), rgba(178, 34, 34, 0.5));
}
.navbar-brand {
    font-family: 'Pattaya', sans-serif; 
    font-size: 1.4em;    
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 25%;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
      .carousel-inner,
      .carousel-item,
      .carousel-item.active {
        height: 100vh;
      }

.carousel-slide-1 {
    background: url("../../images/carousel-1.webp") top right no-repeat;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;
    background-size: cover;
}
.carousel-slide-2 {
    background: url("../../images/carousel-2.webp") center left no-repeat;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;
    background-size: cover;
}
.carousel-slide-3 {
    background: url("../../images/carousel-3.webp") center center no-repeat;
    background-color: rgba(0,0,0,0.5);
    background-blend-mode: multiply;
    background-size: cover;
}

/* Carousel captions styling */
.band-name {
    font-family: 'Pattaya', sans-serif;
}
.fat-text {
    font-size: 10vw;
}
.sparse-text {
    letter-spacing: 0.5vw;
}
.shiny-text {
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px #032DB4;
}

/* Call to action divider */
.call-to-action {
    height: 350px;
    box-shadow: 10px 10px 50px black inset;
    text-shadow: 10px 10px 50px black;
    /* margin-top: 50px;*/
}
.call-to-action h3 {
    color: #ffffff;
    font-size: 7vw;
}
.call-to-action button {
    box-shadow: 10px 10px 50px black;
}



/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* Video play button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff0000;
  font-size: 5em;
  cursor: pointer;
  text-align: center;
}

.play-btn:hover, .play-btn:active {
    color:#1A00FF;
}

/* Gallery */

#gallery figure {
    background: #ffffff;
    max-width: 30%;
    border: 3px solid #ffffff;
    box-shadow: 5px 20px 30px 0px rgba(0,0,0,0.5);
    float: left;
    margin-left: -50px;
    margin-top: -50px;
    transition: ease-in-out 0.5s;
}
#gallery figure:hover  {
    transition: ease-in-out 0.5s;
    transform: translateY(-20%);
}
#gallery figure:active  {
    transform: translateY(-20%);
}
figure.gallery-r {
    transform: rotate(5deg);
}
figure.gallery-l {
    transform: rotate(-5deg);
}
figure.gallery-x {
    transform: rotate(-45deg);
}
figure.gallery-xy {
    transform: rotate(45deg);
}
/* Gallery Mobile users */
@media (min-width: 200px) {
  .gallery-wrapper {
    padding-left: 22.5vw;
    max-width: 100%;
  }
    #gallery figure {
    min-width: 45vw;    
    }
}
@media (min-width: 768px) {
  .gallery-wrapper {
    padding-left: 15vw;
    max-width: 100%;
  }
    #gallery figure {
    min-width: 40%;
    }
}
@media (min-width: 992px) {
  .gallery-wrapper {
    padding-left: 15vw;
    max-width: 100%;
  }
    #gallery figure {
    min-width: 35%;
    }
}
@media (min-width: 1400px) {
  .gallery-wrapper {
    padding-left: 10vw;
    max-width: 100%;
  }
    #gallery figure {
    min-width: 35%;
    }
}



/* Custom Shadows */


.fat-shadow {
    box-shadow: 0 20px 16px -6px #777;
}
.fat-black-shadow {
    box-shadow: 0 0 10px 10px #000;
}
.thin-shadow {
    box-shadow: 0 10px 8px -3px #777;
}
.text-fat-shadow {
    text-shadow: 5px 5px 15px #777;
}
.text-thin-shadow {
    text-shadow: 3px 3px 10px #777;
}