:root{
    --factorBiggest: 1.4;
    --factorBig: 1.1;
    --factorNormal: 1;
    --factorTablet: .9;
    --factorCel: .75;
    --factorCelMini: .55 * 2 ;
    --factorCelMicro: .45 * 2;


    --text-hero-large:    4.5rem;
    --text-hero-mid:      2.0rem;
    --text-hero-small:    2.0rem;

    --text-header:          4.0rem;
    --text-section:         3.0rem;
    --text-subheader:       2.0rem;
    --text-larger:          1.6rem;
    --text-large:           1.4rem;
    --text-mid:             1.3rem;
    --text-normal:          1.0rem;
    --text-small:           0.95rem;
    --text-smaller:         0.8rem;


    --darkgrey: #222327;
    --grey3:#DAE2E4;
    --aqua: #80ffdb;
    --grey: #f4f4f4;
    --grey2: #d2e9ea;
    --grey3: #DAE2E4;
    --yellow2: #e7ff56;
    --gamoRed: #C32617;
    --gamoYellow: #FFE37B;
    --gamoYellow: #eaef44;
    --gamoYellow3: #F3AD34;
    --gamoYellow4: #e39D24;
    --gamoGrey: #f4f4f4;
    --gamoBlack: #1D1D1D;

    --prod-img-size: 13rem;
    --prod-img-size-small: 11rem;

}

body {
    overflow-x: hidden;
    margin:0px;
    display: block;
    font-family: Outfit, Montserrat, Roboto, Poppins, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: black;
    line-height: 1.2;
}




/* screen m p utils*/
.dyn-height-full {     height: 100vh; }
.dyn-height-third {     height: 20vh; }
.dyn-height-half {     height: 50vh; }
.dyn-height-3_4 {     height: 75vh; }
.dyn-height-projects {     height: 25rem !important; }
.dyn-height-full-perc {     height: 100%; }
.dyn-width-full-perc {     width: 100%; }

.dyn-section-space          {   height: 10rem; }
.dyn-section-space-half     {   height: 5rem; }

.dyn-margin-section         {   margin-top: 6rem;       margin-bottom: 6rem; }
.dyn-margin-section-bottom  {                           margin-bottom: 6rem;      }
.dyn-padding-section        {   padding-top: 6rem;      padding-bottom: 6rem; }
.dyn-padding-contact        {   padding-top: 4rem;      padding-bottom: 3rem; }
.dyn-padding-section-top    {   padding-top: 6rem; }
.dyn-padding-section-mid    {   padding-top: 3rem; }

.dyn-bg-yellow              {   background-color: var(--gamoYellow); }
.dyn-bg-yellow3              {   background-color: var(--gamoYellow3); }
.dyn-bg-red                 {   background-color: var(--gamoRed); }
.dyn-bg-grey                {   background-color: var(--gamoGrey);}
.dyn-bg-grey3               {   background-color: var(--grey3); }
.dyn-bg-black               {   background-color: var(--gamoBlack);}

.dyn-border-radius05         {   border-radius: .5rem;}
.dyn-border-radius1          {   border-radius: 1rem;}
.dyn-border-radius2          {   border-radius: 2rem;}

