/*_______________________________Login________________________________*/
.container_login{ display: flex; z-index: 3 }
.login__right{ padding-left: 10px }
.login__right a{ display: block; font-weight: 700; line-height: 18px }
.login__left { width: 80px; display: flex; align-items: center; justify-content: space-around }
.login__left i{ font-size: 30px; line-height: 1em; text-align: center; }
.login__left label{ cursor: pointer }
/*_______________________CONTAINER CONFIGURATIONS_____________________*/
.page-body-wrapper {
    min-height: 1100px;
    /* -webkit-flex-direction: row;
    flex-direction: row;
    padding-left: 0; padding-right: 0;  */
    padding-top: 80px;
}
@media (min-width: 992px) {
    .main-panel .containerr { margin-left: 70px }
}
.containerr {
    position: absolute; margin-top: 0px; 
    width: 100%; min-height: 100vh; background-color: #fff; overflow: hidden;
}
.containerr:before {
    content: ''; position: absolute;
    width: 2000px; height: 2000px;
    border-radius: 50%; background: linear-gradient(-45deg, #4481eb, #04befe);
    top: -10%; right: 48%; z-index: 6;
    transform: translateY(-50%);
    transition: 1.8s ease-in-out;
}
/*_______________________CONTAINER END________________________*/
.forms-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0 }
.sign-up-form, .sign-in-form { display: flex; align-items: center; justify-content: center;
    flex-direction: column; padding: 0 0rem; overflow: hidden; grid-column: 1 / 2; grid-row: 1 / 2;
    transition: 0.2s 0.7s ease-in-out;
}
form.sign-up-form { z-index: 2; opacity: 1 }
form.sign-in-form { z-index: 1; opacity: 0 }

