* { margin: 0;  }
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */}
img {
max-width: 100%;
height: auto;}
body {
color: #666;
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
text-align: center;
background-image:url(images/gray_jean.png);
background-attachment: fixed;}
.content {	
max-width: 960px;
margin:0 auto;	
padding: 10px;
height: auto !important;}
.wrapper {
max-width: 960px;
margin:0 auto;	
padding: 5px;}
.link{
color:#7b899b;
font-weight: bolder;
}
header{
width: 100%;
height: 120px;
min-height:120px;
height: auto !important;
}
header h1{
font-size:30px;
text-align:center;
color: #808284;
font-family: 'Lobster', cursive;
padding-top:5px;}
#main{
background: #fefefe;
float: left;	
width: 73%;
height: 700px;
min-height:700px;
height: auto !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 20px 10px 20px 0;
border: 1px solid #ddd;}
#main h2{
font-size:1em;
text-align:center;
color: #808284;
font-family: 'Questrial', sans-serif;	}
aside{
background: #fff;
width: 24%;
float: right;
margin-left: 73%;
height: 700px;
min-height:700px;
height: auto !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 20px 0 10px 0;
border: 1px solid #ddd;}
footer{
width: 100%;
position:relative; bottom:0;
background: #7b899b;
color: #fff;
height: 70px;
min-height:70px;
height: auto !important;
clear: both;
overflow: hidden;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 20px 20px 20px 0;
padding:5px;
border: 1px solid #ddd;
padding-top: 5px;
-webkit-box-shadow: 2px 2px 2px 0 #666;
-moz-box-shadow: 2px 2px 2px 0 #666;
box-shadow: 2px 2px 2px 0 #666;}
footer p{
text-align: center;
}
.left{
display: inline-block;
float: left;
width: 30% !important;
max-width: 30% !important;
height: 30px;
min-height:30px;
height: auto !important;
}
footer b{
float: left;
padding-left: 10px;}
.center{
display: inline-block;
width: 33% !important;
max-width: 33% !important;
height: 30px;
min-height:30px;
height: auto !important;
}
.right{
display: inline-block;
float: right;
width: 33% !important;
max-width: 33% !important;

height: 30px;
min-height:30px;
height: auto !important;}
img{
max-width: 100%;
height: auto;
vertical-align: middle;}
.logo{
display: inline-block;
float: left;
width: 30%;}
.logo img{
	padding-top: 5px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;}
.logo img:hover{
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);}
.contacto{
display: inline-block;
float: right;
vertical-align: top;
width: 70%;}
.contacto p {
color: #7b899b;
font-size: 18px;
font-family: 'Questrial', sans-serif;
font-weight: bolder;
text-align: left;}
.contacto img {
vertical-align: middle;	}
.contacto a:hover{
color: #BFDC7A;}
h1{
font-size: 14px;}
h2{
font-size: 13px;}
p{
text-align: justify;
padding: 5px;}
a{
text-decoration: none;
color: #fff;}
.boton{
color: #fff;
background: #7b899b;
border: 1px solid #ddd;
padding: 7px;}
.boton:hover{
color: #7b899b;
background: #aad400;}
.redes{
margin: 0 auto; 
display: block;}
.referidos{
text-align: justify;
padding: 20px;}
.pricingtable-wrapper{
text-align:center; 
line-height:normal; 
border:1px solid #ddd; 
width: 200px; 
margin: 7px; 
display: inline-block;}
.pricingtable-wrapper:hover{
opacity: .8; 
-moz-opacity:0.8;
-khtml-opacity: 0.8;
border:1px solid #7b899b;}
.pricingtable-wrapper .pricingtable{
display:block;}
.pricingtable-title h2 {
margin:0 0 5px;
padding:7px;
text-transform:capitalize;
color:#666;
font-size:1em;}
.pricingtable-wrapper .pricingtable .pricingtable-list ul{
margin:0;
padding:0 7px;
list-style:none;
text-align: right;}
.pricingtable-wrapper .pricingtable .pricingtable-list ul li{
padding:4px;}
.pricingtable-wrapper .pricingtable .pricingtable-list ul li:first-child{
border:none;}
.pricingtable-wrapper .pricingtable .pricingtable-priceold{
text-decoration: line-through;
background-color: #E5E4E3;}
.pricingtable-wrapper .pricingtable .pricingtable-price{
font-size:1.5em;}
.pricingtable-wrapper .pricingtable .pricingtable-price span{
display:inline-block;
font-size:.6em;}
.pricingtable-wrapper .pricingtable .pricingtable-signup{
color:#fff;
background-color:#7b899b;
padding: 5px;}
.pricingtable-wrapper .pricingtable .pricingtable-signup a{ 
color:#fff;
text-decoration: none;
font-weight: bolder;}
.pricingtable-wrapper .pricingtable .pricingtable-titled{
background: #fff;}
.pricingtable-wrapper .pricingtable .pricingtable-title, 
.pricingtable-wrapper .pricingtable .pricingtable-price{
color:#666;
background-color:#aad400;
border:1px solid #E5E4E3;
font-size:1.2em;
font-weight: bolder;}	
.clearfix:before,
.clearfix:after {
content: " ";
display: table;}
.clearfix:after {
clear: both;}
nav {
height: 40px;
width: 100%;
background: #7b899b;
font-family: 'Questrial', sans-serif;
font-weight: bold;
position: relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ddd;
-webkit-box-shadow: 2px 2px 2px 0 #666;
-moz-box-shadow: 2px 2px 2px 0 #666;
box-shadow: 2px 2px 2px 0 #666;}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;}
nav li {
display: inline;
float: left;}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0 #576979;}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
nav li:last-child a {
border-right: 0;}
nav a:hover, nav a:active {
background-color: #8c99a4;}
nav a.current{
background-color: #8c99a4;}
nav li a.current {
background-color: #8c99a4}
nav a#pull {
display: none;}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form button[type="submit"] {
font-size: .90em;}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
margin: 0 auto; 
width: 85%;
font-size: .95em;
color: #808285;
padding-right: 15px;
padding-left: 0;}
#contact-form label span {
display:block;
margin:2px;
text-align: left;
color: #7b899b;
font-weight: bolder;}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
width:100%;
box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
border:1px inset #E0E0E0;
background:#FFF;
margin:0 0 3px;
padding:9px;}
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
background: #D5FE96;}
#contact-form textarea {
height:100px;
max-width:100%;}
#contact-form button[type="submit"] {
cursor:pointer;
float: left;
width:75%;
border:none;
background:#7b899b;
color:#fff;
font-weight: bolder;
margin:0 0 5px;
padding:10px;
border-radius:5px;
border:3px solid #ccc;}
#contact-form button[type="submit"]:hover {
background:#aad400;
border:3px solid #ccc;
color: #808285;}
#contact-form button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
#contact-form input:focus,
#contact-form textarea:focus {
outline:0;
border:1px solid #999;}
::-webkit-input-placeholder {
color:#888;}
:-moz-placeholder {
color:#888;}
::-moz-placeholder {
color:#888;}
:-ms-input-placeholder {
color:#888;}
.ribbon-wrapper {
width: 85px;
height: 88px;
overflow: hidden;
position: fixed;
top: -3px;
right: -3px;
z-index: 9999;}
.ribbon {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,.5) 0 1px 0;
-webkit-transform: rotate(45deg);
-moz-transform:    rotate(45deg);
-ms-transform:     rotate(45deg);
-o-transform:      rotate(45deg);
-sand-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
color: #6a6340;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
-moz-box-shadow:    0 0 3px rgba(0,0,0,.3);
box-shadow:         0 0 3px rgba(0,0,0,.3);}
.ribbon:before, .ribbon:after {
content: "";
border-top:   3px solid #6e8900;
border-left:  3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;}
.ribbon:before {
left: 0;}
.ribbon:after {
right: 0;}
.ca-menu{
padding:0;
margin:0 auto;
text-align:center;
display: inline-table;}
.ca-menu li{
width: 157px;
height: 315px;
overflow: hidden;
display:inline-block;
background: #f5f5f5;
margin: 5px; }
.ca-menu li:last-child{
margin-right: 5px;}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
color: #c5e4f4;
font-size: 80px;
text-shadow: 1px 0 1px rgba(255,255,255,.7);
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0;
top: 0;
text-align: center;}
.ca-content{
position: absolute;
left: 0;
width: 100%;
height: 50%;
top: 27%;}
.ca-main{
font-size: 30px;
text-align: center;}
.ca-sub{
text-align:center;
font-size: 14px;
text-align: center;
padding: 10px; color:#7b899b;}
.ca-menu li:hover{
background-color: #fff;}
#search-box {
position: relative;
width: 90%;
margin: 0 auto; 
-webkit-box-shadow: 2px 2px 2px 0 #666;
-moz-box-shadow: 2px 2px 2px 0 #666;
box-shadow: 2px 2px 2px 0 #666;}
#search-form {
height: 42px;
background-color: #fff;
-webkit-box-shadow: inset 0 0 0 1px #ccc;
-moz-box-shadow: inset 0 0 0 1px #ccc;
box-shadow: inset 0 0 0 1px #ccc;
border: 1px solid #ddd;
overflow: hidden;}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;}
#search-box input[type="text"] {
width: 95%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
text-shadow: 1px 1px 0 #888;
border-width: 0;
background: #7b899b;
cursor: pointer;}
#resultado{
text-align: left;
padding-left: 40px;
color: #7b899b;
font-weight: bolder;}
.me{
margin: 0 auto; }
.me a{
color: #fff;
line-height: 20px;}
.me li{
padding: 0 5px 5px 10px;
text-align: left;
list-style: none;}
.me ul{
width: 95%;
margin: 0;
padding: 0;}
.me a:hover{
background-color: #8c99a4;}
.promo{
float: left; 
left: 0;}
.sprite-val { 
background: url('images/validator.png') no-repeat top center; 
width: 88px; 
height: 31px;
line-height: 31px;
margin: 0 auto;  } 
.sprite-val.valid-css { 
background-position: 0 0;  } 
.sprite-val.valid-html5 { 
background-position: 0 -41px;  } 
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	header h1{
font-size:20px;}
nav { 
height: auto;}
nav ul {
width: 100%;
display: block;
height: auto;}
nav li {
width: 50%;
float: left;
position: relative;}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;}
aside {
display: none;}
#main{
width: 100% !important;
max-width: 100% !important;}
.right{	
display: block !important;
width: 90% !important;
max-width: 90% !important;}
.left{	
display: block !important;
width: 50% !important;
max-width: 50% !important;}
.ca-menu li{
width: 180px; 
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
.wrapper{
margin-top: 35px;}

.logo{
width: 100% !important;
max-width: 100% !important;
}
.contacto{
width: 100% !important;
max-width: 100% !important;
}
nav {
border-bottom: 0;
position: fixed;
z-index: 2000 ;
top: 0;
left: 0;}
nav ul {
display: none;
height: auto;}
nav a#pull {
display: block;
background-color: #576979;
width: 100%;
position: relative;}
nav a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 36px;
height: 36px;
display: inline-block;
position: absolute;
right: 15px;
top: 5px;}
aside {
display: none;}
#main{
width: 100% !important;
max-width: 100% !important;}
.left{
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 40px;
}
.right{
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.center{
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 40px;
}
.ca-menu li{
width: 180px; 
}
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
nav{
position: fixed;
z-index: 2000 ;
top: 0;
left: 0;}
nav li {
display: block;
float: none;
width: 100%;}
nav li a {
border-bottom: 1px solid #576979;}
.ca-menu li{
width: 180px; 
}
}