.navbar {
    z-index: 100 !important;
}

.mainNav {
    position: fixed !important;
}
@media (min-width: 768px) { 
    .mainNav{
        position:absolute !important; 
    }
}

.navbar, .mobileNav, .mainFooter, .secondaryFooter, .btn-light, .btn-lg, .bg-dark, .btn-dark {
    background-color: #000000!important;
}

.nav .nav-link {
    text-transform: uppercase;
    color: white;
    background-color: transparent;
}

#mobileNavHiddenMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100 !important;
}

.menuButton {
  background-color: #343a40;
}

.closeButton {
  position: absolute;
  top: 1rem;
  right: 2rem;
}

#mobileNavHiddenMenu .p3, .bi {
    color: #f8f9fa;
    text-transform: uppercase;
    text-decoration: none;
}

.bi {
  transform: scale(200%);
}

.mobileNav {
    padding-top: 1rem !important;
}

.logo {
    height: 60px;
}

.menuButton {
    right: 0;
    height: auto;
}

.mobileTopSpacer {
    height: 68px !important;
    background-color: #212529;
}

.mainpage {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url("../media/mainpagesplash1.JPG");
    background-repeat: no-repeat;
    background-size:  150%; 
    background-position: center center;
    text-align: center;
    height: 100vh !important;
}

@media (min-width: 768px) { 
  .mainpage{
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url("../media/mainpagesplash2.jpg") !important; 
    background-size: cover;
  }
}

.mainpageContent {
    height: 70vh;
}

.contactpage {
    background-color: #343a40;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,1)), url("../media/banner1.jpg");
    background-repeat: no-repeat;
    background-position: top;
    
    text-align: center;
}

.nailPage {
    background-color: #343a40;
    background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("../media/backgroundtile.webp");
    background-repeat: repeat; 
    background-size: 50%;
    text-align: center;
}

@media (min-width: 768px) { 
  .nailPage{
    background-size: 40%;
  }
}

.spacer {
    padding-top: 5%;
    padding-bottom: 5%;
}

.mainFooter {
    position: fixed;
    bottom: 0; 
    width: 100vw;
}

.secondaryFooter {
    position: fixed;
    bottom: 0; 
    width: 100vw;
}

@media (min-width: 768px) { 
    .secondaryFooter{
        position:relative !important; 
    }
}

.link-row a {
    color: white;
}

/*GALLERY CSS*/

.galleryWrapper{
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    margin-top: 4rem;
  }
.galleryContainer{
    height: 400px;
    display: flex;
    flex-direction: nowrap;
    justify-content: start;
  }

.galleryImage{
    width: 80px;
    border-radius: .75rem;
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2rem;
    margin: 0 10px;
    display: flex;
    align-items: flex-end;
    transition: .6s cubic-bezier(.28, -0.03,0,0.99);
    box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
  }
  .galleryRow{
    color: white;
    display: flex;
    flex-direction: nowrap;
  }
  .galleryImage > .galleryRow > .galleryIcon{
    background: black;
    color: white;
    border-radius: 50%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
  }
  .galleryImage > .galleryRow > .galleryDescription{
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    height: 80px;
    width: 520px;
    opacity: 0;
    transform: translateY(30px);
    transition-delay: .3s;
    transition: all .3s ease;
  }
  .galleryDescription p{
    color: #ffffff;
    padding-top: 5px;
  
  }
  .galleryDescription h4{
    text-transform: uppercase;
  }
  input{
    display: none;
  }
  input:checked + label{
    width: 600px;
  }
  input:checked + label .description{
    opacity: 1 !important;
    transform: translateY(0) !important;
  
  }
  .galleryImage {
    background-position: center center;
  }
  .galleryImage[for="c1"]{
    background-image: url('../media/nail01.jpg');
  }
  .galleryImage[for="c2"]{
    background-image: url('../media/nail02.jpg');
  }
  .galleryImage[for="c3"]{
    background-image: url('../media/nail03.jpg');
  }
  .galleryImage[for="c4"]{
    background-image: url('../media/nail04.jpg');
  }
  .galleryImage[for="c5"]{
    background-image: url('../media/nail05.jpg');
  }
  .galleryImage[for="c6"]{
    background-image: url('../media/nail06.jpg');
  }
  .galleryImage[for="c7"]{
    background-image: url('../media/nail07.jpg');
  }
  .galleryImage[for="c8"]{
    background-image: url('../media/nail08.jpg');
  }

  .productCards {
    text-transform: uppercase;
  }