@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
/*
  Author : Ivan Gonzalez Flores;
  Enterprise: Indra - IFT;
*/


#earth_planet {
  position: absolute;
  width: 325px;
  height: 325px;
  background: #888 url(../img/texture_earth.jpg) 0 0 repeat;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-size: 630px;
  animation: rotate 60s linear infinite;
  /*-webkit-animation: rotate 60s linear infinite;
  -moz-animation: rotate 60s linear infinite;
  -ms-animation: rotate 60s linear infinite;
  -o-animation: rotate 60s linear infinite;*/
  -webkit-transition: -webkit-transform 200ms linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 200ms linear;
  -moz-transform-style: preserve-3d;
  transition: transform 200ms linear;
  transform-style: preserve-3d;
      -ms-transform-style: none;
  box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
  -moz-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
  -webkit-box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
  color: #000;
  left: 50%;
  transform: translate(-50%, 0);
  top: 25%;

}
.stopAnimation{
 animation: inherit !important; 
}
.continueAnimation{
  animation: rotate 60s linear infinite !important;
}
#earth_planet:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: -80px 15px 80px -50px rgba(0,0,0,.9) inset;
  -moz-box-shadow: -80px 15px 80px -50px rgba(0,0,0,.9) inset;
  -webkit-box-shadow: -80px 15px 80px -50px rgba(0,0,0,.9) inset;
  z-index: 2;
}

#earth_planet:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background: radial-gradient(circle at 100px 100px, #fff, #000);
}



@keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}


@-moz-keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}


@-webkit-keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}


@-ms-keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}


@-o-keyframes rotate {
0% {background-position: 0 0;}
100% {background-position: 630px 0;}
}

.title {font-weight: 200; text-align: center; font-size: 2em; margin: .5em 0;}

.wrapper {
width: 80%;
margin: 0 auto;
text-align: center;
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #08090A; }

#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover; }

#galaxy {
  position: relative;
  width: 100%;
  height: 100%;
  /*perspective: 4000;*/ }

#solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; 
  -ms-transform-style: none;}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
  -ms-transform-style: none;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

.orbit .orbit {
  animation-name: suborbit; }

.pos {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  /*animation-name: invert¨:*/
  animation-name: inherit !important;
  -ms-animation-name: inherit !important;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -ms-animation-timing-function: linear;
}

#sun, .planet, #earth .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  #width: 8px;
  width: 12px !important;
  #height: 8px;
  height: 12px !important;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; 
  -ms-transform-style: none;
}

.planet {
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.subsatelite .planet{
  background-color: transparent; !important;
}

/******************* Satelites Index **************************/
#satelite10 {
  z-index: 2; }


#sun {
  z-index: 1; }

/* --------------------------------------------------------------------------- animations */
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes invert {
 0%  {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); 
  }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
  }
@-ms-keyframes invert {
 0%  {
    transform: rotateX(-75deg) rotateY(360deg) rotateZ(0deg); 
  }

  100% {
    transform: rotateX(-75deg) rotateY(0deg) rotateZ(0deg);}
  }


/* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
  transition-duration: 4s; }

#universe.opening #sun {
  box-shadow: 0 0 0 rgba(255, 160, 60, 0); }

/* --------------------------------------------------------------------------- 2D view */
.view-2D.zoom-large #sun {
  transform-style: flat; }

.view-2D.zoom-large .orbit {
  transform-style: flat; }

.view-2D #sun,
.view-2D .ring {
  transform: rotateX(0deg); }

.view-2D .planet,
.view-2D .moon {
  transform: rotateX(90deg); }

/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun {
  transform-style: preserve-3d; 
  -ms-transform-style: none;
  }

.view-3D.zoom-large .orbit {
  transform-style: preserve-3d; 
    -ms-transform-style: none;
    }

.view-3D #solar-system {
  transform: rotateX(75deg);
  z-index: 999999999999;
}


/* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system {
  width: 100%; }

.zoom-large.view-2D .scale-stretched #solar-system {
  font-size: 26%; }

.zoom-large.view-3D .scale-stretched #solar-system {
  font-size: 62%; }

.zoom-large.view-2D .scale-d #solar-system {
  font-size: 22%; }

.zoom-large.view-3D .scale-d #solar-system {
  font-size: 48%; }

.zoom-large.view-2D .scale-s #solar-system {
  font-size: 7%; }

.zoom-large.view-3D .scale-s #solar-system {
  font-size: 14%; }

/* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system {
  width: 200%;
  font-size: 100%; }

.zoom-close .scale-stretched #solar-system {
  margin-left: -100%; }

.zoom-close .scale-d #solar-system {
  margin-left: -106%; }

.zoom-close.view-2D .scale-d #solar-system {
  font-size: 84%; }

.zoom-close.view-3D .scale-d #solar-system {
  font-size: 84%; }

.zoom-close .scale-s #solar-system {
  margin-left: -145%; }

.zoom-close.view-2D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close.view-3D .scale-s #solar-system {
  font-size: 40%; }

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
  animation-play-state: paused!important;
  animation-duration: 0s!important;
  animation: none!important; }

.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
  transform: rotateX(0deg); }

.zoom-close.view-3D .planet {
  transform: rotateX(-90deg); }

.zoom-close.view-3D .moon {
  transform: rotateX(90deg); }

.zoom-close .pos {
  left: 100%!important;
  top: 50%!important; }

/*****************************************************  Data Speed Satelites *********************************/

#satelite10 .planet,
#satelite10.orbit {
  animation-duration:60s;  
}

#satelite10 .pos{
  animation-duration:60s; 
}
/* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun {
  font-size: 417.3048em; }

.scale-s #mercury .planet {
  font-size: 1.4634em; }

.scale-s #venus .planet {
  font-size: 3.6306em; }

.scale-s #earth .planet {
  font-size: 3.8226em; }

.scale-s #earth .moon {
  font-size: 0.8226em; }

.scale-s #mars .planet {
  font-size: 2.0334em; }

.scale-s #jupiter .planet {
  font-size: 41.9466em; }

.scale-s #saturn .planet {
  font-size: 34.9392em; }

.scale-s #uranus .planet {
  font-size: 15.2172em; }

.scale-s #neptune .planet {
  font-size: 14.7732em; }


/****************** Satelites PGO Orbit *****************/
.scale-stretched #satelite10.orbit {
    width: 165em;
    height: 165em;
    margin-top: -60em;
    margin-left: -85em;
}
/* ----------------- scaled orbits distance scale orbits Satelite --------------------------*/

.scale-d #satelite10.orbit {
  width: 44.74176em;
  height: 44.74176em;
  margin-top: -22.37088em;
  margin-left: -22.37088em; 
}

/* --------------------------------------------------------------------------- size scale orbits Satelites */
.scale-s #satelite10.orbit {
  width: 441.3048em;
  height: 441.3048em;
  margin-top: -220.6524em;
  margin-left: -220.6524em;
}
/* --------------Satelites  starting position and lighting effect ------------------/
/* --------------Satelite 1 ; pos: Top */


#satelite10 .planet {
 /* animation-name: shadow-mercury; */}

@keyframes shadow-mercury {
  0% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  25% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  50% {
    box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50.01% {
    box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  100% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }

.scaled.view-2D #satelite10 .planet,
.scaled.view-3D #satelite10 .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ 
}
h1 {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8); }

h1 span, #navbar h1 a {
  display: inline;
  position: relative;
  padding: 0;
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

#navbar, #controls, #data {
  background: rgba(0, 0, 0, 0.4); }

#navbar {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0px;
  width: 100%;
  height: 48px; }

#navbar a, #data a, #controls label {
  color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  text-decoration: none; }

#navbar a:hover, #data a:hover, #controls label:hover {
  color: #FFF; }

#data a.active {
  color: #0CF; }

#navbar a {
  position: absolute;
  top: 0;
  height: 48px;
  padding: 16px;
  font-size: 14px; }

#toggle-data {
  left: 0; }

#toggle-controls {
  right: 0; }

#data, #controls {
  z-index: 99;
  position: fixed;
  opacity: 1;
  top: 49px;
  padding: 16px; }

.data-close #data {
  left: -100%; }

.data-open #data {
  left: 0px; }

.controls-close #controls {
  right: -100%; }

.controls-open #controls {
  right: 0px; }

#data a {
  margin-bottom: 1px;
  padding: 6px 10px;
  font-size: 18px; }

#controls label {
  opacity: .6;
  height: 24px;
  margin-bottom: 28px; }

#controls label:hover {
  opacity: 1; }

