@charset "UTF-8";
/*!
Theme Name: Sabbi
Theme URI: http://underscores.me/
Author: Carlos Román
Author URI: https://carlosroman.xyz
Description: Plantilla WordPress desarrollada para Sabbi por Carlos Román
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sabbi
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Sabbi is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Bold"), local("CeraRoundPro-Bold"), url("fonts/CeraRoundPro-Bold.woff2") format("woff2"), url("fonts/CeraRoundPro-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Light"), local("CeraRoundPro-Light"), url("fonts/CeraRoundPro-Light.woff2") format("woff2"), url("fonts/CeraRoundPro-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Black"), local("CeraRoundPro-Black"), url("fonts/CeraRoundPro-Black.woff2") format("woff2"), url("fonts/CeraRoundPro-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Medium"), local("CeraRoundPro-Medium"), url("fonts/CeraRoundPro-Medium.woff2") format("woff2"), url("fonts/CeraRoundPro-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Regular"), local("CeraRoundPro-Regular"), url("fonts/CeraRoundPro-Regular.woff2") format("woff2"), url("fonts/CeraRoundPro-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Thin"), local("CeraRoundPro-Thin"), url("fonts/CeraRoundPro-Thin.woff2") format("woff2"), url("fonts/CeraRoundPro-Thin.woff") format("woff");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

.font-cera-round-pro-black {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Black"), local("CeraRoundPro-Black");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

.font-cera-round-pro-bold {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Bold"), local("CeraRoundPro-Bold");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

.font-cera-round-pro-regular {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Regular"), local("CeraRoundPro-Regular");
}

.font-cera-round-pro-medium {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Medium"), local("CeraRoundPro-Medium");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

.font-cera-round-pro-light {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Light"), local("CeraRoundPro-Light");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

.font-cera-round-pro-thin {
	font-family: 'Cera Round Pro';
	src: local("Cera Round Pro Thin"), local("CeraRoundPro-Thin");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
# Globals
--------------------------------------------------------------*/
.section-title-bg {
	background-image: url("images/bg-section-title.png");
	background-repeat: no-repeat;
	background-position: center bottom;
}

.section-carousel-bg {
	background-image: url("images/bg-section-carousel-indicator.png");
	background-repeat: no-repeat;
	background-position: center bottom;
}

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
.text-purple {
	color: #6400a9;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
	z-index: 999999;
	background-color: #fff;
	top: 0;
	left: 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}

#masthead {
	background-color: #8a00e6;
}

#masthead .navbar-brand img {
	width: 100px;
}

@media screen and (min-width: 768px) {
	#masthead .navbar-expand-lg .navbar-nav .nav-link {
		border-top: 4px solid transparent;
	}
	#masthead .navbar-expand-lg .navbar-nav .nav-link:hover {
		border-top: 4px solid #fff;
	}
	#masthead .navbar-expand-lg .navbar-nav .nav-link:focus {
		border-top: 4px solid #fff;
		color: white;
	}
}

#masthead .navbar-expand-lg .navbar-nav .active .nav-link {
	border-top: 4px solid #fff;
	color: white;
}

@media screen and (max-width: 768px) {
	#masthead .navbar-expand-lg .navbar-nav .active .nav-link {
		border-top: 0px;
	}
}

/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
#homeCarousel {
	height: 100vh;
	padding-top: 4em;
}

@media screen and (min-width: 768px) {
	#homeCarousel {
		height: 70vh;
	}
}

#homeCarousel .carousel-bg {
	top: 0;
	left: 0;
	height: 100vh;
	background-position: center;
	background-size: cover;
	z-index: 0;
}

@media screen and (min-width: 768px) {
	#homeCarousel .carousel-bg {
		height: 70vh;
	}
}

@media screen and (max-width: 768px) {
	#homeCarousel .carousel-bg {
		background-position: calc(50% - 50px) 50%;
	}
}

#homeCarousel .carousel-item {
	height: 100%;
}

#homeCarousel .carousel-content {
	z-index: 1;
	height: 100vh;
	position: relative;
}

@media screen and (min-width: 768px) {
	#homeCarousel .carousel-content {
		height: 70vh;
	}
}

#homeCarousel .carousel-action-buttons {
	width: 50%;
}

