/*
Theme Name: JuanSkincare
Theme URI: https://lab.bozemagazine.com/
Author: Carlosfingles
Author URI: https://instagram.com/carlosfingles
Description: Theme powered by carlosfingles.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juanskincare
Domain Path: /lang
Tags: one-column, two-columns
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root {
    --var-juanskincare-dark: #aa9f8e;
    --var-juanskincare-grey: #4d4d4d;
    --var-juanskincare-light: #6C757D;
}
/*=========================================================
	00 -> WORDPRESS
===========================================================*/

.alignleft,
img.alignleft {
	float: left;
}

.alignright,
img.alignright {
	float: right;
}

.aligncenter,
img.aligncenter {
	clear: both;
	margin-right: auto;
	margin-left: auto;
}
img.aligncenter {
	display: block;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1em;
	text-align: center;
}

.wp-caption img {
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	-webkit-box-shadow: none;
    box-shadow: none;
}

.wp-caption .wp-caption-text {
	padding: .7em .5em;
	text-align: center;
	font-style: italic;
}

.gallery-caption {
	display: block;
	padding-top: 0.5em;
	font-size: .9em;
	line-height: 1.5;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

/*----------------------------*\
	Archive Page
\*----------------------------*/
#taxonomy-description {
    color: #fff;
    text-align: justify;
    padding: 1.3rem;
    background-color: var(--var-juanskincare-dark);
    margin-bottom: 1.5rem;
    border-radius: 0;
}

/*----------------------------*\
	Page
\*----------------------------*/
.page-img {
    width: 100%;
    max-height: 340px;
    overflow: hidden;
    position: relative;
}
.page-img img {
    width: 100%;
}
.page-img .page-img-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--var-juanskincare-dark);
}
.page-img .page-img-body .page-title {
    color: #fff;
    font-family: "Montserrat", sans-serif;
}

/*----------------------------*\
	Index Posts
\*----------------------------*/
/* BANNER */
.banner-primary .bg {
    height: 150px;
    background-color: #fff;
}
.banner-primary .banner-container {
    margin-top: -150px;
}
.banner-primary .card-post .img-left {
    margin-bottom:-20px;
}

/* Serach cover */
.search-cover .btn {
    width: 37px;
    text-align: center;
    padding: 0;
    line-height: 35px;
}

/* GRID */
.grid-news {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}
.grid-news .card-post:nth-child(4n+1)  { /*.grid-news .card-post:first-child*/
    grid-column: 1 / 3;
}
.grid-news .card-post:nth-child(4n) {
    grid-column: 2 / 4;
}

.grid-news .card-post:nth-child(4n+1) .text-wrapper, .grid-news .card-post:nth-child(4n) .text-wrapper {
    display: block;
}

/* POST */
.card-post {
    border-radius: 0;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: 0.3s ease-in-out;
    height: 300px;
}

