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; } }