/* Geral para quadrados */
.quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear;
	transform-style: preserve-3d;
	transition: all 0.3s linear;
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* ---- */
/* Back dos quadrados horizontais*/
.face.hback {
	display: block;
	-webkit-transform: rotateX(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateX(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateX(180deg);
	-o-box-sizing: border-box;
	transform: rotateX(180deg);
	box-sizing: border-box;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */
/* Back dos quadrados verticais*/
.face.vback {
	display: block;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateY(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateY(180deg);
	-o-box-sizing: border-box;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* Quadrado horizontal 2 */
.h2_quadrado {
	position: relative;
	width: 201px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	cursor: pointer;
}
.h2_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.1s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.1s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.1s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.1s;
}
.h2_quadrado:hover .h2_quadrado_link, .h2_quadrado.hover_effect .h2_quadrado_link {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}
.h2_btn {
	width: 181px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */
/* Quadrado horizontal 3 */
.h3_quadrado {
	position: relative;
	width: 302px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	cursor: pointer;
}
.h3_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.1s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.1s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.1s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.1s;
}
.h3_quadrado:hover .h3_quadrado_link, .h3_quadrado.hover_effect .h3_quadrado_link {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}
.h3_btn {
	width: 282px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */
/* Quadrado horizontal 4 */
.h4_quadrado {
	position: relative;
	width: 403px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
	cursor: pointer;
}
.h4_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.1s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.1s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.1s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.1s;
}
.h4_quadrado:hover .h4_quadrado_link, .h4_quadrado.hover_effect .h4_quadrado_link {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}
.h4_btn {
	width: 383px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* Quadrado vertical 1 */
.v1_quadrado {
	position: relative;
	width: 100px;
	height: 100px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
	cursor: pointer;
}
.v1_quadrado:hover .quadrado_link, .v1_quadrado.hover_effect .quadrado_link {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.v1_btn {
	width: 80px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
/* ---- */


/* Quadrado horizontal ARTISTA */
.a_quadrado {
	position: relative;
	width: 201px;
	height: 101px;
	margin-right: 1px;
	margin-top: 1px;
	z-index: 1;
	float: left;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	cursor: pointer;
}
.a_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.3s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.3s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.3s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.3s;
}
.artistas_artista:hover .a_quadrado_link {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}
.a_btn {
	width: 181px;
	height: 81px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
.face.artistaback {
	display: block;
	-webkit-transform: rotateX(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateX(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateX(180deg);
	-o-box-sizing: border-box;
	transform: rotateX(180deg);
	box-sizing: border-box;
	padding: 10px;
	background-color: #00FFF8;
	font-size: 18px;
	margin-top: 1px;
	height: 100px;
}
/* Quadrado pequeno ARTISTA */
.a1_quadrado {
	position: relative;
	width: 100px;
	height: 100px;
	z-index: 1;
	float: left;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
	cursor: pointer;
}
.a1_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.2s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.2s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.2s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.2s;
}
.a2_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.1s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.1s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.1s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.1s;
}
.artistas_artista:hover .a1_quadrado_link {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -transition-delay: 0.1s;
}
.artistas_artista:hover .a2_quadrado_link {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -transition-delay: 0.2s;
}
.a1_btn {
	width: 81px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
}
.face.a1back {
	display: block;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateY(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateY(180deg);
	-o-box-sizing: border-box;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
	width: 100px;
}
.face.a2back {
	display: block;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateY(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateY(180deg);
	-o-box-sizing: border-box;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
	width: 99px;
	margin-right: 1px;
}
/* ---- */

/* LINKS */
.li_quadrado_link {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.3s linear 0.1s;
	-moz-transform-style: preserve-3d;
	-moz-transition: all 0.3s linear 0.1s;
	-o-transform-style: preserve-3d;
	-o-transition: all 0.3s linear 0.1s;
	transform-style: preserve-3d;
	transition: all 0.3s linear 0.1s;
}
.h2_quadrado:hover .li_quadrado_link, .h2_quadrado.hover_effect .li_quadrado_link {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
	-webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}
.face.liback {
	display: block;
	-webkit-transform: rotateX(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateX(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateX(180deg);
	-o-box-sizing: border-box;
	transform: rotateX(180deg);
	box-sizing: border-box;
	padding: 10px;
}
.li_btn {
	width: 181px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
/* ---- */

/* + INFO */
.info_btn {
	width: 80px;
	height: 80px;
	margin-right: 1px;
	float: left;
	padding: 10px;
	background-image: url(../images/layout/quadrado_fundo.jpg);
	background-repeat: repeat;
}
.face.infoback {
	display: block;
	-webkit-transform: rotateY(180deg);
	-webkit-box-sizing: border-box;
	-moz-transform: rotateY(180deg);
	-moz-box-sizing: border-box;
	-o-transform: rotateY(180deg);
	-o-box-sizing: border-box;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
}
/* ---- */