.card-post::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: transparent;
    background-image: linear-gradient(0deg, #000000 0%, #F2295B00 60%);
    transition: 0.3s ease-in-out;
}
.card-post .item-link {
    z-index: 5;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.card-post .image-wrapper {
    background-color: #f0f1f5;
    overflow: hidden;
    display: flex;
    width: 100%;
    transition: 0.3s ease-in-out;
    height: 100%;
  }
.card-post picture {
	width: 100%;

}
.card-post .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.card-post:hover .image-wrapper img {
    transform: scale(1.1);
}
.card-post .content-wrapper {
    position: absolute;
    width: 100%;
    z-index: 10;
    transition: 0.5s cubic-bezier(.17,.73,.66,.99);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.card-post .content-wrapper-inner {
    padding: 20px;
    transition: 0.5s cubic-bezier(.17,.73,.66,.99);
    display: flex;
}
.card-post .img-avatar {
    flex: auto;
    padding-right: 12px;
}
.card-post .img-avatar img {
    width: 100%;
    max-width: 60px;
    border-radius: 60em;
}
.card-post .content-card {
    flex: 100%;
}
.card-post .terms-wrapper .term-item {
    background-color: #000000;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.4px;
    color: #e8e4e4;
    display: inline-block;
    padding: 2px 6px;
    margin-right: 5px;
    border-radius: 3px;
    text-transform: capitalize;
    transition: 0.3s ease-in-out;
}
.card-post .terms-wrapper .term-item a, .card-post .terms-wrapper .term-item a:hover,.card-post .terms-wrapper .term-item a:focus {
    color: #e8e4e4;
}
.card-post .terms-wrapper .term-item a{
    text-decoration: underline;
}

.card-post .title:not(h1) {
    word-wrap: break-word;
    line-height: 14px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}
.card-post .title a {
    font-size: 14px;
    line-height: 1rem;
    color: #fff;
    word-break: break-word;
    font-weight: 600;
}
.card-post:hover .title a, .card-post:focus .title a, .card-post .title a:hover, .card-post .title a:focus {
    text-decoration: underline;
    color: #fff;
}
.card-post .text-wrapper {
    font-size: 12px;
    display: none;
}
.card-post .meta-wrapper {
    display: block;
    font-size: 0.9rem;
    color: #EDF2F4;
    text-transform: capitalize;
    transition: 0.5s cubic-bezier(.17,.73,.66,.99);
}
.card-post .wc-term {
    display: inline-flex;
    color: #fff;
}
.card-post .wc-term .icon {
    font-size: 1rem;
}

/* btn */
.card-post .btn-link {
    position: absolute;
    right: 25px;
    top: 25px;
    background-color: var(--var-juanskincare-dark);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    transform: rotate(90deg);
    border-radius: 5px;
    color: #fff;
    z-index: 1;
    -webkit-transition: 0.4s all;
    transition: 0.4s all;
}
.card-post:hover .btn-link {
    transform: scale(1.2) rotate(90deg);
}

@media only screen and (max-width: 480px) {
    .card-post .title a {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .grid-news {
        display: block;
    }
    .grid-news .card-post {
        margin-bottom: 20px;
    }
    .grid-news .card-post .text-wrapper {
        display: block;
    }

    .banner-primary .card-post .img-left {
        margin-bottom: 20px;
        height: 115px;
    }
    .banner-primary .card-post .small {
        font-size: 9px !important;
    }
}

/*----------------------------*\
	Sigle Page
\*----------------------------*/

/*-- Nav Links --*/
.navigation.post-navigation {
    padding: 0.75rem 1.25rem;
    text-transform: uppercase;
    font-size: 12px;
    background-color: #343a41;
}
.navigation.post-navigation > .screen-reader-text {
    display: none;
}
.navigation.post-navigation > .nav-links {
    display: flex;
}
.navigation.post-navigation > .nav-links > .nav-previous {
    margin-left: auto;
}
.navigation.post-navigation > .nav-links > .nav-previous a, .navigation.post-navigation > .nav-links > .nav-next a {
    color: #fff;
    text-decoration: none;
}

/*-- Author Info --*/
.author-info {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    text-align: left;
    width: 100%;
    background-image: url(./assets/img/bg-page-section.png);
    background-size: cover;
    font-size: 12px;
    color: #aaa;
}

.author-avatar, .author-avatar .avatar {
    border-radius: 100%;
    float: left;
    max-width: 150px;
}
.author-avatar .avatar {
    border: 3px solid #fff;
}

.author-description {
    float: left;
    padding-left: 28px;
}
.author-description .author-title {
    font-family: "Montserrat", sans-serif;
    color: #fff;
}
.author-description .author-title::before {
    content: '- ';
}

/*----------------------------*\
	Comments
\*----------------------------*/
.comments-section .children {
    padding-left: 1.2rem !important;
}
.comments-section .media {
    display: block !important;
}
.comments-section .media-body {
    margin-bottom: 1rem;
    overflow: visible;
    
}
.comments-section .media-body::before {
    position: absolute;
    left: 10px;
    margin-top: -36px;
    content: "\f0d8";
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-weight: 800;
    font-size: 150%;
    text-shadow: 0 -.125rem .25rem rgba(0,0,0,.075) !important;
}
.comments-section .media-body::after {
    position: absolute;
    left: 10px;
    margin-top: -33px;
    content: "\f0d8";
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-weight: 800;
    font-size: 140%;
}

.comments-section .media .img-avt img {
    border-radius: 100%;
    border: 2px solid #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    display: block !important;
    height: 32px !important;
    width: 32px !important;
}

.comments-author-avatar {
    border-radius: 100%;
    border: 2px solid #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    display: block !important;
    height: 32px !important;
}
.comments-section .comments-section-title {
    margin-bottom: 1rem;
}
.comments-author-name, .comments-author-name>b a {
    color: #2B2D42;
}

.comments-reply a, .comment-reply-title a {
    text-decoration: none;
}
.comments-reply a {
    color: #fff;
}
.comment-reply-title a {
    color: #222;
}

.comment-reply-title .cancel-reply {
    background: transparent !important;
    padding: 0 !important;
}
.comment-reply-title .cancel-reply a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;border: 1px solid transparent;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.comment-reply-title .cancel-reply a:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
#cancel-comment-reply-link:hover, #cancel-comment-reply-link:focus, .cancel-comment-reply-link:focus, .btn-outline-light:hover #cancel-comment-reply-link {
    color: #fff !important;
}

.comments-data {
    display: flex;
}

.comments-must-log-in a {
    text-decoration: underline;
    color: #222;
}

.comment-form-cookies-consent > [type="checkbox"]{
    margin-right: 5px;   
}

.comments-pagination .page-numbers {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    background-color: #fff;
    padding: 5px 10px;
    color: #5e5e5e;
}
.comments-pagination .page-numbers:hover {
    background-color: #f9f9f9;
    text-decoration: none;
    color: #5e5e5e;
}
.comments-pagination .page-numbers.current {
    background-color: #333 !important;
    color: #fff !important;
}

/*=========================================================
	01 -> GENERAL
===========================================================*/

/*----------------------------*\
	Typography
\*----------------------------*/
html {
    margin-top: 0 !important;
    scroll-behavior: smooth !important;
    scroll-padding-top: var(--scroll-padding, 155px);
    overflow-y: auto;
}
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    font-size: 12px;
}
/* body.blog, body.single:not(.single-product), body.error404 {
    background-color: #ededed;
} */
img, svg:not(.e-font-icon-svg) {
    height: auto;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #222;
  font-weight: 400;
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
}
h1.title-prm, h2.title-prm, h3.title-prm, h4.title-prm, h5.title-prm, h6.title-prm {
  padding: 15px 0;
  border-bottom: 1px solid #dadada;
  margin-bottom: 25px;
  position: relative;
  font-weight: 600;
}
h1.title-prm::after, h2.title-prm::after, h3.title-prm::after, h4.title-prm::after, h5.title-prm::after, h6.title-prm::after {
    content: ' ';
    width: 84px;
    border-bottom: 2px solid transparent;
    display: block;
    position: absolute;
    bottom: -1px;
    background-color: var(--var-juanskincare-dark);
    height: 4px;
}

.title-prm-center {
    text-align: center;
}
.title-prm-center::after {
    left: calc(50% - 42px);
}

.text-prm {
    color: var(--var-juanskincare-dark) !important;
}
.text-sr-lg {
    font-size: 3rem !important;
}

a {
  color: #222;
  font-weight: 600;
  -webkit-transition: 0.2s color;
  transition: 0.2s color;
  text-decoration: none;
}
a:not(.btn):hover, a:not(.btn):focus {
  outline: none;
  color: #343a40; /* Este Queda asi */
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ol {
  margin: 0;
  padding: 0;
  margin-bottom: 1rem;
  padding-left: 2.5rem;
}
ul.disc, .disc ul {
    list-style: disc !important;
    margin-bottom: 1rem;
    padding-left: 2.5rem;
}

blockquote {
    padding-left: 15px;
    background-color: #f8f9fa;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
    border-left: 5px solid #343a40;
}

/*----------------------------*\
	Others
\*----------------------------*/
.o-h {
    overflow: hidden !important;   
}
.cursor-pointer {
    cursor: pointer;
}
.bg-prm {
    background-color: var(--var-juanskincare-dark);
}
.bg-prm-dark {
    background-color: var(--var-juanskincare-grey);
}

.bg-mod {
    background-color: #f8f8f8 !important;
}
.border-left-prm {
    border-left: 6px solid var(--var-juanskincare-dark);
}

/*-- Inselect --*/
.inselect {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*----------------------------*\
	Pagination
\*----------------------------*/
.store-pagination {
  float: right;
}

.store-pagination li {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #FFF;
  border: 1px solid #E4E7ED;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  border-radius: 0;
}
.store-pagination li:hover {
  background-color: #E4E7ED;
}

.store-pagination li+li {
  margin-left: 5px;
}

.store-pagination li.active, 
.store-pagination li.active:hover, .store-pagination li.active:focus {
  color: #FFF;
  font-weight: 500;
  cursor: default;
  background-color: var(--var-juanskincare-dark);
}

.store-pagination li a {
  display: block;
}

/*----------------------------*\
	Buttons
\*----------------------------*/

/*-- btn edit page --*/
.btn-edit-page {
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    z-index: 10;
    color: #fff;
    left: -90px;
    padding: 8px;
    font-size: 12px;
    width: 120px;
    border-right: 30px solid #333;
    background-color: #343a40;
    -webkit-transition: .8s left;
    -o-transition: .8s left;
    transition: .8s left;
}
.btn-edit-page a {
    color: #fff;
} 
.btn-edit-page a:hover {
    text-decoration: none;
    color: #fff;
} 
.btn-edit-page:hover {
    left: 0px;
    text-decoration: none;
    color: #fff;
}
.btn-edit-page::after {
    content: "\f044" !important;
    position: absolute;
    right: -22px;
    left: auto !important;
    font-weight: 700;
    font-family: "Font Awesome 5 Free";
}

/*-- others --*/
a.btn:not(class*="btn-outline-"),
.btn:not(class*="btn-outline-") h1, h1 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h1 a, h1 .btn:not(class*="btn-outline-") a,
.btn:not(class*="btn-outline-") h2, h2 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h2 a, h2 .btn:not(class*="btn-outline-") a,
.btn:not(class*="btn-outline-") h3, h3 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h3 a, h3 .btn:not(class*="btn-outline-") a,
.btn:not(class*="btn-outline-") h4, h4 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h4 a, h4 .btn:not(class*="btn-outline-") a,
.btn:not(class*="btn-outline-") h5, h5 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h5 a, h5 .btn:not(class*="btn-outline-") a,
.btn:not(class*="btn-outline-") h6, h6 .btn:not(class*="btn-outline-"), .btn:not(class*="btn-outline-") h6 a, h6 .btn:not(class*="btn-outline-") a {
    color: #fff;
}
.btn:not(.btn-warning) a,
.btn:not(.btn-warning) a:hover,
.btn:not(.btn-warning) a:focus {
    color: #fff !important;
}
.btn:focus {
    box-shadow: none !important;
}
button:not(.btn):not(.cky-btn-revisit):not(.navbar-toggler):not(.btn-close), input[type="submit"]:not(.btn) {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ebe9eb;
    border: 0px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    letter-spacing: 3px;
}
button>a {
    font-weight: 400 !important;
}
.btn {
    border-radius: 0;
    font-weight: 400;
    letter-spacing: 3px;
}
button:not(.btn):not(.cky-btn-revisit):not(.navbar-toggler):not(.btn-close):hover, input[type="submit"]:not(.btn):hover {
    color: #212529;
    text-decoration: none;
    background-color: #dfdcde;
}

button:focus{
    outline: 0;
}
button[disabled] {
    opacity: .5;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-prm {
    background-color: var(--var-juanskincare-dark);
    moz-transition: all .4s ease-in-out !important;
    -o-transition: all .4s ease-in-out !important;
    -webkit-transition: all .4s ease-in-out !important;
    transition: all .4s ease-in-out !important;
    color: #fff;
    background-position: 1% 0;
}
.btn-prm:hover, .btn-prm:focus {
    color: #fff;
    background-color: var(--var-juanskincare-grey);
}

/*----------------------------*\
	Inputs
\*----------------------------*/
.input-group:not(.not-rounded-pill) input.rounded-pill:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group:not(.not-rounded-pill) button.rounded-pill:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

input[type="text"]:not(.form-control), input[type="email"]:not(.form-control), input[type="number"]:not(.form-control), input[type="tel"]:not(.form-control), input[type="password"]:not(.form-control), textarea:not(.form-control) {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input[type="text"]:not(.form-control)::placeholder, input[type="email"]:not(.form-control)::placeholder, input[type="number"]:not(.form-control)::placeholder, input[type="tel"]:not(.form-control)::placeholder, input[type="password"]:not(.form-control)::placeholder, textarea:not(.form-control)::placeholder, select:not(.form-control)::placeholder {
    color: #6c757d;
    opacity: 1;
}

textarea:not(.form-control) {
    height: auto;
}

select:not(.form-select) {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:focus, textarea:focus, select:focus {
    outline: 0;
}

.badge.badge-normal {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
}
.badge:not(.badge-warning) a {
    color: #fff !important;
}
.badge a:hover, .badge a:focus {
    text-decoration: underline;
}
.badge {
    white-space: normal;
    text-align: left;
}

/*----------------------------*\
	Dropdowns
\*----------------------------*/
.dropdown-menu {
    border-radius: 0 !important;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active {
    color: #fff;
    background: var(--var-juanskincare-dark);
}
.dropdown-menu-end {
    right: 0;
    left: auto;
}

/*----------------------------*\
	Cards & Modals
\*----------------------------*/
.card, .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 0 !important;
}

.modal-backdrop {
	z-index: 999999999 !important;
}
.modal, .offcanvas {
	z-index: 9999999999 !important;
}

/*=========================================================
	02 -> HEADER
===========================================================*/
#general-header {
    background-color: #ffffff;
}
#header {
  padding: 5px 0;
  background-color: transparent;
}
#header.fixed-top {
    background-color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0;
}
#header .navbar-brand .logo {
    max-width: 120px;
}
#header.fixed-top .navbar-brand .logo {
    max-width: 78px;
}
#header .icon-btn:not(.btn-prm) {
  background: none;
  border: none;
  padding: 0 !important;
  margin: 0 8px;
}
#header .icon-btn i {
    font-size: 18px;
}
@media (max-width: 767.98px) {
  #header .navbar-brand .logo {
    height: 45px;
  }
}

