* {margin: auto; padding:0px; text-decoration: none; }

body 
{position: absolute;
top: 0px;
left: 0px;
width:85%;
height:100%;
border:0px;
font-family: arial;
text-align: justify;
color:#ffffff;
text-decoration:none;
text-shadow: -3px 3px 3px #000000;
background-image: url(piramides-900.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000000; }

@media screen and (max-width: 900px)
{body { float: left;
background-image: url(piramides-900.jpg);}}

@media screen and (max-width: 700px)
{body { float: left;
background-image: url(piramides-500.png);}}

@media screen and (max-width: 450px)
{body { float: left;
background-image: url(piramides-350.png);}}







header
{position: absolute;
top: 11px;
left: 11px;
width:80%; 
visivility: visible;
display: block; }

@media screen and (max-width:450px)
{header { visivility: hidden;
display: none; }}



header-2
{position: absolute;
top: 11px;
left: 11px;
width:80%; 
visivility: visible;
display: block; }

@media screen and (max-width:450px)
{header-2 { visivility: hidden;
display: none; }}



header-3
{visivility: hidden;
display: none; }

@media screen and (max-width:450px)
{header-3 { position: absolute;
top: 10px;
left: 10px;
width:80%;
visivility: visible;
display: block; }}





bicolumna
{ visibility: hidden; 
display: none; }

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

bicolumna-b
{ visibility: hidden; 
display: none; }

@media screen and (max-width: 450px)
{bicolumna-b { visibility: visible; display: block; }}

texto
{position: absolute;
top: 175px;
left: 270px;
margin: auto;
width: 75%;
font-size: 1.8em;
font-weight: normal;
text-align: justify;
text-shadow: -3px 3px 3px #000000; }

@media screen and (max-width: 900px)
{texto {font-size: 1.6em; }}

@media screen and (max-width: 700px)
{texto {font-size: 1.4em;
left: 140px;
width: 84%; }}

@media screen and (max-width: 450px)
{texto { position:absolute;
top: 210px;
margin: auto;
left: 70px;
font-size: 1em;
font-weight: bold;
width: 90%; }}

font-m
{font-size: 0.8em; }

blanco { display: block;
position: relative;
top: 0px;
left: -20px;
width: 180px;
height: 93px;
box-sizing:border-box;
padding:10px; }

blanco:hover {display: block;
position: relative;
top: 0px;
left: -20px;
width: 220px;
height: 93px;
box-sizing:border-box;
padding:10px;
background-image: url(resaltado-7d.png);
visibility: visible; }

@media screen and (max-width: 450px)
{blanco { display: block;
position: relative;
top: 0px;
left: -40px;
width: 180px;
height: 93px;
box-sizing:border-box;
padding:10px; }}

@media screen and (max-width: 450px)
{blanco:hover {display: block;
position: relative;
top: 0px;
left: -40px;
width: 180px;
height: 93px;
box-sizing:border-box;
padding:10px;
background-image: url(tab.gif); }}

negro { display: block;
box-sizing:border-box;
padding: 20px; }

negro:hover { display: block;
box-sizing:border-box;
padding: 20px;
background-image: url(resaltado-1.png); }

radio-a { position: absolute;
top: 67px;
left: 105px; }

radio-b { position: absolute;
top: 67px;
left: 221px; }

radio-c { position: absolute;
top: 67px;
left: 264px; }

exit-a { position: absolute;
top: 1px;
left: 105px; }

exit-b { position: absolute;
top: 1px;
left: 207px; }


#########################################
========= MENU LATERAL MONITOR ==========
#########################################

*/ lat-m
{ visibility: hidden; }

@media screen and (max-width: 700px)
{lat-m { visibility: hidden; display: none; }}

@media screen and (min-width: 700px)
{lat-m { position:absolute;
top: 10px;
left: -3px;
padding-top: 10px; 
padding-left: 10px;
width: 120px;
height: 150px;
cursor: pointer;
visibility: visible; }}

lat-mb
{ position:absolute;
top: 160px;
left: 15px;
width: 120px;
height: 900px; 
visibility: hidden;} 

@media screen and (min-width: 700px)
{lat-m:hover lat-mb  { visibility: visible; }} /*



########################################
========= MENU LATERAL TABLET ==========
########################################

*/ lat-t
{ position:absolute;
top: 30px;
left: 0px;
padding-top: 10px; 
padding-left: 10px;
width: 100px;
height: 140px;
visibility: visible; }

@media screen and (max-width: 450px)
{lat-t { visibility: hidden; display: none; }}

@media screen and (min-width: 700px)
{lat-t { visibility: hidden; display: none; }}


lat-tb
{ position:absolute;
top: 150px;
left: 10px;
height: 540px; 
visibility: hidden;}

@media screen and (max-width: 700px)
{lat-t:hover lat-tb  { visibility: visible; }} /*



#########################################
========= MENU LATERAL CELULAR ==========
#########################################

*/ lat-c
{ visibility: hidden; }

@media screen and (min-width: 450px)
{lat-c { visibility: hidden; display: none; }}

@media screen and (max-width: 450px)
{lat-c { position:absolute;
top: 15px;
left: 0px;
padding-top: 10px; 
padding-left: 10px;
width: 100px;
height: 140px;visibility: visible; }}

lat-cb
{ position:absolute;
top: 150px;
left: 10px;
height: 540px; 
visibility: hidden;}

@media screen and (max-width: 450px)
{lat-c:hover lat-cb  { visibility: visible; }} /*


##################################
========= MENU SUPERIOR ==========
##################################

*/ sup-m
{ visibility: hidden; }

@media screen and (max-width: 700px)
{sup-m { visibility: hidden; display: none; }}

@media screen and (min-width: 700px)
{sup-m
{ position:absolute;
top: 5px; 
left: 157px; 
width: 180px;
height: 140px;
cursor: pointer;
visibility: visible; }}

sup-mb
{ visibility: hidden;}

@media screen and (min-width: 700px)
{sup-m:hover sup-mb  { position:absolute;
top: 5px;
left: 20px;
width: 450px;
height: 130px;
visibility: visible; }} /*


#########################################
========= MENU SUPERIOR TABLET ==========
#########################################

*/ sup-t
{ position: absolute;
top: 10px; 
left: 160px; 
width: 100px;
height: 140px;
visibility: visible; }

@media screen and (max-width: 450px)
{sup-t { visibility: hidden; display: none; }}

@media screen and (min-width: 700px)
{sup-t { visibility: hidden; display: none; }}

sup-tb
{position: absolute;
top: -2px;
left: 15px;
visibility: hidden;}

@media screen and (max-width: 700px)
{sup-t:hover sup-tb  { visibility: visible; }} /*



##########################################
========= MENU SUPERIOR CELULAR ==========
##########################################

*/ sup-c
{ position: absolute;
top: 10px; 
left: 115px; 
width: 100px;
height: 140px;
visibility: hidden; }

@media screen and (min-width: 450px)
{sup-c { visibility: hidden; display: none; }}

@media screen and (max-width: 450px)
{sup-c { visibility: visible; }}

sup-cb
{position: absolute;
top: -2px;
left: 100px;
visibility: hidden;}

@media screen and (max-width: 450px)
{sup-c:hover sup-cb  { visibility: visible; }} /*



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