/* -------------------------------------------------------------- 

Theme Name: Sell Your Car 2 Giraffe

-------------------------------------------------------------- */


:root {

	--light: #e8effb;
	--green: #93c01f;
	--green-alt: #8eb21f;
	--dark: #130c33;
    
	--small-spacing: 2rem;
	--large-spacing: 4rem;
	
	--number-plate-yellow: #ffc500;
	
	--beige: #e8d7ce;
    
}

body { color: var(--dark); background-color: var(--light); }


/* Fonts */

@font-face {
    font-family: 'Heading';
    src: url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.eot');
    src: url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.eot?#iefix') format('embedded-opentype'),
        url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.woff2') format('woff2'),
        url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.woff') format('woff'),
        url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.ttf') format('truetype'),
        url('../sell-your-car-2-giraffe/assets/fonts/veneer/VeneerClean-Soft.svg#VeneerClean-Soft') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'NumberPlate';
	src: url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.eot');
	src: url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.eot?#iefix') format('embedded-opentype'),
		url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.woff2') format('woff2'),
		url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.woff') format('woff'),
		url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.ttf') format('truetype'),
		url('../sell-your-car-2-giraffe/assets/fonts/number-plate/UKNumberPlate.svg#UKNumberPlate') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/* Theme */

.bg-light { background-color: var(--light)!Important; }
.bg-green { background-color: var(--green)!Important; }
.bg-dark { color: white; background-color: var(--dark)!Important; }

.bg-dark a { color: white; text-decoration: none; }

.bg-beige { color: var(--dark); background-color: var(--beige)!Important; }

.beige-gradient { background: linear-gradient(180deg, rgba(232,239,251,1) 25%, rgba(232,215,206,1) 100%); }

.text-green { color: var(--green); }

.btn-green {
	color: white!Important;
	background-color: var(--green)!Important;
}

.btn-green:hover { background-color: var(--green-alt)!Important; }


.btn-dark {
	color: white!Important;
	background-color: var(--dark)!Important;
}

.btn-dark:hover { background-color: var(--dark)!Important; }


/* Structure */

.block {
	width: 100%;
	padding: var(--small-spacing);
}

.block.small-padding {
	padding: var(--small-spacing);
}

@media (min-width: 768px) {
	.block {
		padding: var(--large-spacing);
	}
	.block.small-padding {
		padding: var(--small-spacing);
	}
}

@media (max-width: 991.98px) {
	.container {
		max-width: none;
	}
}

.tile { transition: all 0.3s ease; }
.tile:hover {
	z-index: 99;
	transform: translateY(-10px);
	-webkit-box-shadow: 0 10px 40px rgb(6 67 117 / 30%);
	box-shadow: 0 20px 40px rgb(6 67 117 / 30%);
}

/* Typography */

h1:not(.fas, .far, .fal, .fad, .fab), h2:not(.fas, .far, .fal, .fad, .fab), h3:not(.fas, .far, .fal, .fad, .fab), h4:not(.fas, .far, .fal, .fad, .fab), h5:not(.fas, .far, .fal, .fad, .fab), h6:not(.fas, .far, .fal, .fad, .fab),
.h1:not(.fas, .far, .fal, .fad, .fab), .h2:not(.fas, .far, .fal, .fad, .fab), .h3:not(.fas, .far, .fal, .fad, .fab), .h4:not(.fas, .far, .fal, .fad, .fab), .h5:not(.fas, .far, .fal, .fad, .fab), .h6:not(.fas, .far, .fal, .fad, .fab),
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: 'Heading', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 1px;
}

.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	margin-bottom: 0;
}

.nobr { white-space: nowrap; }

.list-icon { min-width: 40px; }


