/*
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: 'Sora', sans-serif;
    --color-header-bg: var(--color-dark-black);
    --color-header-color: var(--color-white);
    --color-header-border: var(--color-white-transparent);
    --color-button: var(--color-blue);

    
    --color-white: #fff;
    
    

    --color-green: #1689C1; /* #19C874 */
    --color-red: #FB5B5D;
    --color-dark-black: #313131;
    --color-dark-black-half-opacity: #7b7b7b;
    --color-black: black;
    --color-black-c1a: #151515;
    --color-black-c1a-link: #A9A9A9;
    --color-black-transparent: rgba(0, 0, 0, 0.3);
    --color-black-transparent-light: rgba(0, 0, 0, 0.1);
    --color-light-black: #555;
    --color-other-black: #19171A;
    --color-gray: #8E8E8E;
    --color-dark-gray: #D2D2D2;
    --color-dark-gray2: #b2b2b2;
    --color-dark-gray3: #BEBEBE;
    --color-light-gray: #C2C2C2;
    --color-light-gray-ce: #CECECE;
    --color-dark-white: #e5e5e5;
    --color-light-white: #f1f1f1;
    --color-success: #2AD0BF;
    --color-success-shade: #2b5e7e2;
    
    --color-white-transparent: rgba(255, 255, 255, 0.3);
    --color-white-transparent-light: rgba(255, 255, 255, 0.1);
    --color-blue: #0071E3;
    --color-orange: #F9B343;
    --color-danger-transparent: rgba(255, 0, 0, 0.7);
    
    --color-danger: #FF5959;
}

@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);
  }
}