/* CHECK OUT */

@keyframes loading {
	 0% {
		 cy: 10;
	}
	 25% {
		 cy: 3;
	}
	 50% {
		 cy: 10;
	}
}
 body {
	 -webkit-font-smoothing: antialiased;
}

/* Ordenar Productos */
#ordenar{
    position:absolute;
    right: 2em;
    float: right;
}

/* Menu Footer */

.sub-menu-footer {
  visibility: visible;
  opacity: 1;
  overflow-y: scroll;
  max-height: 30vh;
  background-color: ghostwhite;
}

/*Boton*/
.drop-button{
  background-color:  #8DEBF7;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/*Boton hover y focus*/
.drop-button:hover, drop-buttton:hover{
  background-color: #2EABAB;
}

/*Posicion del contenedor*/
.dropdown{
  position: relative;
  display: inline-block;
 }

/*submenu*/
.dropdown-content{
  display: none;
  position: absolute;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a{
  color: #207878;
  padding: 12px 16px;
  display: block;
}

.dropdown-content a:hover{
  background-color: #f1f1f1
}
.show {
  display: block;
}

 #canvas {
	 height: 100vh;
	 pointer-events: none;
	 position: fixed;
	 width: 100%;
	 z-index: 2;
}

 #checkout {
	 border: none;
	 color: #f4f7ff;
	 cursor: pointer;
	 font-family: 'Quicksand', sans-serif;
	 font-size: 18px;
	 font-weight: 500;
	 height: 40px;
	 left: 50%;
	 outline: none;
	 overflow: hidden;
	 padding: 5px 10px;
	 position: relative;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 -webkit-tap-highlight-color: transparent;
	 z-index: 1;
	 border-radius: 15px;
	 width: auto;
}
 #send::before {
	 background: #1f2335;
	 border-radius: 50px;
	 box-shadow: 0 2px 5px rgba(0, 0, 0, .4) inset;
	 content: '';
	 display: block;
	 height: 100%;
	 margin: 0 auto;
	 position: relative;
	 transition: width 0.2s cubic-bezier(0.39, 1.86, 0.64, 1) 0.3s;
	 width: 100%;
}
#checkout:hover {
  background-color: LightSkyBlue;
  transition: top 0.4s ease 600ms, opacity 0.3s linear 600ms;
}
 .ready .submitMessage svg {
	 opacity: 1;
	 top: 1px;
	 transition: top 0.4s ease 600ms, opacity 0.3s linear 600ms;
}
 .ready .submitMessage .button-text span {
	 top: -8px;
	 opacity: 1;
	 transition: all 0.2s ease calc(var(--dr) + 600ms);
}
 .loading::before {
	 transition: width 0.3s ease;
	 width: 80%;
}
 .loading .loadingMessage {
	 opacity: 1;
}
 .loading .loadingCircle {
	 animation-duration: 1s;
	 animation-iteration-count: infinite;
	 animation-name: loading;
	 cy: 10;
}
 .complete .submitMessage svg {
	 top: -30px;
	 transition: none;
}
 .complete .submitMessage .button-text span {
	 top: -8px;
	 transition: none;
}
 .complete .loadingMessage {
	 top: 80px;
}
 .complete .successMessage .button-text span {
	 left: 0;
	 opacity: 1;
	 transition: all 0.2s ease calc(var(--d) + 1000ms);
}
 .complete .successMessage svg {
	 stroke-dashoffset: 0;
	 transition: stroke-dashoffset 0.3s ease-in-out 1.4s;
}
.button-text {
	 vertical-align: super;
}
 .button-text span {
	 opacity: 0;
	 position: relative;
}
 .message {
	 width: 100%;
}
 .message svg {
	 display: inline-block;
	 fill: none;
	 margin-right: 5px;
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 stroke-width: 2;
}
 .submitMessage .button-text span {
	 top: 8px;
	 transition: all 0.2s ease var(--d);
}
 .submitMessage svg {
	 color: #5c86ff;
	 margin-left: -1px;
	 opacity: 0;
	 position: relative;
	 top: 30px;
	 transition: top 0.4s ease, opacity 0.3s linear;
	 width: 30px;
}
 .loadingMessage {
	 opacity: 0;
	 transition: opacity 0.3s linear 0.3s, top 0.4s cubic-bezier(0.22, 0, 0.41, -0.57);
}
 .loadingMessage svg {
	 fill: #5c86ff;
	 margin: 0;
	 width: 22px;
}
 .successMessage .button-text span {
	 left: 5px;
	 transition: all 0.2s ease var(--dr);
}
 .successMessage svg {
	 color: #5cffa1;
	 stroke-dasharray: 20;
	 stroke-dashoffset: 20;
	 transition: stroke-dashoffset 0.3s ease-in-out;
	 width: 14px;
}
 .loadingCircle:nth-child(2) {
	 animation-delay: 0.1s;
}
 .loadingCircle:nth-child(3) {
	 animation-delay: 0.2s;
}

.elegida{
    color: #333 !important;
    border-color: #797979;
    text-decoration: none;
    border-bottom: 1px solid #333;
}


/* CARRITO */

.cart-button {
  position: relative;
  width: 200px;
  height: 40px;
  border: 0;
  border-radius: 25px;
  background-color: #4834d4;
  outline: none;
  color:#fff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  margin: auto;
  margin-top:15px;
  display: block;
  box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 30%);
}
.cart-button:hover {
  background-color: #35269b;
  transform: scale(1.1);
}
.cart-button:active {
  transform: scale(.9);
}

.cart-button .fa-shopping-cart {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -10%;
  font-size: 2em;
  transform: translate(-50%,-50%);
}
.cart-button .fa-box {
  position: absolute;
  z-index: 3;
  top: -20%;
  left: 52%;
  font-size: 1.2em;
  transform: translate(-50%,-50%);
}
.cart-button span {
  position: relative;
  z-index: 3;
  top: 0%;
  font-size: 1em;
  color: white;
  font-family: 'Poppins-Medium';
}
.cart-button span.add-to-cart {
  opacity: 1;
}
.cart-button span.added {
  opacity: 0;
}

.add-to-cart {
  left: -12%;
}

.added {
  margin-left: -60%;
}

.cart-button.clicked .fa-shopping-cart {
  animation: cart 1.5s ease-in-out forwards;
}
.cart-button.clicked .fa-box {
  animation: box 1.5s ease-in-out forwards;
}
.cart-button.clicked span.add-to-cart {
  animation: txt1 1.5s ease-in-out forwards;
}
.cart-button.clicked span.added {
  animation: txt2 1.5s ease-in-out forwards;
}
@keyframes cart {
  0% {
    left: -10%;
  }
  40%, 60% {
    left: 50%;
  }
  100% {
    left: 110%;
  }
}
@keyframes box {
  0%, 40% {
    top: -20%;
  }
  60% {
    top: 40%;
    left: 52%;
  }
  100% {
    top: 40%;
    left: 112%;
  }
}
@keyframes txt1 {
  0% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}
@keyframes txt2 {
  0%, 80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@media (max-width: 767px) {
    #ordenar{
        position:relative;
        right: 0;
        left: 2em;
        float: none;
    }
}

@media (max-width: 575px) {
    #ordenar{
        position:relative;
        right: 0;
        left: 1em;
        float: none;
    }
}