.col-flex {
	display: flex;
	align-content: center;
	justify-content: center;
}

.col-1-30 {width: 30%}
.col-1-70 {width: 70%;}
.col-1-50 {width: 50%;}

.inquire-tracor {
	position: absolute; 
	z-index: 999;
	top: 20px; 
	right: 30px;
	margin: auto; 
	display: block;
	text-decoration: none;
	transition: 0.3s ease all;
	width: fit-content;
	-webkit-width: fit-content;
	color: var(--white);
	background: var(--gold); 
	padding: 15px 40px 15px 40px;
	text-transform: uppercase;
	font-family: sweet-sans-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem; 
}

#tree-img {position: absolute; top: 0px;right: 10%; z-index: 2; display: block; width: 100%; max-width: 40%; filter: opacity(40%);}

.inquire-tracor:visited, .inquire-tracor:focus {color: var(--white);}

.tractor-heading {
	width: 100%;
	margin: auto;
	display: block;
	text-align: center;
	padding: 10rem 2rem 0px 2rem;
}

.tractor-heading h1 {
	margin: 0px !important;
	margin-block-start: 0em;
	z-index: 3;
    margin-block-end: 0em;
}

.tractor-heading p {
	margin-block-start: 0em;
    margin-block-end: 0em;
    z-index: 3;
}

.tractor-heading p.med-heading {padding: 2rem 0px 1rem 0px;}

/* sticky sidebar */

.content-container {
	margin: auto;
  display: flex;
    width: 100%;
    align-content: center;
    max-width: 80%;
    padding: 4rem 0px 0px 0px;
}
.content-container > * {
  width: 50%;
}

.left-content {
	z-index: 9;
  padding: 0px 5% 0px 5%;
}
.left-content p.first {padding: 0% 0px 0% 0px;}

.left-content p.first:first-letter {font-size: calc(20px + 0.2vw);}

.left-content p.last {padding: 0% 0px 0% 0px;}

@media only screen and (max-width: 1680px) {
	.left-content p.first:first-letter {font-size: 1.4em;}
}

.right-content {
  position: relative;
}
.right-content img {width: 100%;}

.show-on-mobile {display: none;}

@media only screen and (max-width: 823px) {
	#tree-img {
		position: absolute; 
		top: 20px;
		right: 20px; 
		z-index: 2;
		display: block; 
		width: 100%; 
		max-width: 70%; 
		filter: opacity(40%);
	}
	.content-container {
		display: block; margin: auto; max-width: 100%; padding: 0rem 0px 0px 0px;
	}
	.left-content {
    	padding: 0px 4rem; 
    	z-index: 3;
    	position: relative;
	}
		.inquire-tracor {
	padding: 10px 20px 10px 20px;
	font-size: 1rem; 
}

.show-on-mobile {
		display: block; 
		width: 100%; 
		margin: auto; 
		display: block;
		padding: 4rem 0px;
	}
	.show-on-mobile p {padding: 1rem 4rem 0px 4rem;}
	.show-on-mobile img {max-width: 100%; width: 100%; margin: auto; text-align: center;}
	.left-content {display: none}
	.right-content {display: none}
	
	.show-on-mobile p.first:first-letter {font-size: 1.4em;}
}

.section-one-content {
	width: 100%;
	margin: auto; 
	display: block; 
	text-align: center; 
	position: relative;
	padding: 4rem 0px 0rem 0px;
	max-width: 65%;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

#tree-img {
		position: absolute; 
		top: 20px;
		right: 20px; 
		z-index: 2;
		display: block; 
		width: 100%; 
		max-width: 70%; 
		filter: opacity(40%);
	}
	.content-container {
		display: block; margin: auto; max-width: 100%; padding: 0rem 0px 0px 0px;
	}
	.left-content {
    	padding: 0px 4rem; 
    	z-index: 3;
    	position: relative;
	}
		.inquire-tracor {
	padding: 10px 20px 10px 20px;
	font-size: 1rem; 
}

