/* 
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: 16px;
	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 .gc5 {
	grid-column-end: span 5;
}
.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: 1200px){

	.c8, .c9, .c10, .c11, .c12 { 
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	
}

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

	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;
	}
	

	
}