﻿.scroll-prompt,
.mb-text	{display: none}

/* IE10+ SPECIFIC STYLES GO HERE. IE10+ NO LONGER SUPPORT CONDITIONAL STATEMENTS IN THE HEAD OF A FILE */ 
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  

}

@media (min-width: 1700px) 
{
	.video-container-outer	{margin-top: 40px;}
}

@media (max-width: 1120px) 
{
	tr.btn-top-row td	{vertical-align: top}
	.btn.top-btn		{padding-left: 5px; padding-right: 5px;}
}
	
/* MOBILE STYLES */
@media (max-width: 1080px) 
{
	/* HEADER BAR */
	.contact-bar a	{font-size: 14px;}
	
	/* CLIENTS */
	.testimonial-carousel-section .text-intro,
	.main-clients-section .text-intro	{padding: 0 20px}

	/* SELF DRIVE PAGE */
	.monitor .tooltip p,
	.monitor .cta-col p		{font-size: 14px;}
	
	.bullets-col ul,
	.monitor-buttons p	{font-size: 16px;}
	
	.monitor-btn-holder					{width:calc(25% - 10px);}
	.btn-icon i							{width: 20px; height: 20px;}
	.monitor-buttons .btn.purple-grad	{padding:10px 40px 10px 15px;}

	
}

@media (max-width: 1020px) 
{
	.btn.top-btn		{padding-left: 5px; padding-right: 5px; flex-direction: column}
}

@media (max-width: 970px) 
{
	/* SELF DRIVE PAGE */
	.monitor-container .col-1 h1		{font-size: 28px;}
	.monitor-buttons p					{margin-bottom: 5px}
	.monitor-buttons .btn.purple-grad	{display: inline-flex; align-items: center}
	.monitor-container .content			{padding-left: 50px; padding-right: 50px;}
}

@media (max-width: 910px) 
{
	/* HOME INTRO */
	.intro-left		{width: calc(100% - 210px);}
	.intro-buttons	{width: 210px;}
	
	/* ABOUT PAGE */
	.about-text-section .cols		{flex-direction: column;}
	.section-image					{width: 100%; height: 65vw}
	.about-text-section .text-col	{width: 100%; padding: 40px 20px;}
	
	/* BLOG */
	.blog-listing .cols	{flex-direction: column;}
	.blog-listing .col-left	{width: 100%;}
	.blog-listing .col-right		{width: 100%; position: relative; margin-bottom: 40px;}

	.text-intro-section	{padding: 40px 0}
	.archive			{box-shadow: 0 0 20px rgba(0,0,0,0.05)}
	
}

@media (max-width: 900px) 
{

	/* SELF DRIVE PAGE */
	.sd-section					{padding: 60px 0}
	.hand						{height: auto; width: 190px;}
	.monitor					{padding-top: 109px;}
	.monitor-container			{background-image: none; padding:20px 0 0 0}
	.monitor-container .content	{padding: 0; position: relative;}
	.monitor-buttons			{position: relative; margin:30px 0; height: auto; bottom: auto;}
	.buttons					{width: 100%;}
	
	.monitor .sd-logo-1	{top: -73px;}
	
	.monitor-btn-holder:last-child .tooltip			{right: 0}
	.monitor-btn-holder:last-child .tooltip .arrow	{right: 5%}
	
	.first-section	{margin-top: 0}
	.steps-container .number-cell p	{font-size: 14px; line-height: 1.2em}
	.sd-section .btn				{font-size: 14px;}
	
	@keyframes hand	{
		0%		{top: -300px; transform: rotate(40deg)}	
		100%	{top: -200px;}	
	}
	
}


