*, *::after, *::before {
	box-sizing: border-box;
}

body {
	margin-top: 0;
}

/* ---- Flex ---- */
.flex-con-col {
	display: flex;
	flex-direction: column;
}

.flex-con-row {
	display: flex;
	flex-direction: row;
}

.flex-center {
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* ---------------- */
/* ---- Floats ---- */

.fl-left {
	float: left;
}

.fl-right {
	float: right;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* ---------------- */

img.responsive {
	width: 100%;
	height: auto;
}

.wrapper {
	width: 100%;
  	margin: 0 auto;
}

.row {
	width: 100%;
}

.row::before, .row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
    float: left;
    position: relative;
    /*-- gutter --*/
    padding: 0 10px;
    min-height: 1px;
}

.col-1 { width: 8.333%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3%; }
.col-5 { width: 41.66% }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* -- Mobile -- */
@media (min-width: 768px) {
	.wrapper { width: 750px; }
}

@media (max-width: 768px) {
	.col-1 { width: 33.3%; }
}

/* --------------------------- */
/* -- Tablet -- */
@media (min-width: 992px) {
	.wrapper { width: 970px; }
}

/* -- Tablet to Desktop */
@media (min-width:1200px) {
	.wrapper { width:1170px; }
}