/*
Theme Name: Joyas Jewellery
Author: aThemeArt
Author URI: https://athemeart.com/
Theme URI: https://athemeart.com/downloads/joyas-jewellery/
Description: Joyas Jewellery is a modern and unique child theme of Joyas Shop, featuring a design focused side menu. With Elementor as its drag and drop page builder, users can easily edit and create new pages without coding skills. The jewellery WordPress theme is fully responsive and looks great on any device. Offers a functional online shop with enhanced design and functionality for WooCommerce, providing seamless user experiences on checkout, cart, and my account pages. Best suited for online stores in the jewelry, apparel, watch, fashion, startup commerce, and personal storefront industries. Also, compatible with advanced product search, modal cart, Yoast SEO, WPBakery, Smart Slider 3, Live Composer, and more plugins.
Template: joyas-shop
Version: 1.0.9
Requires at least: 5.0
Tested up to: 5.8.0
Requires PHP: 7.0
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, sticky-post, custom-background, custom-header, custom-colors, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, custom-logo, blog, e-commerce
Text Domain: joyas-jewellery

Joyas Jewellery WordPress Theme, Copyright 2023 aThemeArt
Joyas Jewellery is distributed under the terms of the GNU GPL

Joyas Jewellery is child theme of Joyas Shop, Copyright 2022 aThemeArt
*/

:root {
	--secondary-color:#E1B29D!important;
	--secondary-alpha:#E1B29D!important;
	--nav-h-color:#E1B29D!important;
 }

#masthead.site-header{
	display: none;
}

/*===========================================================================
===========================================================================
Header bottom bar begin 
===========================================================================
===========================================================================*/
#page.header_layout_3{
	margin-left: 330px;
	overflow: hidden;
}
#page.header_layout_3 .container{
	padding-left: 5%;
	padding-right: 5%;
}
#aside-nav-wrapper {
	background: #fff;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
	left: 0;
	height: 100%;
	padding: 20px 0px 20px 60px;
	padding-left: 60px;
	position: fixed;
	top: 0;
	width: 330px;
	z-index: 9999;
}
#aside-nav-wrapper .box-wrap{
	padding-top: 40px;
	height: calc(100vh - 20px);

}
#aside-nav-wrapper .branding-text{
	margin-bottom: 50px;
}
#aside-nav-wrapper .joyas-main-menu{
	display: block;
	list-style: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
#aside-nav-wrapper .joyas-main-menu > li > a{
	padding:14px 14px 14px 5px!important;
	border-bottom: 1px solid #ececec;
}
#aside-nav-wrapper .joyas-main-menu li{
	position: relative;
}
#aside-nav-wrapper .responsive-submenu-toggle,
#aside-nav-wrapper #navbar li > .responsive-submenu-toggle{
	display: block;
	visibility: visible;
	position: absolute;
	top:0px;
	right: -5px;
	left: auto;
	padding:12px 10px 8px 10px;
	font-size: 22px;
	cursor: pointer;
	width: auto;
	height: auto;
	line-height: 24px;
}
#aside-nav-wrapper #navbar.underline .navigation-menu > li > a:hover:after,
#aside-nav-wrapper #navbar.underline .navigation-menu > li > a:focus:after,
 #navbar.underline .navigation-menu > li.current-menu-item > a::after {
	left: 0px!important;
	width: 100%!important;
}
#aside-nav-wrapper #navbar.navbar-fill .navigation-menu > li > a{
	border-radius: 0px;
}
#navbar .navigation-menu li li > a{
	padding:8px 10px 8px 10px;
}
#aside-nav-wrapper #navbar .navigation-menu li ul{
	position: static;
	transform:0px;
	width: 100%;
	right: 0;
	opacity: 1;
	transform: translate(0,0);
	transition: opacity 0.15s linear, transform 0.15s linear;
	visibility: visible;
	box-shadow:none;
	margin:0px;
	padding: 0px 0px 0px 5px;
	height: 0px;
	visibility: hidden;
	display: none;

}
#aside-nav-wrapper #navbar .navigation-menu li ul.focus-active{
	height: auto;
	display: block;
	visibility: visible;
}
#page.header_layout_3 .elementor-section.elementor-section-stretched{
	max-width: 112%;!important;
	left: -6%!important;
	right: -6%!important;
}
.header-3-reponsive-block{
	padding: 20px 0px;
	display: none;
}
.header-3-reponsive-block ul.header-icon{
	display: block;
	margin: 0px;
	float: right;
	margin-left: auto;
}
.header-3-reponsive-block ul.header-icon li{
	list-style: none;
}
@media only screen and (max-width: 991px) {
	#aside-nav-wrapper{
			position: fixed;
			width: 250px;
			left: 0px;
			top: 0px;
			bottom: 0px;
			box-shadow: -1px 4px 5px 0px rgba(68, 73, 83, 0.12);
			background: #FFF;
			z-index: 999;
			border-right: 1px solid #e8e8e8;
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
			left: -100%;
			transform: translateX(-100%);
			visibility: hidden;
			display: none;
			opacity: 0;
			padding-left: 0px;
	}
	#aside-nav-wrapper.active{
			left: 0;
			transform: translateX(0);
			visibility: visible;
			display: block;
			opacity: 1;
	}
	#aside-nav-wrapper #navbar{
			position:static;
			width:100%;
			left: 0px;
			top: 0px;
			bottom: 0px;
			box-shadow:none;
			background: #FFF;
			z-index: 999;
			border-right:0;
			left: 0;
			transform: translateX(0);
			visibility: visible;
			display: block;
			opacity: 1;
	}
	#page.header_layout_3{
			padding-left: 0px;
			margin-left: 0px;
	}
	.header-3-reponsive-block{
			display: block;
	}
	#aside-nav-wrapper .branding-text{
		display: none;
	}
	#aside-nav-wrapper .joyas-shop-navbar-close{
		float: none!important;
		margin-left: auto;
		margin-top:-0px!important;
	}
	#aside-nav-wrapper .joyas-main-menu > li > a{
		padding-left: 20px;
	}
	#aside-nav-wrapper .box-wrap{
		padding-top: 0px;
	}
	#masthead.site-header{
		display:block;
	}
	#masthead .logo-wrap{

		display: inline-block!important;
		text-align: left!important;
	}

}

#colophon.site-footer a, 
#colophon.site-footer,
#colophon.site-footer .site_info,
#colophon.site-footer .widget-title{
  color: #ffffff !important;

}
#colophon.site-footer {
  background-color: #262728;
}
#colophon.site-footer .social-links a:hover,
#colophon.site-footer .social-links a:focus,
#colophon.site-footer a:hover,
#colophon.site-footer a:focus {
	color: #E1B29D!important;
}
#wcspc-count{
	display: none;
}