html,  div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, img, small, strong, ol, ul, li, form, label,
table, caption, tr, td, footer, header {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
footer, header, menu, nav, section {
  display: block;
}
/* Reset Body ans Fonts  */
body {
    padding-top:40px;
    line-height: 1;
    font-family: 'Titillium Web', sans-serif;
    font-weight:400;
    background: url(img/grey_wash_wall.png);
    }
ol, ul {
  list-style: none;
}

/* Reset a Tags */
a { color:#1b1d1e; }
a:focus { outline:0;  }
a:hover {  text-decoration:none; }

/* Reset input Tags */
input { border:0;   font-family: 'Titillium Web', sans-serif; color:#fff;  }
input:focus { border:0; outline:0; }
input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {  color: #eaeaea;border-color:#cccccc;box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3),  1px 1px 2px rgba(0, 0, 0, 0.3) inset; }
input:focus:valid:focus, textarea:focus:valid:focus, select:focus:valid:focus {  color: #dedede;border-color:#cccccc;box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3),  1px 1px 2px rgba(0, 0, 0, 0.3) inset; }

/* Reset input Tags */
::-moz-selection { background: #2e2e2e; color: #fff; text-shadow: none; }
::selection { background: #2e2e2e; color: #fff; text-shadow: none; }

/*----------------------------------------------------*/
/* 3. Layout and General Styles */
/*----------------------------------------------------*/

.wrapper { width:940px; margin:0 auto;}  
.clear { clear:both; }
.wrap-switcher {
    width: 1000px;
    margin: 0px auto;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

h1 { font-size:17px; font-weight:400;}
h2 { font-size:19px; font-weight:500;}

.form {font-size:25px; color:#ffffff; text-align:center; font-weight:700;}
.formsub{font-size:18px; color:#ffffff; text-align:center; font-weight:300;}

.howitwork, .screenshots, #terms, .testimonials, footer { background:url(img/body.png)repeat; }

/*----------------------------------------------------*/
/* 4. Header Styles */
/*----------------------------------------------------*/

header { background:url("img/bg.png") repeat-x;  position: relative; z-index:5; height:77px; display:block; border-top-left-radius:10px; border-top-right-radius:10px; }

.logo { float:left; margin:8px 0 0; width:250px; height:69px;  display:block; background: url(img/logo/logo-john.png) no-repeat;} 

.navi { float:right; width:455px;}
.navi li { float:left; width:80px; border-top:3px solid #fff; } 
.navi li:hover { float:left; width:80px; border-top:3px solid #eaeaea; } 
.navi li.active {border-top:3px solid rgb(248, 99, 58);}
.navi li a { float:left; width:80px; padding:30px 0; color:#868889; text-align:center;}

li.active { background:rgba(213,213,213,0.25);  } 
li.active a { color:#1b1d1e; }

/*----------------------------------------------------*/
/* 5. Main Section */
/*----------------------------------------------------*/

.main { padding: 0 0 50px; height:510px; z-index:2; background: url("img/body.png") repeat scroll 0% 0% transparent;}
.gradient { background:url(img/gradient.png) no-repeat ;  height:100%; padding:0 0 50px;}

.main h1 {font-family: 'Open Sans', verdana, sans-serif; color:#444; text-shadow : 1px 1px 1px rgba(0,0,0,0.2); padding:40px 0 0; border-top:1px solid #ddd; width:100%; line-height:120%; margin: 0 auto; text-align:center}
.main h2 { color:#e86005; text-shadow : 1px 1px 1px rgba(0,0,0,0.2); padding:20px 0 0 0; text-align:center; width: 36%; margin:0 auto; line-height:120%;}

.main .slogan h1 {padding: 24px 10px 10px 10px !important;}
.main .slogan h2 {padding:10px !important; font-style:italic;}
.slogan {padding-top:14px;}


/* Video Iframe */
.video { margin:40px 0 0 0; float:left; background-color:#000; }
.video iframe {  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px rgba(255, 255, 255, 0.15) inset, 0 1px 8px rgba(0, 0, 0, 0.4);  }

/* Slider */
.slides { float:left; width:580px; height:360px; overflow:visible; position:relative;    margin:40px auto 0;    }
  .slides img{  width:580px; height:360px;   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px rgba(255, 255, 255, 0.15) inset, 0 1px 8px rgba(0, 0, 0, 0.4);  }
.slides_container {  width:580px;  height:360px;   z-index:3;}

.pagination { width:100px; margin:18px auto 0px ; }
.pagination li a {
    font-size:0px;
    background-color: #fff;
  opacity:0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    border-radius:100px;
    display: block;
    overflow: hidden;
  margin: 0 0 0 15px;
  float:left;
    height:16px;
    width: 16px; 
     }
li.current a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity:1; }

/* Subscriber Form */
.subscriber {  margin:40px 0 0 0; float:right; display:block; height:364px; width:340px; border-radius:3px; background-color:rgba(0,0,0,0.75); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8c000000', endColorstr='#4c000000'); /* IE */ } 
.subscriber-wrap {  padding:20px; } 
.subscriber h3 { color:#fff; text-shadow : 1px 1px 1px rgba(0,0,0,0.3); font-size:1.12em; margin:0 0 20px; }
.subscriber p { color:#fff; text-shadow : 1px 1px 1px rgba(0,0,0,0.3); font-size:14px; opacity:0.5;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }

/* Subscriber Form Inputs */
.subscriber  input { padding:0 45px; color:#fff; border-radius:20px; height:40px;  width:70%; margin:22px 0 0;  }
input.name-newsletter { color:#fff; background: url(img/icons/name.png) no-repeat scroll 18px 12px rgba(0,0,0,0.1) ;
  border-color: #CCCCCC; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  }

input.email-newsletter { color:#fff; background: url(img/icons/email.png) no-repeat scroll 18px 12px rgba(0,0,0,0.1) ;
  border-color: #CCCCCC; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  }
  
input.phone-newsletter { color:#fff; background: url(img/icons/phone.png) no-repeat scroll 18px 12px rgba(0,0,0,0.1) ;
  border-color: #CCCCCC; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  }

/* Subscriber Submit Button */ 
input.button-newsletter  {  font-size:18px; display:block; clear:both;  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.2); float:right; width:200px; padding:0 18px 0 0 ; color:#47494a; background: url("img/arrow-orange.png") no-repeat scroll 170px 11px rgb(250, 250, 250);}

input.button-newsletter:hover { color:#191919;  background-color:#fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0) inset, 0 -1px 1px rgba(255, 255, 255, 0) inset, 0 1px 4px rgba(0, 0, 0, 0.2); }


/* Subscriber label */ 
.subscriber label { line-height:5; text-align:center;  font-size:12px; clear:both; margin:8px 0 0; color:#fff; opacity:0.3;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }

/*----------------------------------------------------*/
/* 6. How it Works */
/*----------------------------------------------------*/

.howitwork { padding:55px 0 40px; box-shadow:-3px -1px 1px rgba(0,0,0,0.1); }

.title { background: url(img/title.png) repeat-x scroll 0 20px ;  height:24px; width:100%; }
.title h3 { margin:0 auto; padding:8px 0; display:block; height:26px; text-align:center; width:300px; border-radius:20px; background: none repeat scroll 0 0 #dadcdd; font-weight:700; font-size:22px; color:#47494a; text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.4);  box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.8); }

.icon {  width:72px; margin:0 auto;  }
.featu { margin-top:65px; 
transition: margin-top .5s;
-moz-transition: margin-top .5s; /* Firefox 4 */
-webkit-transition: margin-top .5s; /* Safari and Chrome */
-o-transition: margin-top .5s; /* Opera */
}

.featu:hover { cursor:pointer; margin-top:55px;}
.featu  h6 { margin:20px 0 0; font-size:18px; text-align:center; font-weight:600; color:#47494a; }
.featu  p { margin:20px 55px 0; line-height:24px; font-size:14px; text-align:center; font-weight:400; color:#7b8285;}

.step { background: url(img/title2.png) repeat-x scroll 0 15px ; margin:30px 18% ; height:24px;  }
.step p { box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5); width:60px; margin:0 auto; padding:2px 10px; height:26px; border-radius:20px; background: none repeat scroll 0 0; background-color:#dadcdd; color:#6a7479; font-size:12px; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); 
transition: color 1s;
-moz-transition: color 1s; /* Firefox 4 */
-webkit-transition: color 1s; /* Safari and Chrome */
-o-transition: color 1s; /* Opera */
transition: background-color 1s;
-moz-transition: background-color 1s; /* Firefox 4 */
-webkit-transition: background-color 1s; /* Safari and Chrome */
-o-transition: background-color 1s; /* Opera */}
.featu:hover .step p {background-color: #f8633a; color:#fafafa;}




/*----------------------------------------------------*/
/* 7.  Features */
/*----------------------------------------------------*/

.features { height:381px; padding:40px 0 0; background-color:#fcfcfc; display:block; box-shadow:0px 1px 1px rgba(0,0,0,0.1) inset; }

.feature1 { float:left; } 
.feature1 h3 { font-size:22px; font-weight:600; color:#4b4f51; margin:8px 0 0; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); } 
.feature1 h6 { font-size:18px; font-weight:500; color:#b5bec2;  margin:25px 0 0; } 
.feature1 ul { margin:10px 0; }
.feature1 li { padding:2px 0 0 28px; height:20px; color:#4b4f51; margin:35px 0; }

.feature2 { float:right; } 


/*----------------------------------------------------*/
/* 8.  Screenshots */
/*----------------------------------------------------*/


.screenshots {   padding:55px 0 50px;  display:block; box-shadow:0px -1px 1px rgba(0,0,0,0.1) ; }

img.a { position: absolute; left: 0;  top: 0;  z-index: 10; border:0px solid #cccccc; cursor:pointer; }
img.b { position: absolute; left: 0; top: 0; z-index: 12; border:0px solid #cccccc; opacity:0; cursor:pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/  }

.tabs-ul  { float:right; width:80; margin:40px 0 10px; }
.tabs-ul li  { float:left;  width:30px;  height:8px; margin:10px 0 20px 10px; display:block; }
.tabs-ul li a  { float:left;  width:30px;  height:8px;   display:block; background-color:#dadcdd; }

.gallery ul { margin:10px 0 0px; min-height:150px; height:150px; padding-bottom:20px; }
.gallery li { position:relative;  min-height:150px; max-width:100%; } 
.gallery li img { box-shadow: 0 0  3px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2) inset, 0 -1px 1px rgba(255, 255, 255, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.6);   width:99%; border-radius: 1px; }


/*----------------------------------------------------*/
/* 9.  Testimonials */
/*----------------------------------------------------*/
.testimonials { padding:0 0 50px; }
.client {  width:149px; margin:0 auto; }

.testi { margin:65px 0 0; }
.testi:hover { cursor:pointer; }

.testi-div { background:url(img/testimonials/divider.png) center no-repeat; margin:20px auto ; width:80%; height:10px; display:block; }
.testi  h6 { margin:15px 0 0; font-size:17px; text-align:center; font-weight:600; color:#47494a; }
.testi  p { margin:20px 30px 0; line-height:24px; font-size:14px; text-align:center; font-weight:400; color:#7b8285;}

.quote { background: url(img/title2.png) repeat-x scroll 0 15px ; margin:30px auto ; height:24px; width:80%;  }
.quote img {  box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5); width:29px; margin:0 34%; padding:10px 20px; height:9px; border-radius:20px; background: none repeat scroll 0 0 #dadcdd; color:#6a7479; font-size:18px; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); }

/*----------------------------------------------------*/
/* 10.  Action */
/*----------------------------------------------------*/

.action {height:70px; padding: 12px 0 10px; box-shadow:0px 1px 1px rgba(0,0,0,0.2) inset; background-color: rgba(245, 112, 41, 1);
    border-color: rgb(106, 142, 148);
    background-image: url("http://www.elegantthemes.com/preview/Aggregate/wp-content/themes/Aggregate/images/body-bg5.png");
    background-repeat: repeat; }
.action h3 {float:left; padding:21px 0 0 85px; height:44px; font-size:25px;  font-weight:400; color:#fff; text-shadow : 1px 1px 1px rgba(0,0,0,0.2); background: url(img/icons/action-orange.png) no-repeat scroll 0px 0px transparent;
}}
.action h3 span { font-weight:800;}

.action-button { display:block;    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.2); float:right; width:80px; padding:0px 30px;   color:#47494a;    border-radius:20px; height:40px; line-height:38px; vertical-align:middle; margin:15px 0 0;  color:#47494a; background: url(img/buttons/arrow-orange.png) no-repeat scroll 110px 11px rgb(250, 250, 250);}
/*----------------------------------------------------*/
/* 10.  Action */
/*----------------------------------------------------*/

footer { background:url(img/body.png)repeat ;  position: relative; z-index:5; height:76px; display:block; box-shadow:0px -1px 1px rgba(0,0,0,0.2); }

.copy { float:left; margin:34px 0 0 ; font-size:14px; color:#7b8285; }
.copy p strong { font-weight:700; color:#3e4446; }

.social { float:right; margin:22px 0 0; }
.social li { float:left; margin:0 0 0 9px; }

li.google a {   background:url(../img/google.png) no-repeat; width:37px; height:37px; display:block; opacity:0.4;   -ms-filter: "progid:DXImageTrans form.Microsoft.Alpha(Opacity=40)"; }
li.google a:hover {  opacity:1;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  }

li.facebook a { background:url(../img/facebook.png) no-repeat; width:37px; height:37px; display:block; opacity:0.4;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  }
li.facebook a:hover {  opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

li.twitter a { background:url(../img/twitter.png) no-repeat; width:37px; height:37px; display:block; opacity:0.4;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  }
li.twitter a:hover {  opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.facebook-com { padding:60px 10px 20px; width:100%; margin:0 auto; }
.fb_iframe_widget { width:100%; }
.fb-comments, .fb_iframe_widget iframe  {width: 920px !important;}
.fb_iframe_widget span {width: 920px !important;}

#tw {
  float:right;
  margin-top: 28px;
  margin-right: 7px;
  width: 43px;
  height: 43px;
  -moz-transition: background-position .5s; /* Firefox 4 */
  -webkit-transition: background-position .5s; /* Safari and Chrome */
  -o-transition: background-position .5s; /* Opera */
  background: url(img/socialsprite.png);
  background-position: 0px 0px;
}


#tw:hover {background-position: 0px -46px}

#ml {
  float:right;
  margin-top: 28px;
  margin-right: 7px;
  width: 43px;
  height: 43px;
  -moz-transition: background-position .5s; /* Firefox 4 */
  -webkit-transition: background-position .5s; /* Safari and Chrome */
  -o-transition: background-position .5s; /* Opera */
  background: url(img/socialsprite.png);
  background-position: 43px 0px;
}

#ml:hover {background-position: 43px -46px}

#phonenum {
  position:fixed;
  display:block;
  z-index:800;
  top: -14px;
  border:1px solid #f8714c;
  -moz-transition: top .5s; /* Firefox 4 */
  -webkit-transition: top .5s; /* Safari and Chrome */
  -o-transition: top .5s; /* Opera */
  right: 15%;
  padding: 20px 10px 10px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #efefef;
  background: #f8633a;
}


#phonenum:hover{
  top:-10px;
}

#terms { 
	padding-top:20px;

#terms .wrapper p {
padding-bottom: 5px;

#terms .wrapper h3 {
padding: 10px;
}

#terms .wrapper h2 {
padding-bottom:10px;
}

 .gradient, .header, .wrapper, .main { border:none !important;} 

/*
@media(min-width: 768px) and (max-width: 979px) {  
.wrapper { width:735px; margin:0 auto; }
.video { width:420px; }
.subscriber {   width:290px;  } 
.subscriber h3 {   font-size:15px;  } 
.subscriber p {   font-size:12px;  } 
.video iframe {   width:100% }
.feature1 { float:left; width:42%; } 
.screenshots {   padding:55px 0 0;  }
.action h3 { font-size:23px; }
.feature1 li { font-size:14px; }
.slides { float:left; width:420px; height:320px; overflow:visible; position:relative;    margin:40px auto 0;   }
 .slides_container {  width:420px;  height:320px;   z-index:3;}
.form-contact input.input-email {  margin:20px 0 0 0; width:90%;   }
.form-contact input.input-name {  margin:5px 0 0 0; width:90%;   }
.fb-comments, .fb_iframe_widget iframe  {width: 735px !important;}
.fb_iframe_widget span {width: 735px !important;}

 }
 
@media (min-width:768px) and (max-width:979px){
.wrap-switcher {
    width: 750px;
    margin: 0px auto;
}}  */