/*  Lister  - 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


/*----------------------------------------------------*/
/* 1. Color/Skin Styles */
/*----------------------------------------------------*/

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

/*----------------------------------------------------*/
/* 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: 'Titillium Web', sans-serif;
    font-weight:400;
}
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: 960px;
  margin: 0 auto;
}
.clear {
  clear: both;
}
h1 {
  font-size: 28px;
  text-align: center;
  font-weight: 700;
}
h2 {
  font-size: 16px;
  text-align: center;
  font-weight: 500;
}
.howitwork,
.screenshots,
.testimonials,
.quesigue,
{
  background: url("../img/body.png") repeat;
}
/*----------------------------------------------------*/
/* 4. Header Styles */
/*----------------------------------------------------*/

header { 
  position: relative; 
  z-index:5; 
  height:90px; 
  display:block; 
  background-color: rgb(35,31,32); 
}

header img { display: inline;}

.distribuidor {
  float: left;
  margin: 28px 10px 0;
  width: 80px;
  text-align: center;
  color: white;
  font-weight: 600;
}

.logo { 
  float:left; 
  margin:10px; 
  width:250px; 
  height:28px;  
  display:block;
}
.navi { 
  float:right; 
  width: 550px;
  text-align: center;
}
.navi li { 
  float:left; 
  width:90px; 
  border-top:3px solid rgb(35,31,32); 
} 
.navi li:hover { 
  float:left; 
  width:90px; 
  border-top:3px solid rgb(150,50,141); 
} 
.navi li a { 
  float:left; 
  width:90px; 
  padding:35px 0; 
  color: white; 
  text-align:center;
}
.navi li.highlighted{
  background-color: rgb(150,50,141);
  border-top:3px solid rgb(150,50,141);
}
.navi li.highlighted:hover{
  border-top:3px solid rgb(35,31,32);
}
/*----------------------------------------------------*/
/* 5. Main Section */
/*----------------------------------------------------*/

.main {   
  padding: 0 0 50px; 
  height:510px; 
  z-index:2; 
  box-shadow: 0px 1px 1px rgba(0,0,0,0.1)inset, 
  0px -1px 1px rgba(0,0,0,0.1)inset;
}
.gradient {
  background: url("../assets/img-mainbg.png") 
  no-repeat ; 
  background-size: 100% 100%; 
  height:100%; 
  padding:0 0 50px;
  transition: background 0.5s linear;
}

.main h1 { 
  color: black; 
  text-shadow : 1px 1px 1px rgba(255,255,255,0.8); 
  padding: 20px 0 0;
}
.main h2 { 
  color:#f9f9f9; 
  text-shadow : 1px 1px 1px rgba(0,0,0,0.2); 
  padding:18px 0 0;
}

/* Tabs */

.tab-content{
  width: 600px;
  height: 480px;
  margin: 25px 0 0 0;
  float: left;
  color: white;
}
.tabs-ul{
  display: block;
  width: 100%;
}
.tabs-ul li{
  background-color: rgb(35,31,32);
  display: inline-block;
  width: 150px;
  padding: 10px;
}
.tabs-ul li:focus{
  outline: none;
}
.tabs-ul a{
  color: white;
  font-weight: 600;
}
.tabsDiv{
  width: 530px;
  height: 360px;
  padding: 20px 15px 20px 30px;
  background-color: rgb(150,50,141);
  z-index: 1000 !important;
}
.tabsDiv h2{
  text-align: left;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.tablist{
  width: 45%;
  float: left;
}
#full-list{
  width: 100% !important;
}
.tablist li{
  margin: 14px 0;
  background: url(../assets/icon_check.png) no-repeat left top;
  padding-left: 25px;
}
.tabsDiv img{
  float: left;
  margin-top: 20px;
}

/* tab-ui */
#tabs .ui-tabs-active{
  background-color: rgb(150,50,141);
}

