@import url('https://fonts.googleapis.com/css?family=Raleway:200,300,400,700,900&display=swap');

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}


html,body{width:100%;height:100%;font-family: 'Raleway', sans-serif;}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#ffffff;z-index:9999;}
#loader2{width:217px;height:62px;position:absolute;left:50%;top:50%;background:url(../imagenes/logo.png) no-repeat center 0;margin-left:-85px;margin-top:-20px;}
*{
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
iframe{display:block;border:none;}


#slide1{text-align:center;width:100%; height:100%;min-height:700px;}
#somoss{ width:100%; text-align:center; background-color:#003e8c;  }
#flete{ width:100%; text-align:center; background-color:#f5f6f7;  }
#fleteinterior{background:url(../imagenes/flete.jpg) no-repeat 50% 50% fixed ;background-size:cover; text-align:center; width:100%; }
#contacto{ width:100%; text-align:center; background-color:#f4f7f9; }
#footi{ width:100%; text-align:center; background-color:#1d1d1b; }
#productos{ width:100%; text-align:center; background-color:#f5f6f7;  }
#fleteinterior2{background:url(../imagenes/prodos.jpg) no-repeat 50% 50% fixed ;background-size:cover; text-align:center; width:100%; }
#pies{ width:100%; text-align:center; background-color:#084286;  }
#contacto{ background-color:#ffffff;}
#planta{ width:100%; text-align:center; background-color:#f5f6f7;  }



#elheader{ width:100%; height:106px; background-color: #FFFFFF; z-index:4; position:fixed; top:25px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}

#telefonos{ width:100%; height:25px; top:0; left:0; background-color:#ffffff; position:fixed; z-index:99;}

#logo{POSITION:absolute;z-index:999;left:5%;top:9px;width:336px;height:144px;}
#logomovil{display: none;}

#flechon{ width:90%; max-width:1200px; text-align:left;bottom:100px;POSITION:relative;}
#flechas{POSITION:relative; width:35px; text-align:left; left:50%; margin-left:-17px;bottom:100px;}


/* Overline Reveal */
.smooth {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden; line-height:80px; color:#67666a; text-transform:uppercase; font-size:13px; font-weight:300;
}
.smooth:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #003e8c;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.smooth:hover:before{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


.smootha2{color:#3b4441;font-size:13px;text-decoration:none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;text-transform:uppercase; }
.smootha2:hover{color:#bad902; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}


.texto1{color:#ffffff;font-size:28px;line-height:140%;}
.texto2{color:#ffffff;font-size:33px;line-height:140%; font-weight:600;}
.texto3{color:#ffffff;font-size:18px;line-height:140%;font-weight:300;}
.texto4{color:#003e8c;font-size:30px;font-weight:600;}.texto4a{color:#003e8c;font-size:25px;font-weight:600;}.texto4aa{color:#003e8c;font-size:15px;font-weight:600;}
.texto5{color:#67666a;font-size:18px;font-weight:200;line-height:140%;}
.texto6{color:#67666a;font-size:15px;font-weight:200;line-height:140%;}
.texto7{color:#ddddde;font-size:90px;font-weight:900;line-height:120%; text-transform:uppercase; letter-spacing:-5px; text-align:left;}
.texto8{color:#ffffff;font-size:30px;font-weight:300;}
.texto9{color:#ffffff;font-size:15px;font-weight:300;}
.texto10{color:#606060;font-size:15px;font-weight:300;line-height:140%;}

#arriba, #arriba1,#arriba2{display:inline-block;vertical-align:top;}
#arriba{width:1200px;vertical-align:middle; text-align:left; }
#arriba1{width:600px;margin-right:-4px; text-align:left; margin-top:9px;}
#arriba2{width:600px;margin-right:-4px;text-align:right; }

#somos, #somos1,#somos2,#somos0{display:inline-block;vertical-align:top;}
#somos{width:1200px;vertical-align:middle; text-align:left; }
#somos1{width:450px;margin-right:-4px; text-align:left; }
#somos2{width:600px;margin-right:-4px;text-align:left; }
#somos0{width:130px;margin-right:-4px;text-align:right; }


#fletes, #fletes1,#fletes2,#fletes0{display:inline-block;vertical-align:top;}
#fletes{width:1200px;vertical-align:middle; text-align:left; }
#fletes1{width:100%; max-width:700px;margin-right:0px; text-align:justify; }
#fletes2{width:330px;margin-right:-4px;text-align:left; }
#fletes0{width:105px;margin-right:-4px;text-align:center; }

#prodos, #prodos1,#prodos2{display:inline-block;vertical-align:top;}
#prodos{max-width:1200px; width:90%;vertical-align:middle; text-align:center; }
#prodos1{width:100%; margin-right:0px; text-align:left; }
#prodos2{width:200px;margin-right:-4px;text-align:left; height:150px; }


.transparente{background-color:transparent; border:0;text-align:left;HEIGHT:30px;width:100%; font-size:15PX;color:#313334;font-family: 'Raleway', sans-serif;}

.boton1{background-color:#ffffff;text-align:center;HEIGHT:30px;width:100px;border:1; border-color:#084286;border-style: solid;font-size:15PX;color:#313334;font-family: 'Raleway', sans-serif;cursor:pointer; }


#asfaltos, #asfaltos1,#asfaltos0,#asfaltos2{display:inline-block;vertical-align:top;}
#asfaltos{max-width:1200px; width:90%;vertical-align:middle; text-align:left; }
#asfaltos1{width:250px; margin-right:-4px; text-align:left; }
#asfaltos0{width:66px;margin-right:-4px;text-align:left;}
#asfaltos2{width:100%; margin-right:0px; text-align:left; }

#emulsiones, #emulsiones1{display:inline-block;vertical-align:top;}
#emulsiones{max-width:1200px; width:90%;vertical-align:middle; text-align:left; }
#emulsiones1{width:50%; margin-right:-4px; text-align:left; }


#beneficios, #beneficios1,#beneficios0{display:inline-block;vertical-align:top;}
#beneficios{max-width:1200px;vertical-align:middle; text-align:left; }
#beneficios1{width:300px; margin-right:-4px; text-align:left; }
#beneficios0{width:100%;margin-right:0px;text-align:left;}

.latabla{ width:250px;}

#abajo, #abajo1, #abajo2{display:inline-block;vertical-align:top;}
#abajo{max-width:1200px; width:90%;vertical-align:middle; text-align:left; }
#abajo1{width:70%; margin-right:0px; text-align:left; }
#abajo2{width:25%; margin-right:0px; text-align:right; }

#contactame, #contactame1, #contactame2, #contactame0{display:inline-block;vertical-align:top;}
#contactame{width:1200px; vertical-align:middle; text-align:left; }
#contactame1{width:520px; margin-right:-4px; text-align:left; }
#contactame2{width:520px; margin-right:-4px; text-align:left; padding-top:50px; }
#contactame0{width:160px; margin-right:-4px; text-align:right; }

#datos, #datos1{display:inline-block;vertical-align:top;}
#datos{width:100%;vertical-align:middle; text-align:left; }
#datos1{width:50%; margin-right:-4px; text-align:left; }

.compu{ display:block;}
.telo{ display:none;}

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

#contactame{width:900px; vertical-align:middle; text-align:left; }
#contactame1{width:420px; margin-right:-4px; text-align:left; }
#contactame2{width:420px; margin-right:-4px; text-align:left; padding-top:200px; }
#contactame0{width:60px; margin-right:-4px; text-align:right; }

#datos{width:100%;vertical-align:middle; text-align:left; }
#datos1{width:50%; margin-right:-4px; text-align:left; }	

#fletes{width:900px;vertical-align:middle; text-align:left; }
#fletes2{width:250px;margin-right:-4px;text-align:left; }
#fletes0{width:75px;margin-right:-4px;text-align:center; }

#somos{width:900px;vertical-align:middle; text-align:left; }
#somos1{width:350px;margin-right:-4px; text-align:left; }
#somos2{width:500px;margin-right:-4px;text-align:left; }
#somos0{width:50px;margin-right:-4px;text-align:right; }

#beneficios{max-width:900px;vertical-align:middle; text-align:left; }
#beneficios1{width:300px; margin-right:-4px; text-align:left; }
#beneficios0{width:100%;margin-right:0px;text-align:left;}

}

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

#asfaltos1{width:100%; margin-right:0px; text-align:left; }
#asfaltos0{ display:none;}	

#emulsiones1{width:100%; margin-right:0px; text-align:left; }

}

@media screen and (max-width:910px){
#contactame{width:90%; vertical-align:middle; text-align:left; }
#contactame1{width:100%; margin-right:0px; text-align:left; }
#contactame2{width:100%; margin-right:0px; text-align:left; padding-top:0px; }
#contactame0{ display:none;}

#datos{width:100%;vertical-align:middle; text-align:left; }
#datos1{width:50%; margin-right:-4px; text-align:left; }	

#beneficios{max-width:600px;vertical-align:middle; text-align:left; }
#beneficios1{width:300px; margin-right:-4px; text-align:left; }
#beneficios0{width:100%;margin-right:0px;text-align:left;}


#fletes{width:90%;vertical-align:middle; text-align:left; }
#fletes2{width:100%;margin-right:0px;text-align:left;  }
#fletes0{ display:none;}

#somos{width:90%;vertical-align:middle; text-align:left; }
#somos1{width:100%;margin-right:0px; text-align:left; }
#somos2{width:100%;margin-right:0px;text-align:left; }
#somos0{ display:none; }

.texto7{font-size:60px;}

#fleteinterior{background:url(../imagenes/flete.jpg) no-repeat 50% 50%  ;background-size:cover; text-align:center; width:100%; }
#fleteinterior2{background:url(../imagenes/prodos.jpg) no-repeat 50% 50%  ;background-size:cover; text-align:center; width:100%; }
#contacto{background:url(../imagenes/contacto.jpg) no-repeat 50% 50%  ;background-size:cover; text-align:center; width:100%; }

.telo{ display:block;}
.compu{ display:none;}

}

@media screen and (max-width:610px){
	
	#datos{width:100%;vertical-align:middle; text-align:left; }
#datos1{width:100%; margin-right:0px; text-align:left; }
	
.latabla{ width:100%;}
	
#beneficios{max-width:90%;vertical-align:middle; text-align:left; }
#beneficios1{width:100%; margin-right:-4px; text-align:left; }
#beneficios0{width:100%;margin-right:0px;text-align:left;}
}

@-moz-keyframes spin {
    0% {
opacity: 1;   -moz-transform: translateY(-5px); }

    100% {
opacity: 1;  -moz-transform: translateY(5px);   }
}



@-webkit-keyframes spin {
    0% {
opacity: 1; -webkit-transform: translateY(-5px); }

    100% {
opacity: 1; -webkit-transform: translateY(5px); }  
}

.ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
.ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin2 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-6px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(-6px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(-6px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}
.flecha3{-moz-animation:spin3 1.5s infinite linear;-webkit-animation:spin3 1.5s infinite linear;-0-animation:spin3 1.5s infinite linear;animation:spin3 1.5s infinite linear;}
@-moz-keyframes spin3{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}


#menumovil{ display:none;}
.button_container {
  position: absolute;
  top: 25px;;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #003e8c;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background-color:#000000;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  -moz-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  font-weight: 900;
  text-align: right;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 70px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  font-size: 40px;
  opacity:1; text-transform:uppercase; line-height:100%;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;font-size: 42px;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;color: #003e8c;
}
.overlay ul li a:after {
  font-size: 55px;
  opacity:.9;-webkit-transition: .25s;
  transition: .25s;
  
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@media screen and (max-width:1210px){
#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{width:30%;margin-right:-4px; text-align:left;}
#arriba2{width:70%;margin-right:-4px;text-align:right;  min-width:600px; }
}

@media screen and (max-width:960px){
#logomovil{POSITION:fixed;z-index:999;left:5%;top:0px;width:133px;height:70px;display: block;}
#logo{display: none;}

#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{width:100%;margin-right:-4px;  text-align:left;}
#arriba2,#arriba3{display:none;}

#menumovil{ z-index:9999;position: absolute;top: 30px;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}