@charset "utf-8";
/* CSS Document */

body {
	font-family: "AllerRg", Arial, Serif;
	font-size: 100%;
	background: rgba(0,151,157,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,151,157,1) 20%, rgba(0,151,157,1) 24%, rgba(0,108,112,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(20%, rgba(0,151,157,1)), color-stop(24%, rgba(0,151,157,1)), color-stop(100%, rgba(0,108,112,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,151,157,1) 20%, rgba(0,151,157,1) 24%, rgba(0,108,112,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(0,151,157,1) 20%, rgba(0,151,157,1) 24%, rgba(0,108,112,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,151,157,1) 20%, rgba(0,151,157,1) 24%, rgba(0,108,112,1) 100%);
	background: radial-gradient(ellipse at center, rgba(0,151,157,1) 20%, rgba(0,151,157,1) 24%, rgba(0,108,112,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00979d', endColorstr='#006c70', GradientType=1 );
	color: #222;
}
#dg_contenedor {
	margin: 5px;
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
	text-align:center;
}
#dg_menu {
	background: url("../images/sg_fondomenu.png");
	background-size:505px;
	width: 500px;
	height: 500px;
}
#dg_logo {
	padding-left: 20px;
	padding-top: 20px;
	height: 144px;
	width: 280px;
}
#dg_branding {
	position: absolute;
	display: block;
	bottom: 30px;
	width: 100px;
	height: 300px;
	text-align: center;
	right: 25px;
}
#dg_emisora {
	position: absolute;
	display: block;
	height: 50px;
	width: 112px;
	right: 25px;
	top: 25px;
}
.dg_centrar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	height: 500px;
	margin-top: -250px;
	padding: 5px;
}
.dg_logo1 {
	display: block;
	height: 51px;
	width: 100px;
	background: url("../images/instactivo-10.png");
}
.dg_logo2 {
	display: block;
	height: 50px;
	width: 100px;
	background: url("../images/instactivo-11.png");
}
.dg_logo3 {
	display: block;
	height: 68px;
	width: 100px;
	background: url("../images/instactivo-12.png");
}
.dg_logo4 {
	display: block;
	height: 77px;
	width: 100px;
	background: url("../images/instactivo-13.png");
}
a.dg_logo1:hover, a.dg_logo1:active {
	background: url("../images/inst-10.png");
}
a.dg_logo2:hover, a.dg_logo2:active {
	background: url("../images/inst-11.png");
}
a.dg_logo3:hover, a.dg_logo3:active {
	background: url("../images/inst-12.png");
}
a.dg_logo4:hover, a.dg_logo4:active {
	background: url("../images/inst-13.png");
}
.dg_slider {
	height: 379px;
	width: 379px;
	position: absolute;
	top: 74px;
	left: 68px;
	z-index: -100;
	border-radius: 350px;
	overflow:hidden;
}

.dg_slider img{
	height:450px;	
}