/*=========================================================*\
	03 -> NAVIGATION  (BOOTSTRAP MENU)
\*=========================================================*/

/*----------------------------*\
	Main nav
\*----------------------------*/
.main-nav > .menu-item > .dropdown-menu {
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
}
.main-nav > .menu-item.dropdown:hover > .dropdown-menu {
    display: block !important;
}

.main-nav > .menu-item > .dropdown-menu > li > a {
    font-size: 90%;
}
.main-nav > .menu-item > .dropdown-menu .dropdown-item {
    padding: .25rem 1rem;
}
.main-nav > .menu-item > .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #333;
}

.main-nav > .menu-item {
    padding-left: 10px;
    padding-right: 10px;
}
.main-nav>li>a {
  padding: 0;
  line-height: 20px;
  color: #333;
}
.main-nav>li>a:hover, .main-nav>li>a:focus, .main-nav>li.active>a {
  background-color: transparent;
}
.main-nav>li>a:after {
  content: "";
  display: block;
  width: 0%;
  height: 5px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  margin-top: 5px;
}
.main-nav>li>a:hover:after, .main-nav>li>a:focus:after, .main-nav>li.active>a:after {
    width: 75%;
    background-color: var(--var-juanskincare-dark);
    border-radius: .65rem;
}
.main-nav>li.active>a {
    color: var(--var-juanskincare-dark);
}
.main-nav>li>a.toggle::before {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    float: right;
    margin-top: 0.5rem;
    font-size: 140%;
}

