/* extra css for debug */
.flexgrid .fg-block { color: #fff; text-align: center; font-weight: bold; line-height: 50px; vertical-align: middle; overflow: hidden; }

/* graphic stuff */
.flexgrid,
.flexgrid h2,
.flexgrid a.fg-cta { font-size: 12px; font-family: "nimbus-sans", "arial", sans-serif; font-weight: 700; }
.flexgrid h2 { text-transform: uppercase; }
.flexgrid .fg-user-name, .flexgrid .fg-user-name a { font-size: 14px; font-weight: 900; letter-spacing: 0.2px; }
.flexgrid, .flexgrid a { color: #fff; }
.flexgrid a { text-decoration: none; }
.flexgrid .fg-cta,
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-blurred-image,
.flexgrid .fg-block .fg-inner-container .fg-overlay { transition: all 0.1s ease; }

/* commons */
.flexgrid .fg-cta { background-color: #ffffff; text-transform: uppercase; height: 30px; font-size: 12px; color: #222231; font-weight: 700; line-height: 30px; box-sizing: border-box; padding-left: 10px; padding-right: 10px;
-webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
	position: relative;
}
.flexgrid .fg-cta > span { font-weight: 700; }
.flexgrid .fg-cta:hover:hover { color: #525F7F; }
.flexgrid .fg-cta.active { background: #1BD1DE; color: #fff;  }

/* flexgrid css */
.flexgrid { width: 100%; }
.flexgrid .fg-cleaner { clear: both; height: 0 !important; float: none !important; }
.flexgrid .fg-dest { width: 100%; height: 100%; }
.flexgrid .fg-block { float: left; }
.flexgrid .fg-block .fg-main-container { width: 100%; height: 100%; padding: 0px; box-sizing: border-box; }
.flexgrid .fg-block .fg-inner-container { background-color: #f2f2f2; height: 100%; width: 100%; overflow: hidden; position: relative; }
.flexgrid .fg-block .fg-inner-container > a { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; }

/* border radius */
.flexgrid .fg-cta { -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.flexgrid .fg-block .fg-inner-container > a,
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-main-image,
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-blurred-image,
.flexgrid .fg-block .fg-overlay { -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; }

/* image container */
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-blurred-image { display: none; }
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-main-image,
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-blurred-image { width: 100%; height: 100%; }
.flexgrid .fg-block .fg-inner-container > a .fg-image-container img.fg-blurred-image { opacity: 0; position: absolute; top: 0px; left: 0px;  }
.flexgrid .fg-block .fg-inner-container:hover { cursor: pointer; }
.flexgrid .fg-block:not(.g-gift-smallcaam) .fg-inner-container:hover > a .fg-image-container img.fg-blurred-image { opacity: 1; }

/* gift small caam */
.flexgrid .fg-block.g-gift-smallcaam .fg-overlay { display: none; }
.flexgrid .fg-block.g-gift-smallcaam .fg-image-container { display: block; width: 100%; height: 100%; background-position: center center; }
.flexgrid .fg-block.g-gift-smallcaam:not(.g-format-portrait) .fg-image-container { background-image: url('../../images/grid/cadre-v2-hor@2x.jpg'); background-size: cover; }
.flexgrid .fg-block.g-gift-smallcaam:not(.g-format-portrait) .fg-image-container .fg-main-image { transform-origin: 49.9% 51%; transform: scale(0.53); }
.flexgrid .fg-block.g-gift-smallcaam.g-format-portrait .fg-image-container { background-image: url('../../images/grid/cadre-v2-ver-same-size@2x.jpg'); background-size: cover; }
.flexgrid .fg-block.g-gift-smallcaam.g-format-portrait .fg-image-container .fg-main-image { transform-origin: 49% 51%; transform: scale(0.62); }


/* overlay */
.flexgrid .fg-block .fg-inner-container:hover .fg-overlay { opacity: 1; }
.flexgrid .fg-block .fg-overlay { opacity: 0; pointer-events: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(34, 35, 50, 0.5); }
.flexgrid .fg-block .fg-overlay a { pointer-events: auto; }

.flexgrid .fg-block .fg-overlay .fg-infos { position: absolute; left: 20px; padding-right: 2%; bottom: 15px; }
.flexgrid .fg-block .fg-overlay .fg-infos:not(.no-height) { height: 50px; }
.flexgrid .fg-block .fg-overlay .fg-user-avatar { float: left; width: 50px; }
.flexgrid .fg-block .fg-overlay .fg-titles { overflow: hidden; text-align: left; padding-left: 10px; padding-top: 1px; line-height: 18px; }
.flexgrid .fg-block .fg-overlay .fg-titles .fg-title { padding-top: 3px; }
.flexgrid .fg-block .fg-overlay .fg-titles .fg-title, .flexgrid .fg-block .fg-overlay .fg-titles .fg-title h2 { text-transform: lowercase; font-weight: 200; font-size: 14px; letter-spacing: 0.2px; }
.flexgrid .fg-block .fg-overlay .fg-titles .fg-title:first-letter, .flexgrid .fg-block .fg-overlay .fg-titles .fg-title h2:first-letter { text-transform: uppercase; }
.flexgrid .fg-block .fg-overlay .fg-titles .fg-user-name, .flexgrid .fg-block .fg-overlay .fg-titles .fg-user-name a { text-transform: lowercase; }
.flexgrid .fg-block .fg-overlay .fg-titles .fg-user-name:first-letter, .flexgrid .fg-block .fg-overlay .fg-titles .fg-user-name a:first-letter { text-transform: uppercase; }
.flexgrid .fg-block .fg-overlay .fg-user-avatar .fg-avatar-container { display: block; width: 50px; height: 50px; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.flexgrid .fg-block .fg-overlay .fg-user-avatar .fg-avatar-container > img { width: 100%; }
.flexgrid .fg-block .fg-overlay .fg-toolbar { float: left; margin-left: 20px; margin-top: 10px; }
.flexgrid .fg-block .fg-overlay .fg-toolbar .fg-cta { float: left; margin-bottom: 5px; }
.flexgrid .fg-block .fg-overlay .fg-toolbar .fg-cta:not(:last-child) { margin-right: 5px; }
.flexgrid .fg-block .fg-overlay .fg-winner-rank { top: 15px; right: 10px; position: absolute; line-height: initial; font-size: 14px; }
@media (max-width: 767px) {
	.flexgrid .fg-block .fg-overlay .fg-infos:not(.no-height) { height: 60px; }
	.flexgrid .fg-block .fg-overlay .fg-user-avatar { width: 60px; }
	.flexgrid .fg-block .fg-overlay .fg-user-avatar .fg-avatar-container { width: 40px; height: 40px; }
}