html, body { width: 100%; height: auto; background: ; margin: 0; padding: 0; background: #efefef; font-family: 'Raleway', sans-serif; font-weight: 200; font-size: 16px !important; color: #3d3d3d; letter-spacing: 1px;  }
body { background: url(img/fondo.jpg) no-repeat !important ; background-size: 100% 100% !important; background-blend-mode: multiply; overflow-x: hidden !important; }
header { width: 100%; height: 90px; z-index: 100; position: fixed; top: 0; z-index: 999; background: #fff; }
header ul { width: 100%; text-align: right; position: absolute; top: 45px; left:0; padding-right: 10px;  }
header ul li { text-decoration: none; display: inline-block; vertical-align: top; list-style: none; margin: 5px 8px 0 8px;  }
header ul li a { color: #343534;  font-size: 12px; line-height: 5px; text-transform: uppercase; font-weight: 400; }
header ul li a:hover { color: #b68c73; text-decoration: none; }
section { width: 100%; height: auto; padding: 75px 0; overflow-x: hidden !important; }
footer{ width: 100%; height: auto; padding: 15px 0; color:#fff; background: #153329; }
footer a { color:#fff; }
footer a:hover { color: #b68c73; text-decoration: none;  }
/* div, a { transition:all 400ms ease; } */
h1, h2, h3 { font-weight: 900; }
.rs { position: absolute; top: 15px; right: 20px; }
.logo { position: absolute; top: 15px; left: 20px; }

#inicio { position: relative; padding: 150px 0 100px 0 !important; overflow: none; }
#inicio h1 { font-size: 3.4em; text-transform: uppercase; line-height: 1em; }
#inicio .copy { font-size: 1.2em; line-height: 1.6em;  color:#86a449;  margin: 50px 0 50px 30px; font-weight: 700; }
#inicio p { font-size: 1.25em; line-height: 1.3em; color:#343534; max-width: 400px; margin: 50px 0 50px 30px; font-weight: 400; }

.container-fluid { position: relative; z-index: 10; }
.container { position: relative; z-index: 10; }
.img-inicio { position: absolute; top:0; left: 0; width: 100% !important; height: auto; z-index: 1;  }
.cajas { position: absolute; top:0px !important; right: 0; width: 100%; height: auto; z-index: 9999; max-width: 750px;  }

#nosotros { position: relative; padding-top: 150px !important; }
#nosotros h2 { text-transform: uppercase; color:#86a449; font-size: 3em; line-height: 0.9em; font-weight: 800; }
#nosotros p { font-size: 1.12em; line-height: 1.3em; color:#343534; margin: 75px 0; font-weight: 500; }
.iphone { mix-blend-mode: multiply !important; }
.arrow { right: -50px; bottom: 15px; position: absolute; }
.tapete { position: absolute; top:270px; left: 0; width: 40%; height: auto; z-index: 1;  }
.jala { margin-top: -150px; }
.jala p { max-width: 340px; padding-top: 20px }

.fondo_ { background:#86a449; padding: 25px; color: #fff; color: #fff !important; border-radius: 20px; margin-top: -50px !important; }
.fondo_ b { font-weight: 800; font-size: 20px; }
#servicios { background: rgba(32,61,48,1);
background: -moz-linear-gradient(45deg, rgba(32,61,48,1) 0%, rgba(134,164,73,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(32,61,48,1)), color-stop(100%, rgba(134,164,73,1)));
background: -webkit-linear-gradient(45deg, rgba(32,61,48,1) 0%, rgba(134,164,73,1) 100%);
background: -o-linear-gradient(45deg, rgba(32,61,48,1) 0%, rgba(134,164,73,1) 100%);
background: -ms-linear-gradient(45deg, rgba(32,61,48,1) 0%, rgba(134,164,73,1) 100%);
background: linear-gradient(45deg, rgba(32,61,48,1) 0%, rgba(134,164,73,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203d30', endColorstr='#86a449', GradientType=1 ); 
border-radius: 30px; color: #fff; font-size: 18px; font-weight: 700; padding: 50px 0; margin-top: 450px;
}
#servicios h2 { color:#fff; font-size: 4em; margin: 20px 0; }
#servicios h2 > span { color:#343534 !important; }
.servicio { margin-bottom: 20px; padding-left: 35px; min-height: 40px; background: url(img/ha.png) no-repeat !important ; }
#carga { padding: 190px 0;  }
#carga h2 { color:#86a449; font-size: 4em; margin: 50px 0; }
#carga h2 > span { color:#343534; }
.carga { margin: 30px 15px; width: 15%; }
#carga h4 { max-width: 650px; margin: 25px auto; }

#entrega h2 { color:#86a449; font-size: 4em; margin: 50px 0; }
#entrega h2 > span { color:#343534; }
#entrega p  { font-size: 18px; line-height: 24px; color: #343534; max-width: 425px; }
.entregaa { position: absolute; left: 0; }

#proceso { position: relative; margin-top: 90px; padding-top: 150px !important; }
#proceso h2 { font-size: 3.4em; text-transform: uppercase; line-height: 1em; color: #fff; }
#proceso h3 { font-size: 3.4em; text-transform: uppercase; line-height: 1em; }
#proceso .copy { font-size: 1.5em; line-height: 0.9em; text-transform: uppercase; color:#86a449; max-width: 400px; margin: 50px 0 50px 30px; font-weight: 900; }
#proceso p { font-size: 1.25em; line-height: 1.3em; color:#343534; max-width: 400px; margin: 50px 0 50px 30px; font-weight: 400; }
.img-bottom { position: absolute; bottom:0; left: 0; width: 100%; height: 100%; z-index: 1;  }

#contacto { position: relative; padding: 150px 0 100px 0 !important; background: url(img/contacto.jpg) no-repeat center bottom !important ; background-size: cover !important;  }
#contacto a { color: #343534; font-size: 16px; font-weight: 800; display: block; margin: 20px 0;  }
#contacto h2 { color:#86a449; font-size: 4em; margin-top: -70px; }
#contacto h2 > span { color:#343534; }
#contacto .wh  { display: none; }
 .web { display: inline; }
 .api  { display: none !important; }
input { background: #86a449; border:#1f6d3d solid 1px; outline: none; color:#fff; padding: 5px 10px;border-radius: 50px; margin-bottom: 15px; width: 100%; }
input[type="submit"] { background:none; border:none; color:#343534; text-align: left; text-transform: uppercase;  outline: none; font-weight: 900; padding: 5px 10px; margin-bottom: 15px; width: 100%; font-size: 37px; }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color: #fff; }
::-moz-placeholder { /* Firefox 19+ */ color: #fff; }
:-ms-input-placeholder { /* IE 10+ */color: #fff; }
:-moz-placeholder { /* Firefox 18- */color: #fff; }
.header-alt { transition:all 400ms ease; background:rgba(21,51,41, .8) url(img/logo.png) no-repeat !important; background-size: 195px !important; background-position: 20px center !important;  }

.carousel { margin-bottom: 40px; }
.carousel-cell {  width: 100%;  height: auto;  position: relative; }
.carousel-nav .carousel-cell { height: 120px;  cursor: pointer; width: 33%;  border-bottom: #ED2 solid 4px; padding: 20px;  position: relative; font-size: 16px; font-weight: 800; overflow: visible !important; }
.carousel-nav .carousel-cell a { color:#343534 ; }
.carousel-nav .carousel-cell a:hover { color:#1f6d3d ; text-decoration: none; }
.number { position: absolute; left: 0 !important ; top: 0 !important; font-size: 16px; font-weight: 700; color: #07232a; }
.carousel-nav .carousel-cell:before { font-size: 50px; line-height: 80px; }
.carousel-nav .carousel-cell.is-nav-selected {  border-bottom: #1d9c00 solid 4px; color: #fffc00; }
.proceso-box { width: 100%; min-height: 600px; }
.proceso-box h3 { color: #fffc00; font-size:1.4em ; font-weight:700 ; }
.info-sl p { color: #fff !important; font-size: 16px; }
.img-sl { display: inline-block; margin: 20px; vertical-align: top; width: 45%; }
.info-sl { display: inline-block; margin: 20px; vertical-align: top; width: 45%; }
.dia { position: absolute; bottom: 0px; right: 0px; }
.proceso-box1 { width: 33.3%; min-height: 120px; min-width: 290px; margin-right: 90px; padding: 30px 15px 20px 15px; border-top:#c0e0b4 solid 1px; font-size: 14px;  padding-bottom: 36px;  overflow: visible !important; font-weight: 800 !important;   }
.proceso-box1 .hr { width: 100%; position: relative; margin-left: -20px; height: 1px !important; background: #c0e0b4; margin-top: 20px; margin-bottom: 0px; }
.proceso_ .carousel { height: 150px;  }

.flickity-button {
    position: absolute;
    background: url('img/arrow2.png') left center no-repeat !important;  background-size: 90% !important; transition:all 200ms ease !important; 
    border: none;
    color: #333;
}

.flickity-button:hover {
    position: absolute;
    border: none;
    color: #333;
}

.flickity-prev-next-button {
    top: 50%;
    width: 70px !important;
    height: 70px  !important;
    border-radius: 0%  !important;
    transform: translateY(-50%);
}

.previous { transform: scaleX(-1) !important; margin-top: -35px; left: 90% !important; }
.next { left: 97% !important; }
.arrow { opacity: 0; }

.proceso_ .previous { display: none; }
.proceso_ .next { transform: scaleX(-1) !important; margin-top: -50px; left: 105% !important; background: url('img/next.png') left center no-repeat !important; height: 100px !important; background-size: auto !important;  }
.proceso-box1 .number { color: #f7f805; }

#vehiculos { padding: 90px 0; overflow: none; min-height: 1200px;}
.veh1 { position: absolute; z-index: 15; margin-top: -150px; }
.veh2 { position: absolute; right: 10% !important; margin-top: 210px; margin-bottom: 150px; z-index: 12; }
.veh3 { position: absolute; right: 55%; margin-top: 520px; margin-bottom: 150px; z-index: 10; }
.sube { position: fixed !important; right: 25px; bottom: 50px; z-index: 9999999999; width: 50px; }
.sube:hover { bottom: 55px; transition:all 400ms ease; }
header ul  > .burger { color: #fff; font-weight: 800; position: absolute; top:25px ; right: 25px; cursor: pointer; display: none !important; }
.burger_ {  position: absolute; right: 15px; top:45px ; cursor: pointer; display: none !important; }
.row_ { margin-top: 5vh !important; }


.custom-select {
  position: relative;
  background: none;
  border:none;
  padding: 0 !important;
  margin-bottom: 15px;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #86a449;
  border-radius: 50px;
  width: 100%;
  padding: 5px 10px;
  border: #1f6d3d solid 1px !important;
  
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #fff;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #1f6d3d;
   border: #86a449 solid 1px !important;
   padding: 5px 10px;
   border-radius: 5px;
   top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}



  @media only screen and (max-width: 1024px) {
    .cajas { display: relative; width: 55%; margin-top: 150px; }
    #nosotros h2 { font-size: 2.7em;}
    .veh1 { width: 450px; }
    #proceso { position: relative; margin-top: 90px; padding-top: 0px !important; }
    #proceso h2 { font-size: 3.4em;    text-transform: uppercase;    line-height: 1em;    color: #86a449; }
    #proceso h3 { font-size: 2.8em;    text-transform: uppercase;   line-height: 1em; }
    #carga { padding: 90px 0; }
  }

  @media only screen and (max-width: 770px) {
  .contacto .wh_ { display: none !important; }
  .contacto .wh  { display: inline !important; }
  header .wh_ { display: none !important; }
  header .wh  { display: inline !important; }
  header ul { padding: 0 5px 0 0 !important;  }
  header ul li { color: #ffc20e; text-decoration: none; display: inline-block; vertical-align: top; list-style: none; margin: 0 3px;  }
  header ul li a {  font-size: 11px; line-height: 5px; text-transform: uppercase; font-weight: 400; }
  .carousel-nav .carousel-cell { height: 190px;  cursor: pointer; width: 33%;  border-bottom: #ED2 solid 4px; padding: 20px;  position: relative; font-size: 16px; font-weight: 800; overflow: visible !important; }
  .cajas { display: none; }
  .veh1 { display: none; } 
  #entrega h2 {
    color: #86a449;
    font-size: 2.4em;
    margin: 50px 0;
      }
  }


   @media only screen and (max-width: 690px) {
   	#inicio { height: 50vh;  background: url(img/pareja.jpg)no-repeat center; background-size: cover; position: relative; overflow: hidden; padding-bottom: 70px; }
   	.imagen { height: 500px !important;  }
   	.header-alt { transition:all 400ms ease; background:rgba(21,51,41, .9) url(img/logo.png) no-repeat !important; background-size: 155px !important; background-position: 20px 20px !important; }
    #desarrollos p { width: 100%; margin: 0 auto; }
    #desarrollos h2 { color:#b68c73; margin-bottom: 50px; font-size: 2em; }
    .contacto { background: url(img/casas.png) no-repeat center !important; background-size: cover !important;  padding: 100px 0; position: relative;  }
    .contacto h2 { color:#fff; font-weight: 900; margin-bottom: 45px; font-size: 2em; }
    #nosotros { height: auto; background-size: 100% auto !important; background-position: top left;  }
    #nosotros h2 { color:#153329; font-weight: 900; font-size: 2.4em; padding-top: 300px; }
    .logo-inicio { margin-top: 20vh; position: relative; z-index: 10; width: 280px; float: right; }

    .contacto a { display: block; color: #fff; margin: 10px; width: 100%; font-size: 14px; }
    .contacto a > img {display: inline-block; margin: 0 7px 7px auto; width: 20px; }
    .entregaa { position: absolute; left: 0; top: 50px; }
    #entrega h2 { padding-top: 450px }
    .carousel-nav .carousel-cell { height: 120px; cursor: pointer; width: 80%;  border-bottom: #ED2 solid 4px; padding: 20px;  position: relative; font-size: 16px; font-weight: 800; overflow: visible !important; }
      .img-sl { display: inline-block; margin: 20px; vertical-align: top; width: 100%; }
      .info-sl { display: inline-block; margin: 20px; vertical-align: top; width: 100%; color:#86a449 !important;  }
      .info-sl p { color: #343534 !important; margin-left: -10px !important; font-size: 14px !important;  }
      .proceso-box, .carousel-main { height: 850px !important; }
      .previous, .next { display: none;  }

      #proceso h2 { font-size: 2em; }
      #proceso h3 { font-size: 1.5em; color:#86a449; }
      h1 br, h2 br, h3 br { display: none; }
      #inicio {
    height: auto; }
    .logo { width: 150px; }
    .api { display: inline !important; }
 .web  { display: none !important; }

 #servicios p { color:#fff !important; } 
  }

    @media only screen and (max-width: 480px) {
br { display: none; }
      #proceso h2 { font-size: 2em; text-transform: uppercase; line-height: 1em; color: #fff; }
      #proceso h3 { font-size: 1.5em; text-transform: uppercase; line-height: 1em; color:#86a449;  }
      #contacto h2 { color:#86a449; font-size: 2em; margin-top: -70px; }
      .img-sl { display: inline-block; margin: 20px; vertical-align: top; width: 100%; }
      .info-sl { display: inline-block; margin: 20px; vertical-align: top; width: 100%; color:#86a449 !important;  }
      .info-sl p { color: #343534 !important; margin-left: -10px !important; font-size: 14px !important;  }
      .proceso-box, .carousel-main { height: 550px !important; }
      .carousel-nav .carousel-cell.is-nav-selected {  border-bottom: #1d9c00 solid 4px; color: #1d9c00; }
      .carousel-nav .carousel-cell { height: 120px; cursor: pointer; width: 100%;  border-bottom: #ED2 solid 4px; padding: 20px; font-size: 13px !important;  position: relative; font-size: 16px; font-weight: 800; overflow: visible !important; }
      .veh1, .veh2, .veh3 { display: inline; position: relative; width: 90%; margin: 10px auto; top: 0; right: 2% !important;  }
      h2 { font-size: 1.8em; max-width: 300px; }
      input { max-width: 300px; }
      .proceso-box img { width: 75%; }
      .entregaa { width: 75%; }
      p { font-size: 1.25em; line-height: 1.3em; color: #343534; width: 300px !important; margin: 50px 0 50px 0px; font-weight: 400; }
      .carousel-nav { width: 90%; }
      .carousel-nav .carousel-cell { width: 75%; }
      h1 { font-size: 2.4em !important; }
      #servicios { width: 90%; }
      #servicios h2 {
    color: #fff;
    font-size: 2em;
    margin: 20px 0;
}
.iphone { }
.tapete { width: 90%; top: 50px; }
.burger_ {  position: absolute; right: 15px; top:45px ; cursor: pointer; display: inline !important; }


   ul.menu  { width: 100%; height: 100%; position: fixed; top:40px; left: -100%;  padding-top: 60px !important; background: #86a449;  font-weight: 600;  margin-top: 50px;  transition:all 400ms ease; }
   ul.menu  li { display: block; margin: 0 10px; width: 90%; height: 85px; padding-top: 20px; border-bottom: #afc938 solid 2px; }
   ul.menu  li a { color: #afc938; transition:all 400ms ease; font-size: 16px; font-weight: 600;  }
   ul.menu  li a:hover { color: #fff; text-decoration: none; }
   ul.menu  > .burger { color: #fff; font-weight: 800; position: absolute; right: 25px; cursor: pointer; display: inline; }
.main { left: 0% !important; margin-left: 0px !important; transition:all 400ms ease; }

#servicios {
    width: 83% !important;  margin-left: 3%;
}
#carga h2 { font-size: 2em; margin: 0 auto; }
#servicios h2 { margin-left: 3%; }
.servicio {
    width: 85% !important; 
    margin-bottom: 20px;
    padding:0 15px 0 35px;
    min-height: 40px;
    background: url(img/ha.png) no-repeat !important;
    margin: 0 0 20px 10px;
}
#nosotros h2 { color:#153329; font-weight: 900; font-size: 2.4em; padding-top: 100px; }
.row_ { margin-top: 5px; }
    }