/*koloreak*/
:root{
 


  --clr-primary: #000000;
  --clr-secondary: #eb5a38;
  --clr-tertiary: #f29270;

  --clr-berdea: #467670;
  --clr-granatea: #621a38;
  --clr-morea: #b4b2d9;

  --clr-berdea-2: #b9b84b;
  --clr-salmon: #f1645d;
  --clr-hori-argia: #fffde9;

  --clr-berdea-3: #1db57c;
  --clr-salmon-2: #f8ac9f;
  --clr-berdea-4: #878951;
  

  --bs-nav-link-hover-color: var(--clr-secondary);

  --clr-txuria: #ffffff;
  --clr-grixa: #f2f2f2;
 
}
/*-----/carrousel---------------*/
/*-----taula interaktiboa MAHAIGAINEAN---------------*/
.taulaInteraktiboa {
  padding: 0 ;
}

.taulaInteraktiboa > .cont {
  width: 100%;
  max-inline-size: 100%;/*1200px*/
  margin: 0 auto;
  padding: 0 0 0 30px;
  display: flex;
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: 10%;
  align-items: start;
}

.taulaInteraktiboa .cont .espezialitateak {
  /*width: 32%;*/
  margin-right: 2%;
  padding: 0;
  min-inline-size: 310px;
}

.taulaInteraktiboa .cont h2,
.taulaMugikorrean button {
 
 
}

.taulaInteraktiboa .cont .espezialitateak h2{
  background-color: transparent;
  color: var(--clr-primary);
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-block-end: 1.5rem;

}
.taulaMugikorrean #zikloakTabButton.erlaitza-aukeratua {
  background-color: transparent;
  color: var(--clr-primary) !important;
  font-size: 2.5rem;
  padding: 0;
  border: 0;
  font-weight: 400;
}

.taulaInteraktiboa .cont .espezialitateak h3,
#zikloak h3 {
  line-height: 24px;
  padding: 12px 10px 0;  
  font-weight: 400;
  /*background-color: #ffffff;*/
  border-bottom: 1px solid #cccccc;
}

.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion {
  position: relative;
  cursor: pointer;
  margin-inline-start: 0%;
}

.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion:hover h3 {
  color: white;
  color: var(--clr-primary);

}

.taulaInteraktiboa .cont .espezialitateak h3 {
  padding: 1rem 2%;

}

.taulaInteraktiboa .cont .espezialitateak h3:after {
  content: "+";
  float: right;  
  text-align: center;  
  height: 100%;  
}

.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.active h3:after {
  content: "-";
}

.taulaInteraktiboa .cont .espezialitateak ul li,
.taulaInteraktiboa .cont .zentruenZerrenda ul li {
  position: relative;
}

.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li {
  border-bottom: 1px solid #cccccc;  
  background-color: transparent;
  display: flex;
  justify-content: space-between;
}
.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li:hover,
.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li:has(.focus) {
background-color:  hsl(from var(--clr-primary) h s l / .05);
}
.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li .ikastola {
  /*display: inline-block;
  width: 89%;*/
}

.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li div {
 /* margin: 0;
  line-height: 21px;*/
  width: 80%;
 
}

.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea ul li div.focus span {
 /* color: white;*/
}

.taulaInteraktiboa .cont .espezialitateak.ikastolaZutabea .info {
  width: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
   background-color:  hsl(from var(--clr-primary) h s l / .05);
  color: var(--clr-primary);
  text-align: center;
  cursor: pointer;
  line-height: 25px;
}

.taulaInteraktiboa .cont .espezialitateak ul li div,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div {
  
  display: block;
  margin: 0;
  background-color: transparent;
  transition: all 0.5s ease;
}

.taulaInteraktiboa .cont .espezialitateak ul li div span,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div span {
  padding: 2px 10px;
  padding-inline-start: 2.25rem;
  display: block;
  cursor: pointer;
  padding-block: 1rem;
}

.taulaInteraktiboa .cont .zentruenZerrenda ul li div span {
  padding: 8px 10px;
}

.taulaInteraktiboa .cont .espezialitateak .active div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:hover,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.active {
  color: var(--clr-txuria);
  
}
.taulaInteraktiboa .cont .zentruenZerrenda ul li:has(.active),
.taulaInteraktiboa .cont .zentruenZerrenda ul li:has(.focus) {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}


.taulaInteraktiboa .cont .zentruakMapa .probintzia1 h2,
.taulaInteraktiboa .cont .espezialitateak .probintzia1 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia1.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia1:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintzia1 ul li div.active span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia1 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia1 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia1 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia1 ul li span.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia1 ul li div.active,
.modal.probintzia1 .zentruarenIrudia a,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia1 span,
.modal.probintzia1 .itxi:hover,
#zikloak.erlaitza .probintzia1.active,
#zikloak.erlaitza .probintzia1 .accordion:hover,
#zikloak.erlaitza .accordion.probintzia1.active,
.taulaMugikorrean .probintzia1 .ikastolarenIrudia a {
  background-color: #8e4ba0;
  background-color: var(--clr-tertiary);
}
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion:hover h3{
  background-color: hsl(from var(--clr-primary) h s l / .05) !important;
  color: var(--clr-secondary) !important;
}
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.active h3{
  font-weight: 700 !important;
}
#content .taulaInteraktiboa .cont .zentruenZerrenda ul li div:hover,
#content .taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus,
#content .taulaInteraktiboa .cont .espezialitateak .active div:hover,
#content .taulaInteraktiboa .cont .espezialitateak  div.focus span{
  color: var(--clr-secondary) !important;
  background-color: transparent !important;
}
#content .taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus{
  color: var(--clr-txuria) !important;
}
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia2 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia2 ul li div.focus,
.taulaInteraktiboa .cont .espezialitateak .probintzia2.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia2 div.focus span,
.taulaInteraktiboa .cont .zentruakMapa .probintzia2 h2,
.taulaInteraktiboa .cont .espezialitateak .probintzia2 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia2.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia2:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintzia2 ul li div.active span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia2 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia2 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia2 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia2 ul li span.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia2 ul li div.active,
.modal.probintzia2 .zentruarenIrudia a,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia2 span,
.modal.probintzia2 .itxi:hover,
#zikloak.erlaitza .probintzia2.active,
#zikloak.erlaitza .probintzia2 .accordion:hover,
#zikloak.erlaitza .accordion.probintzia2.active,
.taulaMugikorrean .probintzia2 .ikastolarenIrudia a {
  background-color: #deaa39;
  background-color: var(--clr-tertiary);
}

