:root {
	--form-font-family: 'Open Sans',sans-serif;
	--form-font-size: 14px;
	
	--form-label-display: none;
	
	/* Input */
	--form-input-bg: rgba(0,0,0,0.03);
	--form-input-border: none;
	--form-input-border-bottom: 1px solid #000;
	--form-input-border-radius: 0;
	--form-input-padding: 0 10px;
	--form-input-height: 34px;
	--form-input-mb: 10px;
	
	/* Textarea */
	--form-textarea-padding: 10px;
	--form-textarea-margin: 10px;
	--form-textarea-mt: var(--form-textarea-margin);
	--form-textarea-mb: var(--form-textarea-margin);
	
	/* Submit button */
	--form-submit-bg-color: transparent;
	--form-submit-color: #777;
	--form-submit-font-size: 16px;
	--form-submit-font-weight: bold;
	--form-submit-text-transform: uppercase;
	--form-submit-pl: 0px;
	--form-submit-ml: 0px;
	
	
	--grid-gutter-width: 20px;
	--grid-gutter-width-half: calc( var(--grid-gutter-width) / 2);
	--p-default: var(--grid-gutter-width-half);
	--m-default: var(--grid-gutter-width-half);
	
	--col-4-width: 33.333333%;
	--col-5-width: 41.66666667%;
	--col-6-width: 50%;
	--col-8-width: 66.666667%;
}

/* Forms */
[class*="frame-type-form"] .form-group label {
	display: var(--form-label-display);
}

[class*="frame-type-form"] .form-group input,
[class*="frame-type-form"] .form-group textarea
{
	border: var(--form-input-border);
	border-bottom: var(--form-input-border-bottom);
	border-radius: var(--form-input-border-radius);
	
	background: var(--form-input-bg);
	
	font-family: var(--form-font-family);
	font-size: var(--form-font-size);
}

[class*="frame-type-form"] .form-group input {
	width: 100%;
	margin-bottom: var(--form-input-mb);
	height: var(--form-input-height);
	padding: var(--form-input-padding);
}

[class*="frame-type-form"] .form-group textarea {
	width: 100%;
	padding: var(--form-textarea-padding);
	margin-top: var(--form-textarea-mt);
	margin-bottom: var(--form-textarea-mb);
	resize: vertical;
}

[class*="frame-type-form"] .form-navigation .btn-group {
	float: none;
}

[class*="frame-type-form"] .form-navigation [type="submit"] {
    width: auto;
    background-color: var(--form-submit-bg-color);
    color: var(--form-submit-color);
	font-size: var(--form-submit-font-size);
	font-weight: var(--form-submit-font-weight);
	text-transform: var(--form-submit-text-transform);
	padding-left: var(--form-submit-pl);
	margin-left: var(--form-submit-ml);
}

[class*="frame-type-form"] .row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: calc( var(--grid-gutter-width) / -2);
	margin-left: calc( var(--grid-gutter-width) / -2);
}
[class*="frame-type-form"] .row { 
	flex-wrap: nowrap;
}

.col {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}

.col,
[class*="col-"] 
{
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: var(--p-default);
	padding-left: var(--p-default);
}

.col-5 {
	-ms-flex: 0 0 var(--col-5-width);
	flex: 0 0 var(--col-5-width);
	max-width: var(--col-5-width);
}
.col-6 {
	-ms-flex: 0 0 var(--col-6-width);
	flex: 0 0 var(--col-6-width);
	max-width: var(--col-6-width);
}
.col-6 {
	-ms-flex: 0 0 var(--col-8-width);
	flex: 0 0 var(--col-8-width);
	max-width: var(--col-8-width);
}

/* sm (up) */
@media (min-width: 576px) {
	[class*="col-sm-"] {
		-webkit-box-flex: 0;
	}
	.col-sm-4 {
		-ms-flex: 0 0 var(--col-4-width);
		flex: 0 0 var(--col-4-width);
		max-width: var(--col-4-width);
	}
	.col-sm-5 {
		-ms-flex: 0 0 var(--col-5-width);
		flex: 0 0 var(--col-5-width);
		max-width: var(--col-5-width);
	}
	.col-sm-6 {
		-ms-flex: 0 0 var(--col-6-width);
		flex: 0 0 var(--col-6-width);
		max-width: var(--col-6-width);
	}
	.col-sm-8 {
		-ms-flex: 0 0 var(--col-8-width);
		flex: 0 0 var(--col-8-width);
		max-width: var(--col-8-width);
	}
	
}

/* md (up) */
@media (min-width: 768px) {
	[class*="col-md-"] {
		-webkit-box-flex: 0;
	}
	.col-sm-4 {
		-ms-flex: 0 0 var(--col-4-width);
		flex: 0 0 var(--col-4-width);
		max-width: var(--col-4-width);
	}
	.col-sm-5 {
		-ms-flex: 0 0 var(--col-5-width);
		flex: 0 0 var(--col-5-width);
		max-width: var(--col-5-width);
	}
	.col-sm-6 {
		-ms-flex: 0 0 var(--col-6-width);
		flex: 0 0 var(--col-6-width);
		max-width: var(--col-6-width);
	}
	.col-sm-8 {
		-ms-flex: 0 0 var(--col-8-width);
		flex: 0 0 var(--col-8-width);
		max-width: var(--col-8-width);
	}
}

/* fix padding and margin (required because website doesnt use bootstrap for the rest of the website) */
.grid-col [class*="frame-type-form"] .row {
	margin-right: 0px;
    margin-left: 0px;
}
.grid-col [class*="frame-type-form"] .row [class*="col-"]:first-child {
	padding-left: 0px;
}
.grid-col [class*="frame-type-form"] .row [class*="col-"]:last-child {
	padding-right: 0px;
}