* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 	{}
body 	{line-height:1; font-family: 'Overpass', sans-serif;  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

h1		{}
h2		{}
h3		{}
h4		{}
h5		{}
h6		{}

p		{line-height: 1.4em; margin-bottom: 1.1em}

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner 	{width:1220px; padding: 0 30px; max-width:100%; margin:0 auto; }

a		{color: #741B68}

.logo	{width: 160px; display: block;}

.wrapper		{max-width: 100%; margin: auto; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%); border-top-left-radius: 5px; border-top-right-radius: 5px;}
.wrapper .inner	{width: 1160px; padding: 0 20px}

.home .wrapper	{padding:50px 30px;}

/* HEADER */
header 			{padding: 15px 0; position: relative; z-index: 22; background-color: #ffffff}
header .inner 	{display: flex; justify-content: space-between; align-items: center;}

.contact-bar			{background-color:#741b68; border-radius: 5px; display: flex; align-items: center; padding:0 13px 0 13px; height: 42px;}
.contact-bar a			{font-size: 18px; font-weight: 600; text-decoration: none; color: #ffffff; display: flex; align-items: center; margin:0 13px;}
.contact-bar a:hover	{opacity: 0.5}
.contact-bar img		{margin-right: 8px;}

/* NAV */
nav		{position: fixed; left: -999999px;}
nav ul	{}

nav					{position: fixed; left: 0; top:0; background-color: #efefef; width:100%; height: 100%; z-index: 20; display: flex; align-items: center; justify-content: center; overflow-y: auto; transform: scale(0.9); opacity: 0; visibility: hidden;}
nav ul				{flex-direction: column; text-align: center; font-size: 30px;}
nav ul li			{margin: 20px 0;  margin: 4vh 0;}
nav ul li a			{text-decoration: none}
nav ul li a:hover	{text-decoration: underline}
nav ul li.active a	{font-weight: 700}
nav.open			{transform: scale(1); opacity: 1; visibility: visible; transition: 0.2s ease-out; z-index: 20}

/* INTRO SECTION */
.intro-section		{display: flex; justify-content: space-between; margin: auto; width: 960px; max-width: 100%;}
.intro-section h1	{font-weight: 700; font-size: 32px; line-height: 1.2em; color:#741b68; margin-bottom: 0.5em}
.intro-section p	{font-size: 17px;}

.intro-left			{width: 610px; max-width: 100%; flex-shrink: 0}
.intro-buttons		{width:245px; padding-left: 25px; display: flex; flex-direction: column}
.intro-buttons .btn	{margin-bottom: 15px; font-size: 16px;}

/* TABLE CONTAINER */
.table-container			{margin: 20px 0 0; box-shadow: 0 0 10px rgba(0,0,0,0.16); overflow: hidden; border-radius: 6px;}
.table-container table		{table-layout: fixed; font-size: 14px;}
.table-container table th	{padding:14px 10px 12px 10px; background-color: #00A852; color: #ffffff; font-size: 16px; border: 1px solid #ffffff}
.table-container table td	{padding: 10px; text-align: center; border:1px solid #ffffff; line-height: 1.3em}

.table-container table tr td				{background-color:#F1E8EF}
.table-container table tr:nth-child(odd) td	{background-color:#E5F6ED}

.table-container table tr.button-row td			{padding: 20px;}
.table-container table tr.button-row td .btn	{font-weight: 700; font-size: 16px;}

/* MOBILE NAV */
.hamburger-container			{width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; background-color: #00A852; border-radius: 5px; position: relative; z-index: 50}
.hamburger 						{width: 22px; height: 16px; z-index: 50; cursor: pointer; display: block; position: relative;}
.hamburger span 				{width: 100%; display: block; height: 2px; background-color: #ffffff; position: absolute; top: 0; left: 0; transition: 0.2s ease-out; }
.hamburger span:nth-child(1) 	{}
.hamburger span:nth-child(2) 	{top: 7px;}
.hamburger span:nth-child(3) 	{top: 14px;}

.hamburger.open 	 				{}
.hamburger.open span:nth-child(1) 	{top: 7px; transform: rotate(45deg) scaleX(-1);}
.hamburger.open span:nth-child(2) 	{opacity: 0; transform: scale(0)}
.hamburger.open span:nth-child(3) 	{top: 7px; transform: rotate(-45deg) scaleX(-1);}

/* TEXT INTRO */
.text-intro-section	{padding: 60px 0}
.text-intro		{text-align: center}
.contact-section h1,
.text-intro h1	{font-size: 40px; color: #741b68; margin-bottom: 0.5em;}
h2	{font-size: 30px; color: #333333; margin-bottom: 0.5em;}

.text-intro ul,
.text-intro ol,
.text-intro p	{width: 860px; max-width: 100%; margin: auto; font-size: 18px; line-height: 1.2em; margin-bottom: 1.2em;}

.privacy .text-intro {text-align: left !important;}


.about-text-section				{}
.about-text-section	.cols		{display: flex;}
.section-image 					{width: 50%; background-size: cover; background-position: center;}
.about-text-section	.text-col	{width: 50%; padding:4vw 5vw; display: flex; align-items: center;}

.about-text-section 			{color: #ffffff}

.about-text-section p.intro		{font-size: 20px;}

.colour-section	{background-color: #741b68}

ul.big		{font-size: 18px; margin: 1em}
ul.big li	{margin-bottom: 15px;}

.pullout 		{background-color: #ffffff; padding: 30px 40px; border-radius: 20px; color: #333333; margin-top: 50px; box-shadow: 0 0 20px rgba(0,0,0,0.5); position: relative; border:5px solid #00A852}
.pullout ul		{font-size: 16px; line-height: 1.4em; margin: 1em}
.pullout ul li	{margin-bottom: 0.5em}

.pullout img	{position: absolute; left: -20px; top:-20px; width: 50px;}

/* CLIENTS */
.main-clients-section				{background-color: #ffffff; text-align: center; padding: 60px 0}
.other-clients-section				{background-color: #f1f1f1; text-align: center; padding: 60px 0}
.clients-list 						{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; list-style: none}
.clients-list li					{margin: 15px; width: 180px; max-width: 100%;}
.clients-list li a:hover			{opacity: 0.8}

.other-clients-list li			{width: auto; padding: 10px; margin: 10px; border-radius: 5px; background-color: #ffffff;}
.other-clients-list li img		{max-height: 50px}

.clients-text-intro-section		{background-color: #741b68;}
.clients-text-intro-section h1	{color: #ffffff}
.clients-text-intro-section h2	{color: rgba(255,255,255,0.65)}

/* TESTIMONIALS */
.testimonial-carousel-section	{padding: 60px 0}
.testimonial-carousel-container	{position: relative;}
.testimonial-carousel			{width: 850px; margin: auto; max-width: 100%; padding: 0 90px;}
.testimonial-carousel .slide	{text-align: center;}
.testimonial-carousel img		{margin-left: auto; margin-right: auto}
.testimonial-carousel img.quote	{margin: 20px auto}
.testimonial-carousel cite		{display: block; margin-bottom: 20px; font-weight: 700}

.slick-arrow	{font-size: 0; background-color: #741b68; position: absolute; top:50%; margin-top: -25px;  background-image: url(/_assets/icon-slick.png); background-size: 10px auto; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; border-radius: 50px;}
.slick-prev		{transform: rotate(180deg); left: 0}
.slick-next		{right: 0}

/* BLOG */
.filter				{display: flex; justify-content: center; margin-top: 1em; list-style: none}
.filter li			{margin: 5px; line-height: normal}
.filter li a		{display: block; padding:10px 15px 8px 15px; border-radius: 5px; font-size: 13px; text-decoration: none; background-color: rgba(116,27,104,0.1);}
.filter li a:hover	{background-color: rgba(116,27,104,0.2);}
.filter li.active a	{background-color: rgba(116,27,104,1); color: #ffffff}

.blog-item							{display: flex; border-bottom: 1px solid #dddddd; padding-bottom: 40px; margin-bottom: 40px;}
.blog-item .blog-image				{width: 250px; height: 180px; flex-shrink: 0; background-size: cover; background-position: center; margin-bottom: 1.5em; margin-right: 30px;}
.blog-item h2						{font-weight: 400; color: #711C66}
.blog-item p						{font-size: 14px;}
.blog-item .btn						{display: inline-block; width: 150px; font-weight: 700}

.blog-item.most-recent				{display: flex; flex-direction: column}

.blog-item.most-recent .blog-image	{height: 300px; width: 100%; margin-right: 0}

.blog-listing .cols			{display: flex; justify-content: space-between}
.blog-listing .col-left		{width: 68%;}
.blog-listing .col-right	{width:calc(32% - 40px);}

.blog-post				{padding-bottom: 50px;}
.blog-post .blog-image	{height: 300px; background-size: cover; background-position: center; margin-bottom: 2em}

.blog-post ol,
.blog-post ul	{line-height: 1.4em; margin: 1em; margin-left: 2.5em}

.blog-post ol li,
.blog-post ul li	{margin-bottom: 0.75em}

.archive				{background-color: #ffffff; padding: 30px; position: sticky; top: 0}
.archive h3				{margin-bottom: 1em; font-size: 20px}
.archive .filter		{flex-wrap: wrap; justify-content:flex-start; margin: 0; width: calc(100% + 10px); margin-left: -5px;}
.archive .filter li		{margin:5px;}
.archive .filter li a	{font-size: 12px;}

.text-intro-section-blog .text-intro p	{width: 100%; font-size: 14px;}

.blog-post table	{margin: 1em 0 2em}
.blog-post table td	{padding: 15px; background-color: #ffffff; border:1px solid #dddddd}

/* FAQS */
.faqs-section				{padding: 60px 0}

.faq-item h2				{font-size:16px; color: #ffffff; position: relative; cursor: pointer; line-height: 1.4em; margin-bottom: 0.8em; background-color: #c1c1c1; padding: 10px 40px 10px 20px;}
.faq-item h2:hover			{opacity:0.8;}
.faq-item h2:after			{position:absolute; right: 20px; top: 50%; margin-top: -10px; width: 15px; height: 21px; background-image: url(/_assets/arrow-right.png); background-size: cover; content: ''; display: block; transition: 0.2s ease-out}
.faq-item.active h2			{background-color: #00a852;}
.faq-item.active h2:after	{transform: rotate(90deg)}
.faq-text					{display:none; padding: 10px 20px;}

.faq-text ul,.faq-text ol   {margin-left:17px; margin-bottom:20px; line-height:1.4em; font-size:16px;}
.faq-text li                {margin-bottom:5px;}

section.purple								{background-color: #711C66; color: #ffffff}
section.purple ul li a,	
section.purple p a							{color: #ffffff}
section.purple h1							{color: #ffffff}
section.purple .faq-item h2					{background-color:#ffffff; color: #741b68;}
section.purple .faq-item h2:after			{background-image: url(/_assets/arrow-right-purple.png)}
section.purple .faq-item.active h2			{background-color: #00a852; color: #ffffff;}
section.purple .faq-item.active h2:after	{transform: rotate(90deg); background-image: url(/_assets/arrow-right.png);}

/* CONTACT US */
.contact-section 			{padding: 60px 0}
.contact-section .cols		{display: flex; justify-content: space-between;}
.contact-section .col-left	{width: 48%;}
.contact-section .col-right	{width: 48%;}

.contact-section .col-right iframe	{width: 100%; height: 100%;}

.contact-section .contact-bar		{flex-direction: column; height: auto; align-items: flex-start; padding: 30px 40px;}
.contact-section .contact-bar p		{color: #ffffff}
.contact-section .contact-bar a		{margin: 0 0 20px 0; font-size: 20px;}
.contact-section .contact-bar hr	{border-color: rgba(255,255,255,0.5); width: 100%; margin-bottom: 30px;}

/* VIDEO PAGE */
.imac-container			{height: 48.5vw; max-height: 853px; padding-top: 1px; margin-bottom: 40px; width: 100%; background-image: url(/_assets/img-monitor.png); background-size: contain; background-repeat: no-repeat; text-align: center; background-position: center top; position: relative;}
.video-container-outer	{width: 59vw; max-width: 1050px; margin: auto; margin-top: 2.5vw}

.video-container 		{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.video-buttons        {position: relative; width: 100%; top: 70px; display: flex; justify-content: space-between; padding: 0 130px; }


/***********************************/
/****** SELF DRIVE INFO PAGE ******/
/**********************************/

.col-6	{width:16.667%; padding: 10px; font-size: 16px;}
.col-7	{width:14.28%; padding: 10px; font-size: 16px;}

/** MONITOR **/

.monitor							{padding:175px 0 0 0; position: relative;}
.monitor-container					{background-image:url(/_assets/img-monitor-2.png); width: 100%; padding-top: 76.5%; background-position:top center; background-size: cover; position: relative; left: 0; top: 0;}
.monitor-container .content			{position:absolute; left: 0; top: 0; padding: 60px 80px 70px 80px}	
.monitor-container .col-1			{text-align:center; padding: 0;}
.monitor-container .col-1 h1		{font-size:40px; font-weight: 800; position: relative; margin-bottom: 15px; color: #ef0000;}
.monitor-container .col-1 h1 img	{display:inline-block; vertical-align: middle; margin-left: 20px; margin-top: -10px; width:40px; height: auto;}

.monitor-inner 	{display: flex;}
.video-col 		{width:60%;}

.bullets-col 			{width:20%; font-size: 16px; padding-top: 30px; padding-left: 15px;}
.bullets-col ul 		{font-size:22px; color:#00a852;}
.bullets-col ul li 		{margin-bottom: 15px; line-height: 1.3em;}
.bullets-col ul li a 	{color:#741b68; text-decoration: none}
.bullets-col ul li a:hover {color: #00a852;}

.abifc-text	{transform: rotate(-25deg) translate(-20px); margin-top: 40px; text-align: center; color: red; font-size: 22px; line-height: normal}

.cta-col 		{width:20%; padding-left: 20px; padding-top: 30px;}
.cta-col p 		{font-size: 21px; font-weight: 700; background-color: #05a751; line-height: 1.2em; color: #ffffff; padding: 20px; border-radius: 5px;}
.cta-col img 	{width:120px;}

.monitor .col-row		{margin:auto;}
.monitor .video			{position: relative;}
.monitor .video	video	{width: 100%; height: auto}

.monitor .btn-icon i	{background-image: url(/_assets/question-green.png); cursor: help;}

.monitor .inner	{position: relative;}

.monitor .sd-logo-1	{position: absolute; right: 20px; top:-120px; width: 200px;}

.hand			{width:257px; height: 256px; position: absolute; left: 50%; margin-left: -40px; animation-timing-function: ease-out; animation-name:hand; animation-duration: 1s; animation-fill-mode: forwards;}

@keyframes hand	{
	0%		{top: -300px; transform: rotate(40deg)}	
	100%	{top: -255px;}	
}

span.drive		{font-weight:800; color: #741b68;}
span.drive em	{font-weight:800; color: #00a852;}
span.drive.tool	{color: #000;}

.buttons					{display: flex; justify-content: space-around; width:calc(100% - 120px); margin: auto;}

.monitor-buttons			{position: absolute; width: 100%; bottom: 50%; margin-bottom: -191px; height: 160px; text-align: center;}
.monitor-buttons p			{font-size:20px; margin: 20px 0}
.monitor-btn-holder			{width:calc(25% - 20px); position: relative;}
.monitor-btn-holder .btn	{padding-left:15px; text-align: left; width: 100%;}
.tooltip					{background-color:#ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.5); padding: 15px; position: absolute; top:107%; width: 140%; text-align: left; opacity: 0; visibility: hidden; transition: 0.3s ease-out; border-radius: 4px; z-index: 20}
.tooltip.active				{opacity: 1; visibility: visible;}
.tooltip p					{font-size:12px; line-height: 1.4em; margin: 0}
.tooltip .arrow				{width: 0; height: 0; border-style: solid;border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -10px; right: 33%;}
.monitor-buttons .btn.purple-grad		{height: 100%; font-size: 15px;}

.btn-icon i 				{width: 25px; height: 25px; display: block; background-size: cover; position: absolute; right: 14px; top: 50%; margin-top: -12px; transition: 0.2s ease-out;}

.sd-section					{padding: 100px 0;}
.sd-section h1				{font-size: 35px; margin-bottom: 0.5em}
.sd-section a				{color: #ffffff}

.purple-section				{background-color: #741b68; color: #ffffff}
.sd-section .btn			{background-color: #ffffff; color: #741b68; font-weight: 700; font-size: 20px; padding:20px 25px 18px; box-shadow: inset 0 -2px 2px rgba(0,0,0,0.2)}
.purple-section .btn:hover	{color: #ffffff}

.white-section .btn		{background-color: #741b68; color: #ffffff}

.white-section a	{color: #741b68}


.purple-text-18	{font-size:18px; color: #741b68;}
table.pricing-table th	{background-color:#741b68; color: #ffffff; font-size: 18px; text-align: left; padding:10px 0px 10px 7px;}
table.pricing-table td	{color:#741b68; padding: 10px 0px 10px 7px; text-align: left; background-color: #efeeee; border-bottom:2px solid #ffffff;}



.pricing-col h2	{margin:15px 0 25px; font-size: 18px; color: #741b68;}

ul.tick-list			{list-style:none; font-size: 16px;}
ul.tick-list li			{position:relative; margin-bottom: 15px; padding-left: 25px;}
ul.tick-list li:before	{width:18px; height: 15px; content: ''; display: block; position: absolute; left: 0; top: 0; background-image: url(/_assets/icon-tick.png); background-size: cover;}

.col-1.disclaimer	{padding:0 40px;}
.col-1.disclaimer p	{font-size:14px;}

.pricing-section		{background-color: #ffffff; padding:40px 20px; margin: 30px 0; position: relative;}
.pricing-section h2		{text-align: center; margin-bottom: 1em; display: flex; justify-content: center; align-items: center; margin-left: 30px;}
.pricing-section h3		{font-size: 20px; margin-bottom: 0.65em}
.pricing-section .cols	{display: flex; justify-content: space-between}
.pricing-section .col	{width:31%}

.col-pricing-image img	{margin-bottom: 15px;}
.col-pricing-image p	{font-size: 16px;}

.sd-logo-2				{width: 150px; position: absolute; left: 20px; top:20px}

/* STEPS */
.steps-container							{margin:50px 0}
.steps-container .col-row					{display: flex}
.steps-container .number					{width:50px; height: 50px; text-align: center; border-radius: 50px; background-color: #00a852; line-height: 50px; color: #ffffff; font-size: 20px; font-weight: bold; margin: auto; margin-bottom: 10px; z-index: 10; position: relative}
.steps-container .number-cell				{text-align:center; position: relative;}
.steps-container .number-cell:after			{height:2px; width:100%; left: 50%;  top: 35px; margin-left: 0; display: block; position: absolute; content: ''; background-color: #ffffff; z-index:9}
.steps-container .number-cell.last:after	{display:none;}
.steps-container .number-cell p				{font-size:16px; font-weight: bold;}
	
.steps-container.alt .number-cell:after		{background-color:#741b68;}

.btn.purple-grad	{font-size: 19px; font-weight: 700; color: #ffffff; text-decoration: none; padding: 20px 24px; border-radius: 4px; position: relative; transition: 0.1s ease-out; display: inline-block; cursor: pointer; text-transform: none}
.purple-grad	{color:#ffffff !important; box-shadow: 0 3px 0 #290824;}

.btn.top-btn			{width: 100%; height: 100%; border-radius: 0;  background-color: transparent; box-shadow: 0 0 8px rgba(0,0,0,0.5); position: relative; z-index: 2; padding: 20px; border: 2px solid #ffffff}
.btn.top-btn:hover,
.btn.top-btn:hover strong {color: #ffffff !important}

.btn.icon		{display: flex; align-items: center; justify-content: center; line-height: normal !important}
.btn.icon div 	{background-color: #ffffff; padding: 5px; border-radius: 7px; margin-left: 8px;}
.btn.icon svg	{width: 22px; display: block; height: auto;}

/***********************************/
/**********************************/
/*********************************/


/* FOOTER */
footer					{padding: 30px 0; background-color: rgb(241,241,241);}
footer .inner			{display: flex; justify-content: space-between; align-items: center;}
footer ul				{display: flex; list-style: none; font-size: 16px;}
footer ul li			{margin-left: 15px;}
footer ul li a			{text-decoration: none}
footer ul li a:hover	{text-decoration: underline}

/* BUTTONS */
.btn		{font-weight: 300; font-size: 14px; text-transform: uppercase; text-align: center; border:1px solid #ffffff; box-shadow: 0 3px 3px rgba(0,0,0,0.16); border-radius: 5px; padding: 10px; background-color: #711C66; color: #ffffff; text-decoration: none; line-height: 1.3em}
.btn strong	{font-weight: 700}

.btn.green	{background-color: #00A852;}

.btn:hover	{background-color: #333333 !important;}

/* FORM STYLES */
.form-container			{}
.form-row				{}
.form-cell				{}

input[type="text"]		{}
input[type="password"]	{}
input[type="submit"]	{}
textarea				{}

/* SELECT CSS */
.select-css				{}

/* LEGACY COOKIE BAR */
.cookieBar              {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;}
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }




/* the-ultimate-checklist */


.the-ultimate-checklist {position: absolute; top: 0; left: 0; width: 100%; height: 100;}