/* CONTAINER */
.container {
	display: block;
	width: 88%;
	max-width: 1400px;
	margin: 0 auto;
}

.container-full {
	width: 100%;
}

/* ROWS */

.row{
	display: flex;
	flex-wrap: wrap;
}

.row-justify-end {
	justify-content: flex-end;
}

.row-justify-center {
	justify-content: center;
}

.row-justify-between {
	justify-content: space-between;
}

.row-align-end {
	align-items: flex-end;
}

.row-align-center {
	align-items: center;
}

.row-align-start {
	align-items: start;
}


.row-gap{
	gap: 80px;
}

.row-gap-lg{
	gap: 150px;
}

.row-gap-sm{
	gap: 30px;
}
/* COLUMNS */

.col {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0%;
}

.col-flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}


.col-lg-1 {
	max-width: 8.33%;
}

.col-lg-2 {
	max-width: 16.67%;
}


.col-lg-3 {
	max-width: 25%;
}

.col-lg-4 {
	max-width: 33.33%;
}

.col-lg-5 {
	max-width: 41.67%;
}

.col-lg-6 {
	max-width: 50%;
}

.col-lg-7 {
	max-width: 58.33%;
}

.col-lg-8 {
	max-width: 66.67%;
}

.col-lg-9 {
	max-width: 75%;
}

.col-lg-10 {
	max-width: 83.33%;
}

.col-lg-11 {
	max-width: 91.67%;
}

.col-lg-12 {
	max-width: 100%;
}

/* GRID LAYOUTS */

.grid-classes{
	display: grid;
	grid-template: auto / 1fr 1fr;
	column-gap: 152px;
	row-gap: 86px;
	align-items: start;
}


.grid-work{
	margin-top: 0px;
	max-height: 0px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 50px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
}

.grid-work-3{
	margin-top: 100px;
	margin-bottom: 100px;
	max-height: 1000px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 50px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
}

.grid-work-4{
	margin-top: 100px;
	margin-bottom: 100px;
	max-height: 1000px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 50px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
}

.grid-work.active{
	margin-top: 100px;
	max-height: 1000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 50px;
	row-gap: 86px;
	align-items: start;
}

.grid-work2{
	margin-top: 0px;
	max-height: 0px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
}

.grid-work2.active{
	margin-top: 100px;
	max-height: 1000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
}

.grid-info{
	display: grid;
	grid-template: auto / 1fr 1fr;
	gap: 60px;
	align-items: start;
	max-height: 100px;
}

/* ---- MOBILE VIEWPORT ---- */

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

	.col {
		padding: 0px;
	}

	.col-sm-1 {
		flex: 0 0 8.33%;
		max-width: 8.33%;
	}

	.col-sm-2 {
		flex: 0 0 16.67%;
		max-width: 16.67%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33.33%;
		max-width: 33.33%;
	}

	.col-sm-5 {
		flex: 0 0 41.67%;
		max-width: 41.67%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		flex: 0 0 58.33%;
		max-width: 58.33%;
	}

	.col-sm-8 {
		flex: 0 0 66.67%;
		max-width: 66.67%;
	}

	.col-md-8 {
		flex: 0 0 66.67%;
		max-width: 66.67%;
	}

	.col-sm-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		flex: 0 0 83.33%;
		max-width: 83.33%;
	}

	.col-sm-11 {
		flex: 0 0 91.67%;
		max-width: 91.67%;
	}

	/* GRID LAYOUTS */

	.grid-classes{
		display: flex;
		flex-direction: column;
		align-items: start;
	}


	.grid-work{
		grid-template-columns: 1fr 1fr;
	}

	.grid-work.active{
	margin-top: 100px;
	max-height: 4000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	}	

	.grid-work2{
	margin-top: 0px;
	max-height: 0px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
	}

	.grid-work2.active{
	margin-top: 100px;
	max-height: 4000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	}

	.grid-info{
	display: grid;
	grid-template: auto / 1fr 1fr;
	gap: 60px;
	align-items: start;
	max-height: 100px;
	}

	.grid-work-3-sm{
		margin-top: 100px;
		margin-bottom: 100px;
		max-height: 1000px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.grid-work-4-sm{
		margin-top: 50px;
		margin-bottom: 50px;
		max-height: 10000px;
		grid-template-columns: 1fr 1fr;
	}

	.sm-margin{
		margin-top: 100px;
	}

	.align-right{
		text-align: right;
	}

}

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

	.col {
		padding: 0px;
	}

	.col-sm-1 {
		flex: 0 0 8.33%;
		max-width: 8.33%;
	}

	.col-sm-2 {
		flex: 0 0 16.67%;
		max-width: 16.67%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33.33%;
		max-width: 33.33%;
	}

	.col-sm-5 {
		flex: 0 0 41.67%;
		max-width: 41.67%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		flex: 0 0 58.33%;
		max-width: 58.33%;
	}

	.col-sm-8 {
		flex: 0 0 66.67%;
		max-width: 66.67%;
	}

	.col-sm-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		flex: 0 0 83.33%;
		max-width: 83.33%;
	}

	.col-sm-11 {
		flex: 0 0 91.67%;
		max-width: 91.67%;
	}

	.col-sm-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* GRID LAYOUTS */

	.grid-classes{
		display: flex;
		flex-direction: column;
		align-items: start;
	}


	.grid-work{
		grid-template-columns: 1fr;
	}

	.grid-work.active{
	margin-top: 100px;
	max-height: 4000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	}	

	.grid-work2{
	margin-top: 0px;
	max-height: 0px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	transition: max-height 0.3s ease;
	}

	.grid-work2.active{
	margin-top: 100px;
	max-height: 4000px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
	row-gap: 86px;
	align-items: start;
	}

	.grid-info{
	display: grid;
	grid-template: auto / 1fr 1fr;
	gap: 60px;
	align-items: start;
	max-height: 100px;
	}

	.grid-work-3-sm{
		margin-top: 100px;
		margin-bottom: 100px;
		max-height: 1000px;
		display: grid;
		grid-template-columns: 1fr;
	}

	.grid-work-4-sm{
		margin-top: 50px;
		margin-bottom: 50px;
		max-height: 10000px;
		grid-template-columns: 1fr;
	}

	.sm-margin{
		margin-top: 100px;
	}

	.align-right{
		text-align: right;
	}


}