.dyn-border-black             { border:1px solid #000;}
/* screen m p utils*/




/* + + + + + + + + + + + + +     text utils     + + + + + + + + + + + + + */
.dyn-yellow               {   color: var(--gamoYellow); }
.dyn-yellow3               {   color: var(--gamoYellow3); }
.dyn-red                  {   color: var(--gamoRed); }

.dyn-text-bold-light {      font-weight: 500;}
.dyn-text-bold {            font-weight: 700;}

.dyn-font-border{
  -webkit-text-stroke: 1px black;   /*check other way*/
}

.dyn-line-height-12 {              line-height: 1.2;     }

.dyn-text-hero-large {        line-height: 1;     }
.dyn-text-hero-mid   {        line-height: 1;     }
.dyn-text-hero-small {        line-height: 1;     }

.dyn-text-header    {         line-height: 1;     }
.dyn-text-subheader {         line-height: 1;     }
.dyn-text-larger    {         line-height: 1;     }
.dyn-text-large     {         line-height: 1.2;     }
.dyn-text-mid       {         line-height: 1;     }
.dyn-text-normal     {        line-height: 1.2;     }


/* + + + + + + + + + + + + +     text utils     + + + + + + + + + + + + + */


/* navbar */
.nav-link {
    position: relative;
    font-weight: 500;
    color: var(--darkgrey) !important;  text-shadow: white .5px .3px;
    padding:2px;     border-radius: 0;
    transition: .3s;
}
.nav-link:hover{
    background-color: #e7ff56;
    color: #000066 !important;
    top: 1px;
    text-decoration: none;
}

.dyn-navbar-border-radius { border-radius: 3rem; border: 1px solid #bbb;}

/* navbar */


/* hero */
.dyn-app-logo{       position: relative;    }
.dyn-app-logo::after{       
  position: absolute;    
  content:"";

  background-color: white; border-radius: 100rem;
  background-image: url(../imgs/logos/logoHero.png); background-size: cover;
  left:34.5%;   left:83.5%;   
  bottom:.5rem;  height: 15rem; width: 15rem;
  z-index: 10;
}


.dyn-navbar-bg          {   background-color: transparent;}
.dyn-hero-spacer        {   height: 3.5rem;  }
.dyn-hero-pic-height    {   height: 100%;   }
.dyn-hero-desc-height   {   height: 100%;   }



/* msg */
.dyn-msg-icon-height{      height: 3rem;  }
.dyn-msg-spacer        {    height: 3rem; height: 5rem;  }
.dyn-fx-clients{                transition: .3s all ease;  }
.dyn-fx-clients:hover{          transform: scale(1.03) translateY(-.5rem);  }

.dyn-msg-ct-hb{           height: 3.5rem; position:relative; top:1.5rem;    }
.dyn-msg-ct-sanjuan{      height: 6rem; position:relative; top:0rem;    }
.dyn-msg-ct-alcon{        height: 4.1rem; position:relative; top:1.2rem;    }

.dyn-msg-ct-pollobox{     height: 4.5rem; position:relative; top:1rem;      }
.dyn-msg-ct-ramos{        height: 3.7rem; position:relative; top:1.3rem;    }
.dyn-msg-ct-grandy{       height: 3.8rem; position:relative; top:1.3rem;    }

.dyn-msg-ct-rh{           height: 4.5rem; position:relative; top:1.5rem;    }
.dyn-msg-ct-maton{        height: 7rem; position:relative; top:.5rem;       }
.dyn-msg-ct-kesos{        height: 5.3rem; position:relative; top:.8rem;     }

.dyn-msg-ct-carnesuno{    height: 4.5rem; position:relative; top:1.7rem;    }
.dyn-msg-ct-sumerca{      height: 7rem; position:relative; top:.3rem;       }
.dyn-msg-ct-viamsa{       height: 4.5rem; position:relative; top:1.5rem;    }


/* prods */
.dyn-border-prod{         border-radius: 1rem;       }
.dyn-prod-title-bg{       
  border-radius: 0rem;
  border-left: 4px solid var(--gamoRed)
}
.dyn-color-title{   color: var(--gamoRed);}

.dyn-prod-item-bg{      position: relative; height: 100%;         }
.dyn-prod-item-bg::before{
  position: absolute; content: '';

  background-color: black;
  top: 0; bottom: 0; left: 0; right: 0;
  transform: skewY(4deg);
  border-radius: 1rem;
  z-index: -10;
}

.dyn-prod-img-bgx{     position: relative;    transition: all .3s ease;    }
.dyn-prod-img-bgx::before{     
  position: absolute;    content: '';
  
  top: -1rem;   left: calc( 50% - 6.5rem);
  height: 13rem; width: 13rem;

  border-radius: 50rem; 
  background-color: #282828;
}
.dyn-prod-img-bgx:hover::before{
  background-color: var(--gamoYellow3);
}
.dyn-prod-img-bgx:hover .dyn-fx-prod-img {
  transform: scale(1.05) translateY(-1rem) rotate(-3deg);
  filter: brightness(120%);
}

.dyn-fx-prod-img{
  color: inherit;
  transition: all .3s ease;
}
.dyn-fx-prod-img:hover{
  transform: scale(1.05) translateY(-1rem) rotate(-3deg);
  filter: brightness(120%);
}



.dyn-prod-img-bg{
  position: relative;
}
.dyn-prod-img-bg::before{
  position: absolute;
  content:"";
  top: -1rem;
  left: 0rem;

  height: 13rem; width: 13rem;

  border-radius: 50rem; 
  background-color: var(--gamoRed);
  background-color: #282828;
  border: 1px solid #333;  
  
  transition: all .3s ease;
}
.dyn-prod-img-bg-org::before{
  position: absolute;
  content:"";
  top: -3.5rem;
  left: -.5rem;

  height: 16rem; width: 16rem;
  height: 16rem; width: 16rem;

  border-radius: 50rem; 
  background-color: var(--gamoRed);  
  transform: rotate(4deg);
  transition: all .3s ease;
}
.dyn-prod-img-bg:hover::before{
  background-color: var(--gamoYellow3);
}



.dyn-prod-img1{
  position: relative;
  margin: auto;
  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/Salchicha_Roja_para_Asar_Natural.png);  
  background-image: url(../imgs/prods/SalchichaAsar.png);  
  background-size: cover; background-position: center; background-repeat: no-repeat;
}


.dyn-prod-img2{
  position: relative;
  margin: auto;

  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/ASA_VACIO_FUNDA_PLASTICA_2.5_KG.png);  
  background-size: auto 100%; background-position: center; background-repeat: no-repeat;
}
.dyn-prod-img3{
  position: relative;
  margin: auto;

  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/HOT_DOG_ECONOMICO.png);
  background-size: auto 100%; background-position: center; background-repeat: no-repeat;
}
.dyn-prod-img4{
  position: relative;
  margin: auto;

  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/Salchicha_Polaca_Herradura.png);  
  background-size: 100% auto; background-position: center; background-repeat: no-repeat;
}
.dyn-prod-img5{
  position: relative;
  margin: auto;

  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/chistorra.png);  
  background-size: 100% auto; background-position: center; background-repeat: no-repeat;
}
.dyn-prod-img6{
  position: relative;
  margin: auto;

  height: var(--prod-img-size); width: var(--prod-img-size);
  
  background-image: url(../imgs/prods/PastaDePollo.png);  
  background-size: 100% auto; background-position: center; background-repeat: no-repeat;
}



