sprocket-mosaic-g-overlay/**
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2016 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */
/**
* @version   $Id: mosaic.css 10885 2013-05-30 06:31:41Z btowles $
* @author    RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2016 RocketTheme, LLC
* @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/

/* Mosaic - Colors */
.sprocket-mosaic-g-filter li, .sprocket-mosaic-g-order li {
    background: #aaa;
    color: #fff;

}

.sprocket-mosaic-g-filter li.active, .sprocket-mosaic-g-order li.active {
    background: #151515;
    color: #fff;

}

.sprocket-mosaic-g-content {
    color: #fff;

}

.sprocket-mosaic-g-item.panel-color {
    background: #151515;

}


/* Mosaic - Core */
.sprocket-mosaic {
    position: relative;

}

.sprocket-mosaic:after {
    display: table;
    content: "";
    clear: both;

}

.sprocket-mosaic-g-header ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

.sprocket-mosaic-g-container {
    position: relative;
    clear: both;

}

#main .sprocket-mosaic-g-container {
    margin: 0;
    padding: 0;

}

.sprocket-mosaic-g-container li {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translatez(0);

}


/* Mosaic - Header */
.sprocket-mosaic-g-header {
    margin-bottom: 10px;

}

.sprocket-mosaic-g-header:after {
    display: table;
    content: "";
    clear: both;

}

.sprocket-mosaic-g-header li {
    display: inline-block;

}

.sprocket-mosaic-g-pagination-hidden {
    display: none;

}

.sprocket-mosaic-g-order {
    float: right;

}

.sprocket-mosaic-g-filter {
    float: left;

}

#main .sprocket-mosaic .sprocket-mosaic-g-order ul li, .sprocket-mosaic .sprocket-mosaic-g-order li, #main .sprocket-mosaic .sprocket-mosaic-g-filter ul li, .sprocket-mosaic .sprocket-mosaic-g-filter li {
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.sprocket-mosaic-g-container li {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translatez(0);

}


/* Mosaic - Columns */
.sprocket-mosaic-g-columns-1 > li {
    width: 100%;

}

.sprocket-mosaic-g-columns-2 > li {
    width: 50%;
    width: -webkit-calc(100% / 2);
    width: calc(100% / 2);

}

/*.sprocket-mosaic-g-columns-3 > li {
  width: 33.333333333333336%;
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  
  }
*/
.sprocket-mosaic-g-columns-4 > li {
    width: 25%;
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4);

}

.sprocket-mosaic-g-columns-5 > li {
    width: 20%;
    width: -webkit-calc(100% / 5);
    width: calc(100% / 5);

}

.sprocket-mosaic-g-columns-6 > li {
    width: 16.666666666666668%;
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6);

}


/* Mosaic - Content */
.sprocket-mosaic-g-container {
    margin: 0;
    padding: 0;
    list-style: none;

}

.sprocket-readmore {
    white-space: nowrap;

}

.sprocket-mosaic-g-content {
    padding: 15px;
    box-sizing: border-box;

}

.sprocket-mosaic-g-content.overlay-mode {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    height: 0;

}

.sprocket-mosaic-g-item:hover .sprocket-mosaic-g-content.overlay-mode {
    opacity: 1;
    visibility: visible;
    height: 100%;

}

.sprocket-mosaic-g-item {
    display: block;
    position: relative;

}

.sprocket-mosaic-g-image-container {
    position: relative;

}

.sprocket-mosaic-g-image {
    width: 100%;

}

.sprocket-mosaic-g-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    background: rgba(0,0,0,0.7);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translatez(0);

}

.sprocket-mosaic-g-item:hover .sprocket-mosaic-g-effect {
    width: 100%;
    height: 100%;
    opacity: 1;

}

.sprocket-mosaic-g-title {
    margin: 0 0 15px 0;

}

.overlay-mode .sprocket-mosaic-g-title {
    opacity: 0;
    margin-top: -25px;
    -webkit-transition: all 0.2s 0.2s;
    -moz-transition: all 0.2s 0.2s;
    transition: all 0.2s 0.2s;

}

.sprocket-mosaic-g-item:hover .overlay-mode .sprocket-mosaic-g-title {
    opacity: 1;
    margin-top: 0;

}

.sprocket-mosaic-g-text {
    margin: 15px 0;
    display: block;

}

.sprocket-mosaic-g-readon {
    white-space: nowrap;

}

.overlay-mode .sprocket-mosaic-g-text, .overlay-mode .sprocket-mosaic-g-readon {
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.4s;
    -moz-transition: opacity 0.3s 0.4s;
    transition: opacity 0.3s 0.6s;

}

.sprocket-mosaic-g-item:hover .overlay-mode .sprocket-mosaic-g-text, .sprocket-mosaic-g-item:hover .overlay-mode .sprocket-mosaic-g-readon {
    opacity: 1;

}


/* Mosaic - Tags */
.sprocket-mosaic-g-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    padding: 0 7px;

}

.overlay-mode .sprocket-mosaic-g-tags {
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.9s;
    -moz-transition: opacity 0.3s 0.9s;
    transition: opacity 0.3s 0.9s;

}

.sprocket-mosaic-g-item:hover .overlay-mode .sprocket-mosaic-g-tags {
    opacity: 1;

}

.sprocket-mosaic-g-tags li {
    float: left;
    width: auto;
    color: #fff;
    padding: 8px;
    margin: 0;

}

.sprocket-mosaic-g-tags li:after {
    content: '/';
    margin: 0 -8px 0 8px;
    opacity: 0.3;

}

