@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700);
@import url("reset.css");
@import url("clearfix.css");

body { background-color:white; text-align:left; font-family:Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6, a {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 900;
}
h1, h2, h3, h4, h5, h6, p { line-height:1.1; }
a { text-decoration:none; }

.pagewidth { max-width:1510px; margin:0 auto; padding:0 5px; }
.padbar { padding:60px 0; }
.greybar { width:100%; background-color:#e6e6e6; }
.greenbar { width:100%; background-color:#7cc144; }

#phonebar { height:60px; }
	#phonebar a { display:inline-block; height:60px; padding-left:75px; line-height:60px; font-size:15px; color:#7fba00; font-weight:bold;
					background-image:url("../images/lp16/phone_16x20.png"); background-position:16px 20px; background-repeat:no-repeat; }
        #phonebar a:hover { text-decoration: underline; color: #99cc00; }

	#logobar div div { width:100%; }
	#logobar div div a, #logobar div div ul { display:inline-block; }
        #logobar div div a:first-of-type { display: block; }
	#logobar a.login, #logobar a.start { float:right; height:50px; width:135px;  color:white; 
					font-size:18px; line-height:50px; text-align:center; }
        #logobar a.login:hover, #logobar a.start:hover { text-decoration: none; }
		#logobar a.login { background-color:#868686; }
			#logobar a.login:hover { background-color:#aaaaaa; }
		#logobar a.start { background-color:#7cc144; text-transform:uppercase; font-weight:bold; }
			#logobar a.start:hover { background-color:#94d660; }

@media (min-width:900px) { 
    #logobar { min-height:136px; }
        #logobar #menubtn { display: none; }
        #logobar img { margin: 38px 0 38px 5px; }
        #logobar a.login, #logobar a.start { margin: 43px 0 43px 10px; }

	#logobar div div ul { display:block !important; float:right; min-width:480px; padding:42px 0; }
        #logobar div div ul li { float: right; }
		#logobar div div ul li a { height:44px; margin:0px 5px; padding:0 5px; font-size:18px; font-weight:bold; line-height:44px; color:black;
								background:transparent; border-width:0 0 8px 0; border-style:solid; border-color:transparent; }
            #logobar div div ul li:first-child a { margin-left: 0; }
            #logobar div div ul li:last-child a { margin-right: 0; }
			#logobar div div ul li a.active { border-color:#7cc144; }
			#logobar div div ul li a:hover { border-color:#94d660; text-decoration:none; }
}
@media (min-width:900px) and (max-width:1125px) {
	#logobar img { margin-bottom:0; }
    #logobar a.login, #logobar a.start { margin-bottom:15px; }
	#logobar div div ul { clear:both; padding-top:0 !important; }
}
@media (min-width:640px) and (max-width:899px) {
    #logobar a.login { margin: 25px 25px 25px 5px; }
}
@media (max-width:639px) {
    #logobar a.login { margin: 25px 5px; }
}
@media (max-width:899px) {
    #phonebar { display: none; }
    #logobar { position:relative; border-width: 0 0 10px; border-style:solid; border-color:#e6e6e6; }
    #logobar #menubtn { position:absolute; z-index:10; width: 85px; height: 100px; background-color: white; border-width:20px 15px 20px 10px; border-style:solid; border-color:#e6e6e6; }
        #logobar #menubtn .bar { display:block; width:40px; height:6px; background-color:#7ac33a; margin:0 10px 9px; }
            #logobar #menubtn .bar:first-child { margin-top:12px; }
            #logobar #menubtn .bar:last-child { }
        #logobar #menubtn:hover { cursor:pointer; }
            #logobar #menubtn:hover .bar { background-color: #99dd44; }
    #logobar div.pagewidth { padding:0; background-color: white; }
    #logobar a.start { display: none; }
    #logobar div div ul, #logobar div div ul li { clear: both; width:100%; }
        #logobar div div ul li { border-width: 5px 0 0; border-style: solid; border-color: #e6e6e6; }
            #logobar div div ul li:first-child { border-width:10px 0 0; }
        #logobar div div ul li a { width:100%; padding: 10px 5px; text-align: center; font-size: 18px; font-weight: bold; color: #7fba00; }
            #logobar div div ul li:hover a { color: #94d660; }
}
@media (min-width:580px) {
    #logobar img { float:left; }
}
@media (min-width:580px) and (max-width:899px) {
    #logobar { min-height: 100px; }
    #logobar #menubtn { left: 0; top: 0; }
    #logobar img { margin: 20px 0 20px 100px; }
}
@media (max-width:579px) {
    #logobar { min-height: 180px; }
    #logobar #menubtn { left: 0; top: 80px; }
    #logobar img { display:block; margin: 10px auto; }
}
@media (max-width:340px) {
    #logobar img { width: calc(100% - 20px); }
}