#controls label:before {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  text-align: center;
  color: #FFF;
  z-index: 99; }

#controls label span {
  display: block;
  margin-left: 36px;
  padding-top: 4px;
  font-size: 18px;
  color: #FFF; }

#controls input {
  display: block;
  appearance: none; }

#controls input[type="radio"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input:checked[type="radio"]:after {
  content: '';
  display: block;
  top: 3px;
  margin-left: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls input[type="checkbox"]:before {
  content: '';
  display: block;
  position: absolute;
  width: 100px;
  height: 22px;
  border: 2px solid #FFF;
  border-radius: 16px; }

#controls input[type="checkbox"]:after {
  content: '';
  display: block;
  top: 3px;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #FFF;
  z-index: 99; }

#controls label.set-view:before {
  font: bold small-caps 11px/20px sans-serif; }

.view-3D #controls label.set-view:before {
  content: '2D';
  margin-left: 82px; }

.view-2D #controls label.set-view:before {
  content: '3D';
  margin-left: 7px; }

.view-3D #controls .set-view input:after {
  margin-left: 3px; }

.view-2D #controls .set-view input:after {
  margin-left: 81px; }

#controls label.set-zoom:before {
  font: normal small-caps 18px/14px sans-serif; }

.zoom-large #controls label.set-zoom:before {
  content: '+';
  margin-left: 82px; }

.zoom-close #controls label.set-zoom:before {
  content: '-';
  margin-left: 7px; }

.zoom-large #controls .set-zoom input:after {
  margin-left: 3px; }

.zoom-close #controls .set-zoom input:after {
  margin-left: 81px; }

/* --------------------------------------------------------------------------- transitions */
.pos {
  transition-property: top, left; }

#solar-system, .orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }

#sun, .icon {
  transition-property: width, height, webkit-transform; }

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

#solar-system,
#sun,
.planet,
.satelite,
.ring {
  transition-delay: 0s; }

.pos {
  transition-delay: 1s; }

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
  transition-duration: 0s;
  transition-delay: 0s; }

.opening .pos {
  transition-delay: 0s; }

h1, #data, #controls {
  transition-property: opacity, margin;
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

h1 {
  transition-delay: .35s; }

#data {
  transition-delay: .7s; }

#controls {
  transition-delay: 1s; }

/* --------------------------------------------------------------------------- images */
body {
  background-image: url('../img/body.png');
}
#universe {
  background-image: url('../img/bg_starfield.png');
}
/*** Satelites ****/
#satelite10 .planet {
  background-image: url('../img/satelite.png');  
}

.pos.active .planet{
  opacity: 1 !important;
  z-index: 99999999;
}
/* --------------------------------------------------------------------------- responsive styles */
@media screen and (max-width: 299px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 300px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 500px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 600px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 760px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 1000px) {
  #universe {
    font-size: 78%; }

  #navbar, #controls, #data {
    background: transparent; }

  #navbar a {
    display: none; }

  h1 {
    font-size: 22px;
    margin-top: 8px; }

  #controls {
    padding-right: 32px;
    top: 12px; }

  #data {
    position: fixed;
    top: inherit;
    bottom: 0;
    width: 100%;
    text-align: center; }

  #data a {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    padding: 15px 15px; }

  .data-open #data, .data-close #data {
    left: 0px; }

  .controls-open #controls, .controls-close #controls {
    right: 0px; } }
@media screen and (min-width: 1000px) {
  #universe {
    font-size: 100%; } }
@media screen and (min-width: 1600px) {
  .zoom-close .scale-d #solar-system {
    margin-left: -120%; } }

/* Custom Styles */
.container.menu{
  width:90% !important;
}
.wrapper-header{
  background: #fff;
  padding: 0px 100px;
  display: inline-flex;
  width: 100%;
}
.wrapper-header figure{
  width: 40%;
}
.wrapper-header figure img{
  padding: 7px 0px;
  width: 100%;
}
.wrapper-header .wrapper-nav_header{
  width: 60%;
}

/* Menu */
.nav_menu ul{
  display: inline-flex;
  margin: 5%;
}

.nav_menu ul li{
  font-size: 22px;
}
.nav_menu ul li .fa.fa-sort-desc{
  position: relative;
  top: -5px;
}
.nav_menu ul li:nth-child(2){
  margin-left: 20px;
  margin-top: -3px;
}
.nav_menu ul li input{
  width: 55%;
  padding: 10px 0px 10px 2px;
  position: relative;
  top: -2px;
}