.sprocket-mosaic-g-tags li:last-child:after {
    display: none;

}


/* Overlay Loader */
.sprocket-mosaic-g-overlay {
    display: none;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    z-index:2;

}

.sprocket-mosaic-g-overlay .css-loader-wrapper {
    display: none;
    width: 60px;
    height:60px;
    margin: 200px auto 0;
    padding: 20px;
    background-color:#e5e5e5;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow:0 0 5px rgba(0, 0, 0, 0.4) inset,1px 1px 1px rgba(255, 255, 255, 0.1);
    border-radius:1em;

}

.sprocket-mosaic.refreshing .sprocket-mosaic-g-overlay {
    display: block;

}

.sprocket-mosaic-g-overlay .css-loader {
    display: block;
    margin: 0 auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 8px solid rgba(255, 255, 255, 0.2);
    border-right: 8px solid rgba(255, 255, 255, 0.2);
    border-bottom: 8px solid rgba(255, 255, 255, 0.2);
    border-left: 8px solid #ffffff;
    -webkit-animation: loader 1.1s infinite linear;
    animation: loader 1.1s infinite linear;

}

.sprocket-mosaic-g-overlay .css-loader, .sprocket-mosaic-g-overlay .css-loader:after {
    border-radius: 50%;
    width: 44px;
    height: 44px;

}


/* Load More */
.sprocket-mosaic-g-loadmore {
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin:10px auto;
    display:block;
    padding:5px;
    width:155px;

}

.sprocket-mosaic-g-loadmore.hide {
    display:none;

}

.sprocket-mosaic-g-loadmore {
    background: #aaa;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;

}

.sprocket-mosaic-g-loadmore span {
    text-transform: capitalize;
    display:block;
    text-align: center;

}

.sprocket-mosaic-g-loadmore .loadmore-text {
    font-size: 1.1em;

}

.sprocket-mosaic-g-loadmore .loadmore-info {
    font-size: 10px;

}

.sprocket-mosaic-g-loadmore .loadmore-info strong {
    font-weight: normal;

}

.sprocket-mosaic-g-loadmore .loadmore-all {
    display: none;

}

.sprocket-mosaic-g-loadmore .loadmore-all span {
    line-height: 36px;

}

.sprocket-mosaic-g-loadmore .loadmore-all .loadmore-info {
    display:none;

}

.sprocket-mosaic-g-loadmore.load-all {
    background: #151515;
    color: #fff;

}

.sprocket-mosaic-g-loadmore.load-all .loadmore-all {
    display: block;

}

.sprocket-mosaic-g-loadmore.load-all .loadmore-more {
    display: none;

}

.sprocket-mosaic-g-loadmore.loader .loadmore-more, .sprocket-mosaic-g-loadmore.loader .loadmore-text {
    display:none;

}

.sprocket-mosaic-g-loadmore.loader span {
    display: block;
    margin: 0 auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 6px solid rgba(255, 255, 255, 0.2);
    border-right: 6px solid rgba(255, 255, 255, 0.2);
    border-bottom: 6px solid rgba(255, 255, 255, 0.2);
    border-left: 6px solid #ffffff;
    -webkit-animation: loader 1.1s infinite linear;
    animation: loader 1.1s infinite linear;

}

.sprocket-mosaic-g-loadmore.loader span, .sprocket-mosaic-g-loadmore.loader span:after {
    border-radius: 50%;
    width: 24px;
    height: 24px;

}

.sprocket-mosaic-g-loadmore .loadmore-info, .sprocket-mosaic-g-loadmore .loadmore-text,
.sprocket-mosaic-g-loadmore .loadmore-info:hover, .sprocket-mosaic-g-loadmore .loadmore-text:hover {
    background-color: transparent !important;
    border: 0;
    margin: 0;
    padding: 0;

}

@-webkit-keyframes loader {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);


    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);


    }


}

@keyframes loader {

    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);


    }

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);


    }


}


/* Media Queries */
/*
@media only screen and (min-width: 768px) and (max-width: 959px) {

    .sprocket-mosaic-g-columns-1 > li, .sprocket-mosaic-g-columns-2 > li, .sprocket-mosaic-g-columns-3 > li, .sprocket-mosaic-g-columns-4 > li, .sprocket-mosaic-g-columns-5 > li, .sprocket-mosaic-g-columns-6 > li {
    width: 33.34%;
    
    }


}


@media only screen and (min-width: 481px) and (max-width: 767px) {

        .sprocket-mosaic-g-columns-1 > li, .sprocket-mosaic-g-columns-2 > li, .sprocket-mosaic-g-columns-3 > li, .sprocket-mosaic-g-columns-4 > li, .sprocket-mosaic-g-columns-5 > li, .sprocket-mosaic-g-columns-6 > li {
  width: 50%;
  
  }

  .sprocket-mosaic-g-info {
  display: none;
  
  }


}


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

        .sprocket-mosaic-g-columns-1 > li, .sprocket-mosaic-g-columns-2 > li, .sprocket-mosaic-g-columns-3 > li, .sprocket-mosaic-g-columns-4 > li, .sprocket-mosaic-g-columns-5 > li, .sprocket-mosaic-g-columns-6 > li {
  width: 50%;
  
  }

  .sprocket-mosaic-g-content {
  text-align: center;
  
  }

  .sprocket-mosaic-g-info, .sprocket-mosaic-g-tags, .sprocket-mosaic-g-text {
  display: none;
  
  }


}

*/