/* set the background-images */
/* if needed: use a transparent white 'gradient' instead of opacity,*/
/* use of opacity could cause problems with overlapping masks in the content area*/


.bgImage-0 {
    background-image: url("..//pics/receptionist-and-businesswoman-at-hotel-front-desk-picture-id1193140198.jpg");
    background-position-x: 75%;
    transform: scale(-1, 1);
    background-position-y: bottom;
}


.bgImage-1 {
    background-image: url("..//pics/hostess-on-the-phone-at-the-hotel-picture-id626640758.jpg");
    background-position-x: 65%;
    background-position-y: bottom;
}

.bgImage-2 {
    background-image: url("..//pics/friendly-couple-checkin-at-hotel-picture-id176231435.jpg");
    background-position-x: 55%;
}

.bgImage-3 {
    background-image: url("..//pics/cheerful-woman-in-office-picture-id538322584.jpg");
    background-position-x: 55%;
    background-position-y: bottom;
}

.bgImage-5 {
    background-image: url("..//pics/charge-it-to-my-current-account-picture-id470746999.jpg");
    background-position-x: center;
    background-position-y: bottom;
}


.img-2 {
    background:url(..//pics/receptionist-handing-over-the-room-key-picture-id961222742.jpg);
    background-position-x: 35%;
}

.img-1 {
    background:url(..//pics/hotel-reception-with-bell-picture-id520542221.jpg);
    background-position-x: 60%;
    background-position-y: 100%;

}

.img-3 {
    background:url(..//pics/chairs-on-beach-picture-id847896662.jpg);
    background-position: bottom;
    background-position-x: 20%;
}

.img-4 {
    background:url(..//pics/alpine-outdoor-restaurant-at-ski-resort-in-alps-france-picture-id1125943407.jpg);
    background-position-x: 50%;
    background-position-y: bottom;
}


.img-5 {
    background:url(..//pics/concierge-service-desk-counter-with-hotel-staff-team-working-in-front-picture-id964642724.jpg);
    background-position-x: 60%;
    background-position-y: bottom;
}


.img-6 {
    background:url(..//pics/friendly-receptionist-at-hotel-picture-id176203488.jpg);
    background-position-x: 70%;
    background-position-y: bottom;
}


.img-7 {
    background:url(..//pics/older-couple-enjoying-sunset-at-beach-id157740799.jpg);
    background-position-x: 70%;
    background-position-y: bottom;
    background-size: cover;
}


.img-9 {
    background:url(..//pics/guests-getting-key-card-in-hotel-picture-id640147624.jpg);
    background-position-x: 45%;
    background-position-y: bottom;
}


.img-11 {
    background:url(..//pics/side-view-of-attractive-young-airport-worker-at-workplace-at-airport-picture-id935558342.jpg);
    background-position-x: 20%;
    background-position-y: bottom;
}


.img-12 {

    background:url(..//pics/deck-chairs-picture-id470835758.jpg);
    background-position-x: 35%;
    background-position-y: bottom;
    background-size: cover;

}


.img-14 {

    background:url(..//pics/female-receptionist-look-at-handsome-businessman-picture-id618731320.jpg);
    background-position-x: 45%;
    background-position-y: bottom;

}


.img-15 {
    background:url(..//pics/taking-an-adventurous-boat-cruise-picture-id529667578.jpg);
    background-position-x: 70%;
    background-position-y: bottom;
    background-size: cover;
}


.img-16 {
    background:url(..//pics/pretty-receptionist-giving-key-card-picture-id640148670.jpg);
    background-position-x: center;
    background-position-y: bottom;
    background-size: cover;
}

@media (orientation: landscape) {

    .bgImage-0 {
        background-position-x: -33vw !important;
        background-position-y: center !important;
        height: 100vw;
        top: calc((100vw - 100vh) /-2);
    }

    .bgImage-1 {
        background-position-x: 5vw !important;
        background-position-y: -15vh !important;
        height: 100vw;
        top: calc((100vw - 100vh) /-2);
    }

    .bgImage-2 {
        background-position-x: 20vw !important;
        background-position-y: -15vh !important;
        height: 100vw;
        top: calc((100vw - 100vh) /-2);
    }

    .bgImage-3 {
        background-position-x: 20vw !important;
        background-position-y: -15vh !important;
        height: 100vw;
        top: calc((100vw - 100vh) /-2);
    }

    .bgImage-5 {
        background-position-x: 25vw !important;
        background-position-y: -20vh !important;
        height: 100vw;
        top: calc((100vw - 100vh) /-2);
    }
}


@media (orientation: landscape) and (min-width: 1200px) {

    .vh50 {
        height: 75vh;
    }

    .img-1 {
        background-position-y: -50vh !important;
    }

    .img-2 {
        background-position-y: -60vh !important;
    }

    .img-12 {
        background-position-y: -60vh !important;
    }

    .img-14 {
        background-position-y: -65vh !important;
    }

    .img-3 {
        background-position-y: -40vh !important;
    }

    .img-4 {
        background-position-y: -40vh !important;
    }

    .img-5 {
        background-position-y: -40vh !important;
    }

    .img-6 {
        background-position-y: -25vh !important;
    }

    .img-7 {
        background-position-y: -50vh !important;
    }

    .img-9 {
        background-position-y: -60vh !important;
    }

    .img-11 {
        background-position-y: -15vh !important;
    }

    .img-15 {
        background-position-y: -60vh !important;
    }

    .img-16 {
        background-position-y: -40vh !important;
    }

}



/* browser-based css for different (no) parallax-effect on IOS */
@supports (-webkit-touch-callout: none) {
    /* for IOS */

    div[class^="parallX-img img-"] {
        height: 100vh;
        background-position-x: center;
        background-position-y: -25vh;
    }

    @media (orientation: portrait) and (max-width: 500px) {

        .bgImage-5 {
            background-position-x: -36vw !important;
        }

        .img-9 {
            background-position-y: -35vh !important;
        }

        .img-14 {
            background-position-y: -40vh !important;
        }

        .img-15 {
            background-position-y: -40vh !important;
        }

        .img-16 {
            height: 85vh !important;
            background-position-y: -15vh !important;
        }

        .img-11 {
            height: 85vh !important;
            background-position-y: -10vh !important;
        }

        .img-7 {
            height: 80vh !important;
        }

    }


    @media (orientation: portrait) and (min-width: 768px) {

        .bgImage-5 {
            background-position-x: -13vw;
        }

        .bgImage-0 {
            background-position-x: right;
        }

        .img-9 {
            background-position-y: -35vh !important;
        }

        .img-14 {
            background-position-y: -40vh !important;
        }

        .img-15 {
            background-position-y: -40vh !important;
        }

        .img-16 {
            height: 85vh !important;
            background-position-y: -15vh !important;
        }

        .img-11 {
            height: 85vh !important;
            background-position-y: -10vh !important;
        }

        .img-7 {
            height: 80vh !important;
        }

    }

    @media (orientation: landscape) and (max-height: 500px) {
        .vh50 {
            height: 100vh;
        }

        .bgImage-0 {
            background-position-y: -15vh !important;
        }


        .img-2 {
            background-position-y: -50vh !important;
        }

        .img-7 {
            background-position-y: -60vh !important;
        }

        .img-9 {
            background-position-y: -60vh !important;
        }

        .img-14 {
            background-position-y: -80vh !important;
        }

        .img-15 {
            background-position-y: -60vh !important;
        }

    }

}