/* GLOBAL */

		html, body {
			color: #00414B;
			background-color: #fffff;
		}
		
		.uk-container {
			max-width: 1024px;
			position: relative;
		}
		
		.uk-container.uk-container-small {
			max-width: 900px;
			position: relative;
		}
		
		.uk-card-default {
			box-shadow: 0 10px 20px rgba(0,0,0,.2);
			//background-color: #DCE6E6;
		}
		
		.uk-card-default-solid {
			box-shadow: 15px 15px 0px 0px rgba(0, 0, 0) !important;
			color: black !important;
		}
		
		.uk-card-shadow-none {
			box-shadow: 0px 0px 0px 0px;
		}
		
		.footer-line {
			width: 100%;
			color: #235A64;
			border: 1px solid;
		}
		
		.uk-button-text {
			height: auto !important;
			line-height: auto !important;
		}
		
		.uk-text-muted {
			color: #6E9196 !important;
		}
		
		.content-container {
			border: 1px solid #d8d8d8;
			border-top: 4px solid #FFE900;
		}
		
		
/* 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;
		}
		
		.headline-hero-yellow {
			background-color: #FFE900;
			padding: 15px;
			color: black;
			font-size: 40px;
		}
		
		.headline-hero-black {
			background-color: black;
			padding: 15px;
			color: #FFE900;
			font-size: 40px;
		}
		
		.headline-hero-white {
			background-color: #FFE900;
			padding: 15px;
			color: black;
			font-size: 40px;
		}
		
		.headline-hero-yellow-shadow {
			-webkit-box-shadow: 15px 15px 0px 0px rgba(0,0,0);
			-moz-box-shadow: 15px 15px 0px 0px rgba(0,0,0);
			box-shadow: 15px 15px 0px 0px rgba(0,0,0);
		}
		
		.headline-hero-black-shadow {
			-webkit-box-shadow: -15px 15px 0px 0px rgba(255,204,51,1);
			-moz-box-shadow: -15px 15px 0px 0px rgba(255,204,51,1);
			box-shadow: -15px 15px 0px 0px rgba(255,204,51,1);
		}
		
		.headline-hero-black-shadow-white-text {
			-webkit-box-shadow: 15px 15px 0px 0px rgba(0,0,0);
			-moz-box-shadow: 15px 15px 0px 0px rgba(0,0,0);
			box-shadow: 15px 15px 0px 0px rgba(0,0,0);
		}
		
		.text-shadow {
			text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
		}	

/* TYPOGRAPHY */

		* {
			font-family: "Gotham", "Verdana", "Helvetica", "Arial", sans-serif !important;
		}
		
		body, p {
			font-size: 17px;
			font-weight: normal;
			line-height: 28px;
			color: #00414B;
		}
		
		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;
		}
		
		.h2-normalize {
			font-size: 24px;
		}
		
		h3 {	/* Headline */
			font-size: 18px;
			font-weight: normal;
			margin: 0 0 18px 0;
		}
		
		a { 
			color: #00414B;
			text-decoration: underline;
		}
		
		.headline-overlay {
			font-size: 168px;
			color: #FFE900 !important;
		}
		
		.hero {
			font-size: 52.8px;
			color: black;
		}
		
		.increase-size {
			font-size: 40px;
			color:black;
		}
		
		.increase-size-h1 {
			font-size: 48px;
			color: black;
		}
		
		.increase-size-h1-quote {
			font-size: 72px;
			color: black;
		}
		
		.h1-mobile {
			font-size: 64px;
		}
		
		.uk-text-meta-co {
			font-size: 14px;
			line-height: 23px;
			color: black;
		}
		
		.italic {
			font-style: italic;
		}
		
		.info {
			font-size: 14px;
		}
		
		.h3-mobile {
			font-size: 14px;
		}
		
		.p-increase {
			font-size: 22px;
		}
		
		.helper-text {
			font-size: 11px;
			line-height: 18px;
			color: #537D82;
		}
		
		.footer-size {
			font-size: 13px;
			line-height: 20px;
			color: #DCE6E6;
		}
		
		.meta-text {
			font-size: 13px;
		}
		

