@import url(http://weloveiconfonts.com/api/?family=entypo);
.board:after {
  clear: both;
  content: "";
  display: table;
}
.board:before {
  content: "";
  display: table;
}

#contenedor_graf_barras *, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



h5 {
	font-family: 'dinregular';
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1;
	margin: 0.1em;
	position: relative;
	z-index: 99;
	padding-bottom: 20px;
	color: #c88400;
}


/***********************/
.board {  
  width: 940px;
  margin: 0 auto;
}

section.box {
	width: 220px;
	text-align: center;
	margin-top: 10px;
	display: block;
	float: left;
	background: #fcfcfc;
	position: relative;
	height: 215px;
	border: 1px solid #cdcbcb;
	overflow: hidden;
}

.tile {
	padding: 7px 7px 7px 7px;
	position: absolute;
	width: 210px;
	height: 180px;
	-webkit-transition: top 0.55s ease-in;
	-moz-transition: top 0.55s ease-in;
	-o-transition: top 0.55s ease-in;
	transition: top 0.55s ease-in;
	background-color: #fcfcfc;
	margin-top: 10px;
}
.tile:hover {
  cursor: pointer;
}

.desc {
	font-family: 'dinregular';
	font-size: 15px;
	top: 100%;
	padding-top: 40px;
	background: #fff span;
	background-display: block;
	background-margin: 0 0 .75em;
	color: #595959;
}

/*** Animations ***/
@-webkit-keyframes spinOut {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 1.0;
  }

  100% {
    -webkit-transform: rotate(360deg);
    opacity: 0;
  }
}

@-webkit-keyframes spinIn {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotate(-360deg);
    opacity: 1.0;
  }
}

@-webkit-keyframes scootOut {
  0% {
    -webkit-transform: translateY(0);
  }

  5% {
    -webkit-transform: translateY(-15px);
  }

  100% {
    -webkit-transform: translateY(110px);
  }
}

@-webkit-keyframes scootIn {
  0% {
    -webkit-transform: translateY(110px);
  }

  66% {
    -webkit-transform: translateY(-5px);
  }

  100% {
    -webkit-transform: translateY(0px);
  }
}

@-moz-keyframes spinOut {
  0% {
    -moz-transform: rotate(0deg);
    opacity: 1.0;
  }

  100% {
    -moz-transform: rotate(360deg);
    opacity: 0;
  }
}

@-moz-keyframes spinIn {
  0% {
    -moz-transform: rotate(0deg);
    opacity: 0;
  }

  100% {
    -moz-transform: rotate(-360deg);
    opacity: 1.0;
  }
}

@-moz-keyframes scootOut {
  0% {
    -moz-transform: translateY(0);
  }

  5% {
    -moz-transform: translateY(-15px);
  }

  100% {
    -moz-transform: translateY(110px);
  }
}

@-moz-keyframes scootIn {
  0% {
    -moz-transform: translateY(110px);
  }

  66% {
    -moz-transform: translateY(-5px);
  }

  100% {
    -moz-transform: translateY(0px);
  }
}

.spin-in {
  -webkit-animation: spinIn 0.4s 0.2s ease both;
  -moz-animation: spinIn 0.4s 0.2s ease both;
  -ms-animation: spinIn 0.4s 0.2s ease both;
  -o-animation: spinIn 0.4s 0.2s ease both;
  animation: spinIn 0.4s 0.2s ease both;
}

.spin-out {
  -webkit-animation: spinOut 0.4s 0s ease both;
  -moz-animation: spinOut 0.4s 0s ease both;
  -ms-animation: spinOut 0.4s 0s ease both;
  -o-animation: spinOut 0.4s 0s ease both;
  animation: spinOut 0.4s 0s ease both;
}

.scoot-out {
  -webkit-animation: scootOut 0.5s 0s ease both;
  -moz-animation: scootOut 0.5s 0s ease both;
  -ms-animation: scootOut 0.5s 0s ease both;
  -o-animation: scootOut 0.5s 0s ease both;
  animation: scootOut 0.5s 0s ease both;
}

.scoot-in {
  -webkit-animation: scootIn 1s 0s ease both;
  -moz-animation: scootIn 1s 0s ease both;
  -ms-animation: scootIn 1s 0s ease both;
  -o-animation: scootIn 1s 0s ease both;
  animation: scootIn 1s 0s ease both;
}