#controls{
  top: 125px !important;
}

h1{
  text-align: left;
}

#tabla-data{
  position: absolute;
  width:88%;
  z-index: 99999999;
  background: aliceblue;
  bottom: 5.5%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 10;
}
#table-data table{
  width: 100%;
}
table{
  width: 100% !important;
}
div.caption{
  width: 100%;
  border: 1px solid #009cde;
  padding: 12px;
  color: #fff;
  background: #000;
  font-size: 14px;
  text-align: center;
  background: rgba(13,33,55,1);
  background: -moz-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(13,33,55,1)), color-stop(50%, rgba(13,33,55,1)), color-stop(100%, rgba(5,15,27,1)));
  background: -webkit-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -o-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -ms-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: linear-gradient(to bottom, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2137', endColorstr='#050f1b', GradientType=0 );
}
#tabla-data table th{
  border: 1px solid #ececec;
  background: #0b1b2c !important;
color: #fff !important;
  font-size: 12.5px;
  padding: 10px;
  vertical-align: middle;
  text-align: center !important;
}
#tabla-data table td{
  font-size: 10.5px;
}
#tableDinamyc{
  visibility: hidden;
  height: 0px;
  overflow: hidden;
}

.tableHidden{
  visibility: hidden;
  height: 0px;
  overflow: hidden; 
}
.tableVisible{
  visibility: visible !important; 
  height: initial !important;
  overflow: auto !important; 
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .tableVisible{
    height: auto !important;
  }
}

.table>tbody>tr>td{
  padding: 2px !important;
}

.table-scroll table tr{
  background:#000;
  color:#fff;
}
.table-scroll table td{
  text-align: center;
  border: 1px solid #ececec;
  padding:10px;
}


table thead.scroll-head{
  text-align: center;
} 

table tbody a {
  color: #fff;
  font-weight: bold;
}

table thead a {
  color: #00bb16;
  font-weight: bold;
}
table tbody a:hover, table tbody a:focus {
  color: #00bb16 !important;
  font-weight: bold;
  text-decoration: underline;
}

table thead a:hover, table thead a:focus {
  color: #FFF !important;
  font-weight: bold;
  text-decoration: underline;
}
thead{
  display: table-header-group;
}

.off{
  display: none;
}
.on{
  display: block;
}
.enabled{
  display: none;
}
.fa.fa-window-minimize,.fa.fa-window-maximize{
    float: right;
    padding: 10px;
    font-size: 15px;
    position: absolute;
    right: 30px;
    top: 0px;
    cursor:pointer;
}
.fa.fa-window-minimize{
  display: none;
}
.satelite_hover__color{
    background: #009edc;
    background-image: inherit !important;
}
.satelite_hover__shadow{
  box-shadow: rgb(4, 96, 213) -3px 0px 25px;
}
.subsatelite{
  display: none;
  position: absolute;
  bottom: 20px;
  -ms-perspective: 5000px
}

.subsatelite .planet{
  background-image: url('../img/satelites-03.png') !important; 
}

.subsatelite_hover__shadow{
  box-shadow: rgb(4, 96, 213) -3px 0px 25px
}
.subsatelite .planet{
  width: 20px;
  height: 20px;
  -ms-transform: rotateX(10deg) rotateZ(350deg);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .subsatelite .planet{
    width: 30px;
    height: 30px;
    -ms-transform: rotateX(10deg) rotateZ(350deg);
  }
}

