#avisoimportante {
	background: #000000;
	color: aliceblue;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 0px;
	
}

#avisoimportante a{
		
	color: white;
	font-size: 30px;
	text-decoration: none;
	
}


#cubos {
	background: #0d75a8;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubos .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}



#cubosAzul1 {
	background: #00b1e5;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin:  0px;
	padding: 20px;
}

#cubosAzul1 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosAzul2 {
	background: #68bddf;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosAzul2 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosAzul3 {
	background: #bcdbe7;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosAzul3 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosAzul4 {
	background: #0d75a8;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosAzul4 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}


/*COMIENZA SECCION ID CON IMAGENES*/
#cubosImgn1 {
	
	background-image: url(../images/bg-01.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique para que de efecto de desplazar con imagen fija que queria*/
	/*background-position: 50% 50%;*/
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosImgn1 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosImgn2 {
	
	background-image: url(../images/bg-02.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	/*background-position: 50% 50%;*/
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosImgn2 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosImgn3 {
	
	background-image: url(../images/bg1.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	/*background-position: 50% 50%;*/
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosImgn3 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

#cubosImgn4 {
	
	background-image: url(../images/Ban19.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	/*background-position: 50% 50%;*/
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosImgn4 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}


#cubosBiosafe {
	
	background-image: url(../images/Biosafe.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%;
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosBiosafe .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #FFFFFF;
	}

#cubosBiosafe2 {
	
	background-image: url(../images/Biosafe2.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%;
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosBiosafe2 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #FFFFFF;
	}

#cubosBiosafe3 {
	
	background-image: url(../images/biosafe3.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 100% 20%;
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#cubosBiosafe3 .contenedorcubo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #FFFFFF;
	}

/* INICIA SECCION FORMATOS MICROSIP*/
#mspimg1 {
	background-image: url(../images_msp/oc3-1536x1087.webp);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%;
	background-size: 98%;
	background-repeat: no-repeat;
	color: #000000;
	text-shadow: 1px 1px 4px #ffffff; /*2px right, 2px down, with a 4px blur*/
	text-align: left;
	font-size: 30px;
	margin: 0px;
	padding: 20px;
}

#mspimg1 .contenedormsp{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #FFFFFF;

}
#cubosmspcol1 {
	background: #0d75a8;
	color: #FFFFFF;
	padding: 10px;
	margin: 0px;
	/*text-align: center;
	font-size: 30px;
	
	*/
	
}
#cubosmspcol1 .contenedormsp{
	justify-content: justify;
	color: #FFFFFF;
	
	}
#cubosmspcol1 .contenedormsp div{
	display: flex;
	flex-wrap: wrap;
	max-width: 75%;
	
}	
	
#cubosmspcol1 .bull{
	margin-left: 20px;
}

	

#seccontabilidad {
	background: #06c1ff80;
	margin: 0px;
	padding: 10px;
	
}

#seccontabilidad2 {
	background: #06c1ff14;
	margin: 0px;
	padding: 10px;
	
}
/*
#seccontabilidad2 div{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: start;
	max-width: 75%;

} */

#boxizq{
margin-right: auto;
}

#co1 {
	background: #0d75a8;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
	
}

#co2 {
	background: #0d75a8;
	filter: brightness(125%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
	
}

#co3 {
	background: #0d75a8;
	filter: brightness(145%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
	
}
#co4 {
	background: #06c1ff80;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
	
}

#secbancos1 {
	background: #3ee6ac80;
	margin: 0px;
	padding: 10px;
}

#ba0 {
	background:  #34bf8f;
	filter: brightness(98%);
	margin: 0px;
	padding: 10px;
	
}
#ba1 {
	background:  #34bf8f;
	margin: 0px;
	padding: 10px;
	
	
}

#ba2 {
	background:  #34bf8f;
	filter: brightness(105%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	
}

#ba3 {
	background:  #34bf8f;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	
}




#secbancos2 {
	background: #afb0b2;
	
	margin: 0px;
	padding: 10px;
}

