*{
    box-sizing: border-box;
}
/* ==================================================================================== */
/* កូដសម្រាប់ធ្វើការកែតម្រូវ ScrollBar ទាំងពីរ */
/* width */
::-webkit-scrollbar{
    width: 6px; /* ទទឹង ScrollBar បញ្ឈរ */
    height: 6px; /* កំពស់ ScrollBar ផ្តេក */
}
/* Track */
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px rgb(255, 163, 163); 
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb{
    background: rgb(131, 0, 120); 
    border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
    background: #ff0000; 
}
/* ======================================================================================= */
.showloginform{
    position: fixed;
    top: 0px;
    left: 0px;
    border: none;
    width: 100%;
    height: 50px;
    margin: auto;
    color: white;
    font-size: 22px;
    background-color: rgb(119, 0, 255);
    padding: 10px 20px;
    opacity: 0.5;    
}
.showloginform:hover{
    font-style: italic;
    cursor: pointer;
    opacity: 1;
    color: #f44336;
}
.loginForm_middlebox{
    position: fixed;
    top: 50px;
    left: 0px;
    float: left;
    width: 100%;
    height: calc(100% - 85px);
    background-color: #000;
    color: white;
    z-index: -1;
}
.LoginFormleft{
    padding-top: 35px;
    float: left;
    width: 45%;
    height: calc(100% - 0px);
    text-align: center;
}
.div_wrapper {
    width: 400px;
    height: 400px;
    margin: 50px auto;
    perspective: 800px;
}
.box_div {
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    animation: rotation 15s linear infinite;
}
.box_div div {
    width: 100%;
    height: 100%;
    position: absolute;
}
.LoginFormright .slogansResult-Box {
    padding-top: 20px;
    float: left;
    width: 55%;
    height: calc(100% - 0px);
}
.LoginFormright{
    text-align: left;
}
.slogansTitle{
    font-family: Khmer OS Bokor;
    letter-spacing: 5px;
    color: rgb(38, 255, 38);
}
.slogansBasic{
    display: block;
    padding: 0px 50px;
    font-family: Khmer OS Metal Chrieng;
    color: #d91cff;
    font-size: 22px;
}
/* ==================================================================================== */
/* Rotate */
#typewriter-prefix {
    text-align: left;
    color: #E8175D;
}
#typewriter-suffix {
    color: rgb(127, 125, 255);
}
#typewriter-text {
    color: rgb(247, 231, 0);
}
#typewriter-prefix, #typewriter-text{
    font-weight: 400;
}
.flexboxcontainer {
    display: flex;
}
.heading{
    color: #0089FF;
}

.slogans_Box{
    margin-top: 20px;
}
.slogansResult{
    display: block;
    padding: 5px 50px;
    font-family: Khmer OS Fasthand;
}
.sr01{
    color: rgb(151, 151, 255);
}
.sr02{
    color: rgb(222, 142, 224);
}
.sr03{
    color: rgb(206, 115, 115);
}
.loginForm_bottombar{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height:35px;
    background-color: #222;
    color: white;
    border-bottom: 1px solid rgb(129, 129, 129);
    padding-top: 5px;
    text-align: center;
}
.loginForm_bottombar .addressInfo{
    font-size: 12px;
    font-family: Khmer OS Fasthand;
    color: #e5ff00;
}

/* ================================================================================================================================ */
/* Part of Style of Page login with animation */
.autocomplete{
    width: 200px;
    z-index: 10;
}
.autocomplete-active {
    background-color: rgb(157, 158, 158) !important; 
    color: #d100d1; 
}
.autocomplete-items div {
    padding: 5px 10px;
    cursor: pointer;
    background-color: rgb(85, 85, 85);
    color: rgb(9, 255, 0);
}
.autocomplete-items div:hover {
    
    background-color: rgb(100, 100, 100);
    color: rgb(200, 255, 0);
}



.LoginFormLogo{
    width: 80%;
}
.company_nameT{ 
    font-family: Khmer OS Muol Light, Khmer OS Freehand;
    border-bottom: 1px solid red;
}
.loginX_company{
    font-family: Khmer OS Muol Light, Khmer OS Freehand;
    border-bottom: 1px solid red;
}
.company_namee{
    font-family: 'Times New Roman', Times, serif;
    border-bottom: 1px solid red;
    padding-top: 20px;
}
@keyframes rotation {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}
.front {
    transform: translateZ(200px);
    background: url('../homeimagefolder/angkorwat01.jpg');
    background-size: cover;
}
.back {
    transform: rotateY(180deg) translateZ(200px);
    background: blue;
    background: url('../homeimagefolder/angkorwat02.jpg');
    background-size: cover;
}
.left {
    transform: rotateY(-90deg) translateX(-200px);
    transform-origin: left;
    background: url('../homeimagefolder/angkorwat03.jpg');
    background-size: cover;
}
.right {
    transform: rotateY(90deg) translateX(200px);
    transform-origin: right;
    background: url('../homeimagefolder/trustbooksLogo.png');
    background-size: cover;
}
.top {
    transform: rotateX(-90deg) translateY(-200px);
    transform-origin: top;
}
.bottom {
    transform: rotateX(90deg) translateY(200px);
}



