/*  Basics for the row  */
.row {
	display: block;
	margin: 50px 0 ; /* This will push the next row a little below */
	clear: both;
}
.row.moremargin {
	margin: 100px 0;
}
/*  Basics for the portions  */
.row .portion {
	float: left;
	width: 100%;
	padding: 0 20px;
}


/*  Remove the gap between elements in the same row  */
.no-gaps .portion,
.portion.no-gaps { padding: 0 !important; }

/*  Now the actual grid layout  */
.row .whole            { width: 100%; }

.row .half             { width: 50%; }

.row .one-third        { width: 33.3332%; }
.row .two-thirds       { width: 66.6665%; }

.row .one-fourth       { width: 25%; }
.row .three-fourths    { width: 75%; }

.row .one-fifth        { width: 20%; }
.row .two-fifths       { width: 40%; }
.row .three-fifths     { width: 60%; }
.row .four-fifths      { width: 80%; }

.row .one-sixth        { width: 16.6666%; }
.row .two-sixths       { width: 33.3332%; }
.row .three-sixths     { width: 50.0000%; }
.row .four-sixths      { width: 66.6665%; }
.row .five-sixths      { width: 83.3332%; }

.row .one-seventh      { width: 14.2856%; }
.row .two-sevenths     { width: 28.5714%; }
.row .three-sevenths   { width: 42.8571%; }
.row .four-sevenths    { width: 57.1428%; }
.row .five-sevenths    { width: 71.4285%; }
.row .six-sevenths     { width: 85.7142%; }

.row .one-eighth       { width: 12.5%; }
.row .two-eighths      { width: 25.0%; }
.row .three-eighths    { width: 37.5%; }
.row .four-eighths     { width: 50.0%; }
.row .five-eighths     { width: 62.5%; }
.row .six-eighths      { width: 75.0%; }
.row .seven-eighths    { width: 87.5%; }


/*  Clearfix for the rows  */
.row:before, .row:after {
	display: block;
	content: "";
}
.row:after { clear: both; }


/*  Fixing images for better responsive behaviour  */
.portion img { max-width: 100%; }

/* Table styles */
/* Table styles */
td {
	vertical-align: top;
	width: 50%;
}

td.left {
	padding-right: 15px;
}
td.right {
	padding-left: 15px;
}

/*  Use the "retain-layout-on-mobiles" and
	"retain-layout-on-tablets" if you want your
	elements to use the same layout across all screens.
	The rule below causes a single-column layout */
@media screen and (max-width: 800px) {

	.row:not(.retain-layout-on-tablets) > .portion { width: 100% !important; }
	
	.row .portion.half {width: 100% !important;}
	.row .portion.one-third {width: 100% !important;}
	.row .portion.one-fourth {width: 100% !important;}
	
	

	.portion .row .portion {
		padding-left: 0;
		padding-right: 0;
	}
	
}

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

	.row:not(.retain-layout-on-mobiles) > .portion { width: 100% !important; }
	
	.row .portion.half {width: 100% !important;}
	.row .portion.one-third {width: 100% !important;}
	.row .portion.one-fourth {width: 100% !important;}
	
	

	.portion .row .portion {
		padding-left: 0;
		padding-right: 0;
	}
	
	/* Table styles */
	td {
		vertical-align: top;
		width: 100%;
		display: block;
		padding: 0 !important;
	}


}


/*  Side margins for all your content — increase or decrease at will,
	or simply add the 'no-padding' class to get full-width  */

/*  For small screens UP TO 599px width  */
@media all and (max-width: 599px) {
	.all-content { padding: 0 4vw; }
}

/*  For screens FROM 600px width and UPWARD  */
@media all and (min-width: 600px) {
	.all-content { padding: 0 6vw; }
}

/*  For screens FROM 900px width and UPWARD  */
@media all and (min-width: 900px) {
	.all-content { padding: 0; max-width: 1200px; margin: 0 auto; }
	.all-content.small { padding: 0; max-width: 900px; margin: 0 auto; }
}