<style type="text/css" >

/*********************************/
/********* FUENTE PARA LOGO*******/
@import url('http://fonts.googleapis.com/css?family=Impact');
/*********************************/

header,  footer, aside, nav{
    display: block;
    position: relative;
    float:left;
    height: 40px;
}

body {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover;
  background-attachment: fixed;
  background-color: white;
}
h1{
   font-size: 22px;
   color:#FE642E;
}

h2{
   font-size: 19px;
   color:#FE642E;
}

.pie_contactenos{
   font-size: 18px;
   color:#FE642E;
}

/*********************************/
/***********CABECERA**************/
/*********************************/
.cabecera_h1 {
    font-family: arial;
    color: white;
    font-size: 19px;
    margin-left: 130px;
}

.cabecera {
    font-family: Impact;
    color: white;
    font-size: 40px;
    text-shadow: 0 0 0.2em #ff4a1a;
    width: 1024px;
    height: 85px;
    background-color: #FE642E; /*orange*/
    margin: auto;
    position: relative;
    top:5px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px 1px #38466F;
    -moz-box-shadow: 0px 1px 5px 1px #38466F;
    -khtml-border-radius: 0px 1px 5px 1px #38466F;
    box-shadow: 0px 1px 5px 1px #38466F;
}



.brujula{
  top: -45px;
  width: 900px;
  height: 10px;
  margin: auto;
  position: relative;
}

.ruta_brujula{
  top: -40px;
  width: 900px;
  height: 10px;
  margin: auto;
  left:60px;
  position: relative;

  color:white;
  font-size: 20px;
  text-shadow: 0 0 0.2em #ff4a1a;
}


.contenido_principal{
	width: 1024px;
	margin: auto;
}

#contenido_principal_menu{
    float: left;
    position: relative;
    left: 10px;
    width: 250px;
    height: 400px;
    margin-top: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px 1px #38466F;
    -moz-box-shadow: 0px 1px 5px 1px #38466F;
    -khtml-border-radius: 0px 1px 5px 1px #38466F;
    box-shadow: 0px 1px 5px 1px #38466F;
}

.titulo_menu_fondo{
    top: 0px;
    left: 0px;
    float: left;
    position: relative;
    width: 100%;
    height: 30px;
    background-color: #FE642E;
    color: white;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px 1px #38466F;
    -moz-box-shadow: 0px 1px 5px 1px #38466F;
    -khtml-border-radius: 0px 1px 5px 1px #38466F;
    box-shadow: 0px 1px 5px 1px #38466F;
}

.titulo_menu_fondo h1{
  margin-top: 0px;
  top: 0px;
  font-size: 20px;
  color:white;
}

.menup li{
  float: left;
  position: relative;
  width: 280px;
  left: 0px;
  top: 0px;
  list-style: none;
}

.menup li a:link{
    text-decoration: none;
    color: black;
}

.menup li a:hover{
  color: #FE642E;
  font-weight: bold;
}

.li_ico{
  color: #FE642E;
}

#contenido_principal_div{
    top: 0px;
    margin-top: 0px;
    margin-left: 30px;
    float: left;
    position: relative;
}

.fondo_principal {
  position: absolute;
  left: 0px;
  right: 0px;
  width: 728px;
  height: 350px;
  float: left;
}

.img_principal{
height: 350px;
width: 728px;
border-style: solid;
border-color: #FE642E;
}

.img_principal2{
height: 500px;
width: 728px;
border-style: solid;
border-color: #FE642E;
}

.saltolinea {
clear:both;
}

.img_principal_detalle{
float: left;
text-align: justify;
}

.colorCabTitulo{
  background-color: #FE642E;
  color: white;
}

.producto_titulo{
  height: 20px;
  width: 728px;
  text-align: center;
}

.producto_titulo_2{
  height: 20px;
  width: 100px;
  margin: auto;
}

td
{
    text-align: center;
}

.producto_img{
  float: left;
  width: 225px;
  height: 188px;
  border-style: solid;
  border-color: #FE642E;
}
.producto_detalle{
  float: left;
  position: relative;
  top: 0px;
  width: 490px;
  height: 188px;
  border-style: solid;
  border-color: #FE642E;
}

.proforma_principal {
  position: absolute;
  left: 0px;
  width: 728px;
  float: left;
}

.perno{
position: absolute;
z-index: 2;
float:left;
}

.per01{
  left:10px;
  top:10px;
}

.per02{
  right:10px;
  top:10px;
}

.per03{
  left:10px;
  bottom: 10px;
}

.per04{
  right:10px;
  bottom: 10px;
}

footer {
    position: relative;
    /* Altura total del footer en px con valor negativo */
    top:30px;
    /* Altura del footer en px. Se han restado los 5px del margen
       superior mas los 5px del margen inferior
    */
    height: 40px;
    padding:5px 0px;
    clear: both;
    /*background: #286af0;*/
    text-align: center;
    font-size: 16px;
    color: #FE642E;
    padding-bottom: 40px;
}

.pie{
    top: 300px;
    left: 35px;
    position: relative;
    width:300px;
    margin:0 auto;
    color: #FE642E;
}

