body, html {
	touch-action: none;
	content-zooming: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: sans-serif serif "Open Sans" Verdana;
}

canvas {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: #222;
	cursor: pointer;
}

img{
	 display: block;
	 margin: left;
}

#enconstruccion {
	display:block;
	margin: auto;
	color: #f9f9f9;
	position: absolute;
	bottom: 5%;
	left: 50%;
	
}

#contenedor {
  font-family: Verdana, Arial;
	color: #f9f9f9;
	position: absolute;
	margin-top: 0%;
	margin-left: 0%;
	height: 10%;
	width: 100%;
	background: linear-gradient(180deg, rgba(2,0,36,0.8) 20%,
																			rgba(9,121,62,0.7) 35%,
																			rgba(0,212,255,0.5) 100%);
	/*background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(121,9,114,1) 35%, rgba(78,81,164,1) 58%, rgba(50,128,197,1) 73%, rgba(0,212,255,1) 100%);*/
}

#iot{
	color: #f9f9f9;
	position: absolute;
	bottom: 5%;
	right: -8%;
	height: 7%;
	width: 20%;
}

#smart{
	color: #f9f9f9;
	position: absolute;
	bottom: 5%;
	left: 2%;

	height: 7%;
	width: 20%;
}

#tribu{
	background-position: 400px 400px;

}

#fondo{
	color: #f9f9f9;
	position: absolute;
	bottom: 1%;
	left: 10px;

	height: 10%;
	width: 100%;
}

#boton{
	padding: 0px; margin: 01px;
	border-width: medium;
	border-color: #fffff;
}

#anillo{
padding: 25px; margin: 00px;

}

#logo{
  position: relative;
	margin-top: 1%;
	margin-left: 0%;
}

#btnlogin{
	position: relative;
	margin-top: 1%;
	margin-right: 1%;
}

img:hover{
	filter: saturate(180%);
}

.brillog{
	position:relative;
	margin: 0 auto;
  display: block;
	height: 55px;
	width: 400px;
	text-decoration:none;
	overflow:hidden;
}
.brillog span{
	position:relative;
	display: block;
	background:url(../img/brillog.png) no-repeat;
	background-position: -250px -10px;
	margin-top:-19px;
	height: 11px;
	width: 400px;
}
.brillog:hover span{
	background-position: 400px 10px;
	-webkit-transition-property: all;
	-webkit-transition-duration: 1.5s;
	transition-property: all;
	transition-duration: 1.5s;

}

.menu {
  width: 5em;
  height: 5em;
}
.menu .btn {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;/*0*/
  z-index: -10;
  cursor: pointer;
  -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transition: opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}


/*
 * page footer
 */
.footer {
	margin-top: 25%;
	left: 0%;
	background: url(../img/footer_b.png) repeat-x ;
}

.circulo {
	width: 20px;
  height: 20px;
	border-radius: 100%;
  border: 1px solid #f0f0f0;
}


/*brillo de letraS */
p.shine
{
    font-size: 3em;
    margin: 0 auto;
    width: 700px;
}

.shine
{
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 125px;

    color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;

    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: top right;
    }
}