.popup {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 35px;
    bottom: 0;
    z-index: 10;
}

.popup-overlay {
    background: rgba(0,0,0,0.9);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.popup-content {
    position: fixed;
    background: #fff;
    width: 500px;
    /* margin: -58px 0 0 -264px;*/
    left: 34%;
    top: 15%;
    z-index: 11;
    padding: 14px;

    @media( max-width: 640px ) {
        position: relative;
        width: 100%;
        left: 0%;
    }
}

.close-popup {
    display: inline-block;
    position: absolute;
    top: -8px;
    right: 5px;
    font-size: 42px;
}

/* Animations */
.fadeIn {
    animation: fadeIn 0.5s ease-in both;
    -webkit-animation: fadeIn 0.5s ease-in both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

.fadeOut {
    animation: fadeOut 0.5s ease-out both;
    -webkit-animation: fadeOut 0.5s ease-out both;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

.scaleIn {
    animation: scaleIn 0.5s ease-in both;
    -webkit-animation: scaleIn 0.5s ease-in both;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
}

@-webkit-keyframes scaleIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
}

.scaleOut {
    animation: scaleOut 0.5s ease-out both;
    -webkit-animation: scaleOut 0.5s ease-out both;
}

@keyframes scaleOut {
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

@-webkit-keyframes scaleOut {
    to {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
}

.scaleUpIn {
    animation: scaleIn 0.5s ease-in both;
    -webkit-animation: scaleIn 0.5s ease-in both;
}

.scaleUpOut {
    animation: scaleUpOut 0.5s ease-in both;
    -webkit-animation: scaleUpOut 0.5s ease-in both;
}

@keyframes scaleUpOut {
    to {
        opacity: 0;
        transform: scale(1.2);
    }
}

@-webkit-keyframes scaleUpOut {
    to {
        opacity: 0;
        -webkit-transform: scale(1.2);
    }
}

.scaleDownIn {
    animation: scaleDownIn 0.5s ease-in both;
    -webkit-animation: scaleDownIn 0.5s ease-in both;
}

.scaleDownOut {
    animation: scaleOut 0.5s ease-in both;
    -webkit-animation: scaleOut 0.5s ease-in both;
}

@keyframes scaleDownIn {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
}

@-webkit-keyframes scaleDownIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
    }
}

.slideIn {
    animation: slideIn 0.5s ease-in both;
    -webkit-animation: slideIn 0.5s ease-in both;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }
}

@-webkit-keyframes slideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }
}

.slideOut {
    animation: slideOut 0.5s ease-out both;
    -webkit-animation: slideOut 0.5s ease-out both;
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateY(50%);
    }
}

@-webkit-keyframes slideOut {
    to {
        opacity: 0;
        -webkit-transform: translateY(50%);
    }
}

.slideLeftIn {
    animation: slideLeftIn 0.5s ease-in both;
    -webkit-animation: slideLeftIn 0.5s ease-in both;
}

@keyframes slideLeftIn {
    from {
        opacity: 0;
        transform: translateX(-50%);
    }
}

@-webkit-keyframes slideLeftIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%);
    }
}

.slideLeftOut {
    animation: slideLeftOut 0.5s ease-out both;
    -webkit-animation: slideLeftOut 0.5s ease-out both;
}

@keyframes slideLeftOut {
    to {
        opacity: 0;
        transform: translateX(50%);
    }
}

@-webkit-keyframes slideLeftOut {
    to {
        opacity: 0;
        -webkit-transform: translateX(50%);
    }
}

.flipLeftIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipLeftIn .5s both ease-out;
    -moz-animation: flipLeftIn .5s both ease-out;
    animation: flipLeftIn .5s both ease-out;
}

@-webkit-keyframes flipLeftIn {
    from {
        -webkit-transform: translateZ(-1000px) rotateY(90deg);
        opacity: .2;
    }
}

@keyframes flipLeftIn {
    from {
        transform: translateZ(-1000px) rotateY(90deg);
        opacity: .2;
    }
}

.flipLeftOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipLeftOut .5s both ease-in;
    -moz-animation: flipLeftOut .5s both ease-in;
    animation: flipLeftOut .5s both ease-in;
}