.show-on-mobile {
		display: block; 
		width: 100%; 
		margin: auto; 
		display: block;
		padding: 4rem 0px;
	}
	.show-on-mobile p {padding: 1rem 4rem 0px 4rem;}
	.show-on-mobile img {max-width: 100%; width: 100%; margin: auto; text-align: center;}
	.left-content {display: none}
	.right-content {display: none}
	
	.show-on-mobile p.first:first-letter {font-size: 1.4em;}

}

@media only screen and (max-width: 823px) {
	.section-one-content {
		max-width: 100%; 
		padding: 4rem 0rem 4rem 0rem;
	}
}
@media only screen and (max-width: 640px) {
	.tractor-heading {padding: 8rem 2rem 0px 2rem;}
	.tractor-heading .med-heading {font-size: 1.8rem}
}

@media only screen and (max-width: 418px) {
	.show-on-mobile p {padding: 1rem 2rem 0px 2rem; font-size: 1.1rem;}
	.show-on-mobile p.first:first-letter {font-size: 1.3em;}
}
/* Timeline */
.timeline-heading { 
	width: 100%; 
	padding: 6rem 2rem 6rem 2rem;
	margin: auto; 
	display: inline-block; 
	text-align: center; 
	position: relative;
}

.page-id-65955 .timeline-heading {
	width: 100%; 
	padding: 6rem 0rem 6rem 0rem;
	margin: auto; 
	display: inline-block; 
	text-align: center; 
	position: relative;
}

.timeline {
	width: 100%; 
	margin: auto; 
	display: inline-block; 
	text-align: center; 
	position: relative;
	padding: 0px 0px 6rem 0px;
}

.rotated-heading {
	transform: rotate(-90deg);
	font-size: 0.9rem;
	position: absolute;
	text-transform: uppercase;
	top: 80px;
	font-weight: 700 !important;
	left:0px;
	letter-spacing: 0.1rem;
}

.timeline-slider {
	list-style: none; 
	width: 95%;
	margin: auto auto auto 5% !important;
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    overflow: visible;
    padding: 6rem 0px 6rem 0px;
    overflow: hidden;
}

.timeline-slider .flickity-prev-next-button.next {
    right: 30px;
    top: 50px;
    background: transparent !important;
    outline: none !important;
}

.timeline-slider .flickity-prev-next-button.previous {
    left: unset !important;
    right: 130px;
    top: 50px;
    background: transparent !important;
    outline: none !important;
}

 .col-flex-bar {
    width: 100%;
    float: left;
    max-width: 200px;
    z-index: 10;
    position: relative;
    margin: -80px auto auto 4rem;
    display: flex;
    align-items: center;
}

.progress-bar-container {
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%) inset;
    clear: both;
    position: relative;
    width: 100%;
    text-align: center;
    height: 2px;
    margin: auto auto auto 15px;
    display: block;
}

.superscript-bar {
	margin: -5px auto auto auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.86rem;
    font-weight: 500;
}

.progress-bar {
    height: 2px;
    width:0;
    margin: 0px 0px 0px 0px;
    background: #a07f50;
}

.timeline-slider .flickity-viewport {overflow: visible !important;}

.timeline-slider .carousel-cell {
	display: inline-block;
	position: relative;
	width: 40%;
}

.timeline-slider .carousel-cell .copy-block {
	margin: auto; 
	width: 100%;  
	max-width: 80%;
	height: auto; 
	min-height: 300px;
	position: relative;
	padding: 1rem;
	border: 1px solid #a07f50;
	z-index: 8;
}

.timeline-slider .carousel-cell:nth-child(1) .inner-border,
.timeline-slider .carousel-cell:nth-child(2) .inner-border,
.timeline-slider .carousel-cell:nth-child(4) .inner-border,
.timeline-slider .carousel-cell:nth-child(5) .inner-border {
	border: 1px solid #a07f50;
	padding: 2rem;
	min-height: 290px;
}

.timeline-slider .carousel-cell:nth-child(3) .inner-border {
	border: 1px solid #ffffff;
	padding: 2rem;
	min-height: 290px;
}

