/* 
GRID
*/

.wrapper {
	margin: 0 auto;	
	clear: both;
	box-sizing: border-box;
}
section.full {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh; 
	z-index: 110;
}
section.full article,
article.full {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
section.full .image {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
article {
	width: 100%;
	position: relative;
}
article.full .title,
article.full .text {
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}
.cf::before,
.cf::after {
  content: " ";
  display: table;
} 
.cf::after {
  clear: both;
}
.cf {
  *zoom: 1;
}
.c1,
.col.left.c1,
.col.right.c1 { 	width: 8.3334% }
.c2,
.col.left.c2,
.col.right.c2 { 	width: 16.6667% }
.c3,
.col.left.c3,
.col.right.c3 { 	width: 25% }
.c4,
.col.left.c4,
.col.right.c4 {		width: 33.3334% }
.c5,
.col.left.c5,
.col.right.c5 {		width: 41.6667% }
.c6,
.col.left.c6,
.col.right.c6 {		width: 50% }
.c7,
.col.left.c7,
.col.right.c7 {		width: 58.3334% }
.c8,
.col.left.c8,
.col.right.c8 {		width: 66.6667% }
.c9,
.col.left.c9,
.col.right.c9 {		width: 75% }
.c10,
.col.left.c10,
.col.right.c10 {	width: 83.3334% }
.c11,
.col.left.c11,
.col.right.c11 {	width: 91.6667% }
.c12 {				width: 100% }

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { 
	box-sizing: border-box ;
}
.col {float: left;}
.col.left { 
	float: left; 
	padding-right: 2.0834%;
	box-sizing: border-box;
}
.col.right { 
	float: right; 
	padding-left: 2.0834%;
	box-sizing: border-box;
}


.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 4.667vw;
	row-gap: 4.667vw;
}

.grid article {
	width: 100% !important;
	grid-column-end: span 2;
}
.grid .c2 {
	grid-column-end: span 2;
}
.grid .c3 {
	grid-column-end: span 3;
}
.grid .c4 {
	grid-column-end: span 4;
}
.grid .c6 {
	grid-column-end: span 6;
}
.grid :is(.c2, .c3, .c4, .c5, .c6) {
	width: 100% !important; 
}
	


@media only screen and (max-width: 1024px) { 
	
	.c1,
	.c2 { width: 25% }
	.c3,
	.c4,
	.c5,
	.c6 { width: 50% }
	.c7,
	.c8,
	.c9 { 
		width: 80%;
		/*margin: 0 auto ;*/
	}
	

}
 
@media only screen and (max-width: 768px) { 

	.c1,
	.c2 { width: 25% }
	.c3 { width: 33.3334% }
	.c4,
	.c5 { width: 50% }
	.c6,
	.c7,
	.c8,
	.c9 { 
		width: 80%;
		/*margin: 0 auto ;*/
	}
	
	:is(.col, .col.left, .col.right) :is(.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12) {
		width: 50%; 
	}
	
	.grid .c2,
	.grid .c3,
	.grid .c4,
	.grid .c6 {
		grid-column-end: span 6;
	}

}
 

@media only screen and (max-width: 600px) {
	
	main {
		min-height: auto;
	}

	.wrapper.grid {
		padding-left: 0;
		padding-right: 0;
	}
	.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { 
		width: 90vw;
		padding-left: 0;
		padding-right: 0;
	}
	
	:is(.c10, .c11, .c12) :is(.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10) {
		padding-left: 0;
		padding-right: 0;
	}
	
	:is(.col, .col.left, .col.right) :is(.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10) {
		width: 100%;
	}
	.col.left,
	.col.right {
		width: 100% !important;
		float: none;
		padding-left: 0%;
		padding-right: 0%;
	}
	.grid {
		column-gap: 1vw;
		row-gap: 1vw;
	}
	.grid :is(.c2, .c3, .c4, .c5, .c6) {
		grid-column-end: span 12;
	}

	

}