.infoButton   {
  border-radius: 0;
}

.btn-outline-secondary  {
  border-radius: 0;
}

.infoButtonContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.buyButton  {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: auto;
}


body{
  padding-top: 50px;
 background-color: rgb(250, 252, 255); 


}

#jumbotron {
  color: white;
  background-color: rgb(11, 0, 1) !important;

}


#about  {
  padding-top: 50px;
  padding-bottom: 50px;
  
}


#contacto  {

  padding-top: 24px;
  padding-bottom: 48px;

}
.card-img-top {
  border-radius: 0;
  
  
object-fit: cover;
}

.my-modal {

  width: 100%;

 
}





.my-modal .modal-content {
 color: #2d1010;
 


}

.modal-content  {
   border-radius: 0;

   

}

.productPhoto{
  margin: 0;
}
.card   {
  border-radius: 0;

  overflow: auto;
  font-weight: 200;

}

.card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  /* transform: scale(1.2) */
  transition: box-shadow 0.2s ease-in-out;
}


@media (max-width: 576px) {
  .card {
    box-shadow: 0 12px 15px rgba(0,0,0,0.3)
  }
  .card:hover {
    transform: none;
  }
}



footer  {
  background-color: rgb(39, 0, 2) !important;
  color: aliceblue;

}

.modal-footer {

  background-color: rgb(39, 0, 2) !important;
  border-radius: 0;
  color: aliceblue;
}


.logo   {
  margin-left: 12px;
  margin-right: 12px;
}

.navbar  {

  background-color: rgb(10, 0, 1) !important;
  opacity: 93%;
  padding: none;
}

.productPhoto {
  height: 320px;
  width: 320px;
}

h1 {
  font-size: 3rem;
  padding-bottom: 24px;
}



h2 {
  font-size: 3rem;
  padding-bottom: 24px;
  font-weight: 200;
}

.nav-link {
  color: black;
  font-weight: 200;
  transition: color 2s ease;
  &:hover {
    color: grey;
  }
  &:focus {
    color: rgb(217, 20, 20);
  }
  animation: navElemnts ;
  animation-fill-mode: forwards;
 
}




.navbar-brand {
  color: white;
  transition: color 2s ease;
  &:hover {
    color: grey;
  }
  &:focus {
    color: rgb(217, 20, 20);
  }
}

#products {
  padding-top: 50px;
  padding-bottom: 50px;

}

#about  {
  font-size: 1.5rem;
  padding-bottom: 24px;
}

.fw-thin {
  font-weight: 100;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}
.navbar-toggler {
  border: none;
  background-color: transparent;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease forwards;

}

.lead {
  font-size: 1.25rem;
  font-weight: 200;
  color: white;
  animation-delay: 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    transform:scale3d(0.9, 0.9, 0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes navElemnts {
  0%{
    opacity: 0;
    transform: translateX(300px);
    color: white;

  }

  50% {
    opacity: 0.5;
    transform: translateX(-20px);
    color: white;
  }
  75% {
    opacity: 0.75;
    transform: translateX(10px);
    color: white;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    color: white;
  }
}[]