/* ---------------------------------------------------------- */
/* ------------------- MOSAICO IMPERIAL --------------------- */
/* ---------------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Raleway);

/* ------------------------- BASIS -------------------------- */

.mosaico-museu .item {
	width: 32.5%;
	height: 170px;
	margin: 0.4%;
	overflow: hidden;
}

.mosaico-museu .item.w2 {
	width: 65.7%;
}

.mosaico-museu .item [class^="background"] > div:first-child {
	display: block;
	width: 43%;
	float: left;
	overflow: hidden;
}

.mosaico-museu .item [class^="background"] div:last-child {
	display: block;
	width: 57%;
	float: right;
	overflow: hidden;
}

/* -------------------- BASIS INVERTS ---------------------- */

.mosaico-museu .item.w2 [class^="background"] div:first-child {
	display: block;
	width: 28%;
	float: left;
	overflow: hidden;
}

.mosaico-museu .item.w2 [class^="background"] div:last-child {
	display: block;
	width: 72%;
	float: right;
	overflow: hidden;
}

.mosaico-museu .item.invert > [class^="background"] div:first-child {
	display: flex;
	justify-content: flex-end;
	align-content: flex-end;
	flex-flow: row wrap;
	float: right;
	height: 160px;
}

.mosaico-museu .item.invert.semi-invert > [class^="background"] div:first-child {
	align-content: flex-start;
}

.mosaico-museu .item.invert [class^="background"] div:last-child {
	display: block;
	float: left;
}

.mosaico-museu .item > [class^="background"] div:first-child {
	display: block;
	width: 43%;
	float: left;
	overflow: hidden;
}

.mosaico-museu .item.throw-down > [class^="background"] div:first-child {
	display: flex;
	height: 160px;
}

/* ----------------------- ANIMATION ------------------------ */

.mosaico-museu .animation {
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
	-o-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;
}

/* ------------------------- LINKS -------------------------- */

.mosaico-museu .item a {
	text-decoration: none;
	color: inherit;
}

/* ------------------------- CORES -------------------------- */

.mosaico-museu [class*="background"] {
	width: 100%;
	height: 100%;
}

.background-gray {
	background: #454545;
}

.background-wine {
	background: #61222a;
}

/* ------------------------- HOVERS ------------------------- */

.mosaico-museu .background-wine:hover {
	background: #FFFFFF;
}

.mosaico-museu .background-wine:hover h4,
.mosaico-museu .background-wine:hover h3,
.mosaico-museu .background-wine:hover h2,
.mosaico-museu .background-wine:hover p {
	color: #61222a;
}

.mosaico-museu .background-gray:hover {
	background: #FFFFFF;
}

.mosaico-museu .background-gray:hover h4,
.mosaico-museu .background-gray:hover h3,
.mosaico-museu .background-gray:hover h2,
.mosaico-museu .background-gray:hover p {
	color: #454545;
}

/* ------------------------- FONTS -------------------------- */

/* body.layout-mode-responsive */

.mosaico-museu .item h4,
.mosaico-museu .item h3,
.mosaico-museu .item h2,
.mosaico-museu .item p {
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	line-height: 1.5em;
	color: #FFFFFF;
	padding: 0 10px;
	font-size: 13pt;
	margin: 10px 0 0;
}

.mosaico-museu .item.invert h4,
.mosaico-museu .item.invert h3,
.mosaico-museu .item.invert h2,
.mosaico-museu .item.invert p {
	text-align: right;
}

.mosaico-museu .item.invert:not(.semi-invert) h4,
.mosaico-museu .item.invert:not(.semi-invert) h3,
.mosaico-museu .item.invert:not(.semi-invert) h2,
.mosaico-museu .item.invert:not(.semi-invert) p {
	flex: 1 0 50%;
	align-self: flex-end;
}

.mosaico-museu .item.throw-down h4, 
.mosaico-museu .item.throw-down h3, 
.mosaico-museu .item.throw-down h2, 
.mosaico-museu .item.throw-down p {
	flex: 1 0 50%;
	text-align: left;
	align-self: flex-end;
}

.mosaico-museu .item h4 {
	font-size: 11pt;
}

.mosaico-museu .item p {
	font-size: 10pt;
	margin: 0;
}

/* ---------------------- INVISIBLE ------------------------- */

.mosaico-museu .item:hover h4 {
	display: block !important; 
}

/* ------------------------ IMAGES -------------------------- */

.mosaico-museu .item img {
	float: right;
	width: auto;
	max-height: 185px;
	max-width: none;
}

.mosaico-museu .item.invert img {
	float: left;
}

.mosaico-museu .item img.left {
	float: left;
}

.mosaico-museu .item img.right {
	float: right;
}

/* ---------------------------------------------------------- */
/* ---------------------- MEDIA QUERIES --------------------- */
/* ---------------------------------------------------------- */

/* Entre Tamanhos */

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

	.mosaico-museu .item {
		width: 48.6%;
	}
	
	.mosaico-museu .item.w2 {
		width: 98%;
	}

	.mosaico-museu .item.grow {
		width: 98%;
	}
	
	.mosaico-museu .item.shrink {
		width: 48.6%;
	}

}

/* Small Screen */

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

	.mosaico-museu .item {
		width: 98%;
	}

	.mosaico-museu .item.w2 {
		width: 98%;
	}

}

/* Celular */

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

	.mosaico-museu .item {
		width: 98%;
	}

	.mosaico-museu .item.w2 {
		width: 98%;
	}

}