/*
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 : Oct 8, 2020, 12:06:36 PM
    Author     : sions
*/
:root {
    --main-font: 'Roboto', sans-serif;
    --color-green: #2EB4A5;
    --color-orange: #F26729;
    --color-dark-black: black;
    --color-black: #333;
    --color-dark-gray: #A1A1A1;
    --color-light-gray: #CBCBCB;
    --color-dark-white: #EEE;
    --color-white: white;
    --color-blue: #1D2A38;
}

@keyframes showing {
 0%{
  display:block;
  opacity:0;
 }
 100% {
  opacity:1;
 }
}
@-webkit-keyframes bounce-center { 
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(-50%) translateY(0);} 
            40% {-webkit-transform: translateX(-50%) translateY(-30px);} 
            60% {-webkit-transform: translateX(-50%) translateY(-15px);} 
}
@keyframes expand{
   0%{height:0px}
   100%{height:100%} 
}
@-webkit-keyframes expand{
    0%{height:0px}
    100%{height:100%}
}
@keyframes xexpand{
   0%{width:0px}
   100%{width:100%} 
}
@-webkit-keyframes xexpand{
    0%{width:0px}
    100%{width:100%}
}
@keyframes xexpand-custom{
   0%{width:0px}
   100%{width:calc( 100% - 42px )} 
}
@-webkit-keyframes xexpand-custom{
    0%{width:0px}
    100%{width:calc( 100% - 42px )}
}
@keyframes yexpand{
   0%{ height:0px; opacity:0; }
   100%{ height:100%; opacity:1; } 
}
@-webkit-keyframes yexpand{
    0%{ height:0px; opacity:0; }
    100%{ height:100%; opacity:0; }
}
@keyframes fading{
   0%{opacity:0}
   100%{opacity:1} 
}
@-webkit-keyframes fading{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes bounce-center { 
            0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);} 
            40% {transform: translateX(-50%) translateY(-30px);} 
            60% {transform: translateX(-50%) translateY(-15px);} 
}

@-webkit-keyframes bounce-left { 
            0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 
            40% {transform: translateX(30px);} 
            60% {transform: translateX(15px);} 
}
@keyframes bounce-left { 
            0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 
            40% {transform: translateX(30px);} 
            60% {transform: translateX(15px);} 
}

@-webkit-keyframes skew-center { 
            0% {transform: translateX(-50%) skew(0deg);} 
            100% {transform: translateX(-50%) skew(-45deg);}  
}
@keyframes skew-center { 
            0% {transform: translateX(-50%) skew(0deg);} 
            100% {transform: translateX(-50%) skew(-45deg);} 
}

@-webkit-keyframes rotate { 
            0% {transform: rotate(0deg);} 
            100% {transform: rotate(360deg);} 
}
@keyframes rotate { 
            0% {transform: rotate(0deg);} 
            100% {transform: rotate(360deg);} 
} 

@-webkit-keyframes rotate-vertical { 
            0% {transform: translateY(-50%) rotate(0deg);} 
            100% {transform: translateY(-50%) rotate(360deg);} 
}
@keyframes rotate-vertical { 
            0% {transform: translateY(-50%) rotate(0deg);} 
            100% {transform: translateY(-50%) rotate(360deg);} 
} 
@-webkit-keyframes zooming { 
            0% {transform: scale(0.75);} 
            50% {transform: scale(1);} 
            75% {transform: scale(1.25);}
            100% {transform: scale(1);} 
}
@keyframes zooming { 
            0% {transform: scale(0.75);} 
            50% {transform: scale(1);} 
            75% {transform: scale(1.25);}
            100% {transform: scale(1);}   
} 

@-webkit-keyframes zooming-in-out-center { 
            0% {transform: translate(-50%,-50%) scale(1.5);} 
            25% {transform: translate(-50%,-50%) scale(1.25);} 
            50% {transform: translate(-50%,-50%) scale(1);} 
            75% {transform: translate(-50%,-50%) scale(1.25);}
            100% {transform: translate(-50%,-50%) scale(1.5);} 
}
@keyframes zooming-in-out-center { 
            0% {transform: translate(-50%,-50%) scale(1.5);} 
            25% {transform: translate(-50%,-50%) scale(1.25);} 
            50% {transform: translate(-50%,-50%) scale(1);} 
            75% {transform: translate(-50%,-50%) scale(1.25);}
            100% {transform: translate(-50%,-50%) scale(1.5);}   
} 

@-webkit-keyframes zooming-out-in-center { 
            0% {transform: translate(-50%,-50%) scale(1);} 
            25% {transform: translate(-50%,-50%) scale(1.25);} 
            50% {transform: translate(-50%,-50%) scale(1.5);} 
            75% {transform: translate(-50%,-50%) scale(1.25);}
            100% {transform: translate(-50%,-50%) scale(1);} 
}
@keyframes zooming-out-in-center { 
             0% {transform: translate(-50%,-50%) scale(1);} 
            25% {transform: translate(-50%,-50%) scale(1.25);} 
            50% {transform: translate(-50%,-50%) scale(1.5);} 
            75% {transform: translate(-50%,-50%) scale(1.25);}
            100% {transform: translate(-50%,-50%) scale(1);}    
} 

@keyframes shake {
  30%, 70% {
    transform: translate3d(-1px, 0, 0);
  }
  
  40%, 60% {
    transform: translate3d(2px, 0, 0);
  }

  45%, 50%, 55% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}