#categorias {
	background: url(../SVimagenes/pattern1.jpg) 0 0 repeat;
    -webkit-animation: animate_background 50s linear 0s infinite;
    -moz-animation: animate_background 50s linear 0s infinite;
    -o-animation: animate_background 50s linear 0s infinite;
    animation: animate_background 50s linear 0s infinite;
}


@-webkit-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -500px;
    } 
}
@-moz-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -500px;
    } 
}
@-o-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -500px;
    } 
}
@keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -500px;
    } 
}



#projectcontainer { 
	background: url(../SVimagenes/index2.jpg) 0 0;
	background-size:cover;
    } 


/*
#iconoscontainer img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	transition: top 20s linear;
		transition-property: top;
		transition-duration: 20s;
		transition-timing-function: linear;
		transition-delay: initial;

}
*/

#containeritems {
	box-sizing: border-box;
	z-index:2;
	max-width:1100px;
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	column-count:2;
	column-width:auto;
	column-gap:40px;
	border:2px dashed #005b95;
	border-right:none;
	border-left:none;
	padding:25px 25px 0 20px;
	background:#ffcb05;

}


#containeritems a.items {
	display:block;
	font-family:'open_sansbold';
	padding-bottom:25px;
	font-size:1em;
	text-transform: uppercase;
	color:#005b95;
	position:relative;
	letter-spacing:0.2em;
	-webkit-column-break-inside: avoid;
	break-inside:avoid-column;
	page-break-inside: avoid;
	white-space:nowrap;
	-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
	
}

#containeritems a.items:hover {
	color:#48cbfd;
}


#containeritems a.items:before{ font-family:iconos;
content: "\f135";
letter-spacing:10px;}


/* bloque  *************************************/
.bloque{ height:100%;
position:relative;
box-sizing: border-box;}




.bloque .bloquesito{position:absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width:95%;
max-width:1000px;

}

.bloque .boton{position:absolute;
left: 50%;
bottom: 13px;
transform: translate(-50%, 0);
text-transform:uppercase;
font-size:15px;
display:inline-block;
padding:0 15px;
border-radius:3px;
height:40px;
line-height:40px;
cursor:pointer;
transition:background-color 0.3s linear;
}
/*
.boton:hover{ background-color:#f7713c;
color:#fff;
border:solid 1px transparent!important;}*/


.bajar:after{ font-family:iconos;
content: "\f107";
display:inline-block;
margin:0 0 0 10px;}



.bloquesito .volver{ 
position:absolute;
display:block;
right: 0;
top: -50px;
left:0;
color:#005b95;
width:30px;
height:30px;
font-size:30px;
text-align:center;
line-height:30px;
cursor:pointer;
z-index:4;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}


.bloquesito .volver:hover{ 
color:#48cbfd;
}

.bloquesito .volver:before{ font-family:iconos;
content: "\f00d";}

.bloquesito h1{ font-size:38px;
margin:0 0 50px 0;}

.bloquesito h1.seccionestitulo{ margin:0 0 30px 0;
text-align:center;
padding:0 30px;}

/*
.bloquesitofuera #containeritems{
column-count:2;
column-width:auto;
column-gap:35px;
-webkit-column-count:2;
-webkit-column-width:auto;
-webkit-column-gap:35px;
-ms-column-count:2;
-ms-column-width:auto;
-ms-column-gap:35px;
font-size:15px;
}

.ub{-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}*/

.bloquesitofuera #texto h2{ margin:0 0 10px 0; font-size:29px;}


.bloquesitofuera #texto p{ margin:0 0 15px 0;
-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;
line-height:1.2em;
}

.bloquesitofuera #texto p.especializquierdo{font-size:1.5em; text-align:right;}

.bloquesitofuera #texto ul{-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}

.bloquesitofuera #texto ul li{ margin:0 0 11px 0;
line-height:1.3em;
}

li:before{ font-family:iconos;
content:"\f00c";
letter-spacing:10px;}

/*cerro bloque **********************************/










/* iconos  *************************************/
#iconoscontainer{
	overflow:hidden;
}

#iconoscontainer #iconos{ top:50%;}

