/* Generated by less 2.2.0 */
#content {
  min-height: 690px;
}
#apps_info {
  position: relative;
  width: 100%;
  min-height: 690px;
}

#app_skeleton {
	height: 760px;
	width: 350px;
    float: left;
    background: url(../img/satelite.jpg);
    background-repeat: no-repeat;
    margin: 20px;
}

#app_skeleton img {
	
}

#app_skeleton p {
	padding-top: 50px;
	color: #3d99cf;
	font-weight: bold;
	font-size: medium;
}

.panel {
  position: relative;
  color: #41627b;
  font-size: 10pt;
  cursor: pointer;
  top:40px;
}
.panel > a {
  width: 100%;
}
.panel .panel_thumb {
  margin-top: 20px;
}
.panel h5 {
  margin: 10px 0 5px;
  font-size: small;
}
.panel p {
  padding: 4px 0px;
}
.panel ul li  {
	list-style: none;
	background-image: url(../img/arrow_left.gif);
	background-repeat: no-repeat;
	background-position: 0% .4em;
	padding-left: .7em;}
#leftPanel {
  float: left;
  position: relative;
  margin-right: 20px;
  margin-left: 2vw;
}
#leftPanel .panel {
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  image-rendering: optimizeSpeed;
  /*                     */
  image-rendering: -moz-crisp-edges;
  /* Firefox             */
  image-rendering: -o-crisp-edges;
  /* Opera               */
  image-rendering: -webkit-optimize-contrast;
  /* Chrome (and Safari) */
  image-rendering: optimize-contrast;
  /* CSS3 Proposed       */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE8+                */
  -webkit-animation: leftPanelOutIn 2s infinite;
  animation: leftPanelOutIn 2s infinite;
  -ms-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
  /*transform: perspective( 600px ) rotateY( 20deg );*/
}
#rightPanel {
  float: left;
  position: relative;
  margin-right: 15px;
}
#rightPanel .panel {
  width: 164px;
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  backface-visibility: hidden;
  image-rendering: optimizeSpeed;
  /*                     */
  image-rendering: -moz-crisp-edges;
  /* Firefox             */
  image-rendering: -o-crisp-edges;
  /* Opera               */
  image-rendering: -webkit-optimize-contrast;
  /* Chrome (and Safari) */
  image-rendering: optimize-contrast;
  /* CSS3 Proposed       */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE8+                */
  animation: rightPanelOutIn 2s infinite;
  -webkit-animation: rightPanelOutIn 2s infinite;
  animation-play-state: paused;
  -ms-animation-play-state: paused;
  -moz-animation-play-state: paused;
  /*transform: perspective( 600px ) rotateY( -20deg );*/
}
#rightPanel .panel > *:first-child {
  margin-top: 0;
}
@keyframes leftPanelOutIn {
  0% {
    transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
  25% {
    transform: scale3d(0.5, 0.5, 0.5) rotateY(70deg) translateZ(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
}
@-webkit-keyframes leftPanelOutIn {
  0% {
    -webkit-transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(90deg) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(-200px) rotateY(90deg) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1) translateX(0) translateZ(0);
    opacity: 1;
  }
}
@keyframes rightPanelOutIn {
  0% {
    transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
  25% {
    transform: scale3d(0.5, 0.5, 0.5) rotateY(70deg) translateZ(0);
    opacity: 0;
  }
  50% {
    transform: translateX(200px) translateZ(0);
    opacity: 0;
  }
  100% {
    transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
}
@-webkit-keyframes rightPanelOutIn {
  0% {
    -webkit-transform: scale3d(1, 1, 1) rotateY(0deg) translateX(0) translateZ(0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(90deg) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(200px) rotateY(90deg) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1) translateX(0) translateZ(0);
    opacity: 1;
  }
}

#planet {
  width: 800px;
  height: 630px;
  /* float: left; */
  position: absolute;
  top: 120px;
  display: block;
  margin: 0 auto;
  right: 8vw;
}
#planet .planet {
  display: block;
  margin: 0 auto;
  transition: all 3s;
  position: absolute;
  left: 50%;
  margin-left: -275px;
  z-index: 1;
}
#planet .planet.rotate {
  transform: rotateZ(3deg);
  -webkit-transform: rotateZ(3deg);
}
#planet .planetShadow {
  position: absolute;
  top: 485px;
  left: 50%;
  margin-left: -170px;
  z-index: 0;
  opacity: 0.5;
}
#planet .legend {
  border: 0 solid #a0b1bd;
  color: #41627b;
  padding: 0.5em;
  font-size: 0.72em;
  line-height: 1.1em;
  position: absolute;
  z-index: 2;
}
#planet .legend a {
  *color: #41627b;
  display: block;
  transition: -webkit-transform 0.5s;
  transition: transform .5s;
  outline: none;
  font-family: 'quicksand', 'Century Gothic', arial, sans-serif;
}
#planet .legend a.stretch {
  width: 105px;
}
#planet .legend a h4 {
  text-transform: uppercase;
  margin-bottom: 3px;
  color: black;
  font-size: small;
}