/* COLOURS */

		/* primary */
		
		.yellow 	{ color: #FFE900 }
		.petrol 	{ color: #00414b }
		.grey 		{ color: #808080 }
		.lightgrey	{ color: #E5E5E5 }
		.white		{ color: #FFFFFF }
		.white-link		{ color: #FFFFFF }
		.white-link:hover		{ color: #00414b }
		
		.black2				{ color: #000000 !important; text-decoration: none !important; }
		.black2:active		{ color: #ffffff !important; text-decoration: none !important; }
		.black2:hover		{ color: #ffffff !important; text-decoration: none !important; }
		
		.black3				{ color: #000000 !important; text-decoration: none !important; font-size: 14px !important; }
		.black3:hover 		{ color: #FFE900 !important; /*background-color: black !important;*/ }
		
		.black3:active 		{ color: #FFE900 !important; /*background-color: black !important;*/ }
		
		.black4 			{ color: #000000 !important; text-decoration: underline !important; }
		.black4:hover, .black4:active		{ color: #FFE900 !important; text-decoration: none !important; }
		
		.black5		{ color: #000000 !important; text-decoration: none !important; }
		.black5:hover		{ color: #FFE900 !important; text-decoration: none !important; }
	
		.bg-yellow 		{ background-color: #FFE900 }
		.bg-yellow-hover:hover 		{ background-color: #FFE900; transition: all 0.3s ease-in-out; }
		.bg-petrol 		{ background-color: #00414B }
		.bg-lightpetrol { background-color: #dce6e6 }
		.bg-grey 		{ background-color: #808080 }
		.bg-darkgrey 	{ background-color: #333333 }
		.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) }
		.gradient-grey-wave	{ background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 45%, #ffffff 100%) }
		
		.uk-light 	{ color: white }
		
		.framed { border: 1px solid #e5e5e5; }
		
		.gradient-yellow-section {
			background: #ffefbf; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #ffefbf 0%, #FFE900 89%); /* FF3.6-15 */
			background: -webkit-radial-gradient(center, ellipse cover, #ffefbf 0%,#FFE900 89%); /* Chrome10-25,Safari5.1-6 */
			background: radial-gradient(ellipse at center, #ffefbf 0%,#FFE900 89%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffefbf', endColorstr='#FFE900',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		} 
		
		.gradient-grey-section {
			background: #ffffff; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
			background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
			background: radial-gradient(ellipse at center, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		} 


/* INPUT ELEMENTS */

		.uk-button {
			transition: all 0.3s ease-in-out;
			border-radius: 28px;
			font-size: 17px;
			letter-spacing: 0;
			text-transform: none;
		}
		
		.uk-dotnav {
			color: #FFE900;		
		}
		
		.uk-dotnav .uk-active * {
			background-color: #00414b;
		}
		
		.uk-dotnav * * {
			width: 15px;
			height: 15px;
			border: 0px;
			background-color: #e5e5e5;
		}
				
		.uk-button-step {
			padding-left: 30px !important;
			padding-right: 30px !important;
		}
		
		.uk-button-nav {
			color: black;
			background-color: transparent;
			border: 2px solid black !important;
			padding-top: 10px !important;
			padding-bottom: 10px !important;
			padding-left: 30px !important;
			padding-right: 30px !important;
		}
		
		.uk-button-default, .uk-button-primary  {
			background-color: #FFE900;
			color: #00414b;
			border: none;
			height: 56px;
			line-height: 54px;
			font-weight: 600;
		}
		
		.uk-button-default:hover, .uk-button-default:active, .uk-button-default:focus, .uk-button-primary:hover, .uk-button-primary:active, .uk-button-primary:focus {
			background-color: #ffd619;
			color: #00414b;
			text-decoration: none;
			height: 56px;
			line-height: 54px;
			font-weight: 600;
		}
		
		.uk-button-secondary, .uk-modal .uk-button-primary {
			color: #00414b;
			background-color: transparent;
			border: 1px solid #00414b;
			padding-top: 1px;
			height: 56px;
			line-height: 54px;
			font-weight: 600;
		}
		
		.uk-button-secondary:hover, .uk-button-secondary:active, .uk-button-secondary:focus {
			color: #00414b;
			background-color: transparent;
			border: 2px solid #00414b;
			padding-top: 0px;
			height: 56px;
			line-height: 54px;
			font-weight: 600;
		}
		
		.uk-button-petrol, .uk-modal .uk-button-petrol {
			color: white;
			background-color: #00414b;
			padding-top: 1px;
			height: 56px;
			line-height: 54px;
			font-weight: 600;
		}
	
		.-inactive {
			color: #555555;
			background-color: #D8D8D8;
		}
		
		.uk-button-inactive:hover, .uk-button-inactive:active, .uk-button-inactive:focus {
			color: #555555;
			background-color: #D8D8D8;
		}
		
		input::placeholder {
			color: #537D82 !important;
		}
		
		input::placeholder:hover {
			color: #00333D !important;
		}
		
		.uk-input {
			border-color: #537D82;
			border-width: 0 0 1px 0;
			color: #537D82;
			padding: 0px;
		}
		
		.uk-input:hover {
			border-color: #00333D;
			border-width: 0 0 2px 0;
			color: #00333D;
			padding: 0px;
		}
		
		.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
			border-color: #FFE900;
			border-width: 0 0 2px 0;
		}
		
		.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
			background-color: #00414b;
			border-color: transparent;
		}
			
		/*.uk-checkbox:hover, .uk-checkbox:indeterminate, .uk-radio:hover {
			background-color: #00414b;
			border-color: transparent;
		}*/
			
		.uk-form-danger {
			background: rgba(240, 80, 110, 0.1);
		}
		
		.icon84 {
			width: 84px;
		}
		
		textarea::placeholder {
			color: #6E9196 !important;
		}
		

/* 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;
		}*/
		
		.uk-overlay-default {
			background-color: white !important;
		}
		
		


/*  HEADER  */

		.yellowbar {
			height: 20px;
			background: #FFE900;
			background-image: linear-gradient(to bottom, #FEDC55, #F8B700);
			font-size: .8rem;
		}
		
		#logo {
			max-width: 350px;
			margin-left: 140px;
		}
		
		.hero-coba {
			background-color: #00414B; 
			background-image: url('/ui/img/hero.jpg'); 
			background-position: center center; 
			background-size: cover; 
		}	

/* 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 {
				padding-right: 2rem;
				text-align: left;
			}
									
			.top-cor {
			margin-top: -50px !important;
			}
			
			.uk-button {
				font-size: 14px !important;
				width: 100%;
			}
			
			.uk-button-default {
				padding-left: 20px;
				padding-right: 20px;
			}
			
			.uk-button-step {
				padding-top: 15px;
				padding-bottom: 15px;
				padding-left: 20px !important;
				padding-right: 20px !important;
			}
			
			.legal-head {
				background-image: url("/img/yellow_legal_mob.png");
				background-size: contain;
				background-position: center top;
				background-repeat: no-repeat;
			}
			
			.clip-top-and-bottom {
				-webkit-clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
				clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);

			}
			
			.margin-tpp {
				margin-top: -40px;
			}
			
			.uk-margin-medium-top {
				margin-top: 20px !important;
			}
			
			.style1-1 {
				font-size: 32px !important;
				line-height: 40px !important;
			}
			
			.style1-2 {
				font-size: 27px !important;
				line-height: 36px !important;
			}
			
			.style1-3 {
				font-size: 32px !important;
				line-height: 40px !important;
			}
			
			.style1-4 {
				font-size: 18px !important;
				line-height: 28px !important;
			}
			
			.meta-text {
				font-size: 11px !important;
			}
			
			.logo {
				margin-left: 16px;
			}
			
			.hero-coba {
				background-color: #00414B; 
				background-position: right top; 
				background-size: cover; 
			}	
			
		}
		
/* MODAL */

		#envelope {
			position: absolute;
			top: 30px;
			left: -30px;
		}

.element-animation{
  animation: animationFrames linear 1s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames linear 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames linear 1s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 0%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames linear 1s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 0%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames linear 1s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 0%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(0px,10px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,10px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,10px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,10px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,10px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}