.planet.sateliteEarth{
  z-index: 99999999999999999999999999999 !important;
  cursor: pointer !important;
}
.pos{
  cursor: pointer !important;
}
.ctm{
  font-size: 50px;
  color:red;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{
  width: 450px;
  top: 21% !important;
  padding: 2px;
  border: 1px solid #009cde;
  color: #fff;
  background: #000;
  font-size: 14px;
  background: rgba(13,33,55,1);
  background: -moz-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(13,33,55,1)), color-stop(50%, rgba(13,33,55,1)), color-stop(100%, rgba(5,15,27,1)));
  background: -webkit-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -o-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -ms-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: linear-gradient(to bottom, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2137', endColorstr='#050f1b', GradientType=0 );
}
.data-filter{
  display: none !important;
}
.actived{
  display: block !important;
}
.stop{
  animation-play-state:paused !important;
}
.data-pog{
    display: none;
    font-size: 2.5em;
    margin-left: 1em;
    margin-top: 1em;
    font-weight: 100;
    color:#fff;
}
.pog{
  font-weight: 800 !important;
}
.sat{
    color: white;
    font-size: 10px;
    margin-left: 25px;
    position: absolute;
}
.satActive{
  font-weight: 900;
}
#bands{
  background: #000;
  color:#fff;
  line-height: 3em;
}
#bands ul li {
  font-size: 12px;
}
.openMenu{
  z-index: 1003;
  width: auto;
  min-width: 10em;
  display: block;
  max-width: 20em;
  top: auto;
  left: 0px;
  margin-left: 163.484px;
  margin-top: -32px;
}
.activeMenu{
  display: block !important;
  background-color: #009bdb !important;
}
.bandactive{
  background-color: #009bdb !important;
}
#frqBands li a:focus{
  background: #009bdb !important
}
.subsatelite.active{
  display: block !important;
}
.pos.notvisible{
  visibility: hidden;
}
.pos.visibleq{
  visibility: visible;
}
.disclaimer a, .disclaimer span{
  font-size: 12px !important;
}
.sat{
  display: none;
}
.sat.satActive{
  display: block !important;
}
.data-pog.actived{
  pointer-events: none;
}
.fa-download{
  float: right;
  padding: 10px;
  font-size: 15px;
  position: absolute;
  right: 60px;
  top: 0px;
  cursor: pointer;
}
a.color_white,a.color_white:visited,a.color_white:hover{
  color:#fff!important;
  display: none;
}
li.divider.menu{
  margin: 0px !important
}

/* Estilos personalizados */
@media screen and (min-width: 768px){
  .navbar-brand {
    display: none !important;
  }
  
}
.navbar-brand {
    height: 3em !important;
    padding: 12px 12px !important;
    }
