@media only screen and (orientation: landscape) {
            body {
                overflow: hidden;
            }
            a {
                cursor: pointer;
            }
            figure {
                opacity: 0;
                position: absolute;
                top: 10vh;
                right: 20vh;
                transition: all 2s;
                width: 80vh;
                text-align: right;
            }
            figure img {
                transition: all 2s;
            }
            figure.prev img {
                /*top: -20vh;*/
                /*transform: scale3d(.9,.9,.9);*/
            }
            figure.next img {
                /*top: 120vh;*/
                /*transform: scale3d(.9,.9,.9);*/
            }
            figure.selected {
                opacity: 1;
                z-index: 1;
                /*top: 10vh;*/
            }
            figure.selected img {
                transform: scale3d(1,1,1);
            }
            /*figure .social {
                display: none;
            }
            figure.selected .social {
                display: block;
            }*/
            figure img {
                width: auto;
                height: 80vh !important;
            }
            figcaption {
                font-size: 11px;
                line-height: 30px;
                color: #555;
                float: left;
            }
            #buttons {
                position: fixed;
                right: 0;
                top: 50vh;
                transform: translateY(-50%);
            }
            #buttons a {
                font-size: 0;
                background-size: cover;
                background-repeat: no-repeat;
                display: block;
                width: 2vh;
                height: 1vh;
                margin: 9vh;
            }
            #buttons a#previous {
                background-image: url(../img/su.png);
            }
            #buttons a#next {
                background-image: url(../img/giu.png);
            }
            a#previousarea,
            a#nextarea {
                position: absolute;
                right: 20vh;
                width: calc(100vw - 40vh);
                height: 40vh;
            }
            a#previousarea {
                top: 10vh;
            }
            a#nextarea {
                top: 50vh;
            }
            * .social {
                float: right;
            }
            * .social .fa {
                margin-left: 6px;
                color: #aaa;
            }
            * .social .fa:hover {
                color: #333;
            }
        }
        
        @media only screen and (orientation: portrait) {
            figure {}
            figure.prev {}
            figure.next {}
            figure.selected {}
            figure img {
                width: 100%;
                height: auto !important;
            }
            figcaption {
                font-size: 9px;
                line-height: 30px;
                color: #555;
                float: left;
                margin-bottom: 8vw;
                margin-left: 5vw;
            }
            #buttons,
            a#previousarea,
            a#nextarea {
                display: none;
            }
            * .social {
                float: right;
                margin-right: 5vw;
            }
            * .social .fa {
                margin-left: 6px;
                color: #aaa;
            }
            * .social .fa:hover {
                color: #333;
            }
        }