/****************************************************************************
 * Section
 ****************************************************************************/
.content_section.gallery_section{
    overflow: hidden; padding-top: 0; padding-bottom: 0; max-height: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.content_section.gallery_section.active{
    padding-top: 2rem; padding-bottom: 2rem; max-height: 40rem;
}

/****************************************************************************
 * Gallery-Toggler
 ****************************************************************************/
.content_section .content_wrapper .post_thumbnail .gallery_toggle.button{
    color: #6e6e6e; position: absolute; left: 0; right: 0;
    margin: 0 auto; display: inline-block; bottom: 1rem; top: auto;
    background-color: rgba(255,255,255,.75); max-width: 10rem; height: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.content_section .content_wrapper .post_thumbnail .gallery_toggle.button:hover,
.content_section .content_wrapper .post_thumbnail .gallery_toggle.button:focus{
    background-color: #6e6e6e;
    border-color: #6e6e6e;
    color: #FFFFFF;
}

/****************************************************************************
 * Close
 ****************************************************************************/
.gallery_section .close_gallery{
    position: absolute; top: 1rem; right: 1rem;
    font-size: 1.5rem; font-weight: 100; cursor: pointer;
    display: inline-block; line-height: 1; width: 1em; height: 1em;
    text-align: center;
}
.gallery_section .close_gallery:after,
.gallery_section .close_gallery:before{
    position: absolute; left: 0; right: 0; top: 50%; content: '';
    width: 1em; height: 1px; background-color: currentColor;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}
.gallery_section .close_gallery:before{
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
}

/****************************************************************************
 * Gallery
 ****************************************************************************/
.gallery_slider.slick_wrapper{
    margin: 0 -0.25rem; padding: 0;
    width: auto; overflow: visible;
}
.gallery_slider.slick_wrapper .slick_slider{
    position: relative;  overflow: visible;
}
.gallery_slider .slick-slider,
.gallery_slider .slick-slider .slick-track,
.gallery_slider .slick-slider .slick-list{
    height: auto;
}
.gallery_slider .slick_slide{
    padding: .25rem;
}
.gallery_slider .slick_slide .gallery_slide[data-ratio]{
    padding: 0 0 100%; position: relative; display: block;
}

.gallery_slider .slick_slider .slick-arrow{
    margin-top: 0; width: 1rem; height: 1rem; color: #6E6E6E;
}
.gallery_slider .slick_slider .slick-arrow.slick-disabled{
    opacity: .25;
}


@media screen and (min-width:40em){
    /****************************************************************************
     * Section
     ****************************************************************************/
    .content_section.gallery_section.active{
        max-height: 64rem; padding-top: 3rem; padding-bottom: 3rem; 
    }
    
    /****************************************************************************
     * Close
     ****************************************************************************/
    .gallery_section .close_gallery{
        top: 1.5rem; right: 1.5rem;
    }
    /****************************************************************************
     * Gallery
     ****************************************************************************/
    .gallery_slider .slick_slider .slick-arrow.slick-next{
        right: -1.25rem;
    }
    .gallery_slider .slick_slider .slick-arrow.slick-prev{
        left: -1.25rem;
    }
}


@media screen and (min-width:64em){
    
    /****************************************************************************
     * Section
     ****************************************************************************/
    .content_section.gallery_section.active{
        padding-top: 4rem; padding-bottom: 4rem; max-height: 75rem;
    }
    
    /****************************************************************************
     * Gallery-Toggler
     ****************************************************************************/
    .content_section .content_wrapper .post_thumbnail .gallery_toggle.button{
        max-width: 15rem;
    }
    
}