.navbar_boton {
  color: #333;
  background-position: bottom;
  background-image: -webkit-linear-gradient(0deg, #009045, #70a83b, #a3bd31);
  background-size: 0% 0%;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.navbar_boton:hover {
  color: #000;
  background-size: 100% 5%;
  animation-name: ani_btn;
  animation-duration: 1.4s;
}

@keyframes ani_btn {
  0% {
    background-size: 0% 5%;
  }
  15% {
    background-size: 100% 5%;
  }
  37% {
    background-size: 78% 5%;
  }
  50% {
    background-size: 100% 5%;
  }
  64% {
    background-size: 91% 5%;
  }
  70% {
    background-size: 100% 5%;
  }
  100% {
    background-size: 100% 5%;
  }
}

@media (min-width: 799px) {
  @supports (background-attachment: fixed) {
    .bg_fix {
      background-attachment: fixed !important;
    }
  }
}

.escalado {
  color: #009966;
  font-size: 30px;
  animation: escalar;
  animation-duration: 1s;
}

.compartir {
  height: 100%;
  width: 50px;
  background-color: #fff;
  color: #333;
}
.compartir:hover {
  transition: all 0.3s ease-in-out;
  background-color: transparent;
  color: white;
}

#casa {
  font-size: 25px;
  text-decoration: none;
  color: #999;
}

#casa:hover {
  text-decoration: none;
  color: #555;
  animation-name: casa_anim;
  animation-duration: 1s;
}

@keyframes casa_anim {
  0% {
    font-size: 25px;
    transform: rotate(0deg);
  }
  70% {
    font-size: 20px;
    transform: rotate(20deg);
  }
  100% {
    font-size: 30px;
    transform: rotate(0deg);
  }
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.scrollverde ::-webkit-scrollbar-thumb {
  background-color: #3dc02f;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent 16.6%,
    rgba(255, 255, 255, 0.2) 16.6%,
    rgba(255, 255, 255, 0.2) 32.2%,
    transparent 32.2%,
    transparent 49.8%,
    rgba(255, 255, 255, 0.2) 49.8%,
    rgba(255, 255, 255, 0.2) 66.4%,
    transparent 66.4%,
    transparent 83%,
    rgba(255, 255, 255, 0.2) 83%,
    rgba(255, 255, 255, 0.2) 99.6%
  );
}

.nav_item:hover {
  transition: all 0.3s ease-in-out;
  border-bottom: 1px solid #f90;
}

.cmb_clr_verde {
  transition: all 0.3s ease-in-out;
  background-color: rgba(40, 167, 69, 0.8);
  color: white;
}

.cmb_clr_verde:hover {
  transition: all 0.3s ease-in-out;
  background-color: rgba(030, 089, 069, 0.8);
  color: white;
}

.chat {
  position: absolute;
  width: 100%;
  height: 100vh;
  max-width: 300px;
  right: 0px;
  top: 85px;
  background-color: rgba(0, 0, 0, 0.5);
}

.item-servicios {
  overflow: hidden;
}

.item-servicio_1 {
  cursor: pointer;
  background-color: #999;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  color: white;
}
.item-servicio_2 {
  cursor: pointer;
  background-color: #666;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  color: white;
}

.item-servicio_1:hover {
  transition: all 0.1s ease-in-out;
  background-color: #3dc02f;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  color: white;
}
.item-servicio_2:hover {
  transition: all 0.1s ease-in-out;
  background-color: #f90;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  color: white;
}

button {
  margin-top: 1px;
  margin-bottom: 1px;
}
a {
  color: #555;
}

