/*------------------------------------*\
    $INDICE
\*------------------------------------*/

/**
 * DEFAULT...........Estilos basicos
 * AUXSILIARES...........Espacios, floats, etc
 * GRILLAS...........Una serie de clases para ayudar
 * DEFAULT...........Estilos basicos
 * LAYOUT...........Estilos para presentacion
 * FUENTES
 * MENU PRODUCTOS.........ESTILOS DEL MENU LATERAL DE PRODUCTOS
 * HOW IT WORKS...........Estilos para presentacion
 */

/*------------------------------------*\
    DEFAULT
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
embed,
object,
video {
  border: 0;
  max-width: 100%;
}

html {
  padding: 0;
  margin: 0;
}

.whatsapp-float {
  position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 1000;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

body {
  color: #646065;
  background: #fff;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

a {
  color: #d74613;
  text-decoration: none;
  outline: none;
}

a:focus {
  outline: none;
  -moz-outline-style: none;
  border: 0px;
}

a img {
  border: 0px;
}

a:hover,
a:active,
a:focus {
  color: #fff;
  outline: none;
}

ul {
  list-style-type: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ol {
  margin-left: 20px;
}

ol li {
  padding: 5px 0;
}
a:visited {
  outline: none;
}

textarea {
  resize: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0px;
}

table {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/*------------------------------------*\
    AUXSILIARES
\*------------------------------------*/

.space-25 {
  padding-top: 25px;
}

.row-space {
  padding: 10px;
}

.row .row-space {
  margin-top: 15px;
}

.color-01 {
  background-color: #e4e3e3;
}

.borde {
  border-bottom: #d06415 dotted 1px;
}

.parrafo {
  font-size: 15px;
}

/*------------------------------------*\
    GRILLAS
\*------------------------------------*/

.row {
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
  min-height: 1px;
  position: relative;
  padding: 0 10px;
}

.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
  /*padding: 0 5px;*/
  margin: 0 0 0 3%;
  float: left;
  min-height: 1px;
}

.first {
  margin: 0;
}

.codigos span {
  font-size: 30px;
  font-weight: 600;
  font-family: "open_sans_condensedbold";
  color: #d06415;
  clear: both;
  width: 100%;
  float: left;
  padding-top: 10px;
}

/*SIEMPRE PONEMOS EL PADDING A LA IZQUIERDA Y LO QUITAMOS CON FIRTS-CHILD PORQUE FUNCIONA EN I8 - LAST-CHILD NO*/
[class*="col-"]:first-child {
  padding-left: 0;
  margin-left: 0;
}

[class*="col-"]:last-child {
  padding-right: 0;
  margin-right: 0;
}

.col-1 {
  width: 5.5%;
}
.col-2 {
  width: 14%;
}
.col-3 {
  width: 22.5%;
}
.col-4 {
  width: 31%;
}
.col-5 {
  width: 39.5%;
}
.col-6 {
  width: 48%;
}
.col-7 {
  width: 56.5%;
}
.col-8 {
  width: 65%;
}
.col-9 {
  width: 73.5%;
}
.col-10 {
  width: 82%;
}
.col-11 {
  width: 90.5%;
}
.col-12 {
  width: 99%;
}

/*------------------------------------*\
    FUENTES
\*------------------------------------*/

