/* *********************************************************************************************************************
 * Main kickoff
 */
.kickoff {
	width: 1170px;
	padding: 0 30px;

	margin: 0 auto;
}



/* *********************************************************************************************************************
 * One row
 * Negative margin because and we can avoid last class
 */
.row {
	margin-left: -30px;
}

/* Clearing row */
.row:before,
.row:after {
	display: table;
	content: "";
	line-height: 0;
}
.row:after {
	clear: both;
}



/* *********************************************************************************************************************
 * All col* classes
 */
[class*="col"] {
	float: left;
	min-height: 1px;
	margin-left: 30px;
}



/* *********************************************************************************************************************
 * Initial width for all cols in full-width view > 1260
 * ( 12col * 70px ) + ( 11 margins * 30 ) = 1170
 */
.col1 { width: 70px; }
.col2 { width: 170px; }
.col3 { width: 270px; }
.col4 { width: 370px; }
.col5 { width: 470px; }
.col6 { width: 570px; }
.col7 { width: 670px; }
.col8 { width: 770px; }
.col9 { width: 870px; }
.col10 { width: 970px; }
.col11 { width: 1070px; }
.col12 { width: 1170px; }



/* *********************************************************************************************************************
 * Image width 100% only in case it doesn't have set width attribute
 */
[class*="col"] img:not([width]) {
	width: 100%;
	height: auto;
}



/* *********************************************************************************************************************
 * Forst level of resize from '1280' to '1024'
 */
@media (max-width: 1260px) {
	/* Main kickoff */
	.kickoff {
		width: 940px;
		padding: 0 20px;
	}

	/* One row */
	.row {
		margin-left: -20px;
	}

	/* Change margin of all cols */
	[class*="col"] {
		margin-left: 20px;
	}

	/* Redefine width of cols | ( 12col * 60px ) + ( 11 margins * 20 ) = 940 */
	.col1 { width: 60px; }
	.col2 { width: 140px; }
	.col3 { width: 220px; }
	.col4 { width: 300px; }
	.col5 { width: 380px; }
	.col6 { width: 460px; }
	.col7 { width: 540px; }
	.col8 { width: 620px; }
	.col9 { width: 700px; }
	.col10 { width: 780px; }
	.col11 { width: 860px; }
	.col12 { width: 940px; }
}



/* *********************************************************************************************************************
 * Second level of resize from '1024' to '768'
 */