.taulaInteraktiboa .cont .zentruenZerrenda.probintzia3 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia3 ul li div.focus,
.taulaInteraktiboa .cont .espezialitateak .probintzia3.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia3 div.focus span,
.taulaInteraktiboa .cont .zentruakMapa .probintzia3 h2,
.taulaInteraktiboa .cont .espezialitateak .probintzia3 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia3.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia3:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintzia3 ul li div.active span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia3 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia3 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia3 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia3 ul li span.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia3 ul li div.active,
.modal.probintzia3 .zentruarenIrudia a,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia3 span,
.modal.probintzia3 .itxi:hover,
#zikloak.erlaitza .probintzia3.active,
#zikloak.erlaitza .probintzia3 .accordion:hover,
#zikloak.erlaitza .accordion.probintzia3.active,
.taulaMugikorrean .probintzia3 .ikastolarenIrudia a {
  background-color: #44bad5;
   background-color: var(--clr-tertiary);
}

.taulaInteraktiboa .cont .zentruenZerrenda.probintzia4 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia5 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia7 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia4 ul li div.focus,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia5 ul li div.focus,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia7 ul li div.focus,
.taulaInteraktiboa .cont .espezialitateak .probintzia4.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia5.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia7.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia4 div.focus span,
.taulaInteraktiboa .cont .espezialitateak .probintzia5 div.focus span,
.taulaInteraktiboa .cont .espezialitateak .probintzia7 div.focus span,
.taulaInteraktiboa .cont .zentruakMapa .probintzia4 h2,
.taulaInteraktiboa .cont .zentruakMapa .probintzia5 h2,
.taulaInteraktiboa .cont .zentruakMapa .probintzia7 h2,
.taulaInteraktiboa .cont .espezialitateak .probintzia4 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintzia5 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintzia7 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia4.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia4:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia5.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia5:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia7.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia7:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintzia4 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintzia5 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintzia7 ul li div.active span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia4 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia5 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia7 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia4 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia4 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia4 ul li span.active,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia5 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia5 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia5 ul li span.active,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia7 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia7 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia7 ul li span.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia4 ul li div.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia5 ul li div.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia7 ul li div.active,
.modal.probintzia4 .zentruarenIrudia a,
.modal.probintzia5 .zentruarenIrudia a,
.modal.probintzia7 .zentruarenIrudia a,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia4 span,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia5 span,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia7 span,
.modal.probintzia4 .itxi:hover,
.modal.probintzia5 .itxi:hover,
.modal.probintzia7 .itxi:hover,
#zikloak.erlaitza .probintzia4.active,
#zikloak.erlaitza .probintzia4 .accordion:hover,
#zikloak.erlaitza .probintzia5.active,
#zikloak.erlaitza .probintzia5 .accordion:hover,
#zikloak.erlaitza .probintzia7.active,
#zikloak.erlaitza .probintzia7 .accordion:hover,
#zikloak.erlaitza .accordion.probintzia4.active,
#zikloak.erlaitza .accordion.probintzia5.active,
#zikloak.erlaitza .accordion.probintzia7.active,
.taulaMugikorrean .probintzia4 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia5 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia7 .ikastolarenIrudia a {
  background-color: #32960b;
  background-color: var(--clr-tertiary);
}

.taulaInteraktiboa .cont .zentruenZerrenda.probintzia6 ul li div:hover,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia6 ul li div.focus,
.taulaInteraktiboa .cont .espezialitateak .probintzia6.active div:hover,
.taulaInteraktiboa .cont .espezialitateak .probintzia6 div.focus span,
.taulaInteraktiboa .cont .zentruakMapa .probintzia6 h2,
.taulaInteraktiboa .cont .espezialitateak .probintzia6 ul li div.active span,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia6.active h3,
.taulaInteraktiboa .cont .espezialitateak .probintziaAccordion.probintzia6:hover h3,
.taulaInteraktiboa .cont .espezialitateak .probintzia6 ul li div.active span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia6 ul li span,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia6 ul li span:hover,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia6 ul li span.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia6 ul li span.active,
.taulaInteraktiboa .cont .zentruenZerrenda.probintzia6 ul li div.active,
.modal.probintzia6 .zentruarenIrudia a,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li.probintzia6 span,
.modal.probintzia6 .itxi:hover,
#zikloak.erlaitza .probintzia6.active,
#zikloak.erlaitza .probintzia6 .accordion:hover,
#zikloak.erlaitza .accordion.probintzia6.active,
.taulaMugikorrean .probintzia6 .ikastolarenIrudia a {
  background-color: #ce2f2b;
   background-color: var(--clr-tertiary);
}
.probintziaAccordion.active > h3{
  background-color: var(--clr-secondary) !important;
}
.taulaInteraktiboa .cont .espezialitateak ul li .material-symbols-outlined,
.taulaInteraktiboa .cont .zentruenZerrenda ul li .material-symbols-outlined {
  display: none;
}

