*{
  margin:0px;
  padding:0px;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0px;
}

/* ========== PREDEFINIDOS ======== */
.btn_radius{
  border-radius:45px !important;
}

.fright{
  float:right;
}

.fs_14{
  font-size:14px;
}

.f_400 {
  font-weight: 400;
}

.f_700 {
  font-weight: 700;
}

.mb_30{
  margin-bottom:30px;
}

.mb_40 {
  margin-bottom: 40px;
}

.mb_50{
  margin-bottom:50px;
}

.mb_60 {
  margin-bottom: 60px;
}

.mt_60 {
  margin-top: 60px;
}

.pl_120{
  padding-left:120px;
}

p {
  font-size: 18px;
  color: #677294;
  margin-bottom: 0px !important;
}

.sec_pad {
  padding-top: 70px;
}

.subtitulo{
  color:#FF5252;
}

/* ======================================  MENU  ===================================== */

.container.custom_container {
  max-width: 1520px;
}

.header_area {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 20;
  top: 0;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.header_area.navbar_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  -webkit-box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
  box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
}

.navbar{
  padding: 0px;
}

.nav-item + .nav-item {
  margin-left: 45px;
}

.nav-item {
  position: relative;
  padding-bottom: 35px;
  padding-top: 35px;
  transition: 0.2s;
}

.header_area.navbar_fixed .nav-item{
  padding-bottom:25px;
  padding-top:25px;
}

.nav-link{
  padding-left:0px !important;
  padding-right:0px !important;
}

.nav-item .nav-link{
  font: 500 15px "Poppins", sans-serif;
  color: black;
  padding: 0px;
  -webkit-transition: color 0.3s ease 0s;
  -o-transition: color 0.3s ease 0s;
  transition: color 0.3s ease 0s;
  position: relative;
  display:inline-block;
}

