/*https://codepen.io/nelledejones/pen/gOOPWrK------------------------Codepen all type of animation*/
.scroll-hide
{
    overflow: hidden;
}
.welcome_popup
{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 1000;
    overflow: hidden;
    /*display: none;*/
}
.fade-out-animation
{
    -webkit-animation: fade-out 500ms ease forwards;
    -moz-animation: fade-out 500ms ease forwards;
    -o-animation: fade-out 500ms ease forwards;
    animation: fade-out 500ms ease forwards;
}
@keyframes fade-out {
    100%
    {
        opacity: 0;
    }
}
.welcome_popup .welcome_popup_container
{
    position: absolute;
    min-width: 20%;
    min-height: 10%;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    
    /*-webkit-animation: set-pos 500ms ease 2.5s forwards;
    -moz-animation: set-pos 500ms ease 2.5s forwards;
    -o-animation: set-pos 500ms ease 2.5s forwards;
    animation: set-pos 500ms ease 2.5s forwards;*/
    display: none;
}
/*@keyframes set-pos {
    100%
    {
        top: 12%;
        left: 13%;
    }
}*/
.welcome_popup .bounce-in {
    position: absolute;
    width: 15%;
    top: -10%;
    left: 40%;
    
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);

    -webkit-animation: bounce-in 1.5s ease forwards , slide-left 500ms ease 1.6s forwards;
    -moz-animation: bounce-in 1.5s ease forwards , slide-left 500ms ease 1.6s forwards;
    -o-animation: bounce-in 1.5s ease forwards , slide-left 500ms ease 1.6s forwards;
    animation: bounce-in 1.5s ease forwards , slide-left 500ms ease 1.6s forwards;
}
@-webkit-keyframes bounce-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
    }
    100% { 
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounce-in {
    0% {
        opacity: 0;
        -moz-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }
    70% { -moz-transform: scale(.9); }
    100% { -moz-transform: scale(1); }
}

@-o-keyframes bounce-in {
    0% {
        opacity: 0;
        -o-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -o-transform: scale(1.05);
    }
    70% { -o-transform: scale(.9); }
    100% { -o-transform: scale(1); }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@-webkit-keyframes slide-left
{
    100%{
        left: 22%;
    }
}
@-moz-keyframes slide-left
{
    100%{
        left: 22%;
    }
}
@-o-keyframes slide-left
{
    100%{
        left: 22%;
    }
}
@keyframes slide-left {
  100% {
    left: 22%;
  }
}

.welcome_popup .flash {
    width: 40%;
    margin-left: 13%;
    opacity: 0;

    -webkit-animation: flash 1s ease 2s forwards;
    -moz-animation: flash 1s ease 2s forwards;
    -o-animation: flash 1s ease 2s forwards;
    animation: flash 1s ease 2s forwards;
}
@keyframes flash {
    from { opacity: 0; }    
    to { opacity: 1; }
}


@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.notouch .animated{
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@media screen and (max-width: 481px)
{
    .welcome_popup .bounce-in {
        width: 26%;
        top: -6%;
    }
    @-webkit-keyframes slide-left
    {
        100%{
            left: 0%;
        }
    }
    @-moz-keyframes slide-left
    {
        100%{
            left: 0%;
        }
    }
    @-o-keyframes slide-left
    {
        100%{
            left: 0%;
        }
    }
    @keyframes slide-left {
      100% {
            left: 0%;
        }
    }

    .welcome_popup .flash {
        width: 75%;
        margin-left: 25%;
    }
}