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

html{ height:100%;}
body{ margin:0 0; padding:0 0; height:100%; font-family:Arial, Helvetica, sans-serif; background: url(../imagenes/fondo.jpg); }
* {margin:0; padding:0;  outline: 0;}
a {outline:none; text-decoration:none; color:#FFFFFF; cursor:pointer;}
ul{ list-style:none;}
h1{ font-size:35px; font-family: 'Roboto', sans-serif; color: #176BCC;font-weight: lighter;}
h1 span{ color: #ff6808;}
h2{ font-size:30px; font-family: 'Roboto', sans-serif; color:#555; line-height:30px;}
h3{ font-size:19px; font-family: 'Roboto', sans-serif;  color:#555; }
p { color:#606060; text-align: justify; font-size:14px;}

/*------------------------estilos generales----------------------------------- */


.main{width:960px; margin:0 auto; position: relative; }
body.frame{background: none;}

.clearfix::after { content:" "; display:block;  clear:both;}

/*------------------------HEADER------------------------------------ */

header{width:100%; height: 410px;}
.on-header{position:relative; height: 360px;margin-top: -360px;}
.lineatop{width: 100%; height: 80px; background:#061a29; margin-top: 50px;}
.lineat{width:960px; height: 80px;margin:0 auto;background: #061a29;position: relative;}
#logo{ width:192px; height:192px; background:url(../imagenes/logo.png); float: left; margin-top: -50px; opacity: 0.99 !important}
.banner {width:100%;height:460px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;margin-top: -192px;
float: left;
z-index: -2;
position: relative;}
.banner img{width: 100%;}
.img-product{float: left; background: orange; width: 300px;height: 250px; position: absolute; top: 150px}
.uno{left: 0}
.dos{left: 330px}
.tres{right: 0}

/*------------------------BANNER------------------------------------ */



nav{width:680px; height:50px; margin-top: -15px; float: right;}
nav ul{ margin:0 auto;padding-top:15px; font-size:15px;font-family: 'Roboto Condensed', sans-serif;}
nav ul li img {float: left; margin-top: 5px;}
nav ul li a{ float:left;padding: 28px 20px; height: 24px;color:#D2D2D2;transition: 0.3s;}	
nav ul li:first-child a{ border-left:0;}  
nav ul li a:hover{ color:white; background: #f34500;}
li.active a{ color:white; background: #cb3504;}


#banner-cont{width:864px;height:285px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;}
#barrita{ width:90%; height:15px; margin:0 5%; background:url(../imagenes/barrita.png) repeat-x;}
.cuerpo-home1{ width:95%; height:355px;padding:45px 0 0 45px; float:left;}
.cuerpo-home2{ float:left;width:95.4%; height:328px;padding:40px 0 45px 45px; border-top:2px solid #C60000;
	  background:red;
	  background: linear-gradient(bottom,#C50000,red);
	  background:-webkit-linear-gradient(bottom,#C50000,red);
	  background:-moz-linear-gradient(bottom,#C50000,red);
	  background:-o-linear-gradient(bottom,#C50000,red);

}

.cuerpo{ min-height:430px; }
.text-box01{ width:500px; height:300px; float:left; margin:60px 0 0 0;}
.text-box01 p span{ padding:10px; background:#0072C5; border-radius:3px; margin:20px 0 0 0px; float:left;}
.text-box01 p span:hover{background:#33A9FF;}
.fb-box{width:400px; height:350px; float:left; margin:60px 0 0 60px; }
.fb-box h4{ text-align:center; padding:5px 25px; background:#545454;color:white; font-size:14px; }
.text-box02{width:350px; height:350px; float:left; margin:60px 0 0 60px;}
.text-box02 p{padding: 20px; background:#D2D2D2; border: 2px solid #FFF;margin-top: -5px;}


/*------------------------EMPRESA------------------------------------ */

.cuerpo-empre{ height:650px; }
.text-empre{ width:480px; }
.text2-empre{width:300px; margin:50px 0 0 -40px;}
.text2-empre img{width:500px; }
.mision{ float: left;padding: 30px; margin: 60px 20px 0px 0px; width: 400px; height: 120px; background:#DDD;border-radius: 7px; }



/*------------------------PRODUCTOS------------------------------------ */

.box-product01{ width:500px; height:750px; float:left; margin:60px 0 0 0;}
.cuerpo-produc {height: 690px;}
.content-iframe{ margin-top:50px;}
.botonera{ width:300px; height:600px; position:fixed;}
.botonera ul a li{ padding:10px 10px; background:#9CDBF5; border-radius:3px; font-size:13px;width: 250px; margin-bottom:10px;}
.botonera ul a li { color:#000;}
.botonera ul a li:hover{ color:#000;background:#39B2E4;}
aside{ width:546px; height:1500px; position:absolute; right:0;}
.ribbon{ width:546px; height:130px; background:url(../imagenes/ribbon.png) no-repeat;}
.circle{border-radius: 3px; width:165px; height:165px;float:left; margin: 50px 20px 20px 50px; border: solid 6px #d5d5d5;position: relative;
z-index: 5;}
.circle img{width: 100%}
.ribbon h2{padding: 50px 0 0 0;color: #FFF;width: 550px;}
.iframe-text{ width:100%; min-height:400px; background:#F2F2F2; box-shadow:inset 0px 0px 3px rgba(0,0,0,0.3); position:relative; margin-bottom: 50px;}
.iframe-text p{padding: 40px; line-height:20px;}
.iframe-text p span { padding:10px 30px;background:#C30; border-radius:3px; color:white;position: absolute;bottom: 70px; left:150px;}
.iframe-text p span:hover{background:#982803;}
.cont{margin-top: -60px }
#bal_tipo1{margin-top:}
.bottom{ width:100%; height:15px; background:#F60;}



/*------------------------CONTACTO------------------------------------ */


.box-contact01{ width:500px; height:500px; float:left; margin:60px 0 0 0;}
.box-contact02{width:350px; height:540px; float:left; margin:60px 0 0 60px;}
.box-contact02 p{background: #b6d8b6;border-radius: 3px; padding: 10px;margin-top: -5px;}
.form-button{ background:#33A9FF; width:100%; height:40px; color:#FFF; border:0px; cursor:pointer; cursor:hand; font-size: 15px; border-radius:3px;}
.form-button:hover{ background:#0072C5;}
.form-input{background-color:#FFF; border: 1px solid #13548E ;height:35px; width:94%; border-radius:5px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333; margin-bottom:20px; padding:0 3%;}
.form-message{background-color:#FFF; border: 0px; border-radius:5px; width:94%; height:150px ;font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#333;overflow:hidden;margin-bottom:20px;padding:2% 3%;border: 1px solid #13548E ;}
.form-input:focus, .form-message:focus, .form-input:hover, .form-message:hover{border: 1px solid red ;}






/*------------------------GALERIA----------------------------------- */

.box-gal01{ width:500px; min-height:550px; float:left; margin:60px 0 0 0;}
.box-gal01 ul{ width:950px; height:500px; }
.box-gal01 ul li{ float:left; width:180px; height:180px; margin:15px 15px 15px 28px; overflow:hidden;
display: inline-block;
padding: 4px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;}

.box-gal01 ul li p{background: none repeat scroll 0% 0% #000;padding: 10px 20px;margin: -40px 0 0 0;position: relative;text-align: center;color: white;opacity: 0.85; 
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
position: absolute;
margin-top: 143px;
width: 140px;
}
.box-gal01 ul li img{width: 100%}
.box-gal01 ul li:hover p{padding: 20px 20px;margin: 123px 0 0 0;}
.titulo p{padding: 5px 10px; background: black; opacity: 0.3;}

/*------------------------FOOTER------------------------------------ */

footer{width:100%; height:300px; background-color:#010F1A; font-size:12px; color:#999;line-height: 18px;}
.on-footer1{width:960px; height:260px; background-color:#010F1A; float: left;}
.on-footer2{width:100%; height:60px; text-align:left; background-color:#08222a; float: left; position: relative;}
.social{width: 270px; height: 120px; float: left; padding: 30px}
.contacto{width: 400px; height: 120px;float: left;padding: 30px;margin: 20px 0 0 40px;}
.social p, .contacto p{color: #ADAAAA; line-height: 25px;}
.on-social{ width: 40px;  background: blue; float: left; margin: 10px 20px 0 0 ;}
.face{ background: url(../imagenes/face.png);height: 39px; background-position: 0 -40px;}
.face:hover{background-position: 0 0px;}
.you{background: url(../imagenes/you.png);height: 39px;background-position: 0 -40px;}
.you:hover{background-position: 0 0px;}
.twit{background: url(../imagenes/twiter.png);height: 40px;background-position: 0 -39px;}
.twit:hover{background-position: 0 1px;}
.on-footer1 img{float: left;margin: 8px 20px 0 0;}
footer a{color:#999;}
footer a:hover{color:white;}
#mail{ padding:10px; background:#0067B3; border-radius:3px; color:white; position:absolute; right:8px; top:10px;}
#mail:hover{color:yellow;}
.cierre{background: #08222a;height:50px;padding-top: 10px;}
.mapa{width: 450px;height: 200px; background: #CCC; float: left;margin-top: 30px;}
#map_canvas{width: 100%; height: 200px;}