@font-face {
  font-family: "open_sansCnLtIt";
  src: url("../fonts/OpenSans-CondLightItalic-webfont.eot");
  src: url("../fonts/OpenSans-CondLightItalic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/OpenSans-CondLightItalic-webfont.woff") format("woff"),
    url("../fonts/OpenSans-CondLightItalic-webfont.ttf") format("truetype"),
    url("../fonts/OpenSans-CondLightItalic-webfont.svg#open_sansCnLtIt")
      format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanscondensed_light";
  src: url("../fonts/OpenSans-CondLight-webfont.eot");
  src: url("../fonts/OpenSans-CondLight-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/OpenSans-CondLight-webfont.woff") format("woff"),
    url("../fonts/OpenSans-CondLight-webfont.ttf") format("truetype"),
    url("../fonts/OpenSans-CondLight-webfont.svg#open_sanscondensed_light")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sans_condensedbold";
  src: url("../fonts/OpenSans-CondBold-webfont.eot");
  src: url("../fonts/OpenSans-CondBold-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/OpenSans-CondBold-webfont.woff") format("woff"),
    url("../fonts/OpenSans-CondBold-webfont.ttf") format("truetype"),
    url("../fonts/OpenSans-CondBold-webfont.svg#open_sans_condensedbold")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

/*-------------ICON FONTS---------------*/

@font-face {
  font-family: "resiflex-font";
  src: url("../fonts/resiflex-font.eot?32103646");
  src: url("../fonts/resiflex-font.eot?32103646#iefix")
      format("embedded-opentype"),
    url("../fonts/resiflex-font.woff?32103646") format("woff"),
    url("../fonts/resiflex-font.ttf?32103646") format("truetype"),
    url("../fonts/resiflex-font.svg?32103646#resiflex-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "resiflex-font";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-mail:before {
  content: "\e800";
} /* '' */
.icon-right-open-big:before {
  content: "\e801";
} /* '' */
.icon-left-open-big:before {
  content: "\e802";
} /* '' */
.icon-angle-left:before {
  content: "\e803";
} /* '' */
.icon-angle-right:before {
  content: "\e804";
} /* '' */
.icon-angle-up:before {
  content: "\e805";
} /* '' */
.icon-angle-down:before {
  content: "\e806";
} /* '' */
.icon-home:before {
  content: "\e807";
} /* '' */
.icon-file-pdf:before {
  content: "\e808";
} /* '' */
.icon-down:before {
  content: "\e809";
} /* '' */
.icon-menu:before {
  content: "\e80b";
} /* '' */
.icon-clock:before {
  content: "\e80c";
} /* '' */
.icon-phone:before {
  content: "\e80d";
} /* '' */
.icon-fax:before {
  content: "\e80e";
} /* '' */
.icon-cancel-1:before {
  content: "\e80f";
} /* '' */
.icon-down-open-mini:before {
  content: "\e810";
} /* '' */
.icon-left-open-mini:before {
  content: "\e811";
} /* '' */
.icon-right-open-mini:before {
  content: "\e812";
} /* '' */
.icon-up-open-mini:before {
  content: "\e813";
} /* '' */
.icon-location:before {
  content: "\e814";
} /* '' */
.icon-attention-1:before {
  content: "\e815";
} /* '' */

/*------------------------------------*\
    LAYOUT
\*------------------------------------*/

h1 {
  font-family: "open_sanscondensed_light";
  font-size: 40px;
  text-transform: uppercase;
  line-height: 35px;
  font-weight: normal;
  margin-bottom: 20px;
}

/*h2{
	font-family: 'open_sans_condensedbold';
	font-size: 30px;
	text-transform: uppercase;
	line-height: 35px;
	font-weight: normal;
}
*/
.producto h2 {
  font-family: "open_sanscondensed_light";
  font-size: 40px;
  text-transform: uppercase;
  line-height: 35px;
  font-weight: normal;
  margin-bottom: 20px;
  color: #646065;
}

h2 strong {
  color: #d74613;
}

h3 {
  font-family: "open_sanscondensed_light";
  font-size: 30px;
  font-weight: normal;
}

h4 {
  font-family: "open_sanscondensed_light";
  font-size: 20px;
  font-weight: normal;
}

h5 {
  font-family: "open_sanscondensed_light";
  font-size: 20px;
  font-weight: normal;
  color: #d06415;
  line-height: 30px;
  background: #e5e5e5;
  text-transform: uppercase;
}
.breadcrumb {
  float: left;
  font-family: "open_sanscondensed_light";
  text-transform: uppercase;
  height: 30px;
  font-style: normal;
  color: #fff;
  line-height: 20px;
  background: rgb(40, 40, 40); /* IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  background-color: rgba(40, 40, 40, 0.7);
  position: relative;
  top: -30px;
  display: block;
  z-index: 5;
  padding: 5px;
  width: 100%;
  left: -30px;
}

.form-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.breadcrumb a {
  color: #cec9c6;
  padding: 0 8px;
}

.breadcrumb a:hover {
  color: #ff7600;
  padding: 0 8px;
}

.breadcrumb span {
  padding: 0 8px;
}

.breadcrumb a:after {
  content: "|";
  color: #cec9c6;
  position: absolute;
  top: 3px;
  height: 12px;
  margin: 0 4px;
}

.subrayado {
  content: "";
  border-bottom: 2px solid #636363;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 15px;
  display: block;
  width: 135px;
}

.subrayado:before {
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 32px;
  z-index: 5;
  background-color: #cc3300;
}

.underline {
  content: "";
  border-bottom: 1px dotted #636363;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 15px;
  display: block;
  width: auto;
  color: #d74613;
}

.underline:before {
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 32px;
  z-index: 5;
  background-color: #cc3300;
}
.amarillo:before {
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 32px;
  z-index: 5;
  background-color: #fac11c;
}
header {
  height: 200px;
  width: 100%;
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 0.61) 44%,
    rgba(0, 0, 0, 0.56) 49%,
    rgba(0, 0, 0, 0) 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+44,000000+49&1+8,0+100 */
  position: absolute;
  top: 0;
  z-index: 100;
}

nav {
  display: block;
  height: 80px;
  float: right;
}

nav ul li {
  font-family: "open_sanscondensed_light";
  float: left;
  font-size: 18px;
}

nav ul li a {
  display: block;
  padding: 0 10px;
  height: 70px;
  line-height: 70px;
  width: 110px;
  text-align: center;
  color: #fff;
  font-weight: normal;
  position: relative;
  padding-bottom: 8px;
  transition: 0.3s;
}
nav ul li a:hover,
.activo {
  background: #d74613;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  position: relative;
  /*border-bottom: 2px solid #0F0;*/
}

nav ul li a:hover:after {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  bottom: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #282828 transparent;
}
nav .activo:before {
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  bottom: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #282828 transparent;
}
.logo {
  float: left;
  margin-top: 25px;
}

section {
  background: #efefef;
  width: 100%;
  padding-bottom: 50px;
  /*overflow: hidden;
	position: relative;*/
}

article {
  padding: 20px 0px 20px 0;
  float: left;
  width: 100%;
  font-family: "open_sanscondensed_light";
}

article p {
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 5px;
  color: #282828;
}

article h2,
.su-consulta h3 {
  font-family: "open_sanscondensed_light";
  font-size: 30px;
  line-height: 50px;
  font-weight: normal;
  color: #d74613;
}

article h4 {
  color: #d74613;
  line-height: 45px;
}

.row-space h3 {
  color: #d74613;
  line-height: 45px;
  font-size: 20px;
}
aside {
  float: left;
  background: #efefef;
  position: relative;
  top: -30px;
  display: block;
  z-index: 5;
  padding: 20px;
  width: 100%;
}
aside h3 {
  font-family: "open_sanscondensed_light";
  font-size: 25px;
  line-height: 30px;
  font-weight: normal;
  color: #d74613;
}
aside p {
  font-family: "open_sanscondensed_light";
  font-size: 18px;
  color: #000;
  line-height: 26px;
}

.box-direccion {
  width: 100%;
  padding: 0 0 10px 0;
  /*	border-bottom: #666 solid 1px;*/
}

/*------------------------------------*\
    $MENU PRODUCTOS
\*------------------------------------*/

.menu-productos ul {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-transform: uppercase;
  font-family: "open_sanscondensed_light", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
}

ul .active #subMenu {
  display: block;
}

li ul li .active #sub-Menu-inner {
  display: block;
}
/*SEPARADO ENTRE UL*/
.menu-productos > ul > li {
  margin-bottom: 5px;
}

