/*<link rel="stylesheet" type="text/css" href="style.css">*/
body{
	padding: 0; 
  margin: 0; 
  background-color:#000000;  
  overflow: auto;
}
/*1440 total width*/
#mycontainer{


}
#about{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-color: rgba(0, 0, 0, .85);;
}

#fondo{
  position: absolute;
  height: 100%;
  width: 100%;
  align-content: center; 
  z-index: 0;
  font-family:'RobotoBlack';
}
#btnCerrar{
  position: absolute;
  margin-top: 5%; 
  right: 5%;
  color: white; 
  font-size: 4vw; 
  font-family: 'volcan', sans-serif; 
  text-decoration: none;


}
#ruendaInicio{
  position: absolute;
  width:10%;
  height: auto; 
  margin-top: 4.5%;
  left: 45%;
}

#tit{
  position:absolute;
  font-weight: bold;
  color: white; 
  font-size: 2vw; 
  font-family: 'volcan', sans-serif; 
  margin-top: 15%;
  text-align: center;
  right: 45%;

}
#int2{
  position:absolute;
  font-weight: bold;
  text-decoration: none;
  color: white; 
  font-size: 1.8vw; 
  font-family: 'volcan', sans-serif; 
  margin-top: 20%;
  right: 40%;
  z-index: 1; 
}
#int{
  position:absolute;
  font-weight: bold;
  text-decoration: none;
  color: white; 
  font-size: 1.8vw; 
  font-family: 'volcan', sans-serif; 
  margin-top: 20%;
  right: 55%;
  z-index: 1; 
}
#int3{
  position:absolute;
  font-weight: bold;
  text-decoration: none;
  color: white; 
  font-size: 1.8vw; 
  font-family: 'volcan', sans-serif; 
  margin-top: 20%;
  right: 30%;
  z-index: 1; 
}
#int4{
  position:absolute;
  font-weight: bold;
  text-decoration: none;
  color: white; 
  font-size: 1.8vw; 
  font-family: 'volcan', sans-serif; 
  margin-top: 20%;
  right: 20%;
  z-index: 1; 
}
 
#intro{
  position:absolute;
  width:60%;
  height:45vh;
  margin-top:  25%;
  z-index: -2;
  left: 20%; 
  color: white;
  visibility: visible;
  font-size: 2.1vh; 
  overflow: auto;
  font-family: sans-serif;
}
#instrucciones{
  position:absolute;
  width:60%;
  height:60vh;
  margin-top:  25%;
  left: 20%; 
   font-size: 2.1vh; 
  color: white;
  visibility: hidden;
  overflow: auto;
  font-family: sans-serif;
}
#acerca{
  position:absolute;
  width:60%;
  height:45vh;
  margin-top:  25%;
  left: 20%; 
  color: white;
  visibility: hidden;
  font-size: 2.1vh; 
  overflow: auto;
  font-family: sans-serif;
}
#creditos{
  text-align: center;
  position:absolute;
  width:60%;
  height:45vh;
  margin-top:  25%;
  left: 20%; 
  color: white;
  font-size: 2.1vh; 
  overflow: auto;
  visibility: hidden;
  font-family: sans-serif;

}
#fondo img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:auto; 
  width:100%;
}
#ruedaN{
  position: absolute;
  height: auto;
  width: 10%;
  padding-top:5%;
  left:4.5%;
}
#contRueda{
  position: fixed;
  background-color: black;
  width: 8%;
  height: 10%;
  left: 2.5%; 
  visibility: hidden;
}
#ruedaF{
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%; 
  width: auto;
 
  display: block;
}

#overlay{
   position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}
#btn_1{ /*jardin borda*/
  position: absolute;
  width: 2%;
  height: auto;
  top: 64%;
  left:34.5%;
  display: flex;
}
/*
#btn_1:hover {
    background-image: url('imagenes/borda.svg');
    height: 70px;
    width: 120px;
}*/
#btn_2 { /*cine morelos*/
  position: absolute;
  width: 2%;
  
  padding-top: 61.5%;
  left:37%;
}
#btn_3{ /*casino de la selva*/
  position: absolute;
  width: 2%;
  height: auto;
  padding-top: 22%;
  left:61%;
}
#btn_4{ /*palacio de cortes*/
  position: absolute;
  width: 2%;
  height: auto;
  padding-top: 64%;
  left:53%;
}
#btn_5{ /*plaza juarez*/
  position: absolute;
  width: 2%;
  height: auto;
  padding-top: 59.5%;
  left:45.5%;
}
#btn_6{/*plaza de armas*/
  position: absolute;
  width: 2%;
  height: auto;
  padding-top: 61.5%;
  left:48%;
}
#btn_7{/*barranca*/
  position: absolute;
  width: 2%;
  height: auto;
  padding-top: 67%;
  left:61.5%;
}


.btn_guardar:hover{
  color:#cb2026;
  cursor:pointer;
}


.loaderCircle {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    animation: spin 2s linear infinite;
   position: absolute;
    top: 50%;
    left: 50%;
}
#loaderContents{
    position: absolute; 
    height: 100%;
    width: 10%;
    left: 45%;

}
#loader{
    position: absolute;
    background-color: rgba(0,0,0, 0.5);
    width: 100%;
    height: 100%;
}
#loaderText {
font-family: Roboto;
size: 10pt;
  text-align: center;
  color: white;
  position: absolute;
  line-height: 100px; 
  
  width: 100%;
  top: 50%;
  justify-content: center; 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@font-face {
font-family: RobotoBlack;
src: url("fonts/Roboto-Black.ttf") format("truetype");
}
@font-face {
font-family: RobotoLight;
src: url("fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
font-family: RobotoMedium;
src: url("fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
font-family: RobotoRegular;
src: url("fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
font-family: ChivoLight;
src: url("fonts/Chivo-Light.ttf") format("truetype");
}
@font-face {
font-family: volcan;

src: url("fuentes/youcan.TTF") format("truetype");
}




.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.scroll-pane
{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.horizontal-only
{
    height: auto;
    max-height: 200px;
}