* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 0;
    outline : 0;
}

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 14px;
  background: url(imagenes/web/fondo_caratula.gif);
}

#pagina {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.parejas {
  height: 100%;
  width: 100%;
  margin: auto;
}

#caratula {
   display: table;
   width: 100%;
   height: 100%;
}

#caratula #nubotica {
	position: relative;
	width: 280px;
	margin: auto;
}

#caratula .mask span{
	position: relative;
	display: block;
   width: 100%;
   height: 100%;
   text-align: center;
   margin: auto;
   background-position: -280px 0;
   -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}

#caratula .mask2 span{
  background-position: 50px 0;
  /*change speed to see in slow motion*/
  -webkit-transition: all 2s;
  transition: all 2s;
}

#caratula .mask span::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask: url('imagenes/nubotica2.png') center;
  mask: url('imagenes/brillo.svg#mask-firefox');
}

.cont {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

#horizontal {
   display: none;
   background-color: black;
   color: white;
   width: 100%;
   height: 100%;
   position: fixed;
}

#horizontal #movil {
  transform: rotate(-270deg);
  animation: girar 4s infinite;
}

@-webkit-keyframes girar {
  0% { transform: rotate(-270deg); }
  50% { transform: rotate(-360deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes girar {
  0% { transform: rotate(-270deg); }
  50% { transform: rotate(-360deg); }
  100% { transform: rotate(-360deg); }
}

@media (orientation:landscape) and (max-width:800px) {
   #pagina {
   	display: none;
   }
   
   #horizontal {
      display: table;
   }
}