/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

@keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    8% { transform: translateX(5px) }
    16% { transform: translateX(-5px) }
    24% { transform: translateX(5px) }
    32% { transform: translateX(0) }
}

.horizontal-shake {
    animation-name: horizontal-shaking;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

.hover-border-green:hover{
    border: solid 3px #66ffcc;
}
.hover-border-black:hover{
    border: solid 1px black;
}
.hover-background-green:hover{
    background: #66ffcc !important;
    color: white !important;
}
.hover-background-black:hover{
    background: black;
    opacity: 30%;
}
.hover-color-green:hover{
    color: #66ffcc !important;
    animation: none;
}
.hover-color-white:hover{
    color: white !important;
    animation: none;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}