html, body {
height: 100%;
width: 100%;
margin: 0;
}
#wrapper {
overflow: hidden;
height: 100%;
}
.home_left {
background: url('../img/landing/landing-left.jpg') center no-repeat;
}
.home_right {
background: url('../img/landing/landing-right.jpg') center no-repeat;
}
.home_left,
.home_right {
min-width: 295px;
width: 50%;
min-height: 450px;
height: 100%;
float: left;
background-size: cover;
cursor: pointer;
position: relative;
}
.home_left .body,
.home_right .body {
width: 295px;
height: 290px;
top: 50%;
left: 50%;
position: absolute;
margin-left: -147px;
margin-top: -200px;
text-align: center;
}
.home_left .multilingual-selector {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 15;
}
.home_left .multilingual-selector img {
width: 65px;
padding: 0 5px;
}
.home_right #ribbon {
top: 0;
right: 0;
width: 252px;
height: 254px;
position: absolute;
background: url('../img/landing/landing-ribbon.png') no-repeat;
}
.sve-button,
.sks-button {
position: absolute;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 10;
}
.sve-button {
background: url('../img/landing/sauna-van-egmond-button.png') no-repeat center;
}
.sks-button {
background: url('../img/landing/sauna-kadoshop-button.png') no-repeat center;
}
.home_left:after,
.home_right:after {
background: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: 15;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.home_left:hover:after,
.home_right:hover:after {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
visibility: hidden;
}
.product-logo-holder {
position: absolute;
bottom: 300px;
width: 100%;
text-align: center;
z-index: 11;
}
.product-logo {
display: inline-block;
width: 180px;
height: 180px;
opacity: 0.7;
z-index: 11;
cursor: pointer;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.product-logo:hover {
opacity: 1;
}
.product-logo.thalgo {
background: url('../img/splash-thalgo-logo.png') no-repeat center / 180px;
margin-right: 50px;
}
.product-logo.cinq-mondes {
background: url('../img/splash-cinq-mondes.png') no-repeat center / 180px;
}
@media only screen and (max-width: 1024px ) {
.home_left:after,
.home_right:after {
display: none;
}
}
@media only screen and (max-width: 860px ) {
.product-logo-holder {
bottom: 150px;
}
.product-logo {
display: block;
margin: 0 auto !important;
}
}
@media only screen and (min-width: 641px) and (max-height: 1000px ) {
.product-logo-holder {
bottom: 100px;
}
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 640px) {
.home_left .body {
height: 200px;
}
.home_left,
.home_right {
width: auto !important;
float: none !important;
height: 50% !important;
min-height: initial !important;
}
.home_left .body,
.home_right .body {
margin-top: -110px !important;
}
.home_left:after,
.home_right:after {
display: none;
}
#ribbon {
display: none;
}
.sve-button:after, .sks-button:after {
background-color: transparent !important;
}
.product-logo-holder {
bottom: 0px;
}
.product-logo {
display: inline-block;
width: 80px;
height: 80px;
background-size: 80px !important;
}
}