body {
margin: 0 auto;
text-align: center;
width: 100%;
/*height: 100%;
position: inherit;
background-position: center top;
background-repeat: no-repeat;
background-color: #f5f5f5;
/*-moz-box-shadow: inset 0 0 880px #000000;
-webkit-box-shadow: inset 0 0 880px #000000;
box-shadow: inset 0 0 880px #000000;*/
overflow: auto;
list-style-type: none;
font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 10px;*/
}

#sub_address {
text-align: center;
font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 18px;
}

#medium_level {
position: absolute;
max-height: 992px;
max-width: 697px;
opacity: 1;
width: 100%;
}

#medium_level  img {
width: 100%;
height: 100%;
}

#config {
position: static;
display: block;
width: auto;
text-align: center;
margin: 0px 0 0px 0;
}

#controls {
position: static;
display: inline-block;
text-align: center;
margin: 0 auto;
float: center;
}

form {
position: inherit;
display: inline;
text-align: center;
margin: 0 auto;
}

.label {
  text-align: center;
position: static;
display: inline-block;
 width: 100%; 
/*padding: 0 0 0 0px;
font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 100;
font-size: 28px;
/* text-align: center; */
color: rgba(102, 102, 102, 0.49);
z-index: -10;*/
}

#happycell {
position: static;
display: block;
width: auto;
max-height: 992px;
text-align: center;
margin: 0 auto;
background-image: url("/wp-content/uploads/2024/02/emgrafica_flask.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

#happycell img {
max-width: 100%;
/*max-height: 992px;*/
position: absolute;
}


.experiment {
position: relative;
display: inline-block;
top: 0;
text-align: center;
margin: 0 auto;
-webkit-mask-image: url("/wp-content/uploads/2024/02/happycell_mask.png");
-o-mask-image: url("/wp-content/uploads/2024/02/happycell_mask.png");
-moz-mask-image: url("/wp-content/uploads/2024/02/happycell_mask.png");
mask-image: url("/wp-content/uploads/2024/02/happycell_mask.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
clip-path: url("/wp-content/uploads/2024/02/clip.svg#svgClip");
box-shadow: inset 145px 330px 150px -1px #252c2b9e;
}


#c {
position: inherit;
height: 100%;
width: 100%;
opacity: 1;
/*-moz-box-shadow: inset -85px 60px 220px 39px #170b0e;
-webkit-box-shadow: inset -85px 60px 220px 39px #170b0e;
box-shadow: inset -285px 360px 640px 29px #170b0e;*/
/* z-index: 1; */
}

#svgPath {
width: 100%;
height: 100%;
}

#c img {
width: 100%;
height: 100%;
}


.info {
/*padding-top: 30px;*/
text-align: center;
/*background: none;
width: auto;
position: static;
opacity: .6;
*/}

.footer {
text-align: center;
/*background: none;*/
width: 100%;
/*position: absolute;
font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 10px;
color: #666;
padding: 0px 0 0 0;
line-height: normal;*/
}

h4 {
font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 100;
font-size: 12px;
}


h1 {
color: #777;
text-align: center;
font-family: 'Exo', sans-serif;
font-weight: 100;
font-size: 28px;

}


/*.nav {
width:100%;
height:30px;
list-style-type: none;
font-style: normal;
text-decoration: none;
color: #777;
text-align: center;
font-family: 'Exo', sans-serif;
font-weight: 100;
font-size: 18px;
}
*/

ul {
    
/*    position: absolute;*/
    /*width: 100%;
    padding: 0;
    margin: 0;*/
/*    list-style-type: none;*/
}

a {
/* float: center; */
/* display: inline-block; */
/* width: 7em; */
/*text-decoration: none;*/
/*color: #777;*/
/*padding: 6px 12px 6px 12px; 
margin: 0px 0 15px 0;*/
}

/*a:hover {
    background-color: #777;
    border-radius: 16px;
    border-color: none;
    opacity: .6;
    color: #05e9db;
}*/

#mouse_influence {
  display: none;
}

#gravityX {
  display: none;
}


#slider-3 {
  display: none;

}



input[type=range] {
-webkit-appearance: none;
width: 47%;
margin: 8px 0 0 0;
-moz-border-radius: 28px;
border-radius: 28px;
border: 0px solid red;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 80 60 10px #000000;
box-shadow: inset 90 80 93px #000000;
display: inline-block;
}
input[type=range]:focus {
  outline: none;
}



/*Slider background*/

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 31.2px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ededed;
  border-radius: 28px;
  -moz-border-radius: 28px;
  border: 0px solid red;
  op
}




input[type=range]::-webkit-slider-thumb {
  box-shadow: 1.8px 1.8px 5.9px rgba(0, 0, 0, 0.49), 0px 0px 1.8px rgba(0, 0, 0, 0.49);
  border: 0px solid #941e00;
  height: 25px;
  width: 34px;
  border-radius: 28px;
  -moz-border-radius: 28px;
  background: yellowgreen;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 3.1px;
}







input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ededed;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 31.2px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: red;
  border-radius: 28px;
  border: 0px solid red;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1.8px 1.8px 5.9px rgba(0, 0, 0, 0.49), 0px 0px 1.8px rgba(0, 0, 0, 0.49);
  border: 0px solid #941e00;
  height: 25px;
  width: 34px;
  border-radius: 28px;
  background: rgba(121, 114, 116, 0.93);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 31.2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: red;
  border: 0px solid red;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: red;
  border: 0px solid red;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1.8px 1.8px 5.9px rgba(255, 0, 0, 0.49), 0px 0px 1.8px rgba(255, 26, 26, 0.49);
  border: 0px solid #941e00;
  width: 34px;
  border-radius: 28px;
  background: rgba(121, 114, 116, 0.93);
  cursor: pointer;
  height: 25px;
}
input[type=range]:focus::-ms-fill-lower {
  background: red;
}
input[type=range]:focus::-ms-fill-upper {
  background: red;
}

/*Slider range thumb selector*/
 
input[type="range" i] {
/*-webkit-appearance: slider-horizontal;*/
padding: initial;
border: initial;
margin: 2px;
color: rgb(144, 144, 144);
opacity: .8;
}






/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */

body {
/*position: fixed;
-moz-box-shadow: inset 0 0 100px #888;
-webkit-box-shadow: inset 0 0 100px #888;
box-shadow: inset 0 0 100px #888;*/
}


/*#c {
position: inherit;
-moz-box-shadow: inset -85px 60px 220px 39px #170b0e;
-webkit-box-shadow: inset -85px 60px 220px 39px #170b0e;
box-shadow: inset -85px 60px 220px 39px #170b0e;
}
*/

#happycell {
position: relative;
max-width: 60%;
max-height: 992px;
text-align: center;
margin: 0 auto;
}

#contact {
text-align: center;
width: 100%;
/*font-family: 'Exo', sans-serif;
font-style: normal;
font-weight: 700;
display: block;
font-size: 12px;*/
}

.info {
padding-top: 0;
}

/*ul {
    float: center;
    position: static;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}*/

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 15rem;
}