/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

body {background-color: #0e0e0e;}

/* General */
.clear {clear: both;}
.hidden {display: none;}

#container {width: 100%; height: 100%; min-width: 900px; min-height: 600px; position: relative;}
.slice {float: left; width: 25%; height: 100%; box-shadow: 10px 0 30px #000; position: relative; overflow: hidden; cursor: pointer;}
.slice img.js-img {min-width: 100%; min-height: 100%; position: absolute; top: 0; left: 50%; display: block; transition: transform 2s ease-in-out; z-index: 5;}
.slice img.js-img.colorimg {z-index: 6; opacity: 0;}
.slice:hover img.js-img {transform: scale(1.1);}
.slice:hover img.js-img.colorimg {opacity: 1;}
.one {z-index: 6;}
.two {z-index: 5;}
.three {z-index: 4;}
.four {z-index: 3;}

.gradient-top {position: absolute; left: 0; top: 0; width: 100%; height: 160px; background: url('../bpimages/gradient-top.png') repeat-x; z-index: 10;}
.gradient-bottom {position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; background: url('../bpimages/gradient-bottom.png') repeat-x; z-index: 10;}

.main-logo {position: absolute; z-index: 100; top: 0; left: 50%; margin-left: -208px; width: 417px; height: 120px;}
.img-bottom {position: absolute; z-index: 90; bottom: 0; left: 50%; margin-left: -138px; width: 277px; height: 31px; background: url('../bpimages/img-bottom.png') no-repeat;}
.slice-logo {position: absolute; width: 100%; height: 242px; top: 46%; margin-top: -121px; text-align: center; z-index: 10;}
.visit {width: 184px; height: 33px; background: url('../bpimages/visit-site.png') no-repeat; position: absolute; bottom: 0; left: 50%; margin-left: -92px; opacity: 0; transition: opacity .6s linear;}
.slice:hover .visit {opacity: 1;}

@media only screen and (max-width: 1200px) {    
	.slice-logo img {max-width: 90%;}
}