*{
    margin: 0;
    padding: 0;
}


.rotate_phone{
    display: none;
}
.rotate_phone.rotated{
    display: block;
    z-index: 400;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color:#EC1C24 ;
}

.rotate_phone.rotated p{
    font-family: NotoSansJP-Thin;
    padding: 10px;
    text-align: center;
    font-size: 3em;
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
}



body{
    
 
    width: 100%;
    height: 100%;
    font-family: 'NotoSansJP-Thin';
    font-size: 0.9em;
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
    text-decoration: none;
}




.fibre_section{
    position: absolute;
    padding: 30px;
    width: 10%;
    height: 10%;
    min-width: 100px;
    z-index: 500;

}



@keyframes blury1 {
    0%{filter: blur(0);}
    30%{filter: blur(6px);}
    100%{filter: blur(0);}
    
}
@keyframes blury2 {
    0%{filter: blur(0);}
    60%{filter: blur(6px);}
    100%{filter: blur(0);}
    
}


.map_section{
    position: fixed;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    background: #EC1C24;
    min-width: 500px;
    animation: blury2 1.5s;
    transition: transform 1.5s ease-in-out;
    
}

.map_section.zoom{
  
    transform: translate(55%) scale(8) ;
    animation: blury1 1.5s;

}

.map_elements{
    width: 100%;
    height: 100%;
}

.no1{
    transform: scale(10);
}
#no1{

cursor: pointer;
transition: fill 1s;
}
#no1:hover{
    fill: blue;

}

@keyframes blink {
    0%{ opacity:0%;}
    25%{ opacity:100%;}
    50%{ opacity:0%;}
    75%{ opacity:100%;}
    100%{opacity:0%;}
    
}


#About_Fibre,
#Fibre_portions,
#VEZELRIJK_restaurant_guide,
#Growing_fibre,
#Bread,
#Recipes,
#Public_Toilets,
#Water_tap,
#Affording_fibre,
#Health_Prevention__x26__Movement,
#Gender,
#Injera,
#ramadan_map,
#INfo{
    display: none;
    transition: fill 0.3s;
    animation: blink 3s; 
}

#About_Fibre:hover,
#Fibre_portions:hover,
#VEZELRIJK_restaurant_guide:hover,
#Growing_fibre:hover,
#Bread:hover,
#Recipes:hover,
#Public_Toilets:hover,
#Water_tap:hover,
#Affording_fibre:hover,
#Health_Prevention__x26__Movement:hover,
#Gender:hover,
#Injera:hover,
#ramadan_map:hover,
#INfo:hover{
    cursor: pointer;
    fill: yellow;
}
.st34, 
.st31, 
.st33, 
.st30, 
.st29, 
.st28{
    animation: blink 2s;
    transition: fill 0.3s;
   
}
.st34:hover,
.st31:hover,
.st33:hover,
.st30:hover,
.st29:hover,
.st28:hover{
    fill: yellow;
}



#About_Fibre.display,
#Fibre_portions.display,
#VEZELRIJK_restaurant_guide.display,
#Growing_fibre.display,
#Bread.display,
#Recipes.display,
#Public_Toilets.display,
#Water_tap.display,
#Affording_fibre.display,
#Health_Prevention__x26__Movement.display,
#Gender.display,
#Injera.display,
#ramadan_map.display,
#INfo.display{
    display: block;
    
    
}



/* -----------  Legend Menu */

@keyframes menu {
    from{opacity: 0%;}
    to{opacity: 100%;}
}
@keyframes menucontainer {
    from{right: 400px;}
    to{right: 30px;}
}

.menu_container{
    width: 300px;
    /* min-width: 300px; */
    position: absolute;
    z-index: 100;
    opacity: 100%;
    right: 30px;
    top: 40px;

}

.menu{
    width: 300px;
    /* min-width: 300px; */
    z-index: 100;
    opacity: 0%;
    right: 30px;
    top: 40px;
    background-color: #FFC7DE;
    display: none;

}

