body{overflow-x:hidden;}
div#hs_form_target_module_167377325828279 {  display: none;}

.universo_inner_layer{position:absolute;top:30px;right:-67%;width:100%;height:100%;}
/* .universo_inner_layer{position:absolute;top:30px;width:100%;height:100%;} */
.universo_main{overflow:hidden; background: radial-gradient(104.6% 248.72% at 31.49% 0,#013c57 10.89%,rgba(0,44,64,0) 79.69%); border-radius: 0 0 20px 20px}
.universo_hero_form_right { position: relative;}
#universe { z-index: 1; position: absolute; top:0;   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; }
.orbit,#mercury.orbit1 #venus.orbit2 #earth.orbit3 #mars.orbit4 { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0); border-radius: 50%; transform-style: preserve-3d;  animation-iteration-count: infinite; animation-timing-function: linear; }

#mercury.orbit{animation-name: mercuryorbit; transform: rotateZ(0deg); }
#venus.orbit{animation-name: venusorbit; transform: rotateZ(40deg); }
#earth.orbit{animation-name: earthorbit; transform: rotateZ(0deg); }
#mars.orbit{ animation-name: marsorbit; transform: rotateZ(30deg); }

#mercury.orbit.orbits1{animation-name: mercuryorbit1; transform: rotateZ(0deg); }
#venus.orbit.orbits2{animation-name: venusorbit2; transform: rotateZ(40deg); }
#earth.orbit.orbits3{animation-name: earthorbit3; transform: rotateZ(0deg); }
#mars.orbit.orbits4{ animation-name: marsorbit4; transform: rotateZ(30deg); }


.pos,#mercury.orbit1 .pos,#venus.orbit2 .pos,#earth.orbit3 .pos,#mars.orbit4 .pos { position: absolute; top: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; transform-style: preserve-3d;   animation-iteration-count: infinite; animation-timing-function: linear; }
#mercury .pos{animation-name: mercuryinvert; transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
#venus .pos{animation-name: venusinvert; transform: rotateX(-90deg) rotateY(400deg) rotateZ(0deg); }
#earth .pos{animation-name: earthinvert; transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
#mars .pos{ animation-name: marsinvert; transform: rotateX(-90deg) rotateY(380deg) rotateZ(0deg); }

.pos,{ position: absolute; top: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; transform-style: preserve-3d;   animation-iteration-count: infinite; animation-timing-function: linear; }
#mercury.orbit.orbits1 .pos{animation-name: mercuryinvert1;}
#venus.orbit.orbits2 .pos{animation-name: venusinvert2;}
#earth.orbit.orbits3 .pos{animation-name: earthinvert3;}
#mars.orbit.orbits4 .pos{ animation-name: marsinvert4;}

#sun, .planet, #earth .moon { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; border-radius: 50%; transform-style: preserve-3d; }
#sun {   background-repeat: no-repeat; background-size: cover;  left: 31%; transition:500ms all ease-in;}
.planet { background-color: #202020; background-repeat: no-repeat; background-size: cover; animation-iteration-count: infinite; animation-timing-function: linear; }
.ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; }
#saturn .ring { width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; border: 0.3em solid rgba(160, 147, 130, 0.7); animation-iteration-count: infinite; animation-timing-function: linear; }
#saturn .ring:after { border-radius: 50%; position: absolute; content: ''; top: 50%; left: 50%; width: 2.2em; height: 2.2em; margin-top: -1.1em; margin-left: -1.1em; border: 0.07em solid rgba(160, 147, 130, 0.5); box-sizing: border-box; box-sizing: border-box; }
.universo_hero_form_left h1 { font-size: 44px; line-height: 1.2;}
.universo_main .hero-left-btn { margin-top: 50px; display:block;}
.universo_main .hero-left-btn .btn-border{padding:20px 0;}
.hero-left-btn .btn a,.btn-border a { min-width: 217px; text-align: center; }

/* --------------------------------------------------------------------------- planets index */
#mercury { z-index: 10; }

#venus { z-index: 9; }
#earth { z-index: 8; }
#moon { z-index: 7; }
#mars { z-index: 6; }
#jupiter { z-index: 5; }
#saturn { z-index: 4; }
#uranus { z-index: 3; }
#neptune { z-index: 2; }
#sun { z-index: 1; }


/* --------------------------------------------------------------------------- animations */
@keyframes mercuryorbit {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg);  }
}
@keyframes mercuryorbit1 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg); }
}


@keyframes venusorbit {
    0% { transform: rotateZ(40deg); }
    100% { transform: rotateZ(-320deg); }
}

@keyframes venusorbit2 {
    0% { transform: rotateZ(40deg); }
    100% { transform: rotateZ(-320deg); }
}