/* The animation code 
@keyframes zikloakAnimation01 {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #8e4ba0;
    color: white;
  }
}
@keyframes zikloakAnimation02 {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #deaa39;
    color: white;
  }
}
@keyframes zikloakAnimation03 {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #44bad5;
    color: white;
  }
}
@keyframes zikloakAnimation04 {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #32960b;
    color: white;
  }
}
@keyframes zikloakAnimation06 {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #ce2f2b;
    color: white;
  }
}
  */
.taulaInteraktiboa .cont .espezialitateak ul li div.active span {
  color: var(--clr-secondary);
  animation-duration: 0.5s;

}

.taulaInteraktiboa .cont .espezialitateak ul.probintzia1 li div.active span {
  animation-name: zikloakAnimation01;
  
}

.taulaInteraktiboa .cont .espezialitateak ul.probintzia2 li div.active span {
  animation-name: zikloakAnimation02;
  
}

.taulaInteraktiboa .cont .espezialitateak ul.probintzia3 li div.active span {
  animation-name: zikloakAnimation03;
  
}

.taulaInteraktiboa .cont .espezialitateak ul.probintzia4 li div.active span,
.taulaInteraktiboa .cont .espezialitateak ul.probintzia5 li div.active span,
.taulaInteraktiboa .cont .espezialitateak ul.probintzia7 li div.active span {
  animation-name: zikloakAnimation04;
  
}

.taulaInteraktiboa .cont .espezialitateak ul.probintzia6 li div.active span {
  animation-name: zikloakAnimation06;
  
}

/* The animation code */
/***@keyframes zentruakAnimation {
  from {
    background-color: white;
    color: rgb(0, 0, 0);
  }
  to {
    background-color: #54e6b2;
    color: white;
  }
}*/
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus span,
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.active span {
  animation-name: zentruakAnimation;
  animation-duration: 0.5s;
}
.taulaInteraktiboa .cont .espezialitateak ul li div.focus .material-symbols-outlined, 
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus .material-symbols-outlined {
    display: block;
    position: absolute;
    left: 0px;
    top: 11px;
    width: 35px;
}
.taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus .material-symbols-outlined {
    left: 5px;
    top: 3px;
}

.taulaInteraktiboa .cont .zentruenZerrenda ul li div.focus span {
  padding: 8px 10px 8px 30px;
}

.taulaInteraktiboa .cont .zentruakMapa {
  /*width: 64%;*/
  display: flex;
  flex-direction: column;
  position: relative;
}

