@import 'variables.less';

/****************************************************
                    Simple Gallery
****************************************************/
.demo
{
    li
    {
        a
        {
            img
            {
                height: 200px;
                border: 2px solid @light-border;
                margin: 5px;
            }
        }
    }
}

/****************************************************
                Gallery With Description
****************************************************/
.brick
{
    background: #ffffff;
    color: black;
    padding: 10px;
    float: left;
    img
    {
        height: 200px;
    }
}

/****************************************************
                        Gallery 2
****************************************************/
#gallery-header
{
    #gallery-header-center
    {
        width: 80% !important;
    }

}

#gallery-header-center-left-icon, .gallery-header-center-right-links-current
{
    background-color: @primary-color !important;
    &:hover
    {
        background-color: darken(@primary-color,10%) !important;
    }
}
#gallery-header-center-left-title
{
    color: @primary-color !important;
    font-family: @main-font !important;
    font-size: 16px !important;
    
}
.gallery-header-center-right-links 
{
    &:hover
    {
        background-color: @primary-color !important;
    }
}
#lightbox 
{
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    margin: 0 auto;
    background: rgba(37,37,37,0.9);
    text-align:center;
    z-index: 9999999;
    .lightbox-content
    {
        height: 428px;
        width: 640px;
        margin-top: 10%;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        i 
        {
            position: absolute;
            top: 0;
            right: 0;
            background-color: @primary-color;
            color:#fff; 
            padding: 10px;   
            font-size:16px; 
        }
        img 
        {
            position: absolute;
            left: 0px;
            top: 0px;
        } 

    }
}
@media (max-width:745px)
{
    #gallery-header
    {
        margin-bottom: 60px;
        #gallery-header-center
        {
            width: 100% !important;
        }
    }
    #lightbox 
    {
        .lightbox-content
        {
            width: 340px;
            i
            {
                right: -26px;
            }
            img
            {
                width: 100%;
            }
        }
    }
    
}
/****************************************************
                        Gallery 3
****************************************************/
.gallery-tab-title
{
    margin-bottom: 30px;
    .gallery-tab-title-holder-controls-button
    {
        background-color: @primary-color !important;
        &:hover
        {
            background-color: darken(@primary-color,10%) !important;
        }
    }
    .gallery-tab-title-holder-text
    {
        color: @heading-color !important;
        font-family: @main-font;
        font-weight: 300 !important;
        font-size: 24px !important;
        &:hover
        {
            color: @content-color !important;
        }
    }
}
.gallery-tab-images-slider-tab-hover
{
    background-color: rgba(33,150,243,0.5) !important;
}
#popup
{
    #popup-box-close
    {
        background-color: @primary-color !important;   
    }
}
@media (max-width:1000px)
{
    #popup
    {
        #popup-box
        {
            #popup-box-close
            {
                background-color: @primary-color !important;   
            }
        }
    }
}