main.css

.bg-rainbow { 
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 10s ease infinite;
-z-animation: rainbow 10s ease infinite;
-o-animation: rainbow 10s ease infinite;
  animation: rainbow 10s ease infinite;
}

.bg-rainbow-lite { 
background: linear-gradient(124deg,#ff2400,#e81d1d,#2b1de8,#dd00f3,#dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 10s ease infinite;
-z-animation: rainbow 10s ease infinite;
-o-animation: rainbow 10s ease infinite;
  animation: rainbow 10s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

@-webkit-keyframes verticaly {
    0%{background-position: 82% 0%}
    50%{background-position: 19% 100%}
    100%{background-position: 82% 0%}
}
@-moz-keyframes verticaly {
    0%{background-position: 82% 0%}
    50%{background-position: 19% 100%}
    100%{background-position: 82% 0%}
}
@-o-keyframes verticaly {
    0%{background-position: 82% 0%}
    50%{background-position: 19% 100%}
    100%{background-position: 82% 0%}
}
@keyframes verticaly { 
    0%{background-position: 82% 0%}
    50%{background-position: 19% 100%}
    100%{background-position: 82% 0%}
}

/* bg overlayer */

.bg-overlay-image {
    background-image: url(https://cdn.pixabay.com/photo/2017/05/16/11/45/blue-waves-2317606_1280.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 -20px;

    -webkit-animation: rainbow 10s ease infinite;
    -z-animation: rainbow 10s ease infinite;
    -o-animation: rainbow 10s ease infinite;
      animation: rainbow 10s ease infinite;
}

.bg-overlay-image-1 {
    background-image: url(http://epposi.org/wp-content/uploads/2015/05/background_swirl1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 -20px;

    -webkit-animation: verticaly 10s ease infinite;
    -z-animation: verticaly 10s ease infinite;
    -o-animation: verticaly 10s ease infinite;
      animation: verticaly 10s ease infinite;
}

.animate-verticaly
{
  -webkit-animation: verticaly 10s ease infinite;
  -z-animation: verticaly 10s ease infinite;
  -o-animation: verticaly 10s ease infinite;
    animation: verticaly 10s ease infinite;
}

.animate-horizontaly
{
  -webkit-animation: rainbow 10s ease infinite;
  -z-animation: rainbow 10s ease infinite;
  -o-animation: rainbow 10s ease infinite;
    animation: rainbow 10s ease infinite;
}

.flexdatalist-multiple li.input-container, .flexdatalist-multiple li.input-container input {
  border: none !important;
  width: 50% !important;
  height: auto !important;
  padding: 0 0 0 4px !important;
  line-height: 24px !important;
}

/* vue */

[v-cloak] > * { display:none; } 
[v-cloak]::before {  
  content: " "; 
  display: block; 
} 

.ghost {
  opacity: 0.5;
}

/* fix mobile columns and card */

@media (max-width: 576px){
    .columns {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .columns .column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

html {
  height: 100%;
}
body {
  min-height: 100%;
}

.fade-enter-active {
  transition: opacity .5s;
}
.fade-leave-active {
  transition: opacity .1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.slider {
    width: auto;
}

.slick-slide {
    background: $c1;
    color: white;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

.slick-dots li button:before {
    font-size: 38px;
}

/* Component custom overide */

.component-container {
    background-color: rgb(255, 255, 255);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.component-container .hero {
    width: 100%;
}

.submenu {
    height: auto;
    min-height: 0.4em;
    padding-bottom: 10px;
}

.modal-card-head, .modal-card-foot {
    background-color: white;
    border-radius: 0;
}

.modal-card-title {
    font-size: 1.1rem;
}

/* ripple */

.ripple {
    border-radius:50%;
    
    -webkit-transition:height .25s ease, width .25s ease;
    transition:height .25s ease, width .25s ease;
    
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
  }
  
  .ripple:before,
  .ripple:after {
    content:'';
    display:block;
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    border-radius:50%;
    border:1px solid;
  }
  
  .ripple:before {
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite;
  }
  .ripple:after {
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite;
  }
  
  .ripple:hover:before,
  .ripple:hover:after {
    -webkit-animation: none;
    animation: none;
  }
  
  @-webkit-keyframes ripple{
    0% {-webkit-transform:scale(1); }
    75% {-webkit-transform:scale(1.75); opacity:1;}
    100% {-webkit-transform:scale(2); opacity:0;}
  }
  
  @keyframes ripple{
    0% {transform:scale(1); }
    75% {transform:scale(1.75); opacity:1;}
    100% {transform:scale(2); opacity:0;}
  }