html,
body {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden; 
    background: rgba(40,40,40,1);
    font-family: 'Oswald', sans-serif;
    -webkit-user-select: none;
    cursor: url(../img/cursor.png) 10 10, auto;
}
#bodyOverflow {
    z-index:4;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden; 
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#orientationContainer {
    position: absolute;
    margin: auto;
    top:0;right:0;bottom:0;left:0;
    width: 100%;
    background: 100%;
    border: 1px solid lightblue;
    box-shadow:0 0 0 1px rgba(255,255,255,0); /* anti-aliasing */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.orientationContent {
    z-index:1;
    position: absolute;
    margin: auto;
    top:0;right:0;bottom:0;left:0;
    width: 100%;
    background: 100%;
    box-shadow:0 0 0 1px rgba(255,255,255,0); /* anti-aliasing */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.cloneOrientationContent {
    -webkit-transform:translateZ(-15px);
    -moz-transform:translateZ(-15px);
    -ms-transform:translateZ(-15px);
    -o-transform:translateZ(-15px);
    transform:translateZ(-15px);
    opacity: 0.25;
    z-index:0;
}
#orientationTitle{
    position:absolute;
    top:5%;left:5%;
    width: 110px;
    margin: auto;
    padding:2px 10px 4px 10px;
    color: lightblue;
    border: 1px solid lightblue;
    font-size:22px;
    text-align: center;
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
    -webkit-transform:translateZ(30px);
    -moz-transform:translateZ(30px);
    -ms-transform:translateZ(30px);
    -o-transform:translateZ(30px);
    transform:translateZ(30px);
}
#orientationTitle:hover {
    color: gold;
    border: 1px solid gold;
    -webkit-transform:translateZ(20px);
    -moz-transform:translateZ(20px);
    -ms-transform:translateZ(20px);
    -o-transform:translateZ(20px);
    transform:translateZ(20px);  
}
.scrollContainer {
    position: absolute;
    margin: auto;
    top:0;bottom:0;
    padding: 10px 0;
    border: 1px solid violet;
    box-shadow:0 0 0 1px rgba(255,255,255,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#scrollContainerTitle{
    position:fixed;
    top:-30px;right:0;left:0;
    width: 110px;
    margin: auto;
    color: violet;
    font-size:20px;
    -webkit-transform:translateZ(30px);
    -moz-transform:translateZ(30px);
    -ms-transform:translateZ(30px);
    -o-transform:translateZ(30px);
    transform:translateZ(30px);  
}
.scroll {
    position: relative;
    float:left;
    height: 100%;
    border-bottom:1px dashed gold ;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.scroll .scrollTitle {
    position:absolute;
    bottom:-20px;left:0;right:0;
    width: 110px;
    margin: auto;
    color: gold ;
    font-size:18px;
    -webkit-transform:translateZ(100px);
    -moz-transform:translateZ(100px);
    -ms-transform:translateZ(100px);
    -o-transform:translateZ(100px);
    transform:translateZ(100px);
}
.clone {
    border-bottom:1px dashed CornflowerBlue ;
}
.clone .scrollTitle {
    color: CornflowerBlue ;
}
.cell {
    position: relative;
    float:left;
    width: 300px;
    height: 200px;
    margin: 5px;
    background: rgba(255,255,255,0);
    border:1px solid rgba(255,255,255,0.2);
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.cell:hover {
    border: 1px solid aquamarine;
    background:rgba(255,255,255,0.2);
    -webkit-transform:translateZ(30px);
    -moz-transform:translateZ(30px);
    -ms-transform:translateZ(30px);
    -o-transform:translateZ(30px);
    transform:translateZ(30px);
}
.cell::before,
.cell::after{
    position: absolute;
    margin:auto;
    top:0;right:0;bottom:0;left:0;
    width: 100%;
    height: 100%;
    content:'';
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.cell:hover::before{
    -webkit-transform: translateZ(-15px);
    -moz-transform: translateZ(-15px);
    -ms-transform: translateZ(-15px);
    -o-transform: translateZ(-15px);
    transform: translateZ(-15px);
    border: 1px solid rgba(255,255,255,0.6);
}
.cell:hover::after{
    -webkit-transform:translateZ(-30px);
    -moz-transform:translateZ(-30px);
    -ms-transform:translateZ(-30px);
    -o-transform:translateZ(-30px);
    transform:translateZ(-30px);
    border: 1px solid rgba(255,255,255,0.2);
}
.cell .cellTitle {
    position: absolute;
    bottom:20px;right:25px;
    padding: 5px 10px;
    color:aquamarine;
    border: 1px solid aquamarine;
    opacity:0;
    -webkit-transition:opacity 0.6s ease, -webkit-transform 0.4s ease;
    -moz-transition:opacity 0.6s ease, -moz-transform 0.4s ease;
    -ms-transition:opacity 0.6s ease, -ms-transform 0.4s ease;
    -o-transition:opacity 0.6s ease, -o-transform 0.4s ease;
    transition:opacity 0.6s ease, transform 0.4s ease;
}
.cell:hover .cellTitle{
    opacity:1;
    -webkit-transform:translateZ(60px);
    -moz-transform:translateZ(60px);
    -ms-transform:translateZ(60px);
    -o-transform:translateZ(60px);
    transform:translateZ(60px);
    -webkit-transition:opacity 0.1s ease, -webkit-transform 0.4s ease;
    -moz-transition:opacity 0.1s ease, -moz-transform 0.4s ease;
    -ms-transition:opacity 0.1s ease, -ms-transform 0.4s ease;
    -o-transition:opacity 0.1s ease, -o-transform 0.4s ease;
    transition:opacity 0.1s ease, transform 0.4s ease;
}
.contentOverflow {
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    width:100%;
    height:100%;
    overflow: hidden;
    font-weight: 700;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.content {
    position: absolute;
    top:-280px;bottom:0;left:0;
    width:100%;
    height:100%;
    margin:auto;
    text-align: center;
    font-size:320px;
    color: rgba(255,255,255,0);
    -webkit-text-stroke: 1px salmon;
}
.cell .contentTitle {
    position: absolute;
    margin:auto;
    top:0;right:0;bottom:0;left:0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.5);
    text-align: center;
    font-size: 20px;
    -webkit-transform:translateZ(80px);
    -moz-transform:translateZ(80px);
    -ms-transform:translateZ(80px);
    -o-transform:translateZ(80px);
    transform:translateZ(80px);
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.cell:hover .contentTitle{
    border: 1px solid aquamarine;
    color:rgba(255,255,255,1);
    -webkit-transform:translateZ(120px);
    -moz-transform:translateZ(120px);
    -ms-transform:translateZ(120px);
    -o-transform:translateZ(120px);
    transform:translateZ(120px);
}
.contentTitle::before,
.contentTitle::after {
    position: absolute;
    margin:auto;
    top:0;right:0;bottom:0;left:0;
    width: 40px;
    height: 40px;
    content:'';
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.cell:hover .contentTitle::before {
    margin: -5px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.7);
    -webkit-transform:rotate(180deg) translateZ(-10px);
    -moz-transform:rotate(180deg) translateZ(-10px);
    -ms-transform:rotate(180deg) translateZ(-10px);
    -o-transform:rotate(180deg) translateZ(-10px);
    transform:rotate(180deg) translateZ(-10px);
}
.cell:hover .contentTitle::after {
    margin: -10px;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255,255,255,0.6);
    -webkit-transform:rotate(-180deg) translateZ(-20px);
    -moz-transform:rotate(-180deg) translateZ(-20px);
    -ms-transform:rotate(-180deg) translateZ(-20px);
    -o-transform:rotate(-180deg) translateZ(-20px);
    transform:rotate(-180deg) translateZ(-20px);
}