.menu-productos > ul > li > a {
  background-color: #d06415;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-indent: 15px;
  display: block;
  position: relative;
  color: #fff;
}

/*ESTE JUSTIFICA EL ICONO DEL PRIMER SELECTOR A LA DERECHA*/
.menu-productos > ul > li > a i {
  position: absolute;
  right: 20px;
  transition: all 0.4s ease;
}

/* SEGUNDO NIVEL OCULTO */
.menu-productos ul ul {
  display: none;
  width: 100%;
}

/*SEGUNDO NIVEL*/
/* Sangrado y segundo color para sub-opciones */
#subMenu {
  border-left: #d2d2d2 solid 1px;
  position: relative;
  left: 15px;
  width: 100%;
  margin: 5px 0;
}

#subMenu > li > a {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
  left: -7px;
  display: block;
  position: relative;
  color: #4a4949;
  /*transition: all 0.4s ease-in-out;*/
}
#subMenu > li > a:hover {
  color: #d06415;
  margin-left: 15px;
  left: -7px;
  /*transition: all 0.4s ease;*/
}
#subMenu > li > a > i {
  display: none;
}

/*ESTADO SECCION ACTIVA*/
#subMenu > .active > a {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
  left: -7px;
  display: block;
  position: relative;
  color: #d06415;
}