.taulaInteraktiboa .cont .zentruakMapa h2,
.taulaMugikorrean #zentruakTabButton.erlaitza-aukeratua {
  margin: 0 0 10px;
}
.taulaInteraktiboa .cont .zentruakMapa h2{
  margin-block-end: 2.5rem;
  padding-block-start: .5rem;
}
.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda {
  /*width: 90%;
  margin: 0 0 0 5%;*/
  z-index: 30;
  margin-block-end: 4rem;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda h2 {
  
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda ul {
  margin:0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  font-size: .9rem;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda ul li {
  /*position: relative;
  display: inline-block;
  border-radius: 50px;
  overflow: hidden;*/
  border-radius: 100vw;
  border: 1px solid var(--clr-primary);
  padding-inline: .5rem;
}
/*
.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia1 ul li {
  border: 1px solid #8e4ba0;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia2 ul li {
  border: 1px solid #deaa39;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia3 ul li {
  border: 1px solid #44bad5;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia4 ul li,
.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia5 ul li,
.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia7 ul li {
  border: 1px solid #32960b;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda.probintzia6 ul li {
  border: 1px solid #ce2f2b;
}
*/
.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda ul li .info {
  background-color: #000000;
  color: #ffffff;
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  right: -31px;
  top: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 33px;
  text-align: center;
  transition: all 0.5s ease;
  cursor: pointer;
}

.taulaInteraktiboa .cont .zentruakMapa .zentruenZerrenda ul li .info:hover {
  background-color: #55e6b2;
}

.taulaInteraktiboa .cont .zentruakMapa {
  min-height: 640px;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa {
  position: absolute;
  position: relative;
  top: 0;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia1,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia2,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia3,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia4,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia5,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia6,
.taulaInteraktiboa .cont .zentruakMapa .mapa.probintzia7 {
  top: 12%;
}

.taulaInteraktiboa .cont .zentruakMapa.probintzia1,
.taulaInteraktiboa .cont .zentruakMapa.probintzia5,
.taulaInteraktiboa .cont .zentruakMapa.probintzia7 {
  min-height: 700px;
}

.taulaInteraktiboa .cont .zentruakMapa.probintzia6 {
  min-height: 810px;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa img {
  transition: opacity 0.5s, display 1s;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa img {
  /*width: 98%;
  display: block;
  margin-top: 20px;
  margin-left: 5%;*/
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.mapa-puntua,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.ikastolaPuntua {
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  transition: all 0.5s ease;
  cursor: pointer;
  z-index: 3;
}

.taulaInteraktiboa .cont .zentruakMapa #euskalHerrikoMapa {
  width: 100%;
}

.taulaInteraktiboa .cont .zentruakMapa #euskalHerrikoMapa ul {
  margin: 0;
  list-style: none;
}
.taulaInteraktiboa .cont .zentruakMapa #euskalHerrikoMapa ul li span.ikastolaPuntua {
  /*background-color: cadetblue;
  background-color: hsl(from var(--clr-secondary) h s l / .2);*/
  opacity: .25;
}

.taulaInteraktiboa .cont .probintzia1 #euskalHerrikoMapa ul li span.probintzia1 {
/*  background-color: red; 
  background-color: var(--clr-secondary);*/
  opacity: 1 !important;
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia2 #euskalHerrikoMapa ul li span.probintzia2 {
 /* background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia3 #euskalHerrikoMapa ul li span.probintzia3 {
/*  background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia4 #euskalHerrikoMapa ul li span.probintzia4 {
  /*background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia5 #euskalHerrikoMapa ul li span.probintzia5 {
 /*background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia6 #euskalHerrikoMapa ul li span.probintzia6 {
  /*background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .probintzia7 #euskalHerrikoMapa ul li span.probintzia7 {
  /*background-color: red;
  background-color: var(--clr-secondary);*/
  transition: all  0.5s ease;
  opacity: 1 !important;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span{
  transform-origin: center !important;
}
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child:hover, 
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child.focus, 
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child.active {
    border: 3px solid black;    
    width: 60px;
    height: 60px;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 16px;
    /*background-color: var(--clr-secondary) !important;  */
    opacity: 1 !important;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child:hover {
  border: 10px solid black;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child.focus:hover {
  border: 15px solid black;
  
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child.focus,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child.active {
  z-index: 15;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span:first-child:hover {
  z-index: 20;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.ikastolaIzenaPuntuan {
  width: auto;
  padding: 0 45px 0 15px;
  line-height: 32px;
  border-radius: 0;
  margin-top: 40px;
  background-color: white;
  border: 1px solid black;
  text-align: left;
  z-index: 5;
  height: 34px;
  position: absolute;
  cursor: pointer;
  transition: opacity 0.5s ease;
  opacity: 0;
}
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.ikastolaIzenaPuntuan:hover{
  color: var(--clr-secondary) !important;
}
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.ikastolaIzenaPuntuan span,
.taulaInteraktiboa .cont .zentruakMapa .mapa ul li span.ikastolaIzenaPuntuan span:hover {
  background-color: black;
  border-radius: 0;
  color: white;
  width: 40px;
  display: inline-block;
  margin: -3px -50px 0 10px;
  border: 1px solid black;
  text-align: center;
  height: 34px;
  z-index: 25;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li span.probintziaPuntua {
  width: 60px;
  height: 60px;
  color: white;
  transition: all 0.3s ease;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li span.probintziaIzenaPuntuan {
  position: absolute;
  top: 0;
  margin-top: 70px;
  z-index: 5;
  color: white;
  padding: 5px 15px;
  font-size: 18px;
  text-align: center;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.taulaInteraktiboa .cont .zentruakMapa .mapa ul.probintzia li span:hover {
  width: 70px;
  height: 70px;
  margin-left: -5px;
  margin-top: -5px;
}

.taulaInteraktiboa .cont .zentruakMapa #euskalHerrikoMapa {
/*  margin-top: 140px;*/
}

.modal {
  position: fixed;
  overflow-y: scroll;
  top: 2px;
  left: 0;
  background-color: rgba(245, 245, 245, 0.8);
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: none;
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
}

.taulaMugikorrean .modal {
  position: inherit;
  background-color: rgba(245, 245, 245, 0.8);
  width: 100%;
  height: auto;
  display: block;
}

.modal .itxi {
    position: absolute;
    top: 5px;
    right: 0;
    background-color: var(--clr-grixa);
    color: black;
    /* width: 30px; */
    /* height: 30px; */
    z-index: 10;
    text-align: center;
    border: none;
    
}

.modal .itxi:hover {
   background-color: var(--clr-grixa) !important;
}

.modal .itxi span {
  margin: 3px 0 0;
  cursor: pointer;
  font-weight: 900;
}

.modal .zentruInformazioa {
  padding: 2rem;
  width: 100%;
  max-width: 500px;
  background-color: var(--clr-grixa);
  color: var(--clr-primary);
  position: relative; 
  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
border-radius: .5rem;
}

.modal .zentruInformazioa .cont {
  overflow: hidden;
}

.modal .zentruInformazioa h3 > span {
    color: var(--clr-secondary);
    font-size: 2.5rem;
    border-bottom: 2px solid var(--clr-secondary);
    font-weight: 600;
    width: 100%;
    display: block;
    margin-block-end: 1rem;
    padding-block-end: .25rem;
}

.modal .zentruInformazioa h3 strong {
  display: block;
}

.modal p {
  
}

#content .modal ul {
    list-style: none;
   
   
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-block-end: .25rem;
    border-top: 1px dotted rgba(0,0,0,.5);
    border-bottom: 1px dotted rgba(0,0,0,.5);
    padding-block: .5rem;
    width: 100%;
    margin-inline: auto;
    margin-block: 1rem;
    padding-inline: .5rem;
}

.modal ul li a,
.modal ul li:last-child,
.modal .zentruarenIrudia a {
  color: var(--clr-primary);
  display: flex;
  align-items: center;  
}

.modal .zentruarenIrudia #logoaModala {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100px;
  width: auto;
  background-color: white;
  border: 10px solid white;
}

.modal ul li a {
  text-decoration: none;
  cursor: pointer;
}

.modal ul li .material-symbols-outlined,
.modal ul li .etapakInfo {
  margin: 0 5px 0 0;
}

.modal.probintzia1 ul li .material-symbols-outlined,
.modal.probintzia1 ul li .etapakInfo,
.modal.probintzia1 ul li a:hover,
#zikloak  .modal ul li .material-symbols-outlined,
.probintzia1 .modal ul li .etapakInfo {
  color: var(--clr-primary);
  font-weight: 700;
}

.modal.probintzia2 ul li .material-symbols-outlined,
.modal.probintzia2 ul li .etapakInfo,
.modal.probintzia2 ul li a:hover,
#zikloak .probintzia2 .modal ul li .material-symbols-outlined,
.probintzia2 .modal ul li .etapakInfo {
 color: var(--clr-primary);
  font-weight: 700;
}

.modal.probintzia3 ul li .material-symbols-outlined,
.modal.probintzia3 ul li .etapakInfo,
.modal.probintzia3 ul li a:hover,
#zikloak .probintzia3 .modal ul li .material-symbols-outlined,
.probintzia3 .modal ul li .etapakInfo {
  color: var(--clr-primary);
  font-weight: 700;
}

.modal.probintzia4 ul li .material-symbols-outlined,
.modal.probintzia4 ul li .etapakInfo,
.modal.probintzia5 ul li .material-symbols-outlined,
.modal.probintzia5 ul li .etapakInfo,
.modal.probintzia7 ul li .material-symbols-outlined,
.modal.probintzia7 ul li .etapakInfo,
.modal.probintzia4 ul li a:hover,
.modal.probintzia5 ul li a:hover,
.modal.probintzia7 ul li a:hover,
#zikloak .probintzia4 .modal ul li .material-symbols-outlined,
#zikloak .probintzia5 .modal ul li .material-symbols-outlined,
#zikloak .probintzia7 .modal ul li .material-symbols-outlined,
.probintzia4 .modal ul li .etapakInfo,
.probintzia5 .modal ul li .etapakInfo,
.probintzia7 .modal ul li .etapakInfo {
 color: var(--clr-primary);
  font-weight: 700;
}

.modal.probintzia6 ul li .material-symbols-outlined,
.modal.probintzia6 ul li .etapakInfo,
.modal.probintzia6 ul li a:hover,
#zikloak .probintzia6 .modal ul li .material-symbols-outlined,
.probintzia6 .modal ul li .etapakInfo {
  color: var(--clr-primary);
  font-weight: 700;
}
.modal.probintzia1 .zentruarenIrudia a,
.modal.probintzia2 .zentruarenIrudia a,
.modal.probintzia3 .zentruarenIrudia a,
.modal.probintzia4 .zentruarenIrudia a,
.modal.probintzia5 .zentruarenIrudia a,
.modal.probintzia6 .zentruarenIrudia a,
.modal.probintzia7 .zentruarenIrudia a{
  background-color: var(--clr-grixa);
  color: var(--clr-primary);
  text-decoration: none;
}
.modal ul li .etapakInfo {
 
}

.modal ul li .etapakInfo span,
.modal ul li #etapakModala span {
  
  padding: 2px 10px;
  color: black;
  margin: 0 2px;
}
.modal ul li #etapakModala span {
    padding: 0px 7px;
    color: black;
    margin: 0;
    border-right: 1px solid black;
}
.modal ul li #etapakModala span:last-child {
  border: 0;
}
.modal ul li svg {
  fill: #54e6b2;
  width: 24px;
  margin: -2px 5px 0 0;
}

.modal .zentruarenIrudia {
  position: relative;
}

.modal .zentruarenIrudia img {
  display: block;
  width: 100%;
}

.modal .zentruarenIrudia a {
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    padding: 5px 0px;
    display: block;
    width: 100%;
    display: flex;
}



.modal .zentruarenIrudia a .material-symbols-outlined {
  color: black;
  margin: 0 5px 0 0;
}

body.modal-open {
  overflow: hidden;
}

/*---portatil altuera txikientzat---*/
@media (max-height: 800px) {
  .modal {
    align-items: flex-start;
    padding-top: 40px;
  }
}
/*---/portatil altuera txikientzat---*/
/*-----/taula interaktiboa MAHAIGAINEAN---------------*/
/*-----taula interaktiboa MUGIKORREAN---------------*/
.taulaMugikorrean {
  width: 95%;
  margin: 0 auto 5%;
  display: none; 
}

.taulaMugikorrean select {
  width:100%;
  padding: 1rem;
  border: 0;
  margin-bottom: 1rem;
  border-radius: 0;
  color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.taulaMugikorrean select option {
 
  border-radius: 0;
}

.taulaMugikorrean button {
  cursor: pointer;
}

.taulaMugikorrean #zikloakTabButton,
.taulaMugikorrean #zentruakTabButton {
  
  font-size: 26px;  
  
  padding: 10px 15px 0;
  background-color: #ffffff;
  color: #000000;
  position: relative;
}

.taulaMugikorrean .erlaitza-aukeratua {
  font-weight: 700;
  color: #ffffff !important;
}

/*-------accordion----------------*/
#zikloak h3 {
  margin: 1px 0 0;
}

#zentruak {
  border-top: 10px solid #54e6b2;
}

.erlaitza .accordion {
 
    color: #000000;
    cursor: pointer;
    padding: 3px 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
 
   /* transition: 0.4s;*/
 
    font-weight: 400;
}

#zentruak.erlaitza .active,
#zentruak.erlaitza .accordion:hover {
  background-color: #54e6b2;
}

.erlaitza .active {
  color: var(--clr-primary);
  font-weight: 700;
  
}

.erlaitza .accordion::after {
  content: "+"; /* Unicode character for "plus" sign (+) */
  float: right;
  width: 40px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  line-height: 36px;
      display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
}

.erlaitza .active::after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}

.panel {
  padding: 0 18px;
  
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-block: 0em !important;
}

.panel.active {
    width: 95%;    
    margin-inline: auto;
}

.ikastolaZutabea .panel.active {
  padding: 0;
  overflow: visible;
  list-style: none;
  padding: 0 !important;
}

.panel.active .panel.active {
  padding: 0;
}

.panel.active .accordion {
  padding: 8px 0 8px 20px;
}

.panel.active .accordion::after,
#zentruak .accordion::after {
  content: "i";
  float: right;
  color: var(--clr-primary);
  margin-left: 5px;
  background-color: hsl(from var(--clr-primary) h s l / .05);
  width: 40px;
  height: 100%;
  text-align: center;
  font-weight: 500;
  position: absolute;
  top: 0px;
  right: 0;
  line-height: 35px;
  display: flex;
    justify-content: center;
    align-items: center;
}

.panel.active .accordion.active::after {
 /* height: 120%;*/
}

.panel.active::after {
  display: none;
}

.taulaMugikorrean #zikloak button,
.taulaMugikorrean #zentruak button {
  line-height: 20px;
  margin-top: 1px;
  padding: 8px 40px 8px 20px;
  padding-block: 1rem;
  position: relative;
}

.taulaMugikorrean #zikloak.erlaitza .panel .accordion:hover,
.taulaMugikorrean #zikloak.erlaitza .panel .accordion.active:hover,
.taulaMugikorrean #zentruak.erlaitza .panel .accordion:hover,
.taulaMugikorrean #zentruak.erlaitza .panel .accordion.active:hover {
 background-color: rgba(0,0,0,0.1);
  color: var(--clr-secondary);
}

