@import url('https://fonts.googleapis.com/css?family=Varela+Round');

body {
    font-family: 'Varela Round', sans-serif;
    color: #000;
    font-weight: 400;
}

ul, ol {
    padding: 0;
    list-style-type: none;
}

.navbar-light .navbar-nav .nav-link {
    font-size: 18px;
    font-style: italic;
    color: #5C5D5F;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #fab91e;
}

.radius, input, textarea {
    border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}



.section-head {
    border-top: 2px solid #5C5D5F;
    margin-top: 0px;

}

.title {
    background-color: #F78F20;
    padding: 3px 0;
}

.title h1 {
    color: #fff;
    font-style: italic;
    padding: 0;
    margin: 0;
    line-height: normal;
    font-size: 1.3rem;
}

#wrapper p {
    color: #58595b;
    font-size: 14px;

}

footer {
    border-top: 1px solid #FFF;
    line-height: 50px;
    display: block;
    text-align: center;
    background: url(../../../img/sombra.png) no-repeat 50% 0
}

footer #subir {
    display: none;
    background: url(../../../img/top02.png) 50% no-repeat;
    width: 40px;
    height: 40px;
    color: rgba(0, 0, 0, 0);
    position: fixed;
    bottom: 10px;
    cursor: pointer;
    right: 10px
}

.acordeon li .contenedor div.recorte {
    background: url(../../../img/sombra.png) no-repeat 50% 0
}

.sombra {
    left: 0;
    right: 0;
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 19px;
    background: url(../../../img/sombra.png) no-repeat 50% 0
}

.sombra.table {
    background: url(../../../img/sombra02.png) no-repeat 50% 0;
    float: right;
    width: 700px;
    position: relative
}

.sprite01, .sprite02 {
    display: inline-block;
    vertical-align: middle
}

.sprite01 {
    background: url(../../../img/sprite01.png) no-repeat
}

.sprite02 {
    background: url(../../../img/sprite02.png) no-repeat
}

.ico16 {
    width: 16px;
    height: 16px
}

.ico32 {
    width: 28px;
    height: 32px
}

.arrow-orange {
    margin-right: 2px;
    background-position: -314px -26px
}

.arrow_white {
    opacity: 0;
    top: 48px;
    z-index: 10;
    position: absolute;
    height: 18px !important;
    left: 50%;
    margin-left: -118.5px;
    background-position: -301px -46px
}

.menos,
.item.active span.mas {
    height: 23px;
    background-position: -288px -24px;
}

.mas {
    height: 23px;
    margin-right: 5px;
    background-position: -260px -24px;
}

.error {
    background-color: #FFE2E2
}

.dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
    color: #000;
}

/***********************************************************************
************************************************************************
** index
************************************************************************
***********************************************************************/


.slide_home ol.flex-control-paging li {
    display: inline-block;
}

.slide_home ol.flex-control-paging li a {
    cursor: pointer;
    display: block;
    margin: 3px;
    background: url(../../../img/sprite01.png) -260px -48px;
    color: transparent;
    width: 16px;
    height: 16px
}

.slide_home ol.flex-control-paging li a.flex-active {
    background-position: -280px -48px
}

.slide_home {
    position: relative
}

.slide_home .slides {
    zoom: 1
}

.slide_home .slides > li {
    display: none;
    -webkit-backface-visibility: hidden
}

.slide_home .slides img {
    width: 100%;
    height: auto;
    display: block
}

#map_canvas {
    cursor: move !important;
    text-align: center;
    display: inline-block;
    width: 100%;
    height: 500px;
    max-height: 500px
}

.sombra {
    /*bottom: -19px*/
}

.infoBox > img {
    display: none
}

.infobox {
    text-align: left;
    /*border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;*/
    color: #58595B;
    font: bold 14px 'Varela Round', sans-serif;
    width: auto;
    max-width: 300px;
    padding: 10px 0 20px 20px;
    border: 1px solid #3a3a3a;
    background-color: rgba(255, 255, 255, .8)
}

.infobox .arrow {
    display: inline-block;
    width: 10px;
    height: 17px;
    float: right;
    margin-right: -9px;
    /*background: url(../../../img/sprite01.png) -337px -45px no-repeat*/
}

.formulario {

}

.formulario form label {
    color: #414141;
    font: bold 14px 'Varela Round', sans-serif;
}

.formulario form input,
.formulario form textarea {
    /*border: 1px solid #EE3F46*/
}

.formulario form input {

}

.formulario form textarea {

}

.formulario form button {
    font: bold 12px 'Varela Round', sans-serif;
    text-align: center;
    color: #fff;
    background-position: -259px -64px;
    width: 110px;
    height: 26px;
    margin: 30px 0;
    float: right;
    display: block;
    clear: both
}

form#contacto div#resume_error {
    border: 1px solid #EE3F46;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
    width: 400px;
    background-color: #FFE2E2;
    display: none;
}