@media screen and (max-width: 768px) {
	#homeCarousel .carousel-action-buttons {
		width: 100%;
	}
}

#homeCarousel .carousel-action-buttons .btn-light {
	color: #5A0098;
	border: 1px solid #5A0098;
}

#homeCarousel .carousel-action-buttons .btn-light:hover {
	color: #5A0098;
	background-color: #F5E7FF;
}

#homeCarousel .carousel-action-buttons .btn-primary {
	background-color: #5A0098;
	border: 1px solid #5A0098;
}

#homeCarousel .carousel-action-buttons .btn-primary:hover {
	color: #5A0098;
	background-color: #47f9d5;
}

#aboutUs ul li {
	box-shadow: -2px 2px 12px -2px rgba(0, 0, 0, 0.25);
	border: 0.5px solid #D3D3D3;
}

#aboutUs ul li .material-symbols-outlined {
	font-size: 3rem;
	height: 80px;
	width: 80px;
	text-align: center;
}

#howToWork .item img {
	max-height: 150px;
}

#howToWork .item span.number {
	top: 0;
	right: 0;
	font-size: 2rem;
	height: 48px;
	width: 48px;
	text-align: center;
	border-radius: 100%;
}

#howToWork .item p {
	min-height: 130px;
}

#howToWork .item .image-overlay {
	right: 10px;
	bottom: 10px;
	background-color: #f8e6ff;
	padding: 10px 80px 10px 20px;
	line-height: 0;
	border-radius: 40px;
}

#howToWork .item .image-overlay img {
	vertical-align: unset;
	height: 20px;
}

#howToWork .item .image-overlay span.icon {
	background-color: #f8e6ff;
	color: #8a00e6;
	padding: .8rem 0;
	height: 66px;
	width: 66px;
	font-size: 2.5rem;
	border-radius: 100%;
	top: -14px;
	right: 0;
	transition: .5s;
}

#howToWork .item .image-overlay span.icon::after {
	content: "\f136";
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(90deg);
	transition: .5s;
	opacity: 0;
}

#howToWork .item:hover .image-overlay span.icon {
	background-color: #47f9d5;
	color: #8a00e6;
	transition: .5s;
	transform: rotate(25deg) scale(1.5);
}

#howToWork .item:hover .image-overlay span::after {
	top: -16px;
	right: -8px;
	transition: .5s;
	opacity: 1;
}

#howToWork .lSSlideOuter .lSPager.lSpg li a {
	background-color: #8a00e6;
}

#howToWork .lSSlideOuter .lSPager.lSpg li.active a {
	background-color: #47f9d5;
}

#shops .shop img.second-image {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

#shops .shop .brand {
	top: 0;
	left: 0;
	z-index: 1;
}

#shops .shop .brand img {
	max-width: 150px;
	max-height: 150px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#shops .shop .brand .btn {
	border-radius: 40px;
	left: 25%;
	right: 25%;
	bottom: 10%;
}

#shops .shop .brand:hover .btn {
	background-color: #5A0098;
	color: #fff;
}

#faq .nav-pills .nav-link {
	color: #212121;
}

#faq .nav-pills .nav-link:hover {
	background-color: #F5E7FF;
	border-radius: 10px;
	border: 1px solid #5A0098;
	color: #5A0098;
}

#faq .nav-pills .nav-link.active {
	background-color: #5A0098;
	color: #fff;
}

#faq #pills-tabContent-faq span.material-symbols-outlined {
	font-size: 4rem;
	margin: 0 1rem;
}

#faq #pills-tabContent-faq .accordion-button {
	padding: 1rem 0;
}

#faq #pills-tabContent-faq .accordion-button::after {
	content: "\e145";
	font-family: 'Material Symbols Outlined';
	transition: .5s;
	font-size: 1.5rem;
	background-image: none;
	width: 29px;
	height: 29px;
	text-align: center;
	background-color: #8a00e6;
	color: #fff;
	border-radius: 100%;
	line-height: 29px;
}

#faq #pills-tabContent-faq .accordion-button:focus {
	box-shadow: none;
	border: none;
	background-color: transparent;
}

#faq #pills-tabContent-faq .accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: none;
}

#faq #pills-tabContent-faq .faq-content {
	box-shadow: -2px 2px 12px -2px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}

