/****
*Rubinmedia Framework
*
*Recurring css
*Includes:
*-Grid
*-Reset of some user agent styles
*
*Responsive breakpoints: 318px, 768px, 1020px, 1920px
**********/

/****
*STANDARD
**********/
*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/****
*GRID
*
*4 grids, all divided into maximum 12 columns.
*Classname = grid-- + column gap (i.e. .grid--0 or .grid--8).
*Columns float left inside a row. The total amount of columns inside should not exceed 12.
**********/

.rm-grid {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}

.rm-row {
    width: 100%;
    max-width: 100%;
}

.rm-row:after {
    content: '';    
    display: table;
    clear: both;
}

.rm-row .rm-column {
    float: left;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
}

.rm-grid.grid--0 .rm-row .rm-column:first-of-type,
.rm-grid.grid--8 .rm-row .rm-column:first-of-type,
.rm-grid.grid--16 .rm-row .rm-column:first-of-type,
.rm-grid.grid--24 .rm-row .rm-column:first-of-type {
    margin-left: 0;
}

.rm-grid.grid--0 .rm-row .rm-column:last-of-type,
.rm-grid.grid--8 .rm-row .rm-column:last-of-type,
.rm-grid.grid--16 .rm-row .rm-column:last-of-type,
.rm-grid.grid--24 .rm-row .rm-column:last-of-type {
    margin-right: 0;
}

.rm-grid.grid--0 .rm-row .rm-column {
    margin-left: 0;
    margin-right: 0;
}