.dyn-prods-spacer     {           height: 3.5rem;  }
.dyn-prods-pic        { 
  width: auto; 
  height: 12rem; 
  border-radius: 0.5rem;
  border: 2px solid var(--gamoRed);
}
.dyn-prods-div        { 
    background-image: url(/imgs/prods/800GR.jpeg); 
    background-size: cover;
    height: 10rem;
    border-radius: 0.5rem;
}


.dyn-prod-bg{       position: relative;             }
.dyn-prod-bg::before{
  position: absolute;   content: "";

  background-image: url(../imgs/prods/black33.png); 
  background-size: contain; background-position: center; background-repeat: no-repeat;
  top: -1rem; bottom: -1rem; left: -1rem; right: 1rem;
  top: -1rem; bottom: -1rem; left: -.3rem; right: -.3rem;
  z-index: -1;
}

.dyn-btn-catalog{
  border: 3px solid var(--gamoRed);
  background-color: var(--gamoRed);
  text-decoration: none; 
  color: white;
  border-radius: 3rem;
  transition: .3s all ease-in-out;;
}
.dyn-btn-catalog:hover{
  text-decoration: none; 
  color: black;
  border: 3px solid var(--gamoRed);
  background-color: white;
  border-radius: 5rem;
  transition: .3s all ease-in-out;;
}


/* us */
.dyn-us-spacer        {           height: 3rem;  }
.dyn-us-pic           {           width: 100%; height: 100%; border-radius: 1rem;     }
.dyn-us-icon          {           height: 2.8rem;  }
.dyn-video-size       {           width: 100%;}


/*proceso*/
.dyn-proc-icon1{              position: relative;    }
.dyn-proc-icon1::after{       
  position: absolute; content: '';
  
  background-image: url(../imgs/icons/Contactanos.svg);
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;

  height: 7rem; width: 7rem;
  top: -3rem; left: calc( 50% - 3.5rem ) ;
}

