/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  easy.css - CSS display table layout, where bootstrap falls short
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
/* Hint: easyTableXs will never wrap */
.easyTable,
.easyTableXs {
    display: table;
    width: auto;
}

.easyTableRow,
.easyTableRowXs {
    display: table-row;
}

.easyTableCell,
.easyTableCellXs {
    display: table-cell;
    vertical-align: top;
}

/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  Options - TABLE - width, align center/left/right in parent
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
.easyFullWidth {
    width: 100%;
}

.easyCenter {
    margin-left: auto;
    margin-right: auto;
}

.easyAlignLeft {
    margin-left: 0;
    margin-right: auto;
}

.easyAlignRight {
    margin-left: auto;
    margin-right: 0;
}

/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  Options - TABLE - borders, borderspacing
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
.easyTableBorderSeparate,
.easyTableBorderSeparateXs {
	/* The first sets the horizontal spacing and the second sets the vertical spacing */
    border-spacing: 2px 2px;
	border-collapse: separate;
}

/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  Options - TD - alignment
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
.easyVerticalAlignTop {
    vertical-align: top;
}

.easyVerticalAlignMiddle {
    vertical-align: middle;
}

.easyVerticalAlignBottom {
    vertical-align: bottom;
}

/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  Options - TD - cell padding and border
 ***
 ***  HINT: See table border-spacing
 ***  HINT: See table border-collapse
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
.easyCellPadding {
    padding: 30px;
}

.easyCellBorder {
    border: 1px solid #ccc;
}

/***************************************************************************
 ***************************************************************************
 ***************************************************************************
 ***
 ***  Options - TABLE and TD - width
 ***
 ***************************************************************************
 ***************************************************************************
 ***************************************************************************/
.easyWidth7Percent {
    width: 7%;
}

.easyWidth10Percent {
    width: 10%;
}

.easyWidth20Percent {
    width: 20%;
}

.easyWidth25Percent {
    width: 25%;
}

.easyWidth30Percent {
    width: 30%;
}

.easyWidth33Percent {
    width: 33%;
}

.easyWidth33Percent {
    width: 35%;
}

.easyWidth37Percent {
    width: 37%;
}

.easyWidth40Percent {
    width: 40%;
}

.easyWidth45Percent {
    width: 45%;
}

.easyWidth50Percent {
    width: 50%;
}

.easyWidth55Percent {
    width: 55%;
}

.easyWidth60Percent {
    width: 60%;
}

.easyWidth63Percent {
    width: 63%;
}

.easyWidth63Percent {
    width: 65%;
}

.easyWidth67Percent {
    width: 67%;
}

.easyWidth70Percent {
    width: 70%;
}

.easyWidth80Percent {
    width: 80%;
}

/* Original, if not wrapped into .container */
/* @media (max-width: 767px) { */
/* @media (max-width: 480px) { */
@media (max-width: 1023px) {

    /**************************************************************************
    ***************************************************************************
    ***************************************************************************
    ***
    ***  RESET - Linearisiere Tablelle
    ***
    ***************************************************************************
    ***************************************************************************
    ***************************************************************************/
    .easyTable,
    .easyTable .easyTableRow,
    .easyTable .easyTableCell {
        display: block;
        width: 100%;
    }

    .easyTable {
        border-spacing: 0 !important;
        border-collapse: separate !important;
    }

    /***************************************************************************
     ***************************************************************************
     ***************************************************************************
     ***
     ***  RESET - Options - TABLE - borders, borderspacing
     ***
     ***************************************************************************
     ***************************************************************************
     ***************************************************************************/
    .easyTable.easyTableBorderSeparate {
        border-spacing: 0 !important;
        border-collapse: separate !important;
    }

    /**************************************************************************
    ***************************************************************************
    ***************************************************************************
    ***
    ***  RESET - Options - vertical-align
    ***
    ***************************************************************************
    ***************************************************************************
    ***************************************************************************/
    .easyTable .easyTableCell {
        vertical-align: baseline;
    }

    /**************************************************************************
    ***************************************************************************
    ***************************************************************************
    ***
    ***  Options - TABLE and TD - width
    ***
    ***************************************************************************
    ***************************************************************************
    ***************************************************************************/
    .easyTable .easyWidth7Percent,
    .easyTable .easyWidth10Percent,
    .easyTable .easyWidth20Percent,
    .easyTable .easyWidth25Percent,
    .easyTable .easyWidth30Percent,
    .easyTable .easyWidth33Percent,
    .easyTable .easyWidth34Percent,
    .easyTable .easyWidth40Percent,
    .easyTable .easyWidth45Percent,
    .easyTable .easyWidth50Percent,
    .easyTable .easyWidth55Percent,
    .easyTable .easyWidth60Percent,
    .easyTable .easyWidth63Percent,
    .easyTable .easyWidth65Percent,
    .easyTable .easyWidth70Percent,
    .easyTable .easyWidth80Percent {
        width: 100%;
    }

}
/* end @media (max-width: ...) */

.easyResponsiveImage {
    width: 100%;
    height: auto;
    display: block;
}