/* Toggle */
.main-nav>li>a.toggle::before,
.main-nav > .menu-item > .dropdown-menu > li.menu-item-has-children > a::after {
    display: inline-block;
    margin-left: .45em;
    vertical-align: 0;
    content: "\f107";
    float: right;
    font-size: 1rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    border: 0;
    margin-top: 0;
}
.main-nav > .menu-item > .dropdown-menu > li.menu-item-has-children > a::after {
    float: none;
}

@media only screen and (max-width: 992px) {
    .main-nav > .menu-item .dropdown-menu {
        position: relative !important;
    }
    .main-nav > .menu-item > .dropdown-menu .dropdown-item {
        text-align: center;
    }
    .main-nav > .menu-item > .nav-link {
        text-align: center;
        margin-top: .5rem;
    }
}
/*----------------------------*\
	Admin Bar
\*----------------------------*/
#wpadminbar {
    position: absolute !important;
    z-index: 1025 !important;
}
#wpadminbar:hover, #wpadminbar:focus{
    z-index: 1040 !important;
}

/*=========================================================
	04 -> FOOTER
===========================================================*/

/* btns focus */
#btn-go-up {
    position: fixed;
    right: -1500px;
    bottom: 100px;
    z-index: 1030;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity .4s ease;
    width: 56px;
    justify-content: center;
}
.btn-foot-right {
    position: fixed;
    right: 30px;
    z-index: 99;
}