@-webkit-keyframes flipLeftOut {
    to {
        -webkit-transform: translateZ(1000px) rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes flipLeftOut {
    to {
        transform: translateZ(1000px) rotateY(-90deg);
        opacity: 0;
    }
}

.flipRightIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipRightIn .5s both ease-out;
    -moz-animation: flipRightIn .5s both ease-out;
    animation: flipRightIn .5s both ease-out;
}

@-webkit-keyframes flipRightIn {
    from {
        -webkit-transform: translateZ(-1000px) rotateY(-90deg);
        opacity: .2;
    }
}

@keyframes flipRightIn {
    from {
        transform: translateZ(-1000px) rotateY(-90deg);
        opacity: .2;
    }
}

.flipRightOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipRightOut .5s both ease-in;
    -moz-animation: flipRightOut .5s both ease-in;
    animation: flipRightOut .5s both ease-in;
}

@-webkit-keyframes flipRightOut {
    to {
        -webkit-transform: translateZ(1000px) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes flipRightOut {
    to {
        transform: translateZ(1000px) rotateY(90deg);
        opacity: 0;
    }
}


.rotateIn {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateIn .5s both ease-out;
    -moz-animation: rotateIn .5s both ease-out;
    animation: rotateIn .5s both ease-out;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: translateZ(-3000px) rotateZ(-360deg);
        opacity: 0;
    }
}

@-moz-keyframes rotateIn {
    from {
        -moz-transform: translateZ(-3000px) rotateZ(-360deg);
        opacity: 0;
    }
}

@keyframes rotateIn {
    from {
        transform: translateZ(-3000px) rotateZ(-360deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateOut .5s both ease-in;
    -moz-animation: rotateOut .5s both ease-in;
    animation: rotateOut .5s both ease-in;
}

@-webkit-keyframes rotateOut {
    to {
        -webkit-transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

@-moz-keyframes rotateOut {
    to {
        -moz-transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    to {
        transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}

.rotateCubeIn {
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: rotateCubeIn .6s both ease-in;
    -moz-transform-origin: 50% 100%;
    -moz-animation: rotateCubeIn .6s both ease-in;
    transform-origin: 50% 100%;
    animation: rotateCubeIn .6s both ease-in;
}

@-webkit-keyframes rotateCubeIn {
    0% {
        opacity: .3;
        -webkit-transform: translateY(-100%) rotateX(90deg);
    }

    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
}

@-moz-keyframes rotateCubeIn {
    0% {
        opacity: .3;
        -moz-transform: translateY(-100%) rotateX(90deg);
    }

    50% {
        -moz-animation-timing-function: ease-out;
        -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
}

@keyframes rotateCubeIn {
    0% {
        opacity: .3;
        transform: translateY(-100%) rotateX(90deg);
    }

    50% {
        animation-timing-function: ease-out;
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
}

.rotateCubeOut {
    -webkit-transform-origin: 50% 0;
    -webkit-animation: rotateCubeOut .6s both ease-in;
    -moz-transform-origin: 50% 0;
    -moz-animation: rotateCubeOut .6s both ease-in;
    transform-origin: 50% 0;
    animation: rotateCubeOut .6s both ease-in;
}

@-webkit-keyframes rotateCubeOut {
    50% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }

    100% {
        opacity: .3;
        -webkit-transform: translateY(100%) rotateX(-90deg);
    }
}

@-moz-keyframes rotateCubeOut {
    50% {
        -moz-animation-timing-function: ease-out;
        -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }

    100% {
        opacity: .3;
        -moz-transform: translateY(100%) rotateX(-90deg);
    }
}

@keyframes rotateCubeOut {
    50% {
        animation-timing-function: ease-out;
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }

    100% {
        opacity: .3;
        transform: translateY(100%) rotateX(-90deg);
    }
}

/* Demo Styles */
/*body {
    font-family: verdana;
    font-size: 12px;
    text-align: center;
}

a {
    color: rgb(0, 159, 211);
    text-decoration: none;
}

.btn {
    background: rgb(0, 159, 211);
    color: #fff;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
}*/

.btn:hover {
    background: #fff;
    color: rgb(0, 159, 211);
}

.popup {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

.popup-content {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/*

@media screen and (max-width: 500px) {

    .popup-content {
       
        width: 330px!important;
     
        left: 2%!important;
       
    }
}
*/