#contenthost {
    height: 100%;
    width: 100%;
}

#output
{
    height:100%;
    -ms-grid-row: 4;
    -ms-grid-row-align:stretch;
}

/***************   Styles used for setting type of panning  ***************/ 
.None {
    overflow: hidden;
}

.Horizontal {
    overflow-x: auto;
    overflow-y: hidden;
}

.Vertical {
    overflow-x: hidden;
    overflow-y: auto;
}

.Unrailed {
    overflow: auto;
    -ms-scroll-rails: none;
}


.Railed {
    overflow: auto;
    -ms-scroll-rails: railed;
}




/***************  Styles used for setting mandatory panning snap-points via snapInterval.  ***************/
.MandatorySnapInterval {
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: mandatory snapInterval(0%, 100%);
}


/* Styles used for setting mandatory panning snap-points via snapInterval. */
.ProximitySnapList {
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
}



/***************  Styles used for setting enabling zoom.   ***************/
.zoomElement {
    overflow: auto;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
}



/***************  General Styles used for creating content in the manipulation containers.  ***************/

/*  This is used to create a 1x3 row of pictures */
.Image_Row {
    width: 2400px;
    height: 270px;
    display: -ms-grid;
    -ms-grid-columns: 480px 480px 480px 480px 480px;
    -ms-grid-rows: 360px;
}

/* This is used to set the size of the manipulation container. */
.ManipulationContainer {
    width: 480px;
    height: 270px;
}

.zoomElement.ManipulationContainer {
    -ms-overflow-style: none;
}

/* Set the size of the images when the image is hosted in a row of images,
   or when the image is hosted in something that can zoom. */
.Image_Row img, .zoomElement img {
    width: 480px;
    height: 270px;
}



/* Following class is used to put items in a row */
.row1 {
    -ms-grid-row: 1;
}


/* Following classes are used to put items in a column */
.col1 {
    -ms-grid-column: 1;
}

.col2 {
    -ms-grid-column: 2;
}

.col3 {
    -ms-grid-column: 3;
}

.col4 {
    -ms-grid-column: 4;
}

.col5 {
    -ms-grid-column: 5;
}



/*** Styles used for element used for scrollIntoView for mouse/keyboard support ***/
.scrollAnchor {
    opacity: 0.01;
    width: 1px;
    height: 1px;
    position:absolute;
    z-index:-1;
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        -ms-grid-columns: 37px 83px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-navigation-backbutton {
            -ms-grid-column: 2;
            margin-top: 57px;
            position: relative;
            z-index: 1;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 3;
            margin-top: 37px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
    }
