.container-avatar{
	width: 100%;
	height: auto;
	padding: 50px;
	margin: 100px 0 0 0;
	border-radius: 8px;
	border: 1px solid rgba(24, 33, 45, 0.06);
	background: #ffffff;
	box-shadow: 0px 4px 6px 0px rgba(24, 33, 45, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.montagem-avatar{
	width: 200px;
	height: 200px;
	margin: -150px 0 30px;
	padding: 0;
	overflow: hidden;
	border-radius: 1000px;
	position: relative;
}

.montagem-avatar div{
	width: 100%;
	height: 100%;
	position: absolute;
}


.montagem-avatar img{
	position: absolute;
}


.montagem-olhos img{
	z-index: 108;
}

.montagem-nariz img{
	z-index: 107;
}

.montagem-barba img{
	z-index: 105;
}

.montagem-boca img{
	z-index: 106;
}

.montagem-corpo img{
	z-index: 104;

}

.montagem-cabelo img{
	z-index: 103;
}

.montagem-pele img{
	z-index: 102;
}

.montagem-fundo{
	z-index: 101;
}


/* Fundos */


.fundo-cor-1{
	background: #93A7FF !important;
}

.fundo-cor-2{
	background: #B0E737 !important;
}

.fundo-cor-3{
	background: #FF7A9A !important;
}

.fundo-cor-4{
	background: #B379F7 !important;
}

.fundo-cor-5{
	background: #FF6674 !important;
}

.fundo-cor-6{
	background: #89E6E4 !important;
}

.fundo-cor-7{
	background: #FFCC65 !important;
}

.fundo-cor-8{
	background: #F8FBFF !important;
}


/* Pele Cores */

.pele-cor-1{
 	filter: invert(73%) sepia(86%) saturate(437%) hue-rotate(349deg) brightness(100%) contrast(105%);
}
.pele-cor-2{
	filter: invert(86%) sepia(3%) saturate(3149%) hue-rotate(319deg) brightness(102%) contrast(97%);
}
.pele-cor-3{
	filter: invert(91%) sepia(49%) saturate(5396%) hue-rotate(294deg) brightness(101%) contrast(90%);
}
.pele-cor-4{
	filter: invert(85%) sepia(9%) saturate(5509%) hue-rotate(305deg) brightness(96%) contrast(87%);
}
.pele-cor-5{
	filter: invert(77%) sepia(78%) saturate(488%) hue-rotate(313deg) brightness(96%) contrast(85%);
}
.pele-cor-6{
	filter: invert(65%) sepia(8%) saturate(889%) hue-rotate(320deg) brightness(92%) contrast(85%);
}
.pele-cor-7{
	filter: invert(39%) sepia(24%) saturate(907%) hue-rotate(325deg) brightness(92%) contrast(85%);
}
.pele-cor-8{
	filter: invert(23%) sepia(7%) saturate(2932%) hue-rotate(322deg) brightness(99%) contrast(86%);
}
.pele-cor-9{
	filter: invert(93%) sepia(17%) saturate(227%) hue-rotate(102deg) brightness(95%) contrast(90%);  
}




/* Cabelo Cores */


.cabelo-cor-1{
	filter: invert(18%) sepia(34%) saturate(564%) hue-rotate(221deg) brightness(92%) contrast(96%);
}

.cabelo-cor-2{
	filter: invert(39%) sepia(15%) saturate(1375%) hue-rotate(209deg) brightness(93%) contrast(86%);
}

.cabelo-cor-3{
	filter: invert(73%) sepia(73%) saturate(344%) hue-rotate(145deg) brightness(86%) contrast(93%);
}


.cabelo-cor-4{
	filter: invert(88%) sepia(20%) saturate(161%) hue-rotate(196deg) brightness(99%) contrast(94%);
}


.cabelo-cor-5{
	filter: invert(32%) sepia(6%) saturate(2518%) hue-rotate(314deg) brightness(89%) contrast(91%);
}


.cabelo-cor-6{
	filter: invert(63%) sepia(57%) saturate(469%) hue-rotate(335deg) brightness(101%) contrast(90%);
}


.cabelo-cor-7{
	filter: invert(55%) sepia(62%) saturate(1893%) hue-rotate(309deg) brightness(94%) contrast(86%);
}


.cabelo-cor-8{
	filter: invert(44%) sepia(87%) saturate(559%) hue-rotate(309deg) brightness(93%) contrast(88%);
}





/* Barba Cores */


.barba-cor-1{
	filter: invert(18%) sepia(34%) saturate(564%) hue-rotate(221deg) brightness(92%) contrast(96%);
}

.barba-cor-2{
	filter: invert(39%) sepia(15%) saturate(1375%) hue-rotate(209deg) brightness(93%) contrast(86%);
}

.barba-cor-3{
	filter: invert(73%) sepia(73%) saturate(344%) hue-rotate(145deg) brightness(86%) contrast(93%);
}


.barba-cor-4{
	filter: invert(88%) sepia(20%) saturate(161%) hue-rotate(196deg) brightness(99%) contrast(94%);
}


.barba-cor-5{
	filter: invert(32%) sepia(6%) saturate(2518%) hue-rotate(314deg) brightness(89%) contrast(91%);
}


.barba-cor-6{
	filter: invert(63%) sepia(57%) saturate(469%) hue-rotate(335deg) brightness(101%) contrast(90%);
}


.barba-cor-7{
	filter: invert(55%) sepia(62%) saturate(1893%) hue-rotate(309deg) brightness(94%) contrast(86%);
}


.barba-cor-8{
	filter: invert(44%) sepia(87%) saturate(559%) hue-rotate(309deg) brightness(93%) contrast(88%);
}




/* Corpo Cores */


.corpo-cor-1{
	filter: invert(34%) sepia(65%) saturate(1540%) hue-rotate(210deg) brightness(104%) contrast(109%);
}

.corpo-cor-2{
	filter: invert(23%) sepia(61%) saturate(3577%) hue-rotate(241deg) brightness(102%) contrast(103%);
}

.corpo-cor-3{
	filter: invert(39%) sepia(83%) saturate(265%) hue-rotate(95deg) brightness(98%) contrast(95%);
}

.corpo-cor-4{
	filter: invert(47%) sepia(40%) saturate(1325%) hue-rotate(304deg) brightness(103%) contrast(92%);
}

.corpo-cor-5{
	filter: invert(49%) sepia(83%) saturate(4168%) hue-rotate(234deg) brightness(82%) contrast(91%);
}

.corpo-cor-6{
	filter: invert(30%) sepia(99%) saturate(1661%) hue-rotate(334deg) brightness(97%) contrast(83%);
}

.corpo-cor-7{
	filter: invert(76%) sepia(29%) saturate(684%) hue-rotate(122deg) brightness(92%) contrast(95%);
}

.corpo-cor-8{
	filter: invert(74%) sepia(31%) saturate(936%) hue-rotate(355deg) brightness(98%) contrast(95%);
}







.box-gerar-aleatorio{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 20px 0 60px 0;
	display: flex;
	justify-content: center;
}

.box-gerar-aleatorio .bt-gerar-aleatorio{
	font-family: 'HEINEKEN Core';
	font-size: var(--fs-p);
	line-height: var(--lh-p);
	color: var(--cor-2);
	cursor: pointer;
	text-decoration: underline;
}

.box-gerar-aleatorio .bt-gerar-aleatorio:hover{
	text-decoration: underline;
}

.box-gerar-aleatorio .bt-gerar-aleatorio img{
	width: auto;
	height: var(--fs-p);

}














.controles-avatar{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.linha-de-baixo{
	margin: 50px 0 0 0;
}

.controles-avatar .box-controles-avatar{
	width: 20%;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.controles-avatar .box-controles-avatar h6{
	font-size: var(--fs-p-s);
	text-align: center;
	color: var(--cor-6);
	font-weight: 300;
	letter-spacing: 2.6px;
	margin: 0;
}

.controles-avatar .box-controles-avatar .box-montagem{
	width: 100%;
	height: auto;
	margin: 20px 0 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.controles-avatar .box-controles-avatar .box-montagem .box-setas{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: none;
	justify-content: space-between;
	align-items: center;
}



.controles-avatar .box-controles-avatar .box-montagem .box-setas .bt-anterior, .controles-avatar .box-controles-avatar .box-montagem .box-setas .bt-proximo{
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	filter: none !important;
}

.controles-avatar .box-controles-avatar .box-montagem img{
	width: 70px;
	height: 70px;
	margin: 0;
	padding: 0;
}


.paleta-cores{
	width: 100%;
	height: auto;
	margin: 20px 0 0 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.paleta-cores .bt-cor{
	width: 25px;
	height: 25px;
	margin: 5px;
	padding: 0;
	box-shadow: 0px 4px 6px 0px rgba(24, 33, 45, 0.06);
	border-radius: 4px;
	background: #000000;
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}


.paleta-cores .bt-cor-selecionado:before{
	content: " ";
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	position: absolute;
	background: url(../img/avatar/checkmark.svg) center center no-repeat;
	background-size: contain;

}










@media (max-width: 992px) {


.controles-avatar{
	flex-direction: column;
}

.controles-avatar .box-controles-avatar{
	width: 100%;
}

.paleta-cores{
	justify-content: flex-start;
}


}