body { margin: 0; padding: 0; background: #040404; }
.bg {
    width: 100%;
    height: 0;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.portrait {
    background-image: url(../images/portrait.png);
    padding-top: 158.0625%;
    display: none;
}

.landscape {
    background-image: url(../images/landscape.png);
    padding-top: 56.2666666666667%;
}

.btn {
    display: block;
    position: absolute;
    height: 0;
}

.frame {
    padding: .75%;
    background: url(../images/frame.png) no-repeat;
    background-size: contain;
}

.btn span {
    display: block;
    width: 100%;
    transition: all .15s;
    text-indent:-10000rem;
}

.btn:hover span {
    background: rgba(0,0,0,.3);
}

.btn-louer {  width: 10.5%; right: 19%; top: 65.75%; }
.btn-louer span { padding-top: 35.75%; }

.btn-acheter { width: 12.25%; right: 5.5%; top: 65.75%; }
.btn-acheter span { padding-top: 31.75%; }

.frame {
    position: absolute;
    left: 7.5%;
    top: 23.5%;
    width: 55%;
}

.portrait .frame {
    left: 7.5%;
    top: 17.5%;
    width: 85%;
}

.portrait .btn-louer { width: 19.5%; right: 53.75%; top: 51.85%; }
.portrait .btn-louer span { padding-top: 39%; }

.portrait .btn-acheter { width: 23%; right: 26.5%; top: 51.85%;  }
.portrait .btn-acheter span { padding-top: 33.5; }


@media (max-aspect-ratio: 4/3) {
    .portrait {
        display: block;
    }

    .landscape {
        display: none;
    }
}