html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: whitesmoke; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 50%; /* 50% from the bottom */
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

    #snackbar.showoff {
        visibility: hidden;
        -webkit-animation: fadeout 0.5s;
        animation:  fadeout 0.5s;
    }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 50%;
        opacity: 1;
    }
}
/*
@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 50%;
        opacity: 1;
    }
}*/

@-webkit-keyframes fadeout {
    from {
        bottom: 50%;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

/*@keyframes fadeout {
    from {
        bottom: 50%;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
} */


.icon-big {
    transform: scale(1.5); 
}

.domanda {
    outline: 0px solid;
    outline-color: blue;
}

.domanda:hover{
    outline:5px solid;
    outline-color:black;
}

.domanda:active, .domanda:focus{
    outline: 2px solid;
    outline-color:blue;
}

    
.text-to-right{
    text-align:end!important
}

.d-ruby {
    display: ruby;
}

.d-contents {
    display:contents !important;
}

.scale-medium {
    transform: scale(2);
}

.font-venti{
    font-size:20px !important;
}

.pszn-end{
    position:relative;
    right:-70%;
}

.img-pers{
    height: 60vh !important; 
}

.tondo {
    border-radius: 10%;
}

.max-width{
    max-width:200px;
}

.min-width{
    min-width:200px;
}

.mioMapUno {
    height: 20%;
    background-color: red;
    opacity: 0.000001;
    z-index: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    flex: 1 1 10%;
    -webkit-flex: 1 1 10%;
}

.mioMapDue {
    /*height: 20%;*/
    background-color: yellow;
    opacity: 0.000000001;
    z-index: 2;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    flex: 1 1 10%;
    -webkit-flex: 1 1 10%;
    visibility: visible !important;
}

.mapContainer {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: stretch;
    -webkit-align-items: stretch;
    padding-left: 5%;
    padding-right: 5%;
}

.mapContainerSub {
    height: 20%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: stretch;
    -webkit-align-items: stretch;
}

.mioMapUno:hover {
    opacity: 0.6;
}

.mioMapDue:hover {
    opacity: 0.6;
}

.provoDiv {
    position: absolute;
    /*opacity: 0.1;*/
}
/*
.myModalConferma > .modal-dialog > .modal-content {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}*/

.immagineLocModale {
    background-size:cover;
    height:fit-content;
    width:fit-content;
   
}