/* ===================================================== PRELOADER ===================================================== */

/* CIRCLE */

@-webkit-keyframes preloader-circle
{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes preloader-circle
{
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes preloader-circle
{
    from {
        -ms-transform: rotate(0deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    to {
        -ms-transform: rotate(360deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
}

@-o-keyframes preloader-circle
{
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes preloader-circle
{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.preloader-circle[role="small"]
{
    -webkit-animation: preloader-circle 1.5s infinite linear;
    -moz-animation: preloader-circle 1.5s infinite linear;
    -ms-animation: preloader-circle 1.5s infinite linear;
    -o-animation: preloader-circle 1.5s infinite linear;
    animation: preloader-circle 1.5s infinite linear;
}

.preloader-circle[role="big"]
{
    -webkit-animation: preloader-circle 2.5s infinite linear;
    -moz-animation: preloader-circle 2.5s infinite linear;
    -ms-animation: preloader-circle 2.5s infinite linear;
    -o-animation: preloader-circle 2.5s infinite linear;
    animation: preloader-circle 2.5s infinite linear;
}

/* TEXT */

@-webkit-keyframes preloader-text
{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes preloader-text
{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes preloader-text
{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes preloader-text
{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes preloader-text
{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.preloader-text
{
    -webkit-animation: preloader-text 1.7s infinite linear;
    -moz-animation: preloader-text 1.7s infinite linear;
    -ms-animation: preloader-text 1.7s infinite linear;
    -o-animation: preloader-text 1.7s infinite linear;
    animation: preloader-text 1.7s infinite linear;
}

/* ====================================================== NAV-BAR ====================================================== */

/* SIDE ONE - OPEN/CLOSE */

@-webkit-keyframes side-one-open
{
    0% {
        -webkit-transform: rotateX(90deg);
    }
    50% {
        -webkit-transform: rotateX(90deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}

@-moz-keyframes side-one-open
{
    0% {
        -moz-transform: rotateX(90deg);
    }
    50% {
        -moz-transform: rotateX(90deg);
    }
    100% {
        -moz-transform: rotateX(0deg);
    }
}

@-ms-keyframes side-one-open
{
    0% {
        -ms-transform: rotateX(90deg);
    }
    50% {
        -ms-transform: rotateX(90deg);
    }
    100% {
        -ms-transform: rotateX(0deg);
    }
}

@-o-keyframes side-one-open
{
    0% {
        -o-transform: rotateX(90deg);
    }
    50% {
        -o-transform: rotateX(90deg);
    }
    100% {
        -o-transform: rotateX(0deg);
    }
}

@keyframes side-one-open
{
    0% {
        transform: rotateX(90deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

@-webkit-keyframes side-one-close
{
    0% {
        -webkit-transform: rotateX(0deg);
    }
    50% {
        -webkit-transform: rotateX(90deg);
    }
    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-moz-keyframes side-one-close
{
    0% {
        -moz-transform: rotateX(0deg);
    }
    50% {
        -moz-transform: rotateX(90deg);
    }
    100% {
        -moz-transform: rotateX(90deg);
    }
}

@-ms-keyframes side-one-close
{
    0% {
        -ms-transform: rotateX(0deg);
    }
    50% {
        -ms-transform: rotateX(90deg);
    }
    100% {
        -ms-transform: rotateX(90deg);
    }
}

@-o-keyframes side-one-close
{
    0% {
        -o-transform: rotateX(0deg);
    }
    50% {
        -o-transform: rotateX(90deg);
    }
    100% {
        -o-transform: rotateX(90deg);
    }
}

@keyframes side-one-close
{
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

.side-one[anim="open"]
{
    -webkit-animation: side-one-open 0.3s ease-in forwards;
    -moz-animation: side-one-open 0.3s ease-in forwards;
    -ms-animation: side-one-open 0.3s ease-in forwards;
    -o-animation: side-one-open 0.3s ease-in forwards;
    animation: side-one-open 0.3s ease-in forwards;
}

.side-one[anim="close"]
{
    -webkit-animation: side-one-close 0.3s ease-in forwards;
    -moz-animation: side-one-close 0.3s ease-in forwards;
    -ms-animation: side-one-close 0.3s ease-in forwards;
    -o-animation: side-one-close 0.3s ease-in forwards;
    animation: side-one-close 0.3s ease-in forwards;
}

/* SIDE ONE - BLINK */

@-webkit-keyframes side-one-fx
{
    0% {
        
    }
    50% {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0px -2px 7px rgba(0,0,0,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
        box-shadow: inset 0px 0px 0px rgba(0,0,0,0);
    }
}

@-moz-keyframes side-one-fx
{
    0% {
        
    }
    50% {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0px -2px 7px rgba(0,0,0,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
        box-shadow: inset 0px 0px 0px rgba(0,0,0,0);
    }
}

@-ms-keyframes side-one-fx
{
    0% {
        
    }
    50% {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0px -2px 7px rgba(0,0,0,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
        box-shadow: inset 0px 0px 0px rgba(0,0,0,0);
    }
}

@-o-keyframes side-one-fx
{
    0% {
        
    }
    50% {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0px -2px 7px rgba(0,0,0,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
        box-shadow: inset 0px 0px 0px rgba(0,0,0,0);
    }
}

@keyframes side-one-fx
{
    0% {
        
    }
    50% {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0px -2px 7px rgba(0,0,0,0.3);
    }
    100% {
        background-color: rgba(255,255,255,0);
        box-shadow: inset 0px 0px 0px rgba(0,0,0,0);
    }
}

.side-one[anim="open"] .side-ctn
{
    -webkit-animation: side-one-fx 0.3s ease-in forwards;
    -moz-animation: side-one-fx 0.3s ease-in forwards;
    -ms-animation: side-one-fx 0.3s ease-in forwards;
    -o-animation: side-one-fx 0.3s ease-in forwards;
    animation: side-one-fx 0.3s ease-in forwards;
}

/* SIDE TWO */

@-webkit-keyframes side-two-open
{
    0% {
        -webkit-transform: rotateX(180deg);
    }
    50% {
        -webkit-transform: rotateX(90deg);
    }
    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-moz-keyframes side-two-open
{
    0% {
        -moz-transform: rotateX(180deg);
    }
    50% {
        -moz-transform: rotateX(90deg);
    }
    100% {
        -moz-transform: rotateX(90deg);
    }
}

@-ms-keyframes side-two-open
{
    0% {
        -ms-transform: rotateX(180deg);
    }
    50% {
        -ms-transform: rotateX(90deg);
    }
    100% {
        -ms-transform: rotateX(90deg);
    }
}

@-o-keyframes side-two-open
{
    0% {
        -o-transform: rotateX(180deg);
    }
    50% {
        -o-transform: rotateX(90deg);
    }
    100% {
        -o-transform: rotateX(90deg);
    }
}

@keyframes side-two-open
{
    0% {
        transform: rotateX(180deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}

@-webkit-keyframes side-two-close
{
    0% {
        -webkit-transform: rotateX(90deg);
    }
    50% {
        -webkit-transform: rotateX(90deg);
    }
    100% {
        -webkit-transform: rotateX(180deg);
    }
}

@-moz-keyframes side-two-close
{
    0% {
        -moz-transform: rotateX(90deg);
    }
    50% {
        -moz-transform: rotateX(90deg);
    }
    100% {
        -moz-transform: rotateX(180deg);
    }
}

@-ms-keyframes side-two-close
{
    0% {
        -ms-transform: rotateX(90deg);
    }
    50% {
        -ms-transform: rotateX(90deg);
    }
    100% {
        -ms-transform: rotateX(180deg);
    }
}

@-o-keyframes side-two-close
{
    0% {
        -o-transform: rotateX(90deg);
    }
    50% {
        -o-transform: rotateX(90deg);
    }
    100% {
        -o-transform: rotateX(180deg);
    }
}

@keyframes side-two-close
{
    0% {
        transform: rotateX(90deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(180deg);
    }
}

.side-two[anim="open-home"], .side-two[anim="open-skills"], .side-two[anim="open-works"], .side-two[anim="open-hire"]
{
    -webkit-animation: side-two-open 0.3s ease-out forwards;
    -moz-animation: side-two-open 0.3s ease-out forwards;
    -ms-animation: side-two-open 0.3s ease-out forwards;
    -o-animation: side-two-open 0.3s ease-out forwards;
    animation: side-two-open 0.3s ease-out forwards;
}

.side-two[anim="close-home"], .side-two[anim="close-skills"], .side-two[anim="close-works"], .side-two[anim="close-hire"]
{
    -webkit-animation: side-two-close 0.3s ease-in forwards;
    -moz-animation: side-two-close 0.3s ease-in forwards;
    -ms-animation: side-two-close 0.3s ease-in forwards;
    -o-animation: side-two-close 0.3s ease-in forwards;
    animation: side-two-close 0.3s ease-in forwards;
}

/* SIDE TWO - SHADE */

/*home - open*/
@-webkit-keyframes side-two-fx-home
{
    0% {
        background-color: #e9372f;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #c93029;
    }
}

@-moz-keyframes side-two-fx-home
{
    0% {
        background-color: #e9372f;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #c93029;
    }
}

@-ms-keyframes side-two-fx-home
{
    0% {
        background-color: #e9372f;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #c93029;
    }
}

@-o-keyframes side-two-fx-home
{
    0% {
        background-color: #e9372f;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #c93029;
    }
}

@keyframes side-two-fx-home
{
    0% {
        background-color: #e9372f;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #c93029;
    }
}

/*skills - open*/
@-webkit-keyframes side-two-fx-skills
{
    0% {
        background-color: #e26826;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #d35c1c;
    }
}

@-moz-keyframes side-two-fx-skills
{
    0% {
        background-color: #e26826;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #d35c1c;
    }
}

@-ms-keyframes side-two-fx-skills
{
    0% {
        background-color: #e26826;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #d35c1c;
    }
}

@-o-keyframes side-two-fx-skills
{
    0% {
        background-color: #e26826;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #d35c1c;
    }
}

@keyframes side-two-fx-skills
{
    0% {
        background-color: #e26826;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #d35c1c;
    }
}

/*works - open*/
@-webkit-keyframes side-two-fx-works
{
    0% {
        background-color: #663c83;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #58376f;
    }
}

@-moz-keyframes side-two-fx-works
{
    0% {
        background-color: #663c83;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #58376f;
    }
}

@-ms-keyframes side-two-fx-works
{
    0% {
        background-color: #663c83;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #58376f;
    }
}

@-o-keyframes side-two-fx-works
{
    0% {
        background-color: #663c83;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #58376f;
    }
}

@keyframes side-two-fx-works
{
    0% {
        background-color: #663c83;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #58376f;
    }
}

/*hire - open*/
@-webkit-keyframes side-two-fx-hire
{
    0% {
        background-color: #272330;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #231f2c;
    }
}

@-moz-keyframes side-two-fx-hire
{
    0% {
        background-color: #272330;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #231f2c;
    }
}

@-ms-keyframes side-two-fx-hire
{
    0% {
        background-color: #272330;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #231f2c;
    }
}

@-o-keyframes side-two-fx-hire
{
    0% {
        background-color: #272330;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #231f2c;
    }
}

@keyframes side-two-fx-hire
{
    0% {
        background-color: #272330;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #231f2c;
    }
}

/*home - close*/
@-webkit-keyframes side-two-fx-home-close
{
    0% {
        background-color: #c93029;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #e9372f;
    }
}

@-moz-keyframes side-two-fx-home-close
{
    0% {
        background-color: #c93029;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #e9372f;
    }
}

@-ms-keyframes side-two-fx-home-close
{
    0% {
        background-color: #c93029;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #e9372f;
    }
}

@-o-keyframes side-two-fx-home-close
{
    0% {
        background-color: #c93029;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #e9372f;
    }
}

@keyframes side-two-fx-home-close
{
    0% {
        background-color: #c93029;
    }
    50% {
        background-color: #c93029;
    }
    100% {
        background-color: #e9372f;
    }
}

/*skills - close*/
@-webkit-keyframes side-two-fx-skills-close
{
    0% {
        background-color: #d35c1c;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #e26826;
    }
}

@-moz-keyframes side-two-fx-skills-close
{
    0% {
        background-color: #d35c1c;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #e26826;
    }
}

@-ms-keyframes side-two-fx-skills-close
{
    0% {
        background-color: #d35c1c;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #e26826;
    }
}

@-o-keyframes side-two-fx-skills-close
{
    0% {
        background-color: #d35c1c;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #e26826;
    }
}

@keyframes side-two-fx-skills-close
{
    0% {
        background-color: #d35c1c;
    }
    50% {
        background-color: #d35c1c;
    }
    100% {
        background-color: #e26826;
    }
}

/*works - close*/
@-webkit-keyframes side-two-fx-works-close
{
    0% {
        background-color: #58376f;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #663c83;
    }
}

@-moz-keyframes side-two-fx-works-close
{
    0% {
        background-color: #58376f;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #663c83;
    }
}

@-ms-keyframes side-two-fx-works-close
{
    0% {
        background-color: #58376f;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #663c83;
    }
}

@-o-keyframes side-two-fx-works-close
{
    0% {
        background-color: #58376f;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #663c83;
    }
}

@keyframes side-two-fx-works-close
{
    0% {
        background-color: #58376f;
    }
    50% {
        background-color: #58376f;
    }
    100% {
        background-color: #663c83;
    }
}}

/*hire - close*/
@-webkit-keyframes side-two-fx-hire-close
{
    0% {
        background-color: #231f2c;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #272330;
    }
}

@-moz-keyframes side-two-fx-hire-close
{
    0% {
        background-color: #231f2c;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #272330;
    }
}

@-ms-keyframes side-two-fx-hire-close
{
    0% {
        background-color: #231f2c;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #272330;
    }
}

@-o-keyframes side-two-fx-hire-close
{
    0% {
        background-color: #231f2c;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #272330;
    }
}

@keyframes side-two-fx-hire-close
{
    0% {
        background-color: #231f2c;
    }
    50% {
        background-color: #231f2c;
    }
    100% {
        background-color: #272330;
    }
}

.side-two[anim="open-home"] .side-ctn
{
    -webkit-animation: side-two-fx-home 0.3s ease-in forwards;
    -moz-animation: side-two-fx-home 0.3s ease-in forwards;
    -ms-animation: side-two-fx-home 0.3s ease-in forwards;
    -o-animation: side-two-fx-home 0.3s ease-in forwards;
    animation: side-two-fx-home 0.3s ease-in forwards;
}

.side-two[anim="open-skills"] .side-ctn
{
    -webkit-animation: side-two-fx-skills 0.3s ease-in forwards;
    -moz-animation: side-two-fx-skills 0.3s ease-in forwards;
    -ms-animation: side-two-fx-skills 0.3s ease-in forwards;
    -o-animation: side-two-fx-skills 0.3s ease-in forwards;
    animation: side-two-fx-skills 0.3s ease-in forwards;
}

.side-two[anim="open-works"] .side-ctn
{
    -webkit-animation: side-two-fx-works 0.3s ease-in forwards;
    -moz-animation: side-two-fx-works 0.3s ease-in forwards;
    -ms-animation: side-two-fx-works 0.3s ease-in forwards;
    -o-animation: side-two-fx-works 0.3s ease-in forwards;
    animation: side-two-fx-works 0.3s ease-in forwards;
}

.side-two[anim="open-hire"] .side-ctn
{
    -webkit-animation: side-two-fx-hire 0.3s ease-in forwards;
    -moz-animation: side-two-fx-hire 0.3s ease-in forwards;
    -ms-animation: side-two-fx-hire 0.3s ease-in forwards;
    -o-animation: side-two-fx-hire 0.3s ease-in forwards;
    animation: side-two-fx-hire 0.3s ease-in forwards;
}

.side-two[anim="close-home"] .side-ctn
{
    -webkit-animation: side-two-fx-home-close 0.3s ease-in forwards;
    -moz-animation: side-two-fx-home-close 0.3s ease-in forwards;
    -ms-animation: side-two-fx-home-close 0.3s ease-in forwards;
    -o-animation: side-two-fx-home-close 0.3s ease-in forwards;
    animation: side-two-fx-home-close 0.3s ease-in forwards;
}

.side-two[anim="close-skills"] .side-ctn
{
    -webkit-animation: side-two-fx-skills-close 0.3s ease-in forwards;
    -moz-animation: side-two-fx-skills-close 0.3s ease-in forwards;
    -ms-animation: side-two-fx-skills-close 0.3s ease-in forwards;
    -o-animation: side-two-fx-skills-close 0.3s ease-in forwards;
    animation: side-two-fx-skills-close 0.3s ease-in forwards;
}

.side-two[anim="close-works"] .side-ctn
{
    -webkit-animation: side-two-fx-works-close 0.3s ease-in forwards;
    -moz-animation: side-two-fx-works-close 0.3s ease-in forwards;
    -ms-animation: side-two-fx-works-close 0.3s ease-in forwards;
    -o-animation: side-two-fx-works-close 0.3s ease-in forwards;
    animation: side-two-fx-works-close 0.3s ease-in forwards;
}

.side-two[anim="close-hire"] .side-ctn
{
    -webkit-animation: side-two-fx-hire-close 0.3s ease-in forwards;
    -moz-animation: side-two-fx-hire-close 0.3s ease-in forwards;
    -ms-animation: side-two-fx-hire-close 0.3s ease-in forwards;
    -o-animation: side-two-fx-hire-close 0.3s ease-in forwards;
    animation: side-two-fx-hire-close 0.3s ease-in forwards;
}

/* ====================================================== BADGE POPUP ====================================================== */

/*badge popup*/
/*badge popup*/
/*badge popup*/
/*badge popup*/
/*badge popup*/
/*badge popup*/
/*badge popup*/
@-webkit-keyframes gadge-popup
{
    0% {
        width: 0px;
        height: 2px;
        
        background-color: #9360b5;
    }
    50% {
        width: 100%;
        height: 2px;
        
        background-color: #9360b5;
        
        box-shadow: none;
    }
    100% {
        width: 100%;
        height: 400px;
        
        background-color: #663c83;
        
        box-shadow: 0px 0px 23px rgba(0,0,0,0.3);
    }
}

@-moz-keyframes gadge-popup
{
    0% {
        width: 0px;
        height: 2px;
        
        background-color: #9360b5;
    }
    50% {
        width: 100%;
        height: 2px;
        
        background-color: #9360b5;
        
        box-shadow: none;
    }
    100% {
        width: 100%;
        height: 400px;
        
        background-color: #663c83;
        
        box-shadow: 0px 0px 23px rgba(0,0,0,0.3);
    }
}

@-ms-keyframes gadge-popup
{
    0% {
        width: 0px;
        height: 2px;
        
        background-color: #9360b5;
    }
    50% {
        width: 100%;
        height: 2px;
        
        background-color: #9360b5;
        
        box-shadow: none;
    }
    100% {
        width: 100%;
        height: 400px;
        
        background-color: #663c83;
        
        box-shadow: 0px 0px 23px rgba(0,0,0,0.3);
    }
}

@-o-keyframes gadge-popup
{
    0% {
        width: 0px;
        height: 2px;
        
        background-color: #9360b5;
    }
    50% {
        width: 100%;
        height: 2px;
        
        background-color: #9360b5;
        
        box-shadow: none;
    }
    100% {
        width: 100%;
        height: 400px;
        
        background-color: #663c83;
        
        box-shadow: 0px 0px 23px rgba(0,0,0,0.3);
    }
}

@keyframes gadge-popup
{
    0% {
        width: 0px;
        height: 2px;
        
        background-color: #9360b5;
    }
    50% {
        width: 100%;
        height: 2px;
        
        background-color: #9360b5;
        
        box-shadow: none;
    }
    100% {
        width: 100%;
        height: 400px;
        
        background-color: #663c83;
        
        box-shadow: 0px 0px 23px rgba(0,0,0,0.3);
    }
}

#badge-popup.open
{
    -webkit-animation: gadge-popup 1s ease-in forwards;
    -moz-animation: gadge-popup 1s ease-in forwards;
    -ms-animation: gadge-popup 1s ease-in forwards;
    -o-animation: gadge-popup 1s ease-in forwards;
    animation: gadge-popup 1s ease-in forwards;
}