.taulaMugikorrean #zikloak.erlaitza .panel .accordion.active,
.taulaMugikorrean #zentruak.erlaitza .panel .accordion.active {
  background-color: rgba(0,0,0,0);
  color: var(--clr-secondary);
  font-weight: 700;
}

.taulaMugikorrean #zikloak.erlaitza .probintzia1.panel .accordion.active {
 
}

.taulaMugikorrean #zikloak.erlaitza .probintzia2.panel .accordion.active {
 
}

.taulaMugikorrean #zikloak.erlaitza .probintzia3.panel .accordion.active {
  
}

.taulaMugikorrean #zikloak.erlaitza .probintzia4.panel .accordion.active,
.taulaMugikorrean #zikloak.erlaitza .probintzia5.panel .accordion.active,
.taulaMugikorrean #zikloak.erlaitza .probintzia7.panel .accordion.active {
 
}

.taulaMugikorrean #zikloak.erlaitza .probintzia6.panel .accordion.active {
 
}

#zikloak .panel.active .panel.active,
#zentruak .panel.active .zentruenCont {
  background-color: var(--clr-grixa);
  font-weight: 400;
}

#zentruak .panel.active .zentruenCont {
  padding: 0;
}

#zentruak .panel.active h3 {
  font-size: 20px;
  text-transform: uppercase;
  line-height: 24px;
  padding: 20px 15px 0;
  font-weight: 700;
  background-color: #ffffff;
  margin: 1px 0;
  color: #000000;
}

