/*//////////////////////////////////////////*/
/* Popup */
/*//////////////////////////////////////////*/

.popup{
    margin:30px 0;
    max-width:calc(100% - 30px);
    transform: translateX(0) translateY(-150%);
    transition: all 600ms ease-out;
}
.popup .inner{
    padding:30px;
    max-width:100%;
    background: #ffffff;
    position: relative;
    z-index: 5;
}
@media (max-width:599px) {
    .popup .inner{
        padding:15px;
    }
}
.popup.loading .inner:before,
.popup.loading .inner:after{
    content:'';
    position: absolute;
}
.popup.loading .inner:before{
    width:100%;
    height:100%;
    background: #ffffff;
    top:0;
    left:0;
    border-radius: 15px;
    z-index: 9999;
}
.popup.loading .inner:after{
    width:60px;
    height:60px;
    top:calc(50% - 30px);
    left:calc(50% - 30px);
    z-index: 99999;
    border-radius: 30px;
    border: 2px solid #3a57e8;
    border-top: 2px solid transparent;
	animation: loading 600ms linear infinite;
}
.popup .inner .title{
    margin-top:-30px;
    margin-left:-30px;
    margin-right:-30px;
    padding:30px;
    color:#ffffff;
    background: #3a57e8;
    border-radius: 10px 10px 0 0;
}
@media (max-width:599px) {
    .popup .inner .title{
        margin-top:-15px;
        margin-left:-15px;
        margin-right:-15px;
        padding:15px;
    }
}
.popup .inner .title strong{
    display:block;
    font-size: 18px;
    font-weight: 700;
}
.popup .inner .title span{
    display:block;
    padding-top:5px;
}
.popup .inner .close{
    position: absolute;
    top: -10px;
    right: -10px;
    color: #c03221;
    background: #ffffff;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border: 1px solid #717a8f;
    font-size: 16px;
    z-index: 99999;
}
.popup .inner .close:hover{
    transform:rotate(90deg);
}
.popup_background {
    transition: all 300ms linear;
}
.popup_wrapper {
    transition: all 600ms ease-out;
}
.popup_visible .popup {
    transform: translateX(0) translateY(0);
}

/*//////////////////////////////////////////*/
/* New product */
/*//////////////////////////////////////////*/

.popup.new_product .inner{
    width:600px;
}
.popup.new_product .inner .more{
    display: none;
}

/*//////////////////////////////////////////*/
/* New deal */
/*//////////////////////////////////////////*/

.popup.new_deal .inner{
    width:600px;
}
.popup.new_deal .inner .more{
    display: none;
}