.panaroma { height:50vh; position:relative; display:block; width:100%; top:auto; left:auto; overflow:hidden; background:white; }
    .panaroma .con { display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; padding:20px; height:100%; width:29%; top:0; transform:translateY(-50%); }
    .panaroma .con img { display:block; width:100%; vertical-align:middle; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .panaroma h3 { position:absolute; display:block; top:5%; left:0; z-index:66; background:black; color:white; width:150px; height:170px; padding:40px 30px; }
    .panaroma h3 span { font-size:.5em; }

    .panaromablock { width:100%; height:70%; position:relative; perspective:1200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; }
            .scene { width:0; height:0; position:absolute; top:50%; left:50%; 
                transform:translate(-50%,-50%); transform-style:preserve-3d; 
                -webkit-transform:translate(-50%,-50%); -webkit-transform-style:preserve-3d; }
            .scene div { margin:0; width:2008px; height:1100px; display:block; position:absolute; background-size:100% 100%; background-position:center; 
                backface-visibility:hidden; -webkit-backface-visibility:hidden; }
            
            .scene .front  { transform:rotateY(    0deg ) translate3d(-50%,-50%, -1000px ); }
            .scene .back   { transform:rotateY( -180deg ) translate3d( 50%,-50%, -1000px ); }
            .scene .right  { transform:rotateY(  -90deg ) translate3d(  0%,-50%,     0px ); }
            .scene .left   { transform:rotateY(   90deg ) translate3d(  0%,-50%, -2000px ); }

        .btnleft, .btnright { position:absolute; z-index:2; cursor:pointer; width:160px; height:100%; top:0; background-repeat:no-repeat; background-position:center; background-size:90px; opacity:.4; }
        .btnleft { left:0; background-image:url(../img/arrow-left.svg); }
        .btnright { right:0; background-image:url(../img/arrow-right.svg); }
            .btnleft:before { left:40px; border-right:40px solid rgba(0, 0, 0, 0.3); }
            .btnright:before { right:40px; border-left:40px solid rgba(0, 0, 0, 0.3); }
            .btnleft:hover, .btnright:hover { opacity:1; }




@media -ms-viewport, screen and (max-width:1024px) and (min-width:768px) {
    .panaroma { height:40vh; }
    .btnleft, .btnright { background-size:60px; width:80px; opacity:1; }
    .panaroma h3 { top:10%; width:100px; height:auto; padding:20px 30px; }

    .scene { 
        -webkit-transform:translateZ(400px); 
            -ms-transform:translateZ(400px); 
                transform:translateZ(400px); }

}
@media -ms-viewport, screen and (max-width:736px) {
    .panaroma { height:360px; padding-top:30px; position:relative; } 
    .btnleft, .btnright { background-size:50px; width:50px; opacity:1; }
    .panaroma h3 { top:10%; font-size:2em; height:auto; width:auto; padding:10px 20px; }
    .panaromablock { height:80%; }

    .scene { 
        -webkit-transform:translateZ(400px); 
            -ms-transform:translateZ(400px); 
                transform:translateZ(400px); }

}