#zentruak .zerrenda {
  padding: 0;
  margin: 0;
}

#zentruak .zerrenda li {
  line-height: 20px;
  margin-top: 1px;
  padding: 8px 11px 8px 20px;
  position: relative;
  color: #000000;
  font-weight: 400;
  background-color: #ffffff;
}

.taulaMugikorrean #zikloak.erlaitza .panel .accordion:focus,
.taulaMugikorrean #zikloak.erlaitza .panel .accordion.active:focus {
  background-color: rgba(0,0,0,0.1);
  color: #000000;
}

.taulaMugikorrean .ikastolarenIrudia {
  position: relative;
  margin-bottom: -10px;
}

.taulaMugikorrean .ikastolarenIrudia img:first-child {
  width: 100%;
}

.taulaMugikorrean .ikastolarenIrudia .ikastolarenLogoa {
 /* background-color: #ffffff;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 120px;
  border: 10px solid white;*/
}
.taulaMugikorrean .ikastolarenIrudia a .material-symbols-outlined {
    color: var(--clr-primary) !important;
    margin: 0;
}
.taulaMugikorrean .probintzia1 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia2 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia3 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia4 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia5 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia6 .ikastolarenIrudia a,
.taulaMugikorrean .probintzia7 .ikastolarenIrudia a{
    background-color: var(--clr-grixa);
    color: black;
    text-decoration: none;
    display: block;
    width: 100%;
    display: flex;
    align-self: center;
    gap: .5rem;
    padding-inline: 0;
}
.taulaMugikorrean .ikastolarenIrudia a {
  background-color: #000000;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  transition: all 0.5s ease;
  padding: 5px 15px;
  display: flex;
  align-items: center;
}

.taulaMugikorrean .ikastolarenIrudia a .material-symbols-outlined {
  color: #ffffff;
  margin: 0 5px 0 0;
}

/*-------/accordion----------------*/
/*-----/taula interaktiboa MUGIKORREAN---------------*/
/*-----infografia---------------*/
.infografia {
  border-left: 30px solid #6cc3e4;
  padding: 70px 0 50px;
  margin-top: -30px !important;
  width: 68%;
  height: 1010px;
  float: right;
  position: relative;
}

.infografia img {
  max-width: 400px;
  width: 100%;
  display: inline-block;
  margin-left: 7%;
}

.infografia img.plus {
  width: 58px;
  position: absolute;
}

.infografia img.plus01 {
  top: 23%;
  left: 59%;
}

.infografia img.plus02 {
  top: 42%;
  left: 5%;
}

.infografia img.plus03 {
  top: 60%;
  left: 67%;
}

.infografia img.plus04 {
  top: 72%;
  left: 31%;
}

.infografia p {
  font-size: 50px;
  text-align: center;
  width: 230px;
  height: 230px;
  font-family: "hey_marchregular";
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 20px;
  position: absolute;
}

.infografia .testuHertza {
  font-size: 80px;
  line-height: 50px;
}

.infografia .infoTestu01 {
  font-size: 60px;
  width: 315px;
  height: 315px;
  background-color: #df417a;
  top: 29%;
  left: 27%;
}

.infografia .infoTestu01 .testuHertza {
  font-size: 120px;
  line-height: 70px;
}

.infografia .infoTestu02 {
  background-color: #86bc65;
  top: 34%;
  left: 70%;
}

.infografia .infoTestu03 {
  background-color: #6cc3e4;
  top: 56%;
  left: 7%;
}

.infografia .infoTestu04 {
  background-color: #ffc65e;
  top: 65%;
  left: 49%;
}

/*-----/infografia---------------*/
/*-----etapak---------------*/
.etapak {
  width: 32%;
  float: left;
  text-align: center;
  padding: 40px 20px;
}

.etapak h2 {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  margin: 0 0 60px;
}

.etapak h2 span {
  border-bottom: 30px solid #6cc3e4;
  font-weight: 600;
  display: inline-block;
  line-height: 10px;
  padding: 0 20px;
}

.es .etapak h2 {
  font-size: 30px;
  line-height: 40px;
  font-weight: 200;
  margin: 0 0 60px;
  border-bottom: 30px solid #6cc3e4;
}

