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

    --text-hero-large:    3.0rem;
    --text-hero-mid:      1.8rem;
    --text-hero-small:    1.2rem;

    --text-header:          3.75rem;
    --text-section:         3rem;
    --text-subheader:       2.5rem;
    --text-larger:          2rem;
    --text-large:           1.5rem;
    --text-normal:          1rem;
    --text-small:           .95rem;
    --text-smaller:         .8rem;

    --darkgrey: #222327;
    --aqua: #80ffdb;
    --grey: #d2e9ea;
    --grey2: #d2e9ea;
    --yellow2: #e7ff56;
    --lightgrey: #f5f5f5;
    --mcj_grey: #233337;
    --mcj_grey2: #899496;
    --mcj_orange: #FB4B08;
    --mcj_blue1: #0979AF;
    --mcj_blue2: #0CB6F1;
    --mcj_blue3: #7CD9F8;
    --mcj_blue4: #B5FFFF;
    --mcj_back1: #EDEDED;
    --mcj_back2: #cccccc;
    --mcj_projects_1: #72edbb;
    --mcj_projects_2: #ffb703;
    --mcj_projects_3: #00446a;
    --mcj_projects_4: #f77f00;
    --mcj_projects_5: #899496;


}

body {
    overflow-x: hidden;
    margin:0px;
    display: block;
    font-family: Roboto, Poppins, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: black;
}

/* 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-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-section-top    {   padding-top: 6rem; }
.dyn-padding-section-mid    {   padding-top: 3rem; }
/*CODE AP*/
.dyn-padding-section-contact    {   padding-top: 3rem;      padding-bottom: 3rem; }

.dyn-border-radius          {   border-radius: 2.5rem;   }
.dyn-border-radius-mid    {   border-radius: 1.8rem;   }
.dyn-border-radius-small    {   border-radius: 1.0rem;   }

.dyn-btn-radius{    border-radius: 3rem;    }



/* screen m p utils*/


/*BG utils*/
.dyn-bg-bluemcj3{                background-color: var(--mcj_blue3); }

.dyn-bg-purple {                background-color: var(--purple); }
.dyn-bg-purple2 {               background-color: var(--purple2); }
.dyn-bg-darkgrey {              background-color: var(--darkgrey); }
.dyn-bg-aqua {                  background-color: var(--aqua); }
.dyn-bg-grey {                  background-color: var(--grey); }
.dyn-bg-grey2 {                 background-color: var(--mcj_grey2); }
.dyn-bg-yellow2 {               background-color: var(--yellow2); }
.dyn-bg-lightgrey {             background-color: var(--lightgrey); }
.dyn-bg-black {                 background-color: black; }
.dyn-bg-blue {                  background-color: blue; }
.dyn-bg-orange {                background-color: var(--mcj_orange); }
.dyn-bg-proj-btn-1 {            background-color: var(--mcj_projects_1); border: 3px solid var(--mcj_projects_1); }
.dyn-bg-proj-btn-2 {            background-color: var(--mcj_projects_2); border: 3px solid var(--mcj_projects_2);}
.dyn-bg-proj-btn-3 {            background-color: var(--mcj_projects_3); border: 3px solid var(--mcj_projects_3);}
.dyn-bg-proj-btn-4 {            background-color: var(--mcj_projects_4); border: 3px solid var(--mcj_projects_4);}
.dyn-bg-proj-btn-5 {            background-color: var(--mcj_projects_5); border: 3px solid var(--mcj_projects_5);}
.dyn-bg-proj-btn-1:hover {     
  background-color: #557; color: white !important; text-decoration: none; text-shadow: none;
  border: 3px solid var(--mcj_projects_1);   
}
.dyn-bg-proj-btn-2:hover {     
  background-color: #557; color: white !important; text-decoration: none; text-shadow: none;
  border: 3px solid var(--mcj_projects_2);   
}
.dyn-bg-proj-btn-3:hover {     
  background-color: #557; color: white !important; text-decoration: none; text-shadow: none;
  border: 3px solid var(--mcj_projects_3);   
}
.dyn-bg-proj-btn-4:hover {     
  background-color: #557; color: white !important; text-decoration: none; text-shadow: none;
  border: 3px solid var(--mcj_projects_4);   
}
.dyn-bg-proj-btn-5:hover {     
  background-color: #557; color: white !important; text-decoration: none; text-shadow: none;
  border: 3px solid var(--mcj_projects_5);   
}
/*END BG utils*/



/* + + + + + + + + + + + + +     text utils     + + + + + + + + + + + + + */
.dyn-text-bold-light {      font-weight: 500;}
.dyn-text-bold {            font-weight: 700;}

.dyn-purple {             color: var(--purple); }
.dyn-darkgrey {           color: var(--darkgrey); }
.dyn-aqua {               color: var(--aqua); }
.dyn-grey {               color: var(--grey); }
.dyn-yellow2 {            color: var(--yellow2); }
.dyn-lightgrey {          color: var(--lightgrey); }