@media (max-width: 880px) 
{
    /* HEADER BAR */
	header				{padding-bottom: 0}
	header .inner		{flex-direction: column; padding: 0; align-items: flex-start}
	header .contact-bar	{width: 100%; justify-content: center; border-radius: 0; margin: 15px 0 0}
	header .logo		{margin-left: 15px;}
	.hamburger-container	{position: absolute; right: 20px; top:20px}
	
	/* CLIENTS */
	.clients-text-intro-section	{background-color: #00A852}
	
	/* SELF DRIVE */
	.cta-col	{padding-top: 5px}
	
	.pricing-section .cols	{flex-direction: column}
	.pricing-section .col	{width: 100%; margin-bottom: 25px;}
	.col-pricing-image img	{width: 414px; max-width: 100%; margin:30px auto; display: block;}
	
}

@media (max-width: 767px) 
{
	.monitor-inner		{display: flex; flex-direction: column-reverse}
	.cta-col			{display: none}
	.video-col			{width: 100%}
	.bullets-col		{width:100%; padding: 0; margin: 15px auto 0}
	.bullets-col ul		{display: flex; width: 100%; justify-content: center; list-style: none; margin-top: 20px; font-size: 20px;}
	.bullets-col ul li	{margin: 0 15px}
	.monitor-buttons p	{margin-bottom: 20px;}
	.buttons			{flex-wrap: wrap}
	.monitor-btn-holder	{width: calc(50% - 10px); margin-bottom: 20px;}
	.monitor-btn-holder:nth-child(2) .tooltip	{right: 0}
	
	.abifc-text		{transform: none; margin:20px 0 0 0; font-weight: 700}
	.abifc-text br	{display: none;}
	
}

@media (max-width: 700px) 
{
	/* CLIENTS */
	.clients-list li	{width: 130px;}
	
	/* BLOG */
	.filter		{flex-wrap: wrap}
	.filter	li	{width: calc(33.333% - 10px)}
	.filter	li a	{height: 100%; display: flex; align-items: center; text-align: center; justify-content: center; font-size: 12px;}
	
	/* CONTACT */
	.contact-section .cols	{flex-direction: column}
	.contact-section .col-left	{width: 100%}
	.contact-section .col-right	{width: 100%}
	.contact-section .col-right iframe	{height: 100vw}
	.contact-section .contact-bar		{border-bottom-left-radius: 0; border-bottom-right-radius: 0}
	
	/* FOOTER */
	footer .inner	{flex-direction: column}
	footer ul		{font-size: 13px; margin-top: 20px;}
	
	/* SELF DRIVE */
	.steps-container .number-cell p	{font-size: 12px;}
}


@media (max-width: 600px) 
{
    /* HEADER BAR */
	header .contact-bar a span			{display: none}
	header .contact-bar a span.mb-text	{display: block; font-size: 16px; transform: translateY(1px)}
	
	/* BLOG LISTING */
	.blog-item	{flex-direction: column}
	.blog-item .blog-image	{margin-right: 0; max-width: 100%;}
    
    .video-buttons {top: 50px; padding: 0px;}
    
    .imac-container {margin-bottom: 100px; }
	
	/* SELF DRIVE */
	.steps-container .number-cell p	{font-size: 11px;}
	.steps-container .col-row		{flex-direction: column}
	p .btn							{display: block; margin-top: 25px;}
	
	.steps-container .number-cell		{width: 100%; text-align: left; padding: 0 !important; display: flex; align-items: center; margin-bottom: 30px;}
	.steps-container .number-cell:last-child	{margin-bottom: 0}
	.steps-container .number-cell p		{margin: 0; font-size: 16px;}
	.steps-container .number			{margin: 0 15px 0 0}
	.steps-container .number-cell:after	{left: 25px; top: 50px; height: 30px; width: 2px;}
	
	.bullets-col ul	{flex-direction: column}
	.bullets-col ul li	{text-align: center; margin-bottom: 10px;}
	
	.monitor-buttons			{margin-top: 10px;}
	.monitor-buttons .buttons	{flex-direction: column;}
	.monitor-btn-holder			{width: 100%; margin-bottom: 10px;}
	
	.tooltip	{right: 0 !important; width: 100%}
	.tooltip .arrow	{right: 15px !important}
	
	.hand	{left: 80px;}
	
}

@media (max-width: 500px) 
{	
	.sd-logo-2	{position: relative; top: auto; left: auto; margin: auto; display: block; margin-bottom: 30px;}
	
	/* HOME INTRO */
	.home .wrapper			{padding: 30px 20px}
	.intro-section			{flex-direction: column}
	.intro-left				{width: 100%;}
	.intro-buttons			{width: 100%; padding: 0;}
	.intro-buttons .btn		{padding-top: 15px; padding-bottom: 15px;}
	.intro-buttons .btn	br	{display: none}
	
	/* HOME TABLES */
	.table-container			{width:calc(100% + 40px); margin-left: -20px; border-radius: 0; box-shadow: none}
	.table-container table th	{border-radius: 0 !important; font-size: 14px;}
	.table-container table tr:nth-child(2) td	{font-size: 14px !important; padding: 10px;}
	.table-container table td					{font-size: 12px;}
	.table-container table tr.price-row	td		{font-size: 13px !important;}
	.table-container table tr.button-row td		{padding: 0 !important}
	.table-container table tr.button-row td .btn	{border-radius: 0; border:none; font-size: 14px;}
	
	/* TESTIMONIAL CAROUSEL */
	.testimonial-carousel	{padding: 0}
	.slick-arrow			{top: auto; margin-top: 0; bottom: 0; width: 30px; height: 30px; background-size: 7px auto}
	
	/* FOOTER */
	footer .inner		{padding: 0 20px;}
	
}

@media (max-width: 499px) 
{	
	.table-container table tr:nth-child(2) td	{font-size: 12px !important; padding: 10px;}
	.table-container		{width:calc(100% + 40px); margin-left: -20px; overflow: scroll; padding: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
	.table-container table	{width: 500px;}
	.table-container table .mb-sticky	{position: sticky; left: 0; background-color: #711C66 !important; font-size: 12px !important; color: #ffffff !important; padding: 10px 5px !important; z-index: 3}
	.table-container table tr.price-row	td	{background: #333333 !important}
	
	.table-container table .mb-sticky:after	{position: absolute; right: 0; top:0; width: 4px; height: 100%; background-color: rgba(0,0,0,0.2); content: '';}
	
	.scroll-prompt		{display: flex; justify-content: flex-end; margin: 15px 0 0 0}
	.scroll-prompt img	{width: 12px; opacity: 0; position: relative;}
	
	.scroll-prompt img:nth-child(1)	{animation:1.5s scrollprompt 0s; animation-iteration-count: infinite}
	.scroll-prompt img:nth-child(2)	{animation:1.5s scrollprompt 0s; animation-iteration-count: infinite}
	.scroll-prompt img:nth-child(3)	{animation:1.5s scrollprompt 0s; animation-iteration-count: infinite}
	
	@keyframes scrollprompt	{
		0% 		{left: -10px; opacity: 0;}
		50% 	{left: 0; opacity: 1;}
		100% 	{opacity: 0; left: 0;}
	}
	
	.btn-top-row .btn strong	{display: none}
	
}
	
@media (max-width: 414px) 
{
    /* HEADER BAR */
	.logo	{width: 120px;}
	
	.video-buttons	{flex-direction: column}
	.video-buttons .btn	{margin: 10px 0 0 0}
}

@media (max-width: 413px) 
{
	footer ul		{flex-direction: column; text-align: center}
	footer ul li	{margin: 0 0 10px 0; font-size: 14px;}
}

@media (max-width: 350px) 
{
	.monitor .sd-logo-1	{width: 150px;}
	.hand				{left: 60px;}
	
	/* HEADER BAR */
	header .contact-bar					{justify-content: space-between}
	header .contact-bar a span.mb-text	{font-size: 14px;}
	.contact-bar a	{margin: 0}
    .video-buttons {flex-direction: column;}

}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}