@media (min-width: 992px) {

	.chevron-text-area {

		position: relative;
		height: 80px;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		border-radius: 0px!Important;

	}

	.chevron-text-area:before {

		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;

		width: 0;
		height: 100%;

		border-top: 40px solid transparent;
		border-left: 25px solid var(--light);
		border-bottom: 40px solid transparent;

	}

	.chevron-text-area:after {

		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;

		width: 0;
		height: 100%;

		border-top: 40px solid transparent;
		border-left: 25px solid var(--green);
		border-bottom: 40px solid transparent;
		
		transform: translateX(100%);

	}
	
	.chevron-text-area.bg-dark:after { border-left: 25px solid var(--dark); }
	
}


/* Header */

#hero-header { position: relative; }

#hero-header:before {
	
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 80%;

	background-image: url(../sell-your-car-2-giraffe/assets/images/header-background.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	
	z-index: 1;
	
}

#hero-header:after {
	
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 80%;

	background: linear-gradient(0deg, rgba(232,239,251,1) 10%, rgba(232,239,251,0) 100%);
	
	z-index: 1;
	
}

#hero-header .block { position: relative; z-index: 2; }

#hero-header #character { display: none; }

@media (min-width: 1500px) {

	#hero-header #character {
		display: block;
		position: absolute;
		bottom: 0%;
		top: 17%;
		height: 70%;
		max-height: 850px;
		pointer-events: none;
		z-index: 3;
	}
	
}

/* CTA */
            
.cta.block { 

	position: relative;
	border-radius: .75rem;
	color: white;
	background-color: var(--green);

	-webkit-box-shadow: 0px 10px 60px 5px rgba(0,0,0,0.15); 
	box-shadow: 0px 10px 60px 5px rgba(0,0,0,0.15);
	
	z-index: 3;

}

.cta.block #image {

	position: absolute;
	top: 0;
	left: 0;
	width: 100% !Important;
	border-radius: .75rem;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;

}

.cta.block #image:before {

	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient( 90deg, rgba(147,192,31,1) 0%, rgba(147,192,31,1) 100% );

}

.cta.block #image img {	object-fit: cover; }

.cta.block #content { position: relative; z-index: 2; }

@media (min-width: 992px) {
	
	.cta.block #image { width: 50% !Important; }
	
	.cta.block #image:before {
	
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 100%;
		background: linear-gradient( 90deg, rgba(147,192,31,0) 0%, rgba(147,192,31,1) 100% );

	}

	.cta.block:after {

		content: '';
		position: absolute;
		top: -4rem;
		bottom: 0;
		right: 0;
		width: 45%;
		background-image: url(../sell-your-car-2-giraffe/assets/images/character-cta.png);
		background-size: contain;
		background-position: right bottom;
		background-repeat: no-repeat;

	}

}


/* Number Plate */
            
.number-plate {

	position: relative;
	max-width: 500px;
	border-radius: .5rem;
	overflow: hidden;

	-webkit-box-shadow: 0px 10px 50px 5px rgba(0,0,0,0.2); 
	box-shadow: 0px 10px 50px 5px rgba(0,0,0,0.2);

}

.number-plate input {

	width: 100%;
	color: black;
	background-color: var(--number-plate-yellow);
	border: solid 2px var(--number-plate-yellow);
	font-family: 'NumberPlate';
	text-align: center;
	text-transform: uppercase;
	padding: 15px 8px 15px 50px;

}

.number-plate input:focus,
.number-plate input:focus-visible { outline: none; }
.number-plate input::placeholder {
	color: black;
	opacity: 1;
}

.number-plate:before {

	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	background-color: var(--dark);
	background-image: url(../sell-your-car-2-giraffe/assets/images/number-plate-logo.svg);
	background-size: 65%;
	background-repeat: no-repeat;
	background-position: center bottom 8px;
	z-index: 1;

}

.number-plate:after {

	content: '';
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	left: 8px;
	border: solid 2px white;
	border-radius: .2rem;
	z-index: 1;
	pointer-events: none;

}

.number-plate-label {

	position: absolute;
	bottom: 0;
	left: 50%;
	padding-left: 50px;
	font-family: sans-serif;
	font-size: .8rem;
	font-weight: 500;
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;

}

