/********************************************************************/
/*                                                                  */
/*      GridLayout                                                  */
/*                                                                  */
/*                                                                  */
/********************************************************************/

/* Common styles */

.gridLayout > section{
    position:relative;
}

.gridLayout > section .content{
    display:table;
    max-width:960px;
    margin: 0 auto;
    position: relative;
}

.gridLayout > section.padded .content .columnContainer{
    padding: 30px 0px;
}

.gridLayout > section.padded .content .columnContainer .columnLine{
    margin: 0px 30px;
}

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

.gridLayout > section .content{
    width:auto;
    display:block;
}

.gridLayout > section.padded .content .columnContainer{
    padding: 20px 0px;
}

.gridLayout > section.padded .content .columnContainer .columnLine{
    margin: 0px 20px;
}

}

/* sidebar */

.gridLayout .sideBar{
    height:100%;
    width:240px;
    max-width:240px;
    background-color:#00aff0;
    position:relative;
    display:table-cell;
}

.gridLayout > section.withSideBarRight .columnContainer{
    max-width:720px;
}

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

.gridLayout .sideBar{
    position:relative;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width:100%;
    max-width:100%;
    padding-bottom: 0;
    margin-bottom: 0;
    display:block;
    background-color:#fff;
}

.gridLayout > section.withSideBarRight .content{
    max-width:100%;
    padding-right:0px;
}

}

/* column common styles */

.gridLayout .columnContainer {
    display: table-cell;
    vertical-align: top;
}

.gridLayout .column{
    float:left;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.gridLayout .column.padded{
    padding:30px;
}

.gridLayout .separated .column{
    padding-left:15px;
    padding-right:15px;
}

.gridLayout .separated .column:first-child{
    padding-left:0px;
}

.gridLayout .separated .column.last-child{
    padding-right:0px;
}


.gridLayout .separatedLine .column{
    padding-right:30px;
    padding-left:29px;
    border-left:1px solid black;
}

.gridLayout .separatedLine .column:first-child{
    border-left:0px;
    padding-left:0px;
}

.gridLayout .separatedLine .column.last-child{
    padding-right:0px;
}

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

.gridLayout .columnContainer {
    float: none;
    display: block;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
}

.gridLayout .column.padded {
    padding:20px;
}

.gridLayout .separated .column{
    padding:0px;
}

.gridLayout .separatedLine .column{
    padding:0px;
    border-left:none;
}

}

/* rtl */

.rtl .gridLayout .column{
	float: right;
} 


/* version of the column */

.gridLayout .twoColumns .column { width:50%; }

.gridLayout .threeColumns .column { width:33%; }
    .gridLayout .threeColumns .column.x2 { width:66%; }
    .gridLayout .threeColumns .column.x3 { width:100%; }

.gridLayout .fourColumns .column{ width:25%; }
    .gridLayout .fourColumns .column.x2{ width:50%; }
    .gridLayout .fourColumns .column.x3{ width:75%; }
    .gridLayout .fourColumns .column.x4{ width:100%; }

.gridLayout .fiveColumns .column { width:20%; }
    .gridLayout .fiveColumns .column.x2 { width:40%; }
    .gridLayout .fiveColumns .column.x3 { width:60%; }
    .gridLayout .fiveColumns .column.x4 { width:80%; }
    .gridLayout .fiveColumns .column.x5 { width:100%; }

.gridLayout .sixColumns .column { width:17%; }
.gridLayout .sixColumns .column:first-child { width:16%; }
.gridLayout .sixColumns .column.last-child { width:16%; }
    .gridLayout .sixColumns .column.x2{ width:33%; }
    .gridLayout .sixColumns .column.x3{ width:49%; }
    .gridLayout .sixColumns .column.x4{ width:66%; }
    .gridLayout .sixColumns .column.x5{ width:83%; }
    .gridLayout .sixColumns .column.x6{ width:100%; }

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

.gridLayout .column,
.gridLayout .twoColumns .column,
.gridLayout .threeColumns .column,
.gridLayout .threeColumns .column.x2,
.gridLayout .threeColumns .column.x3,
.gridLayout .fourColumns .column,
.gridLayout .fourColumns .column.x2,
.gridLayout .fourColumns .column.x3,
.gridLayout .fourColumns .column.x4,
.gridLayout .fiveColumns .column,
.gridLayout .fiveColumns .column.x2,
.gridLayout .fiveColumns .column.x3,
.gridLayout .fiveColumns .column.x4,
.gridLayout .fiveColumns .column.x5,
.gridLayout .sixColumns .column,
.gridLayout .sixColumns .column:first-child,
.gridLayout .sixColumns .column.last-child,
.gridLayout .sixColumns .column.x2,
.gridLayout .sixColumns .column.x3,
.gridLayout .sixColumns .column.x4,
.gridLayout .sixColumns .column.x5,
.gridLayout .sixColumns .column.x6{ 
    width:100%;
}

}

/********************************************************************/