html{
			/* prevent iphone landscape zoom */
			-webkit-text-size-adjust: 100%;
		}
		body{
			background:#FFF;
			margin:0;
			font:14px "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
			color:#222;
		}
		
		/* no IE image borders and link colors */
		a img {
			border: none;
		}
		
		a:link {
			color:#58BAF1;
			text-decoration:underline;
		}
		a:visited {
			color:#58BAF1;
			text-decoration:underline;
		}
		a:hover, a:active, a:focus {
			color:#58BAF1;
			text-decoration:underline;
		}

		/* heading styles */
		h1{
			font:bold 17px "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
			margin:0 0 10px 0;
		}

		h2{
			font:bold 15px "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
			margin:0 0 10px 0;
		}
		
		/* no overlay whole screen div for mobile menu animation */
		#whole{
			overflow:hidden;
			width:100%;
		}
		
		/* this will darken the screen when you open the login or register forms */
		#black{
			position: fixed;
			width:0px;
			height:100%;
			background: #000;
			z-index: 10;
			opacity:0;
		}
		
		/* log and register forms */
		.top_form_login, .top_form_register{
			background: rgba(0,0,0,0.8);
			position: fixed;
			top:-955px;
			width:280px;
			padding:10px 55px 30px 55px;
			border-radius: 7px;
			z-index: 20;
			text-align: center;
			float: right;
		}
		
		/* log and register forms */
		#form_title_login, #form_title_register{
			margin:15px 0 15px 0;
			height:22px;
			background: url(../img/form_icon_login.png) no-repeat center left;
			background-size: 22px 22px;
			color: #FFF;
			font-size: 17px;
			font-weight: bold;
			line-height: 22px;
		}
		#form_title_register{
			background: url(../img/form_icon_register.png) no-repeat center left;
			background-size: 22px 22px;
		}
		
		/* bg holds all the sliding backgrounds */
		#bg{
			margin-top:50px;
		}
		
		
		
		header{
			top:0;
			position:fixed;
			width:100%;
			height:50px;
			background:#0A6CA1;
			display:block;
			z-index: 3;
		}
		
		
		
		/* drop menu elements */
		#drop{
			display: none;
			margin-top:50px;
			position:fixed;
			background:#0A6CA1;
			z-index:7;
		}
		.drop_btn{
			color: #FFF;
			padding:10px 12px 10px 12px;
			cursor: pointer;
			border-top: 1px solid #1983BB;
		}
		.drop_btn:hover{
			color: #58BAF1;
		}
		
		
		
		/* web menu buttons */
		.btn{
			float: left;
			height: 50px;
			line-height: 50px;
			color: #FFF;
			padding:0 12px 0 12px;
			cursor: pointer;
		}
		.btn:hover{
			color: #58BAF1;
		}

		/* one menu button is highlighted, bold and has no hover */
		#btn1{
			color: #58BAF1;
			font-weight: bold;
		}
		
		#btn1:hover{
			color: #58BAF1;
		}
		
		/* sign up and login web buttons */
		#btn_login_web{
			float: right;
			height: 50px;
			line-height: 50px;
			background: #58BAF1;
			color: #006BA3;
			padding:0 30px 0 30px;
			cursor: pointer;
		}
		
		#btn_signup_web{
			float: right;
			height: 50px;
			line-height: 50px;
			background: #1983BB;
			color: #FFF;
			padding:0 27px 0 27px;
			cursor: pointer;
		}
		
		/* logo web */
		#logo, #logo_nav{
			float:left;
			width:112px;
			height:26px;
			margin:12px 0 0 30px;
			background:url(../img/logo_2x.png) no-repeat;
			background-size:112px 26px;
			cursor:pointer;
		}
		
		/* main area */
		main{
			display:block;
			width:100%;
		}

		/* text content area */
		.article{
			display:block;
		}
			
		/* navigation area */
		nav{
			position:absolute;
			top:0;
			margin-left:-270px;
			background:#58BAF1;
			width:270px;
			height:200px;
			display:block;
		}
		
		/* footer */
		footer{
			background:#0C273B;
			width:100%;
			height:330px;
			text-align: center;
		}
		
		/* big receivur logo in the footer */
		#footer_logo{
			display: inline-block;
			background:url(../img/logo_big_2x.png) no-repeat;
			width:239px;
			height:35px;
			margin-top:65px;
			background-size: 239px 35px;
			cursor: pointer;
		}
		
		/* social media links */
		#social_tw, #social_fb, #social_insta{
			display: inline-block;
			width: 46px;
			height: 46px;
			background: url(../img/social_2x.png);
			background-size: 200px 100px;
			margin:30px 20px 20px 10px;
			cursor: pointer;
		}
		#social_fb{ background-position: -50px 0px; }
		#social_insta{ background-position: -100px 0px; }		
		
		#social_tw:hover{ background-position: 0px -50px; }
		#social_fb:hover{ background-position: -50px -50px; }
		#social_insta:hover{ background-position: -100px -50px; }
		
		/* app buttons - no hover effect */
		.app_apple, .app_droid, .a_phone, .a_online{
			display: inline-block;
			width:164px;
			height:56px;
			margin: 10px;
			background: url(../img/apps_apple_2x.png);
			background-size: 164px 56px;
			cursor: pointer;
		}
		.app_droid{
			background: url(../img/apps_droid_2x.png);
			background-size: 164px 56px;
		}
		.a_phone{
			background: url(../img/a_phone_2x.png);
			background-size: 164px 56px;
		}
		.a_online{
			background: url(../img/a_online_2x.png);
			background-size: 164px 56px;
		}
		
		/* second slimmer footer */
		#footer2{
			/* Was lazy here (no jquery on the margin) and if you change other heights in the footer, you have to adjust the top margin */
			margin-top:45px;
			background: #006BA3;
			height:50px;
			text-align: left;
			padding:0 30px 0 30px;
		}
		
		/* footer links */
		.footer_links{
			float:right;
			font-size: 12px;
			height:50px;
			line-height:50px;
			color: #FFF;
			cursor: pointer;
			margin-left:20px;
		}
		
		/* additional */
		.clear{
			clear:both;
		}
		
		

		
		/***********************/
		/* screen under 969 px */
		/***********************/
		@media (max-width: 969px) {
			
			body{
				font:13px "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
			}

				/* main sections less side to side padding */
			.article{
				display:block;
			}
			
			/* logo web */
			#logo{
				float:right;
				margin-right:10px;
			}
			
			#logo_nav{
				margin-left:10px;
				height:37px;
			}

			/* hide buttons in the header */
			.btn, #btn_login_web, #btn_signup_web{
				display: none;
			}
			
			/* mobile menu buttons */
			.btn_mobile{
				background: #76C7F6;
				height: 42px;
				line-height: 42px;
				padding-left:10px;
				margin-top:1px;
				color: #FFF;
				cursor: pointer;
			}
			
			#btn_mobile_signup, #btn_mobile_login{
				float:left;
				background: #1983BB;
				height: 42px;
				width:125px;
				line-height: 42px;
				padding-left:10px;
				font-size:12px;
				color: #FFF;
				cursor: pointer;
				font-weight: bold;
			}
			
			/* sign up and login web buttons */
			#btn_mobile_login{
				background: #3DAAE6;
				color:#FFF;
			}
			
			/* one menu button is highlighted, bold and has no hover */
			#btn1_mobile{
				color: #0A6CA1;
				font-weight: bold;
			}
			
			/* alter drop button style for mobile */
			.drop_btn{
				font-size: 12px;
				background: #76C7F6;
				color: #FFF;
				padding:0px 0 15px 20px;
				cursor: pointer;
				border-top: none;
			}
			.drop_btn:hover{
				color: #FFF;
			}
			
			
			
			/* menu button */
			#mnu{
				float:left;
				width:50px;
				height:50px;
				background:url(../img/mnu_2x.png);
				background-size:50px 50px;
				cursor:pointer;
			}
						
			/* mobile app buttons */
			.app_apple, .app_droid, .a_phone, .a_online{
				width:116px;
				height:40px;
				background-size: 116px 40px;
			}
			
			/* mobile footer */
			#footer2{
				margin-top:42px;
				padding:0 10px 0 10px;
			}

			/* footer links */
			.footer_links{
				font-size: 11px;
				margin-left:10px;
			}
		}
		
		/**************************************************/
		/* screen under 510 px ONLY for the slim web-forms*/
		/**************************************************/
		@media (max-width: 510px) {
			/* log and register forms */
			.top_form_login, .top_form_register{
				width:280px;
			}
		}
		
		
		
		/****************************/
		/* landcape and moving cars */
		/****************************/
		#ftr_main .houses{
			overflow: hidden;
		}	

		#ftr_main {
			position: relative;
			margin-top: 0;
			background: #0C273B;
			padding: 98px 0 0;
			font-size: 0;
			text-align: center
		}

		#ftr_main .land, #ftr_main .houses, #ftr_main .cars, #ftr_main .sky {
			position: absolute;
			width: 100%
		}

		#ftr_main .land {
			top: 400px;
			left: 0;
			height: 75px;
			background:#0C273B;
		}

		#ftr_main .houses {
			top: 0;
			height: 520px;
			background: url(../img/ftr_houses.png) center top repeat-x;
		}

		
		/* car elements */
		#ftr_main .cars {
			top: 353px;
			height: 75px
		}
		
		#ftr_main .cars2 {
			top: 363px;
		}
		
		#ftr_main .cars3 {
			top: 382px;
		}

		#ftr_main .cars1 {
			background: url(../img/ftr_cars.png);
			-webkit-animation: ftr_cars-right 45s linear infinite;
			animation: ftr_cars-right 45s linear infinite
		}

		#ftr_main .cars2 {
			background: url(../img/ftr_cars2.png);
			-webkit-animation: ftr_cars-right 25s linear infinite;
			animation: ftr_cars-right 25s linear infinite
		}

		#ftr_main .cars3 {
			background: url(../img/ftr_cars3.png);
			-webkit-animation: ftr_cars-left 15s linear infinite;
			animation: ftr_cars-left 15s linear infinite
		}
		
		
		
		/* sky elements */
		#ftr_main .sky {
			top: 0;
			height: 150px
		}
		
		#ftr_main .sky2 {
			top: 0;
			height: 150px
		}

		#ftr_main .sky1 {
			background: url(../img/ftr_sky.png);
			-webkit-animation: ftr_cars-right 450s linear infinite;
			animation: ftr_cars-right 450s linear infinite
		}

		#ftr_main .sky2 {
			background: url(../img/ftr_sky2.png);
			-webkit-animation: ftr_cars-right 250s linear infinite;
			animation: ftr_cars-right 250s linear infinite
		}
		
		
		
		/* animate cars */
		@-webkit-keyframes ftr_cars-right {
			0% {
				background-position: 0 0
			}

			100% {
				background-position: 1800px 0
			}
		}

		@keyframes ftr_cars-right {
			0% {
				background-position: 0 0
			}

			100% {
				background-position: 1800px 0
			}
		}

		@-webkit-keyframes ftr_cars-left {
			0% {
				background-position: 1800px 0
			}

			100% {
				background-position: 0 0
			}
		}

		@keyframes ftr_cars-left {
			0% {
				background-position: 1800px 0
			}

			100% {
				background-position: 0 0
			}
		}
		
		
		
		/* animate sky */
		@-webkit-keyframes ftr_sky-left {
			0% {
				background-position: 1800px 0
			}

			100% {
				background-position: 0 0
			}
		}

		@keyframes ftr_sky-left {
			0% {
				background-position: 1800px 0
			}

			100% {
				background-position: 0 0
			}
		}

		
		
		/* when we have a high res screen */
		@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:145dpi) {
			#ftr_main .houses {
				background: url(../img/ftr_houses_2x.png) center top repeat-x;
				background-size: 1414px auto
			}

			
			
			/* car elements */
			#ftr_main .cars1 {
				background: url(../img/ftr_cars_2x.png) 0 0 / 1800px auto
			}

			#ftr_main .cars2 {
				background: url(../img/ftr_cars2_2x.png) 0 0 / 1800px auto
			}

			#ftr_main .cars3 {
				background: url(../img/ftr_cars3_2x.png) 0 0 / 1800px auto
			}
			
			
			
			/* sky elements */
			#ftr_main .sky1 {
				background: url(../img/ftr_sky_2x.png) 0 0 / 1800px auto
			}

			#ftr_main .sky2 {
				background: url(../img/ftr_sky2_2x.png) 0 0 / 1800px auto
			}
		}



	
		


		/* form elements */
		.form-group{
			display: inline-block;
			float:right;
		}
		
		input[type="text"], input[type="password"], textarea, textarea.form-control {
			height: 42px;
			width: 94%;
			margin: 0 0 10px 0;
			padding: 0 3% 0 3%;
			vertical-align: middle;
			background: #fff;
			border: 0px solid #fff;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			font-weight: 300;
			line-height: 50px;
			color: #888;
			-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
			-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
			-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
		}

		textarea, textarea.form-control {
			padding-top: 10px;
			padding-bottom: 10px;
			line-height: 22px;
			height: 100px;
		}

		input[type="text"]:focus, input[type="password"]:focus, textarea:focus, textarea.form-control:focus {
			outline: 0;
			background: #fff;
			border: 0px solid #fff;
			-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
		}

		input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, 
		textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }

		input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, 
		textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }

		input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, 
		textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }



		button.bt1 {
			display: inline-block;
			height: 42px;
			width: 50%;
			margin: 0;
			padding: 0;
			vertical-align: middle;
			background: #19b9e7;
			border: 0;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			font-weight: 300;
			line-height: 42px;
			color: #fff;
			-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
			text-shadow: none;
			-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
			-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
		}

		button.bt1:hover { opacity: 0.75; color: #fff; }
		button.bt1:active { outline: 0; opacity: 0.75; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
		button.bt1:focus { outline: 0; opacity: 0.75; background: #53B9F3; color: #fff; }
		button.bt1:active:focus, button.bt1.active:focus { outline: 0; opacity: 0.75; background: #53B9F3; color: #fff; }

		

		/* dropdowns */
		select{
			height: 42px;
			width: 100%;
			margin: 0 0 10px 0;
			padding: 0 3% 0 3%;
			vertical-align: middle;
			background: #F8F7F7 url(../img/select_arrow.png) no-repeat center right;
			background-size:50px 50px;
			border: 0px solid #F8F7F7;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			font-weight: 300;
			line-height: 50px;
			color: #000;
			-moz-appearance: none;
			appearance: none;
			-webkit-appearance:none;
			-webkit-border-radius:0px;
			
			-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
			-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
			-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
		}
		select:hover{
			background:#D3D3D3 url(../img/select_arrow.png) no-repeat center right;
			background-size:50px 50px;
			color:#201F1F;
		}
		select::-ms-expand {
			display: none;
			-moz-appearance:none;
		}
		@-moz-document url-prefix() { 
			select{
				background:#D3D3D3 url(img_forms/btn_drop.png) top left;
			}
			select:hover{
				background:#D3D3D3 url(img_forms/btn_drop.png) bottom left;
			}
		}









		/* The container */
		.container {
			display: block;
			position: relative;
			padding-left: 30px;
			margin-bottom: 12px;
			cursor: pointer;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			line-height: 24px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		/* Hide the browser's default checkbox */
		.container input {
			position: absolute;
			opacity: 0;
		}

		/* Create a custom checkbox */
		.checkmark {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #FFF;
			border-radius: 3px;
		}

		/* On mouse-over, add a grey background color */
		.container:hover input ~ .checkmark {
			background-color: #ccc;
		}

		/* When the checkbox is checked, add a blue background */
		.container input:checked ~ .checkmark {
			background-color: #2196F3;
		}

		/* Create the checkmark/indicator (hidden when not checked) */
		.checkmark:after {
			content: "";
			position: absolute;
			display: none;
		}

		/* Show the checkmark when checked */
		.container input:checked ~ .checkmark:after {
			display: block;
		}

		/* Style the checkmark/indicator */
		.container .checkmark:after {
			left: 6px;
			top: 2px;
			width: 5px;
			height: 10px;
			border: solid white;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}