@keyframes earthorbit {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg); }
}
@keyframes earthorbit3 {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(-360deg); }
}


@keyframes marsorbit {
    0% { transform: rotateZ(30deg); }
    100% { transform: rotateZ(-330deg); }
}
@keyframes marsorbit4 {
    0% { transform: rotateZ(30deg); }
    100% { transform: rotateZ(-330deg); }
}
/* ====================pos */

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

@keyframes venusinvert {
    0% { transform: rotateX(-90deg) rotateY(400deg) rotateZ(0deg); }
    100% { transform: rotateX(-90deg) rotateY(40deg) rotateZ(0deg); }
}
@keyframes venusinvert2 {
    0% { transform: rotateX(-90deg) rotateY(400deg) rotateZ(0deg); }
    100% { transform: rotateX(-90deg) rotateY(40deg) rotateZ(0deg); }
}

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

@keyframes marsinvert {
    0% {transform: rotateX(-90deg) rotateY(380deg) rotateZ(0deg);}
    100% {transform: rotateX(-90deg) rotateY(20deg) rotateZ(0deg);}
}
@keyframes marsinvert4 {
    0% {transform: rotateX(-90deg) rotateY(380deg) rotateZ(0deg);}
    100% {transform: rotateX(-90deg) rotateY(20deg) 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); }



/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun { transform-style: preserve-3d; }
.view-3D.zoom-large .orbit { transform-style: preserve-3d; }
.view-3D #solar-system { transform: rotateX(64deg); }
.view-3D #sun { transform: rotateX(-50deg); }
.view-3D .ring { transform: rotateX(-90deg); }
.view-3D .planet, .view-3D .moon { transform: rotateX(0deg); }

/* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system { width: 100%; }
.zoom-large.view-3D .scale-stretched #solar-system { font-size: 105%; }
.zoom-large.view-3D .scale-d #solar-system { font-size: 48%; }
.zoom-large.view-3D .scale-s #solar-system { font-size: 14%; }

/* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system { width: 100%; font-size: 100%; }
.zoom-close .scale-d #solar-system { margin-left: -106%; }
.zoom-close.view-3D .scale-d #solar-system { font-size: 84%; }
.zoom-close .scale-s #solar-system { margin-left: -145%; }
.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: 0.0s !important;   }
.zoom-close.view-3D .planet { transform: rotateX(-90deg) translateX(18px);  }
.zoom-close.view-3D .moon { transform: rotateX(90deg); }
.zoom-close .pos {  right: 100% !important; top: 49% !important; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transition: all 3s ease; }
.zoom-close div:nth-child(1) > .pos,
.zoom-close div:nth-child(2) > .pos,
.zoom-close div:nth-child(3) > .pos,
.zoom-close div:nth-child(4) > .pos { right: 0 !important; }

.zoom-close #mercury .pos{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; }
.zoom-close #venus .pos{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; }
.zoom-close #earth .pos{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; }
.zoom-close #mars .pos{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important; }
/* .zoom-close #mars .pos { transform: rotateX(-0deg) rotateY(0deg) rotateZ(-28deg) !important; }
.zoom-close #venus .pos { transform: rotateX(0deg) rotateY(0deg) rotateZ(-40deg) !important; } */
.zoom-close #venus.orbit.orbits2 { transform: rotateZ(0deg); }
.zoom-close #mars.orbit.orbits4 { transform: rotateZ(0deg); }

/* --------------------------------------------------------------------------- data */

/* --------------------------------------------------------------------------- speed */

/* sideral years */
/* #mercury .pos, #mercury .planet, #mercury.orbit { animation-duration: 20s; animation-delay: 1s; }
#venus .pos, #venus .planet, #venus.orbit { animation-duration: 20s; animation-delay: 4.5s;}
#earth .pos, #earth .planet, #earth.orbit { animation-duration: 20s; animation-delay: 2s;}
#mars .pos, #mars .planet, #mars.orbit { animation-duration: 20s; animation-delay: 4s; } */

/* #mercury.orbit1 .pos, #mercury.orbit1 .planet, #mercury.orbit1 { animation-duration: 8s; }
#venus.orbit2 .pos, #venus.orbit2 .planet, #venus.orbit2 { animation-duration: 8s;animation-delay: 1s; }
#earth.orbit3 .pos, #earth.orbit3 .planet, #earth.orbit3 { animation-duration: 8s;animation-delay: 2s; }
#mars.orbit4 .pos, #mars.orbit4 .planet, #mars.orbit4 { animation-duration: 8s; animation-delay: 3s; } */




/* --------------------------------------------------------------------------- planets sizes */

