@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Slab&display=swap');
* {font-family:Roboto, Arial, Helvetica, sans-serif}
h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 * {font-family: Roboto Slab, serif};
.mini {font-size: .75rem;}
a {color:#ef3f34;}
a:hover {color: #bf2a26;}

.btn-primary {
    background-color: #ef3f34;
    border-color: #ef3f34;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle,
.btn-primary.focus, .btn-primary:focus {
    background-color: #bf2a26;
    border-color: #bf2a26;
}
.btn-outline-primary {
    color: #ef3f34;
    border-color: #ef3f34;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: #bf2a26;
    border-color: #bf2a26;
}
.btn-outline-primary i {margin-left:.25rem}
.navbar-light .navbar-nav .nav-link {
    text-transform: uppercase;
    color: #000;
    letter-spacing: .5px;
    /*border-top: 4px double transparent;
    border-bottom: 4px double transparent;*/
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link,
.dropdown-item.active, .dropdown-item:active {
    color: #ef3f34;
    /*border-top: 4px double #000;
    border-bottom: 4px double #000;*/
}
.navbar-light .navbar-nav .nav-link:hover {color:#ef3f34;}
@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 90%;
    }
}

.dropdown-item.active, .dropdown-item:active {background:none}

table.table-cadena,table.table-diametros {text-align: center;transition: 0.3s;}
table td, table th {border:1px solid transparent}
table.table td, table.table th {padding:.5rem}
table thead th {cursor:pointer}
table tbody td.c_hl{/*font-weight:bold;*/cursor:pointer;color:#ef3f34}
table tbody th.hl {border-top:1px solid #000;border-bottom:1px solid #000;background:#f5f5f5}
table.table-diametros tbody th.hl {color:#ef3f34;}
table tbody td.hl {border-top:1px solid #000;border-bottom:1px solid #000;background:#f5f5f5}
table thead th.th_hl{color:#ef3f34;border-right:1px solid #000;/* border-left:1px solid #000;*/}
table tbody td.td_hl{border-right:1px solid #000;border-left:1px solid #000 !important;}
table tbody td.hl span.invisible,
table tbody th.hl span.invisible,
table tbody td span.visible,
table tbody th span.visible {visibility: visible !important;}
table thead th .custom-select {padding-top: .125rem;padding-bottom: .125rem;width: auto;display: inline-block;text-align: center;
    height: calc(1.125em + .5rem + 2px);
    padding-right: 1.25rem;
    background-position: 90% 50%;
    display: block;
    margin: 0 auto;
}

table tbody tr.mini td,
table tbody tr.mini td.hl,
table tbody tr.mini td.td_hl,
table tbody tr.mini td.c_hl,
table tbody tr.mini th,
table tbody tr.mini th.hl,
table tbody tr.mini th.td_hl,
table tbody tr.mini th.c_hl {color:#212529;background:none;border-bottom:1px solid #ddd;}
table tbody tr.mini td {font-size: .75rem;}
table thead th.tit {border-left:0;border-right:0;color:#212529;}

/*SVGs*/
.bg_lines{fill:none;stroke:#E6E7E8;stroke-width:0.5436;stroke-miterlimit:3.8636;stroke-dasharray:12,2,2,2;}
.arrows{fill:#FFFFFF;stroke:#939598;stroke-width:0.25;stroke-miterlimit:3.8636;}
.arrows_f{fill:#FFFFFF;stroke:#939598;stroke-width:0.25;stroke-miterlimit:3.8636;}
.letters{fill-rule:evenodd;clip-rule:evenodd;fill:#58595B;}
.lines{fill:none;stroke:#D1D3D4;stroke-width:0.25;stroke-miterlimit:3.8636;}
.lines_f{fill:#D1D3D4;}
.chain{fill:none;stroke:#000000;stroke-width:0.5436;stroke-miterlimit:3.8636;}
.chain_b{fill:none;stroke:#000000;stroke-width:0.5869;stroke-miterlimit:3.8636;}
.chain_m{fill:none;stroke:#000000;stroke-width:0.25;stroke-miterlimit:3.8636;}
.chain_d05{fill:none;stroke:#000000;stroke-width:0.5436;stroke-miterlimit:3.8636;stroke-dasharray:.5,.5;}
.chain_d{fill:none;stroke:#000000;stroke-width:0.5436;stroke-miterlimit:3.8636;stroke-dasharray:1,1;}
.chain_d2{fill:none;stroke:#000000;stroke-width:0.4679;stroke-miterlimit:3.8636;stroke-dasharray:2,2;}
.chain_d4{fill:none;stroke:#000000;stroke-width:0.4679;stroke-miterlimit:3.8636;stroke-dasharray:4,4;}
.bg_letters{fill:#FFFFFF;cursor:pointer;}
.letters_c{fill:none;stroke:#000000;stroke-miterlimit:10;}
.letters_cf{fill-rule:evenodd;clip-rule:evenodd;fill:#000000;}

.highlight .arrows,
.highlight .arrows_f,
.highlight .lines {stroke:#ef3f34}
.highlight .lines_f, 
.highlight .letters {fill:#ef3f34}


.divsvg {max-width: 100%;overflow: hidden;}
.divsvg svg {width:100%}
.divsvg.scale11 svg {transform: scale(1.1,1.1)}
.divsvg.scale12 svg {transform: scale(1.2,1.2)}
.divsvg.scale13 svg {transform: scale(1.3,1.3)}
.divsvg.scale14 svg {transform: scale(1.4,1.4)}
.divsvg.scale15 svg {transform: scale(1.5,1.5)}
.divsvg.scale11 svg, 
.divsvg.scale12 svg, 
.divsvg.scale13 svg, 
.divsvg.scale14 svg, 
.divsvg.scale15 svg {transform: scale(1)}
@media (min-width: 992px){
    .divsvg svg {width:90%}
    .divsvg.scale11 svg, 
    .divsvg.scale12 svg, 
    .divsvg.scale13 svg, 
    .divsvg.scale14 svg, 
    .divsvg.scale15 svg {transform: scale(1)}
}
svg g:hover .arrows,
svg g:hover .arrows_f,
svg g:hover .lines {stroke:#ef3f34;cursor:pointer;transition: 0.3s;}
svg g:hover .lines_f, 
svg g:hover .letters {fill:#ef3f34;cursor:pointer;transition: 0.3s;}

.products svg {/*transform: scale(1.4,1.4)*/}
.products svg .bg_lines,
.products svg .arrows,
.products svg .arrows_f,
.products svg .letters,
.products svg .lines,
.products svg .lines_f,
.products svg .bg_letters {display:none}
.products .card:hover svg *,
.products svg:hover * {
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    animation: draw 2s linear infinite alternate;
}
    @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }

.collapse {transition: 0.3s;}

input.error {border-color:#dc3545!important}


#bg_title {
    margin-top:85px;background-size: cover;
    padding-top:5.5rem !important;padding-bottom: 5.5rem !important;
    background-position: center;
    background-image:url('../img/cadenas.jpg')
}
    .page_2 #bg_title {background-image:url('../img/empresa-cadenas.jpg')}
    .page_5 #bg_title {background-image:url('../img/cadenas-material.jpg')}
    .page_6 #bg_title {background-image:url('../img/material-cadenas.jpg')}
    .page_7 #bg_title {background-image:url('../img/fabricar-cadenas.jpg');}
    .page_8 #bg_title {background-image:url('../img/fabricante-cadenas.jpg');}
    .page_9 #bg_title {background-image:url('../img/contactar-fabrica-cadenas.jpg');}
    


#bg_title > div {
    background: rgba(0,0,0,.5);
}
#bg_title h1 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom:0
}

#bg_title .lead {color: #fff;}
h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    margin-bottom: 1rem;
    font-weight: 400;
}
h1, h1 *, .h1 {
    font-family: Roboto Slab, serif;
}
.h2, h2 {font-size: 1.75rem;}
.h3, h3 {font-size: 1.5rem;}


#sobre_cadenas button {text-align:left;border:0 !important;outline: 0 !important;background:#fafafa}
#sobre_cadenas button h3 {margin-bottom: 0;padding: 1rem 1rem 1rem 50px;}
#sobre_cadenas button h3 span {
    position: absolute;
    left: 1.5rem;
    top: .75rem;
    font-size: 3rem;
    font-weight: 300;
}
/*https://images.unsplash.com/photo-1494961104209-3c223057bd26?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=3392&q=80*/
/*https://www.periodni.com/es/ecuaciones_matematicas_y_quimicas_en_la_web.html*/

.eq-c {    
    padding: .5rem .75rem;
    border: 1px solid #ccc;
    display: inline-block;
    margin: 1rem 0;
}
.eq-c span[title] {cursor:help}
.fraction {
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

.products .card:hover {background:#fafafa;}
.products .card .card-body {padding-bottom: .5rem;}
.products .card h2, .products .card h3 {font-size: 1.25rem;}
.products .card:hover h2 a,
.products .card h2:hover a,
.products .card h2 a:hover,
.products .card:hover h3 a,
.products .card h3:hover a,
.products .card h3 a:hover {color:#222;text-decoration: none;transition: 1s;}

.products .card .scale11 svg {transform: scale(1.1,1.1)}
.products .card .scale12 svg {transform: scale(1.2,1.2)}
.products .card .scale13 svg {transform: scale(1.3,1.3)}
.products .card .scale14 svg {transform: scale(1.4,1.4)}
.products .card .scale15 svg {transform: scale(1.5,1.5)}

.container .row img {max-width:100%;height:auto;}


body > footer {background:#202020}
body > footer * {color:#fff}
body > footer svg {fill:#fff}
body > footer svg .st0,
body > footer svg .st2 {fill:#fff}
body > footer .text-muted {color: #999 !important;}

#carouselHome .carousel-item {max-height:500px}
#carouselHome .carousel-caption {
    background: rgba(0,0,0,.5);
    bottom:50%;
    transform: translateY(50%);
}
#carouselHome .carousel-caption p {font-size:22px;line-height:150%}

.tipos-productos a h2 {
    background:#000;
    display:block;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-family: 'Roboto Slab';
    text-transform: uppercase;
    padding: 1rem;
    box-sizing: content-box;
    position: relative;
    min-height:7rem; /*10rem*/
}
.tipos-productos a:hover,
.tipos-productos a:hover h2 {
    background:#000;
    text-decoration: none !important;
}
.tipos-productos a h2 span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    z-index:1001;
}

.tipos-productos a h2 svg {z-index:1;transform: scale(1.4,1.4)}
.tipos-productos a h2 svg .bg_lines,
.tipos-productos a h2 svg .arrows,
.tipos-productos a h2 svg .arrows_f,
.tipos-productos a h2 svg .letters,
.tipos-productos a h2 svg .lines,
.tipos-productos a h2 svg .lines_f,
.tipos-productos a h2 svg .bg_letters {display:none}
.tipos-productos a h2 svg .chain {stroke:#777}

.cadenas-sectores a span {
    font-size:1.25rem;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: 100%;
    background: rgba(0,0,0,.75);
    vertical-align: middle;
    text-align: center;
    margin-left: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    display:none;
}
.cadenas-sectores a:hover span {display: flex;}

.btn-secondary {background-color:#524d4d;border-color:#524d4d}
.btn-secondary:hover,.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {background-color:#353232;border-color:#353232}


#fabrica_cadenas_img {background: rgba(0,0,0,.5);}
#fabrica_cadenas_img .modal-lg {max-width:70%}
#fabrica_cadenas_img .modal-content {background:none;border:none}
#fabrica_cadenas_img .modal-header {padding: 0;border: 0;background: none;}
#fabrica_cadenas_img .modal-body {padding:0}
#fabrica_cadenas_img .close {text-shadow: none;opacity: 1;color: #fff;font-size: 2rem;}
#fabrica_cadenas .carousel-control-next {right: -5%;width:5%;opacity:1}
#fabrica_cadenas .carousel-control-prev {left: -5%;width:5%;opacity:1}

img.ampliar {cursor:pointer}
.navbar-light .navbar-toggler {
    border-color: transparent;
    outline: none;
}


@media (max-width: 991px){
    #menu .dropdown-menu {
        margin-top: 0;
        padding-top: 0;
        border:0;
    }
    #menu .dropdown-menu .dropdown-item {
        border: 0;
        padding-left: 0;
        padding-right: 0;
        white-space: break-spaces;
    }
}