/* #0176d4 (dark blue)
#fffde3 (furry white) 
#ccc (text color)
#00C4EB (baby blue) 
#f7f09f (yellow)
#3e38e4 (spot colors) */

* {
}
/*outline: 1px solid limegreen !important;*/

body {
    background-color: #f7f09f;
}

h1 {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 800; 
}

h2 {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 700; 
}

p {
    font-family: "Cabin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

li {
    font-family: "Cabin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

a {
    font-family: "Cabin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.card-img-top {
    height: 400px;
}

.s-navbar-bg {
    background-color: #fffde3;
}

.s-navbar-image {
    max-height: 64px;
    max-width: 64px;
    padding-right: 4px;
}

.s-navbar-button-container {
    list-style: none;
    padding-right: 12px;
}

.s-navbar-button {
   color: #fff;
   background-color: #00C4EB;
   font-weight: 600;
}

.s-navbar-button:hover {
    color: #fff; 
    background-color: #0176d4;
}

.s-main-bg {
    background-color: #f7f09f;
}

.s-secondary-bg {
    background-color: #0176d4;
}
.hero {
    width: 100%;
    min-height: 70vh;
    position: relative;
    align-items: center;
}
.hero .hero-waves {
    display: block;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
}
.hero .wave1 {
    animation: moveforever1 10s linear infinite;
    animation-delay: -2s;
    opacity: 1;
    fill: #00C4EB;
}

@keyframes moveforever1 {
    0% {
        transform: translate(85px, 0%);
    }
    100% {
        transform: translate(-90px, 0%);
    }
}

.hero .wave2 use {
    animation: moveforever2 8s linear infinite;
    animation-delay: -2s;
    fill: #3e38e4;
    opacity: 1;
}

@keyframes moveforever2 {
    0% {
        transform: translate(-90px, 0%);
    }
    100% {
        transform: translate(85px, 0%);
    }
}

.hero .wave3 use {
    animation: moveforever3 6s linear infinite;
    animation-delay: -2s;
    fill: #0176d4;
}

@keyframes moveforever3 {
    0% {
        transform: translate(-90px, 0%);
    }
    100% {
        transform: translate(85px, 0%);
    }
}

.margin-auto {
    margin-left:auto; 
    margin-right:auto;
}

@media (min-width: 320px) and (max-width: 480px) {
  .hero-items {
    flex-direction: column-reverse;
  }
  .hero-items-section-1 {
    margin-left: 0!important;
    padding-top: 12px;
  }

  .hero-items-section-1 img{
    min-height: 500px!important;
  }
  .mobile-hero-container-1 {
    width: 90%;
  }
  .mobile-hero-container-2 {
    width: 70%;
    margin-bottom: 12px;
    margin-top: 12px;
    background-color: #00C4EB;
    border-radius: 8px;
  }
  .s-main-bg {
    padding-bottom: 96px;
    padding-top: 48px;
  }
  .mobile-footer {
    flex-direction: column-reverse;
    padding-bottom: 16px;
  }
  .mobile-footer-container-1 {
    width: 90%;
  }
  .mobile-footer-container-2 {
    width: 70%;
    margin-bottom: 12px;
    margin-top: 12px;
    background-color: #00C4EB;
    border-radius: 8px;
  }
}
.album-header {
    color: #fffde3;
    font-weight: 600;
}

.album-text {
    color: #ccc;
    font-weight: 600;
}

.s-footer-button {
    color: #000;
    background-color: #f7f09f;
    font-weight: 600;
    margin-bottom: 12px;
}

.s-footer-button:hover {
    color: #000; 
    background-color: #fffde3;
}

.final-footer-cta {
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 12px;
}
.final-footer-cta h2{
    padding-left: 4px;
    font-weight: 600; 
    color: #fff;
}

.final-footer-cta p{
    padding-left: 4px;
    color: #ccc;
}

.montserrat-alternates-thin {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .montserrat-alternates-extralight {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .montserrat-alternates-light {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .montserrat-alternates-regular {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .montserrat-alternates-medium {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .montserrat-alternates-semibold {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .montserrat-alternates-bold {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .montserrat-alternates-extrabold {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .montserrat-alternates-black {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .montserrat-alternates-thin-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .montserrat-alternates-extralight-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .montserrat-alternates-light-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .montserrat-alternates-regular-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .montserrat-alternates-medium-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .montserrat-alternates-semibold-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .montserrat-alternates-bold-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .montserrat-alternates-extrabold-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .montserrat-alternates-black-italic {
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  .cabin-font-bold {
    font-family: "Cabin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }