/*#############################################################################
     Designed and developed by Prestige Web Solutions 
     Author: Mohsin Ali 
	 Year: 2019
	 Version: 1.0
#############################################################################*/    


/*#############################################################################
	Table of content:
	
	1) General Layout across the whole website (including grid structure)
	2) Home Page
	3) Car Page
	4) Selling Page
	5) About Us Page
	6) Contact Us Page
	7) Site Map
	X) Media Queries
#############################################################################*/ 	


/* 1) General Layout across the whole website (including grid structure)
------------------------------------------------------------------------------*/
	/* Typography */
		body {
			font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
		}
		
	/* Global Options */
		/* Text Alignment */
			.text-left {
				text-align: left;
			}
			.text-right {
				text-align: right;
			}
			.text-centre {
				text-align: center;
			}
			.quote {
				font-style: italic;
			}			
	
	/* Grid Structure (Columns) */
		/* 2 Columns */
			.col-2 {
				float: left;
				width: 50%;			
			}
			.col-2-60 {
				float: left;
				width: 60%;			
			}
			.col-2-75 {
				float: left;
				width: 75%;			
			}
			.col-2-25 {
				float: left;
				width: 25%;			
			}
			.col-2-40 {
				float: left;
				width: 40%;			
			}			
		/* 3 Columns */
			.col-3 {
				float: left;
				width: 33.33%;
			}
		/* Override to float right instead of left(default), Used to position stuff later in media queries */
			.opposite-float {
				float: right;
			}		
		/* Clear floats after row ends */
			.grid-row:after {
				content: "";
				display: table;
				clear: both;
			}
			
	/* Header */
		header {
			position: relative;
			z-index: 2;
			height: 110px;
			background-color: #000;
			margin-top: -20px;		
		}
			header img {
				height: 80px;
				margin-top: 15px;
			}
			.burger-toggle {
				position: absolute;
				bottom: 0;
				right: 60px;
				color: #fff;
				line-height: 105px;
				font-size: 40px;
				cursor: pointer;
			}
				#burger-x {
					display: none;
				}
				.fade-in {
					-webkit-animation-name: fade-in;
					-webkit-animation-duration: 0.5s;
					animation-name: fade-in;
					animation-duration: 0.5s;				
				}
			#main-menu {
				background-color: #483435;
				position: absolute;
				width: 100%;
				z-index: 1;
				height: 57px;
				line-height: 57px;
				font-weight: bolder;				
			}
				#main-menu.nav-default {
					top: 0px;
				}
				#main-menu.nav-open {
					top: 110px;
					-webkit-animation-name: reveal-menu;
					-webkit-animation-duration: 0.5s;
					animation-name: reveal-menu;
					animation-duration: 0.5s;					
				}
				#main-menu.nav-close {
					top: 0px;
					-webkit-animation-name: hide-menu;
					-webkit-animation-duration: 0.5s;
					animation-name: hide-menu;
					animation-duration: 0.5s;						
				}
				/* Main menu related animations */
					@-webkit-keyframes reveal-menu {from {top: 0px;} to {top: 110px;}}
					@keyframes reveal-menu {from {top: 0px;} to {top: 110px;}}
					@-webkit-keyframes hide-menu {from {top: 110px;} to {top: 0px;}}
					@keyframes hide-menu {from {top: 110px;} to {top: 0px;}}
					@-webkit-keyframes fade-in {from {opacity: 0;} to {opacity: 1;}}
					@keyframes fade-in {from {opacity: 0;} to {opacity: 1;}}				
				#main-menu ul {
					padding: 0;
				}			
					#main-menu ul li {
						display: inline-block;
						width: 24.5%;
					}					
	/* Content */
		#content {
			min-height: calc(100vh - 120px);
		}
			#content.nav-default {
				margin-top: 0;
			}
			#content.nav-open {
				margin-top: 57px;
				-webkit-animation-name: drop-content;
				-webkit-animation-duration: 0.5s;
				animation-name: drop-content;
				animation-duration: 0.55s;				
			}
			#content.nav-close {
				margin-top: 0;
				-webkit-animation-name: raise-content;
				-webkit-animation-duration: 0.5s;
				animation-name: raise-content;
				animation-duration: 0.5s;				
			}			
			/* Main menu related animations */
				@-webkit-keyframes drop-content {from {margin-top: 0;} to {margin-top: 57px;}}
				@keyframes drop-content {from {margin-top: 0;} to {margin-top: 57px;}}
				@-webkit-keyframes raise-content {from {margin-top: 57px;} to {margin-top: 0;}}
				@keyframes raise-content {from {margin-top: 57px;} to {margin-top: 0;}}				
			
	/* Footer */
		footer {
			background-color: #d4d1ff;
			padding: 1% 2% 0;
		}
			footer h6 {
				color: #3a3a3a;
				margin-bottom: 0px;
			}
			footer p {
				font-size: 10px;
			}
		

/* 2) Home Page
------------------------------------------------------------------------------*/
	#home-page-heading {
		font-style: italic;
		font-weight: bolder;
	}
	.home-page-form-element {
		width: 98%;
		margin-bottom: 1%;
	}
		.price-selctors {
			width: 96%;
		}
	.search-button {
		background: #666666;
		background: linear-gradient(#666666, #000000);
		border-radius: 5px;
		padding: 8px 20px;
		color: #ffffff;
		display: inline-block;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		text-shadow: 1px 1px #000000;
		width: 98%;
		margin: 1% 0;		
	}
	.product-listing-container {
		margin: 0 0 1% 0;
		cursor: pointer;		
	}	
		.product-listing-container img {
			width: 95%;
			margin: 0 2.5%;
			height: 200px;
			object-fit: cover;			
		}
		.product-listing-container h4 {
			margin: 1% 2.5% 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;			
		}
		.product-listing-container:hover {
			filter: brightness(0.5);		
		}	
	.pagination-bar {
		margin: 1% 2.5% 2%;
	}
		.page-number-container {
			width: 5%;
			float: left;
			border: solid 1px #ccc;
			height: 30px;
			font-size: 1.3em;
			border-radius: 5px;
			margin: 0 0.5% 1%;
			background-color: #daeeff;
			line-height: 30px;
		}
		.page-number-container:hover {
			background-color: #ddd;
		}
		.active-page {
			background-color: #70bbff;
		}
	
	
	/* Latest Cars Slider */
		#latest-cars {
			padding: 2% 0;
			background-color: #daeeff;
			border-top: solid 1.5px #ccc;
			border-bottom: solid 1.5px #ccc;
		}
			#latest-cars h2 {
				margin: 0 0 20px 0;
			}
			.owl-item {
				cursor: pointer;
			}
				.owl-item:hover {
					filter: brightness(0.5);
				}
				.owl-item ul {
					list-style-type: none;
					margin: 0;
					padding: 0;
				}
				.owl-item img {
					width: 75%!important;
					margin: 0 12.5%;
				}
						
/* 3) Car Page
------------------------------------------------------------------------------*/	
	.gallery-container {
		padding: 2%;
	}
		#expandedImg {
			cursor: zoom-in;
		}
		.product-image-column {
			float: left;
			width: 10%;
			padding: 10px;
		}
			.product-image-container {
				position: relative;
				display: block;
			}
				.product-image-column img {
					opacity: 0.8;
					cursor: pointer;
					width: 100%;
				}
					.product-image-column img:hover {
						opacity: 1;
					}
	.large-img-modal {
		display: none;
		position: fixed;
		z-index: 5;
		padding: 100px 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0,0.9);
	}
		.large-img-modal-content {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
		}
		.large-img-modal-content {
			animation-name: zoom;
			animation-duration: 0.6s;
		}
			@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}	
		.modal-close {
			position: absolute;
			top: 15px;
			right: 35px;
			color: #f1f1f1;
			font-size: 40px;
			font-weight: bold;
			transition: 0.3s;
		}
			.modal-close:hover, .modal-close:focus {
				color: #bbb;
				text-decoration: none;
				cursor: pointer;
			}	
		.product-description-column {
			padding-right: 2%;
		}
			.price-tag {
				font-size: 2em;
			}
		#call-href {
			text-decoration: none;
		}
			#product-contact-container {
				margin: 2% 12.5% 0;
				padding: 2%;
				background-color: #ccc;
				border-radius: 5px;	
				box-shadow: 0 0 1px 1px #888888;
				width: 75%;
			}
				#product-contact-container:hover, #product-contact-container:focus {
					box-shadow: none;
				}
	#google-maps-large {
		margin: 2% 12.5%;
	}

/* 4) Selling Page
------------------------------------------------------------------------------*/
	#selling-intro {
		margin: 0 5%;
		border-bottom: solid 1px #ddd;
	}
	.selling-page-input-element {
		width: 80%;
		margin: 0 0 5% 0;
	}
	.registration-plate {
		background: #d8d814 url(/img/plate-design-main.png);
		background-repeat: repeat-y;
		border: none;
		height: 50px;
		border-radius: 10px;
		font-size: 3em!important;
		text-align: center;
		text-transform: uppercase;
	}
	.history-and-condition-inner-container {
		margin-bottom: 5%;
	}	
		.condition-buttons {
			cursor: pointer;
			border-radius: 7px;
			width: 25%!important;
			margin: 0 0% 0 6%;
		}
			.condition-buttons p {
				color: white;
				font-size: 1em;
			}
			.good {
				background-color: green;
			}	
			.average {
				background-color: orange;
			}
			.bad {
				background-color: red;
			}
			.selected-condition-button {
				border: solid;
			}
	.selling-form-error {
		color: red;
	}
	.backend-radio-operators {
		display: none;
	}
	#selling-query-submit {
		width: 27%;		
	}
	#vehicle-quotation-sent {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		-webkit-animation-name: full-from-left;
		-webkit-animation-duration: 1.2s;
		animation-name: full-from-left;
		animation-duration: 1.2s;		
	}
		#vehicle-quotation-sent i {
			font-size: 5em;
			margin: 2% 0 5% 0;
		}
		@-webkit-keyframes full-from-left {from {left: -2000px;} to {left: 0;}}
		@keyframes full-from-left {from {left: -2000px;} to {left: 0;}}		

/* 5) About Us Page
------------------------------------------------------------------------------*/
	#introduction {
		margin: 0 2% 0 10%;
	}
	#socials-row {
		font-size: 5em;
	}
		.fb-link {
			color: #146ba9;
		}
		.insta-link {
			color: #e65a31;
		}
	#where-to-find-us {
		margin: 0 10% 0 2%;
	}
	#contact-and-location {
		margin: 0 10% 0 2%;
	}

/* 6) Contact Us Page
------------------------------------------------------------------------------*/
	.contact-form-element {
		width: 80%;
		margin: 0 10% 2% 10%;
	}
	.send-button {
		background: #666666;
		background: linear-gradient(#666666, #000000);
		border-radius: 5px;
		padding: 8px 20px;
		color: #ffffff;
		display: inline-block;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		text-shadow: 1px 1px #000000;
		width: 80%;
		margin: 1% 0;		
	}
	.form-bad {
		border-style: solid;
		border-width: 1.5px;
		border-color: #f00;	
	}
	.form-good {
		border-style: solid;
		border-width: 1.5px;
		border-color: #53be00;
	}	
	.mail-sent-icon {
		font-size: 5em;
	}
	#our-contact-details {
		margin: 0 5%;
	}

/* 7) Site Map
------------------------------------------------------------------------------*/	
	#site-map-list {
		list-style: none;
	}	

