/**
xl 1600+
lg 1201 - 1599
md 1200 - 900
sm 900 - 600
xs 600 down
cols 10px padding
**/

* {
	margin: 0;
	padding: 0;
}

p {   box-sizing: border-box; }


.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px -10px;
/*   flex-wrap: nowrap;*/
}

.nav_row {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px -10px;
}

/* directions for grid-containers */

.row{flex-direction:row;}
.column{flex-direction:column;}
.row-rev{flex-direction:row-reverse;}
.column-rev{flex-direction:column-reverse;}

/* wrap for grid-containers */

.cols.wrap{flex-wrap:wrap;}
.cols.no-wrap{flex-wrap:no-wrap;}
.cols.wrap-rev{flex-wrap:wrap-reverse;}

/* Alignments */

.align-left{justify-content:flex-start;}
.align-center{justify-content:center;}
.align-right{justify-content:flex-end;}

/* Item */

.col {
    flex: 0 1 auto;
    align-self:auto;
    box-sizing: border-box;
    padding: 0 10px;
	position: relative;
	flex-grow: 1;
	margin-bottom: 10px;
	margin-top: 10px;
	display: block;
}

/*.col:first-of-type,.col:last-of-type{padding:0;}*/
.col.no-padding{padding:0;}

.col.top{align-self:flex-start;}
.col.bottom{align-self:flex-end;}
.col.middle{align-self:center;}
.col.baseline{align-self:baseline;}
.col.stretch{align-self:stretch;}
.col.auto{align-self:auto;}

/* Item alignment */

.items-top{align-items:flex-start;}
.items-bottom{align-items:flex-end;}
.items-middle{align-items:center;}
.items-stretch{align-items:stretch;}
.items-baseline{align-items:baseline;}
.items-space-between{justify-content:space-between;}
.items-space-around{justify-content:space-around;}
.items-space-evenly{justify-content:space-evenly;}
.content-top{align-content:flex-start;}
.content-bottom{align-content:flex-end;}
.content-middle{align-content:center;}
.content-stretch{align-content:stretch;}
.content-space-between{align-content:space-between;}
.content-space-around{align-content:space-around;}

/* Column width */

@media all and (min-width: 1600px){
    .col-xl-1{width:8.3333333333%;}
    .col-xl-2{width:16.6666666666%;}
    .col-xl-3{width:25%;}
    .col-xl-4{width:33.3333333333%;}
    .col-xl-5{width:41.3333333333%;}
    .col-xl-6{width:50%;}
    .col-xl-7{width:58.3333333333%;}
    .col-xl-8{width:66.6666666666%;}
    .col-xl-9{width:75%;}
    .col-xl-10{width:83.3333333333%;}
    .col-xl-11{width:91.6666666666%;}
    .col-xl-12{width:100%;}
}

/** regular screen **/
@media all and (max-width: 1599px){
	.col-lg-0 {width: 0%; display: none;}
    .col-lg-1{width:8.3333333333%;}
    .col-lg-2{width:16.6666666666%;}
    .col-lg-3{width:25%;}
    .col-lg-4{width:33.3333333333%;}
    .col-lg-5{width:41.3333333333%;}
    .col-lg-6{width:50%;}
    .col-lg-7{width:58.3333333333%;}
    .col-lg-8{width:66.6666666666%;}
    .col-lg-9{width:75%;}
    .col-lg-10{width:83.3333333333%;}
    .col-lg-11{width:91.6666666666%;}
    .col-lg-12{width:100%;}
}

/** tablet h, small screen **/
@media all and (max-width: 1200px){
    .col-md-0 {width: 0%; display: none;}
	.col-md-1{width:8.3333333333%;}
    .col-md-2{width:16.6666666666%;}
    .col-md-3{width:25%;}
    .col-md-4{width:33.3333333333%;}
    .col-md-5{width:41.3333333333%;}
    .col-md-6{width:50%;}
    .col-md-7{width:58.3333333333%;}
    .col-md-8{width:66.6666666666%;}
    .col-md-9{width:75%;}
    .col-md-10{width:83.3333333333%;}
    .col-md-11{width:91.6666666666%;}
    .col-md-12{width:100%;}
}

/** tablet v **/
@media all and (max-width: 900px){
	.col-sm-0 {width: 0%; display: none;}
    .col-sm-1{width:8.3333333333%;}
    .col-sm-2{width:16.6666666666%;}
    .col-sm-3{width:25%;}
    .col-sm-4{width:33.3333333333%;}
    .col-sm-5{width:41.3333333333%;}
    .col-sm-6{width:50%;}
    .col-sm-7{width:58.3333333333%;}
    .col-sm-8{width:66.6666666666%;}
    .col-sm-9{width:75%;}
    .col-sm-10{width:83.3333333333%;}
    .col-sm-11{width:91.6666666666%;}
    .col-sm-12{width:100%;}
}

/** smartphones v/h **/
@media all and (max-width: 600px){
.col-xs-0 {width: 0%; display: none;}
.col-xs-1{width:8.3333333333%;}
.col-xs-2{width:16.6666666666%;}
.col-xs-3{width:25%;}
.col-xs-4{width:33.3333333333%;}
.col-xs-5{width:41.3333333333%;}
.col-xs-6{width:50%;}
.col-xs-7{width:58.3333333333%;}
.col-xs-8{width:66.6666666666%;}
.col-xs-9{width:75%;}
.col-xs-10{width:83.3333333333%;}
.col-xs-11{width:91.6666666666%;}
.col-xs-12{width:100%;}
}