/**
* @version   $Id: mosaic.css 7071 2013-02-01 02:06:19Z josh $
* @author    RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2013 RocketTheme, LLC
* @license   http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
*/

/* Mosaic - Core */
.sprocket-mosaic {position: relative;margin: 0 -10px;}
.sprocket-mosaic:after {display: table;content: "";clear: both;}
.sprocket-mosaic .sprocket-mosaic-header ul {list-style: none;margin: 0;padding: 0;}
.sprocket-mosaic .sprocket-mosaic-container {position: relative;clear: both;}
#main .sprocket-mosaic .sprocket-mosaic-container {margin: 0; padding: 0;}

/* Mosaic - Overlay */
.sprocket-mosaic-overlay {display: none;position: absolute;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:2;}
.sprocket-mosaic-overlay .css-loader-wrapper .css-loader {background-position: 50% 50%;background-repeat: no-repeat; opacity: 0-7;}
.sprocket-mosaic.refreshing .sprocket-mosaic-overlay {display: block;}

/* Mosaic - Header */
.sprocket-mosaic .sprocket-mosaic-header {margin-bottom: 10px;}
.sprocket-mosaic .sprocket-mosaic-header li {display: inline-block;}
.sprocket-mosaic-pagination-hidden {display: none;}

/* Mosaic - Content */
.sprocket-mosaic-content-container {position: absolute;z-index: 99;font-weight: 100; background-color: #00000057; padding: 13%; height: 75%;}
.sprocket-mosaic-title-container {margin: 0;top: 0; right: 0; left: 0;opacity: 1; width: 320px; text-align: center; font-size: 1.2em;  line-height: 1.4; }
.sprocket-mosaic-text-container {padding: 15px;opacity: 0;margin-top: 50px;}
.sprocket-mosaic-title-container + .sprocket-mosaic-text-container {margin-top: 0;}
.sprocket-mosaic-image-container:hover .sprocket-mosaic-text-container {opacity: 1;}
.sprocket-mosaic-container {margin: 0;padding: 0;list-style: none;}
.sprocket-mosaic-container li {display: inline-block;}
.sprocket-readmore {white-space: nowrap;}

/* Mosaic - Columns */
.sprocket-mosaic-columns-1 li {width: 100%;}
.sprocket-mosaic-columns-2 li {width: 50%;}
.sprocket-mosaic-columns-3 li {width: 33.333333333333336%;}
.sprocket-mosaic-columns-4 li {width: 25%;}
.sprocket-mosaic-columns-5 li {width: 20%;}
.sprocket-mosaic-columns-6 li {width: 16.666666666666668%;}

/* Mosaic - Item */
.sprocket-mosaic-item {display:block;}
.sprocket-mosaic-item .sprocket-mosaic-image {width: 100%;}
.sprocket-mosaic-item .title {margin-bottom: 10px;}

/* Tweaks */
.sprocket-mosaic-item {margin: 10px;} /* Margin defines the Gutter size. The actual gutter size is doubled. To have 10 for example, you need margin: 5px; */
.sprocket-mosaic .sprocket-mosaic-container {margin: -9px;} /* Whatever is the gutter size, the container has to be negativiley applied in order too loose first and last columns margins */


/* Custom stuff */
.sprocket-mosaic-item .sprocket-mosaic-title, .sprocket-mosaic-item .sprocket-mosaic-info {text-transform: none;}
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 2.4em;
    text-shadow: 0px 0px 5px #000;
    line-height: 1.6;
    font-weight: 900; }
.sprocket-mosaic-item .sprocket-mosaic-title a {line-height: 1.2em;}
.sprocket-mosaic-item .sprocket-mosaic-infos {font-size: 13px;font-weight: bold;margin: 0 0 5px;}
.sprocket-mosaic-item .sprocket-mosaic-infos .author {font-style: italic;}
.sprocket-mosaic-item .sprocket-mosaic-text { display: block; text-shadow: 0px 0px 5px #000;}
.sprocket-mosaic-item {position: relative; *display: inline-block;}
#main .sprocket-mosaic .sprocket-mosaic-order ul li, #main .sprocket-mosaic .sprocket-mosaic-order ul li,
.sprocket-mosaic .sprocket-mosaic-order li, .sprocket-mosaic .sprocket-mosaic-order li {border-bottom: 2px solid transparent;padding: 1px 6px;margin: 0;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-o-user-select: none;-ms-user-select: none;user-select: none;}
#main .sprocket-mosaic .sprocket-mosaic-filter ul li, #main .sprocket-mosaic .sprocket-mosaic-filter ul li,
.sprocket-mosaic .sprocket-mosaic-filter li, .sprocket-mosaic .sprocket-mosaic-filter li {border-bottom: 2px solid transparent;padding: 1px 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-item .readon {margin-top: 15px;}
.sprocket-mosaic-image-container {position: relative;overflow: hidden;cursor: pointer; display: flex; justify-content: center; align-items: center; }

.sprocket-mosaic-shadow {opacity: 0;display: inline-block;position: absolute;bottom: 0;height: 100%;width: 100%;z-index: 101;-webkit-transition: opacity 0.2s ease-in;-moz-transition: opacity 0.2s ease-in;-o-transition: opacity 0.2s ease-in;-ms-transition: opacity 0.2s ease-in;transition: opacity 0.2s ease-in;}
.sprocket-mosaic-image-container:hover .sprocket-mosaic-hover, .sprocket-mosaic-image-container:hover .sprocket-mosaic-shadow {opacity: 1;}
.sprocket-mosaic-hovercontent {display: none;}
.sprocket-mosaic-hovercontent span {display: block;font-size: 3em;margin-bottom: 6px;}
.sprocket-mosaic-image-container:hover .sprocket-mosaic-hovercontent {opacity: 1;-webkit-transition: opacity 0.4s ease-in;-moz-transition: opacity 0.4s ease-in;-o-transition: opacity 0.4s ease-in;-ms-transition: opacity 0.4s ease-in;transition: opacity 0.4s ease-in;}
.sprocket-readmore span {display: block;}
.sprocket-mosaic-item .sprocket-mosaic-head {margin: 0 -10px;padding: 0 10px;}

/* Media Queries */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .sprocket-mosaic-columns-1 li, .sprocket-mosaic-columns-2 li, .sprocket-mosaic-columns-3 li, .sprocket-mosaic-columns-4 li, .sprocket-mosaic-columns-5 li, .sprocket-mosaic-columns-6 li {width: 33.34%;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
	.sprocket-mosaic-columns-1 li, .sprocket-mosaic-columns-2 li, .sprocket-mosaic-columns-3 li, .sprocket-mosaic-columns-4 li, .sprocket-mosaic-columns-5 li, .sprocket-mosaic-columns-6 li {width: 50%;}
}

@media only screen and (max-width: 480px) {
	.sprocket-mosaic-columns-1 li, .sprocket-mosaic-columns-2 li, .sprocket-mosaic-columns-3 li, .sprocket-mosaic-columns-4 li, .sprocket-mosaic-columns-5 li, .sprocket-mosaic-columns-6 li {width: 100%;}
}