body {
    margin: 0px;
    background-image: url('../img/background.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
}

.row {
    height: 100%;
}

.column {
  position: absolute;
  width: 25%;
  height: 100%;
  cursor: pointer;
  background-color: #000000;
  box-sizing: border-box;
  opacity: 0.60;
}

.column:hover {
    opacity: 0;
    transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;
}

.column1 {
    left: 0;
}

.column2 {
    left: 25%;
}

.column3 {
    left: 50%;
}

.column4 {
    left: 75%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.messanger {
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 200;
    cursor: pointer;
}

@media only screen and (orientation : portrait) {
    
    body {
        background-image: url('../img/background-mobile.jpeg');
    }
  
    .messanger {
        position: absolute;
        left: 10px;
        top: 10px;
        right: inherit;
        bottom: inherit;
        z-index: 200;
        cursor: pointer;
    }
  
    .column {
        width: 100%;
        height: 25%;
        min-height: 25%;
        opacity: 0;
    }
    
    .column1 {
        top: 0;
        left: 0;
    }

    .column2 {
        top: 25%;
        left: 0;
    }

    .column3 {
        top: 50%;
        left: 0;
    }

    .column4 {
        top: 75%;
        left: 0;
    }
}