/** ------------------------------------------------------------------- **/
/** ///////////////////// GRID, COLUMNS, AND ROWS ///////////////////// **/
/** ------------------------------------------------------------------- **/

/* BASIC FRAMEWORK */
* {
    box-sizing: border-box;
}

.flex-grid {
  	display: flex;
  	justify-content: flex-start;
  	align-items: stretch;
  	width: 100%;
	height: auto;
	transition: height 0.66s ease-out;
	min-height: 8px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	min-width: 0;
} 

.row {
  	flex-direction: row;
	/*background: blue;*/
}

.col {
  	flex-direction: column;
	/*background: pink;*/
}

.item {
    flex: 1 auto;
    flex-grow: inherit;
  	min-width: 0; /* Prevents overflow */
}

/* WIDTHS */

.width-fit-content {
	max-width: fit-content;
}
.width-max-content {
	width: max-content;
}
.width-max {
    max-width: 1440px;
    margin: 0 auto;
}
.width-100 {
	width: 100%;
}
.width-30 {
	width: 30%;
}

/* ALIGNMENT */
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.align-left {
  	text-align: left;
	align-items: flex-start;
}
.align-right {
	justify-content: flex-end;
}
.align-center {
  	text-align: center;
	justify-content: center !important;
}
.align-vert-center {
  	align-items: center;
}
.align-top {
	justify-content: flex-start;
}
.max-content { /* add this class to the buttons wrapper to keep length of the button */
  	width: max-content;
}
.max-width {
  	max-width: 1440px;
	margin: 0 auto;
}
.align-img-bottom {
  	align-self: end;
}
.align-img-center {
  	align-self: center;
  	margin: 0 auto;
}

/* mobile */

@media (max-width: 768px) {
	.row {
		flex-direction: column;
	}
}