/* Socializer  - Table of Contents
----------------------------------------------------

1. Color-Skin Styles
2. Reset Styles 
3. Layout and General Styles
4. Header Styles
5. Main Section Styles
--5.1 - Buttons
--5.2 - Slider
6. Features Section Styles
7. Highlight Styles
8. Newsletter Section Styles
9. Screenshots Section Styles
10. Footer Buttons ( Join The Party) Section Styles
11. Footer Styles
12. Contact Form Styles
13. Responsive Styles
14. Retina Ready Backgrounds



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

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 {
	 
	line-height: 1;
    font-family: 'Roboto', sans-serif;
	font-weight:400;
    }
ol, ul {
	list-style: none;
}

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

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

.wrapper { width:940px; margin:0 auto; }
.clear { clear:both; }
.main-content { padding:40px 0 0; height:519px; display:block; }
h3 { font-size:30px; }
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/*----------------------------------------------------*/
/* 4. Header  */
/*----------------------------------------------------*/
.header  { clear:both; height:76px; }
.logo { float:left; }
.navi { float:right; padding:2px 0 0; }
.navi li { float:left; width:95px; }
.navi li a { float:right; color:#fff; font-size:16px; font-weight:400; opacity:0.4; }
.navi li a:hover {  opacity:0.8; }
.navi li.active a { opacity:1; }

/*----------------------------------------------------*/
/* 5. Slider  */
/*----------------------------------------------------*/

.slider { clear:both; }
.slider-txt {float:left; width:416px;}
.slider-txt h3 { color:#fff; line-height:1.6; font-weight:700; padding:40px 0 30px; }
.slider-txt p { color:#fff; line-height:2; font-size:18px; font-weight:300; padding:0 0 40px; }
.slider-img { float:right; width:524px;}

.bt { float:left; color:#fff; font-size:18px; font-weight:700; background:url(../img/button.png) no-repeat; text-align:center; padding:15px 0; width:197px; height:20px; display:block; opacity:0.6; }
.bt:hover { opacity:1; color:#fff;  }
.bt2 { margin:0 22px 0 0; }

#nav { width:60px; margin:0 auto; padding:2px 50px; height:15px;  }
#nav a { overflow:hidden; display: block; overflow: hidden; border-radius:40px; padding:4px; float:left; height:1px; width:1px; background-color:#fff; margin:3px 0 0 8px; opacity:0.4;}
#nav a.activeSlide { padding:5px; opacity:1; margin:2px 0 0 8px;   }	
.pagi { height:5px; box-shadow: 0px -1px 0px rgba(255,255,255,0.6) inset; }	


/*----------------------------------------------------*/
/* 6. Features Section  */
/*----------------------------------------------------*/

.features { clear:both; padding:50px 0 20px; }
.features h3{ font-size:22px; text-align:center; font-weight:300; }
 
.featu  { margin:60px 0; }
.featu:hover   { cursor:pointer; }
.featu h1 { text-align:center; margin-top:30px ; font-size:16px; text-transform:none; color:#808080;  }

.featu:hover p { color:#888888; }
.featu p { padding:0 40px; text-align:center; margin-top:16px; font-family: 'Lato', sans-serif; font-size:14px; text-transform:none; color:#a8a8a8; line-height:24px;  }
.icon { width:63px; height:63px;  margin:0 auto; display:block;  }

.ft2 { opacity:0; position:absolute;   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  }
.ft1 { position:absolute;  }


/*----------------------------------------------------*/
/* 7. Z-Layout - Section1  */
/*----------------------------------------------------*/

.zlayout1 { height:380px; background-color:#1d1d21; padding:30px 0; }
.z-txt { margin:55px 0; width:425px; float:left; }
.z-txt h3 { padding:0 0 30px; font-size:30px; color:#fff; font-weight:700;  text-shadow:1px 1px 1px rgba(0,0,0,0.4); }
.z-txt p.subtitles { padding:0 0 20px; font-size:18px;   font-weight:300; text-shadow:1px 1px 1px rgba(0,0,0,0.4); }
.z-txt p { padding:0 0 30px; font-size:15px; color:#f0f0f0; font-weight:300; line-height:2; }
.z-img { width:425px; float:left; height:250px; }
.z-txt .bt { float:right; color:#fff; font-size:14px; font-weight:400; background:url(../img/button2.png) no-repeat; text-align:center; padding:12px 0; width:108px; height:20px; display:block; opacity:0.6; }
.z-txt .bt:hover { opacity:1; color:#fff;  }

/*----------------------------------------------------*/
/* 8. Second Slider  */
/*----------------------------------------------------*/
.slider2 { padding:70px 0;  }
.slider2 h3 { text-align:center; padding:0 0 30px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
 
.slider2 p { color:#808080; text-align:center; font-size:15px; line-height:2.2; padding:0 15%;  }

.slides {  float:left; background:url(../img/slider2/macbook.png) center  no-repeat; width:94%; height:505px; overflow:visible; position:relative;   margin:0 auto; padding:1px 0 0; }
#prev2 { float:left; width:24px; height:41px; display:block; background:url(../img/slider2/prev.png) no-repeat; margin:200px 0 0; }
#next2 { float:right; width:24px; height:41px; display:block; background:url(../img/slider2/next.png) no-repeat; margin:200px 0 0;  }
 
.slides_container { width:622px; margin: 31px auto 100px; height:380px; }
.slides_container  img { width:100%; }
 
.bt3 {  margin:50px auto;color:#efefef; font-size:19px; font-weight:400;  text-align:center; padding:14px 0; width:192px; height:22px; display:block; cursor:pointer;    }
.bt3:hover { color:#fff;  }



/*----------------------------------------------------*/
/* 9. Zlayout Section2   */
/*----------------------------------------------------*/

.zlayout2 { box-shadow:1px 1px 1px rgba(0,0,0,0.2)inset ,-1px 0px 1px rgba(255,255,255,0.1)  ; height:380px; padding:30px 0; margin:60px 0 0; } 
.z-txt2 { margin:55px 0; width:425px; float:left; padding:0 0 0 45px; }
.z-txt2 h3 { padding:0 0 30px; font-size:30px; color:#fff; font-weight:700;  text-shadow:1px 1px 1px rgba(0,0,0,0.4); }
.z-txt2 p.subtitles { padding:0 0 20px; font-size:18px; color:#1d1d21; font-weight:300; text-shadow:1px 1px 1px rgba(255,255,255,0.2); }
.z-txt2 p { padding:0 0 30px; font-size:15px; color:#f0f0f0; font-weight:300; line-height:2; }
.z-img2 { width:425px; float:right; height:250px; }

.z-txt2 .bt { float:right; color:#fff; font-size:14px; font-weight:400; background:url(../img/button2.png) no-repeat; text-align:center; padding:12px 0; width:108px; height:20px; display:block; opacity:0.6; }
.z-txt2 .bt:hover { opacity:1; color:#fff;  }

/*----------------------------------------------------*/
/* 10. Testimonials     */
/*----------------------------------------------------*/

.testimonials {padding:60px 0 30px; background-color:#e0e0e0; box-shadow:1px 1px 1px rgba(255,255,255,0.4)inset ,-1px 0px 1px rgba(0,0,0,0.1)  ; }
.testimonials h3 { text-align:center; padding:0 0 60px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
.testi-head { position:relative; clear:both; height:95px; }
.testi-head img { float:left; position:absolute; left:0;}
.testi-head p { font-size:15px; color:#fff; float:left; margin:18px 0 0 80px;  background-color:#b8b8b8; display:block; padding:15px 40px 16px; }
.testimonials .span4:hover { cursor:pointer; }

.testi-quote p.quote { color:#b8b8b8; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size:72px; padding:0 0 0 30px; float:left; height:100%; }
.testi-quote p.quote2 { text-align:left; color:#a8a8a8;line-height:1.8; font-size:15px;  padding:0 10px 0 85px; height:100%; }

.testi { height:260px; }
#nav2{  width:60px; margin:0 auto; padding:2px 50px; height:15px;  }
#nav2 a { overflow:hidden; display: block; overflow: hidden; border-radius:40px; padding:4px; float:left; height:1px; width:1px; background-color:#c3c3c3; margin:3px 0 0 8px; opacity:0.4; }
#nav2 a.activeSlide { padding:5px; opacity:1; margin:2px 0 0 8px; }	

/*----------------------------------------------------*/
/* 10. Screenshots     */
/*----------------------------------------------------*/
.screenshots { padding:60px 0 40px; background-color:#f0f0f0; box-shadow:1px 1px 1px rgba(255,255,255,0.4)inset ,-1px 0px 1px rgba(0,0,0,0.1)  ; }
.screenshots h3 { text-align:center; padding:0 0 60px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
 
.gallery ul.hiden { display:none; margin-top:40px; padding: 0 0 30px; }
.gallery ul { margin:0; min-height:150px; height:150px; padding-bottom:30px; }
.gallery li { position:relative;   max-width:100%; }	
.gallery li img { width:95%; ition:relative;  min-height:150px; max-width:100%; }	
.gallery li img { box-shadow: 0 0  1px rgba(0, 0, 0, 0.6), 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);   }
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*/	}
.screenshots .bt3 { margin:40px auto 0px; }
#less { display:none;  }

/*----------------------------------------------------*/
/* 11. Footer     */
/*----------------------------------------------------*/

.footer {  height:60px; display:block; }

.copy { font-size:12px; float:left; padding:25px 0 0;  }
.copy p  {  font-weight:400; color:#fff; }
.copy p span { opacity:0.6; }
.copy p strong {   font-weight:700; opacity:1; }


.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.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  }
.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;  }
 
/*----------------------------------------------------*/
/* 12. SubPages Styles Pricing     */
/*----------------------------------------------------*/

.main-content2 { padding:38px 0 0; height:51px; display:block; }
.pricing { padding:40px 0 40px; background-color:#f0f0f0;  }
.pricing h3 { text-align:center; padding:0 0 60px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
 
.tabs-nav li { float:left; width:90px; display:block; }
.tabs-nav a { display:block; height:26px; padding:8px 0 0; text-align:center; background-color:#e8e8e8;   color:#909aa0; font-size:13px; width:90px; }
 

.tabs-content {     display:block; margin:0 ; padding:65px 30px 40px;  }
 
ul.tabs-nav { float:left; width:180px; margin: 0 20px; }
.divi { float:left; width:360px; background-color:#e8e8e8; height: 30px;display:block; }


.pricing .row-fluid .span4 {   margin:0; width:33.3%; }
.pric-wrap { padding:50px 0; }
.prics { border:1px solid #b8bfc2; margin:0; margin-left:0; border-left:none; border-right:none; }
.pric { border:1px solid #b8bfc2; margin:0; margin-left:0; }
.pric h6 {text-align:center; text-transform:uppercase; font-size:18px; color:#505d63; }
.prics h6 {text-align:center; text-transform:uppercase; font-size:18px; color:#505d63; }
.pric-head   { padding:20px 0; border-bottom:1px solid #b8bfc2;}

.ph h6  {  color:#fff;  }

.pric-body li   {  font-weight:300; font-size:14px; color:#9da4a7; width:100%; margin:0 auto; height:20px ;border-bottom:1px solid #e0e0e0; text-align:center; display:block;  }
.pric-body li.yes   { background:url(../img/check-y.png) no-repeat 15% 20px; padding:15px 0 ;}
.pric-body li.no   {  background:url(../img/check-n.png) no-repeat 15% 20px; padding:15px 0;}
.pric-footer   { height:125px; }
.pric-footer p { padding:28px 0; color:#505d63; font-weight:400; font-size:50px; text-align:center; }
.pric-footer p span { font-weight:300; font-size:20px; text-align:center; }
.pric-footer .pric-butt a { font-weight:600; color:#737b7e; font-size:14px; display:block; background-color:#f0f0f0; padding:10px 0; border:1px solid #b8bfc2; margin:0 auto; height:20px;border-radius:2px; text-align:center; width:100px; } 

.pric-footer .pric-butt a:hover { background-color:#fff;   border:1px solid #9da4a7;   } 

#success { color:orange; margin:20px 0; float:left; width:150px;  }

.ph p { color:#fff !important; }


.cta h3 { text-align:center; padding:50px 0 30px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
.cta p { color:#808080; text-align:center; font-size:15px; line-height:2.2; padding:0 15%;  }

/*----------------------------------------------------*/
/* 13. SubPages Styles Contactus     */
/*----------------------------------------------------*/

.contact { padding:35px 0; background-color:#f0f0f0;    }
.contact h3 { text-align:center; padding:10px 0 60px; font-size:22px; color:#2d2c26; font-weight:300;  text-shadow:1px 1px 1px rgba(255,255,255,0.4); }
.contact h6 { font-size:34px; font-weight:800;}
.contact h6 span { color:#9c9c9d}
.cont { padding:0 20px;border-left:1px solid #e8e8e8; }
.cont a{ font-size:14px; text-decoration:underline; }
.cont p { padding: 20px 0; line-height:28px; font-size:14px; color:#7b8285; }
.credits     { padding: 20px 0;   }
.credits p   { padding: 5px 0;  line-height:28px; font-size:14px;  }
.cont p strong  {   line-height:28px; font-size:14px; color:#47494a; }

.form-contact  { float:left; width:100%; }
.form-contact input, .form-contact textarea { border-radius:8px;   
  }
  .form-contact input:focus , .form-contact textarea:focus {  border: 1px solid #CCCCCC;
  }
.form-contact input { float:left; width:41%; height:30px; padding:5px 20px; }
.input-email {  margin:0 0 0 20px;   }
.form-contact textarea { float:left; width:92%; height:200px; padding:5px 20px; margin:20px 0 0; }
input.input-submit {  display: block;
    float: right;
    height: 40px;
    padding: 12px 0;
    width: 140px; margin:30px 0 0;}

input { border:0;  color:#fff;  }
input:focus { border:0; outline:0; }
input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {  color: #191919;border-color:#cccccc;box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3),  1px 1px 2px rgba(0, 0, 0, 0) inset; }
input:focus:valid:focus, textarea:focus:valid:focus, select:focus:valid:focus {  color: #191919;border-color:#cccccc;box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3),  1px 1px 2px rgba(0, 0, 0, 0) inset; }

#success { color:red;   }

.divi2 { clear:both; width:100%; background-color:#e8e8e8; height: 30px; display:block; }


/*----------------------------------------------------*/
/* 14. SubPages Styles Contactus     */
/*----------------------------------------------------*/

@media(min-width: 768px) and (max-width: 979px) { 

.wrapper { width:725px; }
.slider-txt { width:320px;}
.slider-img { width:405px;}
h3 { font-size:22px; }
.bt { background-size:100%; width:140px; font-size:16px;  padding:10px 0; }
.main-content { height:436px; }
.z-img { width:405px; }
.z-txt { width:290px;  margin: 36px 0;}
.z-txt h3 { font-size:20px; }
.z-txt p.subtitles  { font-size:14px; } 

.z-img2 { width:390px; }
.z-txt2 { width:290px;  margin: 36px 0;}
.z-txt2 h3 { font-size:20px; }
.z-txt2 p.subtitles  { font-size:14px; } 
.slides { width:93%; background-size:100%; }
.slides_container { width:518px; margin: 68px auto 100px; height:378px; }
.testi-quote p.quote2 { font-size:13px; }
.testi-head p { font-size:13px; padding:15px 20px 16px; }
.divi { width:252px; }
.form-contact input { width:39%; }
  }

  
@media(min-width: 480px) and (max-width: 767px) {  
body { padding:0; }
.wrapper { width:480px; } 
.main-content { height:840px; }
.bttons { width:416px; margin:0 auto 30px; height:60px;}
.slide { width:480px; }
.slider { width:480px; }
.slider-txt { width:100%; }  
.slider-txt h3 { text-align:center;  padding:10px 0 30px; }
.slider-txt p { text-align:center;    } 
.slider-img { width:100%; margin:0 auto; float:none; }
.z-txt { float:none; margin:65px auto 0; }
.z-txt2 { float:none; margin:65px auto 75px; }
.z-img { width:420px; margin:0 auto; height:350px; float:none;} .z-img2 { width:420px; margin:0 auto; height:350px; float:none;} 
.zlayout1 { height:690px; }
.slides { width:90%; background-size:100%; height: 380px; }
.slides_container { width:328px; margin: 74px auto 100px; height:378px; }
.zlayout2 { margin:20px 0 0; padding:10px 0; height:780px;}
#prev2, #next2 { margin:150px 0 0; }
.testi { height:690px; }
.testi-head p { width:300px; text-align:center; }
.testi .span4 { margin-bottom:60px; }
.gallery  {   min-height:100px; }
.gallery li { margin:20px 0 0;  height:300px; }
.gallery li img { width:90%; margin:0px 0 0 6%;  }
.gallery ul { height:900px; }
.gallery ul.hiden { margin-top:40px; padding: 0 0 30px; height:600px; height:900px;}
.bt3 { margin: 25px auto; }
.form-contact input { width:39%; }
 
.cont { display:none; }
.cta .bt3 {margin: 40px auto;}
.pricing .row-fluid .span4 {   margin:60px auto 0; width:100%; }
.pric-body li.yes   { background:url(../img/check-y.png) no-repeat 30px 16px; padding:15px 0 ;}
.pric-body li.no   {  background:url(../img/check-n.png) no-repeat 30px 16px; padding:15px 0;}
.prics { border:1px solid #b8bfc2; margin:0; margin-left:0; border-left:1px solid #b8bfc2; border-right:1px solid #b8bfc2; }
.divi { width:130px; }
 }
 
 @media(max-width:480px) { 
body { padding:0; }
.wrapper { width:300px;  }
.navi li { width:53px; margin:4px 0 0; } 
.bt { background-size:100%; width:138px; font-size:16px;  padding:10px 0; }
.features h4 { line-height:1.8; }
.navi li a { font-size:12px; }
h3 { font-size:22px; }
.main-content { height:726px; }
.bttons { width:280px; margin:0 auto 30px; height:60px;}
.slide { width:300px; }
.slider { width:300px; }
.slider-txt { width:100%; }  
.slider-txt h3 {   text-align:center;  padding:10px 0 30px; }
.slider-txt p { text-align:center;    } 
.slider-img { width:100%; margin:0 auto; float:none; }
.z-txt { float:none; margin:0px auto 0; width:300px; text-align:center;}
.z-txt2 { float:none; margin:65px auto 75px; width:300px; text-align:center; padding:0; }
.z-img { position:relative; width:300px; margin:0 auto; height:350px; float:none;}
.z-img img { width:100%; }
.z-img2 img { width:100%; }
 .z-img2 { position:relative; width:300px; margin:0 auto; height:350px; float:none;} 
.zlayout1 { height:740px; }
.slides { width:82%; background-size:100%; height: 283px; }
.slides_container { width:188px; margin: 74px auto 100px; height:378px; }
.zlayout2 { margin:20px 0 0; padding:10px 0; height:800px;}
#prev2, #next2 { margin:110px 0 0; }
.testi { height:880px; }
.testi-head p { width:140px; text-align:center; }
.testi .span4 { margin-bottom:60px; }
.gallery  {   min-height:100px; }
.gallery li { margin:20px 0 0;  height:180px; }
.gallery li img { width:90%; margin:0px 0 0 6%;  }
.gallery ul { height:600px; }
.gallery ul.hiden {  padding: 0 0 30px; height:600px; height:600px;}
.bt3 { margin: 25px auto; }
.form-contact input { width:32%; }
.form-contact textarea { width:84%; }
.cont { display:none; }
.cta .bt3 {margin: 40px auto;}
.pricing .row-fluid .span4 {   margin:60px auto 0; width:100%; }
.pric-body li.yes   { background:url(../img/check-y.png) no-repeat 30px 16px; padding:15px 0 ;}
.pric-body li.no   {  background:url(../img/check-n.png) no-repeat 30px 16px; padding:15px 0;}
.prics { border:1px solid #b8bfc2; margin:0; margin-left:0; border-left:1px solid #b8bfc2; border-right:1px solid #b8bfc2; }
.divi { width:40px; }
.copy { display:none; }
.social ul { float:none; width:84px; margin:0 auto; }
.bt2 { margin:0; }
 }