.menu.display{
    opacity: 100%;
    display: block;
    animation: menu 2s;
    
}

.legend{
    background-color: #FA80BA;

    font-family: 'NotoSansJP-Regular';
    font-size: 25px ;
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Regular.otf');
    padding: 10px;
}





.container{
    padding: 15px;
}
input[type="checkbox"]{

    width: 20px;
    height: 20px;
    border: solid black;
}
.items{
    width: 100%;
    height: 100%;
    margin-top: 10px;
    font-family: 'Courier New', Courier, monospace;

    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
}
label{
    display: grid;
    grid-template-columns: 20% 80%;
    column-gap: 10px;
    align-items: center;

    font-family: 'NotoSansJP-Thin';
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
    font-size: 15px;
}

#injera_menu{
    display: grid;
    grid-template-columns: 20% 80%;
    column-gap: 10px;
    align-items: center;

    font-family: 'NotoSansJP-Thin';
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
    font-size: 15px;
}
.injera_menu{
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 0px;
    align-items: center;
    width: 80%;

    font-family: 'NotoSansJP-Thin';
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
    font-size: 15px;
}


/* --------- Zooming buttons */
@keyframes blink_buttons {
    0%{  fill: yellow;  }
    25%{ fill: blue;  }
    50%{ fill: yellow;  }
    75%{ fill: blue;  }
    100%{fill: yellow;  }
    
}

#buttons{
    width: 300px;
    bottom: 20px ;
    right: 30px;
    margin-top: 20px;
    position: absolute;
    cursor: pointer;
    fill: #ffffff;

   display: block;
}
#buttons.delete{
    display: none;
}


#circle{
    opacity: 70%;
    fill: #000000af;
    transition: 1s;
   
}
#circle:hover{
    fill: yellow;
}



/* ------- About button */

#about{
    display: none;
}
#about.removed{
    display: block;
}


.escape_main{
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #FFC7DE;
    border-radius: 50%;
    right: 10%;
    top: 10%;
    
    text-align: center;
    display: none;
    cursor: pointer;
    transition: background-color 1s;
}

.escape_main:hover{
    background-color: blue;
}

.escape_main.show{
    display: block;
}
.escape_main p{
    margin-top: 50%;
    transform: translate(0px, -50%);
    font-family: 'system-ui';
    font-size: 30px;
}

.text_container_about{
    position: fixed;
    width: 70vw;
    height: 50vh;
    min-width: 400px;
    background-color: #FFC7DE;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    padding: 40px;
    overflow: auto;
    
    display: none;
}



.text_container_about.text{
    display: block;

}






/* ------------------ texts */

.text_container{
    position: fixed;
    width: 70vw;
    height: 50vh;
    min-width: 400px;
    background-color: #FFC7DE;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: NotoSansJP-Thin;
    src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
    font-size: 0.9em;
    padding: 40px;
    overflow: auto;
    
    display: none;
}



.text_container.text{
    display: block;

}




.escape{
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #FFC7DE;
    border-radius: 50%;
    right: 10%;
    top: 10%;
    
    text-align: center;
    display: none;
    cursor: pointer;
    transition: background-color 1s;
}
.escape:hover{
    background-color: blue;
}
.escape.show{
    display: block;
}
.escape p{
    margin-top: 50%;
    transform: translate(0px, -50%);

    font-family: 'system-ui';
   
    font-size: 30px;


}

.portions_text,
.bread_text,
.affording_text,
.vezerlijk_text,
.toilets_text,
.water_text,
.injera_text,
.gender_text,
.health_text,
.breafast_text,
.lunch_text,
.dinner_text,
.about_text,
.ramadan_text,
.growing_text,
.fibre_text,
.about_text{
    display: none;
}


.portions_text.text,
.bread_text.text,
.affording_text.text,
.vezerlijk_text.text,
.toilets_text.text,
.water_text.text,
.injera_text.text,
.gender_text.text,
.health_text.text,
.breafast_text.text,
.lunch_text.text,
.dinner_text.text,
.about_text.text.text,
.ramadan_text.text,
.growing_text.text,
.fibre_text.text,
.about_text.text{
    display: block;
}




