/*

flex_layout 0.1 11/2014
hictech.com | info@hictech.com

*/

/*
                  _        _
   ___ ___  _ __ | |_ __ _(_)_ __   ___ _ __ ___
  / __/ _ \| '_ \| __/ _` | | '_ \ / _ \ '__/ __|
 | (_| (_) | | | | || (_| | | | | |  __/ |  \__ \
  \___\___/|_| |_|\__\__,_|_|_| |_|\___|_|  |___/

*/

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;

}

.EXTENDER.scroll-x {
    overflow: auto;
    white-space: nowrap;
}

.EXTENDER.scroll-x > div {
    display: inline-block;
}

.PADDER0 {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.PADDER,
.PADDER10 {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
}

.PADDER5 {
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
}

.PADDER15 {
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
}

.PADDER25 {
    position: absolute;
    top: 25px;
    left: 25px;
    bottom: 25px;
    right: 25px;
}

.PADDER35 {
    position: absolute;
    top: 35px;
    left: 35px;
    bottom: 35px;
    right: 35px;
}

.PADDER45 {
    position: absolute;
    top: 45px;
    left: 45px;
    bottom: 45px;
    right: 45px;
}

.PADDER55 {
    position: absolute;
    top: 55px;
    left: 55px;
    bottom: 55px;
    right: 55px;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari, Chrome, and Opera */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

.FITTER{
    position: relative;
    width: 80%;
    height: 50%;
}

/*
  _ __ _____      _____
 | '__/ _ \ \ /\ / / __|
 | | | (_) \ V  V /\__ \
 |_|  \___/ \_/\_/ |___/


*/

.ROWS {
    height: 100%;
    width: 100%;
    /* Old Syntax */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    /* New Syntax */
    display: -webkit-flexbox;
    -webkit-flex-direction: column;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    /* W3C */
    display: box;
}

.ROW-FLEX {
    position: relative;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    /* New Syntax */
    -webkit-flex: 1;
    flex: 1;
    -ms-flex: 1;
}

.ROW-FLEX2 {
    position: relative;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    /* New Syntax */
    -webkit-flex: 2;
    flex: 2;
    -ms-flex: 2;
}

.ROW-FLEX3 {
    position: relative;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    /* New Syntax */
    -webkit-flex: 3;
    flex: 3;
    -ms-flex: 3;
}

.ROW-FLEX4 {
    position: relative;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 4;
    -moz-box-flex: 4;
    /* New Syntax */
    -webkit-flex: 4;
    flex: 4;
    -ms-flex: 4;
}

.ROW-FLEX5 {
    position: relative;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 5;
    -moz-box-flex: 5;
    /* New Syntax */
    -webkit-flex: 5;
    flex: 5;
    -ms-flex: 5;
}

.ROW {
    position: relative;
    width: 100%;
}

.ROWS.AUTO {
    height: auto;
}

/*
            _
   ___ ___ | |___
  / __/ _ \| / __|
 | (_| (_) | \__ \
  \___\___/|_|___/

*/

.COLS {
    width: 100%;
    height: 100%;
    /* Old Syntax */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    /* New Syntax */
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    display: -ms-flexbox;
    /* W3C */
    display: box;
}

.COL-FLEX {
    position: relative;
    height: auto;
    overflow: hidden;
    /* Old Syntax */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    /* New Syntax */
    -webkit-flex: 1;
    flex: 1;
    -ms-flex: 1;
}

.COL-FLEX2 {
    position: relative;
    height: auto;
    /* Old Syntax */
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    /* New Syntax */
    -webkit-flex: 2;
    flex: 2;
    -ms-flex: 2;
}

.COL-FLEX3 {
    position: relative;
    height: auto;
    /* Old Syntax */
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    /* New Syntax */
    -webkit-flex: 3;
    flex: 3;
    -ms-flex: 3;
}

.COL-FLEX4 {
    position: relative;
    height: auto;
    /* Old Syntax */
    -webkit-box-flex: 4;
    -moz-box-flex: 4;
    /* New Syntax */
    -webkit-flex: 4;
    flex: 4;
    -ms-flex: 4;
}

.COL-FLEX5 {
    position: relative;
    height: auto;
    /* Old Syntax */
    -webkit-box-flex: 5;
    -moz-box-flex: 5;
    /* New Syntax */
    -webkit-flex: 5;
    flex: 5;
    -ms-flex: 5;
}

.COL {
    position: relative;
}

/* ONLY FOR IE10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .COL {
        height: 100%;
    }
}

/*
        _ _                                  _
   __ _| (_) __ _ _ __  _ __ ___   ___ _ __ | |_ ___
  / _` | | |/ _` | '_ \| '_ ` _ \ / _ \ '_ \| __/ __|
 | (_| | | | (_| | | | | | | | | |  __/ | | | |_\__ \
  \__,_|_|_|\__, |_| |_|_| |_| |_|\___|_| |_|\__|___/
            |___/
*/

.CENTER {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-flex-pack: center;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    box-pack: center;
    box-align: center;
}

.START {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-flex-pack: start;
    -ms-flex-pack: start;
    -ms-flex-align: start;
    box-pack: start;
}

.END {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-flex-pack: end;
    -ms-flex-pack: end;
    -ms-flex-align: end;
    box-pack: end;
}