form#contacto div#resume_error label.error {
    clear: both;
    color: #CC0000;
    display: inline-block;
    font: 14px 'arial', verdana;
    margin: 2px 0;
    text-align: left;
    text-transform: none;
    width: 100%;
}

.formulario form h6 {
    display: none;
    clear: both;
    margin: 5px 0px;
    cursor: default;
    padding: 10px;
    text-align: center;
    color: #58595B;
    font: 14px 'Varela Round', sans-serif;
}

.formulario form .info_contacto {
    margin-top: 20px;
    color: #58595b;
    font: 14px 'Varela Round', sans-serif;
    clear: left;
}

.formulario form .info_contacto h1 {
    color: #000;
    font-size: 20px
}

.formulario form .info_contacto h2 {
    margin-bottom: 20px;
    font-size: 17px
}

.formulario form .info_contacto p {
    margin: 10px 0 5px 0
}

.formulario form .info_contacto a {
    margin-bottom: 10px;
    color: #EE3F46
}

.formulario form .captcha‎ {
    padding: 5px 15px;
    margin: 20px 0;
    border: 1px solid #3a3a3a;
    float: left;
    font: 14px 'Varela Round', sans-serif;
}

.formulario form .math_gral {
    float: left;
    padding: 10px 10px 10px 0
}

.formulario form #math {
    padding: 8px;
    background-color: #ccc;
    float: left;
    width: 44px;
    text-align: center;
    border: 0 none;
    border-color: transparent
}

.formulario form #math.error {
    background-color: #EE3F46
}

.formulario form #math.valid {
    background-color: #A4FF98
}

.form-control {
    border-radius: 0;
    border-color: #3a3a3a;
}

/***********************************************************************
************************************************************************
** COMPAÑIA
************************************************************************
***********************************************************************/

.slide_compania {
    position: relative;
    margin: 30px auto
}

.slide_compania .flex-direction-nav {
    left: 0;
    right: 0;
    z-index: 9999;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    list-style-type: none;
}

.slide_compania .flex-direction-nav .flex-prev,
.slide_compania .flex-direction-nav .flex-next {
    color: #F78F20;
    padding: 10px 8px;
    background-color: #fff
}

.slide_compania .flex-direction-nav .flex-prev:hover,
.slide_compania .flex-direction-nav .flex-next:hover {
    color: #fff;
    background-color: #F78F20;
    text-decoration: none;
}

.slide_compania .flex-direction-nav .flex-prev {
    float: left
}

.slide_compania .flex-direction-nav .flex-next {
    float: right
}

.slide_compania .flex-control-paging {
    margin-top: -7px;
    text-align: right
}

.slide_compania .flex-control-paging li {
    display: inline-block
}

.slide_compania .flex-control-paging li a {
    cursor: pointer;
    display: block;
    background-color: #fed571;
    width: 12.5px;
    height: 12.5px;
    margin: 0 0 0 4px;
    color: transparent;
    font-size: 0
}

.slide_compania .flex-control-paging li a.flex-active {
    background-color: #F78F20
}

/***********************************************************************
************************************************************************
**                                                              PRODUCTOS
************************************************************************
***********************************************************************/
.cable-header-conductores {
    display: none;
}

.equipos {
    padding: 0;
}

.equipos li {
    font-weight: bold;
    padding: 5px 10px;
    margin: 2px 0;
    float: left;
    clear: both;
    display: inline-block;
    background-color: #FBCCA0;
}

.equipos li span {
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background-color: #fff;
    margin: 1px 10px 0 0;
    float: left;
    border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.acordeon {
    font-size: 14px;
    width: 100%;
    display: block
}

.acordeon > li {
    width: 100%;
    margin: 15px 0;
    display: inline-block
}

.acordeon li.li05 {
    margin-bottom: 0
}

.acordeon li.li05 #listado_especiales {
}

.acordeon li.li05 #listado_especiales li {
    margin: 3.1px;
    width: 310px;
    float: left
}

.acordeon li.li05 #listado_especiales li h5 {
    padding: 2px 0 2px 4px;
    background-color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    color: #F78F20;
    text-align: left;
    display: block
}

.acordeon li.li05 #listado_especiales li span.especiales {
    border: 2px solid #fff;
    background: url(../../../img/sprite05.png) no-repeat;
    background-size: cover;
    display: block;
    height: 273px
}

.acordeon li.li05 #listado_especiales li span.especiales.img01 {
    background-position: 0 0
}

.acordeon li.li05 #listado_especiales li span.especiales.img02 {
    background-position: 0 -569px
}

.acordeon li.li05 #listado_especiales li span.especiales.img03 {
    background-position: -10px -291px
}

.acordeon li div {
    /*border-bottom: 2px solid #fff;*/
    cursor: pointer
}

.acordeon li div .recorte {
    background: none;
}

.acordeon li > div > .recorte > .item-title {
    padding-top: 9px;
    padding-bottom: 9px;
    font: bold italic 18px/16px 'Varela Round', sans-serif;
    color: #F78F20
}

.acordeon li.li01 div .recorte {
    background-position: right -231px
}