.bandsmin {
  font-size: 10px !important;
  line-height: 2em;
}
b {
  font-weight: 700 !important;
}
.brands{
  background: rgba(13,33,55,1);
  background: -moz-linear-gradient(left, rgba(13,33,55,1) 0%, rgba(5,15,27,1) 75%, rgba(5,15,27,1) 76%, rgba(5,15,27,1) 100%) !important;
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(13,33,55,1)), color-stop(75%, rgba(5,15,27,1)), color-stop(76%, rgba(5,15,27,1)), color-stop(100%, rgba(5,15,27,1))) !important;
  background: -webkit-linear-gradient(left, rgba(13,33,55,1) 0%, rgba(5,15,27,1) 75%, rgba(5,15,27,1) 76%, rgba(5,15,27,1) 100%) !important;
  background: -o-linear-gradient(left, rgba(13,33,55,1) 0%, rgba(5,15,27,1) 75%, rgba(5,15,27,1) 76%, rgba(5,15,27,1) 100%) !important;
  background: -ms-linear-gradient(left, rgba(13,33,55,1) 0%, rgba(5,15,27,1) 75%, rgba(5,15,27,1) 76%, rgba(5,15,27,1) 100%) !important;
  background: linear-gradient(to right, rgba(13,33,55,1) 0%, rgba(5,15,27,1) 75%, rgba(5,15,27,1) 76%, rgba(5,15,27,1) 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2137', endColorstr='#050f1b', GradientType=1 ) !important;
  border: 0px !important;
  position: fixed;
  width: 100%;
  height: auto;
  z-index: 9;
}
.navbar-fixed-top {
  top: 13%;
}
.izquierda img{
  width: 90%;
  padding: 1.2em 0em 1em 0em;
}
.central {
  background-color: transparent;
}
.derecha img {
  width: 75%;
  padding: .3em 0em 0em 0em;
  float: right;
}
.navbar-default .navbar-nav>li>a {
  border-style: solid;
  border-color: #009bdb;
  border-width: 1px;
  color: white !important;
  margin-right: 5em;
}
.navbar-default {
  background-color: #0b1b2c !important;
  border-color: #0b1b2c !important;
}
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #0b1b2c !important;
}
.navbar-default .navbar-nav>.open>a {
  background-color: #0b1b2c !important;
} 
.navbar-nav>li>.dropdown-menu {
  background-color: #0f233a !important;
}
.dropdown-menu {
  background-color: #0f233a !important;
}
.dropdown-menu .divider{
  background-color: #009bdb !important;
}
.dropdown-menu>li>a {
  color: #fff !important;
}
.dropdown-menu>li>a:hover {
  background-color: #009bdb !important;
}
.dropdown-menu>li>a:focus {
    background-color: #009bdb !important;
}
.nav .open>a{
  background-color: #009bdb !important;
}
.form-control {
  background-color: #1d2c3b !important;
  color: #6d7681  !important;
  border: 1px solid #1d2c3b !important;
}
.navbar-form .form-control {
  width: 24em !important;
}
.btn-default {
  background-color: #5c8c38 !important;
  color: #fff !important;
  border-color: #5c8c38 !important;
}
.disclaimer{
  color: #fff;
  position:fixed;
  left:0px;
  bottom:0px;
  width:100%;
  background: rgba(13,33,55,1);
  background: -moz-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(13,33,55,1)), color-stop(50%, rgba(13,33,55,1)), color-stop(100%, rgba(5,15,27,1)));
  background: -webkit-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -o-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: -ms-linear-gradient(top, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  background: linear-gradient(to bottom, rgba(13,33,55,1) 0%, rgba(13,33,55,1) 50%, rgba(5,15,27,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2137', endColorstr='#050f1b', GradientType=0 );
  padding: 1em;
}
/* IE 6 */
* html .disclaimer {
  position:absolute;
  top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
@media screen and (max-width: 1000px) {
  .navbar-fixed-top {
    top: 6em;
  }
}
@media screen and (max-width: 900px) {
  .navbar-fixed-top {
    top: 5em;
  }
}
@media screen and (max-width: 600px) {
  .navbar-fixed-top {
    top: 3.5em;
  }
  .derecha img {
    width: 120%;
  }
  .izquierda img {
    width: 145%;
    padding: .6em 0em 1em 0em;
}
}
/* modal y guía */
.modal {
  top: 30% !important;
  z-index: 99999 !important;

}
.btn-modal {
  background-color: #5c8c38 !important;
  border-color: #5c8c38 !important;
}
.btn-modal a{
  color: #fff !important;
}

.modal-backdrop.in {
    z-index: 9999;
    }
.modal-title {
    font-size: 2em !important;
    font-weight: bold;
    text-align: center;
    margin: 0 .5em 0 .5em;
    }
.modal-body p {
  font-size: 1.5em !important;
  margin: 1em .5em 0 .5em;
  text-align: center;
}

.close-btn {
  background-color: red !important;
  border-color: red !important;
  margin-right: 38% !important;
}
#guia-modal-geo {
  max-width: 500px;
  max-height: 400px;
  width: 70%;
  height: 65%;
  position: absolute;
  top:35%;
  left: 37%;
  margin-top: -100px;
  margin-left: -100px;
}
#guia-modal {
  width: 90% !important;
  height: 53em !important;
  position: relative;
  float: left;
  margin-top: 10%;
  margin-left: 5%;
  z-index: -999;
}
#disclaimer-guia {
  width: 95% !important;
  position: relative;
  float: left;
  margin-left:2%;
  margin-bottom: 1em !important;
  }
.modal-body p {
  color: black !important;
}
.modal-title {
  color: black !important;
}
@media screen and (width: 2560px) {
  #guia-modal {
  height: 83em !important;
}
}
@media screen and (width: 1440px) {
  #guia-modal {
  height: 43em !important;
  margin-top: 11%;
}
}
@media screen and (width: 1024px) {
  #guia-modal {
  height: 33em !important;
  margin-top: 16%;
}
}
@media screen and (width: 768px) {
  #guia-modal {
  height: 25em !important;
  margin-top: 32%;
}
}
@media screen and (max-width: 426px) {
  #guia-modal {
  height: 20em !important;
  margin-top: 32% ;
  width: 50% !important;
  margin-left: 20%;
}
  .introjs-helperNumberLayer{
    left: 0;
    top: 0;
    opacity: 1;
    background: #3b8082!important;
  }
}
.introjs-tooltiptext {
  font-size: 1.3em !important;
  color: black !important;
}
/* Custom container */
.container-narrow {
  margin: 0 auto;
  max-width: 700px;
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  margin: 60px 0;
  text-align: center;
}
.jumbotron h1 {
  font-size: 72px;
  line-height: 1;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 60px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

.introjs-overlay {
  position: absolute;
  box-sizing: content-box;
  z-index: 999999;
  background-color: #000;
  opacity: 0 !important;
  background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1.0 !important;
  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}

.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  z-index: 9999999 !important;
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
  background-color: white;
  opacity: 0;
  filter: alpha(opacity=0);
}