.nav-item .nav-link:before{
  content: "";
  width: 0;
  height: 1px;
  background: #FF5252;
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.nav-item:hover .nav-link:before{
  width: 100%;
  left: 0;
  right: auto;
}

.menu_btn_contacto {
  min-width: 120px;  
  margin-left:40px;
  padding: 0px 20px;
  background: #FF5252;  
  font: 500 14px/40px "Poppins", sans-serif;
  text-align: center;
  color: #FFF;
  border: 2px solid #FF5252;
  border-radius: 4px;
  -webkit-box-shadow: 0px 20px 24px 0px rgba(0, 11, 40, 0.1);
  box-shadow: 0px 20px 24px 0px rgba(0, 11, 40, 0.1);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}  

.menu_btn_contacto:hover {
  background: #e04949;
  border-color: #e04949;
  color:#FFF;
  text-decoration: none;
}

.header_area.navbar_fixed .menu_btn_contacto{
  background: transparent;
  border: 2px solid #FF5252;
  color:#FF5252;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Animación Menu Hamburguesa-Cruz */

.navbar-toggler {
  padding: 0px;
  margin-left: 20px;
}

.navbar-toggler:focus {
  outline: none;
}

.menu_toggle {
  width: 22px;
  height: 22px;
  position: relative;
  cursor: pointer;
  display: block;
}

.menu_toggle .hamburger {
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
}

.menu_toggle .hamburger span {
  width: 0%;
  height: 2px;
  position: relative;
  top: 0;
  left: 0;
  margin: 4px 0;
  display: block;
  background: #fff;
  border-radius: 3px;
  -webkit-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.menu_toggle .hamburger span:nth-child(1) {
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.menu_toggle .hamburger span:nth-child(2) {
  -webkit-transition-delay: .125s;
  -o-transition-delay: .125s;
  transition-delay: .125s;
}

.menu_toggle .hamburger span:nth-child(3) {
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

.menu_toggle .hamburger-cross {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display: block;
}

.menu_toggle .hamburger-cross span {
  display: block;
  background: #FFF;
  border-radius: 3px;
  -webkit-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.menu_toggle .hamburger-cross span:nth-child(1) {
  height: 100%;
  width: 2px;
  position: absolute;
  top: 0;
  left: 10px;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
}

.menu_toggle .hamburger-cross span:nth-child(2) {
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 10px;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

.collapsed .menu_toggle .hamburger span {
  width: 100%;
}

.collapsed .menu_toggle .hamburger span:nth-child(1) {
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
}

.collapsed .menu_toggle .hamburger span:nth-child(2) {
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

.collapsed .menu_toggle .hamburger span:nth-child(3) {
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}

.collapsed .menu_toggle .hamburger-cross span:nth-child(1) {
  height: 0%;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.collapsed .menu_toggle .hamburger-cross span:nth-child(2) {
  width: 0%;
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

.header_area.navbar_fixed .hamburger span, .header_area.navbar_fixed .hamburger-cross span{
  background: #FF5252;
}

.menu_contacto{
  display:none;
}

/*=============================== INICIO =======================================*/

.contenedor_cabezal {
  padding-top: 150px;
  position: relative;
  z-index: 1;
}

.contenedor_cabezal .banner_shap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.contenedor_textos h1 {
  font-size: 50px;
  line-height: 66px;
}

.boton {
  font: 500 18px "Poppins", sans-serif;
  border-radius:35px;
  color: #fff;
  background: #FF5252;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  padding: 13px 35px;
  border: 1px solid #FF5252;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
}

.boton:hover {
  color: #FF5252;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
  text-decoration:none;
}


/*=============================== PASOS =======================================*/
.contenedor_pasos h2{
  font-weight:600;
}

.pasos {
  position:relative;
  background-color: white;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(93, 23, 23, 0.1);
  box-shadow: 0px 0px 15px 0px rgba(93, 23, 23, 0.1);
  padding: 40px 40px 38px;
  margin-bottom: 30px;
  border-radius:5px;
  -webkit-transition: 0.3s ease-in, color 0s linear;
  -o-transition: 0.3s ease-in, color 0s linear;
  transition: 0.3s ease-in, color 0s linear;
}

.pasos:hover{
  background: rgb(246,53,111);
  background: linear-gradient(0deg, rgba(246,53,111,1) 0%, rgba(255,82,82,1) 0100%);
  -webkit-box-shadow: 0px 20px 60px 0px rgba(93, 23, 23,   0.2);
  box-shadow: 0px 20px 60px 0px rgba(93, 23, 23, 0.2);
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
}

.pasos:hover .numero, .pasos:hover h3, .pasos:hover p{
  color:#fff;
}

/* SVG */
.pasos svg{
  margin:0 auto;
  display:block;
}

.pasos:hover svg path{
  stroke:none;
  fill:white;
}

.pasos .numero{
  position:absolute;
  top:0;
  left:20px;
  font-size:60px;
  font-weight:600;
  color:#FF5252; 
  opacity:0.15; 
  -webkit-transition: color 0.3s ease-in;
  -o-transition: color 0.3s ease-in;
  transition: color 0.3s ease-in;
}

.pasos img{
  display:block;
  margin: 0 auto;
}

.pasos h3 {
  font-size: 22px;
  line-height: 28px;
  color: black;
  font-weight: 700;
  text-align:center;
  margin-top: 35px;
  margin-bottom: 16px;
}

.pasos p {
  margin-bottom: 0;
  font-size: 14px;
  text-align: center;
  color: #6a7695;
  margin-bottom: 40px;
}

/* ======================================  INFORMACIÓN  ===================================== */
.contenedor_informacion h2{
  font-size:42px;
}


/* ======================================  CONTACTO MEDIO  ===================================== */
.contenedor_contacto_medio{
  background:#FF5252;
  margin-top:35px;
  margin-bottom:40px;
}

.contenedor_contacto_medio h2{
  margin-bottom:30px;
  font-weight: 600;
  color:#FFF;
  font-size:28px;
}

.boton_lineal_blanco {
  font: 500 14px "Poppins", sans-serif;
  -webkit-box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
  box-shadow: 0px 20px 30px 0px rgba(12, 0, 46, 0.1);
  border-radius: 3px;
  padding: 16px 38px;
  background:#FFF;
  border: 1px solid #FFF;
  color: #FF5252;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
  display:inline-block;
  border-radius:45px;
}

.boton_lineal_blanco:hover {
  color:#FFF;
  background: #FF5252;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration:none;
}

.bg_contact{
  padding-top:30px;
  padding-bottom: 30px;
  background-image: url(../img/fondo_contacto.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  

}

/* ======================================  BENEFICIOS  ===================================== */
.beneficios {
  min-height: 116px;
  margin-top: 50px;
  padding: 20px 15px 15px 20px;
  box-shadow: 0px 0px 15px 0px rgba(93, 23, 23, 0.1);
  border-radius: 10px;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  position:relative;
}

#beneficio_compra:after{
  content: "";
  background: url(../img/beneficios/1_compras.svg) no-repeat;
  background-position: right 45px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

#beneficio_catalogo:after{
  content: "";
  background: url(../img/beneficios/2_catalogo.svg) no-repeat;
  background-position: right 60px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

#beneficio_clientes:after{
  content: "";
  background: url(../img/beneficios/3_clientes.svg) no-repeat;
  background-position: right 35px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

#beneficio_pagos:after{
  content: "";
  background: url(../img/beneficios/4_pagos.svg) no-repeat;
  background-position: right 35px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

#beneficio_logistica:after{
  content: "";
  background: url(../img/beneficios/5_logistica.svg) no-repeat;
  background-position: right 35px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

#beneficio_promociones:after{
  content: "";
  background: url(../img/beneficios/6_promociones.svg) no-repeat;
  background-position: right 35px;
  background-size: 120px;
  opacity: 0.15;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
}

.beneficios:hover{
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-box-shadow: 0px 10px 40px 0px rgba(93, 23, 23, 0.1);
  box-shadow: 0px 10px 40px 0px rgba(93, 23, 23, 0.1);
}

.beneficios .icono_1{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-align: center;
  line-height: 55px;
  margin-right: 30px;
}

.beneficios h3{
  font-size: 20px;
  color: #263b5e;
  font-weight: 600;
  margin-bottom: 15px;
}

.beneficios p{
  font-size:14px;
}


/* ======================================  DISEÑOS  ===================================== */
.contenedor_beneficios{
  margin-top:20px;
}

.contenedor_beneficios h2{
  margin-bottom:50px;
}

.portfolio_filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.portfolio_filter .work_portfolio_item {
  font: 400 16px/22px "Poppins", sans-serif;
  color: #677294;
  display: inline-block;
  border-radius: 3px;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
  cursor: pointer;
}

.portfolio_filter .work_portfolio_item:before {
  content: "";
  width: 0;
  height: 1px;
  bottom: 0;
  background: transparent;
  position: absolute;
  left: auto;
  right: 0;
  -webkit-transition: width 0.3s linear;
  -o-transition: width 0.3s linear;
  transition: width 0.3s linear;
}

.portfolio_filter .work_portfolio_item.active, .portfolio_filter .work_portfolio_item:hover {
  color: #FF5252;
}

.portfolio_filter .work_portfolio_item.active:before, .portfolio_filter .work_portfolio_item:hover:before {
  width: 100%;
  background: #FF5252;
  right: auto;
  left: 0;
}

.portfolio_filter .work_portfolio_item + .work_portfolio_item {
  margin-left: 60px;
}

.portfolio_img img {
  max-width: 100%;
  width: 100%;
}

.portfolio_img .img_rounded {
  border-radius: 6px;
}

.portfolio-description h3 {
  font-size:24px;
  margin-top: 22px;
  margin-bottom: 0px;
  -webkit-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  transition: color 0.2s linear;
  color: #282835;
}

.portfolio-description .categoria {
  overflow: hidden;
}

.portfolio-description .categoria {
  font-size: 15px;
  color: #677294;
  font-weight: 300;
  position: relative;
  display: inline-block;
  margin-right: 8px;
  cursor: default;
  -webkit-transition: color 0.01s linear;
  -o-transition: color 0.01s linear;
  transition: color 0.01s linear;
}

.portfolio_item a{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.portfolio_item a:hover +  .portfolio_img .portfolio-description h3 {
  color: #FF5252;
}



/* ======================================  CONTACTO  ===================================== */

.contact_info_area{
  background: rgb(255,82,82);
  /*background: linear-gradient(90deg, rgba(255, 114, 82) 0%, rgba(255,82,82,1) 100%);*/
  padding-top:40px;
  padding-bottom:40px;
}

.contacto_title{
  font-size:40px;
  color: white;
  font-weight:700;
  margin-bottom:0px;
}

.contact_subtitulo{
  color:white;
  margin-top:10px;
  margin-bottom:30px !important;
}

.contact_container p{
  font-size:14px;
}

.contact_info{
  color:white;
  margin-bottom:10px !important;
}

.img_numero{
  margin-right:10px;
}

.img_mapa{
  margin-right:10px;
  margin-top:-3px;
}

.img_linkedin{
  margin-right:10px;
  margin-top:-8px;
}

input, textarea{
  color:#FFF; 
}

.text_box input[type="text"], .text_box textarea, .text_box input[type="password"], .text_box input[type="email"] {
  font: 400 15px/60px "Poppins", sans-serif;
  color: white;
  height: 40px;
  background-color: transparent;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(12, 0, 46, 0.04);
  box-shadow: 0px 2px 4px 0px rgba(12, 0, 46, 0.04);
  width: 100%;
  border:none;
  border-bottom: 1px solid #fff;
}

.text_box input[type="text"]:focus, .text_box textarea:focus, .text_box input[type="email"]:focus {
  border-color: #f2effc;
  -webkit-box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
}

.text_box textarea {
  line-height:20px !important;
  height: 50px;
}

.contact_form_box .btn_three {
  min-width: 180px;
  text-align: center;
  background: #FF5252;
  border-color: #FF5252;
  margin-top: 0px;
}

.contact_form_box .btn_three:hover {
  background: transparent;
  color: #FF5252;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
textarea:-webkit-autofill, textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
    font: 400 15px/60px "Poppins", sans-serif;
    border-bottom: 1px solid #FFF;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

::-webkit-input-placeholder { /* Edge */
  color: white;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::placeholder {
  color: white;
}

.boton_enviar {
  font: 500 18px "Poppins", sans-serif;
  border-radius:35px;
  color: #fff;
  background: transparent;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  padding: 13px 35px;
  border: 1px solid #FF5252;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
}

.boton_enviar:hover {
  background: #ef4d4d !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
  text-decoration:none;
  outline:none;
}

.inputContacto{
  margin-bottom:30px;
}

.link_contacto, .link_contacto:hover{
  color: #FFF;
  text-decoration: none;
}

/*=============================== CONTACTO MODAL ======================================*/

.contenedor_modal .btn{
  margin:0 auto;
  margin-top:20px;
  display:block;
  font: 500 14px "Poppins", sans-serif;
  border-radius:35px;
  color: #fff;  
  padding: 5px 15px;  
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
}

.error{
  background: #FF5252;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(255,82,82, 0.5);
  border: 1px solid #FF5252;
}

.success{
  background: #7CB342;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(124, 179, 66, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(124, 179, 66, 0.5);
  border: 1px solid #7CB342;
}


.modal_titulo{
  font-size:18px;
  text-align:center;
  color:#7CB342;
}

.contenedor_modal p{
  font-size:14px;
  text-align:center;
}

.contenedor_modal .svg-box{
  margin:0 auto;
  display:block;
}

/* ===================== POPUPS ========================*/

.modal_titulo_error{
  font-size:18px;
  text-align:center;
  color:#ff5252;
}

.ui-success,.ui-error {
  width: 100px; 
  height: 100px;
	margin: 40px auto;
}


/*--------------------------- RESPONSIVE --------------------------------*/

@media (max-width: 1550px){
  .container.custom_container {
      max-width: 1170px;
  }
  .contenedor_cabezal .banner_shap {
    width: 80%;
    top: -100px;
  }
  .img_inicio {
    max-width: 100%;
  } 
}

@media (max-width: 1199px){
  .nav-item + .nav-item {
    margin-left: 20px;
  }
  .container.custom_container {
      max-width: 960px;
  }
  .contenedor_cabezal .banner_shap {
    width: 100%;
    top: -200px;
  }
  .contenedor_textos h1 {
    font-size: 36px;
    line-height: 50px;
  }
  .contenedor_informacion h2{
    font-size:35px;
  }
  .sec_pad {
    padding-top: 70px;
  }
  .beneficios {
    padding-right: 0;
  }
}

@media (max-width: 991px){
  .menu {
    padding: 10px 20px;
    background: #fff;
    margin-top: 0px;
  }
  .nav-menu{
    padding: 15px 0px;
  }
  .nav-item + .nav-item {
      margin-left: 0px;
  }
  .nav-item{
    padding-top:10px;
    padding-bottom:10px;
  }
  .container.custom_container {
    max-width: 100%;
    padding: 0px 15px;
  }
  .contenedor_cabezal .banner_shap {
    width: auto;
    top: 0;
    max-width: 100%;
  }
  .menu_btn_contacto{
    display:none;
  }
  .menu_contacto{
    display:block;
  }
  .contenedor_textos {
    max-width: 500px;
  }
  .sec_pad {
    padding-top: 70px;
  }
  .portfolio_filter {
    display: block;
    line-height: 55px;
    margin: 0 auto;
    text-align: center;
  }
  .portfolio_filter .work_portfolio_item {
    margin-left: 0px !important;
    margin: 0 15px;
  }
  .contact_container{
    margin-bottom:45px;
  }
}

@media (max-width: 576px){
  .sec_pad{
    padding-top:50px;
  }
  .contenedor_cabezal{
    padding-bottom:90px;
  }
  .contenedor_textos .action_btn .boton {
    display: block;
    margin-bottom: 20px;
  }
  .contenedor_textos .action_btn {
    display: block !important;
    text-align: center;
  }
  .navbar_fixed nav{
    background: #FFF;
    transition:2s;
  }
  .contenedor_textos h1 {
    font-size: 28px;
    line-height: 45px;
    margin-bottom: 23px;
    
  }
  .contenedor_informacion h2{
    font-size:29px;
  }
  .contenedor_informacion img{
    margin-bottom:70px;
  }
  .contact_container{
    margin-bottom:45px;
  }
}