/*INDEX*/ .main { position: relative; left: 0px; top:0px; width: 100%; } .main img {border-radius: 20px;align-content: center; } .menu { position: absolute; left: 47%; top: 66%; } .menu img {margin-right: 1.8%;} .menu img:hover{transform: scale(1.05)} /*----------------------TEORIA--------------------*/ .cmaps-container {position: relative; display: inline-block; width: 75%; margin: 0 auto;left: 12.5%;} #imgcen {display: block; width:100%; height: auto; border: #0000FF 2px double; z-index: 1; } #img1,#img2 {position: absolute;display: block; width: 10%; left:-13%; top:5%; } #imgprin {position: absolute;display: block; width: 16%; left:-16%; top:37%; z-index: 2; } /*-----------------------TOOLTIP--------------------*/ .tooltip a::after {content: attr(data-tooltip); position: absolute; bottom: -60%; /* Aparece justo encima de la zona activa */ left: 10%; transform: translateY(-10px); background-color: #333; color: #fff; padding: 6px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; /* Para que el tooltip no estorbe al hacer clic */} /* --------------LA FLETXA */ .tooltip a::before { content: ""; position: absolute; bottom: -25%; left: 15%; transform: translateY(10px); border-width: 15px; border-style: solid; border-color: transparent transparent #333 transparent; opacity: 0; visibility: hidden; transition: all 0.2s ease;} /* ------------------ MOSTRAR AL PASAR EL MOUSE */ .tooltip a:hover::after, .tooltip a:hover::before {opacity: 1; visibility: visible; transform: translateY(-5px);} /*--------------------- EL SO-----------------------*/ .cmapsmus1 a {position: absolute; z-index: 6; width: 26%; height: 10%; top: 35%; left: 10%; background-color: #FFFFFF00;} .cmapsso1 a {position: absolute;z-index:2; width: 18%; height:8%; top:36%; left:4%; background-color: #FFFFFF00; } #propiso-1 {position: relative; left: 5%; width:90%; display:block;} #Propiso-1,#Propiso-2,#Propiso-3,#Propiso-4 {position:relative; width:100%; } #davant{position: fixed; cursor:pointer; z-index: 5; left: 93.5%; top: 48%; width:4%;} #darrera{position: fixed; cursor:pointer; z-index: 5; left: 2.5%; top: 48%;width:4%;} .cmapsso2 a {position: absolute;z-index:2; width: 14%; height:8%; top:36.5%; left:62%; background-color: #FFFFFF00; } #ona0 {display: none; position: absolute; z-index: 10; top:14%; left:55%; width: 40%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 82vh; overflow-y: auto;} #ona1,#ona2,#ona3 {width: 75%; height: 95%; border: none; margin: 10px auto; display: block; border-radius: 10px;} .cmapsqua1 a {position: absolute; z-index:2; width: 14%; height:7%; top:21%; left:3%; background-color: #FFFFFF00; } #qintens-container{position: absolute; top:12%; left: 20%; width: 80%; height: 87%; background-color: #feeeee; border:solid 2px #777777; z-index: 2; border-radius: 25px; box-shadow: 0px 4px 15px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s;overflow-y: auto;} #qintens-container.visible {opacity: 1; visibility: visible; pointer-events: auto; } #onaintens {position: absolute; top:10%; left:2%; width: 55%; border:solid 1px #F1A500; } #grafintens {position: absolute; top: 71%; left: 11%; width: 80%;border:solid 1px #F1A500; } #dinintens {position: absolute;top: 101%;left: 7%; width: 88%; border:solid 1px #F1A500; } .cmapsqua2 a {position: absolute; z-index:2; width: 10%; height:7%; top:21%; left:31%; background-color: #FFFFFF00; } #qaltura-container{position: absolute; top: 12%; left: 48%; width: 51%; height: 87%;background-color: #feeeee; border:solid 2px #777777; z-index: 2; border-radius: 25px; box-shadow: 0px 4px 15px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s;overflow-y: auto;} #qaltura-container.visible {opacity: 1; visibility: visible; pointer-events: auto; } #onaaltura{position: absolute; top: 23%;left: 5%;width: 90%; border:1px solid #F1A500;} #grafaltura{position: absolute; top: 83%; left: 5%; width:90%; border:solid 1px #F1A500;} #onaaltura2{position: absolute;top: 103%;left: 2%; width: 45%;border:solid 1px #F1A500;} #onaaltura3{position: absolute;top: 103%;left: 52%; width: 45%;border:solid 1px #F1A500;} #onaaltura4{position: absolute;top: 130%;left: 25%; width: 45%;border:solid 1px #F1A500;} #ambaltura{position: absolute;top: 160%;left: 3%;width: 94%;border:solid 1px #F1A500;} .cmapsqua3 a {position: absolute; z-index:2; width: 10%; height:7%; top:21%; left:59%; background-color: #FFFFFF00; } #qdurada-container{position: absolute; top: 12%; left: 1%; width: 52%; height: 87%;background-color: #feeeee; border:solid 2px #777777; z-index: 2; border-radius: 25px; box-shadow: 0px 4px 15px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s;overflow-y: auto;} #qdurada-container.visible {opacity: 1; visibility: visible; pointer-events: auto; } #onadurada{position: absolute;top: 52%;left: 10%; width: 80%; border:solid 1px #F1A500;} #grafdurada{position: absolute; top: 105%;left: 20%; width: 60%; border:solid 1px #F1A500;} #figdurada{position: absolute;top: 150%;left: 2%;width: 95%; border:solid 1px #F1A500;} #produrada{position: absolute;top: 175%;left: 10%;width: 80%;border:solid 1px #F1A500;} .cmapsqua4 a {position: absolute; z-index:2; width: 10%; height:7%; top:21%; left:85%; background-color: #FFFFFF00; } #qtimbre-container{position: absolute; top: 12%; left: 2%; width: 70%; height: 87%;background-color: #feeeee; border:solid 2px #777777; z-index: 2; border-radius: 25px; box-shadow: 0px 4px 15px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s;overflow-y: auto;} #qtimbre-container.visible {opacity: 1; visibility: visible; pointer-events: auto; } #onatimbre{position: absolute;top: 2%;left: 2%; width: 65%; border:solid 1px #F1A500;} #deftimbre{position: absolute;top: 62%;left:5%;width: 58%; border:solid 1px #F1A500;} #onestimbre{position: absolute;top: 115%;left: 10%;width: 80%; border:solid 1px #F1A500;} .cmapsso3 a {position: absolute;z-index:2; width: 10%; height:12%; top:55%; left:30%; background-color: #FFFFFF00; } #Efectes {position: relative; left: 5%; width:90%; display:block;} #Efectes-1,#Efectes-2,#Efectes-3,#Efectes-4,#Efectes-5,#Efectes-6,#Efectes-7,#Efectes-8,#Efectes-9,#Efectes-10 {position:relative; width:100%; } #zoneef7a {position: absolute; left: 70%; top: 66%; width: 11%; height: 16%;background: #ffffff00; cursor: pointer;} #zoneef7b {position: absolute; left: 85%; top: 66%; width: 11%; height: 16%;background: #ffffff00; cursor: pointer;} #zoneef9 {position: absolute; left: 75%; top: 56%; width: 11%; height: 16%; background: #ffffff00; cursor: pointer;} .cmapsso4 a {position: absolute;z-index:2; width: 10%; height:7%; top:56%; left:46%; background-color: #FFFFFF00; } #soroll-1 {position: relative; left: 5%; width:90%; display:block;} #Soroll-1,#Soroll-2,#Soroll-3,#Soroll-4,#Soroll-5,#Soroll-6 {position:relative; width:100%; } .cmapsso5 a {position: absolute;z-index:2; width: 10%; height:7%; top:91%; left:30%; background-color: #FFFFFF00; } #oida {position: relative; left: 5%; width:90%; display:block;} #Oida-1,#Oida-2,#Oida-3,#Oida-4,#Oida-5,#Oida-6,#Oida-7,#Oida-8,#Oida-9 {position:relative; width:100%; } .hz,.hz2 {position: absolute; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; z-index: 100;pointer-events: auto; } .hz img {width: 100%;cursor: pointer;pointer-events: auto;} .hz2 img {width: 100%;cursor: pointer;pointer-events: auto; border:#009E00,1.5px,solid; } .hz span {display: block; font-size: 1vw;color:#E8080C;font-weight:bold; margin-top: -5px;} .hz.activa img,.hz2.activa img {transform: scale(1.2);filter: drop-shadow(0 0 8px #F1A500);} .hz2 span {display: block; font-size: 0.8vw; color:#009E00;font-weight:bold;width: 180%;} .Estilo2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.1vw; font-weight:bold; text-align: center; color:#FFFFFF; position: sticky; top: 2%; left:95%; width: 2%; height: 3%; background: #000; padding: 5px 10px; border-radius: 5px;cursor: pointer;} .Estilo4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9vw; font-weight:bold; text-align: center; color:#FFFFFF; position: sticky; top: 2%; left:94%; width: 3%; height: 3.5%; background: #000; border-radius: 5px;cursor: pointer; z-index: 10} /*------------------------HISTORIA-------------------*/ .cmapsmus2 a {position: absolute; z-index: 6; width: 29%; height: 10%; top: 56%; left: 71%; background-color: #FFFFFF00;} #menuhis_container{position: absolute; overflow-y: auto ; z-index: 6; height: 96%;top:2%; left:10%; width:80%; border: 0.3vw solid #1A00FF; opacity:0; visibility:hidden; display:none;transition: opacity 0.5s ease, visibility 0.5s;} #menuhis_container.activado {opacity: 1;visibility: visible;display: block} #menuhis img {width:100%;} #hevno { position: absolute;z: 7; width: 20%; height: 8%; top: 13%; left: 8%;background-color: #FFFFFF00;} #evnot {position: relative; left: 5%; width:90%; display:block;} #evnot-1,#evnot-2,#evnot-3,#evnot-4,#evnot-5,#evnot-6,#evnot-7,#evnot-8,#evnot-9,#evnot-10,#evnot-11,#evnot-12 {position:relative; width:100%; } #zonee1 {position: absolute; left: 85%; top: 61%; width: 11%; height: 12%; background: #ffffff00; cursor: pointer;} #zonee5a {position: absolute; left: 88%; top: 37%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zonee5b {position: absolute; left: 88%; top: 54%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zonee9 {position: absolute; left: 82%; top: 60%; width: 12%; height: 12%; background: #ffffff00; cursor: pointer;} #hinici {position: absolute; z-index:7; width: 20%; height:11%; top:29%; left:35%; background-color: #FFFFFF00;} #inici{position: relative; left: 5%; width:90%; display:block;} #inici-1,#inici-2,#ini#inici-3,#inici-4,#inici-5,#inici-6,#inici-7,#inici-8,#inici-9,#inici-10,#inici-11,#inici-12,#inici-13,#inici-14,#inici-15,#inici-16,#inici-17,#inici-18,#inici-19 {position:relative; width:100%;} #zonei2 {position: absolute; left: 90%; top: 43%; width: 10%; height: 15%; background: #ffffff00; cursor: pointer;} #hmitjana {position: absolute;z-index:7; width: 22%; height:10%; top:32%; left:68%; background-color: #FFFFFF00;} #mitjana{position: relative; left: 5%; width:90%; display:block;} #mitjana-1,#mitjana-2,#mitjana-3,#mitjana-4,#mitjana-5,#mitjana-6,#mitjana-7,#mitjana-8,#mitjana-9,#mitjana-10,#mitjana-11,#mitjana-12,#mitjana-13,#mitjana-14,#mitjana-15,#mitjana-16,#mitjana-17,#mitjana-18,#mitjana-19,#mitjana-20,#mitjana-21 {position:relative; width:100%;} #zonem2b {position: absolute; left: 82%; top: 24%; width: 8%; height: 12%; background: #ffffff00; cursor: pointer;} #zonem3b {position: absolute; left: 72%; top: 53%; width: 8%; height: 12%; background: #ffffff00; cursor: pointer;} #zonem4 {position: absolute; left: 88%; top: 62%; width: 8%; height: 12%; background: #ffffff00; cursor: pointer;} #zonem6 {position: absolute; left: 74%; top: 18%; width: 8%; height: 12%; background: #ffffff00; cursor: pointer;} #hrenaix {position: absolute;z-index:7; width: 22%; height:9%; top:61%; left:75%; background-color: #FFFFFF00;} #renaix {position: relative; left: 5%; width:90%; display:block;} #renaix-1,#renaix-2,#renaix-3,#renaix-4,#renaix-5,#renaix-6,#renaix-7,#renaix-8 {position:relative; width:100%; } #zoner8a {position: absolute; left: 9%; top: 26%; width: 27%; height: 48%; background: #ffffff00; cursor: pointer;} #zoner8b {position: absolute; left: 46%; top: 26%; width: 49%; height: 48%; background: #ffffff00; cursor: pointer;} #hbarroc {position: absolute;z-index:7; width: 18%; height:11%; top:62%; left:40%; background-color: #FFFFFF00;} #barroc {position: relative; left: 5%; width:90%; display:block;} #barroc-1,#barroc-2,#barroc-3,#barroc-4,#barroc-5,#barroc-6,#barroc-7,#barroc-8,#barroc-9,#barroc-10,#barroc-11,#barroc-12,#barroc-13,#barroc-14,#barroc-15,#barroc-16,#barroc-17 {position:relative; width:100%; } #zoneb2a {position: absolute; left: 32%; top: 32%; width: 26%; height: 32%; background: #ffffff00; cursor: pointer;} #zoneb2b {position: absolute; left: 61%; top: 25%; width: 15%; height: 39%; background: #ffffff00; cursor: pointer;} #zoneb2c {position: absolute; left: 78%; top: 45%; width: 19%; height: 18%; background: #ffffff00; cursor: pointer;} #zoneb3 {position: absolute; left: 82%; top: 80%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb4a {position: absolute; left: 85%; top: 35%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb4b {position: absolute; left: 87%; top: 80%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb6a {position: absolute; left: 6%; top: 33%; width: 14%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb6b {position: absolute; left: 34%; top: 33%; width: 11%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb6c {position: absolute; left: 56%; top: 33%; width: 11%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb6d {position: absolute; left: 75%; top: 33%; width: 18%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb7a {position: absolute; left: 13%; top: 38%; width: 16%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb7b {position: absolute; left: 44%; top: 38%; width: 16%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb7c {position: absolute; left: 75%; top: 38%; width: 13%; height: 12%; background: #ffffff00; cursor: pointer;} #zoneb16 {position: absolute; left: 67%; top: 70%; width: 11%; height: 26%; background: #ffffff00; cursor: pointer;} #zoneb17a {position: absolute; left: 5%; top: 62%; width: 10%; height: 25%;background: #ffffff00; cursor: pointer;} #zoneb17b {position: absolute; left: 20%; top: 62%; width: 12%; height: 25%;background: #ffffff00; cursor: pointer;} #zoneb17c {position: absolute; left: 37%; top: 62%; width: 12%; height: 25%;background: #ffffff00; cursor: pointer;} #zoneb17d {position: absolute; left: 54%; top: 62%; width: 10%; height: 25%;background: #ffffff00; cursor: pointer;} #zoneb17e {position: absolute; left: 69%; top: 62%; width: 11%; height: 25%;background: #ffffff00; cursor: pointer;} #zoneb17f {position: absolute; left: 85%; top: 62%; width: 10%; height: 25%;background: #ffffff00; cursor: pointer;} #hclassi {position: absolute;z-index:7; width: 20%; height:11%; top:71%; left:3%; background-color: #FFFFFF00;} #classic {position: relative; left: 5%; width:90%; display:block;} #classic-1,#classic-2,#classic-3,#classic-4,#classic-5,#classic-6,#classic-7,#classic-8 {position:relative; width:100%; } #zonec3a {position: absolute; left: 72%; top: 45%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #zonec3b {position: absolute; left: 90%; top: 44%; width: 9%; height: 12%; background: #ffffff00; cursor: pointer;} #hromant {position: absolute;z-index:7; width: 22%; height:12%; top:92%; left:30%; background-color: #FFFFFF00;} #romant {position: relative; left: 5%; width:90%; display:block;} #romant-1,#romant-2,#romant-3,#romant-4,#romant-5,#romant-6,#romant-7,#romant-8,#romant-9,#romant-10,#romant-11{position:relative; width:100%; } #zonero2a {position: absolute; left: 5%; top: 73%; width: 20%; height: 24%; background: #ffffff00; cursor: pointer;} #zonero2b {position: absolute; left: 58%; top: 73%; width: 18%; height: 24%; background: #ffffff00; cursor: pointer;} #zonero2c {position: absolute; left: 82%; top: 36%; width: 15%; height: 18%; background: #ffffff00; cursor: pointer;} #zonero2d {position: absolute; left: 89%; top: 85%; width: 10%; height: 13%; background: #ffffff00; cursor: pointer;} #tancar { position: fixed; z-index: 10; top:5%; left:21.3%; width: 3.4%; color:#F6080C;font-weight: bold;font-size: 2vw;font-family: "Comic Sans MS";border:0.2vw solid #000000;background: #ffffff; } #videoPlayer {position: absolute; z-index: 4; border: 0.2vw solid #FFFFFF;box-shadow: 5px 5px 10px 2px #444444;border-radius: 15px;} #video1 {position: absolute; z-index: 4; border: 0.2vw solid #FFFFFF;box-shadow: 5px 5px 10px 2px #444444;border-radius: 15px;} #video2 {position: absolute; z-index: 4; border: 0.2vw solid #FFFFFF;box-shadow: 5px 5px 10px 2px #444444;border-radius: 15px;} #audioPlayer { position: absolute; bottom: -20px; z-index: 10; } #button1 {position: absolute; top: 6%; left: 53%; z-index:5; display: none; font-family: "Comic Sans MS"; border:0.2vw solid #0415D8; font-size: 1.4vw; font-weight: bold; color:#0415D8; cursor: pointer; } #opac { position: fixed;opacity: 0; background-color:#ffffff; width:85%; height:95%; z-index:5; left: 11%; top: 0px; transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; -o-transition: opacity 0.4s ease-in;} .ocult {display:none; } /*----------------------------RITME------------------*/ .cmapsmus3 a {position: absolute; z-index: 6; width: 9%; height: 8%; top: 76%; left: 39%; background-color: #FFFFFF00;} .cmapsrit-rit a {position: absolute; z-index:6; width: 11%; height:7%; top:6.5%; left:36%; background-color: #FFFFFF00; } .cmapsrit-mel a {position: absolute; z-index:6; width: 13%; height:7%; top:6.5%; left:55%; background-color: #FFFFFF00; } .cmapsrit-har a {position: absolute; z-index:6; width: 14%; height:7%; top:6.5%; left:74%; background-color: #FFFFFF00; } .cmapsrit-fig a {position: absolute; z-index:6; width: 16%; height:7%; top:46%; left:9%; background-color: #FFFFFF00; } #fonsmenu { position: absolute; z-index: 6; top:34%; left:29%; width: 25%; height:30%;border: 0.2vw #FFFFFF solid; display: none;} .Estilo3 {position: absolute; z-index: 7; top:38%; left:31%; width: 20%; height: 35%; font-family: "Comic Sans MS"; font-size:1.3vw; padding-left: 1%; font-weight: bold; line-height: 2.4vw; color:#ffffff;display: none;} #menufig a:hover {color:#ffff00;} #f0,#lr0 {display:none;position: absolute; z-index: 10; top:13%; left:58%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #f1,#f2,#f3,#f4,#f5,#f6,#f7,#f8,#f9,#f10,#f11,#f12,#f13, #lr1,#lr2,#lr3,#lr4 { width: 79%; height: 96%; border: none; margin: 10px auto; display: block; border-radius: 10px; } #dr0, #pr0 {display:none;position: absolute; z-index: 10; top:25%; left:58%; width: 50%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 70%; overflow-y: auto;} #dr1,#dr2,#dr3,#dr4,#dr5,#dr6,#dr7,#dr8,#dr9,#pr1,#pr2,#pr3,#pr4,#pr5,#pr6,#pr7,#pr8,#pr9,#pr10 {width: 90%; height: 92%; border: none; margin: 20px auto; display: block; border-radius: 10px;} .cmapsrit-com a {position: absolute;z-index:6; width: 18%; height:8%; top:66%; left:9%; background-color: #FFFFFF00; } #c0 {display:none;position: absolute; z-index: 10; top:13%; left:58%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9 {width: 79%; height: 96%; border: none; margin: 10px auto; display: block; border-radius: 10px;} .cmapsrit-mov a {position: absolute;z-index:6; width: 20%; height:7%; top:90%; left:9%; background-color: #FFFFFF00; } #m0 {display:none;position: absolute; z-index: 10; top:13%; left:58%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #m1,#m2 {width: 79%; height: 96%; border: none; margin: 10px auto; display: block; border-radius: 10px;} .cmapsrit-ana a {position: absolute;z-index:6; width: 11%; height:15%; top:75%; left:46%; background-color: #FFFFFF00; } /*------------------------------MELODIA-------------------*/ .cmapsmus4 a {position: absolute; z-index: 6; width: 12%; height: 8%; top: 76%; left: 50%; background-color: #FFFFFF00;} .cmapsmel-mel a {position: absolute; z-index:6; width: 15%; height:7%; top:6.5%; left:30%; background-color: #FFFFFF00; } .cmapsmel-rit a {position: absolute; z-index:6; width: 12%; height:7%; top:6.5%; left:54%; background-color: #FFFFFF00; } .cmapsmel-har a {position: absolute; z-index:6; width: 16%; height:7%; top:6.5%; left:72%; background-color: #FFFFFF00; } .cmapsmel-pen a {position: absolute; z-index:6; width: 12%; height:7%; top:46%; left:11%; background-color: #FFFFFF00; } #p0 {display:none;position: absolute; z-index: 10; top:14%; left:55%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #p1,#p2,#p3,#p4,#p5,#np1,#np2,#np3,#nc1,#nc2,#nc3 {width: 79%; height: 96%; border: none; margin: 10px auto; display: block; border-radius: 10px;} .cmapsmel-esc a {position: absolute; z-index:6; width: 9%; height:8%; top:48%; left:67%; background-color: #FFFFFF00; } .cmapsesc1 a {position: absolute; z-index:2; width: 12%; height:6.5%; top:24.5%; left:28%; background-color: #FFFFFF00; } .cmapsesc2 a {position: absolute; z-index:2; width: 17%; height:9%; top:61.5%; left:18%; background-color: #FFFFFF00; } #escmaj1 {position: relative; left: 5%; width:90%; display:block;} #escmajor-1,#escmajor-2,#escmajor-3,#escmajor-4{position:relative; width:100%; } .cmapsesc3 a {position: absolute; z-index:2; width: 17%; height:9%; top:74%; left:18%; background-color: #FFFFFF00; } #escmen1 {position: relative; left: 5%; width:90%; display:block;} #escmenor-1,#escmenor-2,#escmenor-3,#escmenor-4,#escmenor-5,#escmenor-6{position:relative; width:100%; } .cmapsmel-int a {position: absolute; z-index:6; width: 12%; height:7%; top:54%; left:35%; background-color: #FFFFFF00; } .cmapsint0 a {position: absolute; z-index:6; width: 14%; height:7%; top:1%; left:38%; background-color: #FFFFFF00; } .cmapsint1 img {position: absolute; z-index:2; width:18% ;height:12% ;top:13%; left:75%; border-left:#000000 4px solid; } .cmapsint2 img {position: absolute; z-index:2; width: 18%; height:12% ; top:27%; left:75%; border-left: #000000 4px solid;} .cmapsint3 img {position: absolute; z-index:2; width: 18%; height:12% ; top:41%; left:75%; border-left: #000000 4px solid;} .cmapsint4 img {position: absolute; z-index:2; width: 18%; height:12% ; top:55%; left:75%;border-left: #000000 4px solid; } .cmapsint5 a {position: absolute; z-index:6; width: 13%; height:7%; top:58.5%; left:17%; background-color: #FFFFFF00; } #i0 {display:none;position: absolute; z-index:10; top:13%; left:58%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84%; overflow-y: auto;} #i1,#i2,#i3,#i4,#i5,#i6,#i7 {width: 79%; height: 96%; border: none; margin: 10px auto; display: block; border-radius: 10px;} .cmapsmel-not a {position: absolute; z-index:6; width: 16%; height:7%; top:61%; left:11%; background-color: #FFFFFF00; } #menunot a:hover {color:#ffff00;} #n0,#nr0,#dm0 {display:none;position: absolute; z-index: 10; top:14%; left:55%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #n1,#n2,#n3,#n4,#n5,#n6,#n7,#n8,#n9,#n10,#n11,#n12,#n13,#n14,#n15,#n16,#n17,#n18,#na1,#na2,#nr1,#nr2,#nr3,#nr4,#nr5,#nr6,#dm1,#dm2,#dm3 {width: 79%; height: 96%; border: none; margin: 20px auto; display: block; border-radius: 10px;} .cmapsmel-din a {position: absolute; z-index:6; width: 14%; height:8%; top:88%; left:11%; background-color: #FFFFFF00; } #din0 {display:none;position: absolute; z-index: 10; top:14%; left:55%; width: 38%; background: #D5CCF4; border: 0.2vw #000000 solid; height: 84vh; overflow-y: auto;} #din1,#din2 {width: 79%; height: 96%; border: none; margin: 20px auto; display: block; border-radius: 10px;} .cmapsmel-sem a {position: absolute; z-index:6; width: 9%; height:8%; top:86%; left:37%; background-color: #FFFFFF00; } #semi1 {position: relative; left: 5%; width:90%; display:block;} #semito-1,#semito-2,#semito-3,#semito-4,#semito-5,#semito-6{position:relative; width:100%; } .cmapsmel-form a {position: absolute; z-index:6; width: 16%; height:7%; top:76%; left:84%; background-color: #FFFFFF00; } .formA a {position: absolute; z-index:12; width: 17%; height:6%; top:59%; left:81%; background-color: #FFFFFF00; } .formAB a {position: absolute; z-index:12; width: 19%; height:6%; top:68%; left:81%; background-color: #FFFFFF00; } .formABA a {position: absolute; z-index:12; width: 15%; height:6%; top:75.5%; left:81%; background-color: #FFFFFF00; } .formABAC a {position: absolute; z-index:12; width: 17%; height:6%; top:83%; left:81%; background-color: #FFFFFF00; } #container{position: absolute; top:15%; left: 22%; width: 50%; height: 84%; background-color: #feeeee; border:solid 2px #777777; z-index: 10; border-radius: 25px; box-shadow: 0px 4px 15px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s;overflow-y: auto;} #container.visible{opacity: 1; visibility: visible; pointer-events: auto;} #formA,#formAB,#formABA,#formABAC{visibility: hidden; } #formA.visible,#formAB.visible,#formABA.visible,#formABAC.visible {visibility: visible; } #audioHz{ position: absolute; width: 35%; right: 10%; z-index: 100} /*-----------------------------HARMONIA--------------------*/ .cmapsmus5 a {position: absolute; z-index: 6; width: 13%; height: 8%; top: 76%; left: 64%; background-color: #FFFFFF00;} .cmapshar-rit a {position: absolute; z-index:2; width: 13%; height:7.5%; top:11%; left:60%; background-color: #FFFFFF00; } .cmapshar-mel a {position: absolute; z-index:2; width: 16%; height:7.5%; top:11%; left:80%; background-color: #FFFFFF00; } .cmapshar-har a {position: absolute; z-index:2; width: 17%; height:7.5%; top:11%; left:33%; background-color: #FFFFFF00; } .cmapshar-tex a {position: absolute; z-index:2; width: 11%; height:7%; top:48%; left:75%; background-color: #FFFFFF00; } .cmapshar1 a {position: absolute; z-index:2; width: 10%; height:7%; top:59.5%; left:36%; background-color: #FFFFFF00; } /*------------------------------INSTRUMENTS---------------------*/ .inst-container {position: relative; display: inline-block;width: 82%; margin-top: 20px;left: 12.5%;} #imgprin2 {position: absolute;display: block; width: 15%; left:-15%; top:36%; z-index: 2; } #ins0 { display: flex; height: 85vh; width: 100%; background: #D5CCF4; border: 0.2vw #000000 solid;overflow-y: auto; padding: 15px;gap: 18px;flex-wrap: wrap;justify-content: center; } #ins1,#ins2,#ins3,#ins4,#ins5,#ins6,#ins7,#ins8,#ins9,#ins10,#ins11 { display:inline;width: 29.5%; border-radius: 10px;aspect-ratio: 1 / 1.6; /* Mantiene forma de folio 1.3 */ height: auto;}