body {
  margin: 0;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(bottom, #FFFFFF, #999999);
  background: -moz-linear-gradient(bottom, #FFFFFF, #999999);
  background: -o-linear-gradient(bottom, #FFFFFF, #999999);
  background: linear-gradient(bottom, #FFFFFF, #999999);
  z-index: -1;
  opacity: 1;
}

/****** CUBO ********/
#holder {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 49;

  background-color: rgba(0, 0, 0, 0.75);
}

.scene {
  display: inline-block;
  margin: 190px 0px 0px 330px;
  width: 550px;
  height: 550px;
  perspective: 1400px;
  /*zoom:100%;*/
  transform: scale(0.0);
}

.cube {
  position: relative;
  width: inherit;
  height: inherit;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);

}

.cube-face {
  width: inherit;
  height: inherit;
  position: absolute;
  background: red;
  opacity: 1;
}

/********* ROTACIONES GENERALES DEL CUBO ***************/
.cube-with-ease {
  transition: transform 1s;
}

.cube-rotate {
  transform: rotateX(-15deg) rotateY(-25deg);
}

/************  LAS CARAS DEL CUBO *************/
.cube-face-front {
  background: yellow;
  transform: translate3d(0, 0, 275px);
  background: url(../img/heat-map.png);
}

.cube-face-front-extra{
  transform: translate3d(130px, 29px, 276px);
  color: white;
  position:absolute;

}

.cube-face-back {
  background: black;
  transform: rotateY(0deg) rotateX(180deg) translate3d(0, 0, 275px);
  background: url(../img/heat-map.png);
}

.cube-face-back-extra {
  transform: rotateY(0deg) rotateX(180deg) translate3d(125px, -503px, 276px);
  color: white;
  position:absolute;

}

.cube-face-left {
  background: green;
  transform: rotateY(-90deg) translate3d(0, 0, 275px);
  background: url(../img/heat-map-3.png);
}

.cube-face-left-extra {
  transform: rotateY(-90deg) translate3d(-140px, 25px, 11px);
  color: white;
  position:absolute;
}

.cube-face-right {
  background: magenta;
  transform: rotateY(90deg) translate3d(0, 0, 275px);
  background: url(../img/heat-map-3.png);
}

.cube-face-right-extra {
  transform: rotateY(90deg) translate3d(-138px, 32px, 541px);
  color: white;
  position:absolute;
}

.cube-face-top {
  background: blue;
  transform: rotateX(90deg) translate3d(0, 0, 275px);
  background: url(../img/heat-map-2.png);
}

.cube-face-top-extra {
  transform: rotateX(90deg) translate3d(125px, -240px, 11px);
  color: white;
  position:absolute;
}

.cube-face-bottom {
  background: red;
  transform: rotateX(-90deg) translate3d(0, 0, 275px);
  background: url(../img/heat-map-2.png);
}

.cube-face-bottom-extra {
  transform: rotateX(-90deg) translate3d(125px, -233px, 541px);
  color: white;
  position:absolute;

}


.side-button {
  padding: 10px;
}

.zoom-button {
  left: 380px;
  position: absolute;
}

.plus-button {
  position: absolute;
  left: 380px;
  top:-110px;
  display: none;
}
.back-button {
  position: absolute;
  left:10px;
  top:-110px;
  display: none;
}

#log {
  color:white;
}

.stars-holder, .parallax-front {
  position:absolute;
  /*width: 1000px;*/
  /*height: 800px;*/
  overflow: hidden;
  top:0px;
  left:0px;
}

.parallax-front {
  pointer-events: none;
}

.parallax {
  position:absolute;
  /*
  position:absolute;
  width: 1000px;
  height: 800px;
  overflow: hidden;
  */
}

#axis-outcomes-2d, #axis-instruments-2d, #axis-stages-2d {
  position:absolute;
}

.plus-button-ux {
  position: relative;

}

.buttons {
  width:150px !important;
}

.filters-holder {
  color:white;
  position: absolute;
  top:0px;
  left:0px;
  width: 290px;
  height: 247px;
  background-image: url("../img/filtersBackground.png");
}

.filters-country-holder {
  color:white;
  position: absolute;
  top:0px;
  left:0px;
  width: 290px;
  height: 247px;
  background-image: url("../img/filtersCountryBackground.png");
}

.open-measurements-holder {
  position: absolute;
  top: 480px;
  left: 1239px;
  color: white;
}

.measurements a {
  color:white;
}

.filters {
  margin: 95px 0px 0px 27px;
}

.filters-country {
  margin: 95px 0px 0px 27px;
}

.filter {
  margin-bottom: 3px;
  float: left;
  clear: left;
}


.filter-country {
  margin-bottom: 13px;
  float: left;
  clear: left;
}
.filter-indented{
  margin:10px 0px 0px 20px;
  float: left;
  clear: both;
}
.filter-check-button{
  float:left;
}

.filter-text {
  margin-top: -1px;
  float: left;
  margin-left: 10px;
}

.filters img {
  float:left;
}

.filter-image {
  margin:2px 0px 0px 2px;
  position: absolute;
  z-index: 10;
}

.country-img {
  position:absolute;
  top:0px;
}

/************ THREE JS - VERSION ***********************/
#holder-3d-cube{
  position: absolute;
}