/**************************** ANIMATIONS *******************************/


@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1789px, 0, 0);
  }
}








/**************************** GLOBAL *******************************/

* {

box-sizing:border-box;    

}


html, body {

margin:0px;
padding:0px;
font-size:18px;
background-color:#fffdfc;
font-family:'Montserrat', arial, sans-serif;
color:#292929;
width:100%;
overflow-x:hidden;

}


.container {

width:100%;
max-width:1400px;
text-align:left;
padding-left:8px;
padding-right:8px;
position:relative;
display:inline-block;

}


#main {

min-height:640px;

}


h1 {

font-weight:normal;
margin-top:0px;
margin-bottom:20px;
line-height:1.2em;

}



h2 {

margin-top:0px;
margin-bottom:20px;
font-weight:normal;

}


.section {

padding-top:50px;
padding-bottom:50px;
width:100%;
position:relative;

}


.sectitle {

text-align:center;
margin-bottom:30px;
font-size:38px;

}

.cta {

display:inline-block;
padding:8px;
padding-top:10px;
padding-left:20px;
padding-right:20px;
background-color:#2a76dc;
color:#ffffff;
text-decoration:none;
font-size:24px;
font-style:normal;
margin-top:10px;

}


.cta i {

vertical-align:middle;
font-size:42px;
position:relative;
top:-2px;
margin-left:-10px;

}


.error {

color:red;
font-size:14px;
font-style:italic;

}


.small {

font-size:14px;
display:inline-block;
position:relative;

}


tbody {display:table; height:100%; width:100%;}


.inlink {

color:#2f9ad7;
text-decoration:none;

}


@media screen and (max-width:500px) {

.cta {font-size:20px !important;}
.cta i {font-size:40px !important;}

}


@media screen and (max-width:750px) {

.sectitle {font-size:32px !important;}

}







/**************************** FORMS *******************************/

@media screen and (max-width:550px) {

.field50 {width:100% !important;margin-right:0px !important;}

}



.logform {

text-align:left;
padding:40px;
display:inline-block;
border:1px solid #cccccc;
background-color:#fcfcfc;
max-width:100%;

}

.textfield, select {

width:100%;
border:1px solid #d0d0d0;
padding:8px;
margin-bottom:20px;
margin-top:3px;
border-radius:5px;

}


.right {margin-right:-20px !important;}

.zip {width:100px;}

.phone {width:50px;}


.logbutton {

background-color:#2f9ad7;
border:0;
color:#ffffff;
font-size:21px;
font-family:'Roboto';
padding:8px;
padding-left:15px;
padding-right:15px;
cursor:pointer;
width:100%;
font-variant:small-caps;
letter-spacing:1px;
border-radius:5px;
margin-top:10px;

}


.logbutton:hover {background-color:#42b1f1;}


.forgot {

float:right;
display:inline-block;
text-decoration:none;
color:#666666;
font-size:14px;
position:relative;
top:-15px;
font-style:italic;

}


.ferror {

border:2px solid red !important;

}


#logform {

width:400px;
margin-top:30px;
margin-bottom:100px;

}



#logform .error {

display:block;
text-align:center;
position:relative;
top:-20px;

}


#regform .field100 {

width:420px;
display:block;
max-width:100%;

}


#regform .field50 {

width:200px;
margin-right:20px;
display:inline-block;
vertical-align:top;
max-width:100%;

}


.checkbox {

width:15px;
height:15px;

}









/**************************** HEADER *******************************/

@media screen and (max-width:750px) {

#logo {width:120px !important;}

}


@media screen and (max-width:900px) {

#desknav {display:none !important;}

}



@media screen and (min-width:901px) {

#mobicon {display:none !important;}
#mobnav {display:none !important;}

}



#header {

position:relative;
padding-top:10px;
padding-bottom:6px;
z-index:8;
background-color:#fffefb;
border-bottom:1px solid #cccccc;

}



#logo {

width:130px;
height:auto;

}



.login2 {

padding-left:8px;
padding-right:8px;
padding-top:0px;
padding-bottom:2px;
border-radius:6px;
border:1px solid;

}











