/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*  LAYOUT  */

body { font-family: 'Lato', sans-serif !important; font-style: normal;  font-weight: 400;}

h1 { font-size: 47px; text-align: center;}
section:not(#main) h1, footer h1{ padding:40px 0px;}
h2 { font-size: 25px;}
h3 { font-size: 20px; color: #00a65a; font-weight: 400 }

.wrapper { width:1080px; margin: 0 auto;}
header { height:100px; position: fixed; background-color: white; width: 100%; border-bottom: 1px solid #e7e7e7; }
#logo { width:240px; height:35px; background: url("../img/logo.png") no-repeat; background-size: 100%; margin-top: 32px; display: inline-block;}
#logo:hover { cursor: pointer; }

nav { float:right; }

nav li {  display: inline-block; border-bottom: 5px solid white; line-height: 94px; padding: 0px 15px; font-size: 18px;}
nav li:hover {cursor: pointer; border-bottom: 5px solid #00a65a;}

section#main{
  background: url("../img/sliderbg.jpg") no-repeat; width:100%; height: 600px; background-position: 50% 100px;
  color:#21563E; text-align: center;
}
section#main .wrapper{ top: 50%;  position: relative;}
section#main h1 { font-size: 60px; }
section#main h2 { font-size: 38px; }


section.sections { background-color: #EDFFF7 }
.green-section{background: #00a65a; color: #fff;}
section#us,section#services,section#desarrollo, section#services-pre, section#services-post { font-size: 27px; text-align: center; font-weight: 300; line-height: 34px; padding-bottom: 35px;}
section#services-pre, section#services-post {padding-bottom: 35px; font-size: 24px;}
section#services-pre img, section#services-post img {display:block; margin: 30px auto;}

section#services,section#desarrollo { padding: 30px 0px; }
section#services .services,section#desarrollo .services { padding: 40px 0px; }
section#services .services h3,section#desarrollo .service h3 {font-size: 28px; margin-bottom: 25px;}
section#services .fact-img,section#desarrollo .fact-img, section#services .fact-desc,section#desarrollo .fact-desc { display: inline-block;     vertical-align: middle; }
section#services .fact-desc,section#desarrollo .fact-desc { width:40%; padding: 0px 30px; font-size: 18px}
section#services .fact-img,section#desarrollo .fact-img { border: 1px solid #ccc; padding: 25px;}

section#services-post { font-size: 35px; padding-top: 60px; }

#workslide { color:white; background-color: #00a65a; text-align: center; }
#workslide .work { display: inline-block; height:300px; font-size: 35px; text-align: center; font-weight: 300; width:33.2%; min-width: 300px;}
#workslide .work:nth-child(n+2) {border-left: 1px solid #00b591;}
#workslide .work:hover { background-color: #027c44; }
#workslide .work .work_img { width:230px; height:130px; margin: 48px auto 38px; }
#dev_img { background: url("../img/dev.png") no-repeat; }
#des_img { background: url("../img/des.png") no-repeat; }
#con_img { background: url("../img/cons.png") no-repeat; }

#productslide{color:white; background-color: #ccc; text-align: center; }
#productslide .product { border-left: 1px solid #c7c6c5; display: inline-block; height:232px; font-size: 14px; text-align: center; width:24.9%; min-width: 300px;}
#productslide .product:nth-child(4n+1), #productslide .product:first-child {border-left: none;}
#productslide .product:nth-child(n+4) { margin-top: -2px; }
#productslide .product {border-bottom: 1px solid #c7c6c5;}
#productslide .product .product_img { width:300px; height:232px;}
#buscaloaqui { background: url("../img/products/buscaloaqui.png") no-repeat; }
#berrelleza { background: url("../img/products/berrelleza.png") no-repeat; }
#iduma { background: url("../img/products/iduma.png") no-repeat; }
#lacanchitateam { background: url("../img/products/lacanchita.png") no-repeat; }
#luzmusical {background: url("../img/products/luzmusical.png") no-repeat; }
#maestros {background: url("../img/products/maestros.png") no-repeat; }
#organizaloya { background: url("../img/products/organizaloya.png") no-repeat; }
#reportes { background: url("../img/products/reportes.png") no-repeat; }
#seguros { background: url("../img/products/seguros.png") no-repeat; }
#spmmex { background: url("../img/products/spm.png") no-repeat; }
#dapiC { background: url("../img/products/dapi.png") no-repeat; }
#fiman { background: url("../img/products/fiman.png") no-repeat; }
#camiseta { background: url("../img/products/camiseta.png") no-repeat; }
#gv { background: url("../img/products/gv.png") no-repeat; }


#clientslide { color:white; background-color: #dfdfde; text-align: center; }
#clientslide .client { border-left: 1px solid #c7c6c5; display: inline-block; height:162px; font-size: 14px; text-align: center; width:24.9%; min-width: 300px;}
#clientslide .client:nth-child(4n+1), #clientslide .client:first-child {border-left: none;}
#clientslide .client:nth-child(n+4) { margin-top: -2px; }
#clientslide .client {border-bottom: 1px solid #c7c6c5;}
#clientslide .client:hover { background-color: #F3F2F2; }
#clientslide .client .client_img { width:180px; height:106px; margin: 28px auto; }
#clientslide .client:hover .client_img { background-position: 0px -106px;  }
#spm { background: url("../img/c/spm.png") no-repeat; }
#meducar { background: url("../img/c/meducar.png") no-repeat; }
#lacanchita { background: url("../img/c/lacanchita.png") no-repeat; }
#smile { background: url("../img/c/smile.png") no-repeat; }
#dapi { background: url("../img/c/dapi.png") no-repeat; }
#fimanc { background: url("../img/c/fiman.png") no-repeat; }

footer { padding-bottom: 60px;}
footer .form {font-size: 24px;color: white; font-weight: 300; margin-right: 30px;}
footer .form h3 {font-size: 30px; margin-top: 30px; color: white; margin-bottom: 10px;}

footer a img {margin-right: 15px;}
footer#contact { background-color: #00a65a; color: white;}
footer#contact .half { width:48%; display: inline-block; vertical-align: top;}
footer input, footer textarea {border:0px;  width:60%; display: block; margin-bottom: 10px; font-size: 14px; padding: 10px; font-weight: 400; font-family: 'Lato', sans-serif;}
footer textarea { max-width: 60%; max-height: 136px;}
footer button { width:64%; border:0px; background-color:#003b2f; color: white; padding: 10px; font-size: 18px; font-family: 'Lato', sans-serif; letter-spacing: 1px}
footer button:hover {cursor: pointer; color: #003b2f; background-color: #b9ead7;}
footer a{ display: block; color:white; text-decoration: none; font-size: 24px; font-weight: 300; margin-bottom: 20px; }
footer a:hover { color: #4FC5AD; }
footer #social a{ display: inline-block; }
footer #social a:hover {opacity: .6;}
footer #social h3 { color:white; margin-top: 40px; margin-bottom: 20px; font-weight: 300; font-size: 25px;  }
footer #social {padding-left: 46px;}

footer input, footer textarea, footer button {float: right;}

#pre-arrow:hover, #post-arrow:hover { margin: 25px auto 35px;   cursor: pointer; }

nav li, .work, #post-arrow, #pre-arrow {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.bg-blue{ background: #00A1FF; color: #fff;}
.bg-orange{ background: #F90; color: #fff;}