.rm-grid.grid--0 .rm-row .rm-column.column--one {
    width: 8.3333333333%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--two {
    width: 16.6666666667%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--three {
    width: 25%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--four {
    width: 33.3333333333%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--five {
    width: 41.6666666667%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--six {
    width: 50%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--seven {
    width: 58.3333333333%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--eight {
    width: 66.6666666667%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--nine {
    width: 75%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--ten {
    width: 83.3333333333%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--eleven {
    width: 91.6666666667%;
}

.rm-grid.grid--0 .rm-row .rm-column.column--twelve {
    width: 100%;
}

.rm-grid.grid--8 .rm-row .rm-column {
    margin-left: 3px;
    margin-right: 3px;
}

.rm-grid.grid--8 .rm-row .rm-column.column--one {
    width: calc((100% + 8px) / 12 * 1 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--two {
    width: calc((100% + 8px) / 12 * 2 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--three {
    width: calc((100% + 8px) / 12 * 3 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--four {
    width: calc((100% + 8px) / 12 * 4 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--five {
    width: calc((100% + 8px) / 12 * 5 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--six {
    width: calc((100% + 8px) / 12 * 6 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--seven {
    width: calc((100% + 8px) / 12 * 7 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--eight {
    width: calc((100% + 8px) / 12 * 8 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--nine {
    width: calc((100% + 8px) / 12 * 9 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--ten {
    width: calc((100% + 8px) / 12 * 10 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--eleven {
    width: calc((100% + 8px) / 12 * 11 - 8px);
}

.rm-grid.grid--8 .rm-row .rm-column.column--twelve {
    width: 100%;
}

.rm-grid.grid--16 .rm-row .rm-column {
    margin-left: 8px;
    margin-right: 8px;
}

.rm-grid.grid--16 .rm-row .rm-column.column--one {
    width: calc((100% + 16px) / 12 * 1 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--two {
    width: calc((100% + 16px) / 12 * 2 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--three {
    width: calc((100% + 16px) / 12 * 3 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--four {
    width: calc((100% + 16px) / 12 * 4 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--five {
    width: calc((100% + 16px) / 12 * 5 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--six {
    width: calc((100% + 16px) / 12 * 6 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--seven {
    width: calc((100% + 16px) / 12 * 7 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--eight {
    width: calc((100% + 16px) / 12 * 8 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--nine {
    width: calc((100% + 16px) / 12 * 9 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--ten {
    width: calc((100% + 16px) / 12 * 10 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--eleven {
    width: calc((100% + 16px) / 12 * 11 - 16px);
}

.rm-grid.grid--16 .rm-row .rm-column.column--twelve {
    width: 100%;
}

.rm-grid.grid--24 .rm-row .rm-column {
    margin-left: 12px;
    margin-right: 12px;
}

.rm-grid.grid--24 .rm-row .rm-column.column--one {
    width: calc((100% + 24px) / 12 * 1 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--two {
    width: calc((100% + 24px) / 12 * 2 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--three {
    width: calc((100% + 24px) / 12 * 3 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--four {
    width: calc((100% + 24px) / 12 * 4 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--five {
    width: calc((100% + 24px) / 12 * 5 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--six {
    width: calc((100% + 24px) / 12 * 6 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--seven {
    width: calc((100% + 24px) / 12 * 7 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--eight {
    width: calc((100% + 24px) / 12 * 8 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--nine {
    width: calc((100% + 24px) / 12 * 9 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--ten {
    width: calc((100% + 24px) / 12 * 10 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--eleven {
    width: calc((100% + 24px) / 12 * 11 - 24px);
}

.rm-grid.grid--24 .rm-row .rm-column.column--twelve {
    width: 100%;
}



.rm-grid.grid--8 {
    padding-left: 10px;
    padding-right: 10px;
}

.rm-grid.grid--16 {
    padding-left: 14px;
    padding-right: 14px;
}

.rm-grid.grid--24 {
    padding-left: 12px;
    padding-right: 12px;
}

/****
*TEXT
**********/

a, a:visited {
    text-decoration: none;
    color: inherit;
}

/****
*IMAGE
**********/

img {
    display: block;
}


/** RESPONSIVE**/

@media screen and (max-width: 1050px) {

    .rm-grid.grid--0 .rm-row .rm-column.medium--one {
        width: 8.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--two {
        width: 16.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--three {
        width: 25%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--four {
        width: 33.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--five {
        width: 41.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--six {
        width: 50%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--seven {
        width: 58.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--eight {
        width: 66.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--nine {
        width: 75%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--ten {
        width: 83.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--eleven {
        width: 91.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.medium--twelve {
        width: 100%;
    }

    .rm-grid.grid--8 .rm-row .rm-column {
        margin-left: 4px;
        margin-right: 4px;
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--one {
        width: calc((100% + 8px) / 12 * 1 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--two {
        width: calc((100% + 8px) / 12 * 2 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--three {
        width: calc((100% + 8px) / 12 * 3 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--four {
        width: calc((100% + 8px) / 12 * 4 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--five {
        width: calc((100% + 8px) / 12 * 5 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--six {
        width: calc((100% + 8px) / 12 * 6 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--seven {
        width: calc((100% + 8px) / 12 * 7 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--eight {
        width: calc((100% + 8px) / 12 * 8 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--nine {
        width: calc((100% + 8px) / 12 * 9 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--ten {
        width: calc((100% + 8px) / 12 * 10 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--eleven {
        width: calc((100% + 8px) / 12 * 11 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.medium--twelve {
        width: 100%;
    }

    .rm-grid.grid--16 .rm-row .rm-column {
        margin-left: 8px;
        margin-right: 8px;
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--one {
        width: calc((100% + 16px) / 12 * 1 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--two {
        width: calc((100% + 16px) / 12 * 2 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--three {
        width: calc((100% + 16px) / 12 * 3 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--four {
        width: calc((100% + 16px) / 12 * 4 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--five {
        width: calc((100% + 16px) / 12 * 5 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--six {
        width: calc((100% + 16px) / 12 * 6 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--seven {
        width: calc((100% + 16px) / 12 * 7 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--eight {
        width: calc((100% + 16px) / 12 * 8 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--nine {
        width: calc((100% + 16px) / 12 * 9 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--ten {
        width: calc((100% + 16px) / 12 * 10 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--eleven {
        width: calc((100% + 16px) / 12 * 11 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.medium--twelve {
        width: 100%;
    }

    .rm-grid.grid--24 .rm-row .rm-column {
        margin-left: 12px;
        margin-right: 12px;
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--one {
        width: calc((100% + 24px) / 12 * 1 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--two {
        width: calc((100% + 24px) / 12 * 2 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--three {
        width: calc((100% + 24px) / 12 * 3 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--four {
        width: calc((100% + 24px) / 12 * 4 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--five {
        width: calc((100% + 24px) / 12 * 5 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--six {
        width: calc((100% + 24px) / 12 * 6 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--seven {
        width: calc((100% + 24px) / 12 * 7 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--eight {
        width: calc((100% + 24px) / 12 * 8 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--nine {
        width: calc((100% + 24px) / 12 * 9 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--ten {
        width: calc((100% + 24px) / 12 * 10 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--eleven {
        width: calc((100% + 24px) / 12 * 11 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.medium--twelve {
        width: 100%;
    }
}

@media screen and (max-width: 680px) {

    .rm-grid.grid--0 .rm-row .rm-column.small--one {
        width: 8.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--two {
        width: 16.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--three {
        width: 25%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--four {
        width: 33.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--five {
        width: 41.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--six {
        width: 50%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--seven {
        width: 58.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--eight {
        width: 66.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--nine {
        width: 75%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--ten {
        width: 83.3333333333%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--eleven {
        width: 91.6666666667%;
    }

    .rm-grid.grid--0 .rm-row .rm-column.small--twelve {
        width: 100%;
    }

    .rm-grid.grid--8 .rm-row .rm-column {
        margin-left: 4px;
        margin-right: 4px;
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--one {
        width: calc((100% + 8px) / 12 * 1 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--two {
        width: calc((100% + 8px) / 12 * 2 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--three {
        width: calc((100% + 8px) / 12 * 3 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--four {
        width: calc((100% + 8px) / 12 * 4 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--five {
        width: calc((100% + 8px) / 12 * 5 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--six {
        width: calc((100% + 8px) / 12 * 6 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--seven {
        width: calc((100% + 8px) / 12 * 7 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--eight {
        width: calc((100% + 8px) / 12 * 8 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--nine {
        width: calc((100% + 8px) / 12 * 9 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--ten {
        width: calc((100% + 8px) / 12 * 10 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--eleven {
        width: calc((100% + 8px) / 12 * 11 - 8px);
    }

    .rm-grid.grid--8 .rm-row .rm-column.small--twelve {
        width: 100%!important;
    }

    .rm-grid.grid--16 .rm-row .rm-column {
        margin-left: 8px;
        margin-right: 8px;
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--one {
        width: calc((100% + 16px) / 12 * 1 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--two {
        width: calc((100% + 16px) / 12 * 2 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--three {
        width: calc((100% + 16px) / 12 * 3 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--four {
        width: calc((100% + 16px) / 12 * 4 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--five {
        width: calc((100% + 16px) / 12 * 5 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--six {
        width: calc((100% + 16px) / 12 * 6 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--seven {
        width: calc((100% + 16px) / 12 * 7 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--eight {
        width: calc((100% + 16px) / 12 * 8 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--nine {
        width: calc((100% + 16px) / 12 * 9 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--ten {
        width: calc((100% + 16px) / 12 * 10 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--eleven {
        width: calc((100% + 16px) / 12 * 11 - 16px);
    }

    .rm-grid.grid--16 .rm-row .rm-column.small--twelve {
        width: 100%;
    }

    .rm-grid.grid--24 .rm-row .rm-column {
        margin-left: 12px;
        margin-right: 12px;
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--one {
        width: calc((100% + 24px) / 12 * 1 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--two {
        width: calc((100% + 24px) / 12 * 2 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--three {
        width: calc((100% + 24px) / 12 * 3 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--four {
        width: calc((100% + 24px) / 12 * 4 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--five {
        width: calc((100% + 24px) / 12 * 5 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--six {
        width: calc((100% + 24px) / 12 * 6 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--seven {
        width: calc((100% + 24px) / 12 * 7 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--eight {
        width: calc((100% + 24px) / 12 * 8 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--nine {
        width: calc((100% + 24px) / 12 * 9 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--ten {
        width: calc((100% + 24px) / 12 * 10 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--eleven {
        width: calc((100% + 24px) / 12 * 11 - 24px);
    }

    .rm-grid.grid--24 .rm-row .rm-column.small--twelve {
        width: 100%;
    }
}