#hero {  }
	#hero h1 { font-size:54px; line-height:66px; color:#4d4d4d; }
    #hero h2 { margin:30px 0 0; font-size:25px; color:#828282; }
    #hero .seedetails { color: #828282; font-size: 15px; }
@media (min-width:1025px) {
	#hero h1 { width:calc(100% - 400px); }
}
@media (min-width:900px) {
    #hero { min-height:360px; padding: 60px 120px 0 90px; background:url("../images/lp16/hero_graphic.png") no-repeat right 20px top 60px; }
        #hero h1 { max-width:800px; }
        #hero .start { width: 300px; }
}
@media (min-width:900px) and (max-width:1024px) {
	#hero { background-size:380px; }
	#hero h1 { width:calc(100% - 280px); }
}
@media (max-width:899px) {
    #hero { padding:60px 90px; text-align:center; }
        #hero .start { width:75%; max-width: 300px; }
}
@media (min-width:600px) and (max-width:899px) {
    #hero { padding: 60px; }
}
@media (max-width:599px) {
    #hero { padding: 30px 20px; }
}

	#hero .start { display:inline-block; height:70px; margin:30px 0 15px 0; line-height:70px; text-align:center;
				font-size:22px; font-weight:bold; text-transform:uppercase; color:white; background-color:#7cc144; }
		#hero .start:hover { background-color:#94d660; text-decoration:none; }
	#hero span { display:block; width:100%; height:32px; margin:43px 0; padding:0 0 0 60px; 
				line-height:32px; font-size:18px; color:#888888; background:url("../images/lp16/sslshield_24x30.png") no-repeat 28px top; }

#steps {  }
	#steps h2, #steps h3 { text-align:center; }

#steps .pagewidth { max-width:1300px; }
	#steps .stepbox { background-repeat:no-repeat; }
		#steps div .stepbox:first-child { background-image:url("../images/lp16/step1_182.png"); }
		#steps div .stepbox:nth-child(2) { background-image:url("../images/lp16/step2_182.png"); }
		#steps div .stepbox:last-child { background-image:url("../images/lp16/step3_182.png"); }
		#steps .stepbox span { display:block; width:40px; height:40px; background-color:#80ba4e; border-radius:20px; 
				text-align:center; line-height:40px; font-size:22px; font-weight:bold; color:white; }
		#steps .stepbox h2 { font-size:30px; color:#545454; background:transparent; }
		#steps .stepbox p { font-size:22px; line-height:30px; color:#898989; }

@media (min-width:900px) {
    #steps h2, #steps h3 { padding-bottom: 30px; }
    #steps h2 { font-size:30px; color:#4d4d4d; }
	#steps h3 { font-size:22px; color:#828282; }

	#steps .stepbox { float:left; width:calc(33% - 40px); margin:0 30px; background-position:center 55px; }
        #steps div .stepbox:first-child { margin-left: 0; }
        #steps div .stepbox:last-child { margin-right: 0; }
	#steps .stepbox span { margin:auto; }
	#steps .stepbox h2 { margin-top:275px; text-align:center; }
	#steps .stepbox p { margin-top:20px; text-align:center; }
}
@media (max-width:899px) {
    #steps.padbar, #steps .pagewidth { padding: 0; }
    #steps h2, #steps h3 { background-color: #7ac33a; }
    #steps h2 { padding:45px 10px 15px; font-size:36px; line-height:50px; color:#4d4d4d; }
    #steps h3 { padding:15px 10px 45px; font-size:30px; line-height:40px; color:#e6e6e6; }
    #steps .stepbox { position: relative; min-height:250px; margin:0; padding:20px; text-align: left;  }
    #steps .stepbox span { position: absolute; z-index:10;  top: 20px; }
        #steps .stepbox:nth-child(odd) span { left: 20px; }
	    #steps .stepbox h2 { text-align:left; }
        #steps .stepbox h2 { margin-bottom: 20px; line-height:40px; }
    #steps .stepbox:nth-child(even) { background-color:white; }
        #steps .stepbox:nth-child(odd) h2 { float:right; }
        #steps .stepbox:nth-child(even) h2 { float:left; }
}
@media (min-width:540px) and (max-width:899px) {
        #steps .stepbox:nth-child(odd) { background-position: 20px 50px; }
        #steps .stepbox:nth-child(even) { background-position:right 20px top 30px; }
    #steps .stepbox h2 { width: calc(100% - 240px); }    
    #steps .stepbox p { float:right; width:calc(100% - 240px); text-align:left; }
        #steps .stepbox:nth-child(odd) h2 { padding: 0 30px 0 0; }
        #steps .stepbox:nth-child(even) h2 { padding:0 0 0 30px; }
        #steps .stepbox:nth-child(odd) p { padding: 0 30px 0 0; }
        #steps .stepbox:nth-child(even) p { float:left; padding:0 0 0 30px; }
        #steps .stepbox:nth-child(even) span { right:200px; }
}
@media (max-width:539px) {
    #steps .stepbox { background-size: 91px 91px; }
        #steps .stepbox:nth-child(odd) { background-position: 35px 55px; }
        #steps .stepbox:nth-child(even) { background-position:right 10px top 55px; }
        #steps .stepbox:nth-child(even) span { right:100px; }
    #steps .stepbox h2 { width: calc(100% - 120px); min-height: 120px; word-wrap:break-word; hyphens:auto; }
        #steps .stepbox:nth-child(odd) h2 { padding: 0 10px 0 0; }
        #steps .stepbox:nth-child(even) h2 { padding:0 0 0 10px; }
    #steps .stepbox p { clear:both; padding: 0; }
}

