/* popup styles */
.popup {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    height: 100vh;

}
.popup-overlay {
    background: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
}
.popup-content {
    position: absolute;
    background: #fff;
    max-width: 500px;
    width: 100%;
    /*margin: -58px 0 0 -264px;*/
    /*left: 25%;*/
    top: 25%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 11;
    /*    padding: 14px;*/
}
.close-popup {
    /* display: inline-block; */
    position: absolute;
    top: -25px;
    right: 0px;
    font-size: 42px;
    line-height: 34px;
    height: 40px;
    width: 40px;
    background: #fff;
    border-radius: 10% 10% 0 0;
    text-align: center;
}

/* 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;
}


/* POPUP FORM*/
.pop-up-head{ width: 100%; position: relative; display: table; border-bottom: 7px solid #009fd6;}
.pop-up-head h4{ padding: 1.15em 1.575em 0.875em; font-size: 1.125em; color: #009fd6;}
.form-container{ width: 100%; position: relative; padding: 0.975em 1.575em 1.5em; display: table;}
.form-container .frm-titile{font-size: 15px; padding: .8rem 0 0 0;}
.form-container .inp-section{ width: 100%; position:relative; padding:0; display: table;}
.form-container .inp-section .error-msg{ color: red; font-size: 15px;}
.form-container .inp-section .inp-sec-left{ width: 40%; position:    relative; float: left;}
.form-container .inp-section .inp-sec-right{ width: 60%; position:    relative; float: left;}
.form-container .inp-section label{ padding-top:10px; float:left;}
.form-container .inp-section label.radio-label{ padding-left: 25px;}
.form-container .inp-section label input{ margin-right: 5px;}
.form-container .inp-section.subbtn-section{
    margin: 0 auto; 
    display: table;
    /*float: left;*/
    width : auto;
}
.subbtn-section button{
    margin-top: 1rem; 
    margin-bottom: 1rem; 
    float: left;
}
.subbtn-section button:last-child{
    float: left;
    margin-left: 1rem;
}
.subbtn-section button:hover{
    color:#72bf44;
    border: 1px solid #72bf44;
    background: #fff;
}
.btn-submit{ border-radius: 5px; padding: 8px 20px; background:#72bf44; font-size: 1.125em; color: #fff; font-family:'Source Sans Pro'; cursor: pointer; width: auto; display: table; margin: 0 auto; border: 1px solid #72bf44;}

/*Validate css*/
.form-container .inp-section label.error{ padding: 2px 0 5px 4px; font-size:.89em; color:red; }

/* 26-11-2019 */
.form-container .inp-section h3{ font-size: 16px; width: 100%; text-align: center;}
.form-container .inp-section p{ font-size: 15px; width: 100%; text-align: center; }
/* 26-11-2019 */