@media (max-width: 1000px) {

	/* Main kickoff */
	.kickoff {
		width: 645px;
		padding: 0 15px;
	}

	/* One row */
	.row {
		margin-left: -15px;
	}

	/* Change margin of all cols */
	[class*="col"] {
		margin-left: 15px;
	}

	/* Redefine width of cols | ( 12col * 40px ) + ( 11 margins * 15 ) = 705 */
	.col1 { width: 40px; }
	.col2 { width: 315px; }
	.col3 { width: 150px; }
	.col4 { width: 645px; padding-top: 50px; margin-top: 50px; border-top: 1px dashed #ccc; }
	.col4:first-child { margin-top: 0; padding-top: 0; border: none; }
	.col5 { width: 260px; }
	.col6 { width: 315px; }
	.col7 { width: 370px; }
	.col8 { width: 425px; }
	.col9 { width: 480px; }
	.col10 { width: 535px; }
	.col11 { width: 590px; }
	.col12 { width: 645px; }

    /**/
	.row.half hr { margin: 10px 0 0 0; }
	.row.half .col3 { width: 315px; }

    /**/
	.row.third > .col3:first-child { width: 100%; margin-bottom: 50px; }
	.row.third .col3 { width: 205px; }

    /**/
	.row.third .col9 { width: 100%; }

    /**/
	.row.half-half > .col3, .row.half-half > .col9 { width: 315px; }

    /**/
	.row.third-under > .col9 { width: 645px; }
	.row.third-under > .col9 hr { width: 645px; }
	.row.third-under > .col9 .row > .col3 { width: 205px; }
	.row.third-under > .col9 .row > .col6 { width: 425px; }

	.row.third-under > .col3, .row.third-under > .col3 .row > .col3 { width: 645px; }

	.row.third-under > .col3 { padding-top: 40px; margin-top: 40px; }

	.blog-isotope { margin-bottom: -50px; }

	.row.third-under > .col3 .row > .col3 .categories { margin-right: -50px; }
	.row.third-under > .col3 .row > .col3 .categories li { display: inline; float: left; margin-right: 50px; }

	.row.third-under > .col3 .row > .col3 .list-unstyled ul { margin-right: -30px; width: 625px; }
	.row.third-under > .col3 .row > .col3 .list-unstyled ul li { display: inline; margin-right: 30px; }

    /**/
	.row.third-under > .col9 .isotope .col3 hr { width: 100% }

    /**/
	.third-blog > .col3 { width: 645px; }
	.third-blog > .col6 { width: 645px; }
	.third-blog > .col6 hr { width: 100% !important; }
	.third-blog > .col6 .comments-list .col3 { width: 315px !important; }
	.third-blog > .col6 .comments-list .col6 { width: 645px !important; }

    /**/
	.row.third > .contact-form .col3 { width: 315px; }
    .row.third.contact > .contact-form { clear: both; }
	.row.third.contact > .col3 > p:last-child { margin: 0; }

}



/* *********************************************************************************************************************
 * Third level of resize from '768' to '480'
 */
@media all and (max-width: 768px) {

	/* Main kickoff */
	.kickoff {
		width: 453px;
	}

	/* Redefine width of cols | ( 12col * 24px ) + ( 11 margins * 15 ) = 705 */
	.col1 { width: 24px; }
	.col2 { width: 63px; }
	.col3 { width: 102px; }
	.col4 { width: 453px; padding-top: 50px; margin-top: 50px; border-top: 1px dashed #ccc; }
	.col4:first-child { margin-top: 0; padding-top: 0; border: none; }
	.col5 { width: 180px; }
	.col6 { width: 219px; }
	.col7 { width: 258px; }
	.col8 { width: 297px; }
	.col9 { width: 336px; }
	.col10 { width: 375px; }
	.col11 { width: 414px; }
	.col12 { width: 453px; }

	/**/
	.row.third > .col3:first-child { width: 219px; }
	.row.third .col3 { width: 219px; }
	.row.third .col3.break { width: 219px; clear: both; }
	.row.third > .col3:first-child { margin-bottom: 0; }
	.row.third .col3.break, .row.third .col3.break+.col3 { margin-top: 50px !important; }

    /* Widget contact */
	.col4 .widget-contact .col2 { width: 219px; }

    /* About me */
	.row.third-aboutme > .col3, .row.third-aboutme > .col9 { width: 453px; }

    /* Portfolio */
	.row.third .full { width: 453px !important; }

	/**/
	.row.half-half > .col3, .row.half-half > .col9 { width: 453px; }

	/**/
	.row.third-under > .col9 { width: 453px; }
	.row.third-under > .col9 hr { width: 453px; }
	.row.third-under > .col9 .row > .col3, .row.third-under > .col9 .row > .col6 { width: 219px; }

	.row.third-under > .col3, .row.third-under > .col3 .row > .col3 { width: 453px; }

    .row.third-under.single > .col9 .row > .col3, .row.third-under.single > .col9 .row > .col6 { width: 453px !important; }
	.row.third-under.single .col3, .row.third-under.single .col6 { width: 453px !important; }

    /* Contact */
	.row.third.contact > .col3:first-child, .row.third.contact .contact-form .col3, .row.third.contact .contact-form .col6 { width: 453px !important; float: none; }

    /* Elements */
	.row .col4 .col2 { width: 219px; }

	.row.third-under > .col3 .row > .col3 .list-unstyled ul { width: 433px; }

}



/* *********************************************************************************************************************
 * Fourth level of resize from '480' to '320'
 */
@media all and (max-width: 480px) {

	/* Main kickoff */
	.kickoff {
		width: 300px;
	}

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12,
	.row.third .full, .row hr,
	.row.third-under > .col3 .row > .col3 .categories,
	.row.third-under.single > .col9 .row > .col3, .row.third-under.single > .col9 .row > .col6,
	.row.third-under.single .col3, .row.third-under.single .col6,
	.row.third.contact > .col3:first-child, .row.third.contact .contact-form .col3, .row.third.contact .contact-form .col6 {
		width: 300px !important;
	}

	.row.third-under > .col3 .row > .col3 .list-unstyled ul { width: 280px; }

	.row.third > .col3:first-child { margin-bottom: 50px; }

}