.es .etapak h2 span {
  line-height: 40px;
  border-bottom: 0;
}

.etapak .etapa01,
.etapak .etapa02,
.etapak .etapa03 {
  font-size: 45px;
  font-weight: 300;
  opacity: 0.8;
  margin: 0;
  line-height: 40px;
  letter-spacing: 8px;
}

.etapak .etapa01 span,
.etapak .etapa02 span,
.etapak .etapa03 span {
  font-size: 93px;
  font-weight: 900;
}

.etapak .etapa01 {
  color: #6cc3e4;
}

.etapak .etapa02 {
  color: #86bc65;
}

.etapak .etapa03 {
  color: #ffb93a;
  margin-bottom: 30px;
}

.etapak .argazkia {
  margin-top: 40px;
  margin-bottom: -40px;
}

/*-----/etapak---------------*/
/*-----iritziak---------------*/
.iritziak {
  border-top: 30px solid #86bc65;
  width: 70%;
  float: right;
  margin-top: -17%;
  margin-bottom: 5%;
  padding: 0;
}

.iritziak .cont {
  width: 80%;
  max-width: 620px;
  margin: -35px auto 0;
  padding: 1.5% 14% 0;
  background: url("../img/iritziak-kakotxak.png") no-repeat top center;
}

.iritziak .cont h2 {
  font-size: 30px;
  line-height: 50px;
  font-weight: 300;
}

.iritziak .cont h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  margin: 50px 0 0;
  width: 340px;
}

.iritziak .cont h2 span {
  font-size: 54px;
  font-weight: 700;
  display: block;
}

/*-------carrousel----------------*/
.iritziak .carousel-container {
  width: 340px;
  margin: 20px 20px 0 0;
  float: none;
}

.iritziak .inner-carousel {
  height: auto;
}

.iritziak .card-container {
  width: 340px;
  height: auto;
  padding: 0;
  background-image: none;
}

.iritziak .card {
  width: 100%;
  height: 100%;
  display: block;
  align-items: center;
  justify-items: center;
}

.iritziak .nav .prev {
  left: -60px;
  display: none;
  background: url("../img/nav-prev-berdea.png") no-repeat 0 0;
}

.iritziak .nav .prev span {
  background: url("../img/nav-prev-beltza.png") no-repeat 0 0;
}

.iritziak .nav .prev:hover {
  background: url("../img/nav-prev-berdea.png") no-repeat -5px 0;
}

.iritziak .nav .prev.show {
  display: block;
}

.iritziak .nav .next {
  right: -50px;
  background: url("../img/nav-next-berdea.png") no-repeat 0 0;
}

.iritziak .nav .next span {
  background: url("../img/nav-next-beltza.png") no-repeat 0 0;
}

.iritziak .nav .next:hover {
  background: url("../img/nav-next-berdea.png") no-repeat 5px 0;
}

.iritziak .nav .next.hide {
  display: none;
}

.iritziak .contText {
  background-color: #F6FBF7;
  padding: 30px;
}

.iritziak .bideoCont {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.iritziak .bideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-----/carrousel---------------*/
/*-----/iritziak---------------*/
/*-----/main---------------*/
/*-----footer---------------*/
footer {
  background: url("../img/oina_big.jpg") no-repeat top center;
  padding: 135px 0 15px;
  clear: both;
  background-size: cover;
}

footer .cont {
  background-color: #ffffff;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

footer .cont p {
  margin: 0;
  line-height: 24px;
  width: 60%;
  padding: 5px 0 0;
}

footer .cont ul {
  display: flex;
  text-align: right;
  width: 40%;
  justify-content: flex-end;
}

footer .cont ul li a {
  padding: 5px 10px 2px;
  display: inline-block;
  border-bottom: 5px solid #ffffff;
  transition: all 0.3s ease;
  position: relative;
}

footer .cont ul li a::after {
  content: "";
  width: 0;
  height: 5px;
  background-color: #df417a;
  transition: all 0.3s ease;
  position: absolute;
  bottom: -10px;
  left: 0;
}

footer .cont ul li:nth-child(2) a::after {
  background-color: #ffb93a;
}

footer .cont ul li:nth-child(3) a::after {
  background-color: #6cc3e4;
}

footer .cont ul li:nth-child(4) a::after {
  background-color: #86bc65;
}

footer .cont ul li a:hover::after {
  width: 100%;
}

/*-----/footer---------------*/
#topBtn {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(0, 0, 0);
  color: white;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: #333333;
}

/*-----404 errorea---------------*/
#edukia.errorea404 {
  position: relative;
  overflow: visible;
  padding: 20px 0 0;
}

#edukia.errorea404 img {
  margin: 50px auto 0;
  line-height: 0;
  display: block;
}

#edukia.errorea404 .bueltatuAtarira {
  position: absolute;
  bottom: -5%;
  left: 0;
  width: 50%;
}

#edukia.errorea404 .bueltatuAtarira div {
  padding: 30px;
  background-color: #ffffff;
  width: 80%;
}

#edukia.errorea404 a {
  background-color: #df417a;
  color: #ffffff;
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  padding: 20px 50px;
  transition: all 0.3s ease;
  display: flex;
  width: 100%;
}

#edukia.errorea404 a:hover {
  background-color: #000000;
  padding: 20px 40px 20px 50px;
}

#edukia.errorea404 a img {
  transition: all 0.3s ease;
  margin: 0;
}

#edukia.errorea404 a:hover img {
  margin-left: 10px;
}