.deg:hover {
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
  color: #444;
  animation-name: giro_izq;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.deg:hover > * {
  animation-name: giro_der;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes giro_izq {
  0% {
    -webkit-transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(180deg);
  }
  40% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes giro_der {
  0% {
    -webkit-transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(-180deg);
  }
  40% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

.contenedor_texto {
  font-family: Century Gothic;
  top: 30px;
}

.logo_EcoYuma {
  position: relative;
  left: -7px;
  top: 0px;
  width: 300px;
  height: 186px;
  border: 0px solid #808080;
  text-align: center;
}

.logo_EcoYuma_arb {
  position: absolute;
  height: 97%;
  width: 99%;
  margin: 0px auto;
  animation-name: escalar;
  animation-duration: 2s;
}

.logo_EcoYuma_arb_tallo {
  position: absolute;
  height: 186px;
  width: 300px;
  margin: 0px auto;
  background-image: url(../../img/cargador/tallo.png);
  background-size: 100%;
}

.logo_EcoYuma_arb_hojas {
  position: absolute;
  width: 185px;
  height: 129px;
  margin: 0px auto;
  background-image: url(../../img/cargador/hojas.png);
  background-size: 100%;
  animation-name: mover_hojas;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.btn-circle-outline-green {
  cursor: pointer;
  border: 1px solid;
  background-color: none;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  color: white;
  border-color: white;
  font-size: 23px;
}
.btn-circle-outline-green:hover {
  background-color: rgba(087, 166, 057, 0.7);
  color: white;
  border-color: transparent;
}

.btn-circle-small-green {
  cursor: pointer;
  border: 1px solid;
  background-color: transparent;
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #95680c;
  border-color: #95680c;
  overflow: hidden;
}
.btn-circle-small-green:hover {
  background-color: #95680c;
  color: white;
  border-color: transparent;
}

.btn-circle-small-blue {
  cursor: pointer;
  border: 1px solid;
  background-color: transparent;
  font-size: 23px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #afa318;
  border-color: #afa318;
  overflow: hidden;
}
.btn-circle-small-blue:hover {
  background-color: #afa318;
  color: white;
  border-color: transparent;
}

.btn-circle-big-blue {
  cursor: pointer;
  border: 1px solid;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 30px;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  color: #006b68;
  border-color: #006b68;
  overflow: hidden;
}
.btn-circle-big-blue:hover {
  background-color: #006b68;
  color: white;
  border-color: transparent;
}

.btn-circle-small-lightblue {
  cursor: pointer;
  border: 1px solid;
  background-color: transparent;
  font-size: 23px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #708627;
  border-color: #708627;
  overflow: hidden;
}
.btn-circle-small-lightblue:hover {
  background-color: #708627;
  color: white;
  border-color: transparent;
}

.btn-circle-small-red {
  cursor: pointer;
  border: 1px solid;
  background-color: transparent;
  font-size: 23px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #4f7a2d;
  border-color: #4f7a2d;
  overflow: hidden;
}
.btn-circle-small-red:hover {
  background-color: #4f7a2d;
  color: white;
  border-color: transparent;
}

.btn-circle-small-purple {
  cursor: pointer;
  border: 1px solid;
  background-color: transparent;
  font-size: 23px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #006b33;
  border-color: #006b33;
  overflow: hidden;
}
.btn-circle-small-purple:hover {
  background-color: #006b33;
  color: white;
  border-color: transparent;
}

.btn-circle-small-facebook {
  cursor: pointer;
  border: 1px solid #fff8;
  background-color: transparent;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #fff8;
}
.btn-circle-small-facebook:hover {
  background-color: #4e598f;
  color: white;
  border-color: #4e598f;
}

.btn-circle-small-twitter {
  cursor: pointer;
  border: 1px solid #fff8;
  background-color: transparent;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #fff8;
}
.btn-circle-small-twitter:hover {
  background-color: #65a2d9;
  color: white;
  border-color: #65a2d9;
}

.btn-circle-small-instagram {
  cursor: pointer;
  border: 1px solid #fff8;
  background-color: transparent;
  font-size: 23px;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  color: #fff8;
}

.btn-circle-small-instagram:hover {
  background-image: -webkit-linear-gradient(90deg, #fccc66, #dd3569, #515cd2);
  color: white;
  border-color: #4e598f;
}

.sombra {
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
}

.menu_boton {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 10px 20px 20px;
  font-family: Quicksand;
  font-size: 18px;
  border-radius: 0px 0px 0px 40px;
  color: white;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0px solid #fff6;
  outline: none;
  cursor: pointer;
}

.menu_desplegable {
  transition: all 0.2s ease-in-out;
  border-radius: 30% 0% 0% 0%;
  position: absolute;
  overflow: hidden;
  top: 0px;
  right: 0px;
  background-color: #6c3c0088;
  width: 0px;
  height: 100vh;
  font-family: Quicksand;
}

.item_menu {
  margin: 0px;
  padding: 7px 17%;
  color: #eee;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.item_menu:hover {
  transition: all 0.2s ease-in-out;
  background-color: #d5b48b;
  color: #38332b;
}

.menu_boton:hover {
  transition: all 0.2s ease-in-out;
  color: #000;
  background-color: #fff;
}

@media (max-width: 500px) {
  .menu_desplegable {
    border-radius: 0px;
  }
}

.logo_EcoYuma_tex {
  height: 186px;
  width: 300px;
  margin: 0px auto;
  background-size: 100%;
  animation-name: aparecer;
  animation-duration: 3s;
}

.cnt_logo {
  width: 350px;
  height: 350px;
  transform: scale(0.9);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 175px;
  margin: -40px;
  overflow: hidden;
}

.imagen_fixed {
  background: url("imagenes/noticias/fondo_not.gif");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-box-shadow: inset 10px 10px 212px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: inset 10px 10px 212px 0px rgba(0, 0, 0, 0.9);
  box-shadow: inset 10px 10px 212px 0px rgba(0, 0, 0, 0.9);
}

.bg_logo_EcoYuma {
  background: gray;
}

.cnt_logo:hover {
  transition: all 0.8s ease-in-out;
  transform: scale(1);
  -webkit-transform: scale(1);
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.cnt_logo:hover > * {
  transition: all 0.8s ease-in-out;
  transform: rotate(-360deg);
  -webkit-transform: scale(0.9);
  filter: inherit;
}

.logo_EcoYuma_tex_1 {
  top: -5px;
  height: 186px;
  width: 300px;
  margin: 0px auto;
  position: absolute;
  background-image: url(../../img/cargador/tex1.png);
  background-size: 100%;
  animation-name: aparecer;
  animation-duration: 5s;
}
.logo_EcoYuma_tex_2 {
  height: 186px;
  width: 300px;
  margin: 0px auto;
  position: absolute;
  background-image: url(../../img/cargador/tex2.png);
  background-size: 100%;
  animation-name: escalar;
  animation-duration: 3s;
}

@keyframes desplazar_x {
  0% {
    right: -300px;
  }
  40% {
    right: -10px;
  }
  100% {
    right: -10px;
  }
}

.logo_EcoYuma_tex_3 {
  right: -10px;
  height: 186px;
  width: 300px;
  margin: 0px auto;
  position: absolute;
  background-image: url(../../img/cargador/tex3.png);
  background-size: 100%;
  animation-name: desplazar_x;
  animation-duration: 5s;
}

.aparecer {
  animation-name: aparecer;
  animation-duration: 2s;
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

.ocultar {
  animation-name: ocultar;
  animation-duration: 2s;
}

.centrado {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seccion_bienvenida {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: black;
}

.aparecer_prin {
  animation-name: aparecer_prin;
  animation-duration: 8s;
}

.seccion_bienvenida_contenedor {
  position: absolute;
  top: 0px;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100vh;
}

.subir_y_bajar {
  position: relative;
  animation-name: subir_bajar;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.logo_EcoYuma_arb_cargando {
  position: absolute;
  height: 97%;
  width: 99%;
  margin: 0px auto;
  animation-name: escalar_cargando;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.cambiar_color {
  animation-name: cam_color;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.sacudir {
  animation-name: mover_hojas;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes cam_color {
  0% {
    background-color: rgba(42, 70, 172, 1);
  }
  50% {
    background-color: rgba(4, 93, 0, 1);
  }
  100% {
    background-color: rgba(42, 70, 172, 1);
  }
}

@keyframes escalar_cargando {
  0% {
    transform: scale(0.5);
    top: 15px;
    left: -18px;
  }
  50% {
    transform: scale(0.7);
    top: 12px;
    left: -7px;
  }
  100% {
    transform: scale(0.5);
    top: 15px;
    left: -18px;
  }
}
@keyframes subir_bajar {
  0% {
    top: -5px;
  }
  100% {
    top: 10px;
    opacity: 0;
  }
}

@keyframes mover_hojas {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(-3deg);
  }
  10% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-3deg);
  }
  20% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes escalar {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes aparecer {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes aparecer_prin {
  1% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ocultar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}