#faq #pills-tabContent-faq .faq-content h5 {
	min-height: 52px;
}

/*--------------------------------------------------------------
# Políticas de privacidad 
--------------------------------------------------------------*/
.page-template-template-politicas-de-privacidad #resume .resume {
	border-radius: 20px;
}

.page-template-template-politicas-de-privacidad #resume .resume span.number {
	background-color: #47f9d5;
	color: #5A0098;
	width: 30px;
	height: 30px;
	font-size: 1.4rem;
	border-radius: 100%;
}

.page-template-template-politicas-de-privacidad #legal ul {
	list-style: none;
}

.page-template-template-politicas-de-privacidad #legal ul li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: .6rem;
}

.page-template-template-politicas-de-privacidad #legal ul li::before {
	content: '\e5ca';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	left: 0;
	top: 0;
	background-color: #287de0;
	color: #fff;
	font-size: 1rem;
	height: 24px;
	width: 24px;
	text-align: center;
	border-radius: 100%;
	font-weight: bold;
}

.page-template-template-politicas-de-privacidad #legal ul li ul {
	margin-top: 1rem;
}

.page-template-template-politicas-de-privacidad #legal ul li ul li::before {
	background-color: #47f9d5;
	color: #5A0098;
}

/*--------------------------------------------------------------
# Términos y condiciones
--------------------------------------------------------------*/
.page-template-template-terminos-y-condiciones #boxes .box {
	box-shadow: -2px 2px 12px -2px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
}

.page-template-template-terminos-y-condiciones #boxes .box h3 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #5A0098;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#colophon {
	background-color: #212121;
}

#colophon .widget-title {
	background-image: url("images/bg-section-title.png)");
	background-repeat: no-repeat;
	background-position: bottom left;
}

#colophon a {
	color: #fff;
	transition: .5s;
	font-size: .875rem;
}

#colophon a:hover {
	color: #47f9d5;
	transition: .5s;
}

#colophon p {
	font-size: .875rem;
}

#colophon p span.material-symbols-outlined {
	color: #47f9d5;
}

#colophon p i {
	color: #47f9d5;
	font-size: 1.4rem;
}

.back-to-top {
	position: fixed;
	bottom: 0;
	right: 10px;
	z-index: 999;
	background-color: #8a00e6;
	color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 10px 10px 0 10px;
	transition: .5s;
}

.back-to-top:hover {
	background-color: #47f9d5;
	transition: .5s;
	color: #8a00e6;
}

/*--------------------------------------------------------------
# Template page: Servicio de Atención al Cliente
--------------------------------------------------------------*/
.page-template-template-sac .btn {
	border-radius: 40px;
}

.page-template-template-sac .btn.btn-theme {
	background-color: #6400a9;
	color: #fff;
	border: 1px solid #6400a9;
}

.page-template-template-sac .btn.btn-theme:hover {
	background-color: #8a00e6;
	color: #fff;
}

.page-template-template-sac .btn.btn-theme:focus {
	background-color: #47f9d5;
	color: #6400a9;
}

.page-template-template-sac .label {
	top: -.9rem;
	left: 1.5rem;
	transition: .4s;
	padding: .1rem .6rem;
	background-color: white;
	border-radius: 1rem;
}

.page-template-template-sac .form-control {
	border-radius: 3rem;
	padding: .5rem 1.5rem;
	border: #333 1px solid;
	transition: .3s;
}

.page-template-template-sac .form-control:focus {
	border-color: #6400a9;
	box-shadow: none;
	transition: .5s;
}

.page-template-template-sac .form-check.form-check-theme {
	padding: .2rem 3rem;
	border-radius: 3rem;
	transition: .3s;
	background-color: #e1e1e1;
}

.page-template-template-sac .form-check.form-check-theme:focus-within {
	background-color: #6400a9;
	transition: .5s;
	color: white;
}

.page-template-template-sac .form-switch .form-check-input:checked {
	background-color: #6400a9;
	border-color: #6400a9;
}

.page-template-template-sac .form-switch .form-check-input:focus {
	box-shadow: none;
	border-color: #8A00E6;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2381f5d6'/%3e%3c/svg%3e");
}

.page-template-template-sac textarea.form-control {
	border-radius: 1rem;
}

/*# sourceMappingURL=style.css.map */