.carousel-flipster { padding:20px 0 0; }
    .carousel-flipster .flippackage { height:100%; }
        .carousel-flipster .flippackage * { /*display:inline-block;*/ vertical-align: top; }
        .carousel-flipster .flippackage .box { background-color:#868686; background-repeat:no-repeat; background-position:center 18%; background-size:40% 40%; }
            .carousel-flipster .flippackage .box.express { background-image: url("../images/lp16/package_plane.png"); }
            .carousel-flipster .flippackage .box.standard { background-image: url("../images/lp16/package_links.png"); }
            .carousel-flipster .flippackage .box.deluxe { background-image: url("../images/lp16/package_files.png"); }
            .carousel-flipster .flippackage .box.premier { background-image: url("../images/lp16/package_house.png"); }
            .carousel-flipster .flippackage .box.business { background-image: url("../images/lp16/package_bizman.png"); }
        .flippackage .box h3 { padding:0 10px; color:white; text-align:center; position:relative; top:55%; }
            .flippackage .box h3 span { line-height: 36px; }
        .flipster__item--past .flippackage h3, .flipster__item--future .flippackage h3 { font-size:24px; line-height:28px; }

		.carousel-flipster .flippackage p, .carousel-flipster .flippackage h2 { color:#828282; text-align:center; }
		.carousel-flipster .flippackage p { font-size:22px; line-height:26px; }
		.carousel-flipster .flippackage h2 { font-size:32px; line-height:36px; padding:10px 5px; }
        .carousel-flipster .flippackage p { font-size: 16px; line-height: 20px; padding: 0 10px; }

.flipster__item { height: 100%; }
/*.flipster__item--past .flippackage h3 span, .flipster__item--future .flippackage h3 span,*/
.flipster__item--past .flippackage h2, .flipster__item--future .flippackage h2,
.flipster__item--past .flippackage p, .flipster__item--future .flippackage p { display: none; }

@media (min-width:540px) {
    .carousel-flipster { min-height: 500px; }
    .carousel-flipster .flippackage * { width: 320px; }
    .flipster__item--current .flippackage .box h3 { font-size:18px; line-height:28px; padding-top:15px; font-weight:600; }
        .flipster__item--current .flippackage .box h3 span { font-size: 28px; font-weight:900; }
}
@media (max-width:539px) {
    .carousel-flipster { min-height: 460px; }
    .carousel-flipster .flippackage * { width: 240px; }
    .flipster__item--current .flippackage .box h3 { font-size:18px; line-height:24px; font-weight:600;  }
        .flipster__item--current .flippackage .box h3 span { font-size: 24px; font-weight:900; }
}

#packages {  }
	#packages h2 { text-align:center; color:#4d4d4d; }
	#packages .carousel { width:100%; margin:0; padding:35px 0; line-height:585px; }
	.carousel .package { display:inline-block; margin:0 5px; vertical-align:top; }
	.carousel .package:first-child{ margin-left:0; }
	.carousel .package:last-child{ margin-right:0; }
		.carousel .package .box { background-image:url("../images/lp16/package_silhouette.png"); }
		.carousel p, .carousel .package h2 { color:#828282; text-align:center; }
		.carousel p { font-size:22px; line-height:26px; }
		.carousel .package h2 { font-size:32px; line-height:90px; }
		.carousel .package.inactive p, .carousel .package.inactive h2 { display:none; }
	#packages a { display:block; margin:18px auto 36px; height:120px; background-color:#7cc144; 
					color:white; font-size:24px; line-height:120px; text-align:center; text-transform:uppercase; }
		#packages a:hover { background-color:#94d660; text-decoration:none; }
    #packages p:last-child { text-align: center; font-size:16px; line-height:22px; color:#828282; }

@media (min-width:900px) {
    #packages h2 { font-size: 26px; }
    #packages a { width:500px; }
}
@media (max-width:899px) {
    #packages h2 { font-size: 18px; }
    #packages a { width: 75%; }
}
@media (min-width:640px) and (max-width:899px) {
    #packages a { max-width: 500px; }
}
@media (max-width:639px) {
    #packages a { max-width: 300px; }
}

	.carousel .package.active { width:420px; }
		.carousel .package.active .box { width:420px; height:420px; background-color:#868686; 
			background-repeat:no-repeat; background-position:center 18%; background-size:40% 40%; }
		.carousel .package.active h3 { font-size:32px; line-height:48px; color:white; text-align:center; position:relative; top:65%; }
	.carousel .package.inactive { width:calc(25% - 120px); margin-top:60px; cursor:pointer; }
		.carousel .package.inactive .box { width:100%; height:50px; background-color:#e6e6e6; 
			background-repeat:no-repeat; background-position:center 18%; background-size:36% 36%; }
		.carousel .package.inactive h3 { font-size:18px; line-height:28px; color:white; text-align:center; position:relative; top:55%; }
		.carousel .package.inactive:hover .box { background-color:#cccccc; }
	
@media (min-width:900px) and (max-width:1199px) { .carousel .package.inactive h3 span { display:none; } }

#whyuse {  }
	#whyuse h2 { font-size:30px; color:#4d4d4d; margin:15px 0; }
	#whyuse h2:first-child { text-align:center; background:none; }
    #whyuse h2:not(:first-child), #whyuse p { padding-left:100px; }
	#whyuse h2:not(:first-child) { margin:60px auto 10px; min-height:45px;
		background-image:url("../images/lp16/checkcircle.png"); background-repeat:no-repeat; background-position:left top; background-size:45px 45px; }
	#whyuse p { margin-top:25px; font-size:22px; color:#4d4d4d; }
@media (min-width:900px) {
    #whyuse h2:not(:first-child), #whyuse p { width: 750px; }
    #whyuse p { margin:auto; }
}
@media (max-width:899px) {
    #whyuse h2:not(:first-child), #whyuse p { padding-right: 15px; background-position:30px top; }
}

#appad {  }
	#appad h2 { font-size:30px; color:white; text-align:center; }
    #appad p { font-size: 20px; line-height:30px; color: white; text-align: center; }
	#appad div { margin:0 auto; padding:36px 0 0; }
	#appad a { display:inline-block; width:194px; height:75px; margin:0; padding:0; 
			background-position:center center; background-repeat:no-repeat; background-size:contain; }
		#appad a.apple { background-image:url("../images/lp16/app-store-badge.png"); }
		#appad a.google { background-image:url("../images/lp16/google-play-badge.png"); }
@media (min-width:420px) {
    #appad div { width: 400px; }
		#appad a:first-child { float:left; }
		#appad a:last-child { float:right; }
}
@media (max-width:419px) {
    #appad.padbar { padding: 60px 10px; }
    #appad div { width: 100%; text-align:center; }
}

#contact { max-width:880px; margin:auto; }
	#contact h2 { font-size:28px; color:#4d4d4d; text-align:center; }
	#contact p { margin:32px 0; text-align:center; font-weight:bold; font-size:20px; line-height:34px; color:#828282; }
		#contact p a { font-family:Arial, Helvetica, sans-serif; color:#7cc144; }
		#contact p a:hover { color:#94d660; }
        #contact p span { font-family:Arial, Helvetica, sans-serif; color:#7cc144; }
	#contact .formline { padding-bottom:25px; }
	#contact .formline.full { width:100%; clear:both; }
	#contact .formline label { display:inline-block; width:100%; font-size:18px; line-height:40px; color:#828282; }
	#contact .formline input, #contact .formline textarea { width:100%; padding: 0 10px; font-size:30px; line-height:60px; font-family:Arial,Helvetica,sans-serif;
			background-color:#f0f0f0; border:none; color:#4d4d4d; }
	#contact .formline + a { display:block; margin:auto; border:4px solid #7cc144; 
		font-size:24px; line-height:60px; text-align:center; text-transform:uppercase; color:#7cc144; }
		#contact .formline + a:hover { color:#94d660; border-color:#94d660; text-decoration:none; }
@media (min-width:900px) {
    #contact { padding:60px 10px; }
	    #contact .formline.half { width:420px; }
		    #contact .formline.half.left { float:left; clear:left; }
		    #contact .formline.half.right { float:right; clear:right; }
        #contact .formline + a { width: 255px; }
}
@media (max-width:899px) {
    #contact { padding:60px 20px; }
        #contact .formline.half { width:100%; clear:both; }
        #contact .formline + a { width: 90%; }
}

#disclaimer {  }
    #disclaimer p, #disclaimer h3 { text-align: center; color: #868686; }
    #disclaimer h3 { font-size: 24px; line-height:28px; font-weight: bold; }
	#disclaimer p { font-size:18px; line-height:24px; }
@media (min-width:640px) {
    #disclaimer p { padding: 0 90px; }
}
@media (min-width:480px) and (max-width:639px) {
    #disclaimer p { padding: 0 60px; }
}
@media (max-width:479px) {
    #disclaimer p { padding: 0 20px; }
}
	
#bottomnav { padding:32px 60px; background-color:#363636; }
	#bottomnav a.social { display:inline-block; margin:5px 0; padding:0; background-color:#cccccc; text-align:center; }
		#bottomnav a.social:before { color:#393939; font-family: FontAwesome; font-style: normal; font-weight: normal; }
		#bottomnav a.social.fb:before { content:"\f09a"; }
		#bottomnav a.social.yt:before { content:"\f167"; }
		#bottomnav a.social:hover { background-color:#dddddd; }
	#bottomnav ul { text-align:right; }
		#bottomnav ul li { display:inline-block; }
			#bottomnav ul li a { color:white; font-size:18px; border-width:0 0 4px 0; border-style:solid; border-color:transparent; }
			#bottomnav ul li a:hover { border-color:#94d660; text-decoration:none; }
@media (min-width:900px) {
    #bottomnav { line-height:80px; }
    #bottomnav a.social { float: left; width:70px; height:70px; line-height:70px; }
        #bottomnav a.social:before { font-size: 50px; }
}
@media (min-width:961px) {
    #bottomnav ul li { margin:0 10px; }
    #bottomnav a.social:first-child { margin-right: 25px; }
}
@media (max-width:960px) {
    #bottomnav ul li { margin:0 5px; }
    #bottomnav a.social:first-child { margin-right:15px; }
}
@media (max-width:899px) {
    #bottomnav { text-align: center; line-height:46px; }
        #bottomnav:before { content: "Follow us on "; display:inline-block; margin-right:15px; color:white; font-size:20px; line-height:46px; vertical-align:top; }
        #bottomnav a.social { width:36px; height:36px; line-height:36px; }
            #bottomnav a.social:before { font-size: 20px; }
        #bottomnav ul { display: none; }
}

.terms * { color: #4d4d4d; }

.terms h2, .terms h3 { font-weight: 600; }
.terms p, .terms a, .terms ol { font-weight:400; }

.terms .padbar { margin-top:30px; background-color: #7ac33a; }
    .terms .padbar h2 { padding: 0 10px; text-align:center; font-size: 36px; line-height: 50px; color:white; }

.terms .pagewidth:not(:first-child) { padding-top: 15px; padding-bottom: 60px; }
    .terms .pagewidth h3 { margin: 15px 0; text-align: center; font-size: 24px; }
    .terms .pagewidth p { width: 90%; margin:5px auto; text-align:center; font-size:18px; line-height:24px; }
    .terms .pagewidth a { color: #7fba00; text-decoration:none; font-weight:400; }
        .terms .pagewidth a:hover { color: #99cc00; }
    .terms .pagewidth ol { width: 80%; margin: 10px auto; font-size:16px; line-height:20px; }
        .terms .pagewidth ol li { margin: 15px 0; }
            .terms .pagewidth ol li p { text-align: left; }
            .terms .pagewidth ol li ol li { margin: 5px 0; }