#video{
    position:relative;
  	width: 900px;
  	margin:0 auto;
    margin-top: 0 auto;
  	z-index: -1;
  	overflow: hidden;
    background-attachment:fixed;
    background-size: auto;
    opacity: 0.7;
    background-color: orange;
    -webkit-border-radius: 15px;
  	-moz-border-radius: 15px;
  	border-radius: 15px;
  	-webkit-box-shadow: 0px 1px 5px 1px #38466F;
  	-moz-box-shadow: 0px 1px 5px 1px #38466F;
  	box-shadow: 0px 1px 5px 1px #38466F;
}

.vidContain {
    width:900px; height:600px;
    position:relative;
    display:inline-block;
    left:-30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px 1px #38466F;
    -moz-box-shadow: 0px 1px 5px 1px #38466F;
    box-shadow: 0px 1px 5px 1px #38466F;

}
.vid {
    position: absolute;
    opacity: 0.6;
    margin-top: 0 auto;;
    width: 100%; height: 100%;
    z-index: 0;
    background-color: black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px 1px #38466F;
    -moz-box-shadow: 0px 1px 5px 1px #38466F;
    box-shadow: 0px 1px 5px 1px #38466F;
}

.content {
    position:relative;
    top: 50px;
    left: 600px;
    width: 300px;
    background: transparent;
    color:white;
    z-index: 1;
}

.content figure {
    position:relative;
    top: 0;
    left: 0;
    z-index: 1;
    margin-left: 15px;
    float:left;
    margin-top: 0;
    padding: 0;
}

.content img {
    position:relative;
    z-index: 2;
}

.content figcaption {
    color: white;
    text-shadow: 0 0 0.2em #ff4a1a;
    width: 40px;
    left: 0;
}

#map {
    /*position:relative;*/
    margin: 0 auto;
    /*top: 0px;*/
    width: 300px;
    height: 250px;
    z-index: 0;
    /*float: left;*/
    border-style: solid;
    border-color: #FE642E;
}

#map2 {
    position: relative;
    left: 30px;
    width: 300px;
    /*border-style: solid;
    border-color: green;*/
}

#ubicanos2 {

    /*border-style: solid;
    border-color: yellow;*/
}

.pie_map{
    float: left;
    position:relative;
    left: 30px;
    width:300px;
    margin:0 auto;
    z-index: 1;
    color: #FE642E;
}

.contenido_contactenos{
  float: left;
  width: 400px;
}

.orange-flat-button {
  position: relative;
  /*vertical-align: top;*/
  width: 80px;
  height: 20px;
  padding: 10px;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: orange;/*#f39c12;*/
  border: 0;
  /*border-bottom: 2px solid #e8930c;*/
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #e8930c;
  box-shadow: inset 0 -2px #e8930c;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
.orange-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*CATALOGO*/
.catalogo{
  position:relative;
  top: 0;
  left: 0;
  /*background-color: orange;*/
  width:100%;
  height: 500px;
  overflow:auto;
}

.fondo_figure{
  position:relative;
  top: 0;
  left: 20px;
  background-color: orange;
  width:160px;
  height:200px;
  float: left;
  border-radius: 15px;
  -webkit-box-shadow: 0px 1px 5px 1px #38466F;
  -moz-box-shadow: 0px 1px 5px 1px #38466F;
  -khtml-border-radius: 0px 1px 5px 1px #38466F;
  box-shadow: 0px 1px 5px 1px #38466F;
}

.catalogo figure{
    position:relative;
    top: 0;
    left: 20px;
    z-index: 1;
    margin-top: 10px;
    margin-left: -160px;
    padding: 0;
    width:160px;
    height:200px;
    background-color: transparent;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    float: left;
}

.catalogo header {
    color: black;
    text-shadow: 0 0 0.2em #ff4a1a;
    text-align: justify;
    margin-left: 10px;
    width:100%;
    height: 15%;
    max-width: 90%;
    z-index: 1;
}

.catalogo img{
  margin-top: 20px;
  margin-left: 15px;
  width:85%;
  height: 60%;
  background-color: transparent;
  z-index: 2;
}
.catalogo figcaption {
    color: white;
    text-shadow: 0 0 0.2em #ff4a1a;
    text-align: justify;
    width:100%;
    height: 20%;
    margin-left: 10px;
    max-width: 90%;
}

.img_icono_calibrador {
  position: relative;
  left:0;
  top:0;
  width: 48px;
  max-width: 48px;
  height: 32px;
  max-height: 32px;
  float: left;
}

.block{
  float: left;
  top: 0;
  left:0;
  width: 850px;
  height: 450px;
  margin-left: 0;
  position: absolute;
}

.sub_menu_catologo{
  float: left;
  top:60px;
  left:0;
  width: 200px;
  position: relative;
}

.qsomos{
    float: left;
    position: absolute;
    width: 690px;
    height: 400px;
    margin-top: 360px;
    border-color: #FE642E;
    border-style: solid;
    padding-left: 20px;
    padding-right: 20px;
}

#topBlock {
    display:table;
    width: 722px;
    height: 345px;
    /*border-style: solid;
    border-color: pink;*/
}
#topBlock section { vertical-align:top; display:table-cell; }

</style>