/* Subscriber Form */
.subscriber {  
  margin: 20px 0 0 0; 
  float:right; 
  display:block;
  width:350px; 
}
.subscriber-wrap {
  border-radius:3px; 
  background-color: rgb(112,171,227);  
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8c000000', endColorstr='#4c000000'); 
   /* IE */ 
  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 3px rgba(0, 0, 0, 0.4); 
  padding: 6px; 
  margin: 5px 3px;
  width: 94%;
  position: relative;
}
.subscriber h3 { 
  color:#fff; 
  text-shadow : 1px 1px 1px rgba(0,0,0,0.3); 
  font-size:1.12em; 
  margin:0 0 5px; 
  text-align:center; 
}
.subscriber #llamasincosto{
  background: url(../assets/icon_call.png) no-repeat 12px 3px;
  padding: 5px;
  padding-left: 35px;
}
.subscriber iframe{
  margin: -20px -5px -37px -5px;
  width: 100%;
  height: 220px;
}
.subscriber p { 
  text-align:center; 
  color:#fff; 
  text-shadow : 1px 1px 1px rgba(0,0,0,0.3); 
  font-size:14px; 
  opacity:0.85;  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
}
/* Subscriber Form Inputs */
.subscriber input { 
  padding:0 45px; 
  color:#fff; 
  border-radius:20px; 
  height:35px;  
  width:60%; 
  margin:4px 0 0 20px;  
}
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;
}
.checkboxcontainer{
  width: 223px;
  position: absolute;
  bottom: 15px;
  /*text-align: left;*/
  font-size: 11px;
  color: black;
  cursor: default;
}
input[type="checkbox"]{
  width: 11px;
  height: 12px;
  vertical-align: baseline;
  cursor: default;
  margin-left: 0;
  margin-right: 2px;
}
.checkboxcontainer a{
  text-decoration: underline;
  font-weight: 700;
  color: rgb(35,31,32); ;
}
.checkboxcontainer a:hover{
  color: rgb(35,31,32); 
}
label.aviso{
  height: 2em;
  cursor: default;
}
/* Subscriber Submit Button */ 
input.button-newsletter  {  
  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); 
  width:70px;
  height: 25px;
  padding:0 0 0 0; 
  color:#47494a;
  margin: 10px 0 15px 248px;
  font-size: 13px;
}
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: 10px;
  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;
}
.title {
  background: url(../img/title.png) repeat-x scroll 0 20px;
  height: 24px;
  width: 100%;
}
.title h3 {
  margin: 0 auto;
  padding: 10px 0;
  display: block;
  height: 26px;
  text-align: center;
  width: 350px;
  border-radius: 20px;
  background: none repeat scroll 0 0 rgb(149,193,2);
  font-weight: 700;
  font-size: 22px;
  color: white;
  text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.2);
  box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.8);
}

.icon {  width:72px; margin:0 auto;  }
.featu { margin:65px 0 0; }

.featu:hover {
  /*cursor: pointer;*/
}
.featu  h6 {
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  color: rgb(112,171,227);
}
.featu  p {
  margin: 20px 20px 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 #dadcdd; color:#6a7479; font-size:12px; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); }
*/

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

.features {
  height: 440px;
  padding: 30px 0;
  background-color: rgb(35,31,32);
  display: block;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
  clear: both;
  text-align: center;
}
.feature1 {
  width: 90%;
  margin: 15px auto;
}
.feature1 h3 {
  font-size: 22px;
  font-weight: 600;
  color: white;
  margin: 8px 0 0;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}
.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;
}
.features iframe{
  width: 615px;
  height: 360px;
  margin: 15px auto;
}
/*.feature2 {
  float: right;
}
*/

/*----------------------------------------------------*/
/* Whats Next */
/*----------------------------------------------------*/
.quesigue {
  padding: 55px 0 80px;
  /*background-color: rgb(112,171,227);*/
}
.pasos{
  width: 100%;
  margin: 80px auto;
}
.paso{
  width: 13%;
  float: left;
  text-align: center;
  height: 150px;
  cursor: default;
}
.paso h6{
  font-size: 18px;
  font-weight: 600;
}
p.minor{
  color: #666;
  font-size: 10px;
  text-align: center;
}
.nextarrow{
  width: 3.75%;
  height: 50px;
  background: url(../assets/icon_arrow.png) no-repeat center center;
  margin: 20px;
  margin-top: 40px;
  float: left;
}