/**************************** NAVIGATION *******************************/


#desknav {

float:right;
display:inline-block;
list-style:none;
position:relative;
margin-top:30px;
margin-bottom:0px;

}


#desknav .topitem {

padding-left:0px;
display:inline-block;
margin-left:20px;

}


#desknav .toplink:hover {

color:#000000;

}


.toplink {

font-family:'Roboto';
font-size:20px;
font-variant:small-caps;
text-decoration:none;
color:inherit;
display:inline-block;
cursor:pointer;
color:#333333;
font-weight:500;
-webkit-transition: color 300ms linear;
-moz-transition: color 300ms linear;
-o-transition: color 300ms 1200ms linear;
transition: color 300ms linear;

}


#desknav .subnav {

position:absolute;
padding-left:0px;
z-index:20;
box-shadow:2px 4px 3px #666666;
max-height:0px;
overflow:hidden;
-webkit-transition: max-height 200ms ease;
-moz-transition: max-height 200ms ease;
-o-transition: max-height 200ms ease;
transition: max-height 200ms ease;
font-size:16px;
text-align:left;
background-color:#f9f9f9;
margin-top:20px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
margin-left:-10px;

}



#desknav .subnav a {

color:inherit;
text-decoration:none;
display:block;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid #dddddd;

}


#desknav .subnav a:hover {

background-color:#f5f5f5;

}


#desknav .topitem:hover .subnav {

max-height:500px;
-webkit-transition: max-height 500ms ease;
-moz-transition: max-height 500ms ease;
-o-transition: max-height 500ms 1200ms ease;
transition: max-height 500ms ease;

}



#mobicon {

float:right;
list-style:none;
position:relative;
font-size:26px;
margin-top:30px;
color:#333333;

}


#mobnav {

list-style:none;
padding-left:0px;
text-align:right;
position:absolute;
z-index:5;
width:100%;
display:none;
background-color:#f9f9f9;
margin-top:0px;
border-bottom:1px solid #cccccc;

}


#mobnav a {

padding-top:8px;
padding-bottom:8px;
padding-right:10px;
border-bottom:1px solid #cccccc;
display:block;
color:inherit;
text-decoration:none;

}


#mobnav .login {

border:0;

}



#mobnav .subnav {

padding-left:0px;
list-style:none;
display:none;

}


#mobnav .subnav a {

font-size:14px;

}






/**************************** HOME BANNER *******************************/

@media screen and (max-width:550px) {

#homebanner h1 {width:100% !important; font-size:28px !important;}
#homebanner h2 {width:100% !important; font-size:20px !important;}
#homebanner ul {width:100% !important; font-size:20px !important;}
#homebanner span {width:100% !important; font-size:20px !important;}
.hslide .container {padding-right:15px !important;}

}


@media screen and (min-width:551px) and (max-width:750px) {

#homebanner h1 {width:100% !important; font-size:34px !important;}
#homebanner h2 {width:100% !important; font-size:22px !important;}
#homebanner ul {width:100% !important; font-size:22px !important;}
#homebanner span {width:100% !important; font-size:22px !important;}

}


@media screen and (max-width:600px) {

.hslide {background-position:85% !important;}
.hslide .container {background-color:rgba(0,0,0,.6) !important;}

}


@media screen and (min-width:601px) and (max-width:1000px) {

.hslide {background-position:60% !important;}

}



#homebanner {

width:100%;
position:relative;
height:550px;

}


.hslide {

position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000000;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
display:none;
z-index:1;

}


.hslide .container {

height:100%;
padding-top:30px;
padding-bottom:30px;
padding-right:30px;

}


.hslide.active {

z-index:3;
display:block;

}


.hslide.next {

z-index:2;

}


#homebanner h1 {

color:#ffffff;
font-size:40px;
font-weight:600;
margin-bottom:15px;

}


#homebanner h2 {

color:#ffffff;
font-size:26px;
width:55%;
line-height:1.3em;
font-weight:500;

}

#homebanner span {