.titler{ font-size: 2.2rem; color: #444 }
.input-field{
    max-width: 380px; width: 100%; height: 55px;
    background-color: #f0f0f0;
    margin: 10px 0; border-radius: 55px;
    display: grid; grid-template-columns: 15% 85%;
    padding: 0 .4rem;
}
.input-field i { text-align: center; line-height: 55px; color: #acacac; font-size: 1.1rem }
.input-field input { background: none; outline: none; border: none; 
    line-height: 1; font-weight: 600; font-size: 1.1rem;
    color: #333; border-radius: 20px;
}
.input-field input::placeholder{ color: #aaa; font-weight: 500 }
.btnn {
    width: 150px; height: 49px; border: none; outline: none;
    border-radius: 49px; cursor: pointer; background-color: #5995fd; color: #fff;
    text-transform: uppercase; font-weight: 600; margin: 10px 0; transition: .5s;
}
btnn::hover{ background-color: #4d84e2 }
.social-text { font-size: 1rem; margin: 5px 0 } /* Se eliminó: margin: .7rem .4rem */
.social-media { display: flex; justify-content: center }
.social-icon { height: 46px; width: 46px; border: 1px solid #333; margin: 0 0.45rem; 
    display: flex; justify-content: center; align-items: center;
    text-decoration: none; color: #333;
    font-size: 1.1rem; border-radius: 50%; transition: 0.3s;
}
.social-icon:hover{ color: #4481eb; border-color: #4481eb }
.signin-signup{
    position: absolute;
    top: 40%; left: 75%; width: 50%; z-index: 5;
    transform: translate(-50%, -50%);
    display: grid; grid-template-columns: 1fr;
    transition: 1s 0.7s ease-in-out;
}

.panels-container{
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
}
.panel { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around; text-align: center; z-index: 6; }
.left-panel { pointer-events: all; padding: 3rem 17% 2rem 12% }
.right-panel { pointer-events: none; padding: 3rem 12% 2rem 17% }
.panel .content { color: #fff; transition: .9s .6s ease-in-out }
.panel h3 { font-weight: 600; line-height: 1; font-size: 1.5rem }
.panel p { font-size: 0.95rem; padding: 0.7rem 0 }
.btnn.transparent {
    margin: 0; background: none; border: 2px solid #fff;
    width: 130px; height: 41px;
    font-weight: 600; font-size: 0.8rem;
}

.image { width: 100%; transition: 1.1s .4s ease-in-out }
.right-panel .content, .right-panel .image { transform: translateX(800px) } 
/*_______-____________Animation___________________*/
.containerr.sign-up-mode::before { transform: translate(100%, -50%); right: 52% }
.containerr.sign-up-mode .left-panel .image,
.containerr.sign-up-mode .left-panel .content { transform: translateX(-800px) }

.containerr.sign-up-mode .right-panel .image,
.containerr.sign-up-mode .right-panel .content { transform: translateX(0px) }
.containerr.sign-up-mode .right-panel { pointer-events: all }
.containerr.sign-up-mode .left-panel { pointer-events: none }
.containerr.sign-up-mode .signin-signup { left: 25% }
.containerr.sign-up-mode form.sign-in-form { z-index: 2; opacity: 1 }
.containerr.sign-up-mode form.sign-up-form { z-index: 1; opacity: 0 }

@media (max-width: 870px) {
    .containerr { min-height: 800px; height: 100vh }
    .signin-signup {
        width: 100%; top: 95%;
        transform: translate(-50%, -100%);
        transition: 1s 0.8s ease-in-out;
    }
    .signin-signup,
    .containerr.sign-up-mode .signin-signup { left: 50% }
    .panels-container { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 1fr}
    .panel {
        flex-direction: row; justify-content: space-around; align-items: center;
        padding: 2.5rem 8%;
        grid-column: 1 / 2;
    }
    .right-panel { grid-row: 3 / 4 }
    .left-panel { grid-row: 1 / 2 }
    .image {
        width: 200px;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.6s;
    }
    .panel .content {
        padding-right: 15%;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.8s;
    } 
    .panel h3 { font-size: 1.2rem }
    .panel p { font-size: 0.7rem; padding: 0 }
    .btn.transparent { width: 110px; height: 35px; font-size: 0.7rem }
    .containerr:before {
        width: 1500px; height: 1500px;
        transform: translateX(-50%);
        left: 30%; bottom: 68%;
        right: initial; top: initial;
        transition: 2s ease-in-out;
    }
    .containerr.sign-up-mode:before {
        transform: translate(-50%, 100%);
        bottom: 32%; right: initial;
    }
  
    .containerr.sign-up-mode .left-panel .image,
    .containerr.sign-up-mode .left-panel .content { transform: translateY(-300px) }
  
    .containerr.sign-up-mode .right-panel .image,
    .containerr.sign-up-mode .right-panel .content { transform: translateY(0px) }

    .right-panel .image,
    .right-panel .content { transform: translateY(300px) }
    .containerr.sign-up-mode .signin-signup { top: 5%; transform: translate(-50%, 0) }
}
  
@media (max-width: 570px) {
    form { padding: 0 .7rem }
    .image { display: none }
    .panel .content { padding: 0.5rem 1rem }
    .containerr { padding: 1.5rem }
    .containerr:before { bottom: 72%; left: 50% }
    .containerr.sign-up-mode:before { bottom: 28%; left: 50% }
    .signin-signup{ left: 50%; top: 80% }
    .containerr.sign-up-mode .right-panel{ margin-bottom: 140px }
    .containerr:before {
        width: 1500px; height: 1500px;
        transform: translateX(-50%);
        right: initial; top: initial;
        transition: 2s ease-in-out;
    }
    .containerr.sign-up-mode:before { bottom: 40%; left: 50% }
}

/*____________________Carrousel Swiper___________________*/
.home-section {
    background: rebeccapurple; position: relative;
    width: 100%; height: 100%; padding: 30px 0px;
    color: #000;
    display: flex; justify-content: center; align-items: center;
}
.swiper {
    top: 0px!important; width: 100%;
    padding-top: 50px; padding-bottom: 50px;
}

.swiper-slide {
    background-position: center; background-size: contain;
    width: 300px; height: 300px;
    background-color: #000;
}
.home_categories { position: relative; height: 100%; width: 100% }
/*____________________ Seccion Cuponiks ___________________*/
#list {
    margin-top: 0;
    min-height: 390px;
    padding-bottom: 50px;
    position: relative;
    width: 1200px; margin: 0 auto;
}
#list .section-business {
    display: block;
    /* display: flex; */
    padding-left: 0.25rem;
    padding-right: 0.24rem;
}
#list .custom-card {
    margin: 8px 5px;
    background: #fff;
    border: 1px solid #d4d4d4;
    box-shadow: 0 1px 12px rgb(0 0 0 / 7%);
    border-radius: 6px;
    border-left: none!important;
    border-right: none!important;
    border-bottom: none!important;
    width: 24%;
    display: inline-flex; cursor: pointer;
    /* display: block; */
}
#list article.custom-card .card-content .card-headers {
    /* background-color: #f0f0f0; */
    padding: 20px 30px; padding-bottom: 0px;
    border: 2px solid #fff; border-radius: 6px 6px 0 0;
}
#list .card-headers .foto { overflow: hidden; position: relative; margin: 0 }
#list .card-headers .foto img { border-radius: 6px }
#list .foto img { width: 100%; height: 250px; transition: .6s ease-in-out }
#list .foto img:hover { transform: scale(1.070); }

#list article.custom-card .card-content .card-body {
    background-color: #fff;
    padding: .8rem;
    position: relative;
    border-radius: 0 0 6px 6px;
}
#list article.custom-card .card-content .card-body .card-title { height: 50px; }
/* #list article.custom-card .card-content .card-body .card-title .title { */
.card-title .title {
    color: #5c5a5a;
    font-weight: 500;
    text-align: left;
    margin: 0;
    font-size: .9em; font-weight: 400;
}
#list article.custom-card .card-content .card-body .product-container {
    margin: 8px 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
#list article.custom-card .card-content .card-body .product-container .product-body {
    position: relative;
    width: 100%;
}
/* #list article.custom-card .card-content .card-body .product-container .product-body .product-price { */
.product-price {
    display: flex;
    align-items: flex-start;
}
/* article.custom-card .card-content .card-body .product-container .product-body .product-price .price-discount { */
.price-discount {
    background-color: #fff;
    border-radius: 6px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #316aff;
    margin-right: 6px;
}
/* article.custom-card .card-content .card-body .product-container .product-body .product-price .price-discount span { */
.price-discount span {
    font-size: .8em;
    font-weight: 800;
    color: #316aff;
}
article.custom-card .card-content .card-body .product-container .product-body .product-price .price-container {
    position: relative;
}
/* article.custom-card .card-content .card-body .product-container .product-body .product-price .price-container .price-offer, .price-offer { */
.price-offer {
    font-size: 1em;
    font-weight: 700;
    color: #fb7500;
    margin: 0 0 4px;
    line-height: normal;
}
article.custom-card .card-content .card-body .product-container .product-body .product-price .price-container .old-price {
    font-size: .9em;
    line-height: .8em;
    font-weight: 500;
    text-decoration: line-through;
    text-align: left;
    color: #78787a;
    margin: 0 0 4px;
}
#list article.custom-card .card-content .card-body .sold {
    font-style: normal;
    font-weight: 500;
    font-size: .8em;
    color: #78787a;
    padding-left: 4px;
    margin: 0;
}

