/*common/general css styles that can be used in various pages*/

.hvCenter{
    position: absolute;

    right: 50%;
    bottom: 50%;
    -webkit-transform: translateX(50%) translateY(50%);
    -moz-transform: translateX(50%) translateY(50%);
    -ms-transform: translateX(50%) translateY(50%);
    -o-transform: translateX(50%) translateY(50%);
    transform: translateX(50%) translateY(50%);
}

.verticalCenter{
    position: absolute;

    bottom: 50%;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

.horizontalCenter{
    position: absolute;

    right: 50%;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
}

.scrollableY {
    overflow: hidden;
    overflow-y: auto;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

.box {
    position: relative;
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.blinkX2p2 {
    animation: blink 0.8s infinite linear;
}

.blinkX2 {
    animation: blink 1s infinite linear;
}

.blink{

    animation: blink 2s infinite linear;

}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.pulsate{

    animation: pulsate 0.75s infinite linear;
    -webkit-animation: pulsate 0.75s infinite linear;
    -moz-animation: pulsate 0.75s infinite linear;

}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: translateX(50%) translateY(50%) scale(1);
    }
    30% {
        -webkit-transform: translateX(50%) translateY(50%) scale(1);
    }
    50% {
        -webkit-transform: translateX(50%) translateY(50%) scale(1.2);
    }
    70% {
        -webkit-transform: translateX(50%) translateY(50%) scale(1);
    }
    100% {
        -webkit-transform: translateX(50%) translateY(50%) scale(1);
    }
}

@-moz-keyframes pulsate {
    0% {
        -moz-transform: translateX(50%) translateY(50%) scale(1);
    }
    30% {
        -moz-transform: translateX(50%) translateY(50%) scale(1);
    }
    50% {
        -moz-transform: translateX(50%) translateY(50%) scale(1.2);
    }
    70% {
        -moz-transform: translateX(50%) translateY(50%) scale(1);
    }
    100% {
        -mpz-transform: translateX(50%) translateY(50%) scale(1);
    }
}

@keyframes pulsate {
    0% {
        transform: translateX(50%) translateY(50%) scale(1);
    }
    30% {
        transform: translateX(50%) translateY(50%) scale(1);
    }
    50% {
        transform: translateX(50%) translateY(50%) scale(1.2);
    }
    70% {
        transform: translateX(50%) translateY(50%) scale(1);
    }
    100% {
        transform: translateX(50%) translateY(50%) scale(1);
    }
}