body{
	position: relative;
	background-image:url('/img/Fondo.png');
	/*background-size: 100% 100%;*/
	/*background-size:  background-size[cover];*/
	background-attachment: fixed;
	height: 100vh;
}

.element{
    float: left;
	transition: all 0.5s ; 
}

.element>div{
	width: 160px;
	margin: 0 auto;
    background-color: #ffffff;
    border-radius: 30px;
    box-shadow: 13px 13px 17px -10px #888888;
	background: linear-gradient(to right, #52c8c4, #12726a);
	
}

.element .space{
    margin: 0 15px 15px;
    border-radius: 20px;
	padding-top: 2px;
    background-color: #F7F7F7;
    width: 130px;
    height: 70px;
}

.titulo{
	text-align: center;
	padding: 0 15px;
	height: 52px;

	color: #27366B;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.marco1>div{
	background: linear-gradient(to right,rgba(255,237,0,1), rgba(255,237,0,.5));
}
.marco2>div{
	background: linear-gradient(to right, rgba(176,203,31,1), rgba(176,203,31,.5));
}
.marco3>div{
	background: linear-gradient(to right, rgba(229,9,127,1), rgba(229,9,127,.5));
}
.marco4>div{
	background: linear-gradient(to right, rgba(153,153,153,1), rgba(153,153,153,.5));
}
.marco5>div{
	background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,.5));
}
.marco6>div{
	background: linear-gradient(to right, rgba(0,255,255,1), rgba(0,255,255,.5));
}
.marco7>div{
	background: linear-gradient(to right, rgba(0,51,153,1), rgba(0,51,153,.5));
}
.marco8>div{
	background: linear-gradient(to right, rgba(0,0,255,1), rgba(0,0,255,.5));
}

.element:hover {
  transform: scale(1.2); /* Aumenta el tamaño un 20% */
  cursor: pointer; /* Cambia el cursor a una mano */
  transition: all 0.5s ; 
}

.personal_data{
	font-size: 14px;
}
/*
img.gris {
	opacity: 0.6;
}
	*/
/*----------RESPONSIVE----------*/
@media (max-width: 1600px) and (min-width: 1300px){
	.element{
		float: left;
		width: 20%;
		padding-bottom: 20px;
	}
	
	.element>div{
		width: 250px;
	}
	.element .space{
		width: 220px;
	}
}

@media (max-width: 1300px) and (min-width: 1000px){
	
	.element{
		float: left;
		width: 25%;
		padding-bottom: 20px;
	}
	
	.element>div{
		width: 240px;
	}
	.element .space{
		width: 210px;
	}
}

@media (max-width: 1000px) and (min-width: 768px){
	
	.element{
		float: left;
		width: 33.33%;
		padding-bottom: 20px;
	}
	
	.element>div{
		width: 240px;
	}
	.element .space{
		width: 210px;
	}
	
}

@media (max-width: 767px){

	.element{
		float: left;
		width: 100%;
		padding-bottom: 20px;
	}
	
	.element>div{
		width: 240px;
	}
	.element .space{
		width: 210px;
	}
	.personal_data{
		padding-top: 10px;
		text-align: center;
		font-size: 16px;
	}
}