display:block;
font-size:26px;
color:#ffffff;
font-weight:500;

}


#homebanner ul {

font-size:26px;
color:#ffffff;
list-style:square;
font-weight:500;
padding-left:27px;
margin-top:15px;
margin-bottom:0px;

}


#homebanner li {

margin-bottom:8px;

}








/**************************** TOP BANNER *******************************/

@media screen and (max-width:500px) {

#topbanner h1 {font-size:32px !important;}
#topbanner h2 {font-size:22px !important;}

}


@media screen and (min-width:501px) and (max-width:870px) {

#topbanner h1 {font-size:40px !important;}
#topbanner h2 {font-size:30px !important;}

}




#topbanner {

width:100%;
overflow:hidden;
height:500px;
color:#ffffff;
position:relative;
padding-left:10px;
padding-right:10px;

}


#topbanner .slider {

height:500px;
width:5367px;
background-image:url(images/banner.jpg);
animation: slide 120s linear infinite;
position:absolute;
top:0px;
left:0px;
z-index:1;

}


#topbanner h1 {

z-index:2;
position:relative;
font-size:56px;
display:none;
margin-top:15px;
font-weight:bold;

}


#topbanner h2 {

z-index:2;
position:relative;
font-size:36px;
display:none;
font-weight:bold;

}


#topbanner .color {

color:#f4f597;

}


#tagline {

font-family:'Changa One';
font-weight:normal !important;

}








/**************************** HOW IT WORKS *******************************/

@media screen and (max-width:450px) {

#howtag {font-size:22px !important;}
#howtag img {width:40px;height:auto;}

}


@media screen and (min-width: 451px) and (max-width:700px) {

#howtag {font-size:32px !important;}
#howtag img {width:40px;height:auto;}

}


#how {

background-color:#fffefb;

}


#how .legend {

margin-bottom:25px;
margin-top:-10px;

}


#howvid {

width:800px;
max-width:98%;
height:auto;
border:1px solid #cccccc;
margin-bottom:30px;

}


#howtag {

font-size:48px;
font-family:'Changa One';
color:#2e3192;

}


#howtag img {

vertical-align:middle;
margin-left:8px;
margin-right:8px;
position:relative;
top:-2px;

}


.samplebutton {

color:#ffffff;
text-decoration:none;
padding:15px;
background-color:#cf7e0b;
border-radius:5px;
font-weight:bold;

}









/**************************** BENEFITS *******************************/

@media screen and (max-width:450px) {

#benefit_holder {height:840px !important;}
.benefit_slide {height:840px !important;}

}


@media screen and (min-width: 451px) and (max-width:640px) {

#benefit_holder {height:720px !important;}
.benefit_slide {height:720px !important;}

}


@media screen and (min-width:641px) and (max-width:1000px) {

#benefit_holder {height:600px !important;}
.benefit_slide {height:600px !important;}

}



@media screen and (max-width:1000px) {

.benlist {margin-top:20px;width:100% !important;margin-bottom:40px;}
.benlist h2 {text-align:center;}
.next {right:0px !important;width:100%;text-align:center;}
.benpic {margin-right:0px !important;}

}


@media screen and (max-width:950px) {

#benefits2 {padding-left:10px;padding-right:10px}
.benblock {width:100% !important;max-width:700px !important;padding:0px !important;margin-bottom:50px;}
.benblock ul {font-size:18px !important;}

}



#benefits2 {

background-color:#f8f8f8;
box-sizing:border-box;

}


.benblock {

width:30%;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
padding:20px;
text-align:left;

}


.benblock img {

width:100%;
height:auto;
margin-bottom:8px;

}


.blocktitle {

font-family:'Roboto Condensed';
font-variant:small-caps;
font-size:28px;
display:block;
margin-bottom:8px;
text-align:center;

}


.benblock ul {

padding-left:15px;
font-size:16px;
line-height:1.3em;
padding-right:10px;

}

.benblock li {

margin-bottom:8px;

}




#benefits {

background-color:#2a76dc;

}


#benefits .sectitle {