/* --------------------------------------------------------------------------- stretched sizes */
/* .scale-stretched #sun { font-size: 11.6em; } */
.scale-stretched #sun { font-size: 20em; top:25% }
.scale-stretched #mercury .planet { font-size: 1.5em; }
.scale-stretched #earth .planet,.scale-stretched #venus .planet  { font-size: 3.02em; }
.scale-stretched #earth .moon { font-size: 1.2em; }
.scale-stretched #mars .planet { font-size: 2.9em; }
.scale-stretched #jupiter .planet { font-size: 12em; }
.scale-stretched #saturn .planet { font-size: 10.8em; }
.scale-stretched #uranus .planet { font-size: 4.68em; }
.scale-stretched #neptune .planet { font-size: 4.9em; }

/* --------------------------------------------------------------------------- scaled sizes */

/*
(planets radius * 2) * ratio
*/

/*$distanceScaleRatio:   0.000075em;*/

/* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun { font-size: 41.73048em; }
.scale-d #mercury .planet { font-size: 0.14634em; }
.scale-d #venus .planet { font-size: 0.36306em; }
.scale-d #earth .planet { font-size: 0.38226em; }
.scale-d #earth .moon { font-size: 0.08226em; }
.scale-d #mars .planet { font-size: 0.20334em; }
/* .scale-d #jupiter .planet { font-size: 4.19466em; }
.scale-d #saturn .planet { font-size: 3.49392em; }
.scale-d #uranus .planet { font-size: 1.52172em; }
.scale-d #neptune .planet { font-size: 1.47732em; } */

/* --------------------------------------------------------------------------- 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; }


/* static border */
.ordit_border:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px dashed rgba(255, 255, 255, 8%); border-radius: 50%; }
.ordit_border { position: absolute; left: 0; right: 0; border-radius: 100%; top: 50%; left: 50%; }

.ordit_border_mars { width: 82em; height: 82em; margin-top: -46em; margin-left: -49em; }
.ordit_border_mercury { width: 42em; height: 42em; margin-top: -26em; margin-left: -26em;  }
.ordit_border_venus { width: 54em; height: 54em; margin-top: -32em; margin-left: -34em;}
.ordit_border_earth {  width: 66em; height: 66em; margin-top: -38em; margin-left: -41.6em; }

/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit { width: 42em; height: 42em; margin-top: -26em; margin-left: -26em; }
.scale-stretched #venus.orbit { width: 54em; height: 54em; margin-top: -32em; margin-left: -34em; }
.scale-stretched #earth.orbit { width: 66em; height: 66em; margin-top: -38em; margin-left: -41.6em; }
.scale-stretched #mars.orbit { width: 82em; height: 82em; margin-top: -46em; margin-left: -49em; }



.scale-s #earth .orbit { width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; }

/* --------------------------------------------------------------------------- size */