#planet .legend a ul{
  font-family: 'Century Gothic', arial, sans-serif;
  font-size: small;
}

#planet .legend a ul.left li{
    background-image: url(../img/arrow_left.gif);
    background-repeat: no-repeat;
    background-position: 0% .4em;
    padding-left: .7em;
}

#planet .legend a ul.right li{
    background-image: url(../img/arrow_right.gif);
    background-repeat: no-repeat;
    background-position: 100% .4em;
    padding-right: .7em;
}

#planet .legend:hover a h4,
#planet .legend.hover a h4,
#planet .legend.selected a h4{
  font-size: 0.9em\9;
  text-shadow: 1px 1px 1em rgba(133, 195, 255, 0.8);
  color: black;
}
#planet .legend.right.top:hover a,
#planet .legend.right.top.hover a,
#planet .legend.right.top.selected a {
  -webkit-transform: scale(1, 1) translate(10px, 5px);
  transform: scale(1.2, 1.2) translate(10px, 5px);
}
#planet .legend.right.bottom:hover a,
#planet .legend.right.bottom.hover a,
#planet .legend.right.bottom.selected a {
  -webkit-transform: scale(1, 1) translate(10px, -5px);
  transform: scale(1.2, 1.2) translate(10px, -5px);
}
#planet .legend.left.top:hover a,
#planet .legend.left.top.hover a,
#planet .legend.left.top.selected a {
  -webkit-transform: scale(1, 1) translate(-15px, 0);
  transform: scale(1.2, 1.2) translate(-15px, 5px);
}
#planet .legend.left.bottom:hover a,
#planet .legend.left.bottom.hover a,
#planet .legend.left.bottom.selected a {
  -webkit-transform: scale(1, 1) translate(-15px, 0);
  transform: scale(1.2, 1.2) translate(-15px, 0);
}
#planet .legend.bottom {
  padding-top: 2em;
}
#planet .legend.top {
  padding-bottom: 2em;
}
#planet .legend.left {
  /*border-right-width: 1px;*/
  text-align: right;
}
#planet .legend.right {
  /*border-left-width: 1px;*/
}
#planet .legend ul {
  list-style: none;
}
#planet .legend#app_energy_legend {
  bottom: 150px;
  right: 5px;
}
#planet .legend#app_energy_legend:before {
  content: url('../img/link_energia.png');
  position: absolute;
  left: -19px;
  bottom: 4px;
}
#planet .legend#app_agroalimentary_legend {
  bottom: 0;
  right: 120px;
}
#planet .legend#app_agroalimentary_legend:before {
  content: url('../img/link_agro.png');
  position: absolute;
  left: -3px;
  bottom: 4px;
}
#planet .legend#app_natdisasters_legend {
  top: 280px;
  right: 700px;
}
#planet .legend#app_natdisasters_legend:after {
  content: url('../img/link_prevencion.png');
  position: absolute;
  right: -51px;
  top: 4px;
}
#planet .legend#app_industry_legend {
  top: 20px;
  right: 40px;
}
#planet .legend#app_industry_legend:before {
  content: url('../img/link_industria.png');
  position: absolute;
  left: -16px;
  top: 6px;
}
#planet .legend#app_patrimony_legend {
  top: 8px;
  right: 660px;
}
#planet .legend#app_patrimony_legend:after {
  content: url('../img/link_patrimonio.png');
  position: absolute;
  right: -34px;
  top: 7px;
}
#planet .legend#app_noise_legend {
  top: -95px;
  right: 530px;
}
#planet .legend#app_noise_legend:after {
  content: url('../img/link_acu_mov.png');
  position: absolute;
  right: -35px;
  top: 7px;
}
#planet .legend#app_water_legend {
  top: -90px;
  right: 105px;
}
#planet .legend#app_water_legend:before {
  content: url('../img/link_agua.png');
  position: absolute;
  left: -35px;
  top: 6px;
}
#planet .legend#app_accessibility_legend {
  top: -95px;
  left: 307px;
}

#counter_planet {
  background: url('../img/panel_info.png') no-repeat 50% 50%;
  width: 800px;
  height: 35px;
  padding: 10px 5px 5px 5px;
  text-align: center;
  color: #fff;
  position: absolute;
  bottom: -110px;
  text-transform: uppercase;
  font-family: 'quicksand', arial, sans-serif;
  font-weight: 400;
  right: 8vw;
  display: none;
}
#counter_planet span {
  margin-left: 10px;
  font-weight: 600;
}
@media (min-width: 1920px) {
  #planet,
  #counter_planet {
    right: 10vw;
  }
  #leftPanel,
  #rightPanel {
    left: 15vw;
  }
}