/*----------------------------------------------------*/
/* 8.  FAQ */
/*----------------------------------------------------*/
.faq {
  padding: 55px 0 40px;
  background-color: rgb(112,171,227);
}
.faq .title{
  margin-bottom: 30px;
}
.question {
  background-color: rgb(35,31,32);
  width: 150px;
  height: 150px;
  border-radius: 80px;
  margin: 0 auto;
}
.quest{
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  font-weight: 400;
  color: white;
  margin: 20px 7px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.faq-div {
  background: url(../img/testimonials/divider.png) center no-repeat;
  margin: 20px auto;
  width: 80%;
  height: 10px;
  display: block;
}
.answer{
  margin: 20px 30px 0;
  line-height: 24px;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  color: white;
}
.faq-quote {
  background: url(../img/title2.png) repeat-x scroll 0 15px;
  margin: 30px auto;
  height: 24px;
  width: 80%;
}
.faq-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 rgb(35,31,32);
  color: #6a7479;
  font-size: 18px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}

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

.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;
  height: 120px;
}
.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.  Solicitud */
/*----------------------------------------------------*/
.solicitud{
  padding: 50px 0 50px 0;
  background-color: rgb(35,31,32);
}
.solicitud-inner{
  margin: 50px auto 0 auto;
  padding: 0 30px;
  color: white;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.solicitud-instrucciones{
  width: 40%;
  height: 100%;
  float: left;
  background-color: rgb(112,171,227);
  border-radius: 30px;
  padding: 20px;
}
.solicitud-instrucciones h3{
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 20px 0;
  text-align: center;
}
.solicitud-instrucciones ol{
  list-style: decimal;
  margin-left: 35px;
  margin-top: 8px;
}
.solicitud-instrucciones li{
  line-height: 1.2em;
}
.solicitud-form{
  width: 55%;
  float: left;
  position: relative;
}
.solicitud-form input, .solicitud-form label, #fecha-nacimiento{
  display: inline-block;
}
.solicitud-form input:focus{
  color: rgb(35,31,32) !important;
  box-shadow:  0 0 3px 3px rgb(112, 171, 127);
}
.solicitud-form label{
  width: 30%;
  text-align: right;
}
.solicitud-form input, #fecha-nacimiento{
  margin-left: 10px;
  width: 60%;
}
#fecha-nacimiento input{
  width: 1.7em;
  margin-left: 0px;
}
#fecha-nacimiento input#ano{
  width: 2.5em;
}
.solicitud-form input[type="submit"]{
  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); 
  width:80px;
  height: 25px;
  padding:0;
  border-radius: 20px;
  color:#47494a;
  font-size: 13px;
  position: absolute;
  right: 22px;
}
.solicitud-form input[type="submit"]: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);
}
/*----------------------------------------------------*/
/* 11.  Action */
/*----------------------------------------------------*/

.action {
  height: 70px;
  padding: 35px 0 50px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;
  background-size: 100% 100%;
  color: white;
  background-color: rgb(150,50,141);
  text-align: center;
}
.actionWrapper{
  /*width: auto;
  margin: 0 auto;*/
}
.action img{
  height: 100px;
  margin: 0 35px;
  /*vertical-align: top;*/
}
.actionContainer {
  display: inline-block;
  vertical-align: top;
}
.action h3, .action h4{
  text-align: center;
}
.action h3{
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}
.action h4{
  font-size: 24px;
  margin-top: 10px;
  line-height: 30px;
}
/*
.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);
}
.action h3 span {
  font-weight: 600;
}
.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;
}*/

/*----------------------------------------------------*/
/* 12.  Footer */
/*----------------------------------------------------*/

footer {
  background: rgb(35,31,32);
  position: relative;
  z-index: 5;
  height: 76px;
  display: block;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2);
}
footer a{
  color: rgb(71,73,74);
}
.copy {
  width: 400px;
  float: left;
  margin: 34px 0 0;
  font-size: 18px;
  color: rgb(71,73,74);
  text-transform: uppercase;
}
.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:DXImageTransform.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;}