.btn01, .btn02, .btn03, .btn04, .btn05, .btn06, .btn07, .btn08, .btn01:hover, .btn02:hover, .btn03:hover, .btn04:hover, .btn05:hover, .btn06:hover, .btn07:hover, .btn08:hover {
	position: absolute;
	background: #ccc;
	background: url("../images/spritemenuprincipalindex.png");
	background-size:230px;
	border-radius:200px;
	color:#d1edfc;
	text-align:center;
	font-size: 0.58em;
	text-decoration:none;
}
.btn01 {
	width: 70px;
height: 24px;
left: 215px;
top: 14px;
background-position: -31px -51px;
padding-top: 46px;	
}
.descripcion{
	font-family:"AllerBd";
	color:#ffffff;
	font-size:1.1em;
	visibility:hidden;
	display:block; 
	width:110px; 
	height:auto;
	position:absolute;	
	background:rgba(255, 200, 0, 0.9);
	padding:5px;
	border-radius: 5px;
}
.btn01:hover .descripcion{
	visibility:visible;
	left:90px;
	top:-5px;
	text-align:left;
}
.btn02:hover .descripcion{
	visibility:visible;
	left: -132px;
top: 27px;
	text-align:right;
}
.btn03:hover .descripcion{
	visibility:visible;
	left: -132px;
top: 15px;
	text-align:right;
}
.btn04:hover .descripcion{
	visibility:visible;
	left: -132px;
top: 15px;
	text-align:right;
}
.btn05:hover .descripcion{
	visibility:visible;
	left: -132px;
top: 27px;
	text-align:right;
}
.btn06:hover .descripcion{
	visibility:visible;
	left:135px;
	top:35px;
	text-align:left;
}
.btn07:hover .descripcion{
	visibility:visible;
	left:90px;
	top:16px;
	text-align:left;
}
.btn08:hover .descripcion{
	visibility:visible;
	left:142px;
	top:30px;
	text-align:left;
}
.btn02 {
	width: 103px;
	height: 38px;
	left: 82px;
	top: 76px;
	background-position:-13px -138px;
	padding-top:65px;
}
.btn03 {
width: 74px;
height: 28px;
left: 15px;
top: 230px;
background-position: -29px -246px;
padding-top: 46px;
}
.btn04 {
width: 76px;
height: 32px;
left: 67px;
top: 345px;
background-position: -28px -343px;
padding-top: 44px;
}
.btn05 {
width: 66px;
height: 25px;
left: 171px;
top: 425px;
background-position: -34px -437px;
padding-top: 41px;
}
.btn06 {
	width: 118px;
height: 50px;
padding-top: 68px;
left: 291px;
top: 370px;
	background-position: -7px -509px;
}
.btn07 {
width: 76px;
height: 36px;
left: 426px;
top: 250px;
background-position: -30px -626px;
padding-top: 40px;
}
.btn08 {
	width: 120px;
height: 41px;
left: 351px;
top: 81px;
background-position: -10px -694px;
padding-top: 79px;
}
a.btn01:hover, a.btn01:active {
	transition: all 1s;
	background-position:-133px -51px;
}
a.btn02:hover, a.btn02:active {
	transition: all 1s;
	background-position:-115px -138px;
}
a.btn03:hover, a.btn03:active {
	transition: all 1s;
	background-position: -131px -246px;
}
a.btn04:hover, a.btn04:active {
	transition: all 1s;
	background-position:-130px -343px;
}
a.btn05:hover, a.btn05:active {
	transition: all 1s;
	background-position:-136px -437px;
}
a.btn06:hover, a.btn06:active {
	transition: all 1s;
	background-position:-110px -509px;
}
a.btn07:hover, a.btn07:active {
	transition: all 1s;
	background-position:-132px -626px;
}
a.btn08:hover, a.btn08:active {
	transition: all 1s;
	background-position:-111px -694px;
}

#dg_menu .titulo{		
	text-shadow: #333 0.1em 0.1em 0.2em;
}

/*Font Aller*/
@font-face {
	font-family: "AllerRg";
	src: url(../font/Aller_Rg.ttf) format("truetype");
}
@font-face {
	font-family: "AllerBd";
	src: url(../font/Aller_Bd.ttf) format("truetype");
}

