@charset "UTF-8";
/* CSS Document */
.light{
	font-weight: lighter;
	text-align: center;

}


#main_serveis,#main_serveis1{

	background-color: #363638 ;




}

#main_serveis{


	padding-top: 8%;

}

#main_serveis1{


	padding-top: 3%;

}






.serveis{




	float:left;
	height:200px;
	font-size:120%;




}

.front {

	color:white;
	margin:auto;
	text-align:center;



}

.text_hover{

	margin-left:20px;
	margin-right:10px;
	margin-top:10px;
	text-align: center;



}



.serveis ul{
	margin-top:8%;
	font-size:80%;
}

#recogida,
#gestion,
#impresion,
#manipulacion,
#franqeuo,
#distribucion,
#postal,
#mensajeria,
#paqueteria,
#buzoneo,
#diseño,
#web {
	color: transparent;
	background-image: none;
	-webkit-transition: color 1000ms linear;
	-ms-transition: color 1000ms linear;
	transition: color 1000ms linear;
}

#recogida .blue,
#gestion .blue,
#impresion .blue,
#manipulacion .blue,
#franqeuo .blue,
#distribucion .blue,
#postal .blue,
#mensajeria .blue,
#paqueteria .blue,
#buzoneo .blue,
#diseño .blue,
#web .blue{
	color: transparent;
	background-image: none;
	-webkit-transition: color 1000ms linear;
	-ms-transition: color 1000ms linear;
	transition: color 1000ms linear;
}

#recogida:hover,
#gestion:hover,
#impresion:hover,
#manipulacion:hover,
#franqeuo:hover,
#distribucion:hover,
#postal:hover,
#mensajeria:hover,
#paqueteria:hover,
#buzoneo:hover,
#diseño:hover,
#web:hover {

	color: #FFFFFF;
	background-image: none;
	-webkit-transition: color 1000ms linear;
	-ms-transition: color 1000ms linear;
	transition: color 1000ms linear;



}


#recogida:hover .blue,
#gestion:hover .blue,
#impresion:hover .blue,
#manipulacion:hover .blue,
#franqeuo:hover .blue,
#distribucion:hover .blue,
#postal:hover .blue,
#mensajeria:hover .blue,
#paqueteria:hover .blue,
#buzoneo:hover .blue,
#diseño:hover .blue,
#web:hover .blue{

	color: #00abc4;
	background-image: none;
	-webkit-transition: color 1000ms linear;
	-ms-transition: color 1000ms linear;
	transition: color 1000ms linear;



}



#recogida:hover p,
#gestion:hover p,
#impresion:hover p,
#manipulacion:hover p,
#franqeuo:hover p,
#distribucion:hover p,
#postal:hover p,
#mensajeria:hover p,
#paqueteria:hover p,
#buzoneo:hover p,
#diseño:hover p,
#web:hover p {

	background-image: none;



}



.serveis:hover .front {

	transform: scale3d(0,0,0);
	opacity: 0;
	transition: 0.6s;
	transform-style: preserve-3d;



}

.serveis .front {

	transform: scale3d(1,1,1);
	transition: 0.6s;
	transform-style: preserve-3d;



}

.serveis:hover .text_hover {


	display:block;


}

@media (max-width: 1020px){


	#recogida:hover,
	#gestion:hover,
	#impresion:hover,
	#manipulacion:hover,
	#franqeuo:hover,
	#distribucion:hover,
	#postal:hover,
	#mensajeria:hover,
	#paqueteria:hover,
	#buzoneo:hover,
	#diseño:hover,
	#web:hover
	{

		cursor:pointer;


	}

	#myNavbar2 img {

		position: fixed;
		top: 0;
		left: 1%;

	}



	.serveis:hover .text_hover {

		display: block;


	}

}

@media (max-width: 820px)
{



	#recogida,
	#gestion,
	#impresion,
	#manipulacion,
	#franqeuo,
	#distribucion,
	#postal,
	#mensajeria,
	#paqueteria,
	#buzoneo,
	#diseño,
	#web {
		width:100%;

	}
}