/* footer */
#footer {
  background: #fff;
}

.footer {
  margin: 30px 0px;
}

.footer .footer-title {
  color: var(--var-juanskincare-dark);
  font-size: 1rem;
  margin: 0px 0px 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: capitalize;
}

.footer .footer-title:not(.logo):after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 5px;
    width: 15%;
    background-color: var(--var-juanskincare-dark);
}
.footer .footer-title.logo {
    min-width: 40px;
    max-width: 120px;
    width: 100%;
    height: auto;
}

.footer-links li+li {
  margin-top: 5px;
}
.footer-links li a {
  font-size: 12px;
}
.footer-links:not(.description) li a::before {
    content: '-';
    margin-right: 3px;
}
.footer-links.description li {
    font-size: 12px;;
}
.footer-links li a:hover {
  color: var(--var-juanskincare-dark);
}
.footer-links li i {
    margin-right: 15px;
    width: 14px;
    text-align: center;
    color: var(--var-juanskincare-dark);
}

/* Social Networks */
.footer-follow li {
  display: inline-block;
  margin-right: 2px;
}
.footer-follow li:last-child {
  margin-right: 0px;
}

.footer-follow li a {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 23px;
  border: 2px solid var(--var-juanskincare-dark);
  background-color: transparent;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  border-radius: 100%;
  color: var(--var-juanskincare-dark);
  font-size: 12px;
}
.footer-follow li a:hover, .footer-follow li a:focus {
    border: 2px solid var(--var-juanskincare-dark);
    color: var(--var-juanskincare-dark);
}

/*----------------------*\
 * NEWSLETTER
\*----------------------*/
.newsletter input:not([type="submit"]){
    border-radius: 0;
    border: 0px;
    padding: 15px 20px;
    color: #333;
}

/*=========================================================
	05 -> WIDGETS
===========================================================*/
.widget ul {
    padding-left: 20px;
}

.aside {
    background-color: #fff;
    border-radius: 0;
    padding: .8rem !important;
    border: 0 !important;
    border-bottom: 1px solid #dad4da;
}

.aside+.aside {
  margin-top: 18px;
}

.aside>.aside-title {
  font-size: 16px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  padding: 0 0 15px;
  border-bottom: 1px solid #dadada;
  margin-bottom: 25px;
  position: relative;
  font-weight: 600;
    text-transform: uppercase;
}
.aside>.aside-title::after {
    content: ' ';
    width: 84px;
    border-bottom: 2px solid transparent;
    display: block;
    position: absolute;
    bottom: -1px;
    background-color: var(--var-juanskincare-dark);
}

