@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: Exo;
    src: url(Exo-Regular.ttf);
}

.textoExo{
	font-family: Exo;
}

body{

}
#apDivTop{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 95px;
	background-color:#FFFFFF;
		
	z-index:800;	
}

/* Estilos Contenidos */
#appContenidoPortada{
	margin: 0 auto;
	
	padding-top: 55px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom: 20px;

	width: 100%;

	text-align:center;
}

#appContenido{
	margin: 0 auto;
	
	padding-top: 310px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom: 20px;

	width: 85%;
	min-height:650px;
	
	background-color: #FFF;
	text-align:justify;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	
	color: #B2B2B1;
}

/* Contenido Banner Fijo */
#apDivBannerFijo{
	margin: 0 auto;
	
	width:95%;

	padding:5px;
	background-image:url(../images/bg_trans.png);
	
	text-align:center;
	
}
#apDivContenidoISCE{
	margin: 0 auto;

	width:95%;
	min-height:300px;
	padding:10px 10px 10px 10px;
	background-image:url(../images/bg_trans.png);
	text-align:center;
}
.recComponentes{
	width:205px; 
	height:187px;
	margin: 10px;
	padding:10px;
	background-color:#FEFEFE;
	border: solid 1px #D2D3D5;
	text-align:center;
	vertical-align:auto;
	
	-webkit-border-radius: 4%;
	-moz-border-radius: 4%;
	border-radius: 4%;
}
#apDivBarraLogo{
	margin: 0 auto;
	width:100%;
	height:26px;
	text-align:center;
	background:url(../images/isotipo_linea.png);
}
/* Final Banner Fijo */

#appBanner{
	position: fixed;
	left: 0px;
	top: 120px;
	width: 100%;
	height: 200px;
	
	background-color:#F3F9F9;

	z-index:998;
}

#appBannerImgClientes{
	position: fixed;
	margin: 0 auto;
	bottom: 0px;
	left:10%;
	width: 27%;
		
	z-index:1031;
}

/* Marco Servicio */
#LogoSimbolo{
	position:absolute;
	margin: 150px 370px auto;

	width: 250px;
	height: 250px;
	
	background-color: #FFF;/*#F3F9F9;*/
	background-image:url(../images/logo_simbolo.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 90%;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	z-index: 997;
}
.textoServicios{
	
	margin-top:80px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:34px;
	font-weight:bold;
	
	text-align:center;
	color:#FFF;
}
.appMarcoServicioW{
	margin-top: 10px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	display:inline-table;
	
	width: 45%;
	height: 250px;
	
	background-image:url(../images/servicio_web.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	
	background-color:#CCD502;
	border:#CCD502 solid 2px;

	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */	

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
		
	text-align:justify;
	vertical-align:top;
}
.appMarcoServicioW:hover{
	border: #E8E862 solid 2px;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	cursor:pointer;
}

.appMarcoServicioEM{
	margin-top: 10px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	display:inline-table;
	
	width: 45%;
	height: 250px;
	
	background-image:url(../images/e_marketing.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	
	background-color:#0071BB;
	border:#0071BB solid 2px;

	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */	

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
		
	text-align:justify;
	vertical-align:top;
}
.appMarcoServicioEM:hover{
	border: #0B8FD8 solid 2px;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	cursor:pointer;
}

.appMarcoServicioP{
	margin-top: 10px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	display:inline-table;
	
	width: 45%;
	height: 250px;
	
	background-image:url(../images/portafolio.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	
	background-color:#951B81;
	border:#951B81 solid 2px;

	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */	

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
		
	text-align:justify;
	vertical-align:top;
}
.appMarcoServicioP:hover{
	border: #D82EC4 solid 2px;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	cursor:pointer;
}

.appMarcoServicioC{
	margin-top: 10px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	display:inline-table;
	
	width: 45%;
	height: 250px;
	
	background-image:url(../images/clientes.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100%;
	
	background-color:#FEEA00;
	border:#FEEA00 solid 2px;

	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */	

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
		
	text-align:justify;
	vertical-align:top;
}
.appMarcoServicioC:hover{
	border: #FCF297 solid 2px;
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	cursor:pointer;
}

/* Portafolio */
.appMarcoPortafolio{
	margin-top: 30px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	
	display:inline-table;
	
	width: 47%;
	height: 250px;
		
	background-color: #F5F5F5;

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;	
		
	text-align:justify;
	vertical-align:top;
}

.appMarcoPortafolio:hover{
		
	background-color: #F9F9F9;
	border:#B1C800 solid 1px;;
	text-align:justify;
	height: 249px;

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	
	cursor:pointer;
		
}

.appMarcoPortafolioBlank{
	margin-top: 30px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	
	display:inline-table;
	
	width: 47%;
	height: 1px;
				
	text-align:justify;
	vertical-align:top;
}

.appMarcoPortafolioLogo{
	margin-top:10px;
	margin-bottom: 10px;
	padding: 5px;	
	
	width: 100%;
	height: 70px;
	
	background-color:#FFF;
			
	text-align:justify;
	vertical-align:top;
}

/* FIN Portafolio */

/* FIN Estilos Contenidos */

/* Contactenos */
#apDivContacto{
	position:absolute;
	top: 150px;
	left: 7%;
	
	width:30%;
	min-width:300px;
	height:480px;
	
	border: 4px solid #B5CEED;	
	-webkit-border-radius: 2%;
	-moz-border-radius: 2%;
	border-radius: 2%;
	
	/*box-shadow: 4px 0 2px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 4px 0 2px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 0 2px 0px rgba(0,0,0,0.3);
	-ms-box-shadow: 4px 0 2px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 4px 0 2px 0px rgba(0,0,0,0.3);*/	
	
	background-color:#FFF;
	
	z-index: 999;
}
/* Fin Contactenos */

/* Planes */
.appMarcoPlanes{
	margin-top: 0px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	
	display:inline-table;
	
	width: 30%;
	height: 550px;
		
	background-color: #F5F5F5;

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;	
		
	text-align:justify;
	vertical-align:top;
}

.appMarcoPlanes:hover{
		
	background-color: #F9F9F9;
	border:#B1C800 solid 1px;;
	text-align:justify;
	height: 550px;

	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	
	cursor:pointer;
		
}

.appMarcoPlanesBlank{
	margin-top: 0px;
	margin-left:10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	
	display:inline-table;
	
	width: 30%;
	height: 1px;
				
	text-align:justify;
	vertical-align:top;
}

.appMarcoPlanesLogo{
	margin-top:10px;
	margin-bottom: 10px;
	padding: 5px;	
	
	width: 100%;
	height: 45px;
	
	background-color:#FFF;
			
	text-align:justify;
	vertical-align:top;
}

/* FIN Planes */


/*     Responsive 
========================
@media only screen and (min-width: 768px) and (max-width: 959px) {*/
@media only screen and (max-width: 767px){
	#appContenidoPortada{
		width: 95%;
	}
	#appBanner{
		visibility:hidden;
	}
	#appBannerSW{
		visibility:hidden;
	}	
	#appContenido{
		padding-top: 150px;
	}
	.textoServicios{
		font-size:200%;
	}
	.appMarcoServicioW, .appMarcoServicioEM, .appMarcoServicioP, .appMarcoServicioC{
		width:100%;
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	#LogoSimbolo{
		visibility:hidden;
	}	
	.appMarcoPortafolio{
		width:100%;
	}
	.apDivSWConten{ width:100%; }
	#appBannerImgClientes{
		visibility:hidden;
	}
	#appContenidoClientes{
		padding-left: 5px;
	}
	.appMarcoPlanes{
		width:100%;
	}
	
}