/*CSS for the service_icons SVG ("Renewable Fuels" image, "Service" page)*/

/*Hover selector --> When hovering icons, run CSS to upscale them*/
.icon {
    animation-name: icon_downscale;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

.icon:hover {
    animation-name: icon_upscale;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

/*Transformation origins for icons, needed to center their transformation, avoiding translation*/
#alternative_x5F_fuels {
    transform-origin: 456px 272px;
}

#LNG {
    transform-origin: 832px 191px;
}

#methanol {
    transform-origin: 465px 83px;
}

#wind {
    transform-origin: 85px 170px;
}

#electricity {
    transform-origin: 192px 442px;
}

#hydrogen {
    transform-origin: 746px 467px;
}

/* Upscale icons, depending on browser */
@-webkit-keyframes icon_upscale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@-moz-keyframes icon_upscale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes icon_upscale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

/* Downscale icons, depending on browser */
@-webkit-keyframes icon_downscale {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes icon_downscale {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes icon_downscale {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}