/* X) Media Queries
------------------------------------------------------------------------------*/

	/* Tablet Landscape
	-------------------------------------------------- */
		@media only screen and (min-width:770px) and (max-width:1025px) {
			/* 1) Home Page
			------------------------------------------------------------------------------*/			
				.product-listing-container img {
					height: 150px;
				}				
			
			/* 3) Car Page
			------------------------------------------------------------------------------*/
				.product-image-column {
					width: 33%;
				}		
		} /*Close Media Query*/

	/* Mobile Landscape & Tablet Portrait
	-------------------------------------------------- */
		@media only screen and (min-width:480px) and (max-width:769px) {
			/* 1) General Layout across the whole website (including grid structure)
			------------------------------------------------------------------------------*/
			/* Options */
				.no-mob {
					display: none;
				}
			
			/* Header */
				header {
					position: relative;
					z-index: 2;
					height: 60px;
					background-color: #000;
					margin-top: -20px;
				}
				header img {
					height: 30px;
					margin-top: 15px;
				}
				.burger-toggle {
					position: absolute;
					bottom: 0;
					right: 20px;
					color: #fff;
					line-height: 60px;
					font-size: 20px;
					cursor: pointer;
				}
				#main-menu {
					background-color: #483435;
					position: absolute;
					width: 100%;
					z-index: 1;
					height: 30px;
					line-height: 30px;
					font-weight: bolder;
					font-size: 0.5em;
				}
				#main-menu.nav-open {
					top: 60px;
					-webkit-animation-name: reveal-menu;
					-webkit-animation-duration: 0.5s;
					animation-name: reveal-menu;
					animation-duration: 0.5s;
				}
				/* Main menu related animations */
					@-webkit-keyframes reveal-menu {from {top: 0px;} to {top: 60px;}}
					@keyframes reveal-menu {from {top: 0px;} to {top: 60px;}}
					@-webkit-keyframes hide-menu {from {top: 60px;} to {top: 0px;}}
					@keyframes hide-menu {from {top: 60px;} to {top: 0px;}}				
				
				
				
				/* Footer */
				footer h6 {
					font-size: 0.65em;
				}
				footer p {
					font-size: 0.5em;
				}	
			
					
			/* 2) Home Page
			------------------------------------------------------------------------------*/	
				#home-page-heading {
					font-size: 1.5em;
				}
				#home-page-filter {
					float: none;
					width: 80%;
					margin-left: 10%;
				}
				#car-listings {
					float: none;
					width: 90%;
					margin: 2% 5%;
				}	
					.product-listing-container h4 {
						font-size: 0.8em;
					}
					.product-listing-container p {
						font-size: 0.7em;
					}
					.product-listing-container img {
						height: 150px;
					}					
					.page-number-container {
						height: 20px;
						font-size: 1em;
						line-height: 20px;				
					}
					
			/* 3) Car Page
			------------------------------------------------------------------------------*/				
				.product-image-column {
					width: 33%;
				}
				.product-description-column h2 {
					font-size: 1em;
					font-weight: bold;
				}	
				.vehicle-specs {
					font-size: 0.5em;
				}
				#call-href {
					font-size: 0.75em;
				}	
				#product-contact-container {
					margin: 2% 12.5% 10px;
				}
				#google-maps-large {
					margin: 2% 12.5% 5%;
				}

			/* 4) Selling Page
			------------------------------------------------------------------------------*/				
				.registration-plate {
					height: 60px;
					font-size: 2em!important;				
				}				
		} /*Close Media Query*/
		
	/* Mobile Portrait
	-------------------------------------------------- */
		@media only screen and (max-width:479px) {
			/* 1) General Layout across the whole website (including grid structure)
			------------------------------------------------------------------------------*/
			/* Options */
				.no-mob {
					display: none;
				}
				.mobile-stack {
					float: none;
					width: 100%;
				}
			
			/* Header */
				header {
					position: relative;
					z-index: 2;
					height: 60px;
					background-color: #000;
					margin-top: -20px;
				}
				header img {
					height: 30px;
					margin-top: 15px;
				}
				.burger-toggle {
					position: absolute;
					bottom: 0;
					right: 20px;
					color: #fff;
					line-height: 60px;
					font-size: 20px;
					cursor: pointer;
				}
				#main-menu {
					background-color: #483435;
					position: absolute;
					width: 100%;
					z-index: 1;
					height: 30px;
					line-height: 30px;
					font-weight: bolder;
					font-size: 0.5em;
				}
				#main-menu.nav-open {
					top: 60px;
					-webkit-animation-name: reveal-menu;
					-webkit-animation-duration: 0.5s;
					animation-name: reveal-menu;
					animation-duration: 0.5s;
				}
				/* Main menu related animations */
					@-webkit-keyframes reveal-menu {from {top: 0px;} to {top: 60px;}}
					@keyframes reveal-menu {from {top: 0px;} to {top: 60px;}}
					@-webkit-keyframes hide-menu {from {top: 60px;} to {top: 0px;}}
					@keyframes hide-menu {from {top: 60px;} to {top: 0px;}}				
				
				
				
				/* Footer */
				footer h6 {
					font-size: 0.65em;
				}
				footer p {
					font-size: 0.5em;
				}	
			
					
			/* 2) Home Page
			------------------------------------------------------------------------------*/	
				#home-page-heading {
					font-size: 1.5em;
				}
				#home-page-filter {
					float: none;
					width: 80%;
					margin-left: 10%;
				}
				#car-listings {
					float: none;
					width: 90%;
					margin: 2% 5%;
				}	
					.product-listing-container h4 {
						font-size: 0.8em;
					}
					.product-listing-container p {
						font-size: 0.7em;
					}
					.product-listing-container img {
						height: 85px;
					}
					.page-number-container {
						height: 20px;
						font-size: 1em;
						line-height: 20px;				
					}
					
			/* 3) Car Page
			------------------------------------------------------------------------------*/				
				.mob-stack-car-page {
					width: 95%;
					float: none;
					margin-left: 2.5%;
					margin-right: 2.5%;
				}						
				.product-image-column {
					width: 20%;
				}
				.product-description-column h2 {
					font-size: 1em;
					font-weight: bold;
				}	
				.vehicle-specs {
					font-size: 0.5em;
				}
				#call-href {
					font-size: 0.75em;
				}	
				#product-contact-container {
					margin: 2% 12.5% 10px;
				}
				#google-maps-large {
					margin: 2% 12.5% 5%;
				}
				
			/* 4) Selling Page
			------------------------------------------------------------------------------*/				
				.registration-plate {
					height: 60px;
					background: #d8d814 url(/img/plate-design-small.png);
					background-repeat: repeat-y;					
				}
				#selling-query-submit {
					width: 75%;
				}								
				
			/* 5) About Us Page
			------------------------------------------------------------------------------*/				
				.map-container {
					float: none;
					width: 100%;
				}
				.tel-address-container {
					float: none;
					width: 100%;
				}				
		} /*Close Media Query*/