body,html
{
    width:99%;
    background:#000000;
    font-family: 'Lato', sans-serif;
}

.logo{
    padding: 50px 276px 30px 276px;
}
.container{
    padding: 0px 276px 0px 276px;

}
.cardbackground{
    width:100%;
    position: relative;
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
}


.emergencytext{
    background:#FFFFFF;
    font-weight: bold;
    font-family: Arial;
    font-size:13px;
    padding: 15px;
    position:absolute;
    margin-top:-90px;
    margin-left:25px;
}
.emergencycircle {
    -webkit-animation: bgcolorchange 2s infinite;
    animation: 2s infinite bgcolorchange;
    width: 100px;
    height: 100px;
    margin-left:-50px;
    margin-top:-50px;
    position:absolute;
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;

}
@keyframes bgcolorchange {
    0% {
        background-image: url("../img/circle_small_big.png");

    }
    100% {
        background-image: url("../img/circle_great_big.png");
    }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bgcolorchange {
    0% {
        background-image: url("../img/circle_small_big.png");
    }

    100% {
        background-image: url("../img/circle_great_big.png");
    }
}

#emergencycircledemo, #emergencytextdemo{
    top:0px;
    left:0px;

}

.emergencytestbutton{
    position: absolute;
    bottom:0px;
    left:0px;
    width:110px;
    height:83px;
}

.cardinfo{
    padding:37px 276px 0px 0px;
    font-size:18px;
    font-weight:bold;
    text-align: right;
    color:#FFFFFF;
}

.info{
    position: fixed;
    bottom:0px;
    right:0px;
    font-family: Arial;
    font-size:9px;
    color:#FFFFFF;

}