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

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

@media screen and (max-width:800px)
{body { float: left;
height:100%;
font-size: 1.3em;
background-image: url(clancy-500.png);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;}}

@media screen and (max-width:575px)
{body { float: left;
height:100%;
font-size: 1.1em;
background-image: url(clancy-350.png);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;}}


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

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

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

@media screen and (max-width:450px)
{header-2 { 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: 150px;
font-size: 1.8em;
font-weight: normal;
text-align: justify;
text-shadow: -3px 3px 3px #000000; }

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

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

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

@media screen and (max-width: 450px)
{texto { position:absolute;
top: 170px;
left: 0px;
font-size: 1em;
font-weight: bold; }}

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

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

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

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

@media screen and (max-width: 450px)
{blanco:hover {display: block;
position: relative;
top: 0px;
left: -40px;
width: 130px;
height: 83px;
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: 71px;
left: 0px; }

radio-b { position: absolute;
top: 71px;
left: 116px; }

radio-c { position: absolute;
top: 71px;
left: 159px; }

exit-a { position: absolute;
top: 2px;
left: 0px; }

exit-b { position: absolute;
top: 2px;
left: 77px; }

exit-c { position: absolute;
top: 2px;
left: 154px; }


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

*/ lat-m
{ visibility: hidden; }

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

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

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

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


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

*/ lat-c
{ position:absolute;
top: 24px;
left: -5px;
padding-top: 10px; 
padding-left: 10px;
width: 100px;
height: 140px;
visibility: hidden; }

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

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

lat-cb
{ position:absolute;
top: 150px;
left: 15px;
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:450px)
{sup-m { visibility: hidden; }}

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

sup-mb
{ visibility: hidden;}

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


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

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

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

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

sup-cb
{position: absolute;
top: -2px;
left: 120px;
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)
{ }