/* ----- ----- ----- ----- ----- ----- ----- */
/* Calculate Savings Style Sheet */
/* ----- ----- ----- ----- ----- ----- ----- */
	#main-container-fluid{
		background: white;
		padding: 0px;
	}
/* ----- ----- ----- ----- ----- ----- ----- */
/*Fuel Savings Calculator*/
/* ----- ----- ----- ----- ----- ----- ----- */
	/*Header in top section of page*/
	#calculate-savings{
		padding: 50px 0px;
		background: white;
		background-repeat: no-repeat;
		background-position: bottom center;
		color: black;
		background-size: contain;
		position: relative;
		min-height: 700px;
	}
	#calculate-savings .header.main{
		color: black;
	}
	/*Objects in the first block of the first section*/
	#savings-information p{
		padding-right: 190px;
		margin: 40px 0px;
	}
	/*Second block in the top section*/
	#calculation-results{
		margin-top: 74px;
	}
	#calculation-results .annual-saving-amount{
		text-align: center;
		font-family: "Futura_Bold";
		font-size: 50px;
	}
	/*The fields and readouts used for the calculation*/
	#calculation-entry .fuel-calc-field,
	#calculate-journey .fuel-calc-field
	{
		width: 90px;
		height: 90px;
		background-repeat: no-repeat;
		background-position: top left;
		position: relative;
		margin: 10px auto;
		padding: 0px;
	}
	#calculation-entry .fuel-calc-field input[type='text'],
	#calculate-journey .fuel-calc-field input[type='text']
	{
		width: 89px;
		border: 0px;
		background: transparent;
		text-align: center;
		position: relative;
		top: 0px;
		left: 0px;
		padding: 35px 5px;
		color: black;
	}
	#calculation-entry .fuel-calc-field input[type='text']:focus,
	#calculate-journey .fuel-calc-field input[type='text']:focus
	{
		outline: 0px;
	}
	/*Titles adjacent from the circular text fields*/
	#calculation-entry .fuel-calc-title{
		font-size: 12px;
		text-align: center;
	}
	#calculation-entry .standard-text{
		background: #333;
		color: white;
		margin: 10px 0px;;
	}
	#calculation-entry button.standard-text{
		width: 100%;
		padding: 5px 0px;
		background: #bd0a41;
	}
	/*The two components that comprise the fuel gauge and animation*/
	#dial{
		position: relative;
		background-repeat: no-repeat;
		background-position: center;
		width: 229px;
		height: 108px;
		margin-bottom: 40px;
	}
	#needle{
		position: relative;
		background-image: url("needle.png");
		width: 127px;
		height: 85px;
		left: 94px;
		top: 58px;
/*   		-webkit-animation:spin 1s linear infinite;
		-moz-animation:spin 1s linear infinite;
		animation:spin 1s linear reverse;  */
/* 		animation-direction:alternate;
-webkit-animation-direction:alternate; Safari and Chrome */

		-webkit-transform-origin: 21px 64px;
		-moz-transform-origin:21px 64px;
		transform-origin: 21px 64px;
		-o-transform-origin: 21px 64px;
		
		-webkit-transform:rotate(-120deg);
		-moz-transform:rotate(-120deg);
		-o-transform:rotate(-120deg);
		transform:rotate(-120deg);
		
		-webkit-transition: -webkit-transform 2.2s;
		-moz-transition: -moz-transform 2.2s;
		-o-transition: -o-transform 2.2s;
		transition: transform 2.2s;
		
	}
	#needle.full{
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	/*Rotation Animations*/
/* 	@-moz-keyframes spin {100% {-moz-transform: rotate(-120deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-120deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-120deg); transform:rotate(-120deg); } }  */

