/*======================================================================*/
/* GRID STYLESHEET														*/
/*======================================================================*/
/* include padding and margin */
* {
    box-sizing: border-box;
}

/* float all columns left */
[class*="grid-"] {
    float: left;
    padding: 15px;
}

/* gridholder */
.gridholder {
	padding: 0 0;
}

/* clear after gridholder */
.gridholder:after {
    content: "";
    clear: both;
    display: block;
}

/* no padding */
.no-padding-top {
	padding-top: 0;
}

.no-padding-bottom {
	padding-bottom: 0;
}

.no-padding-left {
	padding-left: 0;
}

.no-padding-right {
	padding-right: 0;
}

/* define width of columns */
.grid-1 {
	width: 8.33%;
}

.grid-2 {
	width: 16.66%;
}

.grid-25 {
	width: 20%;
}

.grid-3 {
	width: 25%;
}

.grid-4 {
	width: 33.33%;
}

.grid-5 {
	width: 41.66%;
}

.grid-6 {
	width: 50%;
}

.grid-7 {
	width: 58.33%;
}

.grid-8 {
	width: 66.66%;
}

.grid-9 {
	width: 75%;
}

.grid-10 {
	width: 83.33%;
}

.grid-11 {
	width: 91.66%;
}

.grid-12 {
	width: 100%;
}

@media only screen and (max-width : 1024px) {
	.grid-25 {
		width: 33.33%;
	}

	.grid-6 {
		width: 100%;
	}

	.grid-3 {
		width: 50%;
	}

	.grid-4 {
		width: 50%;
	}

	.grid-4:nth-child(3n+1) {
		width: 100%;
	}

	.grid-9 {
		width: 100%;
	}
}

@media only screen and (max-width : 768px) {
	.grid-25 {
		width: 50%;
	}

	.grid-4 {
		width: 100%;
	}

	.grid-6 {
		width: 100%;
	}
}

@media only screen and (max-width : 568px) {
	.grid-3 {
		width: 100%;
	}
}

@media only screen and (max-width : 480px) {
	.grid-25 {
		width: 100%
	}
}