.number-plate-label span { position: relative; display: block; z-index: 3; background-color: var(--number-plate-yellow); padding: 0 .5rem; transform: translateY(-5px); }

@media (min-width: 992px) {
	.number-plate input { padding: 15px 8px 15px 70px; }
	.number-plate:before { width: 70px; }
	.number-plate-label { padding-left: 70px; }
}


/* Mileage */
            
.mileage {

	position: relative;
	
	height: 60px;
	
	border-radius: 0.25rem;
	overflow: hidden;

}

.mileage:before {

	content: '';

	position: absolute;
	top: 0;
	left: 0;

	width: 80px;
	height: 100%;

	background-image: url(../sell-your-car-2-giraffe/assets/images/dashboard-icon.svg);
	background-size: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--dark);

}

.mileage input {

	/* max-width: 440px; */
	height: 60px;
	
	color: white!Important;
	background-color: #353563!Important;
	
	padding: 10px 25px 8px 100px;
	
	text-align: left;
	font-size: 1.5rem;
	font-weight: 600;

}

.mileage input::placeholder {
	color: white;
	opacity: 1;
}

@media (min-width: 768px) {	.mileage input { max-width: 440px; text-align: center; } }

@media (min-width: 1200px) {

	#background-image {

		position: absolute;
		top: 0;
		right: 0;

		width: 58%!Important;
		height: 100%;
		
		background-image: url(../sell-your-car-2-giraffe/assets/images/ross-and-conor-background.png);
		background-size: contain;
		background-position: left bottom;
		background-repeat: no-repeat;

	}
	
}

#character-outro {
	
	position: absolute;
	top: 50%;
	left: 0;
	
	width: 180px;
	height: auto;
	   
	transform: translate(-70%, -50%);
	
	pointer-events: none;
	
}

.spotlight-object { transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }

.spotlight-object.active { border-bottom: solid 4px var(--green); }

.spotlight-hover:hover .spotlight-object { opacity: 0.5; }

.spotlight-hover:hover .spotlight-object:hover {
	opacity: 1;
	transform: translateY(-10px);
    -webkit-box-shadow: 0 10px 40px rgb(6 67 117 / 30%);
    box-shadow: 0 20px 40px rgb(6 67 117 / 30%);
}


/* Plugins */

.number-plate .wpcf7-not-valid-tip { display: none!Important; }

.wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}

.wpcf7 form .wpcf7-response-output { margin: 0; margin-top: 20px; }

.wpcf7-not-valid-tip {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.875em;
}

.wpcf7-form-control-wrap:last-child .wpcf7-not-valid-tip { margin-bottom: 0; }

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	color: white;
	background-color: #ffb900;
	border-radius: 0.25rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	color: white;
	background-color: #46b450;
    border-color: #46b450;
	border-radius: 0.25rem;
}


/* Bootstrap */

.form-control, .form-select { min-height: 50px; }

.form-select-group { position: relative; }

.form-select-group:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: var(--dark);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    pointer-events: none;
    z-index: 0;
}

.form-select-group.extended,
.form-select-group.extended .form-select { height: 60px; }
.form-select-group.extended:after { width: 60px; height: 60px; }

.modal-backdrop { background-color: var(--dark); }
.modal-backdrop.show { opacity: 0.95; }

.modal-content { border-bottom: solid 5px var(--green)!Important; }

.award_image {
	width:100px;
	display:inline;
}

@media (max-width: 575.99px) {
	.modal-dialog {
		margin-left: 2rem;
		margin-right: 2rem;
	}
	.award_image {
		width: 150px;
		margin: 0 auto;
		display: block;
	}
}

.disabled-by-mileage,
.disabled-by-condition,
.disabled-by-age,
.disabled-by-terms,
.disabled-by-history{
	pointer-events: none;
	opacity: .65;
}

#website{ display:none; }

@media only screen and (max-width: 992px) {
  .ea-bootstrap  {
    margin-top: 400px!important;
  }
}

/* Plugins */

.ti-widget.ti-goog .ti-widget-container { margin-bottom: 0px!Important; }