@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
}
.outer-div
{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow:hidden;
}
.inner-div
{
    margin: auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.carre {
    height: 300px;
    width: 300px;
    background: white;
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari et Chrome */
    -o-transform: rotate(45deg); /* Opera */
    margin: 0 auto;
    position: relative;
    top: 20%;
    z-index: 99;
}

.carre img {
    position: absolute;
    top: 15%;
    left:-13%;
    width: 360px;
    -ms-transform: rotate(-45deg); /* Internet Explorer */
    -moz-transform: rotate(-45deg); /* Firefox */
    -webkit-transform: rotate(-45deg); /* Safari et Chrome */
    -o-transform: rotate(-45deg); /* Opera */
}

.middle-left {
    position:absolute;
    width: 50%;
    background-image: url("img/bck_left.jpg");
    background-size: cover;
    height:100%;
    border-right: solid 2px #ffffff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.middle-right {
    position: absolute;
    right: 0;
    top: 0;
    background-image: url("img/bck_right.jpg");
    background-size: cover;
    width: 50%;
    height: 100%;
    border-left: solid 2px #ffffff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.rounded-left {
    margin: 0 auto;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/logo-menuiserie.png");
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.8);
    position:relative;
    top: 40%;
    z-index: 99;
    cursor: pointer;
    border: 4px solid #b8a26e;
}

.rounded-right{
    margin: 0 auto;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/Logo_Martinod-vitrerie.png");
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.8);
    position:relative;
    top: 40%;
    z-index: 99;
    cursor: pointer;
    border: 4px solid #929292;
}

.bottom {
    bottom: -23px;
    text-align: center;
    width: 100%;
    position: absolute;
}

.triangle{
    position:relative;
    display : inline-block;
    height : 0;
    width : 0;
    border-right : 300px solid transparent;
    border-bottom : 173px solid white;
    border-left : 300px solid transparent;
}

.no-background {
    background: none;
}

.footer {
    position: absolute;
    height: 200px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    bottom: 0;
}

.footer-link {
    width: 100%;
    position: absolute;
    top: 50%;
}

.footer-link a {
    color: #000;
}