/***********************************************************************************

    ███████╗████████╗██████╗ ██╗   ██╗ ██████╗████████╗██╗   ██╗██████╗ ███████╗
    ██╔════╝╚══██╔══╝██╔══██╗██║   ██║██╔════╝╚══██╔══╝██║   ██║██╔══██╗██╔════╝
    ███████╗   ██║   ██████╔╝██║   ██║██║        ██║   ██║   ██║██████╔╝█████╗
    ╚════██║   ██║   ██╔══██╗██║   ██║██║        ██║   ██║   ██║██╔══██╗██╔══╝
    ███████║   ██║   ██║  ██║╚██████╔╝╚██████╗   ██║   ╚██████╔╝██║  ██║███████╗
    ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝  ╚═════╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝╚══════╝
                                                                                                                    
 ***********************************************************************************/



    .wrapper {
    }

        .wrapper header {
        }

        main {
        }

        .wrapper footer {
            padding: var(--vertical-rhythm) 0 !important;
        }



/********************************************************************************

    ██╗  ██╗ ██████╗ ███╗   ███╗███████╗    ██████╗  █████╗  ██████╗ ███████╗
    ██║  ██║██╔═══██╗████╗ ████║██╔════╝    ██╔══██╗██╔══██╗██╔════╝ ██╔════╝
    ███████║██║   ██║██╔████╔██║█████╗      ██████╔╝███████║██║  ███╗█████╗
    ██╔══██║██║   ██║██║╚██╔╝██║██╔══╝      ██╔═══╝ ██╔══██║██║   ██║██╔══╝
    ██║  ██║╚██████╔╝██║ ╚═╝ ██║███████╗    ██║     ██║  ██║╚██████╔╝███████╗
    ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
    
 ********************************************************************************/



/**********************************************************************

     ██████╗ ██████╗ ███╗   ██╗████████╗███████╗███╗   ██╗████████╗
    ██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔════╝████╗  ██║╚══██╔══╝
    ██║     ██║   ██║██╔██╗ ██║   ██║   █████╗  ██╔██╗ ██║   ██║
    ██║     ██║   ██║██║╚██╗██║   ██║   ██╔══╝  ██║╚██╗██║   ██║
    ╚██████╗╚██████╔╝██║ ╚████║   ██║   ███████╗██║ ╚████║   ██║
     ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚══════╝╚═╝  ╚═══╝   ╚═╝
                                                                                           
 **********************************************************************/



    pre {
        background: rgb(245, 245, 245);
        padding: 0.5rem 1rem;
        border: 1px dotted rgb(165, 165, 165);
    }

    code {
        background: rgb(245, 245, 245);
        padding: 0 0.5rem;
        border: 1px solid rgb(165, 165, 165);
        border-radius: 3px;
    }

    .thumbnail-wrapper {
        border-bottom: none;
        display: inline;
    }

    .thumbnail-wrapper img {
        width: 100%;
    }

    .responsiville-lazymg {
        opacity: 0;
        transition: 0.2s opacity ease-in;
    }

    .responsiville-lazymg.responsiville-lazymg-loaded {
        opacity: 1;
    }

    .other-posts {
        background: var(--color-gray-light-x);
        position: relative;
        padding: 1.2rem 1rem;
        border-radius: 0.4rem;
    }

        .other-posts h3 {
            text-align: center;
            font-size: 2.8rem;
            color: var(--color-white);
            padding: 0 0 1rem 0;
        }

        .other-posts span {
            display: inline-block;
            width: 50%;
        }

            .other-posts span a {
                color: var(--color-black);
            }

        .other-posts .previous-post {
            float: left;
            text-align: left;
        }

        .other-posts .next-post {
            float: right;
            text-align: right;
        }

    .text .gallery-item img {
        border-width:  0 !important;
    }

    .contact-address {
        padding:  calc(2*var(--vertical-rhythm)) var(--grid-gutter);
    }

    .laptop .contact-address {
        padding:  calc(2*var(--vertical-rhythm)) 0;
    }

        .contact-address h1,
        .contact-address h2,
        .contact-address h3,
        .contact-address h4,
        .contact-address h5 {
            margin-top: 2rem;
        }

        .contact-address h1:first-child,
        .contact-address h2:first-child,
        .contact-address h3:first-child,
        .contact-address h4:first-child,
        .contact-address h5:first-child {
            margin-top: 0;
        }

        .contact-address .social a  {
            background: var(--color-blue);
            color: var(--color-white);
            width: 2.2em;
            height: 2.2em;
            line-height: 2.2em;
            border-radius: 50%;
        }

        .contact-address .social a:hover  {
            background: var(--color-gray);
        }

        .contact-address .open-search-button {
            display: none;
        }