.portion10, 
.portion4{
    width: 40%;
    margin: 10px;
}
.portion11{
    width: 30%;
    margin: 10px;
}

.break{
    width: 60%;
}





@media only screen and (max-width: 1024px) {

    body{
    
 
        width: 100%;
        height: 100%;
        font-family: 'NotoSansJP-Thin';
        src: url('/fonts/Noto_Sans_JP/NotoSansJP-Thin.otf');
        font-size: 10px;
        text-decoration: none;
    }


    .map_section.zoom{
        transform: translate(35%) scale(8);
    }
  



    
    
    
    .fibre_section{
        position: absolute;
        padding: 30px;
        width: 5%;
        height: 5%;
        
        z-index: 100;
    
    }
    
    .fibre_letters{
       width: 70%;
    }
    
    #buttons{
        transform: scale(70%);
    
    }

    .menu_container{
        position: fixed;
        width: 300px;
        height: 100vh;
        overflow: scroll;
        opacity: 100%;
        z-index: 10;
        top: 0;
        right: 0px;
    }
    .menu{
 
  
        right: 30px;
        top: 40px;
        background-color: #FFC7DE;
    display: none;
    
    }



.menu.display{
    opacity: 100%;
    display: block;
    animation: menu 2s;
    
}



@keyframes phoneanimation {
    0%{opacity: 0%;}
    100%{opacity: 100%;}
    
}
.menu_phone{
    position: fixed;
    width: 30px;
    height: 30px;
    left: 20px;
    bottom: 30px;
    text-align: center;
    background-color: #FFC7DE;
    border-radius: 50%;
    z-index: 200;
    animation: phoneanimation 2s;
    
    display: none;

}
.menu_phone.phone{
    display: block;
}





/* close */


.close_ph p{
    position: relative;
    left: 50%;
    transform: translate(-40%,30px);
    color: white;
}
.close-button_ph{
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(1);
    width: 30px;
    border-bottom: 1px white solid;
    transition: 0.9s cubic-bezier(.2,.15,.38,.99);
}
.close-button_ph::after{
    content: '';
    position: absolute;
    width: 50px;
    border-bottom: 1px white solid;
    transition: 0.7s cubic-bezier(.2,.15,.38,.99);
    transform: translateY(15px);
    
}
.close_ph:hover .close-button_ph{
    transform: translateX(-150%) scaleX(0);
}
.close_ph:hover .close-button_ph::after{
    transform: translate(-80%,15px) scaleX(0);
}

.close-button2_ph{
    position: absolute;
    left: 150%;
    transform: translateX(-50%) scaleX(0);
    width: 30px;
    border-bottom: 1px white solid;
    transition: 0.9s cubic-bezier(.2,.15,.38,.99);
}
.close-button2_ph::after{
    content: '';
    position: absolute;
    width: 20px;
    border-bottom: 1px white solid;
    transition: 0.7s cubic-bezier(.2,.15,.38,.99);
    transform: translateY(15px);
    
}
.close_ph:hover .close-button2_ph{
    transform: translateX(-150%) scaleX(1.5);
}
.close_ph:hover .close-button2_ph::after{
    transform: translate(-10%,15px) scaleX(1);
}



.text_container{
    width: 65vw;
    height: 80vh;
    min-width: 10px;
    transform: none;
    left: 25vw;
    top: 0%;
    padding: 40px;
    z-index: 200;
}

.text_container_about{
    width: 65vw;
    height: 80vh;
    min-width: 10px;
    transform: none;
    left: 25vw;
    top: 0%;
    padding: 40px;
    z-index: 200;
}


.escape{
right: 0%;
left: 5%;
top: 75%;

}

#buttons{
    top: 75vh;
    bottom: none;
    left: -5vw;
    right: none;
    z-index: 100;
    width: 400px;
}





}