/* ----- ----- ----- ----- ----- ----- ----- */
/*Calculate Your Journey*/
/* ----- ----- ----- ----- ----- ----- ----- */
	#calculate-journey{
		background:black;
		color: white;
		padding: 50px 0px;
	}
	#calculate-journey .header.main{
		color: white;
		margin-bottom: 20px;
	}
	#preset-journeys ul{
		padding: 0px;
	}
	#preset-journeys li{
		padding: 5px 15px;
		border: 1px solid white;
		margin: 15px 0px;
		border-radius: 19px;
		font-weight: bold;
		width: 90%;
		letter-spacing: 1px;
		cursor: pointer;
	}
	#preset-journeys li:hover{
		background: white;
		border-color: black;
		color: black;
	}
	#custom-journeys{
		height: 140px;
	}
	#custom-journeys .header{
		margin-top: 0px;
	}
	#custom-journeys .fuel-calc-field{
		margin: 5px;
	}
	#custom-journeys .fuel-calc-title{
		font-size: 9px;
		text-align: center;
		width: 90px;
		margin: 10px 5px;
		margin-top: 0px;
	}
	#custom-journeys .standard-text{
		margin: 10px auto;
		background: #333;
		color: white;
	}
	#custom-journeys button.standard-text{
		background: #bd0a41;
		color: white;
		width: 100%;
		padding: 5px;
	}
	#journey-results{
		border: 1px solid grey;
		margin: 15px 0px;
		padding: 0px;
	}
	#journey-results .header{
		font-size: 15px;
		margin-bottom: 0px;
	}
	#btn-calc-journey{
		margin-top: 37px !important;
	}
	#journey-results #share-icons{
		margin: 15px 0px;
		padding: 0px;
	}
	#share-icons img{
		margin: 10px 0px;
		cursor: pointer;
	}
	#calculate-journey .journey-price{
		font-size: 50px;
		font-family: "Futura_Heavy";
	}
/* ----- ----- ----- ----- ----- ----- ----- */
/*Calculate Your Journey*/
/* ----- ----- ----- ----- ----- ----- ----- */
	#fuel-saving-faq{
		background: white;
		color: black;
		padding: 30px 0px;
		font-size: 12px;
	}
	#fuel-saving-faq hr{
		border-color: darkgrey;
	}
	#fuel-saving-faq .header.main{
		color: black;
	}
	#fuel-saving-faq .block .header{
		font-family: "Open Sans";
		font-size: 16px;
		font-weight: bold;
		line-height: 24px;
		margin: 20px 0px;
	}
	#fuel-saving-faq hr{
		margin: 10px;
	}
/* ----- ----- ----- ----- ----- ----- ----- */
/*Respnsive CSS*/
/* ----- ----- ----- ----- ----- ----- ----- */
	/*Mobile Screen Sizes*/
	@media only screen and (max-width : 767px){
		#calculate-journey{
			text-align: center;
		}
		#calculate-journey ul li{
			margin-left: auto;
			margin-right: auto;
		}
		#custom-journeys{
			/*height: 200px;*/
			height: auto;
		}
		#share-icons img{
			margin: 5px 20px;
		}
		#savings-information p{
			padding: 10px 0px;
			margin: 10px auto;
		}
		#calculate-savings{
			height: auto !important;
			text-align: center;
		}
		#calculation-results{
			margin: 0px 0px;
		}
	}
	/*Small Screen Sizes*/
	@media only screen and (min-width: 768px) and (max-width:  991px){
		#calculate-savings{
			height: auto !important;
			text-align: center;
		}
		#calculate-journey{
			text-align: center;
		}
		#calculate-journey ul li{
			margin-left: auto;
			margin-right: auto;
		}
		#custom-journeys{
			margin: 20px auto;
		}
		#savings-information p{
			padding: 10px 0px;
			margin: 10px auto;
		}
		#calculation-results{
			margin: 0px 0px;
		}
	}
	/*Medium Screen Sizes*/
	@media only screen and (min-width: 992px) and (max-width: 1199px){
		#journey-results .header{
			font-size: 12px;
		}
		#journey-results{
			border: 0px;
		}
	}
/* ----- ----- ----- ----- ----- ----- ----- */
/* ----- ----- ----- ----- ----- ----- ----- */
/* ----- ----- ----- ----- ----- ----- ----- */