/*RESET*/
@charset "utf-8";a{text-decoration:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif}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:after,blockquote:before,q:after,q:before{content:'';content:none}




/*GENERALES*/
body { margin:0px; background-color:#FFF; overflow-x: hidden}
p, b, a, i, u, h1, h2, h3, h4, h5, h6, ul ,li, input, textarea, select, span { font-family: 'Lato', sans-serif; font-family: 'Muli', sans-serif;}
b { font-weight:700}
.clear0 { clear:both; height:0px}
.clear10 { clear:both; height:10px}
.clear20 { clear:both; height:18px}
.clear30 { clear:both; height:30px}
.clear40 { clear:both; height:40px}
.clear50 { clear:both; height:50px}
::selection {color:#CCC;background:#444;}
::-moz-selection {color:#EEE;background:#444;}
*:focus { outline:none}


.opTodo { display: none}


header { width: 100%; position: fixed; height: 80px; background-color: #FFF; top: 0px; left: 0px; z-index: 999;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
header .logo { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); height: 55px; cursor: pointer;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;
}
header .menu { width: auto; position: absolute; height: auto; top: 50%; transform: translateY(-50%); right: 40px;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
header .menu .item { display: inline-block; margin-left: 0px; position: relative; cursor: pointer}
header .menu .item p {  padding: 0px 5px; font-size: 17px; font-weight: 300; line-height: 25px;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
header .menu .item .raya { width: 0%; height: 3px; background-color: #6ac335; position: absolute; bottom: -5px; left: 0%;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
header .menu .item:hover .raya { width: 100%;
-moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}

header .menu .linea { display: inline-block; text-align: center; width: 60px;}



.icMenu { width: 40px; height: 40px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-image: url(../img/menu.png); cursor: pointer; display: none}


.show-menu { height: 50px;}
.show-menu .logo { height: 35px;}
.show-menu .menu .item p { font-size: 14px; line-height: 18px;}


.lighMenu { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); z-index: 99999; display: none}
.lighMenu .izq { position: absolute; top: 0; bottom: 0; left: 0; right: 350px}
.lighMenu .der { width: 350px; height: 100%; position: absolute; right: -350px; top: 0; background-color: #FFF}
.lighMenu .der .cerrar { width: 40px; position: absolute; top: 20px; right: 20px; opacity: 1; cursor: pointer;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.lighMenu .der .listaMenu { top: 100px; width: 80%; left: 10%; position: absolute }
.lighMenu .der .listaMenu li { width: 100%; border-bottom: 1px solid #CCC; cursor: pointer}
.lighMenu .der .listaMenu li p { color: #333; font-size: 18px; padding: 13px 0px; font-weight: 300;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.lighMenu .der .listaMenu li:hover p { padding-left: 6px}





.slider1 { margin-top: 80px; position: relative; background-color: #EEE; width: 100%; height: 570px;}
.slider1 .cu { width: 100%; height: 570px; position: relative; overflow: hidden}
.slider1 .centro { width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10}
.slider1 .centro .tit { color: #FFF; font-size: 40px; line-height: 43px; width: 430px; margin: auto; text-transform: uppercase; text-align: center; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);}
.slider1 .centro .tit b { font-weight: 900; text-align: center}
.slider1 .cu img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1}
.slider1 .cu .bot { width: 106px; height: auto; border: 1px solid #FFF; margin: auto; margin-top: 25px; text-align: center; cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.slider1 .cu .bot p { color: #FFF; font-size: 14px; font-weight: 500; padding: 10px 0px;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.slider1 .cu .bot:hover { background-color: #FFF;}
.slider1 .cu .bot:hover p { color: #666;}




.quienes { width: 1100px; margin: auto; margin-top: 100px; margin-bottom: 90px;}
.quienes .izq { width: 50%; float: left}
.quienes .izq .contSlider { width: 500px; height: 420px; border: 1px solid #73c741}
.quienes .izq .contSlider .slider2 { width: 490px; height: 410px; margin: 5px; background-color: #EEE}
.quienes .der { width: 50%; float: right}
.quienes .der h3 { font-family: 'Lato', sans-serif; font-size: 32px; letter-spacing: 3px; font-weight:lighter; margin-bottom: 20px; color: #3a3b3b; margin-top: 27px}
.quienes .der .destacado { font-size: 18px; line-height: 25px; font-weight: 400; margin-bottom: 15px; border-left: 5px solid #73c741; padding-left: 9px; }
.quienes .der .texto { font-size: 16px; line-height: 23px; font-weight: 300}




.servicios { width: 100%; padding: 80px 0px; background-color: #192024; text-align: center; padding-bottom: 30px; }
.servicios h3 { font-family: 'Lato', sans-serif; font-size: 32px; letter-spacing: 3px; font-weight:lighter; margin-bottom: 50px; color: #FFF;}

.servicios .cu1 { width: 1000px; margin: auto; height: auto; margin-bottom: 80px;}
.servicios .cu1 .izq { width: 370px; float: left; text-align: right}
.servicios .cu1 .izq .in { width: 90%; float: left; position: relative}
.servicios .cu1 .izq .in .raya { width: 220px; height: 4px; background-color: #73c741; top: 120px; right: -80px; position: absolute; z-index: 100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.servicios .cu1 .izq .in .titu { color: #FFF; font-size: 24px; font-weight: 700; line-height: 28px; margin-bottom: 50px; margin-top: 40px;}
.servicios .cu1 .izq .in .txt { color: #FFF; font-weight: 400; font-size: 16px; line-height: 22px; margin-bottom: 10px}
.servicios .cu1 .izq .in .txt b { font-weight: bolder; color: #73c741; }
.servicios .cu1 .izq .in .txt2 {color: #FFF; font-weight: 300; font-size: 13px;  line-height: 22px; margin-bottom: 12px;}
.servicios .cu1 .der { width: 630px; height: 360px; background-color: #333; float: right;position: relative; z-index: 1; overflow: hidden;
    -webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);}
.servicios .cu1 .der .foto { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 1}

.servicios .cu2 { width: 1000px; margin: auto; height: auto; margin-bottom: 80px;}
.servicios .cu2 .izq { width: 370px; float:right; text-align: left}
.servicios .cu2 .izq .in { width: 90%; float: right; position: relative}
.servicios .cu2 .izq .in .raya { width: 220px; height: 4px; background-color: #73c741; top: 120px; left: -80px; position: absolute; z-index: 100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.servicios .cu2 .izq .in .titu { color: #FFF; font-size: 24px; font-weight: 700; line-height: 28px; margin-bottom: 50px; margin-top: 40px;}
.servicios .cu2 .izq .in .txt { color: #FFF; font-weight: 400; font-size: 16px; line-height: 22px; margin-bottom: 10px}
.servicios .cu2 .izq .in .txt b { font-weight: bolder; color: #73c741; }
.servicios .cu2 .izq .in .txt2 {color: #FFF; font-weight: 300; font-size: 13px;  line-height: 22px; margin-bottom: 12px;}
.servicios .cu2 .der { width: 630px; height: 360px; background-color: #333; float: right;  z-index: 1; position: relative; overflow: hidden;
    -webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.3);}
.servicios .cu2 .der .foto { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 1}



.clientes { width: 100%; padding: 90px 0px; background-color: #fff; text-align: center;  }
.clientes h3 { font-family: 'Lato', sans-serif; font-size: 32px; letter-spacing: 3px; font-weight:lighter; margin-bottom: 30px; color: #444;}
.clientes .slider3 { width: 1200px; margin: auto; margin-top: 30px;}
.clientes .slider3 .cu { width: 190px; height: 140px; text-align: center; background-color: #f1f1f1; margin: 0px 6px; text-align: center}
.clientes .slider3 .cu img { margin: auto; width: 190px}
.clientes .slider3 .slick-dots li button {    background-color: #EEE;}
.clientes .slider3 .slick-dots {    bottom: -30px;}
.clientes .slider3 .slick-dots li button:hover,
.clientes .slider3 .slick-dots li button:focus
{     background-color:red; opacity:1; }
.clientes .slider3 .slick-dots li.slick-active button:before{    background-color:#CCC; }





.contacto { width: 100%; padding: 80px 0px; background-color: #eae4e4; text-align: center;  }
.contacto h3 { font-family: 'Lato', sans-serif; font-size: 32px; letter-spacing: 3px; font-weight:lighter; margin-bottom: 35px; color: #444;}
.contacto .in { width: 900px; margin: auto; height: auto}
.contacto .in .izq { width: 660px; float: left}
.contacto .in .izq .campo { border: none; border-bottom: 1px solid #999; width: 265px; padding-left: 5px; padding-bottom: 6px; margin-bottom: 30px; margin-right: 40px; background: transparent; }
.contacto .in .izq .elText {border: none; border-bottom: 1px solid #999; width: 580px; height: 100px; resize: none; padding-left: 5px; padding-bottom: 6px; margin-bottom: 30px; margin-right: 40px; background: transparent; }
.contacto .in .izq .mandale { width: 120px; height: auto; text-align: center; padding: 6px; color: #777; border: 1px solid #777; margin-top: 0px; float: left; background: transparent; margin-left: 17px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.contacto .in .izq .mandale:hover { background-color: #222; color: #FFF;}
.contacto .in .der { width: 200px; float: right; border-left: 4px solid #555; padding: 6px 0px; padding-left: 12px;}
.contacto .in .der .ic { float: left}
.contacto .in .der p { float: left; padding: 4px; color: #333;    font-size: 14px;    padding-top: 6px;}
.contacto .in .der .red { float: left; margin-right: 15px; opacity: 0.8; cursor: pointer}






.gracias { width: 300px; text-align: center; margin: auto; margin-top: 140px;}
.gracias img { margin-bottom: 30px;}
.gracias p { font-size: 18px; line-height: 24px; font-weight: 300; margin-bottom: 40px;}
.gracias .bot { width: 170px; height: auto; border: 1px solid #6ac335; margin: auto;  text-align: center; cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.gracias .bot p { color: #555; font-size: 14px; font-weight: 500; padding: 10px 0px; margin-bottom: 0px;
 -moz-transition:all 0.25s ease 0s;
    -o-transition:all 0.25s ease 0s;
    -ms-transition:all 0.25s ease 0s;
    -webkit-transition:all 0.25s ease 0s;}
.gracias .bot:hover { background-color: #6ac335;}
.gracias .bot:hover p { color: #FFF;}





.aloha { width: 100%; height: auto; text-align: center; background-color: #000;}
.aloha p { width: 90%; margin: auto; font-size: 11px; padding: 12px 0px; color: #FFF; opacity: 0.5}
.aloha p:hover { text-decoration: underline}







/*QUERYS*/
@media screen and (max-width: 1500px) {
    
    .clientes .slider3 {    width: 1100px;}
      
}


@media screen and (max-width: 1300px) {
    
    .slider1 .cu img { height: 100%; width: auto;}
    
    .quienes {    width: 1000px;}
    .quienes .der {    width: 46%;}
    
    .clientes .slider3 {    width: 950px;}
      
}


@media screen and (max-width: 1100px) {
    
    .quienes {    width: 900px;}
    .quienes .der {    width: 40%;}
    .quienes .der h3 {    margin-top: 0px;}
    .quienes .der .destacado {    font-size: 16px;    line-height: 22px;}
    
    .servicios .cu1 {    width: 900px;}
    .servicios .cu1 .izq {    width: 300px;}
    .servicios .cu1 .der {    width: 590px;    height: 330px;}
    .servicios .cu1 .izq .in .titu {    margin-top: 25px;}
    .servicios .cu1 .izq .in .raya {    top: 105px;}
    
    .servicios .cu2 {    width: 900px;}
    .servicios .cu2 .izq {    width: 300px;}
    .servicios .cu2 .der {    width: 590px;    height: 330px;}
    .servicios .cu2 .izq .in .titu {    margin-top: 25px;}
    .servicios .cu2 .izq .in .raya {    top: 105px;}
    
    .clientes .slider3 {    width: 800px;}
    
    .contacto .in {    width: 800px;}
    .contacto .in .izq {    width: 560px;}
    .contacto .in .izq .campo {    width: 230px;}
    .contacto .in .izq .elText {    width: 500px;}
      
}


@media screen and (max-width: 960px) {
    
    header .menu { display: none}
    .icMenu { display: block;}
    header {    height: 65px;}
    .slider1 {    margin-top: 65px;}
    header .logo {    height: 45px;}
    
    .quienes {    width: 600px;}
    .quienes .izq {    width: 100%; margin-bottom: 40px;}
    .quienes .izq .contSlider {    width: 100%; height: 504px;}
    .quienes .izq .contSlider .slider2 {    width: 590px; height: 495px;}
    .quienes .izq .contSlider .slider2 .foto { width: 100%}
    .quienes .der .destacado {    font-size: 18px;    line-height: 25px;}
    .quienes .der {    width: 100%;}
    
    .servicios .cu1 {    width: 660px;}
    .servicios .cu1 .izq {    width: 100%; text-align: center;}
    .servicios .cu1 .izq .in {    width: 100%;}
    .servicios .cu1 .izq .in .raya {    top: 105px; right: inherit; left: 50%; transform: translateX(-50%);}
    .servicios .cu1 .der {    width: 100%;    height: 370px; margin-top: 50px;}
    
    .servicios .cu2 {    width: 660px;}
    .servicios .cu2 .izq {    width: 100%; text-align: center;}
    .servicios .cu2 .izq .in {    width: 100%;}
    .servicios .cu2 .izq .in .raya {    top: 105px; right: inherit; left: 50%; transform: translateX(-50%);}
    .servicios .cu2 .der {    width: 100%;    height: 335px; margin-top: 50px;}
    
    .clientes .slider3 {    width: 640px;}
    
    .contacto .in {    width: 640px;}
    .contacto .in .izq {    width: 400px;}
    .contacto .in .izq .campo {    width: 180px;    margin-right: 10px;}
    .contacto .in .izq .elText {    width: 382px;}
      
}


@media screen and (max-width: 720px) {
    
    .slider1 {    height: 650px;}
    .slider1 .cu {    height: 650px;}
    
    .slider1 .centro { width: 480px; height: auto}
    .slider1 .centro .tit { width: 100%;}
    
    .quienes {    width: 500px;}
    .quienes .izq .contSlider {  height: 420px;}
    .quienes .izq .contSlider .slider2 {    width: 490px; height: 411px;}
    
    .servicios .cu1 {    width: 500px;}
    .servicios .cu1 .der .foto {    height: 100%;    width: auto;}
    
    .servicios .cu2 {    width: 500px;}
    .servicios .cu2 .der .foto {    height: 100%;    width: auto;}
    
    .clientes .slider3 {    width: 480px;}
    
    .contacto .in {    width: 480px;}
    .contacto .in .izq {    width: 250px;}
    .contacto .in .izq .campo {    width: 230px;    margin-right: 0px; float: left}
    .contacto .in .izq .elText {    width: 230px; float: left}
    .contacto .in .izq .mandale {    margin-left: 0px;}
    
}


@media screen and (max-width: 560px) {
    
    header .logo {    left: 10px;}
    .icMenu {    right: 8px;}
    
    .slider1 {    height: 550px;}
    .slider1 .cu {    height: 550px;}
    
    .slider1 .centro { width: 380px; height: auto}
    .slider1 .centro .tit {    font-size: 30px;    line-height: 35px;}
    
    .quienes {    width: 360px;}
    .quienes .izq .contSlider {  height: 303px;}
    .quienes .izq .contSlider .slider2 {    width: 350px; height: 294px;}
    
    .servicios .cu1 {    width: 360px;    margin-bottom: 40px;}
    .servicios .cu1 .der {    height: 230px; margin-top:30px;}
    
    .servicios .cu2 {    width: 360px;    margin-bottom: 40px;}
    .servicios .cu2 .der {    height: 230px; margin-top:30px;}
    
    .clientes .slider3 {    width: 340px;}
    
    .contacto .in {    width: 340px;}
    .contacto .in .izq {    width: 100%;}
    .contacto .in .der {   margin-top: 40px; margin-left: 0px; float: left}
    .contacto .in .izq .campo {    width: 95%;  }
    .contacto .in .izq .elText {    width: 95%; }
    
    .gracias {  margin-top: 90px;}
      
}


@media screen and (max-width: 420px) {
    
    .lighMenu .der {    width: 270px;}
    
    .slider1 {    height: 400px;}
    .slider1 .cu {    height: 400px;}
    
    
    .slider1 .centro { width: 80%; height: auto}
    .slider1 .centro .tit {    font-size: 26px;    line-height: 31px;}
    
    .quienes {    width: 280px;}
    .quienes .izq .contSlider {  height: 236px;}
    .quienes .izq .contSlider .slider2 {    width: 270px; height: 226px;}
    
    .quienes .der h3 {    font-size: 28px;    letter-spacing: 1px;}
    
    .servicios h3 { font-size: 28px;    letter-spacing: 1px;}
    
    .servicios .cu1 {    width: 280px;}
    .servicios .cu1 .der {    height: 170px;}
    
    .servicios .cu2 {    width: 280px;}
    .servicios .cu2 .der {    height: 170px;}
    
    .clientes .slider3 {    width: 280px;}
    
    .contacto .in {    width: 280px;}
      
}


@media screen and (max-width: 300px) {
      
}