/* Copyright 2019, Sciamble Corp. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. */

*, *:before, *:after {
    line-height: inherit;
}

.col-container {
    display: flex;
    flex-direction: row;
}

.col-container-first {
    margin-top: 70px;
}

.row-container {
    display: flex;
    flex-direction: column;
}

.col-container-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.colSidebar {
    width: 10%;
}

.colSingle, .colDoubleEqual, .colDouble2by3, .colDouble1by3, .colDouble1by5, .colDouble4by5, .colTripleEqual, .colTriple4by9, .colTriple1by9, .colTriple3by11, .colTriple1by11 {
    align-self: center;
    text-align: center;
    padding-bottom: 50px;
}

.colSingle {
    width: 80%;
    align-content: center;
    padding-bottom: 24px;
}

.colDoubleEqual {
    width: 40%;
}

.colDouble2by3 {
    width: 53%;
}

.colDouble1by3 {
    width: 27%;
}

.colDouble1by5 {
    width: 16%;
}

.colDouble4by5 {
    width: 64%;
}

.colTripleEqual {
    width: 27%;
}

.colTriple4by9 {
    width: 36%;
}

/* Not prinited, only used for padding */
.colTriple1by9 {
    width: 7%;
}

.colTriple3by11 {
    width: 22%;
}

/* Not prinited, only used for padding */
.colTriple1by11 {
    width: 10%;
}

@media screen and (max-width: 1000px) {
    .col-container, .col-container-reverse {
        flex-direction: column;
    }

    .colSidebar, .colTriple1by9, .colTriple1by11 {
        display: none;
    }

    .colSingle, .colDoubleEqual, .colDouble2by3, .colDouble1by3, .colDouble1by5, .colDouble4by5, .colTripleEqual, .colTriple4by9, .colTriple3by11 {
        padding-left: 5px;
        padding-right: 5px;
        width: calc(100% - 10px);
    }
}

/*
    Content by default are set to center align. This class is called to override that.
    Muat be at end of all column settings where content is set to center align and this overrides it.
*/
.colTopAlign {
    align-self: flex-start;
}

.colLeftAlign {
    align-self: flex-start;
    align-content: flex-start;
    text-align: left;
}

@media print {
    .colSidebar, .colTriple1by9, .colTriple1by11 {
        display: none;
    }

    .colSingle, .colDoubleEqual, .colDouble2by3, .colDouble1by3, .colDouble1by5, .colDouble4by5, .colTripleEqual, .colTriple4by9, .colTriple3by11 {
        width: 100%;
    }
}