.timeline-slider .carousel-cell:nth-child(1) .inner-border:after,
.timeline-slider .carousel-cell:nth-child(2) .inner-border:after,
.timeline-slider .carousel-cell:nth-child(4) .inner-border:after,
.timeline-slider .carousel-cell:nth-child(5) .inner-border:after {
  content: '';
  background: transparent;
  border: 1px solid #a07f50;
  top: 20px;
  right: 12px;
  bottom: 20px;
  left: 12px;
  position: absolute;
  z-index: -1;
}

.timeline-slider .carousel-cell:nth-child(3) .inner-border:after {
  content: '';
  background: transparent;
  border: 1px solid #ffffff;
  top: 20px;
  right: 12px;
  bottom: 20px;
  left: 12px;
  position: absolute;
  z-index: -1;
}

.timeline-slider .carousel-cell p.large-heading {
	margin-block-start: 0em;
    margin-block-end: 0em;
}

.timeline-slider .carousel-cell p.body-copy {padding: 0px 0px 0px 20px;}

.timeline-slider .carousel-cell:nth-child(1) p.large-heading,
.timeline-slider .carousel-cell:nth-child(1) p.body-copy,
.timeline-slider .carousel-cell:nth-child(2) p.large-heading,
.timeline-slider .carousel-cell:nth-child(2) p.body-copy,
.timeline-slider .carousel-cell:nth-child(4) p.large-heading,
.timeline-slider .carousel-cell:nth-child(4) p.body-copy,
.timeline-slider .carousel-cell:nth-child(5) p.large-heading,
.timeline-slider .carousel-cell:nth-child(5) p.body-copy {color: #4d5656;}

.timeline-slider .carousel-cell:nth-child(3) p.large-heading,
.timeline-slider .carousel-cell:nth-child(3) p.body-copy {color: #ffffff;}

.timeline-slider .carousel-cell:nth-child(1) .copy-block {background: #ece9e2}
.timeline-slider .carousel-cell:nth-child(2) .copy-block {background: #f9f8f5}
.timeline-slider .carousel-cell:nth-child(3) .copy-block {background: #4e5656}
.timeline-slider .carousel-cell:nth-child(4) .copy-block {background: #ece9e2}
.timeline-slider .carousel-cell:nth-child(5) .copy-block {background: #f9f8f5}
.timeline-slider .carousel-cell:nth-child(6) .copy-block {background: #858a87}

.timeline-slider .carousel-cell:nth-child(even) {margin: 150px auto auto auto;}

.timeline-slider .carousel-cell:nth-child(even) .illustration {
	width: 100%;
	display: block;
	position: absolute; 
	bottom: -80px; 
	right: -50px; 
	z-index: 9;
}

.timeline-slider .carousel-cell:nth-child(odd) .illustration {
	width: 100%;
	display: block;
	position: absolute; 
	top: -80px; 
	right: -50px; 
	z-index: 9;
}

.timeline-slider .carousel-cell:nth-child(1) .gold-line-slider,
.timeline-slider .carousel-cell:nth-child(3) .gold-line-slider {
	position: absolute;
	width: 20%;
	right: -10%;
	margin: auto;
	z-index: 8;
	display: block;
	height: 1px;
	background: #a07f50;
	bottom: 70px;
}

.timeline-slider .carousel-cell:nth-child(2) .gold-line-slider,
.timeline-slider .carousel-cell:nth-child(4) .gold-line-slider {
	position: absolute;
	width: 20%;
	right: -10%;
	margin: auto;
	z-index: 8;
	display: block;
	height: 1px;
	background: #a07f50;
	top: 100px;
}

.timeline-slider .carousel-cell:nth-child(4) .illustration {max-width: 230px; filter: opacity(50%);}

.timeline-slider .carousel-cell:nth-child(1) .illustration {max-width: 300px; filter: opacity(80%);}

.timeline-slider .carousel-cell:nth-child(3) .illustration,
.timeline-slider .carousel-cell:nth-child(2) .illustration,
.timeline-slider .carousel-cell:nth-child(5) .illustration {max-width: 230px; filter: opacity(70%);}

@media only screen and (max-width: 823px) {
	.timeline-slider .carousel-cell {width: 70%;}
	.timeline-slider {
		width: 95%; 
		margin: auto auto auto 5% !important;
	}
	.timeline-heading, .page-id-65955 .timeline-heading { background: #4e5656; margin: auto auto 6rem auto; padding: 4rem 2rem 6rem 2rem;}
	.timeline-heading p {color: #ffffff; font-size: 1.8rem;}
	.timeline-heading .small-heading {font-size: 1.8rem;}
	.timeline .show-on-mobile {display: none;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.timeline-heading, .page-id-65955 .timeline-heading { background: #858a87; margin: auto auto 6rem auto; padding: 4rem 2rem 6rem 2rem;}
	.timeline-heading p {color: #ffffff; font-size: 1.8rem;}
	.timeline-heading .small-heading {font-size: 1.8rem;}
	.timeline .show-on-mobile {display: none;}
}

@media only screen and (max-width: 640px) {
	.timeline .show-on-mobile {padding: 0rem 2rem; display: block;}
	.timeline-heading { margin: auto ;}
	.timeline-slider .carousel-cell {width: 90%;}
	.timeline-slider {
		width: 100%; 
		margin: auto !important;
	}
	.timeline-slider {padding: 10rem 0px 6rem 0px;}
	.timeline {padding: 4rem 0px 6rem 0px;}
	
	.rotated-heading {display: none;}
	.timeline-slider .carousel-cell p.body-copy {padding: 0px 0px 0px 0px;}
	
	.timeline-slider .carousel-cell:nth-child(1) .illustration {max-width: 234px; top: -50px; right: -27px;}
	.timeline-slider .carousel-cell:nth-child(3) .illustration {max-width: 187px; top: -76px; right: -27px;}
	.timeline-slider .carousel-cell:nth-child(even) {margin: 100px auto auto auto;}
	
	.col-flex-bar {
    width: 100%;
    float: unset;
    clear: both;
    max-width: 150px;
    top: 166px;
    z-index: 9;
    left: 0px; 
    right: 0px;
    position: absolute;
    margin: auto;
    display: block;
    align-items: center;
	}
	.col-flex-bar .col-1-70 {width: 100%;}
	.col-flex-bar .col-1-30 {display: none;}
	.timeline-slider .flickity-prev-next-button.previous {
		right: unset !important;
    left: 30px !important;
	}
	.progress-bar-container {margin: auto;}
	
	.timeline-slider .carousel-cell:nth-child(1) .gold-line-slider, .timeline-slider .carousel-cell:nth-child(3) .gold-line-slider {
		bottom: 146px;
	}
}

/* Machine Section */
.machine-section {
	display: inline-block;
	width: 100%;
	margin: auto;
}

.machine-section p.med-heading {
	margin-block-start: 0em;
    margin-block-end: 0em;
}

.machine-section .background-image {
	width: 100%;
	margin: auto;
	display: block;
	z-index: 2;
	height: 70vh;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
}

.machine-section .content-block {
	width: 100%;
	margin: -100px auto auto auto;
	display: block;
	max-width: 80%;
	text-align: center;
	position: relative;
	background: #f5f2ec;
	padding: 2rem;
	z-index: 1;
}

.col-1-50.padding-left {padding: 0px 0px 0px 30px;}

.machine-section .content-block .inner-border {
	border: 1px solid #a07f50;
	padding: 2rem;
	height: auto;
	position: relative;
}

.machine-section .content-block .inner-border:after {
  content: '';
    background: transparent;
    border: 1px solid #a07f50;
    top: 2px;
    right: 4px;
    width: 100%;
    height: 99%;
    bottom: 20px;
    left: -4px;
    position: absolute;
    z-index: 2;
}

@media only screen and (max-width: 823px) {
	.machine-section .content-block {
		margin: -200px auto auto auto;
		max-width: 90%;
	}
	.machine-section .col-flex {display: block;}
	.machine-section .col-flex .col-1-50 {width: 100%;}
	.col-1-50.padding-left {padding: 0px;}
}
@media only screen and (max-width: 640px) {
	.machine-section .content-block{padding: 1rem;}
}
/* Before After Slider */
.before-after {
	width: 100%;
	padding: 4rem 0px 6rem 0px;
	margin: auto;
	display: inline-block;
	position: relative;
}

.page-template-template-tractor .container {
  max-width: 100%;
  width: 100%;
  display: block; text-align: center;
  margin: auto;
}

#comparison {
	width: 100%;
	height: 600px;
	overflow: hidden; 
  position: relative;
}

.page-template-template-tractor-v2 figure,
.page-template-template-tractor figure { 
  position: absolute;
	background-image: url(https://fordfieldandriverclub.com/wp-content/uploads/2021/12/full-found-tractor1.jpg);
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	font-size: 0;
	width: 100%;
	height: 600px;
	margin: 0; 
}

#divisor { 
	background-image: url(https://fordfieldandriverclub.com/wp-content/uploads/2021/12/restored-tractor.png);
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	position: absolute;
	width: 50%; 
	bottom: 0; 
	height: 100%;
 }
 
#divisor::before,
#divisor::after {
    content: '';
    position: absolute;
    right: -2px;
    width: 0px;
    height: calc(50% - 25px);
    background: white;
    z-index: 3;
  }
  #divisor::before {
    top: 0;
  }
  #divisor::after {
    bottom: 0;
  }

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  background:#a07f50;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
 }
 
  #handle::before,
  #handle::after {
    content: '';
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
  }
  #handle::before {
    border-right: 6px solid white;
    left: 50%;
    margin-left: -17px;
  }
  #handle::after {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -17px;
  }

input[type=range]{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 50%;
	left: -25px;
  transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
  z-index: 2;
  }
  
  input[type=range]:focus,
  input[type=range]:active {
    border: none;
    outline: none;
  }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid #a07f50;
   box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}

input[type=range]::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}

@media only screen and (max-width: 823px){
	.page-template-template-tractor figure, 
	.page-template-template-tractor-v2 figure, 
	#comparison {height: 500px;}
	
	.page-template-template-tractor figure, 
	.page-template-template-tractor-v2 figure {background-position-y: 14px;}
}

@media only screen and (max-width: 416px){
	.page-template-template-tractor figure, 
	.page-template-template-tractor-v2 figure, 
	#comparison {height: 400px;}
	
	#divisor {background-position-x: -135px;}
	
	.page-template-template-tractor figure,
	.page-template-template-tractor-v2 figure {background-position-x: -154px;}
}

/* The Ford Section */
.ford-section {
	width: 100%; 
	margin: auto;
	display: inline-block;
	height: auto;
	background-size: cover !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
}

.ford-logo-sm {
	width: 100%; 
	margin: auto; 
	display: block; 
	text-align: center; 
	max-width: 300px;
	padding: 1rem 0px 0px 0px;
}
@media only screen and (max-width: 640px){
	.ford-logo-sm {max-width: 255px}
}
.ford-section .body-copy {
	padding: 8rem 0px 0px 0px;
}

.ford-section .med-heading {
	padding: 6rem 0px 0px 0px; 
	max-width: 500px;
	width: 100%; 
	margin: auto; 
	text-align: center;
}

@media only screen and (max-width: 1280px){
	.ford-section .med-heading {padding: 8rem 0px 0px 0px; }
	.ford-section .body-copy {padding: 3rem 0px 0px 0px;}
}

.ford-section .link-container {
	display: inline-block; 
	position: relative; 
	width: 100%;
	margin: auto;
	padding: 12rem 0px 4rem 0px;
	text-align: center;
	list-style: none;
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

.ford-section .link-container li {display: inline; margin: 0px 40px 0px 40px;}

.ford-section .link-container li a {
	color: #ffffff; 
	text-decoration: none;
	transition: 0.3s ease all;
	cursor: pointer;
}

.ford-section .link-container li a:focus, 
.ford-section .link-container li a:visited {color: #ffffff;}

.ford-section .link-container li a:hover {color: #a07f50}

@media only screen and (max-width: 640px) {
	.ford-section .med-heading {font-size: 1.8rem; padding: 4rem 0px 0px 0px; }
}

@media only screen and (max-width: 674px) {
	
	.ford-section .link-container li {display: block; text-align: center; width: 100%;}
	
	.ford-section .link-container li:nth-child(1),
	.ford-section .link-container li:nth-child(2) {margin: auto auto 30px auto;}
	.ford-section .link-container li:nth-child(3) {margin: auto;}
}