/*-- Bootstrap Mobile Gutter Fix. --*/

/*
    Although the css-declaration "overflow-x: hidden" is set in style.css on small devices a small sidebar still will remain. And the css-
    declaration is solving the problem.
*/
.row, .container-fluid {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/*--- Fixed Landing Page Section. The classes .landing, .home-wrap  and .home-inner are for the full-screen fixed background image--*/
.landing {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw!important;
    height: 100vh!important;
    z-index: 0;
    margin: 0!important;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}
.home-wrap {
    /*The clip property lets you specify a recatangle to clip (schneiden) an absolutely positioned element. The rectangle is specified as
      four coordinates, all from the topleft corner of the element to be clipped.
      clip: rect(0, auto, auto, 0);
    */
    /*changed from fixed to relative becasue at some pages when scrolling some components where not displayed correctly (arrrowUp, 
    footer, table...)*/
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100vw; /*Instead of % vw and vh makes the fixed background always fluid on mobile devices while scrolling*/
    height: 100vh;
    /* The z-index makes the backgound black when the content is shown by scrolling
        */
    z-index: -999;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}
.home-inner {
    /*changed from absolute to fixed becasue at some pages when scrolling some components where not displayed correctly (arrrowUp, 
    footer, table...)*/
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /*When using background: cover a background-position is actually not needed..*/
    background-size: cover!important;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
    z-index: 1!important;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}