#subMenu > .active > a i {
  display: block;
  float: left;
  position: relative;
  left: -20px;
  color: #d06415;
  font-size: 14px;
  z-index: 1;
}

#subMenu > li > a:hover i {
  display: block;
  float: left;
  position: relative;
  left: -20px;
  color: #d06415;
  font-size: 14px;
  z-index: 1;
}

.menu-productos .icon-right-open-big {
  width: 20px;
  height: 40px;
  line-height: 40px;
  background: #efefef;
  position: relative;
  float: left;
}

.menu-productos .icon-right-open-mini {
  width: 20px;
  margin-top: 5px;
  line-height: 20px;
  /*background: #fff;*/
  position: relative;
  float: left;
  font-size: 24px;
}

#sub-Menu-inner > li > a {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-left: 5px;
  left: 5px;
  display: block;
  position: relative;
  color: #000;
  /*transition: all 0.4s ease-in-out;*/
  font-size: 14px;
}

#sub-Menu-inner li > a:hover {
  color: #d06415;
  margin-left: 5px;
  left: 5px;
  /*transition: all 0.4s ease-in-out;*/
}

#sub-Menu-inner li > a > i {
  display: none;
}

#sub-Menu-inner > li > a:hover i {
  display: block;
  float: left;
  position: relative;
  left: -25px;
  color: #d06415;
  font-size: 20px;
  z-index: 1;
}
ul li .active #sub-Menu-inner {
  display: block;
}

/*ESTADO ACTIVO PARA LOS ENLACES A LOS PRODUCTOS*/
#sub-Menu-inner li > a.active {
  color: #d06415;
  margin-left: 5px;
  left: 5px;
}

#sub-Menu-inner > li > a.active i {
  display: block;
  float: left;
  position: relative;
  left: -25px;
  color: #d06415;
  font-size: 20px;
  z-index: 1;
}
/*------------------------------------*\
    $FORMULARIO
\*------------------------------------*/

#back-top {
  position: absolute;
  bottom: 95px;
  right: 20px;
  z-index: 100;
}
#back-top a {
  width: 60px;
  height: 60px;
  display: block;
  background: #d74613;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  font-size: 30px;
  color: #fff;
  line-height: 56px;
  text-align: center;
}

#back-top a:hover {
  color: #000;
}

form {
  font-family: "open_sanscondensed_light", sans-serif;
  font-size: 16px;
}
input:hover,
textarea:hover {
  /*border: 1px solid #d74613;*/
  border: 2px solid #fff;
  outline: 1px solid #ff0000;
}

