/************************************************************************************
SECCIONES INTERNAS: RECUADROS
*************************************************************************************/
.servicio{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
    margin-right: auto;

}

.recuadros{	
	text-align: center;
	padding-left: 0px;
	margin-left: 0px;

}
.servicio .indice, .servicio > h3{
	display: none;
}
.imagen{
	width: 100%;
}
.servicio div.recuadro a:nth-child(4n){
	/*margin-right: -60px !important;*/
}


.servicio > a,
.servicio > div{
    width: 260px; /* ancho servicio */
    margin:1%;
    float: left;
    background-color: white;
    text-align: center;
    height: 280px;
    position: relative;
    text-decoration: none;
    text-align: center;
}

@media only screen and (max-width: 767px) {
	.servicio > a,
	.servicio > div{
	    width: 100%; /* ancho servicio */
	}
}

.caja-transparente{
    display: block;
    height:20%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;  
    /*transition: background-color 0.5s ease 0s;*/
    opacity: 0;    
    color: #1D1814;
}
.servicio > div:hover .caja-transparente,
.servicio > div:hover .abstract{
    opacity: 1;
    background-color: #239443;
    border: 2px solid #239443;
}
.servicio a.caja-transparente{
	color:#1D1814 !important;
	font-weight: bold;
}
.servicio > a .abstract,
.servicio > div .abstract{
    position: absolute;
    top: 0px;
    left: 0px;
    /*height: 288px; ocupa toda la caja*/
    padding: 50px 5%;
    /*transition: background-color 0.5s ease 0s;*/
    opacity: 0;
    color: #FFF;
    font-weight: normal;
    float: left;
}
.servicio > a .abstract:hover,
.servicio > div .abstract:hover{
    opacity: 1;
    background-color: #239443;
    border: 2px solid #239443;
}

.servicio > div .abstract a
{color: white; text-decoration: none;}

.servicio > a .titulo,
.servicio > div .titulo{
    font-weight: normal;
    font-size: 1.1em;
    /*text-transform: uppercase;*/
    line-height: 1.45em;
    font-family: "Gafata",sans-serif;
    border-top: 2px solid #239443;
    color: #239443;
    float: left;
    text-align: center;
    width: 100%;
    float: left;
}
.servicio > a .titulo > a,
.servicio > div .titulo > a{
    color: #1D1814;
    font-weight: bold;
    text-decoration: none;
}
.servicio > a .titulo > a:hover,.servicio > div .titulo > a:hover{color: #F15321;text-decoration: none;}