/* ======================================================================= */

/*Sentence*/
.sentence {
    color: #222;
    font-size: 30px;
    text-align: left;
}

/*Wrapper*/
.wrapper {
    background-color: #f5f5f5;
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*Vertical Sliding*/
.slidingVertical {
    display: inline;
    text-indent: 8px;
}

.slidingVertical span {
    animation: topToBottom 12.5s linear infinite 0s;
    -ms-animation: topToBottom 12.5s linear infinite 0s;
    -webkit-animation: topToBottom 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.slidingVertical span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.slidingVertical span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.slidingVertical span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.slidingVertical span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: translateY(-50px);
    }

    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes topToBottom {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes topToBottom {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: translateY(-50px);
    }

    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateY(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Horizontal Sliding*/
.slidingHorizontal {
    display: inline;
    text-indent: 8px;
}

.slidingHorizontal span {
    animation: leftToRight 12.5s linear infinite 0s;
    -ms-animation: leftToRight 12.5s linear infinite 0s;
    -webkit-animation: leftToRight 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.slidingHorizontal span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.slidingHorizontal span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.slidingHorizontal span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.slidingHorizontal span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*leftToRight Animation*/
@-moz-keyframes leftToRight {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: translateX(-50px);
    }

    10% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes leftToRight {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes leftToRight {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: translateX(-50px);
    }

    10% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateX(50px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*FadeIn*/
.fadeIn {
    display: inline;
    text-indent: 8px;
}

.fadeIn span {
    animation: fadeEffect 12.5s linear infinite 0s;
    -ms-animation: fadeEffect 12.5s linear infinite 0s;
    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.fadeIn span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.fadeIn span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.fadeIn span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.fadeIn span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: translateY(0px);
    }

    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeEffect {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: translateY(0px);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeEffect {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: translateY(0px);
    }

    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Vertical Flip*/
.verticalFlip {
    display: inline;
    text-indent: 8px;
}

.verticalFlip span {
    animation: vertical 12.5s linear infinite 0s;
    -ms-animation: vertical 12.5s linear infinite 0s;
    -webkit-animation: vertical 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.verticalFlip span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.verticalFlip span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.verticalFlip span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.verticalFlip span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotateX(180deg);
    }

    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes vertical {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotateX(180deg);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes vertical {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotateX(180deg);
    }

    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Horizontal Flip*/
.horizontalFlip {
    display: inline;
    text-indent: 8px;
}

.horizontalFlip span {
    animation: horizontal 12.5s linear infinite 0s;
    -ms-animation: horizontal 12.5s linear infinite 0s;
    -webkit-animation: horizontal 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.horizontalFlip span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.horizontalFlip span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.horizontalFlip span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.horizontalFlip span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Horizontal Flip Animation*/
@-moz-keyframes horizontal {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotateY(180deg);
    }

    10% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes horizontal {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotateY(180deg);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes horizontal {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotateY(180deg);
    }

    10% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*AntiClockWise Effect*/
.antiClock {
    display: inline;
    text-indent: 8px;
}

.antiClock span {
    animation: anti 12.5s linear infinite 0s;
    -ms-animation: anti 12.5s linear infinite 0s;
    -webkit-animation: anti 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.antiClock span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.antiClock span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.antiClock span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.antiClock span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*AntiClockWise Effect Animation*/
@-moz-keyframes anti {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotateX(180deg);
    }

    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes anti {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(180deg);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes anti {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotate(180deg);
    }

    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*ClockWise Effect*/
.clockWise {
    display: inline;
    text-indent: 8px;
}

.clockWise span {
    animation: clock 12.5s linear infinite 0s;
    -ms-animation: clock 12.5s linear infinite 0s;
    -webkit-animation: clock 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.clockWise span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.clockWise span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.clockWise span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.clockWise span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*ClockWise Effect Animation*/
@-moz-keyframes clock {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(-180deg);
    }

    10% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes clock {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(-180deg);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes clock {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotate(-180deg);
    }

    10% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Pop Effect*/
.popEffect {
    display: inline;
    text-indent: 8px;
}

.popEffect span {
    animation: pop 12.5s linear infinite 0s;
    -ms-animation: pop 12.5s linear infinite 0s;
    -webkit-animation: pop 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.popEffect span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.popEffect span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.popEffect span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.popEffect span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Pop Effect Animation*/
@-moz-keyframes pop {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes pop {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes pop {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateY(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Push Effect*/
.pushEffect {
    display: inline;
    text-indent: 8px;
}

.pushEffect span {
    animation: push 12.5s linear infinite 0s;
    -ms-animation: push 12.5s linear infinite 0s;
    -webkit-animation: push 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}

.pushEffect span:nth-child(2) {
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

.pushEffect span:nth-child(3) {
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.pushEffect span:nth-child(4) {
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

.pushEffect span:nth-child(5) {
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Push Effect Animation*/
@-moz-keyframes push {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -moz-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -moz-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes push {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -webkit-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes push {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 0;
        -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px);
    }

    10% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    25% {
        opacity: 1;
        -ms-transform: translateX(0px);
    }

    30% {
        opacity: 0;
        -ms-transform: translateX(0px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*Footer*/
h3 {
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
    text-align: center;
}