input:focus,
textarea:focus {
  border: 2px solid #fff;
  outline: 1px solid #ff0000;
}

input {
  border: 2px solid #fff;
  outline: 1px solid #464646;
  background-color: #efefef;
  line-height: 40px;
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  margin: 8px 0;
  color: #615f5f;
  font-size: 16px;
  font-weight: normal;
  float: left;
  clear: both;
}

textarea {
  border: 2px solid #fff;
  outline: 1px solid #464646;
  background-color: #efefef;
  line-height: 15px;
  width: 100%;
  height: 135px;
  padding: 10px;
  margin: 8px 0;
  color: #615f5f;
  font-weight: normal;
  float: left;
  clear: both;
}

button {
  width: 130px;
  height: 40px;
  line-height: 22px;
  text-transform: uppercase;
  background: #333;
  color: #fff;
  float: right;
  clear: both;
  display: block;
  margin: 4px 0;
  position: relative;
  font-size: 16px;
  border: 0;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

button:hover {
  background: #d74613;
  color: #fff;
}
fieldset {
  width: 50%;
  float: left;
  padding-left: 20px;
}
fieldset:first-child {
  padding: 0;
}
fieldset legend {
  font-family: "open_sanscondensed_light";
  font-size: 25px;
  line-height: 30px;
  font-weight: normal;
  color: #d74613;
}

.error {
  text-transform: uppercase;
  color: #f00;
}

.result_ok {
  width: 300px;
  height: 145px;
  display: block;
  background: #d74613;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
}

.result_ok p {
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
}

.cerrar {
  background: #d06415;
  color: #fff;
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 100px;
  position: absolute;
  right: -14px;
  top: -14px;
  text-align: center;
}

.cerrar:hover {
  color: #000;
}
.masthead {
  width: 100%;
  display: block;
  margin: auto;
  position: relative;
  top: 0;
  z-index: 5;
}

.masthead h1 {
  background: rgb(40, 40, 40); /* IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  background-color: rgba(40, 40, 40, 0.7);
  border-left: #d74613 solid 5px;
  position: absolute;
  top: 185px;
  left: 0;
  font-family: "open_sanscondensed_light";
  text-transform: uppercase;
  font-weight: normal;
  width: auto;
  padding: 10px 35px 10px 30px;
  color: #fff;
  font-size: 30px;
  line-height: 35px;
  z-index: 999;
}

.masthead strong {
  font-family: "open_sans_condensedbold";
  color: #fff;
}

/*------------------------------------*\
    FONDOS ENCABEZADOS
\*------------------------------------*/

.home {
  background: url(../img/slider-01.jpg) no-repeat center top;
  color: #fff;
  height: 590px;
}

.empresa {
  background: url(../img/cables-de-acero-resiflex-empresa.jpg) no-repeat center
    top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.generico {
  background: url(../img/bg-generico.jpg) no-repeat center top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.productos {
  background: url(../img/cables-de-acero-resiflex-productos.jpg) no-repeat
    center top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.cables {
  background: url(../img/cables-de-acero-resiflex-productos-cables.jpg)
    no-repeat center top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.eslingas {
  background: url(../img/cables-de-acero-resiflex-productos-eslingas.jpg)
    no-repeat center top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.fajas {
  background: url(../img/cables-de-acero-resiflex-productos-riendas.jpg)
    no-repeat center top;
  color: #fff;
  height: 330px;
  background-size: cover;
}

.panel {
  background: #4c4c4c;
  color: #fff;
  border-bottom: #d74613 solid 4px;
  padding: 20px 50px;
  position: relative;
}

.panel h1 {
  font-family: "open_sans_condensedbold";
  font-size: 30px;
  text-transform: uppercase;
  line-height: 35px;
  font-weight: normal;
}
.panel h1 strong {
  color: #d74613;
}
.panel ul {
  margin: 10px 0;
}

.panel ul li {
  display: block;
  line-height: 20px;
  font-size: 12px;
  line-height: 20px;
}

.panel p {
  text-align: left;
  font-size: 12px;
  color: #a0a0a0;
  line-height: 20px;
}

.controles {
  float: right;
  /* width: 50%; */
  clear: both;
  margin-top: -55px;
}

.text-home {
  margin-top: -290px;
  position: relative;
  z-index: 1000;
  width: 50%;
}

figure {
  padding: 5px;
  background: #fff;
  display: block;
  color: #3d3d3d;
  font-family: "open_sanscondensed_light";
  text-transform: uppercase;
  font-size: 24px;
  text-align: center;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

figure img {
  margin: auto;
  text-align: center;
}

figure:hover {

  background: #d74613;
  color: #fff;
}

figcaption {
  line-height: 40px;
  margin-top: 10px;
}

footer {
  font-family: "open_sanscondensed_light";
  text-transform: uppercase;
  width: 100%;
  background: #4c4c4c;
  height: 130px;
  padding-top: 15px;
  color: #fff;
  position: relative;
}

footer p {
  float: left;
}

footer .icon-phone,
.icon-location {
  float: left;
  font-size: 28px;
  font-weight: normal;
}

footer .icon-mail {
  font-weight: normal;
  margin-left: 5px;
  color: #fff;
}

.copyright {
  width: 100%;
  background: #1b1b1b;
  line-height: 60px;
  bottom: 0;
  position: relative;
  color: #fff;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 999;
}
/*.productos{
	margin-top: 100px;
}
*/
.lista-productos {
  font-family: "open_sanscondensed_light";
  font-size: 30px;
  /*text-transform: uppercase;*/
  line-height: 35px;
  font-weight: normal;
  margin-bottom: 20px;
}
#productos figcaption {
  text-align: left;
}

.lista-productos strong {
  font-family: "open_sans_condensedbold";
  font-size: 30px;
  text-transform: uppercase;
  line-height: 35px;
  font-weight: normal;
  color: #d74613;
}
.lista-productos {
  margin: 10px 0;
}

.lista-productos li {
  line-height: 28px;
  font-family: "open_sanscondensed_light";
  font-size: 18px;
  color: #282828;
}

.lista-productos li:before {
  content: "●";
  color: #d06415;
  /*font-size: 18px;*/
  line-height: 20px;
  margin-right: 8px;
}

.su-consulta {
  background: #fff;
  display: block;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 600px;
  margin: -250px 0 0 -300px;
}

.su-consulta .form-txt {
  padding-top: 40px;
}

.su-consulta form,
.su-consulta .form-txt {
  margin: auto;
  width: 300px;
}

.su-consulta .icon-cancel-1 {
  font-size: 25px;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #615f5f;
}

.overlay-bg {
  background: url(../img/bg-secciones.png) repeat;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  height: auto;
  width: 100%;
  position: fixed;
  z-index: 999;
}

#btn-consultas {
  color: #201f1e;
  font-family: "open_sanscondensed_light";
  font-size: 14px;
  background-color: #e5e5e5;
  height: 40px;
  display: block;
  font-weight: 400;
  position: relative;
}

#btn-consultas i {
  color: #000;
  font-size: 16px;
  height: 40px;
  width: 40px;
  display: block;
  background-color: #fac11c;
  line-height: 40px;
  text-align: center;
  float: left;
}
#btn-consultas i:after {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  left: 40px;
  margin-top: 12px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fac11c;
}
#btn-consultas span {
  line-height: 40px;
  margin-left: 20px;
}

#btn-pdf {
  color: #201f1e;
  font-family: "open_sanscondensed_light";
  font-size: 18px;
  background-color: #d06415;
  height: 40px;
  display: block;
  font-weight: 400;
  position: relative;
}

#btn-pdf i {
  color: #000;
  font-size: 16px;
  height: 40px;
  width: 40px;
  display: block;
  background-color: #fac11c;
  line-height: 40px;
  text-align: center;
  float: left;
}
#btn-pdf i:after {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  left: 40px;
  margin-top: 12px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fac11c;
}
#btn-pdf span {
  line-height: 40px;
  margin-left: 20px;
  background: none;
}