@media (min-width: 1300px) {
.dg_centrar{
	width:800px;
	height:800px;
	margin-left:-400px;
	margin-top:-400px;
}
#dg_menu {
	background: url("../images/fondomenu.png");
	background-size:755px;
	width: 750px;
	height: 750px;
}
.btn01, .btn02, .btn03, .btn04, .btn05, .btn06, .btn07, .btn08, .btn01:hover, .btn02:hover, .btn03:hover, .btn04:hover, .btn05:hover, .btn06:hover, .btn07:hover, .btn08:hover {
	position: absolute;
	background: #ddd111;
	background: url("../images/spritemenuprincipalindex.png");
	background-size:380px;
	border-radius:200px;
	color:#d1edfc;
	text-align:center;
	font-size: 0.85em;
	text-decoration:none;
}
.btn01 {
	width: 105px;
height: 34px;
left: 318px;
top: 18px;
background-position: -55px -82px;
padding-top: 71px;
}
.btn02 {
	width: 155px;
height: 97px;
left: 118px;
top: 110px;
background-position: -29px -1689px;
padding-top: 108px;
}
.btn03 {
width: 110px;
height: 38px;
left: 20px;
top: 342px;
background-position: -54px -406px;
padding-top: 72px;
}
.btn04 {
width: 102px;
height: 34px;
left: 99px;
top: 513px;
background-position: -52px -567px;
padding-top: 68px;
padding-left: 5px;
padding-right: 5px;
}
.btn05 {
width: 102px;
height: 32px;
left: 251px;
top: 631px;
background-position: -58px -719px;
padding-top: 70px;
}
.btn06 {
	width: 178px;
height: 63px;
padding-top: 115px;
left: 431px;
top: 551px;
background-position: -21px -835px;
}
.btn07 {
width: 111px;
height: 45px;
left: 635px;
top: 372px;
background-position: -54px -1035px;
padding-top: 65px;
font-size: 0.8em;
}
.btn08 {
	width: 189px;
height: 59px;
left: 516px;
top: 114px;
background-position: -15px 324px;
padding-top: 130px;
}
a.btn01:hover, a.btn01:active {
	background-position:-225px -82px;
}
a.btn02:hover, a.btn02:active {
	background-position:-201px -1689px;
}
a.btn03:hover, a.btn03:active {
	background-position: -224px -406px;
}
a.btn04:hover, a.btn04:active {
	background-position:-222px -567px;
}
a.btn05:hover, a.btn05:active {
	background-position:-228px -719px;
}
a.btn06:hover, a.btn06:active {
	background-position:-190px -835px;
}
a.btn07:hover, a.btn07:active {
	background-position:-224px -1035px;
	font-size:0.8em;
}
a.btn08:hover, a.btn08:active {
	background-position:-185px 324px;
}
.btn01:hover .descripcion{
	visibility:visible;
	left:135px;
	top:0px;
	text-align:left;
}
.btn06:hover .descripcion{
	visibility:visible;
	left:200px;
	top:50px;
	text-align:left;
}
.btn07:hover .descripcion{
	visibility:visible;
	left:135px;
	top:16px;
	text-align:left;
}
.btn08:hover .descripcion{
	visibility:visible;
	left:212px;
	top:55px;
	text-align:left;
}

.dg_slider {
	height: 599px;
	width: 599px;
	position: absolute;
	top: 74px;
	left: 88px;
}
.dg_slider img{
	height:650px;	
}

}

@media (max-width: 750px) {
	.btn01:hover .descripcion, .btn02:hover .descripcion, .btn03:hover .descripcion, .btn04:hover .descripcion, .btn05:hover .descripcion, .btn06:hover .descripcion, .btn07:hover .descripcion, .btn08:hover .descripcion{
		visibility:hidden;
	}
}