@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;}
.right img { float:none; } 
.left img { float:none;   } 
.about h3 { font-size:22px;  clear:both;}
.about h6 { font-size:16px!important; clear:both; } 
.about p { font-size:14px;  }

 }

@media(min-width: 480px) and (max-width: 767px) {
.wrapper { width:480px; margin:0 auto; } 
.main h1 {  font-size:22px;}
.main h2 {  font-size:14px;}
.gradient { background:none; }
.main { height:860px; }
.video { width:480px; }
.video iframe {   width:100%; height:320px; }
.subscriber {   width:480px;  } 
.subscriber input { width:79%; }
 input.button-newsletter { width:125px;}
.feature1 {width:90%; margin:0 auto; float:none;}
.feature2 {display:none;}
.screenshots { width:100%; margin:0 auto; }
.gallery  { height:1310px; min-height:100px; }
.gallery li { margin:20px 0 0;  height:300px; }
.gallery li img { width:90%; margin:0px 0 0 6%;  }
.quote img { display:none; }
.action { height:80px; padding: 20px 0 10px; }
.action h3 { font-size:15px; background:none; padding:26px 0 0 0px; }
.slides {   width:480px; height:325px;  padding:0 0 20px; }
.slides_container {  width:480px;  height:325px;   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: 480px !important;}
.fb_iframe_widget span {width: 480px !important;}

.right img { float:none!important; width:406px!important; margin:0 auto!important; display:block; } 
.left img { float:none!important; width:406px!important; margin:0 auto!important;  display:block; } 
.about h3 { font-size:22px;  clear:both!important; text-align:center!important;}
.about h6 { font-size:16px!important; clear:both!important; text-align:center!important; } 
.about p { font-size:14px; text-align:center!important;  }
.about { padding:0 0 10px!important; }
 }

 @media(max-width:480px) { 
 .wrapper { width:300px; margin:0 auto; }
.navi { float:right; width:120px;  }
.navi li { float:left; width:40px; border-top:3px solid #fff; font-size:12px;}
.navi li a { float:left; width:40px; padding:28px 0; color:#868889; text-align:center;}
.navi li:hover { float:left; width:40px; border-top:3px solid #eaeaea; } 
.main h1 {  font-size:22px; line-height:35px;}
.main h2 {  font-size:12px;}
.gradient { background:none; }
.main { height:860px; }
.video { width:300px; }
.video iframe { width:100%; height:220px; }
.subscriber { width:300px; } 
.subscriber p { font-size:13px; }
.slides {  width:300px; height:250px;     }
.slides_container {  width:300px;  height:220px;   z-index:3; padding:0 0 20px;}
.main { height:800px; }
.feature2 { display:none; }
.features h3 { font-size:20px; }
.features h6 { font-size:14px; text-align:center; }
.feature1 li { font-size:12px; line-height:16px; }
.gallery  { height:900px; min-height:100px; }
.gallery li { margin:20px 0 0;  height:200px; }
.gallery li img { width:90%; margin:0px 0 0 6%; }
.quote img { display:none; }
.action { height:80px; padding: 20px 0 10px; }
.action h3 { display:none; }
.action-button { float:none; margin:15px auto; }
.copy { float:none; margin:0px auto; width:300px; text-align:center; padding:20px 0; }
.social { float:none; margin:0 auto;  width:150px; padding:0 0 5px; }
.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: 300px !important;}
.fb_iframe_widget span {width: 300px !important;}
footer { height:105px; }
.right img { float:none!important; width:406px!important; margin:0 auto!important; display:block; } 
.left img { float:none!important; width:406px!important; margin:0 auto!important;  display:block; } 
.about h3 { font-size:18px!important;  clear:both!important; text-align:center!important;}
.about h6 { font-size:14px!important; clear:both!important; text-align:center!important; } 
.about p { font-size:14px; text-align:center!important;  }
.about { padding:0 0 10px!important; }
 }