.modulos{	
    color: white;	    
    text-align:center;
	top:8rem;		
	margin-left:0;
	margin-top:0;
	margin-bottom:auto;	
	margin-right:auto;	
	width:100%;
	max-width:1100px;
	min-width:650px;
	margin:0 auto;	
	height: 32rem; 	
	position:relative;
}
.imodu{
	top:-10em;	
	margin-right:0;
	margin-top:0;
	right:0;	
	position: absolute;
}
.imodul{
	top:0;	
	margin-right:0;
	margin-top:0;
	width:28em;
	height:46em;	
}
.modulot{
    font-family:"Arial Rounded MT","Arial Black",Arial;
	color:black;	
	font-size:6vw;
	top:8vw;			
	width:45%;
	height:15rem;	
	position: absolute;
    left:32%;
    margin-left:2rem;   
}
.prosysm{
    font-family:"Franklin Gothic Heavy","Arial Black",Arial;
    color:white;	
    font-size:10vw;
    top:12vw;
    width:45%;
    height:15rem;
	position:absolute;
	left:32%;	
	margin-left:2rem;  
}

@media (max-width:700px)	{.prosysm{	
								  font-size:75px;
								  top:350px;

								 }
							 .modulot{
							 	  font-size:50px;
								  top:300px;
								}

							}
.modulo1,.modulo2,.modulo3,.modulo4,.modulo5{
	background:#005C9A;	
	margin-top:1rem;
	font-size:1.4rem;
	top:1rem;			
	width:30%;
	height:5rem;	
	position: absolute;
    left:0;
    margin-left:2rem;    
    max-width:24rem;
    transition:all .8s; 
    border-radius: 6px;      
}
.modulo2{
	background:#5D006A;		
	top:7rem;		
}
.modulo3{
	background:#9A0700;		
	top:13rem;		
}
.modulo4{
	background:#9A7000;		
	top:19rem;		
}
.modulo5{
	background:#4F9A00;		
	top:25rem;		
}
.modulom{
	margin-top:1.4rem;
}
.modulc,.modulv,.moduli,.moduln,.modul5{
	background:#BBDEF0;		
	top:-500rem;		
	margin-left:1.6rem;   
	width:0;
	height:0;	
	position:relative;
	text-align:left;
    margin-right:9.5rem;    
	right:90rem;    
    opacity:.9;
    transition:all .4s; 
    font-size:1.4rem;      
}
.modulct,.modulvt,.modulit,.modulnt,.modul5t{
	padding:1rem 0;
	background:#005C9A;	
	color: white;
	font-size:1.8rem;
	width:100%;	
	left:0;
	text-align:center;
	margin-left:0;
	margin-top:0;	
	opacity:0; 
}
.modulct1,.modulvt1,.modulit1,.modulnt1,.modul5t1{
	margin-left:0;
	margin-top:0; 
	margin-bottom:0;
	margin-right:0;
}
.modulcf,.modulvf,.modulif,.modulnf,.modul5f{
	font-family:"Arial Rounded MT",Arial,"Arial Black";
	padding:0 0;
	color:black;
	height:100%;	
	font-size:1.5rem;
    margin-left:2.6rem;
    line-height:1.7rem;
    margin-top:1rem;
}
.comprasg,.ventasg,.inventariosg,.nominag,.m5g{
	font-family:"Arial Rounded MT",Arial,"Arial Black";	
	padding:0 0;
	color:black;	
	font-size:1.5rem;
    left:3rem;
    line-height:1.7rem;
    margin-top:.8rem;
    margin-right:2rem;
    opacity:0;
}
/* **************************************************************************
                                ventanas emergentes
   **************************************************************************/  
/* *************************
            compras
   *************************/		   
.modulct{
     background:#005C9A;		 
}
.comprasg{
	list-style-image:url("media/check3.png");		
}   
/* *************************
            ventas
   *************************/		   
.modulvt{
     background:#5D006A;	 
}
.ventasg{
	list-style-image:url("media/check3.png");
	
}
/* *************************
            inventarios
   *************************/		   
.modulit{     
	 background:#9A0700;
}
.inventariosg{
	list-style-image:url("media/check3.png");
}	
/* *************************
            nomina
   *************************/		   
.modulnt{
     background:#9A7000;
}
.nominag{
	list-style-image:url("media/check3.png");	
}		
/* *************************
         contabilidad
   *************************/		   
.modul5t{
     background:#4F9A00;	 
}
.m5g{
	list-style-image:url("media/check3.png");	
}
/***************************************************
               hover modulo de compras
****************************************************/
.modulo1:hover{
	background:#65C1FF;	
	transition:all .8s; 
	color:black;
	font-size:1.5rem;
}
.modulo1:hover .modulc{
	width:190%;
	top:-7rem;
	right:-98%;	
	height:40rem;	
	transition:all .4s; 
}
.modulo1:hover .modulct{
	opacity:1;	
	transition:all .8s; 
}
.modulo1:hover .comprasg{
    opacity:1;
    transition:all .8s; 
}    		
/***************************************************
               hover modulo de ventas
****************************************************/
.modulo2:hover
		{background:#E735FF;
		 transition:all .8s; 
		 color:black;
		 font-size:1.5rem;	
		}
.modulo2:hover .modulv{
	width:190%;
	top:-13rem;	
	height:39rem;
	right:-98%;	
	transition:all .4s; 
}
.modulo2:hover .modulvt{
	opacity:1;	
	transition:all .8s; 
}
.modulo2:hover .ventasg{
    opacity:1;
    transition:all .8s; 
}
/***************************************************
               hover modulo de inventarios
****************************************************/
.modulo3:hover
		{background:#FF6C65;
		 transition:all .8s; 
		 color:black;
		 font-size:1.5rem;	
		}
.modulo3:hover .moduli{
	width:190%;
	top:-19rem;	
	height:36rem;
	right:-98%;	
	transition:all .4s; 
}
.modulo3:hover .modulit{
	opacity:1;	
	transition:all .8s; 
}
.modulo3:hover .inventariosg{
    opacity:1;
    transition:all .8s; 
}    
/***************************************************
               hover modulo de nomina
****************************************************/
.modulo4:hover
		{background:#FFD565;
		 transition:all .8s;
		 color:black; 
		 font-size:1.5rem;	
		}
.modulo4:hover .moduln{
	width:190%;
	top:-25rem;
	height:38rem;
	right:-98%;		
	transition:all .4s; 
}
.modulo4:hover .modulnt{
	opacity:1;	
	transition:all .8s; 
}
.modulo4:hover .nominag{
    opacity:1;
    transition:all .8s; 
}    
/***************************************************
               hover modulo de contabilidad
****************************************************/
.modulo5:hover
		{background:#9BFF31;
		 transition:all .8s; 
		 color:black;
		 font-size:1.5rem;	
		}
.modulo5:hover .modul5{
	width:190%;
	top:-33rem;	
	height:40rem;	
	right:-98%;	
	transition:all .4s; 
}
.modulo5:hover .modul5t{
	opacity:1;	
	transition:all .8s; 
}
.modulo5:hover .m5g{
    opacity:1;
    transition:all .8s; 
}    
.modul5f{
	height:100%;	
}		
/* ***************************************************
              cambio para ancho de ventana
   ***************************************************/				
@media (max-width:900px)	{.comprasg{
									font-size:1.3rem;
									}
							 .ventasg{
									font-size:1.3rem;
									}
							 .inventariosg{
									font-size:1.3rem;
									}
							 .nominag{
									font-size:1.3rem;
									}
							 .m5g{
									font-size:1.3rem;
									}								
							}