/* =============================================================================
	PARTICLES | MADAM MONOROM | monorom.com | HTML5 & CSS Project
	This project is licensed under the MIT License
	(https://opensource.org/licenses/MIT) Copyright (c) 2016 monorom.com

	CONTENTS
	- Container
	- Row
	- Space
	- Col
   =============================================================================*/

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    padding: 20px;
    margin:0 auto;
    width:95%;
    max-width:1280px;
}
.space{
    padding:20px;
}
.prtcl-row,
.prtcl-row .col{
    box-sizing: border-box;
}
.prtcl-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow:row  wrap;
    margin:0 -10px;
}
.prtcl-row .col{
    margin:10px;
}

.prtcl-row .prtcl-row{
    margin: 0;
    margin: 10px;
}

.prtcl-row.reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
}
.prtcl-row.col-reverse {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    flex-direction: column-reverse;
}

.prtcl-row.grow .col,
.prtcl-row .col.grow{
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.prtcl-row .col.s1{
    width:calc(100% / 12 - 20px);
}
.prtcl-row .col.s2{
    width:calc(100% / 12*2 - 20px);
}
.prtcl-row .col.s3{
    width:calc(100% / 12*3 - 20px);
}
.prtcl-row .col.s4{
    width:calc(100% / 12*4 - 20px);
}
.prtcl-row .col.s5{
    width:calc(100% / 12*5 - 20px);
}
.prtcl-row .col.s6{
    width:calc(100% / 12*6 - 20px);
}
.prtcl-row .col.s7{
    width:calc(100% / 12*7 - 20px);
}
.prtcl-row .col.s8{
    width:calc(100% / 12*8 - 20px);
}
.prtcl-row .col.s9	 {
    width:calc(100% / 12*9 - 20px);
}
.prtcl-row .col.s10{
    width:calc(100% / 12*10 - 20px);
}
.prtcl-row .col.s11{
    width:calc(100% / 12*11 - 20px);
}
.prtcl-row .col.s12 {
    width:calc(100% - 20px);
}
.prtcl-row .col.offset-s1 {
    margin-left: calc(100% / 12 + 10px);
}
.prtcl-row .col.offset-s2 {
    margin-left: calc(100% / 12*2 + 10px);
}
.prtcl-row .col.offset-s3 {
    margin-left: calc(100% / 12*3 + 10px);
}
.prtcl-row .col.offset-s4 {
    margin-left: calc(100% / 12*4 + 10px);
}
.prtcl-row .col.offset-s5 {
    margin-left: calc(100% / 12*5 + 10px);
}
.prtcl-row .col.offset-s6 {
    margin-left: calc(100% / 12*6 + 10px);
}
.prtcl-row .col.offset-s7 {
    margin-left: calc(100% / 12*7 + 10px);
}
.prtcl-row .col.offset-s8 {
    margin-left: calc(100% / 12*8 + 10px);
}
.prtcl-row .col.offset-s9 {
    margin-left: calc(100% / 12*9 + 10px);
}
.prtcl-row .col.offset-s10 {
    margin-left: calc(100% / 12*10 + 10px);
}
.prtcl-row .col.offset-s11 {
    margin-left: calc(100% / 12*11 + 10px);
}


@media screen and (min-width : 601px) {
    .prtcl-row .col.m1{
        width:calc(100% / 12 - 20px);
    }
    .prtcl-row .col.m2{
        width:calc(100% / 12*2 - 20px);
    }
    .prtcl-row .col.m3{
        width:calc(100% / 12*3 - 20px);
    }
    .prtcl-row .col.m4{
        width:calc(100% / 12*4 - 20px);
    }
    .prtcl-row .col.m5{
        width:calc(100% / 12*5 - 20px);
    }
    .prtcl-row .col.m6{
        width:calc(100% / 12*6 - 20px);
    }
    .prtcl-row .col.m7{
        width:calc(100% / 12*7 - 20px);
    }
    .prtcl-row .col.m8{
        width:calc(100% / 12*8 - 20px);
    }
    .prtcl-row .col.m9	 {
        width:calc(100% / 12*9 - 20px);
    }
    .prtcl-row .col.m10{
        width:calc(100% / 12*10 - 20px);
    }
    .prtcl-row .col.m11{
        width:calc(100% / 12*11 - 20px);
    }
    .prtcl-row .col.m12 {
        width:calc(100% - 20px);
    }

    .prtcl-row .col.offset-m1 {
        margin-left: calc(100% / 12 + 10px);
    }
    .prtcl-row .col.offset-m2 {
        margin-left: calc(100% / 12*2 + 10px);
    }
    .prtcl-row .col.offset-m3 {
        margin-left: calc(100% / 12*3 + 10px);
    }
    .prtcl-row .col.offset-m4 {
        margin-left: calc(100% / 12*4 + 10px);
    }
    .prtcl-row .col.offset-m5 {
        margin-left: calc(100% / 12*5 + 10px);
    }
    .prtcl-row .col.offset-m6 {
        margin-left: calc(100% / 12*6 + 10px);
    }
    .prtcl-row .col.offset-m7 {
        margin-left: calc(100% / 12*7 + 10px);
    }
    .prtcl-row .col.offset-m8 {
        margin-left: calc(100% / 12*8 + 10px);
    }
    .prtcl-row .col.offset-m9 {
        margin-left: calc(100% / 12*9 + 10px);
    }
    .prtcl-row .col.offset-m10 {
        margin-left: calc(100% / 12*10 + 10px);
    }
    .prtcl-row .col.offset-m11 {
        margin-left: calc(100% / 12*11 + 10px);
    }

}
@media only screen and (min-width : 981px) {
    .container {
        width:90%;
        max-width:1280px;
    }
    .prtcl-row .col.l1{
        width:calc(100% / 12 - 20px);
    }
    .prtcl-row .col.l2{
        width:calc(100% / 12*2 - 20px);
    }
    .prtcl-row .col.l3{
        width:calc(100% / 12*3 - 20px);
    }
    .prtcl-row .col.l4{
        width:calc(100% / 12*4 - 20px);
    }
    .prtcl-row .col.l5{
        width:calc(100% / 12*5 - 20px);
    }
    .prtcl-row .col.l6{
        width:calc(100% / 12*6 - 20px);
    }
    .prtcl-row .col.l7{
        width:calc(100% / 12*7 - 20px);
    }
    .prtcl-row .col.l8{
        width:calc(100% / 12*8 - 20px);
    }
    .prtcl-row .col.l9	 {
        width:calc(100% / 12*9 - 20px);
    }
    .prtcl-row .col.l10{
        width:calc(100% / 12*10 - 20px);
    }
    .prtcl-row .col.l11{
        width:calc(100% / 12*11 - 20px);
    }
    .prtcl-row .col.l12 {
        width:calc(100% - 20px);
    }
    .prtcl-row .col.offset-l1 {
        margin-left: calc(100% / 12 + 10px);
    }
    .prtcl-row .col.offset-l2 {
        margin-left: calc(100% / 12*2 + 10px);
    }
    .prtcl-row .col.offset-l3 {
        margin-left: calc(100% / 12*3 + 10px);
    }
    .prtcl-row .col.offset-l4 {
        margin-left: calc(100% / 12*4 + 10px);
    }
    .prtcl-row .col.offset-l5 {
        margin-left: calc(100% / 12*5 + 10px);
    }
    .prtcl-row .col.offset-l6 {
        margin-left: calc(100% / 12*6 + 10px);
    }
    .prtcl-row .col.offset-l7 {
        margin-left: calc(100% / 12*7 + 10px);
    }
    .prtcl-row .col.offset-l8 {
        margin-left: calc(100% / 12*8 + 10px);
    }
    .prtcl-row .col.offset-l9 {
        margin-left: calc(100% / 12*9 + 10px);
    }
    .prtcl-row .col.offset-l10 {
        margin-left: calc(100% / 12*10 + 10px);
    }
    .prtcl-row .col.offset-l11 {
        margin-left: calc(100% / 12*11 + 10px);
    }
}