@charset "utf-8";
/* CSS Document */

#fondo { position: fixed; z-index:-3; animation: fadein 4s; -moz-animation: fadein 4s; /* Firefox */ -webkit-animation: fadein 4s; /* Safari and Chrome */-o-animation: fadein 4s; /* Opera */}
@keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-moz-keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-webkit-keyframes fadein { from { opacity:0;} to { opacity:2; }}
@-o-keyframes fadein { from { opacity:0;} to { opacity:2; }}


@font-face {
font-family:avenirlt;
src: url(../fonts/avenirlt.otf) format("opentype");
}


@font-face {font-family:din456;
src: url(../fonts/din.ttf) format("truetype");
}


@font-face {font-family:din;
src: url(../fonts/avenirb.otf) format("opentype");
}

/*--------*/

* {outline:0; padding:0; margin:0;}

body {outline:0; padding:0; margin:0; font-family:avenirlt; overflow-x: hidden;   }
a {color:#0092d1;text-decoration:none}
a:hover {color:#53aa28; }

h1 { color:#fff; padding:.5em 0; background:#53aa28; font-size:1.7em; text-align: center;   font-family:avenirlt; font-weight:bold; }
h2 {font-size: 1.7em;  color:#797b7d; text-align: center; padding:.7em ; font-family:avenirlt; font-weight:bold;}
h3 {font-style:normal;  color:#797b7d;  font-size:1.2em;  padding: 0;   text-align: center;  }
h4 {font-size:1.3em; color:#fff; font-weight:normal; }

strong {color:#FFF;}
b {color:#0092d1; font-weight:bold; }

p {padding:1em; text-align: justify; color:#797b7d;  }

#contenido p i {margin-left:-25px;}

.telefono {font-size: 1.2em; line-height:30px;}
.nota { font-size:.8em; color:#666; }

ul { padding:1em;}
ul li { list-style: none; } 

i { color:#53aa28; }
.icono {font-size:5em; text-align: center; line-height:120px;}


.block {background:#0092d1; padding:.5em 0; color:#fff; width:100%; text-align:center; font-size:1.3em; line-height:1.7em; font-family:avenirlt; font-weight:bold; text-transform: uppercase; }
.block i {color:#000;}
.block p {padding:0; color:#fff;}
.block a {color:#fff;}
.block a:hover { color:#004372;}


#banner { width:100%; height:100%; background:rgba(0,0,0,0.85); position:fixed; z-index:3007;} #banner i { color:#fff;}
.cont_banner { width:800px; min-height:450px; color:#181818; background:url(../images/banner.jpg) no-repeat; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-225px; z-index:3009; border:solid 1px #fff;   }
.cont_banner h1 {color:#FFF; border-radius:0;}
.cont_banner li {font-size:1em; margin-bottom:-1px;}
.rad {margin:0 .2em 0 1em;}
.li3 {width:33%; float:left; } .li2 {width:66%; float:left; }
.cerrar { float:right;  margin-top:-2.5em; border-radius:.5em;  } 
#enviar2 {background-color:#0092d1; width:50%;  cursor:pointer; color:#fff; font-size:1em; padding:.7em 2em;  }
.cerrar_baner {width:100%; height:100%; position:fixed; z-index:3006; cursor:default;}
.logo_banner { position: absolute; right:0; margin-right:26px; margin-top:85px; width:230px;}
.cont_banner a:hover { text-decoration: underline; color:#fff;}
#cacepto { padding-top:.7em;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#B3B3B3;
    opacity: 1; /* Firefox */
}



#arriba { display: none; position: fixed; bottom:0; right: 30px; z-index: 99; background:#0092d1; color:#fff; cursor: pointer; padding: 10px; border-top-right-radius:10px; border-top-left-radius:10px; border:none; box-shadow:0 3px 3px 0 rgba(0,0,0,0.5); line-height:18px;}
#arriba:hover { background-color:#53aa284;  }

/*Slider*/

#slider { text-align:center; background:#fff; }
#slider img {width:100%;}
#slider a:hover {cursor:pointer;}

.btn-floating1:hover, .btn-floating2:hover {color:#0092d1;}
.btn-floating1, .btn-floating2  {width:35px;height:35px; line-height:38px; display:inline-block; color:#53aa28; background-color:#FFF; position:relative; overflow:hidden; z-index:1; padding:0; border-radius:50%; cursor:pointer; font-size:20px; top:-45px; box-shadow:0 3px 3px rgba(0,0,0,0.5);}

.btn-floating1 {float:left; margin-left:1em;}
.btn-floating2 {float:right; margin-right:1em;}


#slider h6 { color:#797b7d;  position:absolute;  font-weight:normal;  z-index:900;  margin-top:4em; margin-left: 5em; margin-right:5em;  text-align:center; width:20%;  padding:1em; text-transform: uppercase;   }
#slider h6 b, #slider h7 b { color:#0092d1;   text-transform: uppercase; font-family:avenirlt; font-weight:bold; }

#slider h7 { color:#797b7d; position:absolute;  font-weight:normal;  z-index:900;  margin-top:4em; margin-left: 5em;  margin-right:5em;  text-align:center; width:20%;  padding:1em; right:0; text-transform: uppercase;  }


@media screen and (min-width: 1200px){
#slider h7, #slider h6{ font-size:1.1em;}
}
@media screen and (max-width: 1200px){
#slider h7, #slider h6{ font-size:.9em; }
}

/*Slider*/


#header { width:100%; height:180px;  background: url(../images/fondo_header.svg )bottom center #fff;  position: fixed; z-index:3000; box-shadow: 0 3px 3px rgba(0,0,0,.3);  }  
#header img {height:120px; float: left; margin-left: 3em; margin-top:.5em;}


#top { background:#53aa28; color:#fff; text-align:right; width:100%;  padding:0;  z-index:501; position:relative; height:40px; font-size:1em;  }
#top ul { padding-top:.6em; padding-right:3em; }
#top li {display:inline; padding:.5em 0; }
#top a { padding:.8em 1em; color:#fff;  } #top a:hover i, #top a i, #top i { color:#fff !important;  }
#top a:hover { background:#0092d1; color:#fff; }

.menu-fixed {position:fixed; z-index:1000; width:100%; top:0; }

nav {height:200px; font-size:1em;  z-index:1000; text-transform: uppercase;  }
nav ul { text-align:center; color:#fff;  float:right; padding-top:30px;}
nav li { display:inline;    }
nav a { padding:.8em 1em; color:#797b7d; text-decoration:none; font-size:0.9em;  }
nav a:hover {color:#53aa28; border-top:1px solid #53aa28;} 

.btn_imp { background:#0092d1; color:#fff !important;  padding:.8em 1em; font-family:avenirlt; font-weight:bold; text-transform: uppercase; float: right; margin-top:1.2em;   } 
.btn_imp:hover, .btn_imp2:hover { background:#53aa28; border-top:0;  }

.btn_imp2 { background:#0092d1; color:#fff !important;  padding:.8em 1em; font-family:avenirlt; font-weight:bold; text-transform: uppercase; font-size:.8em;    } 


/* Dropdown Button */

.dropbtn { color:#797b7d; cursor: pointer; padding-bottom:1.5em; }

/* The container <div> - needed to position the dropdown content */

.dropdown {  display: inline-block; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content { display:none; position:absolute;   text-align:left; background: #fff;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); z-index: 200; margin-top:.7em; border-top:solid 1px #0092d1;  }

.dropdown-content a span {font-size:.7em !important; padding-left: 1.5em;}

.dropdown-content a { background-color:#fff; text-decoration:none; display:block; ;  margin-right:0 !important; padding:1.3em 0 !important; font-size:12px; width:300px; border-bottom:solid 1px #7F7F7F; }

.dropdown-content a:hover {border-bottom: 1px solid #ccc; background:#0092d1; color:#fff; border-top:0; }
.dropdown:hover .dropdown-content { display: block;}



/*--------*/

#contenido { width:100%; padding-top:180px;  } 

.fotos, .titulos, .derecha, .fondo  { opacity:0; }

.foto { width:100%;}
 
.columna {width:1004px; margin:0 auto;  }
.columna-2 {width:478px; min-height:50px; margin-left:12px; float:left; margin-bottom:1em; }
.columna-3 { width:322px; min-height:50px; margin-left:12px;  float:left; margin-bottom:2em; } .columna-3 p {text-align: center;}
.columna-4 {width:239px; min-height:50px;  float:left; margin-bottom:2em;  }
.columna-5 {width:160px; min-height:50px; float:left; }
.columna-3-4 { width:717px; float: right; margin-right:12px; }
.columna-1-4 { width:251px; float: left; margin-left:12px; }


.bg-a {width:100%; min-height:auto; background: url(../images/fondo2.jpg); background-size:100%; border-top:5px solid #444;  } .bg-a p { color:#ccc;}
.bg-b {width:100%; min-height:auto;  }
.bg-c {width:100%; min-height:650px; background:#000 url(../images/bg-c.jpg) center no-repeat fixed;   }
.bg-d {width:100%; min-height:650px; background:#ececec url(../images/bg-d.jpg) center no-repeat fixed;   }


.divisor { width:100%; height:30px; background:url(../images/sombra.png) repeat-x; z-index:100; }

/*--- secciones -----*/

#quienessomos, #soluciones, #promocion, #contacto { width:1004px; height:100%; clear:both; margin:0 auto;  padding:0 2em;   }

.columna-3 span, .big span, .big-m span {font-size:4em; color:#00006b; }
.big p, .big-m p {text-align: center !important;}


.divisiones {width:468px; min-height:150px;}

.big:hover p, .divisiones a:hover h3 { 
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}


.columna-1-4 ul { padding:0; margin:0; width:251px; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.columna-1-4 ul li { width:auto;  background:#004372;  border-bottom:1px solid #fff; color:#fff; padding: 1em; }
.columna-1-4 a { color:#fff;  }	
.columna-1-4 ul li:hover {background:#71a341;  }	

.exito {width:45%; float:left; margin:2%; }


/*--- clientes banner -----*/


.columna-cliente { width:1004px; min-height:100px;  padding:0; clear:both; overflow:hidden; }
.cliente { width:167px; margin-left:-.28em; }



/*---contacto-----*/


#contacto table {border:none; color:#FFF; margin:0; margin-bottom:3em;}
#contacto table td {border:none; margin-top:1em; }
.text-form { width:100%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em; margin-top:-1px; }
.text-form2 { width:98%; padding:1em 0; font-size:1em;  border:solid #ccc 1px; padding-left:.5em;}
.link_extra {background-color:#4e74b9; padding:.5em; margin-top:1em;}


iframe { border:solid 1px #0092d1;}

.caja {	border:solid #ccc 2px; height:19px; overflow:hidden; width:100%; position:relative; padding:0 .5em; background:#fff;}
select { border: none; font-size:14px; width:100%; color:#666;}
select:focus{ outline: none;}
.caja::after{content:"\025be"; display:table-cell; padding-top:7px; text-align:center; width:35px; height:30px; background-color:#fff; position:absolute; top:0; right:0px;	pointer-events:none; cursor: pointer;}

.enviar { padding:0.5em 2em; cursor:pointer; color:#fff; font-size:1em; background-color:#444; text-align:center; }
.enviar:hover { background-color:#0092d1;  }


#footer { width:100%;  min-height:100px; clear:both; text-align:left !important;  font-size:1em;  line-height:20px; }
#footer p { text-align:left; color:#797b7d;}
#footer a, #footer-m a {color:#797b7d;  }
#footer a:hover {color:#0092d1; }
#footer .columna { padding-bottom:0; }


#footer, #footer-m {background:url(../images/fondo_footer.svg) top center no-repeat #D5D5D5 ; border-top:5px solid #444;  }


#enviar3 {  cursor:pointer; color:#fff; background:#1a9acf; font-size:1em; border:none; padding:.5em 1em; }
#enviar3:hover {background:#004372;}
#cenviar { width:20%;  float:left; text-align: left;  }

#footer ul {margin:0; padding:0;}
#footer ul li { display:inline-block;  }
.foot_nav li {border-left: solid 1px #ccc; padding:.3em 1em;}




/* Social Footer */

.icon-button {background-color:#0092d1; border-radius: 3em; cursor: pointer; display:inline-block; font-size:1em; width: 3em; height:3em; line-height:3em; margin: 0 5px; position: relative; text-align: center;
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; }

/* Circle */

.icon-button span {border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s;  -o-transition: all 0.3s; transition: all 0.3s; width: 0; background-color:#53aa28; }
	
.icon-button:hover span { width: 3em; height: 3em; border-radius: 3em; margin: -1.5em; }

/* Icons */
.icon-button i { background: none; color:#fff; width: 3em;  height: 3em; left: 0; line-height: 3em; position: absolute; top: 0; z-index: 10;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.icon-button i:hover {color:#fff;}

/*--------*/

/*Social Menu*/

.social { position: fixed; right: 0px; top:240px; z-index:3005; }
.social ul {list-style:none; text-align:right; padding:0; margin:0;}
.social ul li a {display: inline-block; color:#fff; background:#0092d1; padding: 20px 15px; text-decoration: none; animation-direction: normal; -webkit-transition:400ms ease;-o-transition:400ms ease; transition:400ms ease;
border-bottom:solid 1px #D7D7D7; box-shadow:0 3px 5px rgba(0,0,0,.4);}
.social ul li a:hover {background:#53aa28; padding: 18px; font-size:large}
	
	
/*Contenido movil*/

#header_mob { top:0; left:0; width:100%; background:#53aa28; position:fixed; z-index:2000; padding:0; margin:0;}

.header_nav { width:100%; left:-100%;  top:51px; border:none; position:fixed; z-index:2000; }
.header_nav ul { list-style:none; width:100%; height:100%; padding:0 !important; margin:0 !important; }

.header_nav ul li {display:block; float:none; font-size:.9em; text-align:left; border-bottom:1px solid #fff; width:100%; padding:0 !important ; border-right:none; }
.header_nav ul li a { color:#fff; padding:.7em; display:block; text-decoration:none; background:#0092d1; font-weight:normal; border-left:none;  }
.header_nav ul li span { margin-right:7px; margin-left:10px; color:#fff; }

.sub span {padding-left:1.5em !important;}

.menu_bar { display:block; width:100%; color:#fff; cursor:pointer; border-bottom:1px solid #ccc; }
.menu_bar .bt-menu { display:block; padding:12px;  color:#fff; text-decoration:none; font-weight:normal; font-size:20px; }


#top-m { background:#0092d1; background-size:auto 100%;  text-align:center; width:100%;  padding:0;  z-index:501;  font-size:1em; border-bottom:5px solid #ccc; color:#fff;  }
#top-m ul { padding-top:.9em;  }
#top-m li { padding:.5em 0; }
#top-m a { padding:1.1em 1em; color:#fff;  }
#top-m i {color:#fff;}


/*-------------*/

#contenido-m { width:100%; overflow-x: hidden;  }

#contenido-m p {text-align: left;}

#inicio-m, #soluciones-m, #quienes-m, #promocion-m,  #contacto-m { width:100%; min-height:200px; clear:both; padding-top:40px;  }


#inicio-m {background:url(../images/fondo_header.svg) 0px 50px no-repeat;}
#soluciones-m {text-align: center;}

.cliente-m {width:40% !important; margin:5%; float:left; }

.logo-m { margin:.5em 25%; width:50%;  }

.columna-m {width:95%; margin-left:2.5%; }

.foto-m {width:100%;}



/*-------------*/
 

#footer-m {width:100%; clear:both; padding:2em 0; text-align: center;  } 
#footer-m p { text-align: center;}
/*-------------*/


@media (max-width:600px){.hide-small{display:none!important}}
@media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}
@media (min-width:993px){.hide-large{display:none!important}}
.animate-fading{-webkit-animation:fading 4s infinite;animation:fading 4s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{-webkit-animation:opac 1.5s;animation:opac 1.5s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.animate-left{position:relative;-webkit-animation:animateleft 0.4s; animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-1000px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-1000px;opacity:0} to{left:0;opacity:1}}

.animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}