#banner-pdf {
  color: #201f1e;
  font-family: "open_sanscondensed_light";
  font-size: 18px;
  background-color: #e4e3e3;
  height: 80px;
  display: block;
  font-weight: 400;
  position: relative;
}

#banner-pdf i {
  color: #000;
  font-size: 26px;
  height: 80px;
  width: 80px;
  display: block;
  background-color: #fac11c;
  line-height: 80px;
  text-align: center;
  float: left;
}
#banner-pdf i:after {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  left: 80px;
  margin-top: 32px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fac11c;
}
#banner-pdf span {
  line-height: 20px;
  margin-left: 20px;
  background: none;
  text-align: left;
  display: block;
  padding: 20px 0 0 0;
  float: left;
  color: #000;
}
table {
  border-collapse: separate;
  border-spacing: 2px;
  text-align: center;
}

table td {
  font-size: 16px;
  line-height: 30px;
}

table tr:nth-child(odd) {
  background-color: #e5e5e5;
}

.eslingasEjemplos {
  text-align: left;
  padding: 8px;
}

table.eslingasEjemplos td {
  line-height: 20px;
  font-size: 20px;
  color: #d74613;
  vertical-align: middle;
}
.eslingas-ejemplos {
  margin: auto;
  display: block;
  float: left;
}
.eslingas-ejemplos figure {
  float: left;
  background: none;
  margin: auto;
}
.eslingas-ejemplos figcaption {
  text-align: center;
  color: #d74613;
}
.tabla-prod {
  width: 100%;
  color: #000;
  font-family: "open_sanscondensed_light";
  font-size: 14px;
  background-color: #fff;
}

