@import 'natuive-setup';
@import 'theme-variables';

body {

	font-family: Helvetica Neue, Arial, sans-serif;
	color: #555;
	background: #fff;

}

li > h4 {
	
	margin-top: -1px;

}

h1, h2, h3, h4, h5 {
	
	font-weight: 500;
	color: #488e89;

}

b {
	
	font-weight: bold;

}

a[href] {

	color: #333;

}

	a[href]:hover, input[type=submit]:hover, a.button[href]:hover, button:hover {

		color: #ee8822;

	}

nav a {
	
	color: #666;
	text-transform: uppercase;
	text-decoration: none;

}

	nav a.active[href] {
	
		color: #ee8822;
	
	}
	
	nav.sub a {
	
		color: #727272;
		text-transform: none;
	
	}

	nav.sub li:not(:first-child):before {

		content: '';
		border-left: 1px solid #ddd;
		padding-right: .6em;

	}
	
	nav a[href]:hover {
		
		color: #ee8822;
		
	}

form#language-selector select {

	padding-left: 2em;
	background: url(../images/globe.svg) no-repeat center left;
	background-position: .5em center;
	background-size: auto 66%;
	height: $line-height;

}

form .select {

	background: #eee url(../images/select-arrow.svg) no-repeat;
	background-position: 97% 50%;
	background-position: calc(100% - .7em) 50%;
	background-size: auto 50%;

}

header form .select {
	
	height: $line-height;
	
}

.button, input[type=submit], button[type=submit], button[type=reset], button, a.button[href] {

	font-weight: bold;
	background: rgb(0,221,240);
	color: #fff;

}

	.button:active, input[type=submit]:active {

		background: #ccc;
		
	}
	
	.button.big:after {
	
		content: '►';
		padding-left: .3em;
	
	}

	.button.big, input[type=submit], button {

		font-size: 1.2em;
		color: #fff;
		background: rgb(0,221,240);

	}
	
	.button.big:active, input[type=submit]:active {

		background: rgb(0,121,140);

	}

	.button.yellow {
		
		color: #862165;
		background: rgb(251,222,4);
		
	}
	
	.button.yellow:active {
		
		background: rgb(151,122,0);
		
	}
	/* Top */
	
	header .align-right {
		
		text-align: right;
		vertical-align: top;
		
	}
		
		header img {
			
			margin: 0;
			
		}
		
/*
		header form {
			
			display: inline-block;
			font-size: .4em;
			padding: 0;
	
		}
		
		header form select {
			
			height: $line-height;
	
		}
*/
		
		header img.logo {
			
			height: 40px;
	
		}
		
		header .row {
			
			padding: 0;
			
		}
	
/* Head */

header h1, header p {

	color: #333;

}

/* Etc */

.social {
	
	text-align: right;
	
}

.social a + a {
	
	margin-left: 1em;

}

.checkbox-icon {

	background: rgba(0,221,240,1);

}

@media screen and (max-width: 640px) {
	
	nav.sub li:not(:first-child):before {
		
		content: none;

	}

}