.dyn-proc-icon2{              position: relative;    }
.dyn-proc-icon2::after{       
  position: absolute; content: '';
  
  background-image: url(../imgs/icons/Conocenos.svg);
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;

  height: 7rem; width: 7rem;
  top: -3rem; left: calc( 50% - 3.5rem );
}

.dyn-proc-icon3{              position: relative;    }
.dyn-proc-icon3::after{       
  position: absolute; content: '';
  
  background-image: url(../imgs/icons/Pedido.svg);
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;

  height: 7rem; width: 5.5rem;
  top: -3rem; left: calc( 50% - 2.75rem );
}


.dyn-proc-bg-new{
  background-image: url(../imgs/icons/procesobgsolo2.png);
  background-color: #000;
  background-size: 116% auto; background-position: center bottom; background-repeat: no-repeat;
}
.dyn-proc-bg-new-parrilla{
  background-image: url(../imgs/parrilla.png);  
  background-color: #000;
  background-size: 50% auto; background-position: center bottom; background-repeat: no-repeat;
}
.dyn-proc-bg1{
  background-image: url(../imgs/icons/salchichabgx1.png);
  background-color: #000;
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;
}
.dyn-proc-bg2{
  background-image: url(../imgs/icons/salchichabgx2.png);
  background-color: #000;
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;
}
.dyn-proc-bg3{
  background-image: url(../imgs/icons/salchichabgx3.png);
  background-color: #000;
  background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat;
}
.dyn-proc-border{
  color: white; color: black;
  border: 2px solid black;
}
.dyn-proc-title-bg{
  border-radius: .5rem;
}
.dyn-proc-desc-bg{
  background-color: black; 
  border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem;
}




/* clients - testimonios*/

.dyn-quotes{
  position: relative;
}
.dyn-quotes::before{
  position: absolute; content: "";

  background-image: url(../imgs/icons/left_quote.svg);
  background-size: 100% auto; background-position: center; background-repeat: no-repeat;

  top: -2.5rem; left:1rem; 
  width: 5rem; height: 5rem;
  z-index: 10;
}
.dyn-quotes::after{
  position: absolute; content: "";

  background-image: url(../imgs/icons/dosSalchichas.svg);
  background-image: url(../imgs/icons/right_quote.svg);
  background-size: 100% auto; background-position: center; background-repeat: no-repeat;

  bottom: -2.5rem; right:17%; right:1rem; 
  width: 5rem; height: 5rem;
  z-index: 10;
}
.dyn-ct-client{
  border-radius: .3rem;
  background-color: var(--gamoYellow3);
  background-color: #efefef;  color: white;
  font-weight: 500;
}

/*new carousel*/
.dyn-ct-div-props{         height: 28rem;   }
.dyn-ct-cell{ 
  background-color: white;  
  border: 1px solid #ddd;
  border-left: 5px solid white;
  height: 90%;
  transition: .2s all ease-in-out;
}
.dyn-ct-cell:hover{ 
  transform: translateY(-2px);
  border-left: 5px solid var(--gamoRed);
}

.carousel-control-prev, .carousel-control-next{ 
  /*width: 15%;*/
  width: 7%;  
}
.carousel-control-prev-icon, .carousel-control-next-icon { 
  background-color: black !important;
  border-radius: .3rem;
 }
 .carousel-indicators{
  margin-bottom: 1px;
 }

/*old carousel*/

.carousel {     background: var(--gamoGrey);  }

.main-carousel{ position:relative; }

.carousel-cell {
    /*width: 66%;*/
    width: 100%;
    counter-increment: carousel-cell;
}


/* cell member */
.carousel-cell:before {     
    display: block;     text-align: center; 
}
/* END clients - testimonios*/





.dyn-btn{
  /* position: relative; */
  color: #eee;      
  background-color: var(--gamoRed);
  border: 4px solid var(--gamoRed);
  border-radius: 1rem;
  padding-top: .5rem; padding-bottom: .5rem;
  padding-left: 1.5rem; padding-right: 1rem;
  transition: .3s;
}

.dyn-btn2{
  /* position: relative; */
  color: black;      
  background-color: var(--gamoYellow);
  border: 4px solid var(--gamoYellow);
  border-radius: 1rem;
  padding-top: .5rem; padding-bottom: .5rem;
  padding-left: 1.5rem; padding-right: 1rem;
  transition: .3s;
}

