.wow {visibility:hidden}
.button {    transition: all .2s ease;    -webkit-transition: all .2s ease;height:60px;line-height:60px;font-size:20px}
.button:hover {background-color:#d30004;color:#fff;text-decoration:none}
.button.f-black:hover {border:1px solid #fff;background:transparent}
#hero {padding-top:77px;height:707px; background-image: url(../../images/ride-safe/hero-ride-safe.jpg);background-image: -webkit-image-set(url("../../images/ride-safe/hero-ride-safe.jpg") 1x, url("../../images/ride-safe/hero-ride-safe@2x.jpg") 2x);}
#hero h1 {margin-top:-60px;font-size:27px}
#hero h1 span {font-size:31px}
#subhero {padding:100px 0}
#subhero h2 {font-size:32px}
#subhero p {font-size:22px}
#subhero .l2 {font-size:27px}
#ride .ellipse span{left:0;font-size:75px;line-height:207px}
#ride .ellipse img {margin-top:-10px}
#ride .l1 {font-size:33px}
#ride .l2 {font-size:22px}
#ride .l3 {font-size:17px}
#ride .step1 {padding:70px 0;background-image: url(../../images/ride-safe/greybrick.jpg);background-image: -webkit-image-set(url("../../images/ride-safe/greybrick.jpg") 1x, url("../../images/ride-safe/greybrick@2x.jpg") 2x);}
#ride .step1 .text { margin-right: 300px;}
#ride .step .ellipse {width:262px}
#ride .step .text {  width:calc(100% - 262px);max-width:880px}
#ride .btm {margin-top:-47px;margin-left:262px;margin-right:371px}
#ride .btm span {font-size:20px}
#ride .btm > div {margin-right:50px;width:190px}
#ride .btm > div:last-child {margin-right:0}
#ride #yellowbar {font-size:25px;background:#fff200}
#ride .emp {bottom:0;right:0}
#ride .step2 {margin-top:140px}
#ride .step2 .item span {font-size:20px}
#ride .step2 .text {font-size:70px}
#ride .l0 {margin-top:-130px;transform:rotate(-5deg) translateX(-50px)}
#bottomcta .inner {padding:75px 15px;background-image: url(../../images/ride-safe/bg-bottomcta.png);}
#bottomcta p {font-size:37px}
#bottomcta .button {width:300px}
#tires .button {width:260px;bottom:7%;left:0;right:0}
#disclaimer p {color:#616161;font-size:15px;max-width:1111px}

@media (max-width: 1300px) {
   #ride .btm > div {margin-right:25px}
   #ride .btm span {font-size:18px}
}

@media (max-width: 1262px) {
   #hero {padding-top:0;height:500px}
   #hero .inner {transform:scale(0.7)}
}

@media (max-width: 1200px) {
	#ride .step .ellipse {width:180px}
	#ride .ellipse span {line-height:180px;font-size: 65px;}
	#ride .step1 .text {   margin-right: 300px}
	#ride .step .text { width:calc(100% - 180px) !important}
	#ride .btm {margin-left:180px}
	#tires img {margin-left:-25%;max-width:150% !important;width:150% !important}
}

@media (max-width: 1040px) {
	#bottomcta br {display:none}
}

@media (max-width: 992px) {
	#ride .step .text,
	#ride .btm	{margin-right:0 !important}
	#ride .emp {position:static;left:0;right:0;margin:auto}
	#ride .mb4 {width:50%}
	#ride .step2 .e1 {justify-content:center;flex-wrap:wrap}
	#ride .step2 .item span {font-size:18px}
	#tires .button {bottom:2%}
}

@media (max-width: 900px) {
   #hero {padding-top:0;height:400px}
   #hero .inner { transform: scale(0.6) translateY(-100px);}
}

@media (max-width: 768px) {
	#hero {height:510px;    background-position: right 1% bottom;}
    #hero .inner {width: 180%;    margin-left: -40%;}
	#hero .button{ transform: scale(1.4)}
	#subhero br {display:none}
	#ride .step .ellipse {width:100px}
	#ride .ellipse span {line-height:100px;font-size: 45px;}
	#ride .step .text {  width:calc(100% - 120px) !important;margin-left:20px}
	#ride .btm {margin-left:100px}
	#ride .btm > div {margin-right:20px;width:140px}
	#tires img {margin-left:-50%;max-width:200% !important;width:200% !important}
	
}

@media (max-width: 480px) {
	#subhero h2 {font-size:26px}
	#subhero p {font-size:18px}
	#subhero .l2 {font-size:20px}
	#subhero {padding:50px 0}
	#ride .step .ellipse {width:140px}
	#ride .ellipse span {line-height:140px;font-size: 48px;}
	#ride .step .text {  width:100% !important;margin-left:0 !important}
	#ride .step .flex {flex-direction:column}
	#ride .btm {flex-direction:column;margin-left:0}
	#ride .btm > div {width:100%}
	#ride .btm > div img {margin:0 auto}
	#ride .l1 {font-size:28px}
	#ride .l2,#ride #yellowbar {font-size:20px}
	#ride .step2 .item span {font-size:18px}
	#ride .l0 {    margin-top:0 !important;font-size: 50px;margin-top:-230px;    transform: rotate(-5deg) translateX(0);}
	#ride .step2 {margin-top:30px}
	#ride .step .flex.e1 {flex-direction:row}
	#bottomcta {margin-bottom:50px;padding-bottom:0}
	#bottomcta p {font-size:26px}
	#bottomcta .inner{padding:50px 15px}
	#bottomcta .button {width:250px}
	#tires .button {bottom:3%}
	#tires img {margin-left:-100%;max-width:300% !important;width:300% !important}
}