body{ background: #fff; font-family: Helvetica,Arial,sans-serif; font-size: 14px; color: #838383; }
.container{ width: 940px; margin: 0 auto; }
h1, h2, h3, h4, nav a, .button, .name, .head, .title{ font-family: 'Play',Helvetica,Arial,sans-serif; }
h2, nav a{ text-transform: uppercase; }
h2, h4, .name{ color: #1f517c; }
h2{ font-size: 20px; font-weight: bold; background: url("img/bullet.jpg") no-repeat; padding-left: 25px }
h4{ font-size: 12px; }
section h2, section h3{ margin: 15px 0; }
h4{ background: #a8ddf2; padding: 10px; margin-bottom: 20px; }
nav a{ color: #e7ebec; font-size: 17px; }
nav a:hover, nav li.selected a{ color: #4cafc9; }
.branding .logo, .branding .social, .social li, #controls, #controls li, .column, .footerInfo div, .contactInfo li{ display: inline-block; }
.social a, #controls a{ font-size: 0; }
.column{ width: 306px; margin-right: 3px; vertical-align: top; zoom: 1; *display: inline; }
p{ margin-bottom: 10px; }
p strong{ color: #14709d; }
.button{ background: #4cafc9; color: #fff; text-align: center; border: none; }

/*Header*/
header{ margin-top: 20px; }
.branding{ position: relative; width: 100%; }
.social{ position: absolute; right: 0; top: 50px; }
.social li{ margin: 0 5px; vertical-align: middle; }
.social a{ width: 24px; height: 24px; background: url("img/social-sprites.png") no-repeat; }
.social a.facebook{ background-position: 0 0; }
.social a:hover.facebook{ background-position: 0 -24px; }
.social a.twitter{ background-position: -24px 0; }
.social a:hover.twitter{ background-position: -24px -24px; }
.social a.maps{ background-position: -48px 0; }
.social a:hover.maps{ background-position: -48px -24px; }
.social a.touch{ background-position: -72px 0; }
.social a:hover.touch{ background-position: -72px -24px; }
nav{ background: url("img/menu.jpg") no-repeat; }
nav li{ display: inline-block; border-right: 1px solid #fff; }
nav a{ padding: 24px 0; text-align: center; width: 187px; }

/*Content*/
.main section{ margin: 20px 0; }
.separator{ padding: 20px 0; background: #f7f7f7; }
.separator.big{height: 705px; }
.slides{ height: 400px !important; }
.slider{ overflow: hidden; }
#controls{ margin: 10px 20px 20px 0; position: relative; float: right; }
#controls:before, #controls:after, #before, #after{ position: absolute; content: ""; width: 0; height: 0; cursor: pointer; }
#controls:before, #before{ border-top: 9px solid transparent; border-right: 18px solid #194876; border-bottom: 9px solid transparent; left: -18px; top: 0; }
#controls:after, #after{ border-top: 9px solid transparent; border-left: 18px solid #194876; border-bottom: 9px solid transparent; right: -18px; top: 0; }
#controls li{ margin: 0 5px;  }
#controls a{ width: 11px; height: 11px; background: #4cafc9; vertical-align: middle; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; }
#controls li.current a, #controls a:hover, #controls a:focus{ width: 18px; height: 18px; background: #14709d; }
.name{ font-size: 17px; text-transform: uppercase; margin-top: 10px; }
.service .button{ padding: 10px 30px; margin-top: 20px; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
.service .button:hover{ background: #2b91ac; }
.aboutUs img{ margin: 0 20px; display: inline-block; }
.aboutUs .company{ display: inline-block; width: 630px; vertical-align: top; }
.head{ text-align: center; text-transform: uppercase; color: #14709d; }
.product img{ margin-bottom: 10px; }
.product p, .product ul{ width: 290px; }
.product ul{ margin: 0 0 10px 10px; }
.product li{ list-style: circle outside; }
.brands{ margin-top: 20px; }
.brands p{ text-align: center; }
.projects{ position: relative; }
.description{ margin-top: 20px; position: relative; }
.description p{ display: inline-block; width: 600px; float: left; }
.description a{ position: absolute; top: -30px; right: 0; }
#after, #before{ top: 650px; }
#after{ right: 0; }
#before{ left: 900px; }
.title{ font-size: 17px; color: #1f517c; }
.grid{ overflow: hidden; margin-top: 20px;  }
.gallery{ float: left; }
.sliderGrid{ position: relative; width: 1880px; }
.thumbs{ float: left; width: 940px; }
.thumbs li{ float: left; margin: 0 2px; }
.thumbs li a{ opacity: 0.5; opacity: 50%; cursor: pointer; }
.thumbs li.selected a, .thumbs li a:hover{ opacity: 1; opacity: 100%; }
.contacto ul{ margin-bottom: 20px; }
.contacto li{ vertical-align: text-top; display: inline-block; margin: 0 40px; }
.contacto li i{ background: url("img/social-sprites.png") no-repeat; width: 24px; height: 24px; display: inline-block; }
.contacto li.facebook i{ background-position: 0 -24px; }
.contacto li.twitter i{ background-position: -24px -24px; }
.contacto li.maps i{ background-position: -48px -24px; }
.contacto li.touch i{ background-position: -72px -24px; }
.span6{ width: 450px; float: left; }
.field{ margin: 10px; }
.field input, .field textarea{ border: 1px solid #1f517c; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px 5px; width: 100%; color: #838383; }
.field textarea{ resize: none; }
.field input.error, .field textarea.error{ border-color: #f00; }
#contacto .button{ padding: 10px 20px; }
#contacto span.error{ display: none !important; }

/*Footer*/
footer{ background: #1f517c; color: #fff; padding: 20px 0; }
footer p small{ font-size: 10px; }
footer p a{ color: #fff; }
footer p a:hover{ text-decoration: underline; }
.footerInfo div{ vertical-align: top; margin-right: 20px; }
.contactInfo{ width: 320px; }
.contactInfo li{ background: url("img/info-sprites.png") no-repeat; padding-left: 30px; margin: 10px 0; height: 23px; }
.contactInfo .addr{ background-position: 0 0; }
.contactInfo .tel{ background-position: 0 -23px; }
.contactInfo .contact{ background-position: 0 -46px; }