#iconos a.icono{ 
color:#FFF; 
text-align:center;
display:block;
float:left;
width:33.3333333333333333%;
height:300px;
min-height:300px;
padding:20px;
transition:all 0.3s linear;
overflow:hidden;
cursor:pointer;
border: 2.5px solid #005b95;
}


#iconos a.icono:nth-of-type(1){ background-color:rgba(255, 203, 5, 1)}
#iconos a.icono:nth-of-type(2){ background-color:rgba(255, 203, 5, 1)}
#iconos a.icono:nth-of-type(3){ background-color:rgba(255, 203, 5, 1)}
/*#iconos a.icono:nth-of-type(4){ background-color:rgba(0,0,0,0.06)}
#iconos a.icono:nth-of-type(5){ background-color:rgba(0,0,0,0.02)}
#iconos a.icono:nth-of-type(6){ background-color:rgba(0,0,0,0.06)}*/

#iconos a.icono:hover{ 
	background-color:rgba(72, 203, 253, 1);
	border: 2px dashed #005b95;
	

}


#iconos h1{ 
	color:#48cbfd;
	font-size: 2.5em;
	text-transform: uppercase;
	font-family: 'open_sansextrabold';
	padding-bottom: 50px;
	text-shadow: 3px 6px #005b95;
	line-height:1.2em;
}






#iconos a.icono h2{ 
	margin:30px 0 7px 0; 
	font-size:1.8em;
	transition:margin 0.3s linear;
	color:#005b95;
}

#iconos a.icono:hover h2{ 
	margin-top:0;
}

#iconos a.icono h3{  
	font-size:;
	color:#005b95;
	font-family:'open_sanslight_italic';
}

#iconos a.icono p{ line-height:1.2em;
font-size:0.9em;
opacity:0;
transition:opacity 0.3s linear;}

#iconos a.icono:hover p{ opacity:1;}

.icono h2:before{ 
display:block;
text-align:center;
font-size:80px;
font-family:flaticon;
margin:0 0 15px 0;
min-height:70px;
line-height:70px;}




#iprees h2:before, #prees h1:before{content:url(../SVimagenes/icons/icon6.png);}
/*#iecommerce h2:before, #ecommerce h1:before{content:url(SVimagenes/icons/icon6.png);}
#ierp360 h2:before, #erp360 h1:before{content:url(SVimagenes/icons/icon6.png); }*/
#iprimariauno h2:before, #primariauno h1:before{content:url(../SVimagenes/icons/icon7.png);}
#iprimariados h2:before, #primariados h1:before{content:url(../SVimagenes/icons/icon8.png);}
/*#icrm h2:before, #crm h1:before{content:url(SVimagenes/icons/icon6.png);}*/


#iconoscontainer .boton:hover{ background:#151515;}

/*cerro iconos **********************************/








/* modulera  *************************************/
#modulera{position:fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width:95%!important;
max-width:800px!important;
box-sizing: border-box;
color:#FFF;
overflow:hidden;
border-radius:4px;
display:none;
}

#modulera .icono{ display:block;
width:33.3333333333333333%;
float:left;
padding:20px;
overflow:hidden;
height:230px;
text-align:center;
cursor:pointer;
color:#fff;
}

#modulera .icono h2{ margin:0 0 6px 0;}
#modulera .icono p{ font-size:13px; line-height:1.2em;}


#modulera a.icono:nth-of-type(1){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(2){ background-color:rgba(0,0,0,0.06)}
#modulera a.icono:nth-of-type(3){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(4){ background-color:rgba(0,0,0,0.06)}
#modulera a.icono:nth-of-type(5){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(6){ background-color:rgba(0,0,0,0.06)}


#modulera a.icono:hover{ background-color:rgba(0,0,0,0.5);}

/*cerro modulera **********************************/



/*generales bloques de contenido de los iconos***************/

.bloque .bloquesitofuera{left:150%;
top:55%;}

.bloquesitofuera h1:before{ display:block;
font-family:flaticon;
text-align:center;
font-size:70px;
height:70px;
}


/* cerro generales bloques de contenido de los iconos***************/



/*prees ****************************************/

#prees .volver{ bottom:40px;}

/* cerro prees ****************************************/




/*erp360 **************************/

#erp360 .volver, #contabilidad .volver, #crm .volver{ color:#151515;}
#erp360 .volver:hover,#contabilidad .volver:hover,#crm .volver:hover { color:#fff;}





