* {margin:0px; padding:0px; }

body 
{position:absolute;
top: 10px;
left: 10px;
width:95%;
height:auto;
border:0px;
font-family: arial;
text-align: justify;
font-size: 1.5em;
font-weight: bold;
color:#000000;
text-decoration:none;
background-image: url(bg-granulado.gif); }

monitor
{ visibility: visible; 
display: block; }

@media screen and (max-width:551px)
{monitor { visibility: hidden; display:none; }}

celular
{ visibility: hidden; 
display: none; }

@media screen and (max-width:550px)
{celular { visibility: visible; display: block; }}



##########################
========= HIJOS ==========
##########################


*/ div#s
{width: 116px;
height: 116px;
background-image: url(finger.gif);
visibility:visible; }

div#sx
{width: 116px;
height: 116px;
background-image: url(scanner.gif);
visibility:hidden;}

div#s:hover div#sx 
{visibility:visible; } 

div#b
{width: 116px;
height: 116px;
background-image: url(finger.gif);
visibility:visible; }

div#bx
{width: 116px;
height: 116px;
background-image: url(scanner.gif);
visibility:hidden;}

div#b:hover div#bx 
{visibility:visible; } /*


############################
========= Boton N 1 ========
############################

*/ div#boton-1
{width:60px;
height:65px;
background-image: url(play-a.png);
visibility:visible; }

div#enlace-1
{width:60px;
height:65px;
background-image: url(play-a2.png); 
visibility:hidden;}

div#boton-1:hover div#enlace-1 
{visibility:visible; }

@media screen and (max-width:550px)
{div#boton-1 {visibility: hidden; display: none;}} /*


############################
========= Boton N 2 ========
############################

*/ div#boton-2
{width:60px;
height:65px;
background-image: url(stop-a.png);
visibility:visible; }

div#enlace-2
{width:60px;
height:65px;
background-image: url(stop-a2.png); 
visibility:hidden;}

div#boton-2:hover div#enlace-2 
{visibility:visible; }

@media screen and (max-width:550px)
{div#boton-2 {visibility: hidden; display: none;}} /*


############################
========= Boton N 3 ========
############################

*/ div#boton-3
{width:60px;
height:65px;
background-image: url(exit-a.png);
visibility:visible; }

div#enlace-3
{width:60px;
height:65px;
background-image: url(exit-a2.png); 
visibility:hidden;}

div#boton-3:hover div#enlace-3 
{visibility:visible; }

@media screen and (max-width:550px)
{div#boton-3 {visibility: hidden; display: none;}} /*


############################
========= Boton N 1 ========
############################

*/ div#boton-1cel
{width:60px;
height:65px;
background-image: url(play-a.png);
visibility:visible; }

div#enlace-1cel
{width:60px;
height:65px;
background-image: url(play-a2.png); 
visibility:hidden;}

div#boton-1cel:hover div#enlace-1cel 
{visibility:visible; }

@media screen and (min-width:550px)
{div#boton-1cel {visibility: hidden; display: none;}} /*


############################
========= Boton N 2 ========
############################

*/ div#boton-2cel
{width:60px;
height:65px;
background-image: url(stop-a.png);
visibility:visible; }

div#enlace-2cel
{width:60px;
height:65px;
background-image: url(stop-a2.png); 
visibility:hidden;}

div#boton-2cel:hover div#enlace-2cel 
{visibility:visible; }

@media screen and (min-width:550px)
{div#boton-2cel {visibility: hidden; display: none;}} /*


############################
========= Boton N 3 ========
############################

*/ div#boton-3cel
{width:60px;
height:65px;
background-image: url(exit-a.png);
visibility:visible; }

div#enlace-3cel
{width:60px;
height:65px;
background-image: url(exit-a2.png); 
visibility:hidden;}

div#boton-3cel:hover div#enlace-3cel 
{visibility:visible; }

@media screen and (min-width:550px)
{div#boton-3cel {visibility: hidden; display: none;}} /*



/* ----------- iPad ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)


/* ----------- iPad 1 & 2 /Mini Media Queries  ----------- */
/* ----------- Retina iPad in portrait & landscape  ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) 

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) 

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) 



/* ----------- iPad 3 & 4  ----------- */
/* ----------- Retina iPad in portrait & landscape ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)  

/* Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2)

/* Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2)


/* ----------- iPhone 4 and 4S ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) 
{ }

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) 
{ }

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) 
{ }

/* ----------- iPhone 5 and 5S ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
{ }

/* Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) 
{ }

/* Portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) 
{ }


/* ----------- iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) 
{ }

/* Landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape)  
{ }

/* Portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)  
{ }


/* ----------- iPhone 6, 7, 8 Plus ----------- */

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) 
{ }

/* Landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) 
{ }

/* Portrait */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) 
{ }


/* ----------- iPhone X ----------- */

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)
{ }

/* Landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) 
{ }

/* Portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait)
{ }