* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }

html { font-size: 10px; font-family: Helvetica, Arial, sans-serif;}
body{font-family: 'Roboto-Light'; align-items:center; background-color: #000000; height:100vh;}
h1 { font-size: 3.2rem; }
input[type=number]{padding-left: 10%; outline: none;}

.teio{font-family:'teio';  letter-spacing: 18px;  }

/*maqueta*/
.row { float: left; width: 100%; padding: 20px 0;}
.centrum{text-align: center;}
.siniestra{text-align: right;}
.iustum{text-align: left;}
.reliquit{text-align:right;}
.p-50{padding:50px 4%;}
.p-20{padding:20px;}
.padus {padding: 5px; }
.m-t-5{margin-top: 5px;}
.m-t-15{margin-top: 15px;}
.m-b-10{margin-bottom: 10px;}
.m-b-15{margin-bottom:17px;}
.m-b-25{margin-bottom:25px;}
.p-efectum{padding:1px;}

.flex{display:flex; justify-content:center;}

/*colores*/
.caeruleam{color:#DDFFFF;}
.viridi{color:#AABBAA; user-select:none;}
.purpura{color:#AA44FF}
.rosae{color: #FF4477;}
.griseo-liquet{color: #AAAAAA !important}

.bg-griseo-tenebris{background-color: #253333;  }
.bg-gris{background-color:#6e6272;}
.bg-caeruleam{background-color:#455d7a;}
.bg-nigrum{background-color: #000;}
.optione{background-color: transparent;}

/*labels*/
[class*=pittacium]{font-size:1.2rem;}
.minimum{font-size: 10px;}
.textum { font-size: 1.4rem; }

/*bordes y sombras*/
.profile-radio{border-radius:2px;}
.profile-nigrum{border:1px solid #111111;}
.profile-griseo-liquet{border: 1px solid #555555;}


.umbra{ -moz-box-shadow:    inset 0 0 10px #111111;
   -webkit-box-shadow: inset 0 0 10px #111111;
   box-shadow:         inset 0 0 10px #111111; }


/*customizacion de inputs*/
.punterum {cursor:pointer;}
.waveform{width:40px; height:27px; cursor: pointer;}
[class*=slider]{}
[class*=slider] {
    -webkit-appearance: none;
    width: 110px;
    height: 5px;
    border-radius: 2px;
    background: #000000;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

[class*=slider]:hover {
    opacity: 1;
}

[class*=slider]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 22px;
    border: 0;
    background: url('../img/range-thumb.svg');
    cursor: pointer;
}

[class*=slider]::-moz-range-thumb {
    width: 22px;
    height: 21px;
    border: 0;
    background: url('../img/range-thumb.svg');
    cursor: pointer;
}

select {
  font-family: 'Roboto-Light';
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;
   background-color: transparent;       
   background-image: url(../img/arrow.svg) ;
   background-repeat: no-repeat;
   background-position:right;
   outline: none;   
}

/*main box*/
.synthetizator-arca{ padding:4px; border:1px solid #222; border-radius: 8px; background-color: #00ffff; width:100%; max-width: 1280px;   
	background: rgba(85,85,85,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(85,85,85,1) 0%, rgba(85,85,85,1) 61%, rgba(34,34,34,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(85,85,85,1)), color-stop(61%, rgba(85,85,85,1)), color-stop(100%, rgba(34,34,34,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(85,85,85,1) 0%, rgba(85,85,85,1) 61%, rgba(34,34,34,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(85,85,85,1) 0%, rgba(85,85,85,1) 61%, rgba(34,34,34,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(85,85,85,1) 0%, rgba(85,85,85,1) 61%, rgba(34,34,34,1) 100%);
background: radial-gradient(ellipse at center, rgba(85,85,85,1) 0%, rgba(85,85,85,1) 61%, rgba(34,34,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222', GradientType=1 );
}

.synthetizator{ background-image: url("../img/classy-fabric.png"); background-repeat: repeat; background-color: #10171F;width:100%; border:2px solid black; border-radius: 4px;    }
.logo{ -webkit-text-stroke: 1px black; text-shadow: 0px 0px 48px #0AA; padding-left: 15px;}

/*contenido por orden de arriba a abjo e izquierda a derecha*/
.legio-arca {width:30%; max-width:1180px;  margin-right:20px; z-index: 99;}
.legio-subarca-L  {margin-right: 5%}
.libreria-arca  {width:70%; font-size: 1.4rem;}
.libreria-subarca {  z-index: 99;}
.libreria-fenestram { overflow:auto;  background: black; }
.ripae-sulcus-sinus {height:31.45px; padding:7px 0 0 2% ; border:1px dotted grey;}

.preset-arca  { height:40px;}
.preset-fenestram { height:100%; background: black; font-size: 1.8rem}

.imperius-arca  {position:relative;}
.binsphaream-arca {background-color: blue; height:50px; }
.binsphaream-fenestram  { height:100%; background: black;}
.bank-arca  { height:25px; }
.bank-fenestram { height:100%; background: black;}
.description-arca { height:60px; }
.description-fenestram  { height:100%; background: black;}


.bloke-central  {z-index: 99;  padding:0 2%;}
.spectrum-arca  { height:145px; }
.spectrum-fenestram { height:100%; background: black; text-align:center;}
.bullae { margin:0 10px; }
.button-effingere { -webkit-stroke: 1px black;  }
.foto-espectro{height:100%; visibility:hidden;}

.oscillator-arca  {   z-index: 99; justify-content: space-between; padding:0 2% 0 0;flex-direction: column;}
.oscillator-sub-arca{}
.segmentum  {width:42.5%;  height: 8px; border-top: 2px solid #2F2F2F; }
.segmentum-iustum { border-left: 2px solid #2F2F2F; }
.segmentum-reliquit { border-right: 2px solid #2F2F2F; }
.stereo-arca{ padding:0 1.3%; }

[class^='oscillatum']{ height: 100%; min-width:60px; padding:0 1%;}

.pittacium-oscillatum{ padding:8px 0 7px 0; }
.monosphaream-arca{ height:30px; margin-top: 2px; }
.monosphaream-fenestram{ height:100%; background: black; }
.fluctus-arca{margin-top:2px; padding:10px 0 4px 0; }
.fluctus-button{margin-bottom:7px; }
.mute-arca{margin-top: 2px; cursor:pointer; }

.imperi{ justify-content: space-between; }
.lfo-arca{padding-right:2%; }
.pittacium-lfo{padding:6px 0 5px 0; margin-bottom: 2px; }
.parameter-lfo{padding:11px 0; }
.lfo-parameter-nomine{margin-top:8px; }
.lfo-parameter-slides{width:50%; margin: 11px 0 4px 5px; }
.slider-sliding{width:100%; }
.lfo-fluctus-arca{margin: 9px 0; }
.lfo-fluctus{margin: 7%; }

.modulatio-matrix-arca{padding-left:2%; }
.modulatio-matrix{justify-content: space-between; }
.matrix-parameter{margin: 17px 0 7px 10px; text-align: left; }
.matrix-connections{margin: 7px 10px 7px 10px; }
.matrix-item{background-color: black; padding:5px 1%; font-size: 0.8em; margin:5px 1%; border:1px solid #f95959; }

[class^='button']{width:50px; }

.filter-arca{z-index: 99; flex-direction: column; padding:0 0 0 2%; }
.filter-sub-arca{ justify-content: space-between; }
.filter{ padding:0 1%; }

.filter-parameter-arca{ height:152px; margin-top: 2px; position:relative; }

.frecuencia{ position:absolute; left:7px; top:10px; }
.resonancia{ position:absolute; right:17px; top:10px; }

.slider1{ transform:rotate(270deg); position: absolute; bottom: 64px; width:110px; left: -35px; }
.slider2{ transform:rotate(270deg); position: absolute; bottom: 64px; width:110px; right: -35px; }

.delay-freq, .delay-feed{padding:15px 5px 3px 5px; border-radius: 2px;}
.delay-arca{position:relative; }
.delay-on-off-arca{margin-top:0px;}
.delay-on-off{display: block; margin:0 auto; width:60px; }
.delay-on-off-text{padding:11px 10px 10px 10px; }
.delay-freq{ position: absolute; top:0; left:10px; }
.delay-feed{ position: absolute; top:0; right:10px; }
.pittacium-delay{margin-top:7px; }


/*gradientes de botones*/
.mystyle{
background: rgba(250,205,218,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(250,205,218,1) 0%, rgba(255,68,118,1) 50%, rgba(158,0,45,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(250,205,218,1)), color-stop(50%, rgba(255,68,118,1)), color-stop(100%, rgba(158,0,45,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(250,205,218,1) 0%, rgba(255,68,118,1) 50%, rgba(158,0,45,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(250,205,218,1) 0%, rgba(255,68,118,1) 50%, rgba(158,0,45,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(250,205,218,1) 0%, rgba(255,68,118,1) 50%, rgba(158,0,45,1) 100%);
background: radial-gradient(ellipse at center, rgba(250,205,218,1) 0%, rgba(255,68,118,1) 50%, rgba(158,0,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#facdda', endColorstr='#9e002d', GradientType=1 );
 -moz-box-shadow:    inset 0 0 4px #000000;
   -webkit-box-shadow: inset 0 0 4px #000000;
   box-shadow:         inset 0 0 4px #000000;
   border:1px solid #000000;
}
.mystyle2{
background-color: #f95959; -moz-box-shadow:    inset 0 0 4px #000000;
   -webkit-box-shadow: inset 0 0 4px #000000;
   box-shadow:         inset 0 0 4px #000000;
   border:2px solid #000000;
}
.interrogatio, .blori, .blori2, .flori { font-family: 'Roboto-Regular'; }
.blori, .blori2, .flori { color:#001111;  }
.blori{ -webkit-box-shadow:  0 0 30px #FF4477;;
   box-shadow: 0 0 30px #FF4477;
}
.blori2{-webkit-box-shadow:  0 0 30px #AA44FF;
   box-shadow: 0 0 30px #AA44FF;
}
.flori{ -webkit-box-shadow:  0 0 30px #AA44FF;
   box-shadow: 0 0 20px #AA44FF;background: rgba(255,204,0,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,204,0,1) 0%, rgba(255,60,0,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,204,0,1)), color-stop(100%, rgba(255,60,0,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,204,0,1) 0%, rgba(255,60,0,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,204,0,1) 0%, rgba(255,60,0,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,204,0,1) 0%, rgba(255,60,0,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,204,0,1) 0%, rgba(255,60,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff3c00', GradientType=1 );
border:1px solid #000000;
}
.modal{ position:absolute; height:100vh; background-color: red; z-index: 99; top:0 left:0; display:none;}
.modal-in { display:block;}
.modal span { float: right; margin:10px; padding:10px; font-size: 2.4rem; cursor: pointer; font-weight: 800;}

[class*=col] { float: left; }
.col-15  { width: 15%; }
.col-20  { width:20%; }
.col-25  { width: 25%; }
.col-33  { width: 33.333%; }
.col-40  { width: 40%; }
.col-50  { width: 50%; }
.col-47  { width: 47.5%; }
.col-66  { width: 66.666%; }
.col-75  { width: 75%; }
.col-85  { width: 85%; }
.col-100 { width: 100%;}