/*pmetrics*/
#pmetrics { color:#FFF;}



.bloquesitofuera .verdetalle{position:absolute;
left: 50%;
bottom: -40px;
transform: translate(-50%, 0);
height:35px;
padding:0 15px;
box-sizing: border-box;
color:#fff;
background:#151515;
display:inline-block;
line-height:35px;
border-radius:4px;
text-transform:uppercase;
letter-spacing:1px;
font-size:13px;
}

.verdetalle:hover{ background-color:#f2f2f2;
color:#151515;}

.verdetalle:before{ content:"ver en detalle"}
.verdetalle:after{ font-family:iconos;
display:inline-block;
margin:0 0 0 10px;
content:"\f067";}






/* detalle  *************************************/
#detalle a{ color:#028296;}
#detalle a:hover{ text-decoration:underline;}


#detallecontainer{ padding-top:150px;}

#detallecontainer #detalle{ width:98%;
max-width:1200px;
margin:0 auto;
}


#detalle h1 { text-align:center; 
font-size:50px;
text-transform:uppercase;
letter-spacing:-1px;
line-height:1em;
margin:0 0 10px 0;}

#detalle #bread{ text-align:center;
margin:0 0 30px 0;}

#detalle #bread a{ display:inline-block;
margin-left:10px}

#bread a:before{ font-family:iconos;
letter-spacing:10px;
content: "\f105";
}

#detalle #textodetalle{
	overflow:hidden;
	column-count:2;
column-width:auto;
column-gap:35px;
-webkit-column-count:2;
-webkit-column-width:auto;
-webkit-column-gap:35px;
-ms-column-count:2;
-ms-column-width:auto;
-ms-column-gap:35px;
border-top:dotted 1px rgba(0,0,0,0.1);
border-bottom:dotted 1px rgba(0,0,0,0.1);
padding:20px 0;
	}
	
	
#textodetalle #caja img{ width:100%;
	display:block;}


#textodetalle #texto p{ margin:0 0 20px 0; line-height:1.3em;}

#textodetalle #texto h2{ margin:0 0 10px 0;}

#textodetalle #texto ul{ margin:0;
padding:20px;
background-color:rgba(0,0,0,0.05);}

#textodetalle #texto ul li{ margin:0 0 10px 0;
line-height:1.3em;
list-style:none;}

#textodetalle #texto ul li:last-child{ margin-bottom:0;}

/*cerro detalle **********************************/



/* botoenes en detalle  *************************************/

#botones{ margin:20px 0;
text-align:center;
z-index:5;}

#botones .boton{ display:inline-block;
vertical-align:top;
height:40px;
line-height:40px;
padding:0 15px;
text-transform:uppercase;
color:#fff;
background-color:#4ab7bd;
margin:0 15px;
border-radius:4px;
font-size:15px;
letter-spacing:1px;}

#botones .boton:hover{ background-color:#f7713c;
text-decoration:none;}


/*cerro botones en detalle **********************************/











/********************************************** RESPONSIVE *******************************************************/
/*PARA LAPTOP DE POBRE ***************************************************/
@media only screen and (max-height:769px) {
#iconos h1.seccionestitulo{ margin:0 0 15px 0;
	font-size:;
	text-shadow: 3px 3px #005b95;
}

#iconos a.icono{ 
height:250px;
padding:15px;
}


#iconos a.icono h2{ 
font-size:1.5em;
}


#iconos a.icono p{ 
line-height:1.2em;
font-size:0.8em;
}


.icono h2:before{ 
font-size:70px;
margin:0 0 15px 0;
min-height:50px;
line-height:50px;}




#iprees h2:before, #prees h1:before{}
/*#iecommerce h2:before, #ecommerce h1:before{}
#ierp360 h2:before, #erp360 h1:before{font-size:60px; }*/
#icontabilidad h2:before, #contabilidad h1:before{font-size:90px;}
#ipmetrics h2:before, #pmetrics h1:before{font-size:50px}
/*#icrm h2:before, #crm h1:before{}*/



#demo img{ width:350px;}



	
	
	

}



/*PARA CELULARES EN EL ABSURDO MODO DE LANDSCAPE ***************************************/

