/*
 >  Dynamic Echo Cycle ©
 >  http://www.daiereh.com
 >  Daiereh © - Software Engineering, Interactive Agency
 */

/* version 1.8
   last-update: 2016-03-09
    
    -> added: change .col behavear
    */

/*  This two rules tell the browser what the sizing properties (width and height) should include.
 *  border-box means: The width and height properties (and min/max properties) includes content,
 *  padding and border, but not the margin  
 */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #1414E3;
}

    a:visited {
        color: #5B5BF3;
    }

/* Apply clearfix to any float-containing element.
 * This will force the container element to expand, pushing subsequent elements beneath it.*/
.clearfix:before,
.clearfix:after,
.row:after {
    content: "";
    display: table;
}

.clearfix:after,
.row:after {
    clear: both;
}

.clearfix,
.row:after {
    *zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/*  Section or division which wraps whole content. It is better to place it right after the 'body' tag.*/
.wrapLtr {
    direction: ltr;
    max-width: 100%;
}

.wrapRtl { /* for right to left languages*/
    direction: rtl;
    max-width: 100%;
}

/*  Indicates a row of columns. This will include sections having 'col' class.*/
.row {
    max-width: 100%;
    text-align: center;
}

/*  Specifies column sections within a 'row' */
.col,
.col12,
.col20,
.col25,
.col30,
.col33,
.col40,
.col50,
.col60,
.col70,
.col75,
.col80,
.col90 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /*display: inline-block;*/
    margin-bottom: 20px;
}

    .col.NoMarginb,
    .col12.NoMarginb,
    .col20.NoMarginb,
    .col25.NoMarginb,
    .col30.NoMarginb,
    .col33.NoMarginb,
    .col40.NoMarginb,
    .col50.NoMarginb,
    .col60.NoMarginb,
    .col70.NoMarginb,
    .col75.NoMarginb,
    .col80.NoMarginb,
    .col90.NoMarginb {
        margin-bottom: 0;
    }

.wrapLtr .col,
.wrapLtr .col12,
.wrapLtr .col20,
.wrapLtr .col25,
.wrapLtr .col30,
.wrapLtr .col33,
.wrapLtr .col40,
.wrapLtr .col50,
.wrapLtr .col60,
.wrapLtr .col70,
.wrapLtr .col75,
.wrapLtr .col80,
.wrapLtr .col90 {
    float: left;
}

.wrapRtl .col,
.wrapRtl .col12,
.wrapRtl .col20,
.wrapRtl .col25,
.wrapRtl .col30,
.wrapRtl .col33,
.wrapRtl .col40,
.wrapRtl .col50,
.wrapRtl .col60,
.wrapRtl .col70,
.wrapRtl .col75,
.wrapRtl .col80,
.wrapRtl .col90 {
    float: right;
}

/* add this class to turn the float off and make them align center*/
.wrapLtr .noFloat,
.wrapRtl .noFloat {
    float: none;
    display: inline-block;
    vertical-align: top;
}

/* Break all word and make the text not to exceed*/
.wordWrap {
    -ms-word-break: normal;
    word-break: normal;
    word-wrap: hyphenate;
    -ms-word-wrap: hyphenate;
    white-space: normal;
    overflow: hidden;
}

.noWordWrap {
    -ms-word-break: keep-all;
    word-break: keep-all;
    white-space: nowrap;
    overflow: auto;
}

.noScroll {
    -ms-word-break: keep-all;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
}

/* Sets the width of image equel to its container*/
.imgRespons {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Column 12.5% */
.col12 {
    width: 12.5%;
}

    .col12.noFloat {
        width: 12%;
    }

/* Column 20% */
.col20 {
    width: 20%;
}

    .col20.noFloat {
        width: 19%;
    }

/* Column 25% */
.col25 {
    width: 25%;
}

    .col25.noFloat {
        width: 24%;
    }

/* Column 30% */
.col30 {
    width: 30%;
}

    .col30.noFloat {
        width: 29%;
    }

/* Column 33% */
.col33 {
    width: 33.333%;
}

    .col33.noFloat {
        width: 32%;
    }

/* Column 40% */
.col40 {
    width: 40%;
}

    .col40.noFloat {
        width: 39%;
    }

/* Column 50% */
.col50 {
    width: 50%;
}

    .col50.noFloat {
        width: 48%;
    }

/* Column 60% */
.col60 {
    width: 60%;
}

    .col60.noFloat {
        width: 59%;
    }

/* Column 70% */
.col70 {
    width: 70%;
}

    .col70.noFloat {
        width: 69%;
    }

/* Column 75% */
.col75 {
    width: 75%;
}

    .col75.noFloat {
        width: 74%;
    }

/* Column 80% */
.col80 {
    width: 80%;
}

    .col80.noFloat {
        width: 79%;
    }

/* Column 90% */
.col90 {
    width: 90%;
}

    .col90.noFloat {
        width: 89%;
    }

.col {
    width: 100%;
}


/* Enlarge .col50 elements to 100% width of its container in devices with screen smaller than 768px */
@media screen and (max-width:600px) {

    .wrapLtr .col,
    .wrapLtr .col12,
    .wrapLtr .col20,
    .wrapLtr .col25,
    .wrapLtr .col30,
    .wrapLtr .col33,
    .wrapLtr .col40,
    .wrapLtr .col50,
    .wrapLtr .col60,
    .wrapLtr .col70,
    .wrapLtr .col75,
    .wrapLtr .col80,
    .wrapLtr .col90,
    .wrapRtl .col,
    .wrapRtl .col12,
    .wrapRtl .col20,
    .wrapRtl .col25,
    .wrapRtl .col30,
    .wrapRtl .col33,
    .wrapRtl .col40,
    .wrapRtl .col50,
    .wrapRtl .col60,
    .wrapRtl .col70,
    .wrapRtl .col75,
    .wrapRtl .col80,
    .wrapRtl .col90 {
        float: none;
    }

    .col12,
    .col20,
    .col25,
    .col30,
    .col33,
    .col40,
    .col50,
    .col60,
    .col70,
    .col75,
    .col80,
    .col90,
    .col12.noFloat,
    .col20.noFloat,
    .col25.noFloat,
    .col30.noFloat,
    .col33.noFloat,
    .col40.noFloat,
    .col50.noFloat,
    .col60.noFloat,
    .col70.noFloat,
    .col75.noFloat,
    .col80.noFloat,
    .col90.noFloat {
        width: 100%;
    }

    .wrapLtr .mobileOff,
    .wrapRtl .mobileOff {
        display: none;
    }
}

@media screen and (min-width:601px) {
    .wrapLtr .mobileOnly,
    .wrapRtl .mobileOnly {
        display: none;
    }
}