.aside>ul>li>a {
    font-weight: 400;
}

/*-- Categories --*/
.widget_categories ul {
    padding: 0;
}
.widget_categories ul li a::before {
    content: "\f111";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: -.125em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    margin-right: 0.571em;
    font-size: 1.143em;
    line-height: 22px;
    vertical-align: middle;
    color: #dfdfdf;
}
.widget_categories ul li a:focus::before, 
.widget_categories ul li a:hover::before {
    content: "\f058";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    color: #343a40;
}
.widget_categories ul li.current-cat a::before {
    content: "\f058";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: -.125em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.143em;
    margin-right: 0.571em;
    color: #343a41;
}

/*-- Recent Comments --*/
.widget.widget_recent_comments ul#recentcomments {
    padding-left: 15px;
    position: relative;
}
.widget.widget_recent_comments ul#recentcomments li.recentcomments {
    padding: 5px 0px 5px 14px;
    list-style: none;
}
.widget.widget_recent_comments ul#recentcomments li.recentcomments::before {
    content: "\f086";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 0;
    color: #343a40;
}

/*-- Tag Cloud --*/
.widget.widget_tag_cloud .tagcloud  .tag-cloud-link {
    padding: 3px 10px;
    border-radius: 60rem;
    color: #fff;
    background: #343a40;
    white-space: nowrap;
}
.widget.widget_tag_cloud .tagcloud  .tag-cloud-link:hover, 
.widget.widget_tag_cloud .tagcloud  .tag-cloud-link:focus {
    color: #fff;
}
.widget.widget_tag_cloud .tagcloud  .tag-cloud-link::before {
    content: '# ';
}

/*-- Calendar --*/
#wp-calendar {
    width: 100%; 
}
#wp-calendar caption {
    text-align: right;
    text-transform: uppercase;
    color: #333;
    font-size: 12px;
    caption-side: top;
}
#wp-calendar thead {
    font-size: 10px;
    text-align: center;
}
#wp-calendar thead th {
    padding-bottom: 10px;
}
#wp-calendar tbody {
    color: #aaa;
    background-color: #fff;
}
#wp-calendar tbody td {
    background: #f5f5f5;
    border: 1px solid #fff;
    text-align: center;
    padding: 5px;
}
#wp-calendar tbody td:hover {
    background: #fff;
}
#wp-calendar tbody td#today {
    color: #fff;
    background: #343a40;
}
#wp-calendar tbody td#today:hover {
    color: #fff;
}
#wp-calendar tbody .pad {
    background: none;
}
#wp-calendar tfoot #next {
    font-size: 10px;
    text-transform: uppercase;
    text-align: right;
}
#wp-calendar tfoot #prev {
    font-size: 10px;
    text-transform: uppercase;
    padding-top: 10px;
}

/*============================*\
 * 06-> SLICK
\*============================*/
.slick-arrow {
    z-index: 10 !important;
    background-color: rgba(255,255,255,.6) !important;
    border: 1px solid rgba(0,0,0, .2) !important;
    width: 25px !important;
    height: 25px !important;
    line-height: 25px !important;
    border-radius: 100% !important;
    overflow: hidden !important;
    color: transparent !important;
}
.slick-prev:before, .slick-next:before {
    font-family: "Font Awesome 5 Free";
    color: #333 !important;
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 15px;
    top: 5px;
}
.slick-arrow:not(.slick-disabled):hover {
    background-color: var(--var-juanskincare-dark) !important;
    border: 1px solid rgba(0,0,0, .2) !important;
    color: transparent !important;
}
.slick-arrow.slick-prev {
    margin-left: 27px !important;
}
.slick-arrow.slick-next {
    margin-right: 27px !important;
}

.slick-prev:before {
    content: "\f104";
}
.slick-next:before {
    content: "\f105";
}
.slick-prev:not(.slick-disabled):hover:before, .slick-next:not(.slick-disabled):hover:before {
    color: #FFF !important;
}

.slick-arrow.slick-disabled {
    opacity: .5 !important;
}

/*-- Dots --*/
.slick-dots {
  bottom: -30px;
}
.custom-dots .slick-dots {
  position: static;
  margin: 15px 0px;
}

.slick-dots li button {
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 0px !important;
    display: block !important;
}
.slick-dots li {
    margin: 0 3px;
}
.slick-dots li,
.slick-dots li button,
.slick-dots li button:before {
  width: 8px;
  height: 8px;
  transition: all .3s ease !important;
}
.slick-dots li button:before {
  content: "";
  opacity: 1;
  background: #bcbcbc;
  border-radius: 50%;
}