#nomina1 {
	background: #f06bbc80;
	margin: 0px;
	padding: 10px;
	
	
}

#no0 {
	background:  #f06bbc80;
;
	filter: brightness(90%);
	margin: 0px;
	padding: 10px;
	
	
}
#no1 {
	background:  #f06bbc80;
	margin: 0px;
	padding: 10px;
	
	
	
}

#no2 {
	background:  #f06bbc80;
	filter: brightness(115%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	
	
}

#no3 {
	background:  #f06bbc80;
	filter: brightness(125%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	
}

#inventarios1 {
	background: #a163ff80;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#inventarios2 {
	background: #a163ff80;
	filter: brightness(110%);
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#inventarios3 {
	background: #a163ff80;
	filter: brightness(120%);
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#cxc0 {
	background: #15b21080;
	margin: 0px;
	padding: 10px;
}
#cxc01 {
	background:  #009929;
	filter: brightness(115%);
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#cxc1 {
	background:  #009929;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#cxc2 {
	background:  #009929;
	filter: brightness(104%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#cxc3 {
	background:  #009929;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#cxc4 {
	background:  #009929;
	filter: brightness(116%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#vent1 {
	background: #ff8623;
	/*background: #ff862380;*/
	filter: brightness(130%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;

	padding: 10px;
	color: #FFFFFF;
}

#ve2 {
	background: #EE780F;
	filter: brightness(105%);
	margin: 0px;
	padding: 10px;
}
#ve3 {
	background: #FF8623;
	margin: 0px;
	padding: 10px;
}

#ve4 {
	background: #FF9E3D;
	margin: 0px;
	padding: 10px;
}


#cm1 {
	background: #ffcc5680;
	margin: 0px;
	padding: 10px;
}
#cm0 {
	background: #ffa81680;
	margin: 0px;
	padding: 10px;
}
#cm1 {
	background: #ffb81680;
	margin: 0px;
	padding: 10px;
}
#cm2 {
	background: #ffc81680;
	margin: 0px;
	padding: 10px;
}


#cxp1 {
	background:  #ff421f80;
	
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#pdv1 {
	background:  #ffb81680;
	
	margin: 0px;
	padding: 10px;
}

#mru {
	background:  #16a0ff80;
	
	margin: 0px;
	padding: 10px;
}
#mru1 {
	background:  #0d75a8;
	filter: brightness(105%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#mru2 {
	background:  #0d75a8;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#mru3 {
	background:  #0d75a8;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#ceo1 {
	background:  #34bf8f;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#ceo2 {
	background:  #34bf8f;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}





#sync1 {
	background:  #be8ad1;
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}

#sync2 {
	background:  #be8ad1;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}


#manu1 {
	background:  #638b18;
	margin: 0px;
	padding: 10px;
}
#manu2 {
	background:  #638b18;
	filter: brightness(110%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#manu2 img{
	width: 250px;
	height: 250px;
}
#manu3 {
	background:  #638b18;
	filter: brightness(130%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
	
}
#manu4 {
	background:  #638b18;
	filter: brightness(140%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF;
}
#add1 {
	background:  #4a64b4;
	filter: brightness(160%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF
}


#sics1 {
	background:  #6285f0;
	/*filter: brightness(160%); aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF
}
#sics1 img{
width: 250px;
height: 250px;	
}


#sics2 {
	background:  #6285f0;
	filter: brightness(100px); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF
}
#sics2 img{
	width: 250px;
	height: 250px;
}


#dm1 {
	background:  #222c6c;
	/*filter: brightness(160%); aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF
}


#dm2 {
	background:  #222c6c;
	filter: brightness(100px); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
	margin: 0px;
	padding: 10px;
	color: #FFFFFF
}
#sics2 img{
	width: 250px;
	height: 250px;
}




/* INICIA SECCION INTEGRACIONES MODUULOS MICROSIP*/
#integraciones {
	background-color: #717e8a;
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}

#integraciones .contenedorcubomsp {
	background-color: black;
	align-content:center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: 200px;
	max-width: 450px;
	padding: 10px 5px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	
	}

