.containerCassette3d{
padding-bottom:40px;
width: 257px; height: 400px;
perspective: 1000px;
cursor: pointer;
}

.imageCassette3d{
width: 100%; height: 100%;
transform-style: preserve-3d;
background-position: center;
transition: all 0.3s;
position: relative;
box-shadow: 0 10px 20px rgba(0,0,0,1.5);
}

.imageCassette3d::before{
content: url(../images/cassette1.jpg);
position: absolute;
top: 0; left: 0;
width: 60px; height: 100%;
transform: rotateY(90deg);
transform-origin: 0 50%;
filter: brightness(70%);
}


.imageCassette3d, .imageCassette3d::before{
background-image: url(../images/cassette.jpg);
background-size: cover;
background-repeat: no-repeat;
}

.imageCassette3d:hover{
transform: rotateY(35deg) scale(1.1);
}

.imageCassette3d:hover::before{
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}




@media screen and (orientation: landscape) {
.containerCassette3d{
float: right;
padding-left:40px;
}
}

@media screen and (orientation: portrait) {
.containerCassette3d{
  margin: auto;
  padding-top:40px;
}
}




@media screen and (orientation: landscape) {
.portrait { 
  display: none;
}
}




@media screen and (orientation: portrait) {
.landscape { 
  display: none;}
}



@media screen and (orientation: portrait) {
.containerCassette3d{
width: 514px; height: 800px;
padding-top:60px;
padding-bottom:90px;
}
}

@media screen and (orientation: portrait) {
.imageCassette3d::before{
width: 120px; height: 100%;
content: url(../images/cassette2.jpg);
}
}



@media screen and (orientation: portrait) {
.imageCassette3d{
transition: all 1.3s;
box-shadow: 0 20px 40px rgba(0,0,0,1.0);
}
}