/*-----/404 errorea---------------*/
@media (max-width: 1920px) {
  #portadakoIrudia {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 780px;
  }
  #portadakoIrudia img {
    width: auto;
    max-width: inherit;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    margin-left: -960px;
  }
}
@media (max-width: 1160px) {
  .carousel-container {
    width: 500px;
  }
  .card-container {
    width: 250px;
  }
}
@media (max-width: 1024px) {

  #portadakoIrudia {
    height: 550px;
  }
  #portadakoIrudia img {
    max-width: inherit;
    left: 50%;
    height: 450px;
    margin-left: -510px;
  }
  .contEsteka {
    margin: 0 auto;
    background-color: #df417a;
  }
  .gureIkastolak,
  .infografia,
  .etapak,
  .iritziak {
    width: 95%;
    margin: 0 auto;
    float: none;
  }
  #edukia .gureIkastolak .ezk {
    border-bottom: 0;
  }
  #edukia.errorea404 > img {
    width: 85%;
    margin: 80px auto 0;
  }
  .infografia {
    border-left: 0;
    border-bottom: 30px solid #6cc3e4;
  }
  .etapak {
    display: flex;
    align-items: flex-end;
    padding: 0;
  }
  .etapak .cont {
    width: 50%;
    padding: 40px;
  }
  .etapak .argazkia {
    width: 50%;
  }
  .etapak .argazkia img {
    margin-right: 0;
    width: 100%;
  }
  footer {
    background: url("../img/oina_medium.jpg") no-repeat bottom center;
    padding: 160px 0 15px;
  }
  footer .cont {
    display: block;
  }
  footer .cont p,
  footer .cont ul {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
  }
  #edukia.errorea404 .bueltatuAtarira {
    bottom: -5%;
    width: 80%;
  }
}
@media (max-width: 860px) {
  #edukia .gureIkastolak .ezk {
    width: 45%;
  }
  .carousel-container {
    width: 250px;
  }
  .card-container {
    width: 250px;
  }
  #edukia.errorea404 .bueltatuAtarira {
    position: relative;
  }
  .contEsteka {
    flex-direction: column;
  }
  .contEsteka .matrikulazioData {
    max-width: 100%;
  }
  #gureIkastolakContainer {
    border-top: 0;
  }
}
@media (max-width: 780px) {
  .taulaInteraktiboa {
    display: none;
  }
  .taulaMugikorrean {
    display: block;
  }
  .taulaMugikorrean #zikloak{
    background-color: var(--clr-grixa);
  }
  .taulaMugikorrean #zikloak > .panel,
  .taulaMugikorrean #zikloak > div button{
    border-bottom: 1px solid hsl(from var(--clr-primary) h s l / .2);
  }  
  .infografia {
    text-align: center;
    justify-content: center;
    align-items: center;
    height: auto;
    float: none;
    display: flex;
    flex-direction: column;
  }
  .infografia img {
    margin-left: 0;
    display: block;
    margin-bottom: 30px;
  }
  .infografia .infoTestu01,
  .infografia .infoTestu02,
  .infografia .infoTestu03,
  .infografia .infoTestu04,
  .infografia img.plus,
  .infografia .plus01,
  .infografia .plus02,
  .infografia .plus03,
  .infografia .plus04 {
    position: inherit;
    left: inherit;
    top: inherit;
  }
  #zikloak.erlaitza .probintzia1.active,
  #zikloak.erlaitza .probintzia2.active,
  #zikloak.erlaitza .probintzia3.active,
  #zikloak.erlaitza .probintzia4.active,
  #zikloak.erlaitza .probintzia5.active,
  #zikloak.erlaitza .probintzia6.active,
  #zikloak.erlaitza .probintzia7.active,
  #zikloak.erlaitza .accordion.probintzia1.active  {
    background-color: var(--clr-grixa) !important;
    color: var(--clr-secondary) !important
  }
}
@media (max-width: 600px) {
  .contEsteka .matrikulazioData {
    padding: 15px 40px;
  }
  .contEsteka a,
  .contEsteka a:hover {
    width: 100%;
    padding: 10px 30px 10px 40px;
  }
  #gureIkastolakContainer {
    border-top: 0;
  }
  header .cont ul {
    flex-wrap: wrap;
    justify-content: center;
    height: 70px;
    text-align: center;
    margin: 25px 0 0;
  }
  header .cont ul li:first-of-type {
    flex: 1 0 100%;
  }
  .carousel-container {
    display: none;
  }
  #edukia .gureIkastolak .ezk {
    width: 100%;
  }
  .etapak {
    display: block;
  }
  .etapak .cont,
  .etapak .argazkia {
    width: 100%;
  }
  .iritziak .cont {
    padding: 20px 0 1.5% 0;
    width: 100%;
    background-size: 100%;
  }
  .iritziak .cont h2 {
    padding: 0 60px;
    line-height: 36px;
  }
  .iritziak .cont h2 span {
    line-height: 60px;
  }
  .iritziak .cont h3 {
    margin: 50px auto 0;
  }
  .iritziak .carousel-container {
    display: block;
    margin: 20px auto;
    padding: 0 0 70px;
  }
  .iritziak .nav {
    float: none;
  }
  .iritziak .nav button {
    top: inherit;
    bottom: 0;
  }
  .iritziak .nav .prev {
    left: 30%;
  }
  .iritziak .nav .next {
    right: 30%;
  }
  footer {
    width: 95%;
    margin: 0 auto;
    padding: 190px 0 15px;
    background: url("../img/oina_small.jpg") no-repeat bottom center;
  }
  footer .cont ul {
    margin: 10px auto;
  }
  footer .cont ul,
  footer .cont ul li a {
    display: block;
  }
  footer .cont ul li a {
    border-bottom: 0;
    padding: 0;
  }
  footer .cont p strong {
    display: block;
  }
  footer ul li span {
    display: none;
  }
  #edukia.errorea404 img {
    margin: 90px auto 0;
  }
  #edukia.errorea404 .bueltatuAtarira {
    width: 100%;
  }
  
}
@media (max-width: 500px) {
  #portadakoIrudia {
    height: 480px;
  }
  #portadakoIrudia img {
    height: 350px;
    margin-left: -250px;
  }
  .contEsteka {
    margin: -30px auto 0;
  }
}




/*# sourceMappingURL=style.css.map */