/* Flex Grid */
/* Responsive Grid System: Start */
.flex-grid{
	display: flex;
	flex-wrap: wrap;
}

.flex-grid > * { flex-grow: 1; }

/* For grids that doesn't change through screens */
/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
/*     |     |     |     |     |     | 7:8 /       */
/*     |     |     |     |     | 5:6 |     /       */
/*     |     |     |     | 4:5 |     |     /  8:10 */
/*     |     |     | 3:4 |     |     | 6:8 /       */
/*     |     |     | 3:4 |     |     |     /  7:10 */
/*     |     | 2:3 |     |     | 4:6 |     /       */
/*     |     |     |     |     |     | 5:8 /       */
/*     |     |     |     | 3:5 |     |     /  6:10 */
/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
/*     |     |     |     | 2:5 |     |     /  4:10 */
/*     |     |     |     |     |     | 3:8 /       */
/*     |     | 1:3 |     |     | 2:6 |     /       */
/*     |     |     |     |     |     |     /  3:10 */
/*     |     |     | 1:4 |     |     | 2:8 /       */
/*     |     |     |     | 1:5 |     |     /  2:10 */
/*     |     |     |     |     | 1:6 |     /       */
/*     |     |     |     |     |     | 1:8 /       */
/*     |     |     |     |     |     |     /  1:10 */

.f-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
.f-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
.f-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
.f-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
.f-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
.f-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
.f-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
.f-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
.f-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
.f-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
.f-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
.f-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
.f-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
.f-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
.f-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
.f-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
.f-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
.f-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
.f-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
.f-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */



@media (max-width: 540px) {
	.f0-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f0-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f0-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f0-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f0-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f0-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f0-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f0-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f0-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f0-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f0-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f0-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f0-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f0-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f0-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f0-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f0-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f0-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f0-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f0-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}


@media (min-width: 541px) and (max-width: 810px) {
	.f1-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f1-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f1-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f1-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f1-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f1-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f1-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f1-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f1-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f1-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f1-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f1-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f1-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f1-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f1-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f1-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f1-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f1-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f1-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f1-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}

@media (min-width: 811px) and (max-width: 1080px) {
	.f2-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f2-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f2-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f2-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f2-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f2-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f2-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f2-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f2-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f2-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f2-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f2-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f2-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f2-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f2-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f2-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f2-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f2-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f2-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f2-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}


@media (min-width: 1081px) {
	.f3-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f3-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f3-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f3-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f3-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f3-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f3-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     | 6:8 /  7:10 */
    .f3-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f3-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f3-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f3-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f3-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f3-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f3-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f3-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     | 1:8 /  3:10 */
	.f3-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f3-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f3-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f3-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f3-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     | 1:8 /  1:10 */
}

.f-expand{ max-width: unset; }

.f-to-right{ justify-self: flex-end; }
.f-to-left{ justify-self: flex-start; }
.flex-nowrap{flex-wrap: nowrap;}

.flex{ display: flex; }
.flex-between{ justify-content: space-between; }
.flex-space-around{ justify-content: space-around; }
.flex-v-center{ align-items: center; }
.flex-v-start{ align-items: flex-start; }
.flex-v-end{ align-items: flex-end; }
.flex-h-center{ justify-content: center; }
.flex-h-between{ justify-content: space-between; }
.flex-h-start{ justify-content: flex-start; }
.flex-h-end{ justify-content: flex-end; }
.flex-grow{ flex-grow: 1;}
.flex-wrap{ flex-wrap: wrap;}