/* Contacto */
.dyn-btn-contact {
  background-color: #eaef44;
  background-color: var(--gamoYellow);
  color: black;
  border: 2px solid var(--purple);
  border-radius: .5rem;
  transition: .3s all;
}
.dyn-btn-contact:hover {
  background-color: var(--gamoYellow4);
  color: black;
}
.dyn-contact-link{
  text-decoration: none;
  color: inherit;
}
.dyn-text-errormsg { 
    font-weight: 400;       line-height: .9;    color: red;
    margin-top: .5rem;
    text-transform: uppercase;
    font-size: small;
}

/* floating whatsapp*/
.dyn-wa{
  z-index: 99999999;
  position:fixed;
  bottom:20px; 
  right:20px; 
}
/* floating whatsapp*

/* + + + + + + + + + + + + +     MediaQueries utils     + + + + + + + + + + + + + */

.dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorNormal) ); }
.dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorNormal) ); }
.dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorNormal) ); }

.dyn-text-header {          font-size: calc( var(--text-header) * var(--factorNormal) );  }
.dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorNormal) ); }
.dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorNormal) ); }
.dyn-text-large {           font-size: calc( var(--text-large) * var(--factorNormal) ); }
.dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorNormal) );     }

.dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorNormal) ); }
.dyn-text-small {           font-size: calc( var(--text-small) * var(--factorNormal) ); }
.dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorNormal) ); }

.dyn-wa{                    width:65;   height:65;      }
.dyn-wa-icon{               height:50px;    }

@media screen and (min-width: 2501px)  {
  .dyn-video-size      {           height: 20rem;   width: auto;}
}
@media screen and (min-width: 1701px) and (max-width: 2500px) {
  .dyn-video-size      {           height: 20rem; width: auto;}
}

@media screen and (min-width: 1701px) and (max-width: 1900px) {
  .dyn-video-size      {           width: 80%;}
}
@media screen and (min-width: 1365px) and (max-width: 1700px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorBig) *.6 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorBig)  ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorBig)  ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorBig) *.8 );  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorBig) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorBig) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorBig) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorBig) );  }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorBig) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorBig) * 1.1 ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorBig)  ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }


  .dyn-prod-img1, .dyn-prod-img2, .dyn-prod-img3, .dyn-prod-img4, .dyn-prod-img5, .dyn-prod-img6 {   
    height: calc( var(--prod-img-size) *.9 ) ;     width:  calc( var(--prod-img-size) *.9 ) ;   
  }
  .dyn-prod-img-bgx::before{     
    top: -1rem;   left: calc( 50% - 13rem *.9/2);
    height: calc( 13rem *.9 ) ; width: calc( 13rem *.9 );
  }

  .dyn-ct-div-props{         height: 35rem;   }

}