.sun #sun .infos, .mercury #mercury .infos, .venus #venus .infos, .earth #earth .infos, .mars #mars .infos, .jupiter #jupiter .infos, .saturn #saturn .infos, .uranus #uranus .infos, .neptune #neptune .infos { display: block; opacity: 1; transform: rotateX(0deg); }
/* .mercury #mercury.orbit, .venus #venus.orbit, .earth #earth.orbit, .mars #mars.orbit, .jupiter #jupiter.orbit, .saturn #saturn.orbit, .uranus #uranus.orbit, .neptune #neptune.orbit { border: 2.5px dashed rgba(255, 255, 255, 0.8); } */
.hide-UI h1, .hide-UI #data, .hide-UI dl.infos, .hide-UI #controls { opacity: 0 !important; margin-top: -30px; }
.hide-UI #data { margin-bottom: -30px; }
.hide-UI .orbit { border: 1px dashed rgba(255, 255, 255, 0.5) !important; }

}
#navbar, #controls, #data { background: rgba(0, 0, 0, 0.4); }
#navbar { z-index: 99; position: absolute; top: 0; left: 0; padding: 16px; 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{ transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
.orbit{ transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
.planet{ transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
/* .satelite{ transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }
.ring{ transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; } */


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

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

#mercury .pos, #mercury .planet, #mercury.orbit{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s; }
#venus .pos, #venus .planet, #venus.orbit{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s;}
#earth .pos, #earth .planet, #earth.orbit{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s;}
#mars .pos, #mars .planet, #mars.orbit{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s; }



#mercury.orbits1 .pos, #mercury.orbits1 .planet, #mercury.orbit.orbits1{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s; }
#venus.orbits2 .pos, #venus.orbits2 .planet, #venus.orbit.orbits2{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s;}
#earth.orbits3 .pos, #earth.orbits3 .planet, #earth.orbit.orbits3{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s;}
#mars.orbits4 .pos, #mars.orbits4 .planet, #mars.orbit.orbits4{ transition-duration: .8s; transition-timing-function: ease-in-out; animation-duration: 20s; animation-delay: 1s; }

#solar-system { transition-delay: 0s; }
#sun { transition-delay: 0s; }
.planet { transition-delay: 0s; }
.satelite { transition-delay: 0s; }
.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; }

/* .planet dt {position: absolute;font-size: 12px;line-height: 18px;font-weight: 700;left: 50%;bottom: -20px;transform: translateX(-50%);} */
.planet dt {position: absolute;font-size: 12px;line-height: 18px;font-weight: 700;left: 0;top: 100%;right: 0;margin: 0 auto;text-align: center;}


/* --------------------------------------------------------------------------- images */
.universo_main { background-image: url(https://3378513.fs1.hubspotusercontent-na1.net/hubfs/3378513/Blog/banner_bg.png);    background-position: center; background-repeat: no-repeat;background-size: cover; }
#sun { background-image: url(https://3378513.fs1.hubspotusercontent-na1.net/hubfs/3378513/grey-plannet-cs.png); transition:500ms all ease-in; }

.scale-stretched #mars .planet,.scale-stretched #mercury .planet,.scale-stretched #earth .planet, .scale-stretched #venus .planet {font-size: 4em;}
.orbits1 .pos, .orbits2 .pos, .orbits3 .pos, .orbits4 .pos { right: 0;  }
.pos {   transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
.universo_inner_layer .scale-stretched #sun { font-size: 26em; top: 40%; }
.universo_inner_layer.view-3D .scale-stretched #sun { transform: rotateX(-22deg); }

.universo_main{padding:290px 0 155px 0; }
@media screen and (min-width:300px) {  #universe { font-size: 45%; } }
@media screen and (min-width:500px) { #universe { font-size: 62%; } }
@media screen and (min-width:600px) { #universe { font-size: 70%; } }
@media screen and (min-width:760px) { #universe { font-size: 75%; } }
@media screen and (min-width:1000px) {
    #universe { font-size: 73%; }
    #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:1080px) { #universe { font-size: 80%%; } } 
@media screen and (min-width:1300px) { #universe { font-size: 100%; } }
@media screen and (min-width:1600px) { .zoom-close .scale-d #solar-system { margin-left: -120%; } }
@media screen and (max-width:299px) { #universe { font-size: 35%; } }



.orbit .infos { display: none; }
div#sun dl.infos, div#earth dl.infos { display: none; }

@media (max-width:1366px) and (min-width:992px) {

    #universe { font-size: 81%; }
    .universo_main { padding: 150px 0 155px 0; }
    .scale-stretched #sun { font-size: 18em; top: 36%; }

}
@media (max-width:1199px) {
    .universo_main {padding: 150px 0 115px 0;}
    .universo_hero_form_left h1 {font-size: 32px;  }
}
@media (max-width:991px) {
    .container_left {  padding: 0 15px; max-width: 750px; width: 100%; margin: 0 auto;     padding: 0 15px;}
    .universo_main { padding: 135px 0 290px 0;}
    .universo_hero_form_right.w75.tabw100.mw100 {min-height: 390px;}
    .universo_main.pt250.pb180 { padding-top: 120px; padding-bottom: 250px;}

    .universo_inner_layer { position: absolute; top: 45px; right: -89%; width: 100%; height: 100%; }
    #sun { background-repeat: no-repeat; background-size: cover; left: 37%; } 
    .universo_hero_form_right { position: relative; top: 70px;}
    .scale-stretched #sun{font-size:20em;top:-70px; left:25%;}
    .universo_hero_form_left h1 {font-size: 25px;  }
    .hero-left-btn .btn a, .btn-border a { min-width: 167px;}
    .universo_main .hero-left-btn .btn-border {    padding: 10px 0;}

}
@media (max-width:767px) { .hero-form-content { font-size: 15px;  line-height: 26px;}  .universo_main .hero-left-btn {margin-top: 30px; }  }
@media (max-width:920px) {   .universo_inner_layer {   right: -84%;   }}
@media (max-width:991px) {.universo_inner_layer .scale-stretched #sun {  top: -35px;}}
@media (max-width:830px) {   .universo_inner_layer {   right: -76%;   }}

@media (max-width:500px) { .universo_inner_layer { top: 70px; } }
@media (max-width:480px) {  .universo_hero_form_right.w75.tabw100.mw100 {  min-height: 220px;} .planet dt {position: absolute;font-size: 10px;line-height: 18px;font-weight: 600;} }