@font-face {
    font-family: GTHaptikThin;
    src: url('fonts/GT-Haptik/GT-Haptik-Thin-app/GTHaptikThin.eot?#iefix') format('embedded-opentype'), url('fonts/GT-Haptik/GT-Haptik-Thin-app/GTHaptikThin.otf') format('opentype'), url('fonts/GT-Haptik/GT-Haptik-Thin-app/GTHaptikThin.woff') format('woff'), url('fonts/GT-Haptik/GT-Haptik-Thin-app/GTHaptikThin.ttf') format('truetype'), url('fonts/GT-Haptik/GT-Haptik-Thin-app/GTHaptikThin.svg#GTHaptikThin') format('svg');
}

@font-face {
    font-family: MarkPro;
    src: url('fonts/MarkPro/MarkPro.eot?#iefix') format('embedded-opentype'), url('fonts/MarkPro/MarkPro.otf') format('opentype'), url('fonts/MarkPro/MarkPro.woff') format('woff'), url('fonts/MarkPro/MarkPro.ttf') format('truetype'), url('fonts/MarkPro/MarkPro.svg#MarkPro') format('svg');
}

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue/BebasNeue.otf') format('opentype'), 
         url('fonts/BebasNeue/BebasNeue.woff') format('woff'),
         url('fonts/BebasNeue/BebasNeue.ttf') format('truetype'),
         url('fonts/BebasNeue/BebasNeue.svg#BebasNeue') format('svg');
}

.FlotanteBomberos {
    z-index: 5000;
    display: block;
    position: fixed;
    font-family: BebasNeue;
    /*top: 4%;
    right: 31vw;*/
    min-width: 130px;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.72);
    /*border-bottom-left-radius: 10%;
    border-top-left-radius: 10%;*/
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    width:100%;
    height:100%;


}
.body {
    background-color: Gray;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

    .FlotanteBomberos img {
        width: 28vw;
        height: 43vw;
        min-width: 80px;
        padding: 1.5vw 0.8vw 0.5vw 2vw;
        border-radius: 65px 50px 50px 65px;
        text-align: center;
        margin-top: 09px;
        background-position:center;
    }

    .FlotanteBomberos p {
        color: white;
        text-align: center;
        font-size: 1.5vw;
        padding-bottom: 1.5vw;
        line-height: 1.2;
    }

    .FlotanteBomberos a {
        color: #000000;
        text-align: center;
        text-decoration: underline;

    }

    .FlotanteBomberos .x {
        width: 1.5vw;
        height: 1.5vw;
        min-width: 10px;
        min-height: 10px;
        font-size: 1.3vw;
        padding: 0.2vw;
        left: -35.2vw;
        top: 2vw;
        font-weight: bolder;
        text-align: center;
        color: #ffffff;
        font-family: GTHaptikThin;
        display: block;
        position: relative;
        float: right;
        background-color: #0820a8;
        border-radius: 50%;
        cursor: pointer;
        background-position:center;
    }

.hidden {
    opacity: 0;
    z-index: 0;
    
}


.close {
    right: -150%;
}

@media (max-width: 1000px) {
    .FlotanteBomberos p {
        font-size: 120pt;
    }

    .FlotanteBomberos .x {
        font-size: 12pt;
        width: 20px;
        height: 20px;
        margin-top: 100px;
        left:-78px;
        background-position: 9% left;
    }
    .FlotanteBomberos img {
        width: 60vw;
        height: 100vw;
        min-width: 80px;
        padding: 1.5vw 0.8vw 0.5vw 2vw;        
        text-align: center;
        margin-top: 100px;
        border-radius: 30px 30px 30px 30px;
        background-position: 95% center;
    }
}