@charset "utf-8";
/* CSS Document */
#hero_wrapper {
  background: url(/images/bailey.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:50% 50%;
  height:550px;
  border-bottom: 1px solid black;
}
#hero_box {
	width:100%;
	height:550px;
	background: rgba(0, 0, 0, 0.4);

}
#hero_headline {
	font-size:2.2em;
	font-weight:bold;
	color:#ffffff;
	padding:60px 8px 0px 8px;
	text-align:center;
}
#hero_sub_headline {
	font-size:1.5em;
	font-weight:bold;
	color:#ffffff;
	padding:25px 8px 0px 8px;
	text-align:center;
	max-width:800px;
	margin:auto;
}
#hero_button_cta {
	margin:30px auto 0px auto;
	width:295px;
}
#hero_button_test_drive {
	margin:50px auto 0px auto;
	width:295px;
}
#test_drive_wrapper {
	display:none;
	width:60%;
	background-color:#F8F8F8;
	margin:30px auto 20px auto;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black;
}
#test_drive_box {
	padding:20px;
}
#test_drive_headline {
	font-size:1.3em;
	color:#4D4D4D;
	line-height:1.5em;
	margin-bottom:15px;
}
.test_drive_special {
	font-size:1.1em;
	line-height:1.5em;
	color:green;
	margin-bottom:20px;
}
.test_drive_special_link {
	font-size:1.1em;
	margin-top:20px;
}
.test_drive_field {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	padding:3px;
	margin-top:2px;
	margin-bottom:15px;
	border: 1px inset #C5C5C5;    
}
input[type=text].test_drive_field { 
        width:70%;
}
.test_drive_form_label {
	margin-top:10px;
	margin-bottom:5px;
}
.test_drive_button_box {
	margin-top:10px;
}
.home_submit_test_drive_button {
	padding-left:15px;
	padding-right:15px;
}
#test_drive_subscribed {
	margin-top:25px;
	font-size:1em;
	line-height:1.5em;
	color:#858585;
}
#test_drive_privacy {
	margin-top:5px;
	font-size:1em;
	line-height:1.5em;
	color:#858585;
}
#test_drive_thanks {
	font-size:1.5em;
	color:green;
	font-weight:bold;
	margin-bottom:15px;
}
#test_drive_instructions {
	font-size:1.3em;
	line-height:1.5em;
	color:#858585;
	
	/* These are technically the same, but use both, this is making the url wrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
#active_test_drive_wrapper {
	width:60%;
	background-color:#F8F8F8;
	margin:30px auto 20px auto;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black;
}
#active_test_drive_box {
	padding:20px;
}
#active_test_drive_header {
	font-size:1.5em;
	color:green;
	font-weight:bold;
	margin-bottom:15px;
}
#active_test_drive_instructions { /*this is if we are shoing it from a cookie*/
	font-size:1.3em;
	line-height:1.5em;
	color:#858585;
	
	/* These are technically the same, but use both, this is making the url wrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.cta_button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	color: #FFFFFF;
	text-decoration:none;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	background-color:#0099CC;
	font-weight: bold;
	-moz-border-radius:10px;
	border-radius:10px;
	border:none;
	-webkit-appearance: none; /*this removes iphone default apperance*/
}
.cta_button:hover {
	background-color: #000000;
	color: #FFFFFF;
	text-decoration: none;
	cursor:pointer;
}
.transitional_cta_button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	color: #FFFFFF;
	text-decoration:none;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	background-color:#ff0000;
	font-weight: bold;
	-moz-border-radius:10px;
	border-radius:10px;
	border:none;

	-webkit-appearance: none; /*this removes iphone default apperance*/
}
.transitional_cta_button:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-color:#000000;
	text-decoration: none;
	cursor:pointer;
}
#stack_one_wrapper {
	margin-bottom:10px;
}
.stack_one_box {
	width:31%;
	height:275px;
	float:left;
	padding-top:20px;
	background-color:#F8F8F8;
	margin:20px 2% 20px 2%;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black;
	position:relative;
}
.stack_one_box_center {
	width:30%;
	height:275px;
	float:left;
	padding-top:20px;
	background-color:#F8F8F8;
	margin:20px 0 20px 0;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black;
	position:relative;
}
.stack_one_headline {
	font-size:1.8em;
	text-align:center;
	color:#4D4D4D;
}
.stack_one_statement {
	font-size:1.3em;
	color:#4D4D4D;
	padding: 10px 15px 15px 15px;
}
.stack_one_icon_wrapper {
	position:absolute;
	bottom:20px;
	width:100%;
}
.stack_one_icon {
	width:125px;
	height:125px;
	margin:auto;
}.stack_one_icon_pig {
	width:163px;
	height:125px;
	margin:auto;
}
#testimonial_wrapper {
	margin-bottom:20px;
}
.testimonial_box {
	width:780px;
	margin:auto;
	margin-bottom:20px;
}
.testimonial_image {
	width:250px;
	height:250px;
	border-radius: 50%;
    overflow: hidden;
    border: 4px solid #F8F8F8;
	box-shadow: 0 8px 6px -6px black;
	float:left;
}
.testimonial_image_1 {
	background: url(/images/bailey_300.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50% 50%;
}
.testimonial_image_2 {
	background: url(/images/tyler.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50% 50%;
}
.testimonial_image_3 {
	background: url(/images/alex.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50% 50%;
}
.talkbubble_wrapper {
	width: 490px;
    height: 258px;
	position:relative;
	float:left;
	margin-left:30px;
}
.talkbubble_box {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 490px;
    height: 160px;
}
.talkbubble {
    width: 490px;
    height: 160px;
    background-color:#F8F8F8;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	float:left;
	box-shadow: 0 8px 6px -6px black;
}
.talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 70px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #F8F8F8;
    border-bottom: 10px solid transparent;
}
.talkbubble_text {
	padding:15px;
	font-size:1.3em;
	color:#4D4D4D;
	line-height:1.5em;
}
#three_steps_wrapper {
	width:96%;
	padding:20px 0 20px 0;
	background-color:#F8F8F8;
	margin:20px 2% 20px 2%;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black
}
#three_steps_heading {
	width:96%;
	margin:auto;
	font-size:1.5em;
	text-align:center;
	color:#4D4D4D;
	font-weight:bold;
	padding-bottom:15px;
}
#three_steps_box {
	width:96%;
	margin:auto;
	padding:15px 0 15px 0;
	border-top: 1px solid #4D4D4D;
	border-bottom: 1px solid #4D4D4D;
}
.three_steps_step {
    width: 33.33%;
	float: left;
}
.three_steps_number {
	width:35px;
	height:35px;
	margin:auto;
	border-radius: 50%;
    overflow: hidden;
    border: 4px solid #D3D3D3;
	background-color:#000000;
	text-align:center;
	line-height:35px;
	font-size:25px;
	font-weight:bold;
	color:#FFFFFF;
}
.three_steps_text {
	font-size:1.1em;
	line-height:1.3em; 
	color:#4D4D4D;
	padding:10px;
}
#three_steps_button {
	margin:20px auto 0px auto;
	width:295px;
}
#three_steps_test_drive {
	margin:30px auto 0px auto;
	width:295px;
}
#test_drive_giveaway {
	width:60%;
	margin:15px auto 10px auto;
	border: 2px solid red;
	-moz-border-radius:10px;
	border-radius:10px;
	padding: 10px 0px 10px 0px;
}
.test_drive_giveaway_message {
	font-size:1.2em;
	line-height:1.5em;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
}
#difference_wrapper {
	width:96%;
	padding:20px 0 20px 0;
	background-color:#F8F8F8;
	margin:20px 2% 20px 2%;
	-moz-border-radius:10px;
	border-radius:10px;
	box-shadow: 0 8px 6px -6px black
}
#difference_heading {
	width:96%;
	margin:auto;
	font-size:1.5em;
	text-align:center;
	color:#4D4D4D;
	font-weight:bold;
	padding-bottom:15px;
}
#difference_box {
	width:70%;
	margin:auto;
	padding:15px 0 15px 0;
	border-top: 1px solid #4D4D4D;
	border-bottom: 1px solid #4D4D4D;
}
#difference_section_one {
	
}
#difference_section_two {
	display:none;
}
.difference_text {
	font-size:1.2em;
	line-height:1.4em;

	color:#4D4D4D;
	margin-bottom:15px;
}
#difference_continue {
	font-size:1.1em;
}
#difference_hide {
	font-size:1.1em;
	display:none;
	margin-bottom:15px;
}
/*---------------------------------------------------------*/
/* medium/small ------------------------------------------ */
@media screen and (max-width : 800px) {	
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
#hero_wrapper {
  background: url(/images/bailey.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:50% 50%;
  height:550px;
}
#hero_box {
	height:550px;
	background: rgba(0, 0, 0, 0.5);
}
#hero_headline {
	padding-top:40px;
}
#test_drive_wrapper {
	width:94%;
	margin:30px 3% 20px 3%;
}
#active_test_drive_wrapper {
	width:94%;
	margin:30px 3% 20px 3%;
}
input[type=text].test_drive_field {
    width:95%;
}
.stack_one_box {
	width:94%;
	height:auto;
	float:none;
	padding-top:20px;
	margin:20px 3% 20px 3%;

}
.stack_one_box_center {
	width:94%;
	height:auto;
	float:none;
	padding-top:20px;
	margin:20px 3% 20px 3%;
}
.stack_one_statement {
	text-align:center;
}
.stack_one_icon_wrapper {
	position: relative;
	padding-bottom:15px;
	width:100%;
	bottom:auto;
}
.testimonial_box {
	width:100%;	
}
.testimonial_image {
	width:150px;
	height:150px;
	float:none;
	margin:auto;
}
.talkbubble_wrapper {
	width:94%;
    height: auto;
	position:relative;
	float:none;
	margin-left:3%;
}
.talkbubble_box {
	position: relative;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
	margin-top:30px;
}
.talkbubble {
    width: 100%;
    height: auto;
    background-color:#F8F8F8;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	float:left;
	box-shadow: 0 8px 6px -6px black;
}
.talkbubble:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 0;	
	border: 20px solid transparent;
	border-bottom-color: #F8F8F8;
	border-top: 0;
	margin-left: -20px;
	margin-top: -20px;
}
#three_steps_box {
	padding:0px;
	border-top: 1px solid #4D4D4D;
	border-bottom: 1px solid #4D4D4D;
}
.three_steps_step {
    width: 100%;
	float: none;
}
.three_steps_number {
	margin-top:15px;
}
.three_steps_text {
	padding:15px;
}
.three_steps_step_underline {
	border-bottom: 1px solid #D3D3D3;
}
#test_drive_giveaway {
	width:80%;
}
#difference_box {
	width:90%;
	padding-left:3%;
	padding-right:3%;
}
/*---------------------------------------------------------*/
} /*end @media screen and (max-width : 800px)*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/* Small ------------------------------------------------- */
@media screen and (max-width : 699px) {	
/*---------------------------------------------------------*/
.stack_one_statement {
	text-align:initial;
}
#test_drive_giveaway {
	width:95%;
}
.test_drive_giveaway_message {
	font-size:1.2em;
	text-align:left;
}
#difference_heading {
	width:90%;
	text-align:left;
	padding-left:3%;
	padding-right:3%;
}
/*---------------------------------------------------------*/
/* home page */
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
} /*end @media screen and (max-width : 699px)*/
/*---------------------------------------------------------*/