.tabla-prod .sub-item td {
  background-color: #bdbcbc;
  line-height: 36px;
  padding: 4px;
  color: #000;
  font-weight: 600;
}

.tabla-prod .cargas-item td {
  background-color: #edb761;
  line-height: 36px;
  padding: 4px;
  color: #000;
  font-weight: 600;
}

.tabla-prod .item-img td {
  background-color: #ffffff;
  /*padding: 4px;*/
  margin: auto;
}

.tabla-prod th {
  padding: 8px;
  color: #fff;
  background-color: #d06415;
  line-height: 20px;
  text-transform: uppercase;
}

.image-cable {
  display: block;
  margin: auto;
  display: table;
  vertical-align: middle;
}

.image-cable img {
  margin: 15px auto;
}

.cable-detalle {
  margin: 20px 0;
}

.cable-detalle span {
  background-color: none;
  padding: 0 3px;
  color: #000;
}
.en-stok {
  background-color: #a29f9f;
  color: #fff;
  width: 25%;
}

td.txtrotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600px;
  color: #000;
  white-space: nowrap;
}

#eslingas li {
  line-height: 30px;
}

#eslingas span {
  width: 50px;
  line-height: 30px;
  display: block;
  float: left;
  font-weight: bold;
  color: #d06415;
  text-align: right;
  margin-right: 10px;
}

#eslingas span:after {
  content: " ●";
  color: #d06415;
  /*font-size: 18px;*/
  line-height: 27px;
  float: right;
  display: block;
  width: 20px;
}
#map-canvas {
  width: 100%;
  height: 400px;
  background-color: #ccc;
  border: #d74613 solid 1px;
}

.espacio-20 {
  padding: 0 20px;
}

.riendas span {
  font-weight: 700;
  color: #d06415;
}

.riendas figure {
  padding: 5px;
  background: none;
}

.riendas strong {
  color: #d06415;
  font-weight: normal;
}

.riendas h5,
.riendas p {
  padding: 5px;
}