@media screen and (min-width: 992px) and (max-width: 1365px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorNormal) *.6 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorNormal)  ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorNormal)  ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorNormal) *.8 );  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorNormal) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorNormal) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorNormal) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorNormal) );     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorNormal) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorNormal)  ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorNormal)  ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }


  .dyn-prod-img1, .dyn-prod-img2, .dyn-prod-img3, .dyn-prod-img4, .dyn-prod-img5, .dyn-prod-img6 {   
    height: calc( var(--prod-img-size) *.8 ) ;     width:  calc( var(--prod-img-size) *.8 ) ;   
  }
  .dyn-prod-img-bgx::before{     
    top: -1rem;   left: calc( 50% - 13rem *.8/2);
    height: calc( 13rem *.8 ) ; width: calc( 13rem *.8 );
  }

  .dyn-us-icon          {           display: none;  }

  .dyn-ct-div-props{         height: 35rem;   }

}
@media screen and (min-width: 767px) and (max-width: 992px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorTablet)  ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorTablet)  ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorTablet)  ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorTablet) );  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorTablet) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorTablet) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorTablet) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorTablet) );     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorTablet) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorTablet) * 1.2 ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorTablet)  ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }

  .dyn-navbar-border-radius { border-radius: .5rem; }

  .dyn-hero-pic-height    {         height: 60%;}
  .dyn-hero-desc-height   {         height: 40%;}

  .dyn-ct-div-props{         height: 35rem;   }
}
@media screen and (min-width: 577px) and (max-width: 767px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCel)  ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorCel)  ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorCel)  ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorCel) *.8 );  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCel) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCel) * 1.15 ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCel) * 1.15); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorCel) * 1.15);     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCel) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCel) * 1.3 ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCel) ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }

  .dyn-navbar-border-radius { border-radius: .5rem; }

  .dyn-hero-pic-height    {         height: 50%;}
  .dyn-hero-desc-height   {         height: 50%;}

  .dyn-ct-div-props{         height: 35rem;   }
}
@media screen and (min-width: 425px) and (max-width: 576px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCelMini) *.6 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorCelMini) *.8 ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorCelMini) *.7 ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorCelMini) * .65);  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCelMini) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCelMini) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCelMini) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorCelMini) );     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCelMini) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCelMini) ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCelMini) ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }

  .dyn-navbar-border-radius { border-radius: .5rem; }

  .dyn-hero-pic-height    {         height: 50%;}
  .dyn-hero-desc-height   {         height: 50%;}

  .dyn-ct-div-props{         height: 35rem;   }

}
@media screen and (min-width: 401px) and (max-width: 425px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCelMicro) *.8 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorCelMicro) ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorCelMicro) ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorCelMicro) * .8);  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCelMicro) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCelMicro) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCelMicro) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorCelMicro) );     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCelMicro) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCelMicro) ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCelMicro) ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }

  .dyn-navbar-border-radius { border-radius: .5rem; }

  .dyn-hero-pic-height    {         height: 40%;}
  .dyn-hero-desc-height   {         height: 60%;}

  .dyn-ct-div-props{         height: 35rem;   }

}
@media screen and (max-width: 400px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCelMicro) *.6 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorCelMicro) ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorCelMicro) ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorCelMicro) * .7);  }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCelMicro) ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCelMicro) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCelMicro) ); }
  .dyn-text-mid       {       font-size: calc( var(--text-mid) * var(--factorCelMicro) );     }

  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCelMicro) ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCelMicro) * 1.15 ); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCelMicro) ); }

  .dyn-wa{                    width:65;   height:65;      }
  .dyn-wa-icon{               height:50px;    }

  .dyn-navbar-border-radius { border-radius: .5rem; }

  .dyn-hero-pic-height    {         height: 40%;}
  .dyn-hero-desc-height   {         height: 60%;}

  .dyn-msg-ct-hb{           height: 2.2rem; position:relative; top:1.5rem;    }
  .dyn-msg-ct-sanjuan{      height: 5.0rem; position:relative; top:0rem;    }
  .dyn-msg-ct-alcon{        height: 3.3rem; position:relative; top:1.2rem;    }

  .dyn-msg-ct-pollobox{     height: 3.3rem; position:relative; top:1rem;      }
  .dyn-msg-ct-ramos{        height: 2.5rem; position:relative; top:1.3rem;    }
  .dyn-msg-ct-grandy{       height: 2.8rem; position:relative; top:1.3rem;    }

  .dyn-msg-ct-rh{           height: 3.3rem; position:relative; top:1.5rem;    }
  .dyn-msg-ct-maton{        height: 4.8rem; position:relative; top:.5rem;       }
  .dyn-msg-ct-kesos{        height: 4.0rem; position:relative; top:.8rem;     }

  .dyn-msg-ct-carnesuno{    height: 3.0rem; position:relative; top:1.7rem;    }
  .dyn-msg-ct-sumerca{      height: 4.8rem; position:relative; top:.3rem;       }
  .dyn-msg-ct-viamsa{       height: 3.0rem; position:relative; top:1.5rem;    }

  .dyn-ct-div-props{         height: 32rem;   }

  .dyn-quotes::before{
    top: -1.8rem; left:.5rem; 
    width: 3rem; height: 3rem;
  }
  .dyn-quotes::after{
    bottom: -1.8rem;  right:.5rem; 
    width: 3rem; height: 3rem;
  }



}
/* + + + + + + + + + + + + +   END   MediaQueries utils     + + + + + + + + + + + + + */


