/*!
 * flexbox.css : v0.3
 * date : 20170405
 */

/* flexbaox
-----------------------------------------------------------*/
.flexbox {
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.col2 {
	justify-content :space-between;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	width: 100%;
}
.col2 > div {
	width: 49%;
	margin: 0 0 20px;
}
.col3 {
	justify-content :flex-start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	-webkit-box-pack: start;
	margin: 0 0 0 -18px;
	width: calc(100% + 18px);
}
.col3 > div {
	width: calc(33.3% - 18px);
	margin: 0 0 20px 18px;
}
.col4 {
	justify-content :flex-start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	-webkit-box-pack: start;
	margin: 0 0 0 -20px;
	width: calc(100% + 20px);
}
.col4 > div {
	width: calc(25% - 20px);
	margin: 0 0 20px 20px;
}
.col5 {
	justify-content :flex-start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	-webkit-box-pack: start;
	margin: 0 0 0 -25px;
	width: calc(100% + 25px);
}
.col5 > div {
	width: calc(20% - 25px);
	margin: 0 0 20px 25px;
}
.col6 {
	justify-content :flex-start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	-webkit-box-pack: start;
	margin: 0 0 0 -25px;
	width: calc(100% + 25px);
}
.col6 > div {
	width: calc(16.6% - 25px);
	margin: 0 0 20px 25px;
}

.order1 {
	order: 1;
	-webkit-order: 1;
	-ms-order: 1;
}
.order2 {
	order: 2;
	-webkit-order: 2;
	-ms-order: 2;
}
.order3 {
	order: 3;
	-webkit-order: 3;
	-ms-order: 3;
}
.order4 {
	order: 4;
	-webkit-order: 4;
	-ms-order: 4;
}


/* Responsive
-----------------------------------------------------------*/

@media screen and (min-width: 1280px){

}

@media screen and (min-width: 1020px) and (max-width: 1279px) {

}


@media screen and (min-width: 768px) and (max-width: 1019px) {


	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {
		justify-content :space-between;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		-webkit-box-pack: justify;
		margin: 0;
		width: 100%;
	}
	.col2 > div,
	.col3 > div,
	.col4 > div,
	.col5 > div,
	.col6 > div {
		width: 48%;
		margin: 0 0 20px 0;
		}

}


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

	.col2 {
		margin: 0;
		width: 100%;
	}
	.col2 > div {
		width: 100%;
		margin: 0 0 20px 0;
	}

	.col3,
	.col4,
	.col5,
	.col6 {
		justify-content :space-between;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		-webkit-box-pack: justify;
		margin: 0;
		width: 100%;
	}
	.col3 > div,
	.col4 > div,
	.col5 > div,
	.col6 > div {
		width: 48%;
		margin: 0 0 20px 0;
		}

}


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

	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {
		margin: 0;
		width: 100%;
	}
	.col2 > div,
	.col3 > div,
	.col4 > div,
	.col5 > div,
	.col6 > div {
		width: 100%;
		margin: 0 0 20px 0;
		}

}