.slick-dots li.slick-active, .slick-dots li.slick-active button, .slick-dots li.slick-active button::before {
    width: 30px !important;
    transition: all .3s ease !important;
}
.slick-dots li.slick-active,
.slick-dots li.slick-active button::before {
    background-color: var(--var-juanskincare-dark);
    border-radius: 5px;
}

/*============================*\
 * 07-> SECTION TITLE
\*============================*/
.section-title .section-nav {
  float: right;
}
.section-title .title-text {
    width: calc(100% - 65px);
}

/* Slick Nav */
.section-title .section-nav .products-slick-nav {
  top: 0px;
  right: 0px;
}
.products-slick-nav {
  position: absolute;
  right: 15px;
  z-index: 10;
}
.products-slick-nav .slick-prev, .products-slick-nav .slick-next {
  position: relative;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  width: 20px;
  height: 20px;
  display: inline-block !important;
  margin: 0px 2px !important;
}
.products-slick-nav .slick-prev {
    left: 0;
}
.products-slick-nav .slick-next {
    right: 0;
}
.products-slick-nav .slick-prev:before, .products-slick-nav .slick-next:before {
  font-size: 14px;
}

/* Nav Tabs */
.section-title .section-nav .section-tab-nav {
  display: inline-block;
}

.section-tab-nav li {
    display: inline-block;
    margin-right: 15px;
    font-size: 1rem !important;
}
.section-tab-nav li:last-child {
  margin-right: 0px;
}

.section-tab-nav li a,
.section-tab-nav li span {
    color: #8D99AE;
    cursor: pointer;
    font-weight: 400;
}
.section-tab-nav li a:hover,
.section-tab-nav li span:hover {
    color: #333;
}
.section-tab-nav li a:after,
.section-tab-nav li span:after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background-color: #343a41;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.section-tab-nav li.active a,
.section-tab-nav li.active span {
    color: #343a41;
    font-weight: 700;
}
.section-tab-nav li a:hover:after, .section-tab-nav li a:focus:after, .section-tab-nav li.active a:after,
.section-tab-nav li span:hover:after, .section-tab-nav li span:focus:after, .section-tab-nav li.active span:after {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .section-title .section-nav.tab {
        float: none;
        margin-top: 10px;
    }
    .section-tab-nav li {
        margin-top: 10px;
    }
}

/* Nav Tabs Card */
.section-tab-nav-card {
    padding-left: 25px;
}
.section-nav-card::before {
    content: ' ';
    width: 5px;
    background-color: #e7e7e7;
    display: block;
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
}

.section-tab-nav-card li {
    display: block;
    width: 100%;
    font-size: 1rem !important;
    position: relative;
    padding-top: 1rem;
}

.section-tab-nav-card li a,
.section-tab-nav-card li span {
    color: #8D99AE;
    cursor: pointer;
    font-weight: 400;
}
.section-tab-nav-card li.active span,
.section-tab-nav-card li.active a {
    color: #333;
    font-weight: 700;
}
.section-tab-nav-card li::before {
    content: ' ';
    width: 5px;
    background-color: var(--var-juanskincare-dark);
    display: block;
    position: absolute;
    left: -25px;
}

.section-tab-nav-card li.active {
    color: #343a41;
    font-weight: 700;
}
.section-tab-nav-card li:hover::before, .section-tab-nav-card li:focus::before, .section-tab-nav-card li.active::before {
    top: 0;
    bottom: 0;
}