color:#ffffff;

}


#benefits .container {text-align:center;}






#benefit_holder {

background-color:#ffffff;
width:90%;
display:inline-block;
position:relative;
overflow:hidden;
height:350px;

}


.benefit_slide {

position:absolute;
top:0px;
left:100%;
padding:40px;
background-color:#ffffff;
height:350px;
width:100%;
z-index:5;

}


.benefit_slide.active {

left:0px;
z-index:1;

}


.benpic {

max-height:250px;
max-width:250px;
width:auto;
height:auto;
display:inline-block;
margin-right:50px;
vertical-align:middle;

}


.benlist {

display:inline-block;
width:60%;
text-align:left;
vertical-align:middle;

}


.benlist ul {

padding-left:15px;

}


.benlist li {

margin-bottom:8px;

}


.benlist h2 {

font-weight:bold;
color:#ed1c24;

}


.next {

display:inline-block;
position:absolute;
bottom:20px;
right:20px;
font-weight:bold;
cursor:pointer;

}


.next i {

vertical-align:middle;
margin-top:-2px;
margin-left:-3px;

}







/**************************** CONTACT *******************************/

#contact {

background-color:#ffffff;

}


#contact .container {

text-align:center !important;

}


#contactform {

max-width:700px;
width:100%;
position:relative;
display:inline-block;

}


#contactform .textfield {

padding:12px;
border:1px solid #999999;
border-radius:0px;
font-size:20px;
width:100%;

}


#contactform select {

color:#777777;
background:transparent;

}


#contactform textarea {

font-family:inherit;
color:inherit;

}


::placeholder {

color:#777777;

}

::-ms-input-placeholder {

color:#777777;

}

:-ms-input-placeholder {

color:#777777;

}

::-webkit-placeholder {

color:#777777;

}

::-moz-placeholder {

color:#777777;

}


#contactform .logbutton {

border-radius:0px;
background-color:#119f1f;
border:1px solid #119f1f;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms 1200ms linear;
transition: background-color 300ms linear;

}


#contactform .logbutton:hover {

background-color:#1aba29;

}








/************************** PAYMENT PAGE *********************************/

#payform {

padding-left:30px;
padding-right:30px;
width:450px;
position:relative;

}


#payform label {

font-size:16px;

}


#orderinfo {

padding:10px;
border:1px solid #cccccc;
font-size:18px;
line-height:24px;
background-color:#ffffff;


}


#cardicons img {

height:30px;
width:auto;

}


#payfields .textfield {

margin-bottom:20px;

}


#card-errors {

margin-top:10px;

}


#payfields {

position:relative;
background-color:#fcfcfc;

}


#payform #loading {

position:absolute;
width:100%;
left:0px;
text-align:center;
bottom:140px;

}


#loading .spinner {

height:40px;
width:auto;

}




#loadicon .spinner {

height:25px;
width:auto;

}






/**************************** SAMPLE PAGE *******************************/

@media screen and (max-width:380px) {

.sample {font-size:24px !important;}
.total {font-size:24px !important;}

}


@media screen and (min-width:381px) and (max-width:500px) {

.sample {font-size:30px !important;}
.total {font-size:30px !important;}

}



#example {

display:inline-block;
max-width:900px;
text-align:left;

}


#example li {

margin-bottom:12px;

}


.sample {

font-size:34px;
color:#cf7e0b;
font-weight:bold;
margin-top:10px;
margin-bottom:16px;

}


.example h2 {

margin-bottom:10px !important;


}


.total {

font-size:34px;

}








/**************************** FOOTER *******************************/

#footer {

padding-top:30px;
padding-bottom:30px;
background-color:#37475a;
color:#ffffff;
font-size:15px;

}


#footer .container {text-align:center;}

.footlink {

color:inherit;
text-decoration:none;
margin-left:10px;
margin-right:10px;
display:inline-block;
margin-bottom:15px;

}


.copy {

font-size:13px;

}



#footer i {

vertical-align:middle;
margin-bottom:10px;
font-size:22px;
position:relative;
top:3px;

}