.dg-container{
width: 100%;
height: 375px;
position: relative;
overflow: hidden;
}
.dg-container, .dg-container * {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dg-wrapper{
width: 400px;
height: 300px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.dg-block {
width: 400px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.dg-center {
box-shadow: 55px 0px 56px -30px rgba(0,0,0,0.3), -55px 0px 56px -30px rgba(0,0,0,0.3);
}
.dg-center:first-child {
box-shadow: 55px 0px 56px -30px rgba(0,0,0,0.3);
}
.dg-center:last-child {
box-shadow: -55px 0px 56px -30px rgba(0,0,0,0.3);
}
.dg-block img{
display: block;
outline: 1px solid transparent;
}
.dg-label {
text-align: center;
line-height: 1;
font-size: 112.5%;
width: 100%;
bottom: -45px;
display: none;
position: absolute;
font-family: Novecentowide, sans-serif;
}
.dg-label a {
color: #969696!important;
font-weight: 900!important;
}
.dg-label a:hover {
color: #000!important;
text-decoration: none;
}
.dg-center .dg-label {
display: block;
}
.dg-container nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 300px;
}
.dg-container nav span {
float: left;
cursor: pointer;
width: 50%;
height: 300px;
margin: 0;
}
.dg-left {
-webkit-transform: translate(-300px) scale(0.8);
-moz-transform: translate(-300px) scale(0.8);
-ms-transform: translate(-300px) scale(0.8);
-o-transform: translate(-300px) scale(0.8);
transform: translate(-300px) scale(0.8);
-webkit-transform: translateX(-300px) translateZ(-200px) rotateY(45deg);
-moz-transform: translateX(-300px) translateZ(-200px) rotateY(45deg);
-ms-transform: translateX(-300px) translateZ(-200px) rotateY(45deg);
-o-transform: translateX(-300px) translateZ(-200px) rotateY(45deg);
transform: translateX(-300px) translateZ(-200px) rotateY(45deg);
visibility: visible;
opacity: 1;
z-index: 15;
}
.dg-right {
-webkit-transform: translate(300px) scale(0.8);
-moz-transform: translate(300px) scale(0.8);
-ms-transform: translate(300px) scale(0.8);
-o-transform: translate(300px) scale(0.8);
transform: translate(300px) scale(0.8);
-webkit-transform: translateX(300px) translateZ(-200px) rotateY(-45deg);
-moz-transform: translateX(300px) translateZ(-200px) rotateY(-45deg);
-ms-transform: translateX(300px) translateZ(-200px) rotateY(-45deg);
-o-transform: translateX(300px) translateZ(-200px) rotateY(-45deg);
transform: translateX(300px) translateZ(-200px) rotateY(-45deg);
visibility: visible;
opacity: 1;
z-index: 15;
}
.dg-outleft {
-webkit-transform: translate(-450px) scale(0.7);
-moz-transform: translate(-450px) scale(0.7);
-ms-transform: translate(-450px) scale(0.7);
-o-transform: translate(-450px) scale(0.7);
transform: translate(-450px) scale(0.7);
-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
-ms-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
-o-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
visibility: visible;
opacity: 1;
z-index: 10;
}
.dg-outright {
-webkit-transform: translate(450px) scale(0.7);
-moz-transform: translate(450px) scale(0.7);
-ms-transform: translate(450px) scale(0.7);
-o-transform: translate(450px) scale(0.7);
transform: translate(450px) scale(0.7);
-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
-ms-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
-o-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
visibility: visible;
opacity: 1;
z-index: 10;
}
.dg-center {
-webkit-transform: translate(0px) scale(1);
-moz-transform: translate(0px) scale(1);
-ms-transform: translate(0px) scale(1);
-o-transform: translate(0px) scale(1);
transform: translate(0px) scale(1);
-webkit-transform: translateX(0px) translateZ(0px) rotateY(0deg);
-moz-transform: translateX(0px) translateZ(0px) rotateY(0deg);
-ms-transform: translateX(0px) translateZ(0px) rotateY(0deg);
-o-transform: translateX(0px) translateZ(0px) rotateY(0deg);
transform: translateX(0px) translateZ(0px) rotateY(0deg);
visibility: visible;
opacity: 1;
z-index: 20;
}
.dg-outright-farther {
z-index: 5;
visibility: hidden;
}
.dg-outleft-farther {
z-index: 5;
visibility: hidden;
}
.dg-outleft,
.dg-outleft-farther { visibility: hidden; opacity: 0; }
.dg-outright,
.dg-outright-farther { display: none; }
@media (max-width: 900px) {
.dg-container {
height: auto;
width: 100%;
}
.dg-wrapper {
height: auto;
width: 100%;
}
.dg-center, .dg-left, .dg-right, .dg-outleft, .dg-outleft-farther, .dg-outright, .dg-outright-farther {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
box-shadow: none!important;
clear: both;
position: relative;
height: auto;
width: 400px;
max-width: 100%;
margin: 0 auto 2em auto;
}
.dg-center:first-child {
box-shadow: none;
}
.dg-center:last-child {
box-shadow: none;
}
.dg-label {
position: relative;
clear: both;
margin-top: 1em;
display: block;
bottom: 0;
}
.dg-container nav {
display: none;
}
.dg-outright-farther {
z-index: 5;
visibility: visible;
}
.dg-outleft-farther {
z-index: 5;
visibility: visible;
}
.dg-outleft,
.dg-outleft-farther { visibility: visible; opacity: 1; }
.dg-outright,
.dg-outright-farther { display: block; }
}