/*____________________ Categorias & Banner ___________________*/
#categorias {
    width: 100%;
    padding-bottom: 10px;
    z-index: 300;
    height: 100%;
    display: block;
    position: fixed;
    background: #fff;
    overflow-y: scroll;
    top: 150px;
}
ul#subcategorias { list-style: none }
ul#subcategorias li { margin: 5px }
.lineas__banner { display: flex; justify-content: center }
#otras_lineas { padding-top: 30px; width: 1200px }
.fixednav {
	display: block;
    padding-top: 10px; padding-bottom: 10px;
	font-size: 0.7em; text-align: center;
	max-width: 200px;
}
.fixednav p { font-size: 14px; color: black }
a.fixednav:hover:before { background: #00da4d }
a.fixednav:before {
    content: " "; transform: translate(-50%, 0%);
    position: absolute;
    height: 90px; width: 90px;
    border-radius: 50%;
	top: 10px; /* left: calc(50% -40px); */
	z-index: auto; 	transition: all .3s; 
    background: #f1f1f1; border: 1px solid #00da4d;
}
.fixednav img { max-width: 80px; position: relative; cursor: pointer }
/*____________________ Shoping Widgets ___________________*/
#app-messenger, #app-whatsapp{
    position: fixed;
    right: 24px;
    bottom: 25px;
    width: 60px;
    z-index: 1000;
    display: block;
}
#app-whatsapp{
    bottom: 95px;
    display: block;
}
#app-messenger i, #app-whatsapp i{
    font-size: 63px;
}
#app-whatsapp{
    color: #1ebea5;
}
#ap-messenger i{
    color: #0084ff;
}
#fb-root{
    display: block;
}

.ui-button--filled, .ui-button--primary {
    background: #32a858!important;
    border-color: #009ee3;
    color: #fff;
    border-radius: 25px;
}