@media only screen and (max-height:801px) and (max-width:1201px) {
.bloque{ height:auto;
padding:60px 20px 20px 20px;
}

.bloque .bloquesito{position:relative;
left:auto;
top: auto;
transform: translate(0,0);
width:100%;
margin:0 auto;
}



.bloque .boton{ position:relative;
left: auto;
bottom: auto;
transform: translate(-50%,0);
display:inline-block;
	margin-top:35px;
	left:50%;

}





#iconos h1.seccionestitulo{ margin:0 0 15px 0;
	font-size:30px;}

#iconos a.icono{ 
height:205px;
padding:15px;
}


#iconos a.icono h2{ 
font-size:1.5em;
}


#iconos a.icono p{ 
line-height:1.2em;
font-size:0.8em;
}


.icono h2:before{ 
font-size:70px;
margin:0 0 15px 0;
min-height:50px;
line-height:50px;}




#ipos h2:before, #pos h1:before{}
/*#iecommerce h2:before, #ecommerce h1:before{}
#ierp360 h2:before, #erp360 h1:before{font-size:60px; }*/
#icontabilidad h2:before, #contabilidad h1:before{font-size:90px;}
#ipmetrics h2:before, #pmetrics h1:before{font-size:50px}
/*#icrm h2:before, #crm h1:before{}*/



#demo img{ width:350px;}


#detallecontainer{ padding-top:60px;}

#detallecontainer #detalle{ width:95%;
}


#detalle h1 { 
font-size:30px;
}


#textodetalle #caja{ margin-bottom:20px;}
}









/*PARA IPAD ********************************************************/
@media only screen and (max-width:1025px) {
	
.bloque .bloquesito{
top: 50%;
}

.bloque .bloquesitofuera{display:none;}

}






/*PARA CELULARES GRANDES  *********************************************************/

@media only screen and (max-width:600px) {
	
.bloque{ height:auto;
padding:60px 20px 80px 20px;
}

.bloque .bloquesito{position:relative;
left:auto;
top: auto;
transform: translate(0,0);
width:100%;
margin:0 auto;
}

#iconos a.icono{ 
/*color:#FFF; 
text-align:center;
display:block;
float:left;*/
width:100%;
min-height:250px;
/*padding:20px;
transition:all 0.3s linear;
overflow:hidden;
cursor:pointer;
border: 2.5px solid #005b95;*/
}

#iconos a.icono h2{ 
font-size:1.2em;
}


#iconos a.icono p{ 
display:none;}


#demo img{ width:350px;}


#detallecontainer{ padding-top:60px;}

#detallecontainer #detalle{ width:95%;
}


#detalle h1 { 
font-size:30px;
}


#textodetalle #caja{ margin-bottom:20px;}

#detalle #textodetalle{
		column-count:1;
-webkit-column-count:1;
-ms-column-count:1;
	}


#modulera a.icono:hover{ background-color:rgba(0,0,0,0.5);}



}






















/*PARA CELULARES PEQUEÑOS *********************************/
@media only screen and (max-width:480px) {
#botonera a.item{ 
display:block;
margin:15px 0;
font-size:16px;
}
	

	
	
.bloque{ height:auto;
padding:40px 20px 80px 20px;
}


/*
#iconos a.icono{ 
width:100%;
height:170px;
}
*/

#iconos a.icono:nth-of-type(1){ background-color:rgba(255, 203, 5, 1)}
#iconos a.icono:nth-of-type(2){ background-color:rgba(255, 203, 5, 1)}
#iconos a.icono:nth-of-type(3){ background-color:rgba(255, 203, 5, 1)}

#modulera a.icono:hover{ background-color:rgba(0,0,0,0.5);}

#demo img{ width:100%;}

#detallecontainer{ padding-top:80px;}




#modulera .icono{ 
padding:20px;
height:145px;
}

#modulera .icono h2{ font-size:14px;}
#modulera .icono p{display:none;}


#modulera a.icono:nth-of-type(1){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(2){ background-color:rgba(0,0,0,0.06)}
#modulera a.icono:nth-of-type(3){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(4){ background-color:rgba(0,0,0,0.06)}
#modulera a.icono:nth-of-type(5){ background-color:rgba(0,0,0,0.02)}
#modulera a.icono:nth-of-type(6){ background-color:rgba(0,0,0,0.06)}

}