.engraneinstruccion{
    font-size: .3em;
    display: inline-block;

}

#contenedor_engranes{
    margin:0px;
    width: 100%;
    height: 500px;
    position:absolute;
    /* background-color: gray; */
}

.logo{
    width:60%;
    position:absolute;
    left: 50%; /* relative to nearest positioned ancestor or body element */
    top: 50%; /*  relative to nearest positioned ancestor or body element */
    transform: translate(-50%, -50%); /* relative to element's height & width */
}

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

p{
    margin:0;
    padding:0;
}

.descripciponengranes{
    position: absolute ;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    display:none;
}

.mensajeengrane{
    margin:20%;
    height: 50%;
    border: 10px solid#E8203B;
    border-style: double;
}




.pantallatransicion{
    position: absolute ;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #FFF;
    z-index: -1;
}



/* 
.desc { 
	position: relative; 
	float: left;
	font-size: 2.5em;
}

.desc span {
    position:absolute;
    right:0;
    width:0;
    background: white;
    border-left: 1px solid #000;
    animation: escribir 5s steps(30) 1 alternate;
}

@keyframes escribir {
    from { width: 100% }
    to { width:0 }
} */


@keyframes typewriter{
    from{width: 0;}
    to{width: 24em;}
  }
  @keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.75);}
    to{border-right-color: transparent;}
  }

  .line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}


/* Media query */


@media (max-width: 1199px) {
    #contenedor_engranes{
        /* background-color: #E8203B */
    }
    .mensajec{
        left: 0px;    
    }
    
}

@media (max-width: 991px) {

    #secUno {
        height: 1200px !important;
    }

    #contenedor_engranes{
      
    transform: rotate(90deg);
    top: 50px;
    /* background-color: green;  */
      
    }

    .size_engrane{
        width: 290px;
        height: 290px;
    }
    .mensajec{
        transform: rotate(-90deg);
        top: 65px;
        left: 60px;
    }
    

    #imgcgob{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }

    #imgcfirma{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }
    #imgctrib{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }
    #imgcpago{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }
    #imgcsig{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }
    #imgcius{
        transform: rotate(-90deg);
        transform-origin: 0% 50%;

    }


   
}

@media (max-width: 767px) {

    #secUno {
        height: 1100px !important;
    }

    #contenedor_engranes{
               
        width: 1000px;
        transform-origin: 25% 45%;
            
    }

    .mensajec{
        left: -210px;  
            top: 87px;  
    }
    
    .size_engrane{
        width: 250px;
        height: 250px;
    }
}



@media (max-width: 576px) {

    
}

@media (max-width: 426px) {

    #secUno {
        height: 755px !important;

    }

    #contenedor_engranes{
               
        width: 690px;
        top:-45px;
        height:450px;
        transform-origin: 25% 45%;

            
    }

    .mensajec{
        top: 45px;
        left: -65px; 
    }
    
    .size_engrane{
        width: 190px;
        height: 190px;
    }
    

    
}





@media (max-width: 376px) {

    #secUno {
        height: 755px !important;

    }

    #contenedor_engranes{
               
        width: 690px;
        top:10px;
        height:340px;
        transform-origin: 22% 43%;

            
    }

    .mensajec{
        left: -120px;
        top: 18px; 
    }
    
    .size_engrane{
        width: 180px;
        height: 180px;
    }
    
    

    
}

@media (max-width: 321px) {

    #secUno {
        height: 740px !important;

    }

    #contenedor_engranes{
               
        width: 610px;
        top:10px;
        height:280px;
        transform-origin: 20% 45%;
        /* background-color: blue; */

            
    }

    .mensajec{
        left: -80px;
        top: 0px;
        margin: 0px;
        padding: 0px;
        width:100%
    }
    
    .size_engrane{
        width: 150px;
        height: 150px;
    }
    
    

    
}