/*
 * Globals
 */
a,
a:focus,
a:hover {
  color: #990033; font-weight:bolder
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */
@font-face {
  font-family: "VtksChoice";
  src: url("fonts/VtksChoice.eot"); /* IE9 Compat Modes */
  src: url("fonts/VtksChoice.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/VtksChoice.otf") format("opentype"), /* Open Type Font */
    url("fonts/VtksChoice.svg") format("svg"), /* Legacy iOS */
    url("fonts/VtksChoice.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/VtksChoice.woff") format("woff"), /* Modern Browsers */
    url("fonts/VtksChoice.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
.VtksChoice { font-family: 'VtksChoice'; font-size:2.5em; font-weight:400; color:white }
.VtksChoice a:hover {color:#000}
.VtksChoice a {color:#fff}

.VtksChoicelight { font-family: 'VtksChoice'; font-size:1.0em; font-weight: 100; color:white }

.vertical {
	transform: rotate(270deg);
	transform-origin: left bottom 0;
}


    @media only screen and (max-width:1200px) {
		.VtksChoice { font-size:1.9em; }
    }

    @media only screen and (max-height:720px) {
		.VtksChoice { font-size:1.9em; }
    }

@font-face {
  font-family: "SearsTower";
  src: url("fonts/SearsTower.eot"); /* IE9 Compat Modes */
  src: url("fonts/SearsTower.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/SearsTower.otf") format("opentype"), /* Open Type Font */
    url("fonts/SearsTower.svg") format("svg"), /* Legacy iOS */
    url("fonts/SearsTower.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/SearsTower.woff") format("woff"), /* Modern Browsers */
    url("fonts/SearsTower.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

.SearsTower { font-family: 'SearsTower'; font-size:1.0em; font-weight:100; }
.SearsTower a:hover {color:#000}
.SearsTower {color:#fff}
.SearsTower h1 {font-size:1.5em}

    @media only screen and (max-width:1200px) {
		.SearsTower { font-size:1.0em; }
    }

    @media only screen and (max-height:720px) {
		.SearsTower { font-size:1.0em; }
    }

html,
body {
	height: auto;
	background-color: #000;

	color: #666666;
	text-align: center;
	/*text-shadow: 0 1px 3px rgba(0,0,0,.5);*/
	/* Desplegado suave con transiciones */
}

::-webkit-scrollbar {
      width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

/* anula scrollbar */
::-webkit-scrollbar {display:none}

.movil { display:none}

.no_movil { display:block}

    @media only screen and (max-width:500px) {
		.movil { display:block}
		.no_movil { display:none}
	}


.redondo{
     -moz-border-radius: 10px;  /* Firefox */
     -webkit-border-radius: 10px;   /* Chrome, Safari, Android, iOs */
     -ms-border-radius: 10px;   /* Internet explorer */
     -o-border-radius: 10px;   /* Opera */
     border-radius: 10px;
     border: 10px solid #ffffff;	
}

.sombras {
	-moz-box-shadow: 10px 10px 42px 0px #000;
	-webkit-box-shadow:  10px 10px 42px 0px #000;
	box-shadow:  10px 10px 42px 0px #000;
}

.sombra_img:hover { -webkit-filter: drop-shadow(10px 10px 10px #000);
			  filter: drop-shadow(10px 10px 10px #000);
}

.contorno {-webkit-text-stroke: 0.5px black; text-shadow: 0.5px 0.5px 0.5px black;}


img.grayscale_m {
	padding: 0 10 0 10;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale_m:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

#Logo { position: fixed; top:0px; left:0px; float:left; width:450px; height:auto; cursor:pointer; z-index:99  }

    @media only screen and (max-width:1300px) {
		#Logo { width:400px;  }
	}
    @media only screen and (max-width:110px) {
		#Logo { width:350px;  }
	}
    @media only screen and (max-width:900px) {
		#Logo { width:250px;  }
	}

#Derecha { width:40%; height:100%; background-color: transparent; float:right;  }
#Derecha #CartelGentuza{ width:100%; height: auto; max-height:100%; object-fit: contain; }

#comunicado {
	width:60%; height:100%; background-color: transparent; float:left; background-image:url('../images/fondo-comunicado.png'); background-size:100% 100%; background-repeat:no-repeat; overflow:hidden;
}

#comunicado h1{ margin-top:12%; font-size:1.5em }

#comunicado p { width:80%; height:65%; margin:0% 10% 10% 10%; color:#333333; overflow:hidden; overflow-y:auto; line-height:30px }

#MapaGoogle { width:200px; height: auto; float:left }

#Parking { width:300px; height: auto; float:right; margin-top:-50px }

    @media only screen and (max-width:1415px) {
		#MapaGoogle { width:150px; margin-top:30px; }
		#Parking { width:250px;  margin-top:-10px}
	}
    @media only screen and (max-width:1135px) {
		#MapaGoogle {  width:140px; margin-top:40px; }
		#Parking {  width:240px; margin-top:-5px}
	}
    @media only screen and (max-width:1075px) {
		#MapaGoogle {  width:120px; margin-top:60px; }
		#Parking {  width:220px; margin-top:10px}
	}
    @media only screen and (max-width:1050px) {
		#comunicado { width:100%; height:600px; float:none 	}
		#comunicado h1{ margin-top:3%;}
		#Derecha { width:100%; height:auto; }
		#Derecha #CartelGentuza{ width:100%; float:left }
		#MapaGoogle { width:170px; margin-top:30px  }
		#Parking { width:270px; margin-top:-20px }
	}
    @media only screen and (max-width:900px) {
		#comunicado h1{ margin-top:5%; font-size:1.2em}
	}

    @media only screen and (max-width:760px) {
		#MapaGoogle { width:130px; margin-top:50px   }
		#Parking { width:230px; margin-top:0px  }
	}

    @media only screen and (max-width:650px) {
		#MapaGoogle { width:110px; margin-top:90px   }
		#Parking { width:190px; margin-top:40px  }
	}

    @media only screen and (max-width:500px) {
		#comunicado h1{ margin-top:10%; width:60%; margin-left:20%;}
		#MapaGoogle { width:80px; margin:0px; margin-top:90px; margin-left:-10px;   }
		#Parking { width:140px; margin:0px; margin-top:50px; margin-right:-10px  }
	}

#BarraMapa { width:100%; height: auto; position: fixed; top:150px; left:0px; background-color: #666666; padding-left:10%; padding-right:10%;
		-o-opacity: 0.5;
		-ms-opacity: 0.5;
		-moz-opacity: 0.5;
		opacity: 0.5;
}


#BarraMapa:hover {
		-o-opacity: 1;
		-ms-opacity: 1;
		-moz-opacity: 1;
		opacity: 1;
}


#BarraMapa h1{ font-size:1.4em; color: #FFFF00; font-weight:bolder; float:left; margin-right:25px; margin-top: 12px; cursor:pointer }
#BarraMapa h1:hover{ color: red; }


#RutasGuaguas { position:fixed; left:0px; top:130px; float:left; width:100%; height:auto; z-index:99; background-color:yellow; border:thin #808080 solid }
#RutasGuaguas img { width:80px; height:auto; margin-top:3px; cursor:pointer; }


    @media only screen and (max-width:1300px) {
		#RutasGuaguas { top:110px; }
	}
    @media only screen and (max-width:110px) {
		#RutasGuaguas { top:90px; }
	}
    @media only screen and (max-width:900px) {
		#RutasGuaguas { top:70px; }
	}