.acordeon li.li02 div .recorte {
    background-position: right -70px
}

.acordeon li.li03 div .recorte {
    background-position: right -308px
}

.acordeon li.li04 div .recorte {
    background-position: right -154px
}

.acordeon li.li05 div .recorte {
    background-position: right -3px
}

.acordeon li .contenedor .cable-listado {
    float: left;
    margin: -10px 0 0 -330px;
    width: 546px;
    height: 286px;
    display: inline-block
}

.acordeon li.li01 .contenedor .cable-listado {
    background: url(../../../img/cable-listado01.png) no-repeat
}

.acordeon li.li02 .contenedor .cable-listado {
    background: url(../../../img/cable-listado02.png) no-repeat
}

.acordeon li.li03 .contenedor .cable-listado {
    background: url(../../../img/cable-listado03.png) no-repeat
}

.acordeon li.li04 .contenedor .cable-listado {
    background: url(../../../img/cable-listado04.png) no-repeat
}

.acordeon .contenedor {
    position: relative
}

.acordeon .contenedor .recorte {
    min-height: 100px;
    padding: 30px 0
}

.acordeon .recorte p {
    font-size: 14px;
}

.acordeon li > .info {
    width: 235px;
    float: left
}

.acordeon li > .info > h6 {
    margin: 2px 0;
    background: none;
    display: block
}

.acordeon li .info span {
    color: #58595b;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: #E4E4E4;
    display: inline-block;
    padding: 3px 7px 3px 1px
}

.acordeon li > p {
    clear: both;
    display: block;
    text-align: center;
    margin: 20px 0 30px 0
}

.acordeon li.li05 p {
    line-height: 17px;
    margin: 20px 0;
    text-align: left
}

.acordeon li.li05 .util {
    float: none
}

.acordeon li div.util {
    font: 14px 'Varela Round', sans-serif;
    margin-bottom: 20px;
    text-align: left;

}

.acordeon li div.util li {
    margin: 0 20px;
    line-height: 20px;
    list-style-type: circle !important
}

.acordeon li table {
    font: 12px 'Varela Round', sans-serif;
    border: 5px solid #FFF;
    text-align: center;
}

.acordeon li table thead {
    background-color: #ED9332;
    color: #fff
}

.acordeon li table thead td {
    font-weight: bold;
    padding: 5px
}

.acordeon li table thead td span {
    font-weight: normal;
    padding: 5px;
    display: block;
}

.acordeon li table tbody tr {
    background-color: #E5E5E5
}

.acordeon li table tbody tr:nth-child(2n+2) {
    background-color: #CDCDCD
}

.acordeon li table tbody td {
    font-weight: bold;
    color: #58595b;
    padding: 10px
}

.acordeon li .item,
.acordeon li .contenedor {
    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, #ffffff 50%, #e8e8e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffffff), color-stop(100%, #e8e8e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 50%, #e8e8e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 50%, #e8e8e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 50%, #e8e8e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 50%, #e8e8e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e8e8e8', GradientType=0); /* IE6-8 */
}

.logo-brand {
    /*background-image: url("../../../img/sprite01.png");*/
    background-image: url("../../../img/logo15-mobile.png");
    background-position: 0px;
    background-size: cover;
    height: 50px;
    width: 165px;
}

.slide_home ol.flex-control-paging {
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: 99;
    right: 0
}

@media screen and (min-width: 578px ) {

    .title h1 {
        font-size: 1.5rem;
    }

    .logo-brand {
        height: 90px;
        width: 348px;
    }

    .cable-header-conductores {
        width: 100%;
        height: 178px;
        display: inline-block;
        position: absolute;
        top: -70px;
        left: -20px;
        background: url(../../../img/cable-header-conductores.png) 0 0 no-repeat;
        background-size: contain;
        max-width: 300px;
    }

    .logo-brand {
        /*background-image: url("../../../img/sprite01.png");*/
        background-image: url("../../../img/logo15.png");
        background-position: 0px;
        background-size: cover;
        height: 50px;
        width: 165px;
    }
    .slide_home ol.flex-control-paging {
        text-align: center;
        position: absolute;
        bottom: 5px;
        left: 0;
        z-index: 99;
        right: 0
    }
}

@media screen and (min-width: 768px ) {

    .title h1 {
        font-size: 2rem;
    }

    .acordeon li > div > .recorte > .item-title {
        font: bold italic 24px/40px 'Varela Round', sans-serif;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .slide_home ol.flex-control-paging {
        text-align: center;
        position: absolute;
        bottom: 5px;
        left: 0;
        z-index: 99;
        right: 0
    }


}

@media screen and (min-width: 992px ) {

    .title h1 {
        font-size: 2.5rem;
    }

    .logo-brand {
        height: 90px;
        width: 348px;
    }

    .section-head {
        margin-top: -40px;
    }

    .acordeon li div .recorte {
        background: url(../../../img/sprite03.png) no-repeat;
    }


}

@media screen and (min-width: 1200px ) {

}