/* ShowPro - Table of Contents */
/*------------------------------- 

1. Color-Layout Styles
2. Reset Styles 
3. Layout and Font Styles
4. Header Styles
5. Main Section Styles
6. Features Section Styles
7. Z-layout sections
8. Newsletter Section Styles
9. Footer Section Styles
10.Contact Form Styles
11. Responsive Styles

 
 
/* ------------- 1. Skin and Layout Styles --------------- */

@import url("skins/wide.css");
 
@import url("skins/green.css");

/* ---------------- 2. Reset Styles ----------------- */

html,  div, span, object, iframe,
h1, body, 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;
}

h1 {
font-family: 'Passion One', cursive;
font-size: 30px;
color: #99cc33;
padding: 20px 0 10px 0;
text-align: center;


	}
	
h2 {
font-family: 'Passion One', cursive;
font-size: 24px;
color: #99cc33;
text-align: center;

	}
	

	
	
	

footer, header, menu, nav, section { display: block; }
ol, ul { list-style: none; }

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


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

.clear { clear:both; }
.wrapper { width:940px; margin:0 auto; }
body { font-family: 'Roboto', sans-serif; }
.howitwork, .screenshots, .testimonials, { background:url("../img/body.png") repeat !important;}
.pattern { background:url("../img/pattern.png") repeat !important; }
.footer{background-color: #ffffff;}

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

/* Header and Logo */
.header { height:76px; display:block; background-color:#5c9742; box-shadow:0px -1px 0px rgba(0,0,0,0.1) inset;    }
.logo { float:left; width:146px; }
.logo h1 { float:left; margin:26px 0 0; width:146px; height:28px;  display:block;  background:url(../img/logo.png) no-repeat ; }

/* Navigation and Button */
.navi { float:right; width:505px; }
.navi1  { width:275px; float:left; padding:26px 0; }
.navi1 li  { font-weight:500;  text-shadow:1px 1px 1px rgba(0,0,0,0.2); float:left; margin:0 0 0 35px;}
.navi1 li   {opacity:0.6;}
.navi1 li:hover  {opacity:1;}
.navi1 li.active   {opacity:1;}
.navi2  { padding:0px 0 0 0; margin:20px 0 0 40px; display:block; width:190px; float:left; height:36px; background:url("../img/hd-div.png") no-repeat left ;  }
.hd-button a { font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.1);  float:right; font-size:16px;   padding:5px 28px 0 15px; width:84px; height:29px; border-radius:3px;  }


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


.main-content { padding: 0; height:375px; display:block; box-shadow:0px 1px 0px rgba(255,255,255,0.2) inset,0px -1px 0px rgba(0,0,0,0.1) inset ; }
.product { width:370px; float:left; height:445px; }
.product-data { width:540px; padding:60px 0 0 30px; float:right; }
.product-data h2 { font-size:28px; font-weight:300; color:#fff;  text-shadow:1px 1px 1px rgba(0,0,0,0.25); }
.product-data h2 strong { font-weight:500; }
.product-data p.subtitle { text-shadow:1px 1px 1px rgba(0,0,0,0.25); padding:25px 0 0; font-size:17px; color:#fff;   }
.product-data p.subtitle span { font-size:17px; color:#fff;  margin: 0 6px; padding:4px 10px 6px; border-radius:3px; box-shadow:1px 1px 0px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.1) inset;}
.product-data ul  { margin:35px 0 0 0; font-weight:500; text-shadow:1px 1px 1px rgba(255,255,255,0.25);}
.product-data ul li {  margin:0 0 25px 0;   display:block; padding:0 0 0 30px; font-size:14px; }

/*  layout 1 */
.buttons { width:100%;  font-weight:500; padding:10px 0 0; }
.buttons a { font-size:18px; text-align:center; border-radius:3px;  float:left; width:185px; height:38px;  padding:12px 60px 0 0px; }
.buttons a.bt1 { color:#929396; text-shadow:1px 1px 1px rgba(255,255,255,0.8);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.1);      background:url("../img/bt1.png") no-repeat 92% 0px ;  background-color:#f3f3f3; }
.buttons a.bt1:hover { background-color:#fff; }
.buttons p.bt-div { text-shadow:1px 1px 1px rgba(0,0,0,0.1); font-size:11px; color:#fff; text-align:center; float:left; height:38px; display:block; width:40px;   background:url("../img/bt-div.png") no-repeat center top  ; margin:15px 0 0;  }
.buttons a.bt2 { color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.1); }

/*  layout 2 */
.buttons2 { background:rgba(0,0,0,0.17); width:90%; display:block; height:50px; padding:6px; border-radius:4px; box-shadow:1px 1px 1px rgba(0,0,0,0.2) inset,1px 1px 1px rgba(255,255,255,0.2);   }

.buttons2 a.bt { font-size:18px; text-align:center; border-radius:3px;  float:left; width:88%; height:38px;  padding:12px 60px 0 0px; display:block;  color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.1);  }


/*  layout 3 */
.newsletter-form {   margin:0 auto; width:400px; }
input.email-newsletter {border:1px solid rgba(0,0,0,0.2); background:rgba(0,0,0,0.17);  color:#fff; width:280px ; padding-left:14px;float:left; height:30px; border-radius: 6px 0px 0px 6px;  box-shadow:1px 1px 1px rgba(0,0,0,0) inset,1px 1px 1px rgba(255,255,255,0.2);     }
input.email-newsletter:focus { color:#fff; outline:0; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); border:1px solid rgba(0,0,0,0.2);  }
input.email-newsletter:focus:valid { color:#fff; outline:0; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); border:1px solid rgba(0,0,0,0.2);  }
input.email-newsletter:focus:invalid { color:#fff; outline:0; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); border:1px solid rgba(0,0,0,0.2);  }
input.button-newsletter { color:#efefef; float:left; height:40px; border-radius: 0px 6px 6px 0px; width:90px; box-shadow:0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(255, 255, 255, 0.1);   outline:0;border:1px solid rgba(0,0,0,0.2);}
.newsletter { width:100%; float:left; }
.newsletter-form { margin:10px 0 0;  width:100%; float:left;  }
/* ---------------- 6. Features Section Styles ----------------- */

.second-section { padding:80px 0 80px 0; background:url("../img/body.png") repeat !important; display:block; box-shadow:0px 1px 0px rgba(255,255,255,0.8) inset; }
.title { width:100%; }
.title .div-left { margin:13px 0; height:10px; width:217px; float:left; background:url("../img/div-left.png") no-repeat left ;   } 
.title h1 { font-weight:300; color:#444c4f; text-shadow:1px 1px 1px rgba(255,255,255,0.6); font-size:24px; float:left; width:506px; text-align:center; }
.title h1 span {  font-weight:500; }
.title .div-right { margin:13px 0; float:left; height:10px; width:217px; background:url("../img/div-right.png") no-repeat right ; } 

.featu { overflow:hidden; box-shadow:1px 1px 1px rgba(255, 255, 255, 0.4); margin:30px 0 0;  display:block; padding:25px 0 25px;	background-color: #f3f3f3; border-radius: 6px;	border:1px solid #d5d6d5;color: #999;cursor:pointer;	  }
 	
.featu-icon { position: relative; width:101px; height:101px; margin:0 auto;   }
.ft2 { position:absolute;}
.ft1 { position:absolute;  }

.featu .featu-title h6 { text-shadow:1px 1px 1px rgba(255,255,255,0.6); text-align:center; font-size:16px; font-weight:600; color:#505d63;  padding:25px 0 18px; margin:0 auto; }
.featu .featu-title-h h6 { text-shadow:1px 1px 1px rgba(0,0,0,0.2); color:#fff; }
.featu .featu-body p { text-align:center; line-height:1.7; font-size:13px;   font-weight:300; color:#818488;  padding:0px 30px; margin:0 auto; }
.featu .featu-body-h  p { font-weight:400; color:#efefef; text-shadow:1px 1px 1px rgba(0,0,0,0.2);}

.featu .featu-link { color:#818488; margin:25px auto 0; border-radius:3px; padding:6px 0 9px; display:block; font-size:13px; background-color:#e8e9e8; text-align:center; width:108px; }
.featu .featu-link-h { box-shadow:0px 0px 1px rgba(0, 0, 0, 0.4); color:#818488; margin:25px auto 0;  background-color:#eaeaea;  }
.featu .featu-link-h:hover { background-color:#afd137; color: #ffffff; font-weight: bold; }




/* ---------------- 11. Call to action Styles ----------------- */

.cta { margin:0px; padding:40px 0; height:50px; box-shadow:1px 0 1px rgba(0,0,0,0.2) inset,-1px 0 1px rgba(0,0,0,0.2)inset,1px 0 1px rgba(255,255,255,0.6) ,-1px 0 1px rgba(255,255,255,0.6) ; } 
 
.cta h3 { margin:5px 0 0; font-weight:300; color:#fff; padding:0 0 0 50px; font-size:26px; height:32px; display:block; no-repeat left ;text-shadow:1px 1px 1px rgba(0,0,0,0.25); text-align: center; }
.cta h3 strong { font-weight:500; }
.cta-button { float:right; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 -1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.1);      background:url("../img/bt2.png") no-repeat 180px 0px ;  font-size:18px; text-align:center; border-radius:3px;   width:185px; height:38px;  padding:12px 60px 0 0px; display:block; font-weight:500;  }
 
/* ---------------- 12. Footer Styles ----------------- */

.footer { height:65px; }
.copy { font-size:13px; float:left; padding:25px 0 0;  }
.copy p  {  font-weight:300; color:#818488; }
.copy p strong { color:#636363; font-weight:800; }

.social ul {float:right;  padding:15px 0 0;   margin:0 auto; display:block; }
.social ul li { float:right; width:40px; height:40px; display:block; padding:0 2px 0 0; }
.social ul li a { width:40px; height:40px; display:block;  opacity:0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";  }
.social ul li a:hover {  opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  }
.social ul li.facebook a {  background:url(../img/facebook.png) no-repeat;     }
.social ul li.twitter a {  background:url(../img/twitter.png) no-repeat;  }
.social ul li.google a {  background:url(../img/google.png) no-repeat;  }



/* ---------------- 14. Responsive Form ----------------- */
@media(min-width: 768px) and (max-width: 979px) {  

.wrapper { width:725px; margin:0 auto;}
.product { width:300px;  height:445px; }
.product-data { width:395px; padding:24px 0 0 30px;   }
.product-data h2 { font-size:21px;    }
.product-data p.subtitle {font-size:13px;  }
.buttons a { font-size:14px;    width:115px; height:34px;  padding:14px 60px 0 0px; }
.title .div-left {  width:117px;   } 
.title .div-right {  width:117px;   } 
.title h1 {  font-size:22px;   width:491px;  }
.tabs-content {   width:665px;	  }
.tabs-text h6 {  font-size:18px;     }
.tabs-text p.subtitles {  font-size:12px; padding:15px 0 0;  }
.tabs-text p  {  font-size:13px; line-height:1.9;  }
.tabs-text ul li {   font-size:12px; }
.tabs-text ul  { margin:25px 0 0 0;  }
.gallery ul {    min-height:100px; height:100px;   }
.cta h3 { font-size:20px; }

.buttons2 a.bt { width:83%; font-size:14px; }
}


@media(min-width: 480px) and (max-width: 767px) { 

.wrapper { width:480px; margin:0 auto; }
.navi1  { display:none;  }
.navi { width:294px; float:left; }
.navi2 { float:right; margin:20px 0 0; }
.main-content {  height:700px;  position:relative; }
.product { top:340px; position:relative; float:none; width:370px; margin:0 auto;  height:445px; }
.product-data { top:0px; position:absolute; width:395px; padding:24px 0 0 30px;   }
.product-data h2 { font-size:20px; text-align:center;  line-height:1.8;  }
.product-data p.subtitle {font-size:12px; text-align:center; }
.buttons a { font-size:14px;    width:115px; height:34px;  padding:14px 60px 0 0px; }
.title .div-left {  width:50px;   } 
.title .div-right {  width:50px;   } 
.title h1 {  font-size:19px;   width:380px;  }
.features { padding:40px 0 0;}
.features .title { padding:0 0 40px; }
.tabs-content { height:520px;   width:400px;	  }
.tabs-text{   width:100%;	  }
.tabs-img { padding:30px 0 0; width:100%; float:right; }
.gallery  { height:1260px; min-height:100px; }
.gallery li { margin:20px 0 0;  height:300px; }
.gallery li img { width:90%; margin:0px 0 0 6%;  }
.pric { margin:0 0 60px; }
.prics { margin:0 0 60px; }
.cta { margin:5px 0 0; height:100px; }
 
.cta h3 { margin:0 0 20px; float:none; font-size:22px; width:420px; }
.cta-button { float:none;  font-size:18px; text-align:center; border-radius:3px;   width:185px; height:38px;  padding:12px 60px 0 0px; margin:0 auto; }
.copy {  display:none;  }
.social ul { width:126px; padding:15px 0 0; float:none;  margin:0 auto; display:block; }
.buttons2 { margin:10px auto 0; }
.buttons2 a.bt { width:83%; font-size:14px; }
}
 
@media(max-width:480px) {  
.wrapper { width:300px; }
.navi1  { display:none;  }
.navi { width:154px; float:left; }

.navi2 { width:160px; float:right; margin:20px 0 0; }
.main-content {  height:610px;  position:relative; }
.product { top:320px; position:relative; float:none; width:300px; margin:0 auto;  height:445px; }
.mn2 { height:540px; }
.product-data { top:0px; position:absolute; width:300px; padding:24px 0 0 0px;   }
.product-data h2 { font-size:24px; text-align:center;  line-height:1.8;  }
.product-data p.subtitle {font-size:11px; text-align:center; margin:0 0 30px;}
.product-data p.subtitle span { display:none;}
.buttons a { display:block; float:none;  margin:0px auto 25px;font-size:14px;    width:200px; height:34px;  padding:14px 60px 0 0px; }
.product-data ul  { display:none; }
.buttons p.bt-div { display:none; }
.title .div-left {  display:none;  } 
.title .div-right {  display:none;  } 
.title h1 {  font-size:16px;   width:300px;  }

.features { padding:40px 0 0; }
.features .title { padding:0 0 40px;}
.tabs-content { height:340px;   width:240px;	  }
.tabs-text{   width:100%;	  }
.tabs-img { display:none; }
.tabs-text h6 {  font-size:18px;     }
.tabs-text p.subtitles {  font-size:12px; padding:15px 0 0;  }
.tabs-text p  {  font-size:13px; line-height:1.9;  }
.tabs-text ul li {   font-size:12px; }
.tabs-text ul  { margin:25px 0 0 0;  }
.tabs-nav { width:300px; }
.tabs-nav a {  width:100px; }
.tabs-nav li  {  width:100px; }
.gallery  { height:870px; min-height:100px; }
.gallery li { margin:20px 0 0;  height:200px; }
.gallery li img { width:90%; margin:0px 0 0 4%;  }
.pric { margin:0 0 60px; }
.prics { margin:0 0 60px; }
.cta { margin:5px 0 0; height:50px; }
 .pric-wrap {
    padding: 60px 0 20px;
}
.cta h3 { display:none; }
.cta-button { float:none;  font-size:18px; text-align:center; border-radius:3px;   width:185px; height:38px;  padding:12px 60px 0 0px; margin:0 auto; }
.copy {  display:none;  }
.social ul { width:126px; padding:15px 0 0; float:none;  margin:0 auto; display:block; }
.buttons2 { margin:20px auto 0; height:60px;}
.buttons2 a.bt { margin:0px 0 0; font-size:14px; line-height:1.4; width:100%;     background-position:0 800px; height:45px; padding:15px 0 0 0; }
.pro2 { top:240px; }
input.email-newsletter { width:54%; }
input.button-newsletter { width:30%; }