/* IE9- fixes */

$font-size: 15px;
$line-height: 22px;

@import 'natuive-setup';
@import 'theme-variables'; /* Rewrite base variables here; add theme CSS below this one in <head> */

.row {
	
	font-size: 0;
	text-align: left;

	> * {
		
		font-size: 16px; /* To do: replace by actual font size of column's row's parent */
		min-width: 20%; /* To do: support +33% */
		display: inline-block;
		padding: 0;
		margin: 0;
		border: none;
		color: #333;
		box-sizing: border-box;
		vertical-align: top;
		position: relative;
		word-wrap: break-word;
		max-width: 20%;
	
	}
	
	> *[class^=col] {
		
		max-width: none;
	
	}
	
	> .table-row {
		
		display: table;
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
		border-spacing: .5em;
		border-collapse: separate;
		font-size: inherit;
		margin-bottom: -.5em;
		padding: 0;
	
	}
	
	> .table-row > * {
		
		display: table-cell;
		padding: .5em;
		vertical-align: top;
		word-wrap: break-word;	
		
	}
	
	&.no-spacing > .table-row {
		
		border-collapse: collapse;
		
	}
		
	&.no-padding > .table-row > * {
		
		padding: 0;
		
	}

}
	
.col1 {
	
	width: 100%;
	max-width: 100%;

}

.col2 {
	
	width: 50%;

}

.col3 {
	
	width: 33.333%;

}

.col23 {
	
	width: 66.667%;
	
}

.col4 {
	
	width: 25%;

}

.col34 {

	width: 75%;	

}

.col5 {
	
	width: 20%;	
	
}

.col25 {

	width: 40%;

}

.col35 {

	width: 60%;

}

.col45 {

	width: 80%;

}

.align-right {
	
	text-align: right;
	
}

.align-left {
	
	text-align: left;
	
}

.align-center {
	
	text-align: center;

}

.align-middle, .row > .table-row > .align-middle {
	
	vertical-align: middle;

}

.align-bottom, .row > .table-row > .align-bottom {
	
	vertical-align: bottom;

}

.border-all {

	&.row > * {
		
		padding-right: 0;
	
	}
	
	&.row .row {
	
		margin-left: -$line-height-em/2;
		padding: $line-height-em/2 0;
	
	}
	
	&.row .row > * {
		
		padding-right: 0;
		box-sizing: border-box;
	
	}
	
	&.row .row > * > * {
		
		margin-left: 0;
		padding-right: 0;
	
	}

}

input {
	
	line-height: $line-height*2;

}

form {
	
	select {
		
		padding-right: 0;
		height: $line-height;
		margin-top: $line-height/2;
		
	
	}
	
	select, .file-input {
		
		background-image: none;
	
	}
	
	.file-input span {
		
		min-height: $line-height-em;
	
	}
	
	&#language-selector select {
		
		margin: 0;
		padding-left: 0;
		height: $line-height*2;
	
	}

	&.mast input[type=checkbox], &.mast input[type=radio] {
		
		float: left;
		width: auto;
	
	}

}

:root select { /* IE9 not IE8 */
	
	height: $line-height*2;
	margin-top: 0;

}

input[type=checkbox], input[type=radio], form.wide input[type=checkbox], form.wide input[type=radio] {
	
	margin-left: 0;
	float: none;
	position: static;
	display: inline-block;
	clear: left;
	margin-top: 1em;

}

:root input[type=checkbox], :root input[type=radio], :root form.wide input[type=checkbox], :root form.wide input[type=radio] {
	
	display: none;

}

input[type=file] {
	
	margin-left: -100%;
	height: 0;

}

input[type=submit] {
	
	padding: 0;
		
}

.checkbox-icon {
	
	margin-right: 1em;
// 	display: inline-block;
	opacity: 0;

}

:root .checkbox-icon {
	
	opacity: 1	;

}

.slider-nav {
	
	left: 1em;
	
}

.slider > *:after, .slider > *:before {

	display: none;	

}

.slider {
	
	overflow-x: scroll;

}
	
.vertical .slider-nav {
	
	top: 1em;

}

nav input[type=reset], nav input.trigger, nav input.trigger.burger {
	
	display: none;

}

nav.drop {

	li > input, ul ul {
		
		display: none;
	
	}
	
	li:hover > ul {
	
		display: block !important;
	
	}
	
}

.header-and-banner.viewport {
	
	overflow: hidden;

}

.tool:hover .tip {
	
	opacity: 1;
	visibility: visible;
	top: 100%;
	
}

.fold {

	> .content {
	
	    max-height: none;
	
	}
	
	input.trigger {
		
		display: none;
		
	}
	
	&.mobile {
		
		overflow: visible;
		
	}	

}
