/*
Theme Name: Arcobloc
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
body {
    line-height: 1.25;
}

.slider-nav-light .flickity-page-dots .dot.is-selected,
.slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {
    background-color: #9CBE16;
}

.flickity-page-dots .dot {
    border: 2px solid #111;
    height: 13px;
    width: 13px;
}

.button.is-underline:before {
    background-color: #9CBE16;
}

.dark .social-icons .button.is-outline,
.nav-dark .social-icons .button.is-outline {
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
}

.dark .social-icons .button.is-outline i,
.nav-dark .social-icons .button.is-outline i {
    color: #001783;
}

.button i,
button i {
    top: 0px;
    vertical-align: middle;
}

#footer .col-inner p {
    margin-bottom: 10px;
}

#footer hr {
    border-top: 3px solid #9CBE16;
    opacity: 1;
    max-width: 200px;
    margin-top: 0;
}

.breadcrumb-arcobloc {
    font-weight: normal;
    color: #001783;
}

.breadcrumb-arcobloc span {
    font-weight: bold;
}

ol.breadcrumb-tmc>li {
    margin-left: 0;
}

.header-nav>li>a::before {
    background-color: #9CBE16;
}

.banner-btn-oculto {
    opacity: 0;
    transition: all 0.5s;
}

.banner-categorias:hover .banner-btn-oculto {
    opacity: 1;
}

.banner-categorias {
    background-color: grey !important;
    transition: all 0.5s;
}

.banner-categorias:hover {
    background-color: rgba(156, 190, 22, 0.424) !important;
}

.banner-categorias .bg.attachment-large {
    filter: grayscale(100%);
    mix-blend-mode: multiply;
    transition: filter 0.5s, mix-blend-mode 0.5s;
}

.banner-categorias:hover .bg.attachment-large {
    filter: grayscale(0%);
    mix-blend-mode: multiply;
}

.columna-producto a.white.button.is-outline {
    border: 2px solid #D9D9D9 !important;
}

.columna-producto a.white.button.is-outline:hover {
    background-color: #9CBE16 !important;
    color: #fff !important;
}

.columna-producto table th {
    font-weight: normal;
    text-transform: none;
}

.banner.esquinas-redondas {
    border-radius: 12px;
    overflow: hidden;
}

.iconos-contacto h5 {
    font-weight: bold;
}

.iconos-contacto h6 {
    text-transform: none;
}

.rrss-contacto.social-icons .button.icon:not(.is-outline) {
    background-color: #9CBE16 !important;
    border-color: #9CBE16 !important;
    line-height: 43px;
}

.faqs-arcobloc a.accordion-title.plain {
    background-color: #fff;
    margin-bottom: 15px;
    border-top: 0;
    padding: .6em 3em .6em 1em;
}

.faqs-arcobloc a.accordion-title.plain button.toggle {
    left: inherit;
    right: 0;
    background-color: #001783;
    color: #fff;
    border-radius: 0;

}

.faqs-arcobloc a.accordion-title.plain.active>.toggle {
    transform: none;
}

.faqs-arcobloc a.accordion-title.plain button.toggle i.icon-angle-down:before {
    content: "+" !important;
}

.faqs-arcobloc a.accordion-title.plain.active>.toggle i.icon-angle-down:before {
    content: "-" !important;
    line-height: 1;
    margin-top: -5px;
    display: block;
}

a.button.white.is-outline.lowercase.btn-filtro-categorias.is-checked,
a.button.white.is-outline.lowercase.btn-filtro-categorias:hover {
    background-color: #9CBE16 !important;
    color: #fff !important;
    border-color: #9CBE16 !important;
}

.columna-producto .icon-box .text {
    min-height: 50px;
}

.row-caracteristicas p {
    margin: 0;
}

.img-galeria-arcobloc>div {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
}

a.label-categoria.white.button.is-outline {
    color: #969696 !important;
    pointer-events: none;
    border-width: 1px;
    font-weight: normal;
    border-color: #D9D9D9;
}

ul.list-tips {
    list-style-type: none;
    padding: 0;
    margin: auto;
}

ul.list-tips li {
    margin: 0 0 10px 0;
}

.search-results .box {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    transition: all 0.5s;
}

.search-results .box:hover {
    border-color: #9CBE16;
    background-color: #9cbe1625;
}

.contenedor-esquema {
    width: 100%;
    max-width: 75%;
    padding: 15px;
    margin: 15px auto;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/

    .ml-half {
        margin-left: 0px;
    }

    .medium-flex-wrap .flex-col {
        padding-bottom: 15px;
    }

}