/* =============================================================================
	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
   =============================================================================*/

 @import url("mono-style.css");

 /* test container */
.container {
	margin:0 auto;
	width:95%;
	max-width:1280px;
/* 	border:1px solid #ff6600;
		padding: 20px;
	 */
	box-sizing: border-box;
	}	

 .col.space {
 	padding: 20px 20px 0;
 }

 .prtcl-row,
 .prtcl-row .col {
 	box-sizing: border-box;
 	overflow: hidden;
 	position: relative;
 }

 .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);
 	}
 }