/*fx*/
.dyn-fx-maquila-card{
  position: relative;
  transition: all .3s ease-in-out;
  background-color: white;
}
.dyn-fx-maquila-card:hover{
  background-color: var(--gamoBlack);
  color: white;
  transform: translateY(-3px);
}
.dyn-fx-maquila-card::before{
  position: absolute; content: '';

  border:3px solid var(--gamoRed);
  border-radius: 1rem;
  
  top: 50%; bottom: 50%; left: 50%; right: 50%;   z-index:-1;
  top: 0rem; bottom: 0rem; left: -1rem; right: 100%;
  top: calc(100% + 1rem)  ; bottom: -1rem; left: 0rem; right: 0rem;  z-index:0;
   
  transition: all .3s  ease-in-out;
}

.dyn-fx-maquila-card:hover::before{
  top: -.7rem;            left: -.7rem;
  bottom: -.7rem;         right: -.7rem;
}
.dyn-fx-hover-up{
  transition: all .3s ease-in-out;
}
.dyn-fx-hover-up:hover{
  transform: translateY(-2px);
}

/* fx aos*/
[data-aos="dyn-move-right2"] {
  transform: translateX(-130px) scale(.8) rotate(-15deg);
  opacity: .0; 
  transition-property: transform, opacity;
  &.aos-animate {
    transform: translateX(0px) scale(1) rotate(0deg);
    opacity: 1;
  }
}
[data-aos="dyn-move-up-zoomin"] {
  transform: translateY(10px) scale(.93);
  opacity: .5;
  transition-property: transform, opacity;
  &.aos-animate {
    transform: translateY(0px) scale(1);
    opacity: 1;  
  }
}
[data-aos="dyn-move-right"] {
  transform: translateX(-130px) scale(1);
  opacity: .0;
  transition-property: transform, opacity;
  &.aos-animate {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}
[data-aos="dyn-move-down"] {
  transform: translateY(-20px) ;
  opacity: 0;
  transition-property: transform, opacity;
  &.aos-animate {
    transform: translateY(0px) ;
    opacity: 1;
  }
}
[data-aos="dyn-pic"] {
  transform: scale(1.05);
  filter:blur(3px)  ;
  opacity: .1;
  transition-property: transform, opacity, filter;
  &.aos-animate {
    transform: translateY(0px) scale(1);
    opacity: 1;  
    filter: none;
  }
}

/* Codigo AP - Pagina Productos */

.dyn-cat-img{
  position: relative;
  transition: all .3s ease;
  
  width: 15rem;
  height: 15rem;
  border-radius: 1rem 1rem 0 0;
  z-index: 10;
}

.dyn-prod-circle{
  position: relative;
  transition: all .3s ease;
}
.dyn-prod-circle::before{
  position: absolute;
  content: "";

  transition: all .3s ease;
  
  width: 12rem; height: 12rem;
  top: calc(50% - 6rem);
  left: calc(50% - 6rem);
  
  background: var(--gamoGrey);
  border-radius: 50rem; 
  z-index: 1;
}

.dyn-prod-desc-line{
  border-bottom: 3px solid var(--gamoRed);
}

.dyn-prods-setup
{ 
  border: 1px solid black;  border-radius: 1.0rem;  
  height: 100%; width: 100%;
}

.dyn-prodpage-title-bg{
  background-color: var(--gamoRed); 
  border-radius: 3rem;
  color: white;
}

/* Efecto marco*/
.dyn-btn-prod{
  border-radius: 2rem;
  border: 1px solid #939DA1!important;
  transition: all .3s ease-in-out;
}
.dyn-btn-prod:hover, .dyn-btn-prod:focus{
  background-color: var(--gamoBlack); color: white;
}
.dyn-btn-prod:active {
  background-color:  black !important; color: red !important;
}


.dyn-prodpage-fx{
  transition: all .3s ease-in-out;
}
.dyn-prodpage-fx:hover .dyn-prod-circle::before {
  background-color: var(--gamoYellow3);
}
.dyn-prodpage-fx:hover .dyn-prod-circle  .dyn-cat-img {
  transform: scale(1.05) translateY(-1rem) rotate(-3deg);
  filter: brightness(120%);
}
.dyn-prodpage-fx::before {
  position: absolute; content: '';
  transition: all .3s ease;

  top: 20px; bottom: 20px;  left: 12px;  right: 12px;
  
  border: 2px solid white;
  border-radius: 1rem;
}
.dyn-prodpage-fx:hover:before {
  border: 2px solid var(--gamoRed);
}