html, body {
width: 100%;
height: 100%;
min-height: 600px;
}
h1 {
display: none;
visibility: hidden;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#selector {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
}
#social {
position: absolute;
bottom: 0px;
left: 50%;
width: 0px;
height: 0px;
text-align: center;
z-index: 20;
}
#social .socialButton {
position: absolute;
display: block;
bottom: 50px;
width: 64px;
height: 64px;
z-index: 10;
background-size: contain;
}
#social .socialButton.sBL {
right: 33px;
}
#social .socialButton.sBC {
left: -32px;
}
#social .socialButton.sBR {
left: 33px;
}
#branding {
position: absolute;
top: 0px;
left: 50%;
width: 0px;
height: 0px;
text-align: center;
z-index: 20;
}
#branding .logo {
position: absolute;
display: block;
top: 100px;
left: -125px;
width: 250px;
}
#lnkHogares, #lnkEmpresas {
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 1;
text-align: center;
overflow: hidden;
background-color: black;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
#lnkHogares:hover, #lnkEmpresas:hover {
-webkit-transition: all 400ms ease-out 400ms;
-moz-transition: all 400ms ease-out 400ms;
-o-transition: all 400ms ease-out 400ms;
transition: all 400ms ease-out 400ms;
}
#lnkHogares {
left: 0;
}
#lnkEmpresas {
right: 0;
}
#lnkHogares img.bg, #lnkEmpresas img.bg {
height: 100%;
position: absolute;
z-index: 5;
-webkit-transition: all 800ms ease-in;
-moz-transition: all 800ms ease-in;
-o-transition: all 800ms ease-in;
transition: all 800ms ease-in;
}
#lnkHogares img.bg {
left: 0;
}
#lnkHogares img.logo {
position: absolute;
display: block;
top: 50px;
left: 50px;
width: 300px;
z-index: 10;
}
#lnkHogares span, #lnkEmpresas span,
#lnkHogares h2, #lnkEmpresas h2 {
font-weight: normal;
margin: 0;
}
#lnkHogares span,
#lnkHogares h2 {
position: absolute;
display: block;
bottom: 150px;
left: 50px;
z-index: 10;
text-align: left;
font-size: 3em;
color: white;
text-shadow: 3px 3px 8px #000000;
}
#lnkHogares span.logoText,
#lnkHogares h2.logoText {
right: auto;
bottom: auto;
top: 150px;
left: 50px;
font-size: 1.25em;
}
#lnkEmpresas img.bg {
right: 0;
}
#lnkEmpresas img.logo {
position: absolute;
display: block;
top: 50px;
right: 50px;
width: 300px;
z-index: 10;
}
#lnkEmpresas span,
#lnkEmpresas h2 {
position: absolute;
display: block;
bottom: 150px;
right: 50px;
z-index: 10;
text-align: right;
font-size: 3em;
color: white;
text-shadow: 3px 3px 8px #000000;
}
#lnkHogares:hover, #lnkEmpresas:hover {
width: 55%;
z-index: 10;
}
#lnkHogares img.onHover, #lnkEmpresas img.onHover {
opacity: 0;
visibility: hidden;
}
#lnkHogares:hover img.onHover, #lnkEmpresas:hover img.onHover {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 800px) {
html, body {
width: 100%;
height: 100%;
min-height: 800px;
min-width: 450px;
}
#lnkHogares, #lnkEmpresas {
top: auto;
left: 0;
width: 100%;
height: 50%;
}
#lnkHogares {
top: 0;
}
#lnkEmpresas {
bottom: 0;
}
#lnkHogares img.logo, #lnkEmpresas img.logo {
right: auto;
bottom: auto;
top: 10%;
left: 10%;
}
#lnkHogares span, #lnkEmpresas span,
#lnkHogares h2, #lnkEmpresas h2 {
right: auto;
left: 10%;
text-align: left;
font-size: 1.5em;
}
#lnkHogares span.logoText,
#lnkHogares h2.logoText {
top: 130px;
left: 10%;
font-size: 1em;
}
#lnkHogares:hover, #lnkEmpresas:hover {
width: 100%;
}
}