body {
    background: url(../media/images/Background/wood.jpg) 50% 50%;    
}

.split {
    height: 100%;
    width: 50%;
    position: absolute;
    overflow-x: hidden;
    padding-top: 0;
}

/* Control the left side */
.left {
    left: 0px;
}

/* Control the right side */
.right {
    right: 0;
    top: auto;
}

.justify {
    padding: 4px;
}
    

/* If you want the content centered horizontally and vertically */
.centered {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index:-1;
}

.centeredgasztro {
    position: relative;
    transform: translate(-50%, -50%);
    text-align: center;
}


/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centered { top: 17%; left: 50%; }
}
/* greater than phone width */
@media (min-width: 768px) and (max-width: 1280px) {
    .centered { top: 17%; left: 50%; }
}
@media screen and (min-width: 1281px) {
    .centered { top: 35%; left: 50%; }
}

/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centeredgasztro { top: 17%; left: 50%; }
}
/* greater than phone width */
@media (min-width: 768px) and (max-width: 1280px) {
    .centeredgasztro { top: 17%; left: 50%; }
}
@media screen and (min-width: 1281px) {
    .centeredgasztro { top: 35%; left: 50%; }
}


.centered img {
    overflow-x: hidden;
    border-radius: 2%;
    box-shadow: 0 20px 30px -6px #212121;
    z-index:-1;
}

.centeredgasztro img {
    overflow-x: hidden;
    border-radius: 2%;
    box-shadow: 0 20px 30px -6px #212121;
    z-index:-1;
}


/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centered img { width: 120px; height: 200px; }
}
/* greater than phone width */
@media (min-width: 768px) and (max-width: 1280px) {
    .centered img { width: 250px; height: 400px; }
}
@media screen and (min-width: 1281px) {
    .centered img { width: 350px; height: 600px; }
}


/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centeredgasztro img { width: 120px; height: 200px; }
}
/* greater than phone width */
@media (min-width: 768px) and (max-width: 1280px) {
    .centeredgasztro img { width: 250px; height: 400px; }
}
@media screen and (min-width: 1281px) {
    .centeredgasztro img { width: 350px; height: 600px; }
}



/* If you want the content centered horizontally and vertically */
.centeredwelcome {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centeredwelcome { top: 50%; left: 50%; }
}
@media (min-width: 768px) and (max-width: 1280px) {
    .centeredwelcome { top: 50%; left: 50%; }
}
@media screen and (min-width: 1281px) {
    .centeredwelcome { top: 50%; left: 50%; }
}

.centeredwelcome img {
    overflow-x: hidden;
    border-radius: 2%;
    box-shadow: 0 20px 30px -6px #212121;
    position: relative;
}
/* phone screen width */
@media (min-width: 320px) and (max-width: 767px) {
    .centeredwelcome img { max-width: 82px }
}
/* greater than phone width */
@media (min-width: 768px) and (max-width: 1280px) {
    .centeredwelcome img { max-width: 152px }
}
@media screen and (min-width: 1281px) {
    .centeredwelcome img { max-width: 225px }
}



/* phone screen width */
@media screen and  (min-width: 320px) {
    .imagefirst { height: 132px; bottom: 0px; }
}
/* greater than phone width */
@media screen and (min-width: 768px) {
    .imagefirst { height: 250px; bottom: 0px; }
}
@media screen and (min-width: 1281px) {
    .imagefirst { height: 280px; bottom: 0px; }
}

/* phone screen width */
@media screen and (min-width: 320px) {
    .imagebetween { height: 112px; bottom: 37px; }
}
/* greater than phone width */
@media screen and (min-width: 768px) {
    .imagebetween { height: 210px; bottom: 43px; }
}
@media screen and (min-width: 1281px) {
    .imagebetween { height: 235px; bottom: 40px; }
}


/* phone screen width */
@media screen and (min-width: 320px) {
    .imagelast { height: 132px; bottom: 37px; }
}
/* greater than phone width */
@media screen and (min-width: 768px) {
    .imagelast { height: 250px; bottom: 43px; }
}
@media screen and (min-width: 1281px) {
    .imagelast { height: 280px; bottom: 40px; }
}


@media screen and (max-width: 600px) {
    .topleft {
        text-align: left;
    }
}
/* greater than phone width */
@media screen and (min-width: 601px) {
    .topleft {
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .bottomright {
        text-align: right;
        margin-top: -25px;
    }
}
/* greater than phone width */
@media screen and (min-width: 601px) {
    .bottomright {
        text-align: right;
        margin-top: -40px;
    }
}