@import 'forms.css';
@import 'navigation.css';
@import 'theme.css';
@import 'debug.css';
@import 'button.css';

.d-none {
	display: none;
}

.f-container {
	display: flex;
}

.f {
	display: flex;
}

.f-container-min-h {
	min-height: 600px;
}

.f-item {
	flex-grow: 1;
}

.f-item-2 {
	flex-grow: 2;
}

.f-align-center {
	align-self: center;
}

.f-justify-center {
	display: flex;
	justify-content: center;
}

.f-align-right {
	display: flex;
	justify-content: flex-end;
}

.f-img-100 {
	max-width: 100%;
}

.f-img-60 {
	max-width: 60%;
}

/* Advanced construction */
.f-container-row {
	display: flex;
	flex-flow: row wrap;
}

.f-col {
	flex-direction: column;
}

.f-row {
	flex-direction: row;
}

.f-container-row>* {
	flex: 1 100%;
}

.f-side {
	flex: 1 0 0;
}

.f-order-sm-1 {
	/*order: 0;	*/
}

.f-order-sm-2 {
   /*order: 0;	*/
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {

	.f-container {
		flex-wrap: wrap;
	}

	.flex-item-right{
		flex: 100%;
	}

	.flex-item-left {
		flex: 100%;
	}

	.f-order-sm-1 {
		order: 1;	
   	}
   
   	.f-order-sm-2 {
	   order: 2;	
   	}
}

@media all and (min-width: 800px) {
	.f-main {
		flex: 3 0px;
	}

	.f-side-left {
		order: 1;
	}

	.f-main {
		order: 2;
	}

	.f-side-right {
		order: 3;
	}

	.f-item-left {
		flex: 50%;
	}
	
	.f-item-right {
		flex: 50%;
	}
}

@media all and (min-width: 600px) {
	.f-side {
		flex: 1 0 0;
	}
}