/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


/* 
    Created on : Aug 3, 2018, 9:26:05 AM
    Author     : aneeshdy
*/

html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "PT Serif";
    height: 100%;
    background-color: #f1f1f1;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden
}
.middle-div img{
    -webkit-animation: vibrate-1 2s linear infinite both;
    animation: vibrate-1 2s linear infinite both;
}


.mg-b{margin-bottom: 0 !important}
.mg-0{margin: 0 !important}
.pull-left{float: left}
.pull-right{float: right}
.section {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

::-webkit-scrollbar {
    display: none;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 30, 66, 0.6);
    z-index: 1
}

.bg {
    background: url(../images/kb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    position: relative;
}

.middle-div {

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.middle-div h1 {
    margin: 0;
    font-size: 100px;
    color: #ECFB02;
}

.middle-div h2 {
    color: #fff;
    font-size: 35px;
    margin: 10px
}

video {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;


}

.container {
    max-width:850px;
    margin: 0 auto
}
.container-lg {
    max-width: 1000px;
    margin: 0 auto
}
.players-top{
    background-image: url(../images/bg-dot.png), url(../images/bg-dot-btm.png);
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}
.sub-section {
    padding: 50px 0 50px 0;
}
.sub-section-small {
    padding: 50px 0 50px 0;
}
.sub-section-large {
    padding: 150px 0 0px 0;
}
.sub-section h1, .sub-section-small h1 {
    font-size: 35px;
    margin-top: 0
}
.sub-section-small h2{font-size:30px;}

.goal-section-wrapper {
    background-color: #002f87;
    min-height: 250px;
    -moz-box-shadow: 10px 10px rgba(213,213,213,0.5);
    -webkit-box-shadow: 10px 10px rgba(213,213,213,0.5);
    box-shadow: 10px 10px rgba(213,213,213,0.5);
    width: 100%;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    transform:skew(-20deg);
    position:relative;
    border:none;
    background-image:url(../images/name-on.png);
    background-repeat:no-repeat;
    background-position:center

}
.goal-section-wrapper-small {
    background-color: #002f87;
    min-height: 150px;
    -moz-box-shadow: 10px 10px rgba(213,213,213,0.5);
    -webkit-box-shadow: 10px 10px rgba(213,213,213,0.5);
    box-shadow: 10px 10px rgba(213,213,213,0.5);
    width: 100%;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    transform:skew(-20deg);
    position:relative;
    border:none;
    background-image:url(../images/name-on.png);
    background-repeat:no-repeat;
    background-position:center

}
.goal-section-wrapper-jeje {
    background-color: #002f87;
    min-height: 250px;
    -moz-box-shadow: 10px 10px rgba(213,213,213,0.5);
    -webkit-box-shadow: 10px 10px rgba(213,213,213,0.5);
    box-shadow: 10px 10px rgba(213,213,213,0.5);
    width: 100%;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    transform:skew(-20deg);
    position:relative;
    border:none;
    background-image:url(../images/bg-jeje.png);
    background-repeat:no-repeat;
    background-position:center

}
.goal-section-wrapper-sunil {
    background-color: #002f87;
    min-height: 250px;
    -moz-box-shadow: 10px 10px rgba(213,213,213,0.5);
    -webkit-box-shadow: 10px 10px rgba(213,213,213,0.5);
    box-shadow: 10px 10px rgba(213,213,213,0.5);
    width: 100%;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    transform:skew(-20deg);
    position:relative;
    border:none;
    background-image:url(../images/bg-sunil.png);
    background-repeat:no-repeat;
    background-position:center

}
.players{
    position:absolute;
    left:-5px;
    bottom:-5px;
    -webkit-transform:skew(20deg) ;
    -moz-transform:skew(20deg);
    transform:skew(20deg);
}
.players-small{
    position:absolute;
    left:-5px;
    bottom:-5px;
    -webkit-transform:skew(20deg) ;
    -moz-transform:skew(20deg);
    transform:skew(20deg);
}
.players-right{
    position:absolute;
    right:0;
    bottom:-5px;
    -webkit-transform:skew(20deg) ;
    -moz-transform:skew(20deg);
    transform:skew(20deg);
}

.goal-section-wrapper-inner {
    float: right;
    width: 50%;
    margin-top: 80px;
    color: #fff;
    -webkit-transform:skew(20deg) ;
    -moz-transform:skew(20deg);
    transform:skew(20deg);
    margin-right: 50px;


}
.goal-section-wrapper-inner-small {
    float: right;
    width: 50%;
    margin-top: 60px;
    color: #fff;
    -webkit-transform:skew(20deg) ;
    -moz-transform:skew(20deg);
    transform:skew(20deg);
    margin-right: 25px;

}



.goal {
    width: 100%;
    text-align: center
}

.goal-count {
    display: inline-block
}

.table h1 {
    margin: 0;
    font-size:60px;
    font-weight:bold !important;
font-family: Oswald;

}

.table h2 {
    margin: 0;
font-family: Oswald;
}
.table-small h1 {
    margin: 0;
    font-size:30px;
    font-weight:bold !important;
font-family: Oswald;

}

.table-small h2 {
    margin: 0;
    font-size:18px;
font-family: Oswald;
}
.table-small table td{padding:0 5px 0 5px}
table tr,
td {
    padding:0 30px 0 30px
}

table {
    border-collapse: collapse;

}

table td {
    border-right: 1px solid #fff;

}
img{max-width:100%}
img,
a,
button {
    outline: none;
    border: 0;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
.players-name-right{
    padding:10px; width:200px; height:60px; background-color:#F8FF03; position:absolute; right:60%; margin-right:-100px; top:-30px; 
    -moz-box-shadow: 10px 10px rgba(207,201,19,0.8);
    -webkit-box-shadow: 10px 10px rgba(207,201,19,0.8);
    box-shadow: 10px 10px rgba(207,201,19,0.8);   display: flex;
    justify-content: center;
    align-items: center;}

.players-name{
    padding:10px; width:200px; height:60px; background-color:#F8FF03; position:absolute; left:60%; margin-left:-100px; top:-30px; 
    -moz-box-shadow: 10px 10px rgba(207,201,19,0.8);
    -webkit-box-shadow: 10px 10px rgba(207,201,19,0.8);
    box-shadow: 10px 10px rgba(207,201,19,0.8);   display: flex;
    justify-content: center;
    align-items: center;}

.players-name-small{
    padding:5px;  background-color:#F8FF03; position:absolute; left:40%;  top:-20px; 
    -moz-box-shadow: 10px 10px rgba(207,201,19,0.8);
    -webkit-box-shadow: 10px 10px rgba(207,201,19,0.8);
    box-shadow: 10px 10px rgba(207,201,19,0.8);   display: flex;
    justify-content: center;
    align-items: center;}
.players-name-small h3{font-size:18px;}

.saves-assists{
    float:left; width:49%; margin-right:1%; margin-bottom:150px;}	
.players-name-small h2{position:absolute; top:-29px;}
.players-name h3, .players-name-right h3, .players-name-small h3, .players-name-small h2{ 
    margin:0;  -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    transform:skew(20deg); color:#002f87; font-weight:bold; text-align:center}
ul {
    margin: 0;
    padding: 0
}

li {
    list-style-type: none;
}

* {
    box-sizing: border-box;
}

.clearfix {
    clear: both;
}

.text-center {
    text-align: center
}
.text-right {
    text-align: right
}



footer p {
    margin: 0
}

.social-media-main {
    width: 60px;
    height: 226px;
    float: left;
    position: fixed;
    bottom: 50%;
    z-index: 9;
    right: 10px;
    margin-bottom: -113px;
}

.social-media-ins {
    width: 50px;
    height: 215px;
    float: left;
    margin: 5px;
}

.social-media-head {
    width: 100%;
    height: auto;
    float: left;
    font-family: arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    margin-bottom: 5px;
    text-align: center;
    line-height: 110%;
}

.social-media-icon {
    width: 50px;
    height: 50px;
    float: left;
    margin-bottom: 5px;
    cursor: pointer;
    background-image: url(../images/social.png);
    background-repeat: no-repeat;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.tw-clr {
    background-position: 0 -102px;
    background-color: #2caafe;
}

.gl-clr {
    background-position: 0 -51px;
    background-color: #fb443e;
}

.wt-clr {
    background-position: 0 -153px;
    background-color: #13b345;
}

.fb-clr {
    background-color: #2b44a0;
    background-position: 0 0px;
}

@media only screen and (max-width: 768px) {
.sub-section h1, .sub-section-small h1 {
    font-size: 25px;
    margin-top: 0
}
    .container-lg{padding:10px;}
    .middle-div img{max-width: 75% !important;}
    .web-video{display: none}
    .mob-video{display: block}
    .season{background-color: #082762;}
    .goal-section-wrapper{box-shadow:none }
    .sub-section h1{font-size: 30px;}
    .sub-section{padding: 20px 0 20px 0}
    .sub-section-small{padding-bottom: 0; padding-top: 20px;}
    .goal-section-wrapper-small{box-shadow: none}
    .sub-section-large{padding-bottom: 0}
    .all-season, .wins{width: 100% !important ;}
    .social-media-main {
        width: 100% !important;
        height: auto !important;
        position: inherit !important;
        padding: 0px;
        text-align: center !important
    }
    .social-media-ins {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: inline-block
    }
    .social-media-icon {
        margin: 0 !important
    }
    .social-media-icon {
        border-radius: 0 !important;
        width: 25% !important
    }
    .fb-clr {
        background-position: 50% 0px;
    }
    .tw-clr {
        background-position: 50% -102px;
    }
    .gl-clr {
        background-position: 50% -51px;
    }
    .wt-clr {
        background-position: 50% -153px;
    }
    .stories-wrapp{width: 98% !important;}
    .row{margin: 0 !important}
    .graph{margin-top: 0 !important}
    .players,.players-small{max-width:100%; text-align:center; right:0; top:0; top: -189px;}
    .players-right{max-width:100%; text-align:center; right:0; top:0; top: -189px; left:0}
    .players-name, .players-name-small{left:50% !important; width:220px; margin-left:-110px; }
    .players-name-right{right:50% !important; width:220px; margin-right:-110px; }
    .goal-section-wrapper,.goal-section-wrapper-small, .goal-section-wrapper-jeje, .goal-section-wrapper-sunil, .players-name h3,.players-name-small h3,.players-name-small h2, .players,.players-small, .players-right, .players-name-right h3{
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        transform: skew(0deg);

    }
    .table h1{font-size: 49px}
    .players-name-small h2{top: 50px ; color: #fff}
    .players-small{top: -135px}
    .saves-assists{width: 100%; margin-right: 0; float: none}
    .goal-section-wrapper, .goal-section-wrapper-jeje, .goal-section-wrapper-sunil{min-height:180px;}

    .goal-section-wrapper-inner,.goal-section-wrapper-inner-small{
        width:100%;
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        transform: skew(0deg);
        margin-right:0;
        margin-top:60px;

    }
    .goal-section-wrapper-sunil, .goal-section-wrapper-jeje{box-shadow: none}
    .middle-div h1{font-size:45px;}
    .middle-div h2{font-size: 19px;}
    /*    .goal-section{margin-bottom:100px;}*/
}
.mob-video{display: none}
@media only screen and (max-width: 768px) {
    .web-video{display: none}
    .mob-video{display: block}
}
.all-season{
    width: 60%; float: left; background-color: #002f87; padding: 20px;
    background-image:url(../images/logo-blaseters.png);
    opacity:1;
    background-repeat:no-repeat;
    background-position:center;
    min-height: 500px

}
.season{

    background-image:url(../images/section-bg.png);
    background-repeat:no-repeat;
    color: #fff;
    background-color: #fff
}
.season-box-yellow{
    width:50%; float: left; padding: 10px;
    text-align: center;
    background-color:#fff940;
    color: #002f87;
    margin-top: 20px;
    -webkit-animation: scale-in-center 8s ease-in-out 0.2s infinite ;
    animation: scale-in-center 8s ease-in-out 0.2s infinite ;

}
.season-box-blue{
    width:50%; float: left; padding: 10px;
    text-align: center;
    background-color: #1aa1e0;
    color: #fff;
    margin-top: 20px;
    -webkit-animation: scale-in-center 8s ease-in-out 0.5s infinite ;
    animation: scale-in-center 8s ease-in-out 0.5s infinite ;
}
.season-box-yellow h1, .season-box-blue h1{
    font-size: 60px;
}
.graph{
    margin-top: 100px;
    margin-bottom: 20px; 
    height: 300px;
    position: relative;
    background-image:url(../images/grid.png);
    background-repeat:repeat;


}
/*graph-first*/
.graph-first{
    float: left;
    width: 25%;
    position: absolute;
    bottom: 8px
}
.graph-first .bar-graph-goal-first{
    height: 200px;
    float: left; 
    width: 25px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 0.2s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 0.2s infinite ;
}
.graph-first .bar-graph-goal-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
.graph-first .bar-graph-match-first{
    height: 180px;
    float: left;
    width: 25px;
    background-color: #1aa1e0; 
    position: absolute;
    bottom: 0; 
    left: 30px;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 0.5s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 0.5s infinite ;
}
.graph-first .bar-graph-match-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px;
}
.year{
    position: absolute;
    bottom: -40px;
    left: 0; 
    width: 100%; 
    text-align: left;
    font-size:15px
}
/*graph-first*/




/*graph-second*/
.graph-second{
    float: left;
    width: 25%;
    position: absolute;
    bottom: 8px;
    left: 25%;
}
.graph-second .bar-graph-goal-first{
    height: 160px;
    float: left; 
    width: 25px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 0.8s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 0.8s infinite ;
}
.graph-second .bar-graph-goal-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
.graph-second .bar-graph-match-first{
    height: 170px;
    float: left;
    width: 25px;
    background-color: #1aa1e0; 
    position: absolute;
    bottom: 0; 
    left: 30px;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 1.1s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 1.1s infinite ;
}
.graph-second .bar-graph-match-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
/*graph-second*/



/*graph-third*/
.graph-third{
    float: left;
    width: 25%;
    position: absolute;
    bottom: 8px;
    left: 50%;
}
.graph-third .bar-graph-goal-first{
    height: 220px;
    float: left; 
    width: 25px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 1.4s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 1.4s infinite ;
}
.graph-third .bar-graph-goal-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
.graph-third .bar-graph-match-first{
    height: 140px;
    float: left;
    width: 25px;
    background-color: #1aa1e0; 
    position: absolute;
    bottom: 0; 
    left: 30px;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 1.7s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 1.7s infinite ;
}
.graph-third .bar-graph-match-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
/*graph-third*/


/*graph-fourth*/
.graph-fourth{
    float: left;
    width: 25%;
    position: absolute;
    bottom: 8px;
    left: 75%;
}
.graph-fourth .bar-graph-goal-first{
    height: 130px;
    float: left; 
    width: 25px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 2s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 2s infinite ;
}
.graph-fourth .bar-graph-goal-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
.graph-fourth .bar-graph-match-first{
    height: 170px;
    float: left;
    width: 25px;
    background-color: #1aa1e0; 
    position: absolute;
    bottom: 0; 
    left: 30px;
    -webkit-animation: scale-in-ver-bottom 5s ease-in-out 2.3s infinite ;
    animation: scale-in-ver-bottom 5s ease-in-out 2.3s infinite ;
}
.graph-fourth .bar-graph-match-first .label{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -40px
}
/*graph-fourth*/

.label-yellow{
    height: 10px;
    width: 10px;
    background-color: #ECFB02;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}
.label-blue{
    height: 10px;
    width: 10px;
    background-color: #1aa1e0;
    float: left; 
    margin-right: 5px;
    margin-top: 5px;
}
.label-goal{
    float: left; 
    margin-right: 5px;
}
.label-goal h4, .label-blue h4{font-size:14px}

.wins{
    width: 40%;
    float: left;
    background-color: #082762;
    font-size: 18px;
    background-image:url(../images/wins-bg.png);
    min-height: 500px;
    background-repeat: no-repeat;
    background-position:center;
}
.wins table{
    border-collapse: collapse;
    width: 100%
}
.wins table tr td{
    padding: 11px 30px 11px 30px;
    border: none
}

.wins table tr:nth-child(even) {
    background-color:rgba(6,31,78,0.5);
    border-top: 1px solid #213d72;
    border-bottom: 1px solid #213d72;
}

.row{
    margin-left: -15px;
    margin-right: -15px;
}
.stories-wrapp{
    width: 48%;
    float: left;
    margin: 1%;
}
.stories-lg{
    width: 98%;
    float: left;
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    cursor: pointer;
    margin:0 1% 0 1%
}
.stories-sm{
    width: 48%; 
    float: left;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0% 1% 0% 1%;
    position: relative;
    cursor: pointer;
}
.stories-sm-btm{
    width: 48%;
    float: left;
    background-color: #fff; 
    border: 1px solid #ccc;
    margin: 2% 1% 0% 1%;
    position: relative;
    cursor: pointer;
}
.stories-des{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color:rgba(8,39,98,0.9);
    color: #fff;
    font-size: 18px;

}





.clr-yellow{color: #fff940}
.clr-blue{color: #1aa1e0}
.clr-yellow-bg{background-color:#fff940}
.clr-blue-bg{background-color: #1aa1e0}


@-webkit-keyframes scale-in-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
    8% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
}

@keyframes scale-in-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
    8% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1;

    }
}

@-webkit-keyframes flip-vertical-left {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    8% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}
@keyframes flip-vertical-left {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    8% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
    100% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
}

@keyframes flipParty {
    0% {

        transform: rotateX(0deg)
    }
    25% {

        transform: rotateX(360deg)
    }
    26%,
    100% {

        transform: rotateX(360deg);

    }
}
@-webkit-keyframes flipParty {
    0% {

        transform: rotateX(0deg)
    }
    25% {

        transform: rotateX(360deg)
    }
    26%,
    100% {

        transform: rotateX(360deg);

    }
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    8% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    8% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
footer{padding: 20px 0 20px 0}
/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 11:30:11
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }
    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }
    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}
@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }
    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }
    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}
.vibrate-1 {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2018-9-28 11:34:11
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}