@charset "utf-8";

/* ----------------------------------------

Obrigada por acessar o código fonte.

Gostou? Entre em contato conosco!

Respeite nosso trabalho- Não copia comédia!

Personalizado por: sites.etc.br

/* Geral

---------------------------------------- */



.cores {

	box-shadow: 0px 0px 0px 10px rgba(255,255,255,1), 1px 1px 3px 10px rgba(0,0,0,0.2);

	-webkit-transition: -webkit-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

	-moz-transition: -moz-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

	-o-transition: -o-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

	-ms-transition: -ms-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

	transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;

}

.cores:hover {

	transition: all 1.95s;

	transform: scale(2.09);

	z-index: 100;

}

#ib-container {

	position: relative;

	width: 100%;

	margin: 3px auto;

	display: block;

}

#ib-container article {

	display: block;

	width: 80px;

	height: 80px;

	cursor: pointer;

	float: left;

	border: 2px solid #fff;

	text-align: left;

	text-transform: none;

	margin: 15px;

	z-index: 1;

	box-shadow: 0px 0px 0px 10px rgba(255,255,255,1),  1px 1px 3px 10px rgba(0,0,0,0.2);

	-webkit-transition: -webkit-transform 0.4s ease-in-out,  box-shadow 0.4s ease-in-out;

	-moz-transition: -moz-transform 0.4s ease-in-out,  box-shadow 0.4s ease-in-out;

	-o-transition: -o-transform 0.4s ease-in-out,  box-shadow 0.4s ease-in-out;

	-ms-transition: -ms-transform 0.4s ease-in-out,  box-shadow 0.4s ease-in-out;

	transition: transform 0.4s ease-in-out,  box-shadow 0.4s ease-in-out;

}

/* Hover Style for single item: scale up */

.ib-container article.active {

	-webkit-transform: scale(1.3);

	-moz-transform: scale(1.3);

	-o-transform: scale(1.3);

	-ms-transform: scale(1.3);

	transform: scale(1.3);

	z-index: 100;

 opacity;

1;

}

/* Cores */

.branco {

	background: #fff;

}

.branco:hover:after {

	content: 'Branco';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.preta {

	background: #000;

}

.preta:hover:after {

	content: 'Preto';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.marrom {

	background: #291405;

}

.marrom:hover:after {

	content: 'Marrom';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.cinza {

	background: #393939;

}

.cinza:hover:after {

	content: 'Cinza Chumbo';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.rosa {

	background: #ffdfe5;

}

.rosa:hover:after {

	content: 'Rosa Bebê';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.pink {

	background: #C71585;

}

.pink:hover:after {

	content: 'Pink';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.vinho {

	background: #460a2a;

}

.vinho:hover:after {

	content: 'Vinho';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.vermelho {

	background: #c40000;

}

.vermelho:hover:after {

	content: 'Vermelho';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.amarelol {

	background: #e7ff4e;

}

.amarelol:hover:after {

	content: 'Amarelo Limão';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.ouro {

	background: #ffc200;

}

.ouro:hover:after {

	content: 'Ouro';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.amarelos {

	background: #ffed00;

}

.amarelos:hover:after {

	content: 'Amarelo Sol';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.verde {

	background: #005000;

}

.verde:hover:after {

	content: 'Verde Bandeira';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.verdep {

	background: #008b8b;

}

.verdep:hover:after {

	content: 'Verde Piscina';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.verdel {

	background: #40ff00;

}

.verdel:hover:after {

	content: 'Verde Limão';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.petroleo {

	background: #004958;

}

.petroleo:hover:after {

	content: 'Petróleo';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.roxo {

	background: #9370db;

}

.roxo:hover:after {

	content: 'Roxo';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.lilas {

	background: #d4c1ef;

}

.lilas:hover:after {

	content: 'Lilás';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.azulb {

	background: #add8e6;

}

.azulb:hover:after {

	content: 'Azul Bebê';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.oceano {

	background: #6495ed;

}

.oceano:hover:after {

	content: 'Oceano';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.pacifico {

	background: #164e79;

}

.pacifico:hover:after {

	content: 'Pacífico';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.turqueza {

	background: #1198f2;

}

.turqueza:hover:after {

	content: 'Turqueza';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.royal {

	background: #0000ff;

}

.royal:hover:after {

	content: 'Royal';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.marinho {

	background: #000034;

}

.marinho:hover:after {

	content: 'Marinho';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}

.laranja {

	background: #ff4500;

}

.laranja:hover:after {

	content: 'Laranja';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}



.roxoescuro {

	background: #64267b;

}

.roxoescuro:hover:after {

	content: 'Roxo Escuro';

	position: absolute;

	padding: 2px;

	background: whitesmoke;

	font-size: 9px;

}