#integraciones a{
		
	color: white;
	/*font-size: 35px;*/ /*lo genera del anterior*/
	text-decoration: none;
	
}

#integraciones h3{
	font-size: 30px;	
}


/* INICIA SECCION CUADROS MEDIA PANTALLA MODUULOS MICROSIP*/



#ceo {
	background-color:  #34bf8f;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#ceo .cuadroceo {
	background-color: black;
	align-content:center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#ceo .cuadroceo img{
	width: 100Px;
	height: 100px;
}

#ceo .cuadroceo h2{
	color: #ffffff;
}	


#ceo .cuadroceov {
	background-color: #34bf8f;
	filter: brightness(80%);
	align-content: center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}

	
#sync {
	background-color:  #be8ad180;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#sync .cuadrosync {
	background-color: black;
	align-content:center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#sync .cuadrosync img{
	width: 100Px;
	height: 100px;
}

#sync .cuadrosync h2{
	color: #ffffff;
}	


#sync .cuadrosyncm {
	background-color: #be8ad1;
	filter: brightness(80%);
	align-content: center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}

#syncm {
	background-color:  #be8ad1;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#syncm .cuadrosyncm {
	background-color: #be8ad1;
	filter: brightness(80%);
	align-content: center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#syncm .cuadrosyncm img{
	width: 100Px;
	height: 100px;
}

#syncm .cuadrosyncm h2{
	color: #ffffff;
}	

#sics {
	background-color:  #6285f0;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#sics .cuadrosics {
	background-color: #6285f0;
	filter: brightness(80%);
	align-content: center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#sics .cuadrosics img{
	width: 100Px;
	height: 100px;
}

#sics .cuadrosics h2{
	color: #ffffff;
}	

#sics h2{
	color: #FFFFFF;
}


#manu {
	background-color:  #638b18;
	filter: brightness(140%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	color: #FFFFFF;
	
	}


#manu .cuadromanu {
	background-color: #638b18;
	filter: brightness(80%);
	align-content: center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 90%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}




	
#add {
	background-color:  #4a64b4;
	filter: brightness(120%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#add .cuadroadd {
	background-color: black;
	align-content:center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#add .cuadroadd img{
	width: 100Px;
	height: 100px;
}

#add .cuadroadd h2{
	color: #ffffff;
}	

#add  h2{
	color: #ffffff;

	
}	

#dm {
	background-color:  #222c6c;
	filter: brightness(155%); /*aclara el color un 30% si se exccede de 100% y si disminuye de 100% lo obscurece, tambien funciona con 1.3 o 1.algo*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	background-position: 90% 50%; 
	background-size: auto;
	background-repeat: no-repeat;
	/*background: #68bddf;*/
	/*color: #FFFFFF;*/
	text-align: center;
	font-size: 20px;
	margin: 0px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*justifica los cuadros automaticamente*/
	
	}


#dm .cuadrodm {
	background-color: black;
	align-content:center;
	align-items: center;
	color: white;
	margin: 19px 5px;
	max-height: auto;
	min-width: 350Px;
	width: 46%;	
	padding: 20px 30px;
	border-radius: 1em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	
	}
#dm .cuadrodm img{
	width: 100Px;
	height: 100px;
}

#dm .cuadrodm h2{
	color: #ffffff;
}	


#dm  h1{
	color: #ffffff;
	
}
#dm  h2{
	color: #ffffff;
	
}	



/*COMIENZA SECCION PARA VIDEOS PAGINAS CENTRALES*/

#vmob {
	
	
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 0px;
	align-content: center;
	align-items: center;
	align-self: center;
	
	
}

#vmob .vmob2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	align-self: center;
	}


/*EMPIEZA SECCION PARA PAGINA VIDEOS yout*/

#VidYT {
	background: #0d75a8;
	color: #FFFFFF;
	text-align: center;
	font-size: 30px;
	margin: 0px;
	padding: 0px;
}

