@font-face {
    font-family: HelveticaNeue-Bold;
    src: url(fonts/HelveticaNeue-Bold.otf);
}

@font-face {
    font-family: HelveticaNeue-Light;
    src: url(fonts/HelveticaNeue-Light.otf);
}

@font-face {
    font-family: Andes_Regular;
    src: url(fonts/Andes_Regular.otf);
}

.logoTop {
	text-align:right;
}

/* Tooltip container */
.tooltip2 {
  /*
  position: relative;
  display: inline-block;
  */
}

/* Tooltip text */
.tooltip2 .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  top: -5px;
  left: 125%;
  font-family: Andes_Regular;
  font-size:36px;
  line-height: 20px;
  padding:20px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
  visibility: visible;
}

.tooltip-right {

}

.label {
	width:150px;
	z-index:1000;
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	cursor:pointer;
}

.info {
	width:60px;
	z-index:1000;
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	cursor:pointer;
}

.title1 {
	font-family: HelveticaNeue-Bold;
    font-size: 35px;
    line-height: 20px;
    margin-top:18px;
}

.title2 {
	font-family: HelveticaNeue-Light;
	font-size: 30px;
	margin-bottom:12px;
}

.colorSwatch {
	width:45px;
	height:45px;
	border-radius: 24px;
	margin-top:8px;
}

.active {
  box-shadow:inset 2px 2px 2px 2px black;
}

.amarelo {
	background-color: #feff00;
}
.laranja {
	background-color: #ff8e00;
	margin-left: 8px;
}
.vermelho {
	background-color: #ff0006;
	margin-left: 8px;
}
.vinho {
	background-color: #ffffff;
	border-style: solid;
	border-color: #000000;
}
.rosa1 {
	background-color: #ff70ad;
	margin-left: 8px;	
}
.rosa2 {
	background-color: #ff0079;
	margin-left: 8px;
}
.azul1 {
	background-color: #00aafc;
}
.azul2 {
	background-color: #2f2d98;
	margin-left: 8px;
}
.azul3 {
	background-color: #00ac9d;
	margin-left: 8px;
}
.verde1 {
	background-color: #79c90e;
}
.verde2 {
	background-color: #006b31;
	margin-left: 8px;	
}
.castanho {
	background-color: #663606;
	margin-left: 8px;
}
.roxo1 {
	background-color: #aa51c9;
}
.roxo2 {
	background-color: #58088c;
	margin-left: 8px;
}
.cinza {
	background-color: #999999;
	margin-left: 8px;	
}
.preto {
	background-color: #fbccb2;
}
.torrado {
	background-color: #EFCA0F;
	margin-left: 8px;	
}
.cinza2 {
	background-color: #333333;
	margin-left: 8px;		
}

@media only screen and (min-width: 768px) {
	.mobile {
		display:none;
	}
	.desktop {
		display:block;
	}
}

@media only screen and (max-width: 767.98px) {
	.mobile {
		display:block;
	}
	.desktop {
		display:none;
	}
	.myRow {
		width:900px;
	}
	.colorSwatch {
		margin-left: 8px;
	}
	.logoTop {
		text-align:center;
	}

}

.ui-state-hover {
	transform: rotate(20deg);
}