/* ####################################
   Instagram Elements

   - Critical Rendering Path: Optional
   ################################## */

/*
    Instagram Feed 
*/

.instagramFeed {
}

    .instagramFeed .content {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        /* align-content: stretch; */
        margin: 0 -5px 10px -5px;
        width: calc(100% + 10px);
    }

        .instagramFeed .content.gutters {       
        }

            .instagramFeed .content.gutters .item {
                box-sizing: border-box;
                margin: 5px !important;
                flex-grow: 0;
                flex-shrink: 1;
                flex-basis: calc(20% - 10px);
            }

            @supports (-ms-ime-align:auto) {
                .instagramFeed .content.gutters .item {
                    flex-basis: calc(20% - 12px);
                }
            }

        .instagramFeed .item {
            position: relative;
            max-width: 20%;
            min-width: 200px;
            width: 100%;
            overflow: hidden;
            border-radius: 4px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
            background-color: #484038;
        }

            .instagramFeed .item .text .title {
                display: none;
                /*
                position: absolute;
                top: 0;
                left: 0;
                color: white;
                margin: 10px 0 0 10px;
                z-index: 1;
                */
            }

            .instagramFeed .item a {           
            }

                .instagramFeed .item a .thumbnail {
                    height: 250px;
                    overflow: hidden;
                    background: #484038;
                    padding-right: 0;
                }

                    .instagramFeed .item a .thumbnail img {
                        object-fit: cover;
                        width: 100%;
                        height: 250px;
                        /*opacity: 0.75;*/
                        transition: 500ms ease-in-out;
                    }

                    .instagramFeed.fading .item a .thumbnail  {
                        background: rgba(72, 64, 56, 0.75);
                        transition: opacity 0.5s ease-in-out;
                        opacity: 0.75;
                        height: 250px;
                        position: relative;
                        width: 100%;
                        top: 0;
                    }

                    .instagramFeed.fading .item a .thumbnail:hover {
                        opacity: 1;
                    }

                    .instagramFeed .item a .text .summary {
                        position: absolute;
                        bottom: -57px;
                        margin: 0;
                        opacity: 1 !important;
                        padding: 10px;
                        color: #fff !important;
                        font-weight: 500;
                        background: rgba(72, 64, 56, 0.5);
                    }

                        .instagramFeed.fading .item:hover a .text .summary {
                            bottom: 0;
                            transition: 150ms all ease-in-out;
                        }

                            .instagramFeed .item a .text .summary .timestamp {
                                margin: 5px 0; 
                            }

                            .instagramFeed .item a .text .summary .caption {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                font-size: 13px;
                                line-height: 15px;
                                max-height: 45px;
                            }

                        .instagramFeed .item a .text .socialLinks {
                            position: absolute;
                            top: 0;
                            width: 20px;
                            height: 20px;
                            margin: 10px;
                            opacity: 1 !important;
                            background-image: url('/images/cms/icons/socialmedia/instagram_icon_64.png?nocompression=1');
                            background-size: 20px 20px;
                        }

    .instagramFeed .footer {
        position: relative;
        text-align: center;
    }

        .instagramFeed .footer .button {
            box-sizing: border-box;
            width: 100%;
        }

            .instagramFeed .footer .button:hover {
            }

@media screen and (max-width: 1200px) {

    .instagramFeed .item {
        max-width: 50%;
    }

    .instagramFeed .content.gutters .item {
        margin: 4px;
        flex: 0 1 calc(50% - 12px);
    }

}

@media screen and (max-width: 600px) {

    .instagramFeed .item {
        max-width: 100%;
    }

    .instagramFeed .content.gutters .item {
        margin: 4px;
        flex: 0 1 calc(100% - 8px);
    }
    
}

#colorbox.instafeedLightbox {
}

    #colorbox.instafeedLightbox #cboxWrapper {
    }

        #colorbox.instafeedLightbox #cboxWrapper #cboxContent {
            background: rgba(72, 64, 56, 1);
        }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent #cboxLoadedContent {
                margin: 0 0 200px !important;
                background-color: #000;
            }

                #colorbox.instafeedLightbox #cboxWrapper #cboxContent #cboxLoadedContent img {   
                }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent #cboxTitle {
                box-sizing: border-box;
                padding: var(--site-padding-thinner);
                height: 200px;
                overflow-y: auto;
                font-size: 85%;
                line-height: var(--site-text-line-height);
                text-align: left;
                white-space: pre-line;
                background-color: rgba(72, 64, 56, 0.85);
            }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent #cboxCurrent {
                left: 5px;
                top: 5px;
                bottom: auto;
                color: #fff;
                font-weight: 500;
                text-shadow: 1px 1px 1px #000;
                text-transform: capitalize;
                background: rgba(40,31,32,0.75);
                line-height: 100%;
                padding: 8px 10px 5px;
                border-radius: 3px;
            }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent button#cboxPrevious {
                bottom: 50%;
                width: 45px;
                height: 45px;
                margin-left: 10px;
                background: url(/images/cms/icons/general/32x32_arrow_left.png);
                background-size: 26px 26px;
                background-color: rgba(51, 51, 51, 0.8);
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 50px;
            }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent button#cboxNext {
                left: auto;
                right: 0;
                bottom: 50%;
                width: 45px;
                height: 45px;
                margin-right: 10px;
                background: url(/images/cms/icons/general/32x32_arrow_right.png);
                background-size: 26px 26px;
                background-color: rgba(51, 51, 51, 0.8);
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 50px;
            }

                #colorbox.instafeedLightbox #cboxWrapper #cboxContent button#cboxPrevious:hover,
                #colorbox.instafeedLightbox #cboxWrapper #cboxContent button#cboxNext:hover {
                    background-color: rgba(51, 51, 51, 0.95);
                }

            #colorbox.instafeedLightbox #cboxWrapper #cboxContent button#cboxClose {
                display: none;
            }

/*
    Instagram Something
*/

.instagramOtherElementsMightExist {
}