a {
  text-decoration: none;
}

/* use the variables */
.main-header {
  background-color: #2ad5eb;
}

.menu-left {
  background-color: #b2ad7f;
}

.menu-right {
  background-color: #878f99;
}

.heroWorkingScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/working_so_hard.jpg);
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

.heroIndexScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_kiro.jpg);
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

.heroProductsScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_productos.jpg);
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

.heroNosotrosScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_bebas.jpg);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.heroDistribuidoresScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_sucursales.png);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.heroContactoScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.76), rgba(12, 12, 12, 0.76)), url(../images/backgrounds/bg_sucursales.png);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.heroAmbassadorScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg1_ash.jpg);
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

.heroThanksScreen {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_thanks.jpeg);
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  background-attachment: fixed;
}

.heroTermsScreen {
  background: linear-gradient(rgba(179, 178, 178, 0.274), rgba(179, 178, 178, 0.274));
  width: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 150px;
}

.subHeroTermsScreen {
  background: linear-gradient(rgba(255, 255, 255, 0.274), rgba(255, 251, 251, 0.274));
  width: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding-bottom: 15px;
}

.mainText {
  height: 80vh;
  width: 80%;
  display: flex;
  justify-content: start;
  align-items: center;
}

/*
* Product Section
*/
.productSection {
  background: linear-gradient(rgba(12, 12, 12, 0.479), rgba(12, 12, 12, 0.479)), url(../images/backgrounds/bg_productos.jpg);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/**
* Buttons Section
*/
.mpk_button {
  margin: 0 2px 10px 0;
  color: white;
  background-color: #529e91;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
}
.mpk_button:hover {
  color: white;
  background-color: gray;
  border-color: rgb(176, 231, 204);
  border-width: 5px;
}

.mpk_button_primary:enabled {
  margin: 0 2px 10px 0;
  color: white;
  background-color: #529e91;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
}
.mpk_button_primary:enabled:hover {
  color: white;
  background-color: gray;
  border-color: rgb(176, 231, 204);
  border-width: 5px;
}

.mpk_button_primary:disabled {
  margin: 0 2px 10px 0;
  color: white;
  background-color: #878f99;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
  opacity: 0.5;
}

.mpk_button_secondary:enabled {
  margin: 0 2px 10px 0;
  color: white;
  background-color: blueviolet;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
}
.mpk_button_secondary:enabled:hover {
  color: white;
  background-color: gray;
  border-color: rgb(176, 231, 204);
  border-width: 5px;
}

.mpk_button_secondary:disabled {
  margin: 0 2px 10px 0;
  color: white;
  background-color: blueviolet;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
  opacity: 0.5;
}

.btnSection {
  text-align: center;
  padding-bottom: 15px;
}

.mpk_button_close:enabled {
  margin: 0 2px 10px 0;
  color: white;
  background-color: #878f99;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
}
.mpk_button_close:enabled:hover {
  color: white;
  background-color: gray;
  border-color: rgb(176, 231, 204);
  border-width: 5px;
}

.btnSection {
  text-align: center;
  padding-bottom: 15px;
}

/**
*   Network Section
*/
.facebok_icon {
  color: #529e91;
}

.instagram_icon {
  color: blueviolet;
}

.whats_app_icon {
  color: #10b90a;
}

.tiktok_icon {
  color: #4f6e58;
}

.email_icon {
  color: #2ad5eb;
}

/**
* Image Controllers
*/
.mpk_img_size {
  width: 500px;
  height: 500px;
}

.mpk_img_nosotros {
  width: 250px;
  height: 250px;
}

/**
* Configuration Section
*/
.section_padding {
  padding-top: 90px;
}

.bg_dark {
  background-color: #212529;
}
.bg_dark div {
  background-color: #212529;
}

.bg_gray {
  background-color: #f0f0f0;
}
.bg_gray div {
  background-color: #f0f0f0;
}

.removeCardBackground {
  background-color: transparent;
  border: none;
}

.mpk_link_color {
  color: #5fd3f3;
}
.mpk_link_color a {
  color: #5fd3f3;
}
.mpk_link_color a:hover {
  color: #683e68;
}

.cotikicha {
  display: flex;
  align-items: center;
}
.cotikicha .card {
  background-color: transparent;
  border: none;
}
.cotikicha button {
  margin: 0 2px 10px 0;
  color: white;
  background-color: #529e91;
  border-radius: 12px;
  padding: 10px 15px 10px 15px;
  border-style: solid;
  border-color: #acfa74;
}
.cotikicha button:hover {
  color: white;
  background-color: gray;
  border-color: rgb(176, 231, 204);
}
.cotikicha .subButton {
  background-color: #A0A0A0;
}

.mainInfo {
  padding-top: 8em;
}

.modal-container {
  display: flex;
  align-items: center;
}
.modal-container img {
  width: 200px;
  height: 200px;
  background-color: #000000;
}

.cart {
  padding-right: 3em;
}
.cart button {
  background-color: transparent;
  border: none;
}

/**
Animation Section
*/
/*
    Menu Underline
*/
.hover-underline-animation {
  display: inline-block;
  position: relative;
}
.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  transform: scale(0);
  bottom: 0;
  left: 0;
  background-color: #00c3ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#accordionFlushExample button:hover {
  background-color: #0056b3;
  color: aliceblue;
}

.formConfiguration input {
  width: 40%;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.container h1 {
  text-align: center;
}
.container .form-group {
  margin-bottom: 15px;
}
.container label {
  display: block;
}
.container input[type=text], .container input[type=email] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.container button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#accordionFlushExample button:hover {
  background-color: #0056b3;
  color: aliceblue;
}

/*
    Text SlideDown
*/
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/*
    Text FadeIn
*/
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*
    Slide Appear
*/
.sizeController {
  width: 25px;
}

@media only screen and (max-width: 500px) {
  .image_responsive {
    width: 80%;
    height: 80%;
  }
}
@media screen and (min-width: 573px) {
  .frame_responsive {
    width: 500px;
  }
  .cotikicha {
    height: 150vh;
  }
}
@media screen and (min-width: 573px) and (max-width: 1024px) {
  .frame_responsive {
    width: 100%;
    height: 100%;
  }
  .cotikicha {
    height: 150vh;
  }
}
@media screen and (min-width: 1024px) {
  .frame_responsive {
    width: 100%;
    height: 100%;
  }
  .cotikicha {
    height: 100vh;
  }
}

/*# sourceMappingURL=style.css.map */