.riendas .detalles {
  font-size: 14px;
}

.riendas ul {
  padding: 5px 0;
}

.riendas ul li {
  padding-left: 5px;
  line-height: 25px;
  color: #d06415;
}

.ejemplos {
  float: left;
}
.ejemplos span {
  width: 30px;
  height: 30px;
  display: block;
  line-height: 30px;
  text-align: center;
  background: #d06415;
  border-radius: 100px;
  color: #fff;
  float: left;
  margin-right: 5px;
}

.ejemplos li {
  line-height: 32px;
  padding: 2px 0;
}
.accesorios .row {
  margin: 10px 0;
}
.accesorios figcaption {
  text-align: center;
  font-size: 16px;
  line-height: 20px;
}
.accesorios figure {
  padding: 5px;
  background: #fff;
  display: block;
  color: #3d3d3d;
  font-family: "open_sanscondensed_light";
  text-transform: uppercase;
  font-size: 24px;
  margin: auto;
}
.slide01 {
  background: url(../img/cables-de-acero-resiflex-slider-01.jpg) no-repeat top
    center;
  min-height: 580px;
  width: 100%;
  display: block;
  background-size: cover;
}
.slide02 {
  background: url(../img/cables-de-acero-resiflex-slider-02.jpg) no-repeat top
    center;
  min-height: 580px;
  width: 100%;
  display: block;
  background-size: cover;
}
.slide03 {
  background: url(../img/cables-de-acero-resiflex-slider-03.jpg) no-repeat top
    center;
  min-height: 580px;
  width: 100%;
  display: block;
  background-size: cover;
}

#mensaje-enviado {
  width: 100%;
  height: 100%;
  background: url(../img/bg-secciones.png) repeat;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.mensaje {
  background: #fff;
  border: solid 1px #d06415;
  line-height: 20px;
  width: 450px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -175px 0 0 -230px;
  padding: 20px;
  text-align: center;
  font-family: "open_sanscondensed_light";
}

#menu-box{ display: none }

/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {


  .row {
    padding: 0 20px;
  }

  .header-open{ overflow: hidden; }

  #menu-box{ 
    display: block;
    position: absolute;
    top: 60px;
    right: 40px;
  }

  .menu-btn__burger::before,
  .menu-btn__burger::after { 
    content: ''; 
    position: absolute; 
    width: 30px;
    height: 3px;
    background: #fff; 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
    transition: all 0.2s ease-in-out;
  }

  .menu-btn__burger::before {
    transform: translateY(-8px);
  }

  .menu-btn__burger::after {
    transform: translateY(8px);
  }

  .header-open .menu-btn .menu-btn__burger {
    transform: translateX(-50px);
    background: transparent !important;
    box-shadow: none !important;
  }

  .header-open .menu-btn .menu-btn__burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }

  .header-open .menu-btn .menu-btn__burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }

  nav{ 
    opacity: 0;
    pointer-events: none;
    display: block;
    background: #4c4c4c;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s;
    }

  
  nav.open{ 
    opacity: 1;
    pointer-events: all;
   }

   nav ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 250px;
    text-align: center;
    margin-top: 50px
   }

   nav ul li a{ width: 250px }

  footer{ padding: 40px 0}

  ul#productos{ 
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  ul#productos img{ width: 100%; height: 150px; object-fit: cover; }

  .breadcrumb{ left: 0 }

  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11 {
    clear: both;
    width: 100%;
    margin: auto;
  }
  footer {
    height: auto;
    margin: auto;
  }
  .text-home {
    display: none;
    margin-top: 60px;
    width: 100%;
  }
  .masthead h1 {
    font-size: 16px;
    line-height: 20px;
  }
  .slide01,
  .slide02,
  .slide03 {
    min-height: 420px;
  }
  .logo {
    text-align: center;
    margin: auto;
  }
  .logo img{ margin-top: 20px; position: relative; z-index: 999 }

  .producto .row{ padding: 0 }
}