#initiative h1 {
    font-size: 2em;
    color: var(--c-green-title)
}

header {
    --ar: 1600 / 542
}

h1,h2 {
    margin-bottom: 1.2rem
}
.clear-both{
    clear: both;
}
.tag {
    display: block;
    margin-bottom: .8rem
}
.como_participar_replicador_container{
    clear: both;
}

.h3_container{
    margin-left: 20px;
}

.align_left{
    float: left;
    position: relative;
}

.intro p {
    white-space: pre-wrap
}

.intro a {
    color: var(--c-blue)
}

.steps>*>* {
    border-radius: .6em;
    border: 2px solid #3E8E6C;
    padding: 2rem;
    padding-bottom: .5em;
    text-align: center;
    height: 100%
}

.steps h3 {
    text-align: center
}

.steps .image {
    width: 40%
}

.help {
    background: #f2f2f0
}

.help p {
    margin-bottom: 1.6rem
}

.help img {
    width: 100%
}

.help .btn {
    margin: 2rem auto 0 auto
}

@media (max-width: 992px) {
    header {
        --ar:3.2
    }

    .steps {
        --cgap: 1.2rem;
        --rgap: 1.2rem
    }

    .steps>*>* {
        padding: 1rem
    }
}

@media (max-width: 768px) {
    header {
        --ar:2.2
    }
}

@media (max-width: 576px) {
    header {
        --ar:1.4
    }
}

.video-carousel h2,.video-carousel h3 {
    text-align: center;
    margin-bottom: 0
}

.video-carousel .item {
    padding: 0 1rem
}

#videos-carousel iframe {
    width: 100%
}

#videos-carousel .slick-prev,#videos-carousel .slick-next {
    width: 14px;
    height: 14px
}

#coll,.coll {
    background: var(--c-cream)
}

#coll .inner {
    --w1: 40%;
    --w2: 60%
}

#coll .image {
    padding-right: 2rem;
    align-items: flex-start;
    --w: 70%
}

#coll .image img {
    width: var(--w)
}

#coll .location {
    padding: 1.6rem;
    margin: 1rem 0;
    background: #FFF;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.2)
}

#coll .location a {
    font-size: .9rem
}

#coll .titles {
    margin-bottom: 2rem
}

#coll .titles h2 {
    color: var(--c-prim);
    font-size: 2rem;
    margin-bottom: .4rem
}

#coll .titles h2,#coll .titles p {
    text-align: center;
    font-style: italic
}

#coll .titles p {
    color: var(--c-sec)
}

#coll h3 {
    margin-bottom: .6rem
}

[name="state"] {
    text-align: center
}

[data-state] {
    display: none;
    visibility: hidden
}

[data-state].show {
    display: block;
    visibility: visible
}

#collector-carousel {
    margin-top: 2rem;
}

#collector-carousel .item {
    padding: 0 1rem
}

#collector-carousel .item img {
    display: block;
    margin: 0 auto
}
.slick-prev:before{
    background: url(/assets/site/img/arrow_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    transform: rotate(180deg);
}

.slick-next:before{
    background: url(/assets/site/img/arrow_blue.svg);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    width: 14px;
    height: 14px;
    display: block;
}

.green_slider .slick-prev:before{
    background: url(/assets/iniciativas/puntosreciclaje/arrow_green.svg);
    background-repeat: no-repeat;
}

.green_slider .slick-next:before{
    background: url(/assets/iniciativas/puntosreciclaje/arrow_green.svg);
    background-repeat: no-repeat;
}

#collector-carousel .slick-prev,#collector-carousel .slick-next {
    width: 14px;
    height: 14px
}

@media (max-width: 1200px) {
    #coll .inner {
        --w1:30%;
        --w2: 70%;
        --w3: 0%
    }

    #coll .image {
        --w: 100%
    }
}

@media (max-width: 768px) {
    #coll .inner {
        --w1:100%;
        --w2: 100%
    }

    #coll .image {
        --w: 40%;
        padding: 0 0 var(--secpad) 0
    }
}

@media (max-width: 576px) {
    #coll .image {
        --w:60%
    }

    #collector-carousel .slick-prev {
        left: -12px
    }

    #collector-carousel .slick-next {
        right: -12px
    }
}