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

body 
{position: absolute;
top: 5px;
left: 0px;
width:90%;
height:100%;
max-width: 90%;
max-height: 100%;
border:0px;
font-family: arial;
font-weight: normal;
text-align: justify;
color:#ffffff;
text-decoration:none;
text-shadow: -3px 3px 3px #000000;
background-size: cover;
background-color: #000000;
-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;
background-image: url(house-500-new.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;}}

@media screen and (max-width:655px)
{body { float: left;
background-image: url(house-350-new.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;}}


header
{position: absolute;
top: 10px;
left: 10px; }

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

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

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

marco-1
{position: absolute;
top: 11px;
left: 11px;
border: 3px solid #00ff00;
width: 260px;
height: 155px; 
visivility: visible;
display: block; }

@media screen and (max-width:655px)
{marco-1 { visivility: hidden;
display: none; }}

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

@media screen and (max-width:655px)
{marco-2 { position: absolute;
top: 10px;
left: 10px;
width:80%;border: 6px solid #ff0000;
width: 248px;
height: 145px; 
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; }}

am
{font-family: arial;
text-align: justify;
color:#ffff00;}


h2
{font-family: arial;
font-weight: normal;
text-align: justify;
color:#ffffff;
font-size: 1.1em;
text-decoration:none;
text-shadow: -3px 3px 3px #000000; }


texto
{position: absolute;
top: 175px;
left: 255px;
border: 10px;
font-size: 1.5em;
font-weight: normal;
text-align: justify;
text-shadow: -3px 3px 3px #000000; }

@media screen and (max-width: 800px)
{texto { border:0px;
top: 210px;
left: 225px;
border: 10px;
font-size: 1.3em; }}

@media screen and (max-width: 655px)
{texto { position:absolute;
top: 210px;
left: 25px;
border: 10px;
font-size: 1.1em;
font-weight: normal; }}



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

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

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

@media screen and (max-width: 655px)
{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: 4px; }

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

azul { display: block;
box-sizing:border-box;
padding: 4px;
color:#00ffff;
font-weight: bold; }

azul:hover { display: block;
box-sizing:border-box;
padding: 4px;
color:#ffff00;
font-weight: bold;
background-image: url(resaltado-2.png); }

verde { display: block;
box-sizing:border-box;
padding: 4px;
color:#ffffff;
font-weight: normal; }

verde:hover { display: block;
box-sizing:border-box;
padding: 4px;
color:#00ff00;
font-weight: normal;
background-image: url(resaltado-2.png); }


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

*/ lat-m
{ visibility: hidden; }

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

@media screen and (min-width:655px)
{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: 22px;
width: 120px;
height: 900px;
color:#ffff00;
text-shadow: -4px 4px 4px #000000;
visibility: hidden;}

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


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

*/ lat-c
{ position:absolute;
top: 15px;
left: 15px;
width: 30%;
height: 180%;
visibility: hidden; }

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

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

lat-cb
{ position: relative;
top: -5px;
left: -2px;
height: 900px; 
visibility: hidden;}

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


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

*/ sup-m
{ visibility: hidden; }

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

@media screen and (min-width:655px)
{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:655px)
{sup-m:hover sup-mb  { position:absolute;
top: -7px;
left: 132px;
width: 655px;
height: 130px;
visibility: visible; }} /*


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

*/ sup-c
{ position: absolute;
top: 15px;
left: 90px;
width: 60%;
height: 30%;
visibility: hidden; }

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

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

sup-cb
{position: relative;
top: -95px;
left: 30px;
visibility: hidden;}

@media screen and (max-width:655px)
{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)
{ }