
/*******************************************************************
MENU HOME
*******************************************************************/

.contenido-home{
	background-color: #333333;
	padding: 50px 0 90px;
	overflow: hidden;
	margin-top: 250px;
}
.contenido-home article{
	width: 41.87%;
	margin: 0 auto;
	color: #CCCCCC;
	font-size: 14px;
}
.menu-home{
	position: relative;
	width: 535px;
	margin: 0 auto;
}
.custom-menu {
	margin: 0 auto;
	height: 350px; 
	width: 350px;
} 
.custom-menu li {
	list-style:none;
	text-align:center;
}
.custom-menu li a{ 
	display: block;
	width: 295px;
	height: 295px;
	overflow: hidden;
	position: absolute;
	float: left; 
	margin-right: 4px;
	-moz-border-radius:330px;
	-o-border-radius:330px;
    -ms-border-radius: 330px;
    -webkit-border-radius:330px;
    border-radius:330px;
	transition: 100ms ease; 
	-webkit-transition: 100ms ease-in; /* Safari & Chrome */
	-o-transition: 100ms ease-in; /* Opera */ 
	-moz-transition: 100ms ease-in; /* Old firefox */
	border: #FFFFFF;
	border: 1px solid rgba(255,255,255,0.7)
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
} 
.custom-menu li a:hover {
	transform:  scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);

	transition: all 0.2s ease-out;  
	-webkit-transition: 0.2s ease-out; /* Safari & Chrome */
	-o-transition: 0.2s ease-out; /* Opera */ 
	-moz-transition: 0.2s ease-out; /* Old firefox */

	background: #EEF6F7;
	border: 20px solid rgba(201,227,230,0.7);
	left:-20px;
	
	-moz-box-shadow: 0 0 10px #888;
	-webkit-box-shadow: 0 0 10px #888;
	box-shadow: 0 0 10px #888;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}


/****************************************************************
  POSICIONAMIENTO DE LOS CIRCULOS
*****************************************************************/	
	
.custom-menu li a {
	/*background:rgba(255,255,255,0.5);*/
	transition: all 0.1s ease-out;
	/*-moz-box-shadow: 0 0 10px #DDDDDD;
	-webkit-box-shadow: 0 0 10px #DDDDDD;
	box-shadow: 0 0 10px #DDDDDD;*/

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 51%, rgba(255,255,255,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(51%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 51%,rgba(255,255,255,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-8 */

}
.custom-menu li a:hover {
	z-index:9000;
}
/* sistemas*/
.custom-menu li.post-74 a{
	top:0px;
	left:0px;
}
.custom-menu li.post-74 a:hover{
	top:-10px;
	left:-10px;
}
/* infraestructura*/
.custom-menu li.post-96 a{
	top:0px;
	left:200px;
}
.custom-menu li.post-96 a:hover{
	top:-10px;
	left:190px;
}
/* web*/
.custom-menu li.post-73 a{
	top:200px;
	left:0px;
}
.custom-menu li.post-73 a:hover{
	top:190px;
	left:-10px;
}
/* internet*/
.custom-menu li.post-75 a{
	top:200px;
	left:200px;
}
.custom-menu li.post-75 a:hover{
	top:190px;
	left:190px;
}

	
/****************************************************************
  ICONO Y TITULO AREAS
*****************************************************************/	
	
.custom-menu li a span{
	display:block;
	padding:20px 0px;
	color: #fff;
	text-align: center; 
	text-decoration: none; 
}
.custom-menu li.post-74 a span,.custom-menu li.post-96 a span,.custom-menu li.post-73 a span,.custom-menu li.post-75 a span{
	width: 71px;
	height: 81px;
	position :absolute;
	top: 30%;
	left: 37%;
	text-indent: -9000px;
	background-repeat: no-repeat !important;
}
.custom-menu li.post-74 a span{
	width: 71px;
	height: 81px;
	background: url("../images/ico_sistemas.png") no-repeat left top;
}
.custom-menu li.post-96 a span{
	width: 110px;
	height: 85px;
	top: 30%;
	left: 34%;
	background: url("../images/ico_infraestructuras.png") no-repeat left top;
}
.custom-menu li.post-73 a span{
	width: 72px;
	height: 52px;
	top: 45%;
	left: 37%;
	background: url("../images/ico_web.png") no-repeat left top;
}
.custom-menu li.post-75 a span{
	width: 106px;
	height: 84px;
	top: 40%;
	left: 34%;
	background: url("../images/ico_internet.png") no-repeat left top;
}


.custom-menu li.post-74 a:hover span, .custom-menu li.post-96 a:hover span,.custom-menu li.post-73 a:hover span,.custom-menu li.post-75 a:hover span{
	display: none;
}

/*icono retina display*/

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	.custom-menu li.post-74 a span{
		background: url("../images/ico_sistemas@2x.png");
		background-position:0 0;
		background-size: 77px 83px;
	}
	.custom-menu li.post-96 a span{
		background: url("../images/ico_infraestructuras@2x.png");
		background-position:0 0;
		background-size: 115px 87px;
	}
	.custom-menu li.post-73 a span{
		background: url("../images/ico_web@2x.png");
		background-position:0 0;
		background-size: 69px 56px;
	}
	.custom-menu li.post-75 a span{
		background: url("../images/ico_internet@2x.png");
		background-position:0 0;
		background-size: 108px 86px;
	}
}

	
/****************************************************************
  TEXTOS EN HOVER
*****************************************************************/
#primary .custom-menu li a h2, #primary .custom-menu li a p{
	width:75%;
	height:auto;
	position:absolute;
	top:58%;
	left:12%;
	font-family: 'PT Sans';
	color:#FFFFFF;
	opacity:0;
	transition: all 0.5s ease-out;
	text-align: center;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
	display: none;
}
#primary .custom-menu li a h2{
	font-size:13px;
	text-transform: uppercase;
	margin:0 !important;
	letter-spacing: 1px;
}
#primary .custom-menu li a p{
	top:65%;
	font-size:13px;
}
#primary .custom-menu li a span.flecha{
	display: none;
}
#primary .custom-menu li a:hover span.flecha{
	width: 14px;
	height: 27px;
	position: absolute;
	top: 85%;
	left: 48%;
	transition: all 0.5s ease-out;  
	background: url("../images/flecha.png") no-repeat left top;
	display: inline-block;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	#primary .custom-menu li a:hover span.flecha{
		background: url("../images/flecha@2x.png") no-repeat left top;
		background-size: 13px 25px;
	}
}

