@import url(./fonts.css);

:root {
    /*COLOR*/
    --default-primary-color: #367C2B;
    --default-secundary-color: #FFDD00;
}

 /*.infografia .right input { 
    display: none; 
}

.infografia .right p { 
    margin: 0; 
    font-size: 1rem;
    padding: 0px 15px 15px 15px;
    line-height: 1.125rem;
}

.infografia .right b {
    font-size: 1.125rem;
}

.infografia .right i {
    cursor: pointer;
} 

.button { 
    width: 15px;
    height: 15px;
    background-color: var(--default-secundary-color); 
    display: block;
    border-radius: 100%; 
    cursor: pointer; 
    animation: fadein .5s; 
    animation: pulse 1.5s infinite; 
}

.content { 
    width: 50%;
    background: #f4f4f4d6;
    display: none;
    border-radius: 8px;
}

.derecha {
    text-align: right;
    margin-bottom: -20px;
    margin-right: 5px;
    font-size: 1.6rem;
}

#b1, #input1:checked ~ #content1 { 
    position: absolute; 
    left: 13%; 
    top: 33%; 
}

#b2 { 
    position: absolute; 
    left: 42%; 
    top: 11%; 
}

#input2:checked ~ #content2 { 
    position: absolute; 
    left: 30%; 
    top: 11%; 
}

#b3 { 
    position: absolute; 
    left: 63%; 
    top: 16%; 
}

#input3:checked ~ #content3 {
    position: absolute; 
    right: 20%; 
    top: 16%; 
}

#b4 { 
    position: absolute; 
    left: 77%; 
    top: 14%; 
}

#input4:checked ~ #content4 {
    position: absolute; 
    right: 10%; 
    top: 14%; 
}

#b5 { 
    position: absolute; 
    left: 76%; 
    top: 35%; 
}

#input5:checked ~ #content5 {
    position: absolute; 
    right: 10%; 
    top: 35%;
}

#b6 { 
    position: absolute; 
    left: 64%; 
    top: 59%; 
}

#input6:checked ~ #content6 {
    position: absolute; 
    right: 10%; 
    top: 59%; 
}

#b7 {
    position: absolute;
    left: 54%;
    bottom: 25%;
}

#input7:checked ~ #content7 { 
    position: absolute; 
    left: 42%;
    bottom: 22%;
}

#b8, #input8:checked ~ #content8 { 
    position: absolute; 
    left: 34%; 
    bottom: 19%; 
}

#b9, #input9:checked ~ #content9 { 
    position: absolute; 
    left: 28%; 
    top: 59%; 
}

#input1:checked ~ #content1,
#input2:checked ~ #content2,
#input3:checked ~ #content3,
#input4:checked ~ #content4,
#input5:checked ~ #content5,
#input6:checked ~ #content6,
#input7:checked ~ #content7,
#input8:checked ~ #content8,
#input9:checked ~ #content9 { 
    display: block !important; 
    animation: fadein .5s; 
}

input:checked ~ label .button { 
    display: none !important; 
    animation: fadeout .5s; 
}*/

.map {
    position: relative;
    max-width: 1100px;
    margin: auto;
    background-color: #ccc;
}

/* .map img {
    display: block;
    width: 100%;
} */

.map-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    width: 60%;
    padding: 1rem;
    background: #f4f4f4d6;
    transition: all 300ms ease-in;
    transform: translate(-50%,-50%);
    /* box-shadow: 0 0 24px rgba(0,0,0,0.22); */
    visibility: hidden;
    border-radius: 8px;
}

.map-popup > *:first-child { margin-top: 0; }
.map-popup > *:last-child { margin-bottom: 0; }

.map-popup.open {
    opacity: 1;
    visibility: visible;
}

.marker {
    position: absolute;
    z-index: 1;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    width: 15px;
    height: 15px;
    background-color: var(--default-secundary-color); 
    border-radius: 100%; 
    cursor: pointer; 
    animation: fadein .5s; 
    animation: pulse 1.5s infinite; 
}

.marker1 {
    left: 12%;
    top: 36%;
}
.marker2 {
    left: 30%; 
    top: 11%; 
}
.marker3 {
    right: 20%; 
    top: 16%; 
}
.marker4 {
    right: 10%; 
    top: 14%; 
}
.marker5 {
    right: 10%; 
    top: 35%;
}
.marker6 {
    right: 10%; 
    top: 59%; 
}
.marker7 {
    left: 42%;
    bottom: 22%;
}
.marker8 {
    left: 34%; 
    bottom: 19%; 
}
.marker9 {
    left: 28%; 
    top: 59%; 
}

.map-item1 {
    left: 12%;
    top: 36%;
}
.map-item2 {
    left: 42%; 
    top: 11%; 
}
.map-item3 {
    left: 65%;
    top: 18%;
}
.map-item4 {
    left: 77%; 
    top: 14%; 
}
.map-item5 {
    left: 76%; 
    top: 35%; 
}
.map-item6 {
    left: 63%;
    top: 61%;
}
.map-item7 {
    left: 53%;
    bottom: 22%;
}
.map-item8 {
    left: 33%;
    bottom: 14%;
}
.map-item9 {
    left: 27%;
    top: 64%;
}

.infografia aside p { 
    margin: 0; 
    font-size: 1rem;
    line-height: 1.125rem;
}

.infografia aside b {
    font-size: 1.125rem;
}

@media only screen and (min-width:48em) {
    .map-item {
        position: absolute;
        width: 36px;
        height: 36px;
    }
    .map-item .marker {
        top: auto;
        left: auto;
    }

    .map-popup {
        position: absolute;
        left: 58px;
        width: 350px;
        transform: translate(-45%, 10%);
    }

    .map-popup.edge {
        left: auto;
        right: calc(100% + 24px);
    }
    .map-popup.edge:before {
        left: auto;
        right: -16px;
        border-width: 16px 0 16px 16px;
        border-color: transparent transparent transparent #fff;
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes fadeout {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(255, 221, 0); }
    to { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  }
  
  @media (max-width: 768px) {
      .infografia .right p { 
          margin: 0; 
          font-size: 14px;
          padding: 0px 15px 15px 15px;
          line-height: 1rem;
      }
      
      .infografia .right b {
          font-size: 16px;
      }
  }