/* --------------FLEXBOX------------------ */
/* Use this stylesheet for layout styling. Edit as needed to match your own design. */

/* ////////// Flexbox parent classes ////////// */

.inner-wrapper {
	/* We're setting every inner-wrapper to be a flexbox parent, but setting the default flex-direction to column, so that it's still a vertical stacked layout unless we add a .row inside it, and/or use child classes on the children. */
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin: 0 auto;
	max-width: 94vw;
	margin-bottom: 3em;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
}

.inner-wrapper-project {
	display: block;
	margin: 0 auto;
	max-width: 94vw;
	padding: 0 20px;
}
.sticky {
	top: 1em;
	position: sticky;
}

.row {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	flex-wrap: wrap;
}

.row.full-width {
	justify-content: flex-start;
}

#contact .row {
	justify-content: center;
	gap: 15px;
}

/* To implement these optional column gaps, apply one of these classes to any flex parent. */
.flex-gap-sm {
	gap: 10px;
}
.flex-gap-md {
	gap: 20px;
}
.flex-gap-lg {
	gap: 40px;
}

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

/* ////////// Flexbox child classes ////////// */

.row > * {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

/* Remember that elements can be both a flex child and a flex parent. This class can be added onto any flex child, creating it as a flex parent and allowing you to center content vertically and horizontally. */
.center-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* //////////----Responsive layout - Media queries--------////////// */
/* You can edit the rules inside of these media queries, but you can also edit the breakpoints. */

@media (max-width: 600px) {
	/* anything you only want applied at mobile sizes can go here */
	.flex-item {
		width: 100vw;
		height: auto;
	}
}

@media (min-width: 768px) {
	/* anything you want to kick in at small tablet and above can go here */
}

@media (min-width: 900px) {
	/* anything you want to kick in at large tablet and above can go here */

	/* ////////// Flexbox child classes, to control the column widths at various breakpoints ////// */

	/* To use in your HTML, add the class "flex-item", PLUS the desired width class, like "one-third" for example to any flex child element. Example: <div class="flex-item one-third">content</div> */

	/* In flexbox, widths can also be expressed using the "flex-basis" property, but we're using "width" instead for easy reading. */

	/* Thirds */
	.one-third {
		width: 33.33%;
		flex-grow: unset;
	}

	.two-thirds {
		flex-grow: unset;
		width: 66.67%;
	}

	/* These combinator selectors work in conjunction with the optional column gap classes in the flexbox parent section above. */

	.flex-gap-sm .one-third {
		width: calc(33.33% - 6.67px);
	}

	.flex-gap-sm .two-thirds {
		width: calc(66.67% - 3.33px);
	}

	.flex-gap-md .one-third {
		width: calc(33.33% - 13.34px);
	}

	.flex-gap-md .two-thirds {
		width: calc(66.67% - 6.66px);
	}

	.flex-gap-lg .one-third {
		width: calc(33.33% - 26.67px);
	}

	.flex-gap-lg .two-thirds {
		width: calc(66.67% - 13.33px);
	}

	/* Quarters */
	.one-quarter {
		flex-grow: unset;
		width: 25%;
	}

	.three-quarters {
		flex-grow: unset;
		width: 75%;
	}

	.flex-gap-sm .one-quarter {
		width: calc(25% - 7.5px);
	}

	.flex-gap-sm .three-quarters {
		width: calc(75% - 3.5px);
	}

	.flex-gap-md .one-quarter {
		width: calc(25% - 15px);
	}

	.flex-gap-md .three-quarters {
		width: calc(75% - 5px);
	}

	.flex-gap-lg .one-quarter {
		width: calc(25% - 30px);
	}

	.flex-gap-lg .three-quarters {
		width: calc(75% - 10px);
	}

	/* Half widths */
	.one-half {
		flex-grow: unset;
		width: 50%;
	}

	.flex-gap-sm .one-half {
		width: calc(50% - 5px);
	}

	.flex-gap-md .one-half {
		width: calc(50% - 10px);
	}

	.flex-gap-lg .one-half {
		width: calc(50% - 20px);
	}
}

@media (min-width: 1300px) {
	/* anything you want to kick in at larger desktop and above can go here */
	.inner-wrapper {
		max-width: 90vw;
		/* this max-width can be edited to your fit your design. Check how your design will look on large screens by pressing CMMD- in your browser, and decide if and how you want to constrain the overall content width. */
	}
}