.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-navbar-bg{           background: rgba(0, 0, 0, .025);  }
.nav-link {
    position: relative;
    font-weight: 400;
    color: var(--darkgrey) !important;  text-shadow: white .5px .3px;
    padding:2px;     border-radius: 0;
    transition: .3s;
}
.nav-link:hover{
    border-radius: 3rem;
    background-color: #eee;
    color: #555 !important;
    top:.5px;
    text-decoration: none;
}
.dyn-nav-item{          background-color: #CCC;    }
.dyn-nav-item-first{    border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;    }
.dyn-nav-item-last{     border-top-right-radius: 1rem; border-bottom-right-radius: 1rem;    }

.dyn-btn{
  position: relative;
  color: #eee;      
  background-color: var(--mcj_orange);
  border: 4px solid var(--mcj_orange);
  border-radius: 3rem;
  padding-top: .5rem; padding-bottom: .5rem;
  padding-left: 2.5rem; padding-right: 2.5rem;
  transition: .3s;
}
.dyn-btn:hover{
  border: 4px solid var(--mcj_orange);
  color: #444 !important; 
  text-decoration: none;
  background-color: white;
}
.dyn-btn:active{
  border: 4px solid var(--mcj_orange) !important;
  text-decoration: none;
  color: black !important; 
  background-color: #f8f8ff !important;
}

.dyn-btn-contact-text{                       color:white !important; }
.dyn-link-contact {         line-height: 140%;  color:#ddf; text-decoration: none;}
.dyn-link-contact:hover {                       color:#ffffff }
.dyn-text-contact{
    font-weight: 400;       line-height: 1.1;   color:#ddd;
    margin-top: .5rem;
}
.dyn-text-errormsg {
    font-weight: 400;       line-height: .9;    color:#ff8855;
    margin-top: .5rem;
    text-transform: uppercase;
}

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

/* hero */
.dyn-cover-height{          height: 100vh;  }

.dyn-align-cover{               vertical-align: center;     }
.dyn-hero-logo-height{          height: 2.8rem;               }
.dyn-hero-bg-height{            height: 90%;               }
.dyn-hero-grey-height{          height: 10%;               }

      /* hero pic portada */
.dyn-bg-hero{ 
  background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,.1)),
  url(../imgs/portada/portada12.png);
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

.dyn-hero-pic-height{       height: 100%;  }
.dyn-hero-icon-height{      height: auto; padding-left: 3px; }

.dyn-hero-main-square{
  border: 3px solid var(--mcj_blue3);
  border-radius: 2.5rem;

  position: relative;
  transition: .3s;
}
.dyn-hero-main-square:hover{    border-style:dashed;  }
.dyn-hero-main-square::before{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/standing_square.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    bottom: -1rem;     left: 50%; 
    width: 1rem; height: 2rem;
    z-index: 2;
    transition: .3s;
}
.dyn-hero-main-square:hover::before{
    transform: rotate(90deg) scale(1.3) ;
}
.dyn-hero-main-square::after{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/standing_square.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    top: -1rem;     left:80%; 
    width: 1rem; height: 2rem;
    z-index: 2;
    transition: .3s;
}
.dyn-hero-main-square:hover::after{         left:50%;  transform: rotate(90deg) scale(1.3);     }

/* hero */


/* interseccion 1 */

.dyn-connector1{        height: 15rem;        position: relative; }
.dyn-connector1::before{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/connector1.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    top: -2rem; bottom: -1rem;     left: 5rem;  right: 48%; 
    height: 100%;
    z-index: 2;
}

.dyn-msg-1{
  border: 3px solid var(--mcj_blue3);
  border-radius: 5rem;

  position: relative;
  background-color: white;
}
.dyn-msg-connector{       position: relative;   }
.dyn-msg-connector::before{
    position: absolute;     content: ""; 

    background: url(../imgs/icons/details/connector_msg_projects.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    top: 0; bottom: 0;     left: -100%;  right: 100%; opacity: 0;
    height: 100%;  width: 100%;
    z-index: -2;
    transition: all .8s;
}
.dyn-msg-connector:hover::before{       opacity: 1;  left: 0;  right: 0;  }


/* interseccion 1 */


/* Servicios */

.dyn-services-pic-1{
  background-color: rgba(255, 255, 255, .1);
  background-image: url(../imgs/servicios/sistema_hidrosanitario3.jpeg);
  filter: brightness(150%);
  background-size:100% auto; background-position: center; background-repeat: no-repeat; background-blend-mode: overlay;
}
.dyn-services-pic-2{
  background-image: url(../imgs/servicios/sistema_contra_incendios.jpeg);
  background-size:100% auto; background-position:center; background-repeat: no-repeat;
}
.dyn-services-pic-3{
  background-image: url(../imgs/servicios/sistema_gas_comercial.jpeg);
  background-size:100% auto; background-position:center; background-repeat: no-repeat;
}
.dyn-services-pic-4{
  background-image: url(../imgs/servicios/riego_residencial.jpeg);
  background-size:100% auto; background-position:center; background-repeat: no-repeat;
}
.dyn-services-pic-5{
  background-image: url(../imgs/servicios/04\ -\ equipos\ de\ bombeo.png);
  background-size:100% auto; background-position:center; background-repeat: no-repeat;
}
.dyn-services-pic-6{
  background-image: url(../imgs/servicios/ingenieria_albercas.jpeg);
  background-size:100% auto; background-position:center; background-repeat: no-repeat;
}

.dyn-services-bg{
  position: relative;
  background-image: url(../imgs/icons/services_small.svg);
  background-size:contain; background-position:top center; background-repeat: no-repeat;
}


.dyn-services-box{
  border: 3px solid var(--mcj_blue3);
  border-radius: 2.5rem;
  position: relative;
}
.dyn-services-app{
  position: relative;
}
.dyn-services-app::before{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/t_connector.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    top: -.825rem;     left: 49%; 
    width: 1.5rem; height: 2.5rem;
    z-index: 2;
}
.dyn-connector2{            position: relative; }
.dyn-connector2::before{
    position: absolute;     content: ""; 

    background: url(../imgs/icons/details/connector_services.svg);
    background-size:contain; background-position:center left; background-repeat: no-repeat;
    
    top: -.9rem; bottom: 0rem;     left: 50%;  right: 25%; 
    z-index: 2;
}
.dyn-border-bottom-fx{
    position: relative;
    border: 3px solid white;
    border-bottom: 3px solid var(--mcj_blue3);
    transition: .3s; 
}
.dyn-border-bottom-fx:hover{
    border: 3px solid var(--mcj_blue3); 
}
.dyn-border-bottom-fx::before{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/standing_square.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    bottom: -1rem;     left: -.5rem; 
    width: 1rem; height: 2rem;
    z-index: 2;
    transition: .3s;
}
.dyn-border-bottom-fx:hover::before{      bottom: 88%;    }
.dyn-border-bottom-fx::after{
    position: absolute;     content: "";  

    background: url(../imgs/icons/details/standing_square.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    bottom: -1rem;     right: -.5rem; 
    width: 1rem; height: 2rem;
    z-index: 2;
    transition: .3s;
}
.dyn-border-bottom-fx:hover::after{      bottom: 88%;    }

.dyn-services-square-top{
  border-radius: 2rem 2rem 0 0 ;
  background-color: var(--mcj_blue4);     
}

.dyn-services-square-botom{
  border-radius: 0 0 2rem 2rem;
  height: 13rem;
  transition: .3s;
}
.dyn-services-square-botom:hover{
  filter: contrast(110%)  brightness(110%);
}


.dyn-services-left{
  border-radius: 30px 0 0 30px;
  background-color: rgb(248, 246, 246); 
}

.dyn-services-stages{
  position: relative;

  border: 3px solid var(--mcj_blue3);
  border-radius: 2rem;
  transition: .3s;
}
.dyn-services-stages::before{
  position: absolute; content: "";

  border-radius: 2rem;
  background-color: var(--mcj_blue3); 
  height: 100%; width: 100%;
  z-index: -3;
}
.dyn-services-stages::after{
  position: absolute; content: "";

  background-color: white;
  height: 100%; width: 100%;
  top: 0;
  z-index: -2; 
  transition: .8s;
}
.dyn-services-stages:hover:after{
  background-color: white;
  height: 50%; 
}


.dyn-services-right{
  border-radius: 0 30px 30px 0;
  background-color: rgb(248, 246, 246); 
}


.dyn-service-type{
  border: 2px solid var(--mcj_blue1);
  border-radius: 2.5rem;
  background-color: white;
}

/* Servicios */





/* Nosotros */

.dyn-text-us-title{         color: white;    }
.dyn-text-bg-1{             background-color: white;    }

.dyn-us-bg{         background-color: var(--mcj_grey);    }

.dyn-us-square{     border-radius: 0 30px 30px 0 ;    }

.dyn-us-square2{
  border-radius: 2rem;
  background-color: var(--mcj_blue1);    
}

.dyn-us-square3{
  background-color: var(--mcj_blue3);
  border-radius: 2rem 0 0 2rem; 
  height: 100%;    
}

.dyn-us-square4{
  /* border-radius: 30px; */
  /* background-color: rgb(219, 218, 218);     */
  background-color: var(--mcj_blue3);
  border-radius: 0 30px 30px 0; 
  height: 100%;    
}
/* Nosotros */



/* Proyectos */

.dyn-projects-title-fx{
  position: relative;
  border-bottom: 3px solid var(--mcj_blue3);
}
.dyn-projects-title-fx::before{
  position: absolute;     content: "";  

  background: url(../imgs/icons/details/standing_square.svg);
  background-size:contain; background-position:center; background-repeat: no-repeat;
  
  bottom: -1rem;     left: 0%; 
  width: 1rem; height: 2rem;
  z-index: 2;
  transition: .5s;
  transition-delay: .3s;
}
.dyn-projects-title-fx:hover::before{
  left: 33%;
}
.dyn-projects-title-fx::after{
  position: absolute;     content: "";  

  background: url(../imgs/icons/details/standing_square.svg);
  background-size:contain; background-position:center; background-repeat: no-repeat;
  
  bottom: -1rem;     left: 10%; 
  width: 1rem; height: 2rem;
  z-index: 2;
  transition: .8s;
}
.dyn-projects-title-fx:hover::after{
  left: 66%;
}
    


.dyn-bg-projects-1{
  background-image: url(../imgs/Departamentos2.jpeg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dyn-bg-projects-2{
  background-image: url(../imgs/Comerciales.jpeg);
  background-image: url(../imgs/proyectos/proyecto_comercial.jpeg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dyn-bg-projects-3{
  background-image: url(../imgs/Departamentos.jpeg);
   background-image: url(../imgs/proyectos/proyecto_residencial_2.jpeg);
  background-size: cover; background-position: left center; background-repeat: no-repeat;
}
.dyn-bg-projects-4{
  background-image: url(../imgs/Naves.jpeg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.dyn-bg-projects-5{
  background-image: url(../imgs/Institucional_DS.jpeg);
  background-size: cover; background-position: center 20%; background-repeat: no-repeat;
}


.dyn-projects-square{
  border-radius: 30px;
  background-color: rgb(219, 218, 218);  
  height: 100%;
}
.dyn-projects-bg-text{
  background-color: rgba(0,0,0,.3); 
  border-bottom-left-radius: 1.8rem; border-bottom-right-radius: 1.8rem;
  text-shadow: 2px 2px 2px black;
}



/* transit msg 2 */
.dyn-msg-apps{    position: relative;     }
.dyn-msg-apps:hover::before{
  position: absolute; content: "";
  background-image: url(../imgs/icons/tubes_msg_top.svg);
  background-size: auto 100%; background-position: center; background-repeat: no-repeat;
  top: -3rem; height: 5rem; width: 100%;
  z-index: -11;
}
.dyn-msg-apps:hover::after{
  position: absolute; content: "";
  background-image: url(../imgs/icons/tubes_msg_bottom.svg);
  background-size: auto 100%; background-position: center; background-repeat: no-repeat;
  bottom: -4rem; height: 5rem; width: 100%;
}

.dyn-msg2-border1{
  position: relative;
  border-left: 3px solid transparent ; border-top: 3px solid transparent ;
}
.dyn-msg2-border1::before{
  position: absolute; content: "";

  border-left: 3px solid var(--mcj_blue3) ;
  top: 100%; bottom: 0%; left: 0; right: 0;
  transition: .2s;
}
.dyn-msg2-border1:hover::before{    top: 0%; z-index: -100;  }

.dyn-msg2-border1::after{
  position: absolute; content: "";

  border-top: 3px solid var(--mcj_blue3) ;
  top: 0%; bottom: 0%; left: 0; right: 100%;
  opacity: 0;
  transition:  .4s;
}
.dyn-msg2-border1:hover::after{    right: 0%; z-index: -100; opacity: 1; }


.dyn-msg2-border2{
  position: relative;
  border-right: 3px solid transparent ; border-bottom: 3px solid transparent ;
}
.dyn-msg2-border2::before{
  position: absolute; content: "";

  border-right: 3px solid var(--mcj_blue3) ;
  top: 0%; bottom: 100%; left: 0; right: 0;
  transition: .6s;
}
.dyn-msg2-border2:hover::before{    bottom: 0%; z-index: -100;  }

.dyn-msg2-border2::after{
  position: absolute; content: "";

  border-bottom: 3px solid var(--mcj_blue3) ;
  top: 0%; bottom: 0%; left: 100%; right: 0%;
  opacity: 0;
  transition:  .8s;
}
.dyn-msg2-border2:hover::after{    left: 0%;  z-index: -100; opacity: 1; }

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

  top: -5px; left:-3px; right: -3px; height: 2rem;

  background-image: url(../imgs/icons/top_unions.svg);
  background-size: 100% auto; background-position: top center; background-repeat: no-repeat;
  z-index: -10;
}
.dyn-msg2-bottom{
  position: relative;  
}
.dyn-msg2-bottom::before{
  position: absolute;  content: "";

  bottom: -4px; left:-5px; right: -3px; height: 2rem;

  background-image: url(../imgs/icons/bottom_unions.svg);
  background-size: 100% auto; background-position: bottom center; background-repeat: no-repeat;
  z-index: -10;
}




/* Forma de trabajo */

.dyn-work-table-height{
  height: 250px;
}

.dyn-work-main{
  border-radius: 30px;
  background-color: var(--mcj_back1);
  height: 100%;  
}

.dyn-work-square{
  border-radius: 30px;
  background-color: var(--mcj_blue4);
  height: 100%;  
}

.dyn-work-square2{
  border-radius: 30px;
  background-color: var(--mcj_blue3);
  height: 100%;  
}

.dyn-work-square3{
  border-radius: 30px;
  background-color: var(--mcj_blue2);
  height: 100%;  
}

.dyn-work-number{
  background-color: #333;
  color: white;
  border-radius: 3rem;
  height: 100%;
  align-content: center;
}

.dyn-work-title{
  background-color: #333;
  color: white;
  border-radius: 50px;
  height: 100%;
}

/* Forma de trabajo */





/* social - referencias */
.dyn-msg-connector2{       position: relative;   }
.dyn-msg-connector2::before{
    position: absolute;     content: ""; 

    background: url(../imgs/icons/details/connector_msg_projects.svg);
    background-size:contain; background-position:center; background-repeat: no-repeat;
    
    top: 0; bottom: 0;     left: 0;  right: 0; 
    height: 100%;  width: 100%;
    z-index: -2;
    transition: all .8s;
}

.dyn-ref-height{        height: 10rem;   }
.dyn-ref-padding{       height: 3rem;   }

.dyn-border-ref{        border-left: 1px solid lightgray;   border-right: 1px solid lightgray;   }
  /* social */



/* Contacto */
.dyn-contact-blueline{          border-bottom: 3px solid var(--mcj_blue3);      }
.dyn-contact-blueline-bottom{   position: relative;       border-bottom: 3px solid var(--mcj_blue3);      }
.dyn-contact-blueline-bottom::before{     
  position: absolute; content: "";

  background: url(../imgs/icons/details/standing_square.svg);
  background-size:contain; background-position:center left; background-repeat: no-repeat;
    
  top: -1rem;     left: 6%; 
  width: 1rem; height: 2rem;
  z-index: 2;       
}
.dyn-contact-blueline-left{     position: relative; border-left: 3px solid var(--mcj_blue3);      }
.dyn-contact-blueline-left::before{     
  position: absolute; content: "";

  background: url(../imgs/icons/details/horizontal_square.svg);
  background-size:contain; background-position:center left; background-repeat: no-repeat;
    
  top: -.9rem;     left: -.8rem; 
  width: 2rem; height: 1rem;
  z-index: 2;      
}
.dyn-contact-blueline-right{    position: relative; border-right: 3px solid var(--mcj_blue3);      }
.dyn-contact-blueline-right::before{     
  position: absolute; content: "";

  background: url(../imgs/icons/details/horizontal_square.svg);
  background-size:contain; background-position:center left; background-repeat: no-repeat;
    
  bottom: -.9rem;     right: -1.3rem; 
  width: 2rem; height: 1rem;
  z-index: 2;      
}

.dyn-contact-square-left{
  position: relative;
}
.dyn-contact-square-left::before{
  position: absolute; content: "";

  background: url(../imgs/icons/details/standing_square.svg);
  background-size:contain; background-position:center left; background-repeat: no-repeat;
    
  top: -1rem;     left: 0%; 
  width: 1rem; height: 2rem;
  z-index: 2;
}

.dyn-contact-square-right{
  position: relative;
}
.dyn-contact-square-right::before{
  position: absolute; content: "";

  background: url(../imgs/icons/details/standing_square.svg);
  background-size:contain; background-position:center right; background-repeat: no-repeat;
    
  top: -1rem;     right: 0%; 
  width: 1rem; height: 2rem;
  z-index: 2;
}


.dyn-contact-square{
  border-radius: 30px; 
  background-color: var(--mcj_grey);
}

.dyn-btn-contact {
  background-color: var(--mcj_orange);
  color: black;
  border: 2px solid var(--purple);
}

.dyn-btn-contact:hover {
  background-color: var(--aqua);
  color: black;
  transform: scale(1.05);
}

a  {  text-decoration: none;   color: inherit; }
a:hover {  text-decoration: underline;   color: inherit; }

input {  
  border-bottom-right-radius: 7px;
  height: 2rem; width: 100%; border: none; 
}
textarea {  
  border-bottom-right-radius: 7px; 
  width: 100%; border: none;
}


.dyn-tag-size-small { height: calc( 2.5rem  );   }
/* Contacto */


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



/* + + + + + + + + + + + + +     FXs     + + + + + + + + + + + + + */

.dyn-fx-move-right {   transition: transform .3s ease-in-out;   }
.dyn-fx-move-right:hover {  transform: translateX( 3rem) ;   }

.dyn-fx-move-right-little {   transition: transform .3s ease-in-out;   }
.dyn-fx-move-right-little:hover {  transform: translateX( 1rem) ;   }

.dyn-fx-move-left-little {   transition: transform .3s ease-in-out;   }
.dyn-fx-move-left-little:hover {  transform: translateX( -1rem) ;   }

.dyn-fx-move-up {   transition: transform .3s ease-in-out;   }
.dyn-fx-move-up:hover {  transform: translateY( -.3rem) ;   }

.dyn-fx-zoomin {   transition: transform .3s ease-in-out;   }
.dyn-fx-zoomin:hover {  transform: scale(1.03) ;   }

.dyn-fx-zoomin-little {   transition: transform .3s ease-in-out;   }
.dyn-fx-zoomin-little:hover {  transform: scale(1.02) ;   }

.dyn-fx-darken {   transition: all .3s ease-in-out;    }
.dyn-fx-darken:hover {  background: #111; color: white;  }

.dyn-fx-yellow {   transition: all .3s ease-in-out;    }
.dyn-fx-yellow:hover {  background: var(--orange); acolor: white;  }

.dyn-fx-proj{         transition: all .3s ease-in-out; transform: scale(.93) scaleX(.97);   }
.dyn-fx-proj:hover{   transform: scale(1.02) scaleX(1.05);    }

/* + + + + + + + + + + + + +     FXs     + + + + + + + + + + + + + */



/* + + + + + + + + + + + + +     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-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;    }

  .carousel-control-next{         width: 8%;   }
  .carousel-control-prev{         width: 8%;   }

@media screen and (min-width: 767px) and (max-width: 992px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorTablet) *.9 ); }
  .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) *.8 ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorTablet) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorTablet) ); }
  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorTablet)  *1.2 ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorTablet)  * 1.1); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorTablet) ); }

  .dyn-border-radius          {   border-radius: 1.5rem;   }


  .dyn-navbar-bg{             background: var(--mcj_blue1);     }
  .nav-link {                 color: white !important;}
  .dyn-nav-item{              background-color: transparent;    }
  .dyn-nav-item-first{        border-radius: 0rem;     }
  .dyn-nav-item-last{         border-radius: 0rem;     }

  .dyn-cover-height{          height: auto;  }
  .dyn-hero-icon-height{      height: 3rem; }


  .dyn-hero-spacer{           height: 3.5rem;  }
  .dyn-hero-pic-height{       height: 12rem;  }
  .dyn-bg-hero{ 
    background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url(../imgs/portada/PortadaCel.png);
    background-repeat: no-repeat; background-position: center; background-size: cover;
  }

  .dyn-connector1{        height: 7rem;  }
  .dyn-connector1::before{
    top: 1rem; bottom: -1rem;     left: 20%;  right: 20%; 
  }
  .dyn-msg-1{         border-radius: 2.5rem;     }
  .dyn-connector2::before{
    top: 0rem; bottom: 0rem;     left: 5%;  right: 5%; 
    background-position: center bottom;
  }

  .dyn-services-bg{                   background-image: none;     }
  .dyn-services-square-botom{         height: 10rem;        }
  .dyn-service-type{
    border-radius: 1.5rem;
    background-color: white;
  }

  .dyn-text-us-title{         color: black;    }
  .dyn-text-bg-1{             background-color: transparent;    }
  .dyn-us-bg{                 background-color: var(--lightgrey);    }
  .dyn-us-square3{
    background-color: transparent;
    border-radius: 2rem 0 0 2rem; 
    height: 100%;    
  }

  .dyn-height-projects {    height: 13rem !important; }
  .dyn-projects-bg-text{
    background-color: rgba(0,0,0,.25); font-weight: bold; text-shadow: 1px 1px 2px black;
  }

  .dyn-msg2-border1::before{    top: 0%;    }
  .dyn-msg2-border1::after{     right: 0%;    opacity: 1;}
  .dyn-msg2-border2::before{    bottom: 0%;    }
  .dyn-msg2-border2::after{     left: 0%;     opacity: 1; }
  .dyn-msg-apps::before{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_top.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    top: -3rem; height: 5rem; width: 100%;
    z-index: -11;
  }
  .dyn-msg-apps::after{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_bottom.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    bottom: -4rem; height: 5rem; width: 100%;
  }

  .dyn-ref-height{                height: 19rem;   }
  .dyn-ref-padding{               height: 2rem;   }
  .carousel-control-next{         width: 8%;   }
  .carousel-control-prev{         width: 8%;   }
}
@media screen and (min-width: 577px) and (max-width: 767px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCel) *.9 ); }
  .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) ); }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCel) *.8 ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCel)  ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCel)   * 1.3   ) ; }
  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCel)  * 1.5 ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCel)   * 1.4); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCel) * 1.6 ); }

  .dyn-border-radius          {   border-radius: 1.5rem;   }


  .dyn-navbar-bg{             background: var(--mcj_blue1);     }
  .nav-link {                 color: white !important;}
  .dyn-nav-item{              background-color: transparent;    }
  .dyn-nav-item-first{        border-radius: 0rem;     }
  .dyn-nav-item-last{         border-radius: 0rem;     }

  .dyn-cover-height{          height: auto;  }
  .dyn-hero-icon-height{      height: 3rem;  }


  .dyn-hero-spacer{           height: 3.5rem;  }
  .dyn-hero-pic-height{       height: 9rem;  }
  .dyn-bg-hero{ 
    background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url(../imgs/portada/PortadaCel.png);
    background-repeat: no-repeat; background-position: center; background-size: cover;
  }

  .dyn-connector1{        height: 7rem;  }
  .dyn-connector1::before{
    background-image: none;
    top: 1rem; bottom: -1rem;     left: 20%;  right: 20%; 
  }
  .dyn-msg-1{         border-radius: 2.5rem;     }
  .dyn-connector2::before{
    top: 0rem; bottom: 0rem;     left: 5%;  right: 5%; 
    background-position: center bottom;
  }

  .dyn-services-bg{                   background-image: none;     }
  .dyn-services-square-botom{         height: 10rem;        }
  .dyn-service-type{
    border-radius: 1.5rem;
    background-color: white;
  }

  .dyn-text-us-title{         color: black;    }
  .dyn-text-bg-1{             background-color: transparent;    }
  .dyn-us-bg{                 background-color: var(--lightgrey);    }
  .dyn-us-square3{
    background-color: transparent;
    border-radius: 2rem 0 0 2rem; 
    height: 100%;    
  }

  .dyn-height-projects {    height: 13rem !important; }
  .dyn-projects-bg-text{
    background-color: rgba(0,0,0,.25); font-weight: bold; text-shadow: 1px 1px 2px black;
  }

  .dyn-msg2-border1::before{    top: 0%;    }
  .dyn-msg2-border1::after{     right: 0%;    opacity: 1;}
  .dyn-msg2-border2::before{    bottom: 0%;    }
  .dyn-msg2-border2::after{     left: 0%;     opacity: 1; }
  .dyn-msg-apps::before{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_top.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    top: -3rem; height: 5rem; width: 100%;
    z-index: -11;
  }
  .dyn-msg-apps::after{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_bottom.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    bottom: -4rem; height: 5rem; width: 100%;
  }

  .dyn-ref-height{                height: 19rem;   }
  .dyn-ref-padding{               height: 2rem;   }
  .carousel-control-next{         width: 8%;   }
  .carousel-control-prev{         width: 8%;   }
}
@media screen and (min-width: 425px) and (max-width: 576px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCelMini) *.9 ); }
  .dyn-text-hero-mid  {       font-size: calc( var(--text-hero-mid) * var(--factorCelMini) ); }
  .dyn-text-hero-small  {     font-size: calc( var(--text-hero-small) * var(--factorCelMini) ); }

  .dyn-text-header {          font-size: calc( var(--text-header) * var(--factorCelMini) ); }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCelMini) *.8 ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCelMini) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCelMini)  * .8); }
  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCelMini)  *1.0 ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCelMini)  * 1.1); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCelMini) ); }

  .dyn-border-radius          {   border-radius: 1.5rem;   }


  .dyn-navbar-bg{             background: var(--mcj_blue1);     }
  .nav-link {                 color: white !important;}
  .dyn-nav-item{              background-color: transparent;    }
  .dyn-nav-item-first{        border-radius: 0rem;     }
  .dyn-nav-item-last{         border-radius: 0rem;     }

  .dyn-cover-height{          height: auto;  }

  .dyn-hero-spacer{           height: 3.5rem;  }
  .dyn-hero-pic-height{       height: 9rem;  }
  .dyn-bg-hero{ 
    background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url(../imgs/portada/PortadaCel.png);
    background-repeat: no-repeat; background-position: center; background-size: cover;
  }

  .dyn-connector1{        height: 7rem;  }
  .dyn-connector1::before{
    background-image: none;
    top: 1rem; bottom: -1rem;     left: 20%;  right: 20%; 
  }
  .dyn-msg-1{         border-radius: 2.5rem;     }
  .dyn-connector2::before{
    top: 0rem; bottom: 0rem;     left: 5%;  right: 5%; 
    background-position: center bottom;
  }

  .dyn-services-bg{                   background-image: none;     }
  .dyn-services-square-botom{         height: 10rem;        }
  .dyn-service-type{
    border-radius: 1.5rem;
    background-color: white;
  }

  .dyn-text-us-title{         color: black;    }
  .dyn-text-bg-1{             background-color: transparent;    }
  .dyn-us-bg{                 background-color: var(--lightgrey);    }
  .dyn-us-square3{
    background-color: transparent;
    border-radius: 2rem 0 0 2rem; 
    height: 100%;    
  }

  .dyn-height-projects {    height: 13rem !important; }
  .dyn-projects-bg-text{
    background-color: rgba(0,0,0,.25); font-weight: bold; text-shadow: 1px 1px 2px black;
  }

  .dyn-msg2-border1::before{    top: 0%;    }
  .dyn-msg2-border1::after{     right: 0%;    opacity: 1;}
  .dyn-msg2-border2::before{    bottom: 0%;    }
  .dyn-msg2-border2::after{     left: 0%;     opacity: 1; }
  .dyn-msg-apps::before{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_top.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    top: -3rem; height: 5rem; width: 100%;
    z-index: -11;
  }
  .dyn-msg-apps::after{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_bottom.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    bottom: -4rem; height: 5rem; width: 100%;
  }

  .dyn-ref-height{                height: 19rem;   }
  .dyn-ref-padding{               height: 2rem;   }
  .carousel-control-next{         width: 10%;   }
  .carousel-control-prev{         width: 10%;   }

}
@media screen and (max-width: 424px) {
  .dyn-text-hero-large  {     font-size: calc( var(--text-hero-large) * var(--factorCelMicro) *.9 ); }
  .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) ); }
  .dyn-text-subheader {       font-size: calc( var(--text-subheader) * var(--factorCelMicro) *.8 ); }
  .dyn-text-larger {          font-size: calc( var(--text-larger) * var(--factorCelMicro) ); }
  .dyn-text-large {           font-size: calc( var(--text-large) * var(--factorCelMicro) ); }
  .dyn-text-normal {          font-size: calc( var(--text-normal) * var(--factorCelMicro)  *1.2 ); }
  .dyn-text-small {           font-size: calc( var(--text-small) * var(--factorCelMicro)  * 1.1); }
  .dyn-text-smaller {         font-size: calc( var(--text-smaller) * var(--factorCelMicrol) ); }

  .dyn-border-radius          {   border-radius: 1.5rem;   }


  .dyn-navbar-bg{             background: var(--mcj_blue1);     }
  .nav-link {                 color: white !important;}
  .dyn-nav-item{              background-color: transparent;    }
  .dyn-nav-item-first{        border-radius: 0rem;     }
  .dyn-nav-item-last{         border-radius: 0rem;     }

  .dyn-cover-height{          height: auto;  }

  .dyn-align-cover{           vertical-align: top;     }

  .dyn-hero-spacer{           height: 3.5rem;  }
  .dyn-hero-pic-height{       height: 9rem;  }
  .dyn-bg-hero{ 
    background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url(../imgs/portada/PortadaCel.png);
    background-repeat: no-repeat; background-position: center; background-size: cover;
  }

  .dyn-connector1{        height: 7rem;  }
  .dyn-connector1::before{
    background-image: none;
    top: 1rem; bottom: -1rem;     left: 20%;  right: 20%; 
  }
  .dyn-msg-1{         border-radius: 2.5rem;     }
  .dyn-connector2::before{
    top: 0rem; bottom: 0rem;     left: 5%;  right: 5%; 
    background-position: center bottom;
  }

  .dyn-services-bg{                   background-image: none;     }
  .dyn-services-square-botom{         height: 10rem;        }
  .dyn-service-type{
    border-radius: 1.5rem;
    background-color: white;
  }

  .dyn-text-us-title{         color: black;    }
  .dyn-text-bg-1{             background-color: transparent;    }
  .dyn-us-bg{                 background-color: var(--lightgrey);    }
  .dyn-us-square3{
    background-color: transparent;
    border-radius: 2rem 0 0 2rem; 
    height: 100%;    
  }

  .dyn-height-projects {    height: 13rem !important; }
  .dyn-projects-bg-text{
    background-color: rgba(0,0,0,.25); font-weight: bold; text-shadow: 1px 1px 2px black;
  }

  .dyn-msg2-border1::before{    top: 0%;    }
  .dyn-msg2-border1::after{     right: 0%;    opacity: 1;}
  .dyn-msg2-border2::before{    bottom: 0%;    }
  .dyn-msg2-border2::after{     left: 0%;     opacity: 1; }
  .dyn-msg-apps::before{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_top.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    top: -3rem; height: 5rem; width: 100%;
    z-index: -11;
  }
  .dyn-msg-apps::after{
    position: absolute; content: "";
    background-image: url(../imgs/icons/tubes_msg_bottom.svg);
    background-size: auto 100%; background-position: center; background-repeat: no-repeat;
    bottom: -4rem; height: 5rem; width: 100%;
  }

  .dyn-ref-height{                height: 19rem;   }
  .dyn-ref-padding{               height: 2rem;   }
  .carousel-control-next{         width: 12%;   }
  .carousel-control-prev{         width: 12%;   }

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


/* Codigo AP */
.dyn-font-bold-6{     font-weight: 600;    }

.dyn-cat-img{     
  color:inherit; 
  width: 100%;
  height: 20rem;
  border-radius: 1rem 1rem 0 0;
}
.dyn-cat-img:hover{
    filter: grayscale(1%) brightness(.95) contrast(95%);
}

.dyn-project-title{
  background-color: #779; 
  border-radius: 5px;
}

.dyn-bg-projects {             
  background-color: var(--lightgrey);
  border: 1px solid  var(--lightgrey);
}
.dyn-projects-text-radius{        border-radius:0 0 1rem 1rem;    }

.dyn-cursor{        cursor:default  }
.dyn-cursor:hover{  cursor:zoom-in  }

.dyn-btn-project {
  background-color: var(--mcj_blue1);
  color: black;
  border: 2px solid var(--purple);
}

.dyn-btn-project:hover {
  background-color: var(--mcj_blue2);
  color: black;
  transform: scale(1.05);
}

.dyn-btn-prod {
    background-color:  var(--mcj_blue1); 
    color:white; 
    text-decoration: none;
    transition-duration: 0.4s;
    border: 2px solid white !important;
}
.dyn-btn-prod:hover {
    background-color: #00295F; 
    color: white;
    text-decoration: none;
    border: 2px solid orange !important;
}
.dyn-btn-prod:focus{
    background-color: #00295F; 
    color: white;
    text-decoration: none;
    border: 1px solid black;
}
.dyn-btn-prod:active{
    background-color: #00094F !important; 
    color: white !important;
    text-decoration: underline;
    border: 1px solid red;
}

/* fx aos*/
[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-pic"] {
  transform: scale(.93);
  filter:blur(3px) grayscale(100) contrast(3) brightness(10) ;
  opacity: .1;
  transition-property: transform, opacity, filter;
  &.aos-animate {
    transform: translateY(0px) scale(1);
    opacity: 1;  
    filter: none;
  }
}