/* Estilos para o efeito de flip */
.flip-box {
    width: 550px;
    height: 300px;
    perspective: 1000px;
    margin: auto;
    text-align: center;
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-box-back {
    transform: rotateY(180deg);
}

.flip-box.flip .flip-box-inner {
    transform: rotateY(180deg);
}

/* Definindo o tamnho da imagem e do vídeo*/
.flip-box-front img {
    width: 300px;
}
#videoPlayer {
    width: 550px;
}

/* Estilos responsivos para o cabeçalho */
@media (max-width: 768px) {
    #defesaCivil {
        display: none;
    }
    .flip-box {
        /* centralizar a imagem */
        margin: auto;
        width: 300px;
    }    
    /* Diminui o tamanho do vídeo */
    #videoPlayer {
        width: 300px;
        height: 300px;
        margin: auto;
    }
}