@media (max-width: 550px) {
	body{
	}
	.dg_centrar{
		width:300px;
		height:300px;
		margin-left:-150px;
		margin-top:-150px;
	}
	#dg_menu {
		background: url("../images/fondomenu.png");
		background-size: 300px;
		width: 300px;
		height: 297px;
	}
	
	.btn01, .btn02, .btn03, .btn04, .btn05, .btn06, .btn07, .btn08, .btn01:hover, .btn02:hover, .btn03:hover, .btn04:hover, .btn05:hover, .btn06:hover, .btn07:hover, .btn08:hover {
		position: absolute;
		background: #ddd111;
		background: url("../images/spritemenuprincipalindex.png");
		background-size:190px;
		border-radius:200px;
		color:#d1edfc;
		text-align:center;
		font-size: 0.85em;
		text-decoration:none;
	}
	.btn01 {
		width: 45px;
		height: 45;
		left: 128px;
		top: 9px;
		background-position: -31px -40px;
		padding-top: 0px;
	}
	.btn02 {
		width: 66px;
		height: 66px;
		left: 48px;
		top: 44px;
		background-position: -20px -110px;
		padding-top: 0;
	}
	.btn03 {
		width: 47px;
		height: 47px;
		left: 10px;
		top: 138px;
		background-position: -31px -201px;
		padding-top: 0;
	}
	.btn04 {
		width: 48px;
		height: 48px;
		left: 41px;
		top: 205px;
		background-position: -30px -280px;
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.btn05 {
		width: 44px;
		height: 44px;
		left: 102px;
		top: 252px;
		background-position: -33px -359px;
		padding-top: 0px;
	}
	.btn06 {
		width: 74px;
		height: 74px;
		left: 173px;
		top: 220px;
		background-position: -18px -421px;
		padding-top: 0px;
	}
	.btn07 {
		width: 48px;
		height: 48px;
		left: 253px;
		top: 150px;
		background-position: -31px -513px;
		padding-top: 0px;	
		font-size:0.85em;
	}
	.btn08 {
		width: 74px;
		height: 74px;
		left: 209px;
		top: 49px;
		background-position: -18px -578px;
		padding-top: 0px;
	}
	a.btn01:hover, a.btn01:active {
		background-position:-117px -40px;
	}
	a.btn02:hover, a.btn02:active {
		background-position:-106px -110px;
	}
	a.btn03:hover, a.btn03:active {
		background-position: -117px -201px;
	}
	a.btn04:hover, a.btn04:active {
		background-position:-116px -280px;
	}
	a.btn05:hover, a.btn05:active {
		background-position:-118px -359px;
	}
	a.btn06:hover, a.btn06:active {
		background-position:-103px -421px;
	}
	a.btn07:hover, a.btn07:active {
		background-position:-116px -513px;
		font-size:0.85em;
	}
	a.btn08:hover, a.btn08:active {
		background-position:-101px -578px;
	}
	
	#dg_menu .titulo{		
		text-shadow: black 0.1em 0.1em 0.2em;
		visibility:hidden;
		width:200px;	
		position:absolute;
		top:0px;
		left:0px;
		z-index:-4;
	}
	#dg_menu a.btn01 .titulo {
		top: 16px;
		left: -72px;
	}
	#dg_menu a.btn02 .titulo {
		top: 36px;
		left: -40px;
	}
	#dg_menu a.btn03 .titulo {
		top: -15px;
		left: -29px;
	}
	#dg_menu a.btn04 .titulo {
		top: 10px;
		left: -20px;
	}
	#dg_menu a.btn05 .titulo {
		top: 16px;
		left: -72px;
	}
	#dg_menu a.btn06 .titulo {
		top: 16px;
		left: -72px;
	}
	#dg_menu a.btn07 .titulo {
		top: 16px;
		left: -150px;
	}
	#dg_menu a.btn08 .titulo {
		top: 16px;
		left: -72px;
	}
	
	#dg_menu *:hover .titulo {
		transition: all 1s;
		visibility:visible;
	}
	#dg_menu a.btn01:hover .titulo {
		top:144px;
		left:-69px;
	}
	#dg_menu a.btn02:hover .titulo {
		top:100px;
		left:11px;
	}
	#dg_menu a.btn03:hover .titulo {
		top:16px;
		left:49px;
	}
	#dg_menu a.btn04:hover .titulo {
		top:-50px;
		left:18px;
	}
	#dg_menu a.btn05:hover .titulo {
		top:-98px;
		left:-43px;
	}
	#dg_menu a.btn06:hover .titulo {
		top: -67px;
		left: -114px;
	}
	#dg_menu a.btn07:hover .titulo {
		top:4px;
		left:-194px;
	}
	#dg_menu a.btn08:hover .titulo {
		top:100px;
		left:-150px;
	}
	
	
	.dg_slider {
		height: 250px;
		width: 250px;
		position: absolute;
		top: 30px;
		left: 30px;
	}
	.dg_slider img{
		height:250px;	
	}
}