/**********************************************************************

    ██████╗  ██████╗ ███████╗████████╗    ██████╗  ██████╗ ██╗  ██╗
    ██╔══██╗██╔═══██╗██╔════╝╚══██╔══╝    ██╔══██╗██╔═══██╗╚██╗██╔╝
    ██████╔╝██║   ██║███████╗   ██║       ██████╔╝██║   ██║ ╚███╔╝
    ██╔═══╝ ██║   ██║╚════██║   ██║       ██╔══██╗██║   ██║ ██╔██╗
    ██║     ╚██████╔╝███████║   ██║       ██████╔╝╚██████╔╝██╔╝ ██╗
    ╚═╝      ╚═════╝ ╚══════╝   ╚═╝       ╚═════╝  ╚═════╝ ╚═╝  ╚═╝

 **********************************************************************/



    .post-box-wrapper + .post-box-wrapper {
        margin-top: var(--text-rhythm);
    }

    .post-box {
        font-size: 0.9em;
        line-height: 1.5;
        margin-bottom: var(--vertical-rhythm);
    }

        .post-box a,
        .post-box a:hover {
            border-bottom: none;
            color: var(--color-black);
            width: 100%;
        }

            .post-box-image {
                margin-bottom: 0.5em;
                max-height: 30rem;
                overflow: hidden;
            }

            .post-box-image img {
                width: 100%;
            }

            .post-box-title {
                font-size: 2em;
                margin: 0 0 0.25em 0 !important;
                padding: 0 !important;
            }

            .post-box-date {
                font-size: 0.9em;
                margin: 0 0 0.5em 0;
                color: var(--color-blue);
            }

            .post-box-excerpt {
                margin: 0 0 0.5em 0;
                color: var(--color-gray);
            }
            
            .post-box .list-taxonomies {
                margin: 0 0 0.5em 0;
                color: var(--color-black);
            }



/************************************************************************************

    ██████╗  █████╗  ██████╗ ██╗███╗   ██╗ █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
    ██╔══██╗██╔══██╗██╔════╝ ██║████╗  ██║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
    ██████╔╝███████║██║  ███╗██║██╔██╗ ██║███████║   ██║   ██║██║   ██║██╔██╗ ██║
    ██╔═══╝ ██╔══██║██║   ██║██║██║╚██╗██║██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
    ██║     ██║  ██║╚██████╔╝██║██║ ╚████║██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                                                      
 ************************************************************************************/



    .pages {
        width: 100%;
        background: var(--color-gray-light-x);
        text-align: center;
    }

        .pages a, 
        .pages a:hover, 
        .pages span {
            display: inline-block;
            padding: 0.2rem 1rem;
            margin: 0.5rem 0;
            border: none;
            color: var(--color-black);
        }

        .pages .current {
            font-weight: bold;
        }



/*************************************************

    ██████╗  ██████╗ ██████╗ ██╗   ██╗██████╗
    ██╔══██╗██╔═══██╗██╔══██╗██║   ██║██╔══██╗
    ██████╔╝██║   ██║██████╔╝██║   ██║██████╔╝
    ██╔═══╝ ██║   ██║██╔═══╝ ██║   ██║██╔═══╝
    ██║     ╚██████╔╝██║     ╚██████╔╝██║
    ╚═╝      ╚═════╝ ╚═╝      ╚═════╝ ╚═╝

 *************************************************/



    .popup {
        box-sizing: content-box;
    }

        .popup-next,
        .popup-previous {
            top: 45%;
        }

  /*************************************************

ANIMAL

 *************************************************/


    .animal-photos {
        padding: 1.4rem 5rem;
    }

        .animal-photo {

        }

            .animal-photo img {
                width:  100%;
            }

    .single-taxonomies {
        padding: 1.5rem var(--grid-gutter);
        text-align: center;
    }

    .single-animals .single-taxonomies {
        padding: var(--grid-gutter);
        text-align: center;
    }

    .article-date {
        color:  var(--color-blueblack);
    }

    .animal-data {
        background: rgba( var(--orange), 0.3 );
        margin-top: 3rem;
    }

    .laptop .animal-data {
        padding: 0 var(--grid-gutter);
        text-align: center;
    }

        .animal-data .column {
        padding: 1rem;
        }

    .animal-header {
        text-align: center;
        padding-bottom: 3rem;
    }

    .animal-description {
        padding: 3rem;
    }