#primary .custom-menu li a:hover h2, #primary .custom-menu li a:hover p, #primary .custom-menu li a:hover span.flecha{
	transition: all 0.5s ease-out;  
	opacity: 1;
	z-index:3000;
	transform: none !important;
	-webkit-transform: none !important;
	-o-transform:  none !important;
	-moz-transform:  none !important;
	-ms-transform:  none !important;
	text-decoration:none;
	text-align: center;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
	display: block;
}

#primary .custom-menu li a:hover h2{
	position:absolute;
	top:58%;
	left:12%;
	text-align: center;
}
#primary .custom-menu a:hover{
	text-decoration:none;
	transform: none !important;
	-webkit-transform: none !important;
	-o-transform:  none !important;
	-moz-transform:  none !important;
	-ms-transform:  none !important;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}

/****************************************************************
 IMÁGENES DE FONDO
*****************************************************************/
.custom-menu li a:hover{
	background-color: #009900
}
.custom-menu li a img{
	display: inline-block;
	position: relative;
	width: 295px;
	overflow: hidden;
	-webkit-border-top-left-radius:330px 330px;
 	-webkit-border-top-right-radius:330px 330px;
 	-moz-border-top-left-radius:330px 330px;
 	-moz-border-top-right-radius:330px 330px;
  	-o-border-top-left-radius:330px 330px;
 	-o-border-top-right-radius:330px 330px;
 	-ms-border-top-left-radius:330px 330px;
 	-ms-border-top-right-radius:330px 330px;
 	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}
.custom-menu li.post-74 a:hover img,.custom-menu li.post-96 a:hover img,
.custom-menu li.post-73 a:hover img,.custom-menu li.post-75 a:hover img{
	/*opacity: 1;*/
	/*transition: all 1s ease-out;
	transform:  scale(1,1);
	-webkit-transform:scale(1,1);
	-o-transform: scale(1,1);
	-moz-transform: scale(1,1);
	-ms-transform: scale(1,1);
	border:0;*/
}
.custom-menu li a .cont-img-slogan{
	display: none;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	-moz-border-radius:330px;
	-o-border-radius:330px;
    -ms-border-radius: 330px;
    -webkit-border-radius:330px;
    border-radius:330px;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}
.custom-menu li a:hover .cont-img-slogan{
	display: block;
}
.custom-menu li.post-74 a:hover img.flecha,.custom-menu li.post-96 a:hover img.flecha,
.custom-menu li.post-73 a:hover img.flecha,.custom-menu li.post-75 a:hover img.flecha{
	transform: none;
	-webkit-transform:none;
	-o-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	border:0;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}
.custom-menu li.post-74 a:hover span, .custom-menu li.post-96 a:hover span,
.custom-menu li.post-73 a:hover span,.custom-menu li.post-75 a:hover span{
	opacity: 0;
	transition: all 0.1s ease-out;
	behavior: url(/wp-content/themes/GT/css/pie/PIE.php);
}