.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  position: relative;
}

.introjs-helperLayer {
  box-sizing: content-box;
  position: absolute;
  z-index: 9999998;
  /*background-color: #FFF;
  background-color: rgba(255,255,255,.9);*/
  border: 1px solid #777;
  border: 1px solid rgba(92, 140, 56, 1);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0,0,0,.4);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-tooltipReferenceLayer {
  box-sizing: content-box;
  position: absolute;
  visibility: hidden;
  z-index: 100000000;
  background-color: transparent;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      -ms-box-sizing: content-box;
       -o-box-sizing: content-box;
          box-sizing: content-box;
}

.introjs-helperNumberLayer {
  box-sizing: content-box;
  position: absolute;
  visibility: visible;
  top: 0px !important;
  left: -16px !important;
  z-index: 9999999999 !important;
  padding: 2px;
  font-family: Arial, verdana, tahoma;
  font-size: 13px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  background: #3b8082; /* Old browsers */
  background: -webkit-linear-gradient(top, #3b8082 0%, #3b8082 100%); /* Chrome10+,Safari5.1+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b8082), color-stop(100%, #3b8082)); /* Chrome,Safari4+ */
  background:    -moz-linear-gradient(top, #3b8082 0%, #3b8082 100%); /* FF3.6+ */
  background:     -ms-linear-gradient(top, #3b8082 0%, #3b8082 100%); /* IE10+ */
  background:      -o-linear-gradient(top, #3b8082 0%, #3b8082 100%); /* Opera 11.10+ */
  background:         linear-gradient(to bottom, #3b8082 0%, #3b8082 100%);  /* W3C */
  width: 20px;
  height:20px;
  line-height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b8082', endColorstr='#3b8082', GradientType=0)"; /* IE6-9 */
  filter: "progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)"; /* IE10 text shadows */
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}

.introjs-arrow {
  border: 5px solid white;
  content:'';
  position: absolute;
}
.introjs-arrow.top {
  top: -10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.top-right {
  top: -10px;
  right: 10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.top-middle {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:white;
  border-left-color:transparent;
}
.introjs-arrow.right {
  right: -10px;
  top: 10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:white;
}
.introjs-arrow.right-bottom {
  bottom:10px;
  right: -10px;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:white;
}
.introjs-arrow.bottom {
  bottom: -10px;
  border-top-color:white;
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-left-color:transparent;
}
.introjs-arrow.left {
  left: -10px;
  top: 10px;
  border-top-color:transparent;
  border-right-color:white;
  border-bottom-color:transparent;
  border-left-color:transparent;
}
.introjs-arrow.left-bottom {
  left: -10px;
  bottom:10px;
  border-top-color:transparent;
  border-right-color:white;
  border-bottom-color:transparent;
  border-left-color:transparent;
}

.introjs-tooltip {
  box-sizing: content-box;
  position: absolute;
  visibility: visible;
  padding: 10px;
  background-color: white;
  min-width: 200px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 0 1px 10px rgba(0,0,0,.4);
  -webkit-transition: opacity 0.1s ease-out;
     -moz-transition: opacity 0.1s ease-out;
      -ms-transition: opacity 0.1s ease-out;
       -o-transition: opacity 0.1s ease-out;
          transition: opacity 0.1s ease-out;
}

.introjs-tooltipbuttons {
  text-align: right;
  white-space: nowrap;
}

/*
 Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
 Changed by Afshin Mehrabani
*/
.introjs-button {
  box-sizing: content-box;
  position: relative;
  overflow: visible;
  display: inline-block;
  padding: 0.3em 0.8em;
  border: 1px solid #d4d4d4;
  margin: 0;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  font: 11px/normal sans-serif;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  -o-background-clip: padding-box;
  /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  /* IE hacks */
  transform: scale(1);
  *display: inline;
  margin-top: 10px;
}

.introjs-button:hover {
  border-color: #bcbcbc;
  text-decoration: none;
  box-shadow: 0px 1px 1px #e3e3e3;
}

.introjs-button:focus,
.introjs-button:active {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
  background-image: -moz-linear-gradient(#ececec, #f4f4f4);
  background-image: -o-linear-gradient(#ececec, #f4f4f4);
  background-image: linear-gradient(#ececec, #f4f4f4);
}

/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.introjs-skipbutton {
  box-sizing: content-box;
  margin-right: 5px;
  color: #7a7a7a;
}

.introjs-prevbutton {
  -webkit-border-radius: 0.2em 0 0 0.2em;
  -moz-border-radius: 0.2em 0 0 0.2em;
  border-radius: 0.2em 0 0 0.2em;
  border-right: none;
}

.introjs-prevbutton.introjs-fullbutton {
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}

.introjs-nextbutton {
  -webkit-border-radius: 0 0.2em 0.2em 0;
  -moz-border-radius: 0 0.2em 0.2em 0;
  border-radius: 0 0.2em 0.2em 0;
}

.introjs-nextbutton.introjs-fullbutton {
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}

.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
  color: #9a9a9a;
  border-color: #d4d4d4;
  box-shadow: none;
  cursor: default;
  background-color: #f4f4f4;
  background-image: none;
  text-decoration: none;
}

.introjs-hidden {
     display: none;
}

.introjs-bullets {
  text-align: center;
}
.introjs-bullets ul {
  box-sizing: content-box;
  clear: both;
  margin: 15px auto 0;
  padding: 0;
  display: inline-block;
}
.introjs-bullets ul li {
  box-sizing: content-box;
  list-style: none;
  float: left;
  margin: 0 2px;
}
.introjs-bullets ul li a {
  box-sizing: content-box;
  display: block;
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}
.introjs-bullets ul li a:hover {
  background: #999;
}
.introjs-bullets ul li a.active {
  background: #999;
}

.introjs-progress {
  box-sizing: content-box;
  overflow: hidden;
  height: 10px;
  margin: 10px 0 5px 0;
  border-radius: 4px;
  background-color: #ecf0f1
}
.introjs-progressbar {
  box-sizing: content-box;
  float: left;
  width: 0%;
  height: 100%;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  background-color: #08c;
}

.introjsFloatingElement {
  position: absolute;
  height: 0;
  width: 0;
  left: 50%;
  top: 50%;
}

.introjs-fixedTooltip {
  position: fixed;
}

.introjs-hint {
  box-sizing: content-box;
  position: absolute;
  background: transparent;
  width: 20px;
  height: 15px;
  cursor: pointer;
}
.introjs-hint:focus {
    border: 0;
    outline: 0;
}
.introjs-hidehint {
  display: none;
}

.introjs-fixedhint {
  position: fixed;
}

.introjs-hint:hover > .introjs-hint-pulse {
  border: 5px solid rgba(60, 60, 60, 0.57);
}

.introjs-hint-pulse {
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border: 5px solid rgba(60, 60, 60, 0.27);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: rgba(136, 136, 136, 0.24);
  z-index: 10;
  position: absolute;
  -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
.introjs-hint-no-anim .introjs-hint-dot {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
.introjs-hint-dot {
  box-sizing: content-box;
  border: 10px solid rgba(146, 146, 146, 0.36);
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: introjspulse 3s ease-out;
  -moz-animation: introjspulse 3s ease-out;
  animation: introjspulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0;
}

@-webkit-keyframes introjspulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }
    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@-moz-keyframes introjspulse {
    0% {
        -moz-transform: scale(0);
        opacity: 0.0;
    }
    25% {
        -moz-transform: scale(0);
        opacity: 0.1;
    }
    50% {
        -moz-transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        -moz-transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        -moz-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes introjspulse {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    25% {
        transform: scale(0);
        opacity: 0.1;
    }
    50% {
        transform: scale(0.1);
        opacity: 0.3;
    }
    75% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0.0;
    }
}

#h-text-withe{
  top: 32px;
  position: relative;
  color: white;
  font-size: 16px;
  font-weight: bold;
  left: 5px;
}

#h-text-green{
  position: relative;
  color: #67953d;
  font-size: 13px;
  font-weight: bold;
  top: 42px;
  letter-spacing: 0.6px;
  left: 120px;
  margin-bottom: 60px;
  display: inline-block;
}