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

body 
{position: absolute;
top: 1px;
left: 1px;
width: 95%;
height: 98%;
max-width: 95%;
max-height: 98%;
border:0px;
background-color: #000000; }


@media screen and (max-width:655px)
{body { float: left;}}



div#ayuda
{position: relative;
top: 0px;
left: -15px;
width: 100px;
height: 92px;
background-image: url(ayuda-2.png);
visibility:visible; }

div#ayuda-text
{position: relative;
top: -150px;
left: 130px;
width: 720px;
height: 340px;
background-image: url(ayuda-720.png);
visibility:hidden;}

div#ayuda:hover div#ayuda-text 
{visibility:visible; }




div#ayuda-cel
{position: relative;
top: 0px;
left: -8px;
width: 50px;
height: 45px;
background-image: url(ayuda-cel.png);
visibility:visible; }

div#ayuda-text-cel
{position: absolute;
top: -150px;
left: -250px;
width: 250px;
height: 430px;
background-image: url(ayuda-text-cel.png);
visibility:hidden;}

div#ayuda-cel:hover div#ayuda-text-cel 
{visibility:visible; }



horizontal
{ visibility: hidden; 
display: none; }

@media screen and (min-width:450px)
{horizontal { visibility: visible; display: block; }}

vertical
{ visibility: hidden; 
display: none; }

@media screen and (max-width:450px)
{vertical { position: absolute;
top: 10px;
left: 10px;
visibility: visible; 
display: block;
width: 98%;
height: 100%; }}




div#scanner
{position: relative;
top:0px;
left:0px;
width:65px;
height:30px;
visibility:visible;
background-image: url(ok-f.png);}

div#scanner-2
{position:relative;
top: 0px;
left: 70px;
width: 181px;
height: 104px;
background-image: url(tab.gif);
visibility:hidden;}

div#scanner:hover div#scanner-2
{visibility:visible;}



scanner
{ position: absolute;
top: 30px;
left: 1px;
width: 100%;
height: 100%;
visibility: visible;
display: block; }}


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

scanner-2
{visibility: hidden;
display: none; }

@media screen and (max-width:655px)
{scanner-2 { position: absolute;
top: 10px;
left: 10px;
width:80%;
visibility: visible;
display: block; }}


/* ----------- 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)
{ }