#VidYT .contenedorvyt{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	}
#VidYT .contenedorvyt iframe{
	
	padding: 10px;
}
#VidYT .contenedorvyt p{
	
	padding-bottom: 5px;
}
#VidYT .contenedorvyt a{
	
	color: #FFFFFF;
	font-size: 28px;
}

/*pagina contacto y distrib */
#contact {
	background-image: url(../images/Ban15.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	/*margin: 0px; */
	padding-top: 20px;
	
	
}

#contact form {
width: 980px;
margin: auto;
text-decoration-color: #ffff;	
background: rgba(0,0,0,0.4); /*pone color negrito con transparencia 0.4*/
padding: 10px 20px;
box-sizing: border-box;
margin-top: 10px;
border-radius: 9px; /*Redondea equinas de la seccion formulario*/
min-height: 200px;
max-height: 2300px;
max-width: 90%;

	
}

#contact input, textarea, select {
width: 100%;
margin-bottom: 15px;
padding: 7px;
box-sizing: border-box;
font-size: 15px;
border: none;
border-radius: 7px;	

}

#contact textarea {
min-height: 100px;
max-height: 200px;
max-width: 100%;

}

#contact .contenedor {
	display: flex;
	color: white;
	flex-wrap: wrap;
	justify-content: center;
	
	} 
#contact .contenedor div, h3{
	display: flex;
	color: white;
	flex-wrap: wrap;
	justify-content: center;
	padding: 15px;
	
	} 

#contact2 {
	background-image: url(../images/Ban2.jpg);
	background-size: 100vw 100vw;  /*escala al 100%la imagen*/
    background-attachment:  fixed; /*fija la imagen en toda la pantalla sin que se duplique*/
	/*margin: 0px;  ver si no afecta en el contacto2 ya que no tenia 2 puntos*/
	padding-top: 20px;
	
	
}

#contact2 form {
width: 980px;
margin: auto;
text-decoration-color: ffff;	
background: rgba(0,0,0,0.4); /* pone color negrito con transparencia 0.4*/
padding: 10px 20px;
box-sizing: border-box;
margin-top: 10px;
border-radius: 9px; /*Redondea equinas de la seccion formulario*/
min-height: 200px;
max-height: 2300px;
max-width: 90%;

	
}

#contact2 input, textarea, select {
width: 100%;
margin-bottom: 15px;
padding: 7px;
box-sizing: border-box;
font-size: 15px;
border: none;
border-radius: 7px;	

}

#contact2 textarea {
min-height: 100px;
max-height: 200px;
max-width: 100%;

}

#contact2 .contenedor {
	display: flex;
	color: white;
	flex-wrap: wrap;
	justify-content: center;
	
	} 
#contact2 .contenedor div, h3{
	display: flex;
	color: white;
	flex-wrap: wrap;
	justify-content: center;
	padding: 15px;
	
	}

/* INICIA SECCION BOTONES*/
#botonDF {
	
	background-color: black;
	align-content: center;
	align-items: center;
	color: white;
	max-height: 100px;
	max-width: 450px;
	padding: 10px 5px;
	border-radius: 4em;
	display: block;
	box-shadow: 2px 6px 15px #000000;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	
	
	}



#botonDF a{
		
	color: white;
	font-size: 35px;
	text-decoration: none;
	
}



#BotonEnviar {
background: #31384A;
color: #fff;
padding: 20px;
	
}

#BotonEnviar:hover{
cursor: pointer;
}



/*este es el cuadro que pone circulito al rededor*/

.cuadro{
	margin: 20px;
	}

.cuadro img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 7px solid #FFFFFF;
}

p {
	font-size: 20px;
}

@media (min-width:480px) {
	
	.cuadro  {
		width: 40%;
		
	}
	.vmob  {
		width: 60%;
		height: 60%;
		
	}
	
		
}
@media (min-width:1024px) {
	
	.cuadro  {
		width: auto;
		
	}
	
	.vmob  {
		width: 30%;
		height: 30%;
		
	}
	/* DELIMITA MAXIMO DE PIXCELES EN PANTALLA GRANDE A 100PX
	#msp .contenedormsp {
		width: 1000px;
	} */
		
}