/*MENU PRINCIPAL*/
/* Starter CSS for Menu */
#menu_prm {
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
}
#menu_prm ul,
#menu_prm li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu_prm ul {
  position: relative;
  z-index: 597;
}
#menu_prm ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#menu_prm ul li.hover,
#menu_prm ul li:hover,
#menu_prm ul li.focus,
#menu_prm ul li:focus {
  position: relative;
  z-index: 599;
  cursor: default;
}
#menu_prm ul ul {
  visibility: hidden;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#menu_prm ul ul li {
  float: none;
}
#menu_prm ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#menu_prm ul li:hover > ul, #menu_prm ul li:focus > ul {
  visibility: visible;
  display: block;
}
#menu_prm ul ul {
  bottom: 0;
  left: 0;
}
#menu_prm ul ul {
  margin-top: 0;
}
#menu_prm ul ul li {
  font-weight: normal;
}
#menu_prm a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
/* Custom CSS Styles */
#menu_prm {
  font-size: 1rem;
}
#menu_prm > ul {
  display: inline-block;
}
#menu_prm:after,
#menu_prm ul:after {
  content: '';
  display: block;
  clear: both;
}
#menu_prm ul ul {
  text-transform: none;
  min-width: 190px;
}
#menu_prm ul ul a {
  background: #fff;
  color: #333;
  border: 1px solid #cccccc;
  border-top: 0 none;
  line-height: 150%;
  padding: 16px 20px;
  font-size: 12px;
}
#menu_prm ul ul ul {
  border-top: 0 none;
}
#menu_prm ul ul li {
  position: relative;
}
#menu_prm ul ul li:first-child > a {
  border-top: 1px solid #cccccc;
}
#menu_prm ul ul li:hover > a, #menu_prm ul ul li:focus > a {
  background: var(--var-juanskincare-dark);
  color: #ffffff;
}
#menu_prm ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#menu_prm ul ul li:last-child:hover > a, #menu_prm ul ul li:last-child:focus > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#menu_prm ul ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 24px;
  right: 15px;
  margin-top: -8px;
}
#menu_prm ul li.active > a,
#menu_prm ul li:hover > a,
#menu_prm ul li:focus > a,
#menu_prm ul li > a:focus {
  color: var(--var-juanskincare-dark);
  font-weight: 700;
}
#menu_prm>ul>li>a:after {
    content: "";
    display: block;
    width: 0%;
    height: 4px;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
    margin-top: 5px;
}
#menu_prm>ul>li.active>a:after,
#menu_prm>ul>li>a:hover:after, #menu_prm>ul>li>a:focus:after {
    width: 75%;
    background-color: var(--var-juanskincare-dark);
}
#menu_prm>ul>li.has-sub>a>span:after {
 /*  content: '+'; */
  margin-left: 5px;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
#menu_prm ul li.last ul {
  left: auto;
  right: 0;
}
#menu_prm ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#menu_prm a {
  color: #333;
  padding: 0 10px;
}
#menu_prm > ul > li > a {
    line-height: 1.2rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}
/*End of CSS for menu*/

@media only screen and (max-width: 992px){
    #menu_prm > ul > li {
        width: 100%;
        margin-bottom: 10px;
      }
      #menu_prm ul ul, #menu_prm ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
      }
}

/* add to the home screen */
.addhomescreen:not(.installable-active){
 	display: none !important;
 }

 /* Menu Movil */
.sidenav-nav {
    margin: 1.5rem 0;
    margin-bottom: 1rem;
    position: relative; }
    .sidenav-nav li {
      -webkit-transition-duration: 500ms;
              transition-duration: 500ms; }
      .sidenav-nav li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        font-size: .95rem;
        font-weight: 500; }
        .sidenav-nav li a svg {
          margin-right: 1rem; }
        .sidenav-nav li .icon {
        margin-right: 1rem; }
        .sidenav-nav li a .caret {
            padding-left: 1rem;
            padding-right: 0;
        }
        /*.sidenav-nav li.active>a*/
        .sidenav-nav li a:hover, .sidenav-nav li a:focus {
          color: var(--var-juanskincare-dark); }
          /*.sidenav-nav li.active>a*/
      .sidenav-nav li:hover, .sidenav-nav li:focus {
        background-color: #f1f2fb; }

  .affan-dropdown-menu {
    position: relative; }
    .affan-dropdown-menu.active {
      background-color: #f1f2fb; }
      [data-theme="dark"] .affan-dropdown-menu.active {
        background-color: rgba(255, 255, 255, 0.1);
      }
    .affan-dropdown-menu ul {
      display: none;
      padding-bottom: .75rem;
      padding-left: 1.5rem; }
      .affan-dropdown-menu ul li a {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem; }
    .affan-dropdown-menu .dropdown-trigger-btn {
      -webkit-transition-duration: 500ms;
              transition-duration: 500ms;
      position: absolute;
      top: 0.5rem;
      right: 1.25rem;
      width: 30px;
      background-color: transparent;
      height: 30px;
      text-align: center;
      border-radius: 4px;
      cursor: pointer; }
      .affan-dropdown-menu .dropdown-trigger-btn i {
        -webkit-transition-duration: 500ms;
                transition-duration: 500ms;
        font-size: 18px;
        line-height: 30px;
        color: var(--var-juanskincare-dark); }
      .affan-dropdown-menu .dropdown-trigger-btn.active i {
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg); }
    .affan-dropdown-menu.active > a, .affan-dropdown-menu ul li.active {
        color: var(--var-juanskincare-dark);
        }
.nav-more .sidenav-nav li a {
    color: #333;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.nav-more .sidenav-nav .affan-dropdown-menu li a {
    text-transform: none;
}
.nav-more .sidenav-nav li.active>a,
.nav-more .sidenav-nav li a:hover, .nav-more .sidenav-nav li a:focus{
    color: #fff;
    background-color: var(--var-juanskincare-dark);
    border-radius: .45rem;
}
.nav-more .sidenav-nav .affan-dropdown-menu.active>.dropdown-trigger-btn i {
    color: #fff;
}


/* STICKY */
.is-sticky .sticky-inner {
    position: sticky;
    /*top: 20px;*/
}