/* 
GRID
*/

.wrapper {
	margin: 0 auto;	
	clear: both;
	box-sizing: border-box;
}
section.full {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh; 
	z-index: 110;
	position: relative;
}
section.full article,
article.full {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
section.full .image {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	
	position: absolute;
	top: 0;
	left: 0;
}

section.full .gal .image {
	position: relative;
}

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 { 	width: 8.3334% }
.c2 { 	width: 16.6667% }
.c3 { 	width: 25% }
.c4 {	width: 33.3334% }
.c5 {	width: 41.6667% }
.c6 {	width: 50% }
.c7 {	width: 58.3334% }
.c8 {	width: 66.6667% }
.c9 {	width: 75% }
.c10 {	width: 83.3334% }
.c11 {	width: 91.6667% }
.c12 {	width: 100% }

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12{ 
	box-sizing: border-box ;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);	
	column-gap: 0;
	row-gap: 2rem;
}
.grid.gap {
	column-gap: 4.166%;
	row-gap: 2rem;
}
.grid :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11, .gc12){
	width: 100%;
}
.grid article {
	width: 100% !important;
	grid-column-end: span 2;
}
.grid .gc2 {
	grid-column-end: span 2;
}
.grid .gc3 {
	grid-column-end: span 3;
}
.grid .gc4 {
	grid-column-end: span 4;
}
.grid .gc6 {
	grid-column-end: span 6;
}
.grid .gc8 {
	grid-column-end: span 8;
}

.grid .gc10 {
	grid-column-end: span 10;
}

.grid .gc12 {
	grid-column-end: span 12;
}


@media only screen and (max-width: 1024px){
	
	.c1,
	.c2 { width: 25% }
	.c3,
	.c4,
	.c5 { width: 50% }
	.c6, 
	.c7,
	.c8,
	.c9 { 
		width: 80%;
	}	
	.grid :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11, .gc12){
		width: 100%;
		grid-column-end: span 6;
	}
	
}
 
@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%;
	}
	.grid :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6){
		width: 100%;
		grid-column-end: span 6;
	}
	.grid :is(.gc7, .gc8, .gc9, .gc10, .gc11, .gc12){
		width: 100%;
		grid-column-end: span 12;
	}
	
}
 

@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: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}
	:is(.c10, .c11, .c12) :is(.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10) {
		padding-left: 0;
		padding-right: 0;
	}	
	.grid :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11, .gc12) {
		grid-column-end: span 12;
	}
	
}