@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

html,body,h1,span,div{margin:0; padding:0}
html,body,#paleta div:after{background:#ffffff}
/* love you too #0e0f10 <3 */

h1{
  margin:25px 0 0;
  text-align:center;
  letter-spacing:3px;
  font:300 42px/42px 'Open Sans Condensed',Helvetica;
  text-transform:uppercase;
  color:#a0a0a0; /* love you too #a0a0a0 <3 */
}
h1 span{cursor:help}

#paleta{
  width:816px;
  margin:25px auto 0;
  overflow:hidden;
  opacity:1;
  transition:opacity 300ms;
  transition-delay:300ms;
}
#paleta div{
  display:none;
  width:162px; height:162px;
  position:relative;
  float:left;
  margin:10px 0 0 10px;
  border-radius:50%;
}
#paleta div:after{
  display:inline-block;
  box-sizing:border-box;
  width:162px; height:162px;
  position:absolute;
  float:left;
  margin:5px 0 0 162px;
  padding-left:10px;
  border-radius:50%;
  letter-spacing:2px;
  text-align:left;
  font:300 18px/162px 'Open sans condensed',helvetica;
  text-transform:lowercase;
  color:#a0a0a0; 
  opacity:0;
  cursor:default;
  transition:margin 300ms;
}
#again{
  width:32px; height:32px;
  position:absolute;
  top:10px; left:100%;
  margin:0 0 0 -42px;
  opacity:0;
  background:url(http://source.codeams.tk/img/refresh.svg) no-repeat center center;
  background-size:contain;
  cursor:default;
  transition:all 300ms ease-out;
}
#again:active{transform:scale(1.3)}

/* 'After' styles */
#paleta div.in{
  display:inline-block;
  -webkit-animation:bounceIn 250ms ease-out;
          animation:bounceIn 250ms ease-out;
}
#paleta.animated{opacity:1;}
#paleta.animated div:after{
  margin:5px 0 0 10px; opacity:1;
}
#paleta.animated div:hover:after{margin-left:82px}
#again.in{
  transform:rotate(90deg); opacity:1;
  cursor:pointer;
}

/* Yup, using nth-child is not a good idea
   I'll use it anyway...

   Gris Mac 1 */
#paleta div:nth-child(1){background:#EAEBEE}
#paleta div:nth-child(1):after{content:"#EAEBEE"}

/* Gris Mac 2 */
#paleta div:nth-child(2){background:#E2E4E5}
#paleta div:nth-child(2):after{content:"#E2E4E5"}

/* "Azul Mac 1" */
#paleta div:nth-child(3){background:#1761FE}
#paleta div:nth-child(3):after{content:"#1761FE"}

/* Sky blue */
#paleta div:nth-child(4){background:#52b0e3}
#paleta div:nth-child(4):after{content:"#52b0e3"}

/* blue */
#paleta div:nth-child(5){background:#5368B5}
#paleta div:nth-child(5):after{content:"#5368B5"}

/* dark blue */
#paleta div:nth-child(6){background:#253057}
#paleta div:nth-child(6):after{content:"#253057"}

/* lightgray */
#paleta div:nth-child(7){background:#e0e0e0}
#paleta div:nth-child(7):after{content:"#e0e0e0"}

/* green */
#paleta div:nth-child(8){background:#1aac6a}
#paleta div:nth-child(8):after{content:"#1aac6a"}

/* purpura */
#paleta div:nth-child(9){background:#6450bf}
#paleta div:nth-child(9):after{content:"#6450bf"}


#paleta div:nth-child(10){background:#dfe8ec}
#paleta div:nth-child(10):after{content:"#dfe8ec"}


#paleta div:nth-child(11){background:#00aaff}
#paleta div:nth-child(11):after{content:"#00aaff"}

#paleta div:nth-child(12){background:#002233}
#paleta div:nth-child(12):after{content:"#002233"}

#paleta div:nth-child(13){background:#365463}
#paleta div:nth-child(13):after{content:"#365463"}

#paleta div:nth-child(14){background:#d1dbe0}
#paleta div:nth-child(14):after{content:"#d1dbe0"}

#paleta div:nth-child(15){background:#e7ecef}
#paleta div:nth-child(15):after{content:"#e7ecef"}

#paleta div:nth-child(15){background:#555b5e}
#paleta div:nth-child(15):after{content:"#555b5e"}

@-webkit-keyframes bounceIn{
	  0%{opacity:0; transform:scale(0.2)}
	  50%{opacity:0.9; transform:scale(1.03)}
	  80%{opacity:1; transform:scale(0.9)}
	  100%{transform:scale(1)}
}

@keyframes bounceIn{
	  0%{opacity:0; transform:scale(0.2)}
	  50%{opacity:0.9; transform:scale(1.03)}
	  80%{opacity:1; transform:scale(0.9)}
	  100%{transform:scale(1)}
}