/* GLOBAL */

html, body {
	color: black;
}

.uk-container {
	max-width: 1024px;
	position: relative;
	padding: 0;
}

.uk-card-default {
	box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}






/* FONTS */

		@font-face {
			font-family: "Gotham";
			src: url("../fonts/gotham-4r.eot");
			src: url("../fonts/gotham-4r.eot?#iefix") format("embedded-opentype"),
				 url("../fonts/gotham-4r.woff") format("woff");
			font-weight: 400;
			font-style: normal;
		}
		
		@font-face {
			font-family: "Gotham";
			src: url("../fonts/gotham-7r.woff") format("woff");
			font-weight: 700;
			font-style: bold;
		}






/* TYPOGRAPHY */

		* {
			font-family: "Gotham", "Verdana", "Helvetica", "Arial", sans-serif;
		}
		
		body, p {
			font-size: 14px;
			font-weight: normal;
			line-height: 150%;
		}
		
		h1, h2, h3, h4, h5 {
			font-family: "Gotham", "Arial", "Helvetica", sans-serif;
		}
		
		h2 {	/* Headline */
			font-size: 24px;
			font-weight: bold;
			margin: 0 0 18px 0;
		}
		
		h3 {	/* Headline */
			font-size: 18px;
			font-weight: normal;
			margin: 0 0 18px 0;
		}

		.tick li {
			list-style-type: none;
		}
		
		.tick li:before {
		    font-family: 'icomoon';
			font-size: 1.35rem;
			content: '\e662';
			margin: 0 8px 0 -30px;
			top: 5px;
			position: relative;
		}





/* COLOURS */

		/* primary */
		
		.yellow 	{ color: #FFCC33 }
		.grey 		{ color: #808080 }
		.lightgrey	{ color: #E5E5E5 }
		
		.bg-yellow 		{ background-color: #FFCC33 }
		.bg-grey 		{ background-color: #808080 }
		.bg-lightgrey	{ background-color: #E5E5E5 }
		.bg-white		{ background-color: #FFFFFF }
		
		.blue		{ color: #002395 }
		.red		{ color: #d0103a }
		.green		{ color: #008542 }
		
		.lightblue	{ color: #00a9e0 }
		.lightred	{ color: #ec4371 }
		.lightgreen	{ color: #69be28 }
		
		.gradient-yellow	{ background-image: linear-gradient(to bottom, #FEDC55, #F8B700) }
		.gradient-grey		{ background-image: linear-gradient(to bottom, #808080, #555555) }
		.gradient-lightgrey		{ background-image: linear-gradient(to bottom, #F0F0F0, #D8D8D8) }
		
		.framed	{ border: 1px solid #E5E5E5; }
		
		.uk-light 	{ color: white }






/* INPUT ELEMENTS */

		.uk-button {
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			text-transform: none;
			text-align: center;
			color: #555555;
			background-color: #FFCC33;
			background-image: linear-gradient(to bottom, #FEDC55, #F8B700);
			box-shadow: 0 1px 2px 0 #949494;
			border: none;
			border-radius: 3px;
			display: inline-block;
			padding: 3px 24px;
			transition: all 0.3s ease-in-out;
		}
		
		.uk-button:hover, .uk-button:active, .uk-button:focus {
			color: #555555;
			background-image: linear-gradient(to bottom, #F8B700, #FEDC55);
			box-shadow: 0 1px 2px 0 #949494;
			box-shadow: 0 1px 2px 0 inset;
			text-decoration: none;
		}
		
		.uk-button-secondary {
			color: white;
			background-color: #808080;
			background-image: linear-gradient(to bottom, #808080, #555555);
		}
		
		.uk-button-secondary:hover, .uk-button-secondary:active, .uk-button-secondary:focus {
			color: white;
			background-color: #808080;
			background-image: linear-gradient(to bottom, #555555, #808080);
		}
		
		.uk-button-inactive {
			color: #555555;
			background-color: #D8D8D8;
			background-image: linear-gradient(to bottom, #F0F0F0, #D8D8D8);
		}
		
		.uk-button-inactive:hover, .uk-button-inactive:active, .uk-button-inactive:focus {
			color: #555555;
			background-color: #D8D8D8;
			background-image: linear-gradient(to bottom, #D8D8D8, #F0F0F0);
		}
		
		.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
			border-color: #FFCC33;
		}





/* UI ELEMENTS */

		.uk-tooltip {
			color: #434341;
			background-color: #FEEA94;
			padding: .8rem;
		}
		
		.uk-tooltip:before {
			content: "";
		    position: absolute;
		    top: 35%;
		    margin-top: -7px; 
		    left: -10px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 10px 5px 0;
			border-color: transparent #feeb94 transparent transparent;
		}






/*  HEADER  */


		.yellowbar {
			height: 20px;
			background: #FFCC33;
			background-image: linear-gradient(to bottom, #FEDC55, #F8B700);
			font-size: .8rem;
		}
		
		#header {
			background-image: url(../images/hero.jpg);
			position: relative;
		}
		





/* FOOTER */

		.footer {
			font-size: 0.7rem;
			background: #e5e5e5;
			box-shadow: inset 0 5px 8px -5px silver;
		}






/* ADD RESPONSIVE BEHAVIOUR */

		@media screen and (max-width: 1024px) {
			
			#logo {
				margin-right: 1rem;
			}
			
			.uk-container {
				margin: 0 20px;
			}
			
		}