/* Estilos para el mapa. */

.usMap {
    /* background-color: rgb(0, 0, 0); */
    display: block;
    margin: 0 auto;
    max-width: 1000px;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
    transition: opacity 1.0s, transform 1.0s;

}

.usMap.animation {
    /* display: none; */
    transform: scale(0.1) rotate(360deg);
    opacity: 0;

    /* filter: drop-shadow(3px 3px 2px rgb(255, 0, 0)); */
}

.mapStyles {
    fill: #ffffff;
    transition: fill 1s;
    stroke: #676767;
    stroke-width: 1;
    transition: fill 1s;
}

.mapStyles:hover {
    fill: #ffff00;
    stroke: #859403;
    stroke-width: 2;
}

.mapStyles:active {
    /* fill: #ffff00; */
    fill: #8c8d8b;
    stroke: #80807d;
    stroke-width: 2;
    /* transform: scale(2.0); */
}


.mapStyles2 {
    fill: #000000;
    /* Concatenación de animaciones, insertarlas 1 por uno no funciona */
    transition: fill 1s, stroke 1s, stroke-width 1s;
    stroke: #676767;
    stroke-width: 1;
    cursor: pointer;
}

.mapStyles2:hover {
    /* fill: #ffff00; */
    fill: #59ff00;
    stroke: #038003;
    stroke-width: 2;
    /* transform: scale(2.0); */
}

.mapStyles2:active {
    fill: #ff0000;
    stroke: #800303;
    stroke-width: 2;
}


.imageSizing {
    height: 35% !important;
    max-width: 35% !important;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    display: block;

    /* Filtar aplica CSS directamente a la imagen, aplicando filtros de sombreado, saturación, difuminado, etc */
    transition: filter 1s, transform 1s, opacity 1.0s, transform 1.0s;
    filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, .7));


}

.imageSizing:hover {
    /* Filtar aplica CSS directamente a la imagen, aplicando filtros de sombreado, saturación, difuminado, etc */
    filter: drop-shadow(7px 7px 7px rgba(106, 222, 80, 0.7));
}

.imageSizing.animation {
    transform: scale(0.1) rotate(360deg);
    opacity: 0;
    /* position: relative; */

    /* display: none; */
}

.linkStyles {
    color: black;
    /* text-shadow: 0 0 1em #038003; */
    transition: color 0.5s, text-shadow 0.5s;
}

.linkStyles:hover {
    color: #5c7e00;
    text-shadow: 0 0 0.2em #555555;
}

.linkStyles:active {
    color: #038003;
    text-shadow: 0 0 1em #597451;
}

.stateImg {
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}


.card {
    transition: opacity 3.5s;
    opacity: 0;
    box-shadow: 5px 5px 5px rgb(112, 112, 112);
}

.card.animation {
    opacity: 1;
}

.bgMap {
    background-image: url('../images/states/bgMap.jpg');
    /* background-size: cover; */
}