/******************************************************************
Site Name:	Harmony Theme
Author:		Web Embassy

Stylesheet: Dynamic Stylesheet

------------ MAP ------------

01. GENERAL STYLES
02. WORDPRESS BODY CLASSES
03. LAYOUT & GRID STYLES
04. LINK STYLES
05. TYPOGRAPHY STYLES
06. HEADER SYTLES
07. NAVIGATION STYLES
08. POSTS & CONTENT STYLES
09. PAGE NAVI STYLES
10. COMMENT STYLES
11. COMMENT FORM STYLES
12. SIDEBARS & ASIDES
13. FOOTER & FOOTER MENU STYLES

******************************************************************/

/* Calculate the RGB value for the main theme color. It's used to create main color variations within Harmony Template */

/* Check whether we shall use custom fonts or set default */




/*********************
01. GENERAL STYLES
*********************/

body {
	/* Body background options */
		
		background-image: url(https://www.bocadocetrading.com/wp-content/uploads/2013/08/assorted-fruit.jpg) !important;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
	}

/* extra class for theme-colored font (for LayerSlider for example) */
.theme-colored {
	color: #FFFFFF !important;
}

/* Slider width based on theme preferences */
.layerslider-container {
	margin: auto;
			max-width: 960px !important;
	}

/* the color of the links will be changed to the theme color while hovering the paragraph */
p:hover a {
	color: #FFFFFF;
}

#inner-content a:hover, #inner-content a:active {
	color: #FFFFFF;
}


/*********************
02. WORDPRESS BODY CLASSES
*********************/


/* I'll leave these parts even though they're empty. May be I'll use these spaces for the upcoming update ;) */


/*********************
03. LAYOUT & GRID STYLES
*********************/



/*********************
04. LINK STYLES
*********************/




/*********************
05. TYPOGRAPHY STYLES
*********************/

::selection, ::-moz-selection {
	background: rgba(255,255,255, 0.1);
}

/* list of classes that use content font */
body, p, input[type="text"], #inner-content ol, #inner-content ul {
	font-family: Open Sans, serif !important;
}

/* list of classes that use heading font */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, a, label, input[type="submit"] {
	font-family: Open Sans, serif !important;
}

/* created mainly for the WooTheme Testimonials plugin */
.quote, cite {
	/* is dynamic since it's using theme main color */
	background-color: rgba(255,255,255, 0.15);
}

cite a, span.url a {
	color: #FFFFFF;
}

/* ------------------------------- */
/* Ordered & Unordered List Styles */

/* will be applied ONLY within the visual composer columns */
/* otherwise it may cause problems with other objects!! */

.wpb_text_column > .wpb_wrapper > ol {
	list-style-type: lower-alpha !important;
	padding-left: 40px;
	font-size: 0.813em;
	line-height: 2em;
}

.wpb_text_column > .wpb_wrapper > ul {
	list-style-type: square !important;
	padding-left: 40px;
	font-size: 0.813em;
	line-height: 2em;
}

.wpb_text_column > .wpb_wrapper > ol > li, .wpb_text_column > .wpb_wrapper > ul > li {
	/* smooth font color transitions */
	-webkit-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}

/* darken the color on hover */
.wpb_text_column > .wpb_wrapper > ol > li:hover, .wpb_text_column > .wpb_wrapper > ul > li:hover {
	color: #4b4b4b;
}
/* ------------------------------- */


/*********************
06. HEADER SYTLES
*********************/
/* top line styles, based on theme color and texture */
#top-line, #top-thin-line {
	/* we need to have color with opacity over an image, thats why we need gradient (it's handled as image) */
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -o-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	/* fallback solution */
	background-color: rgba(255,255,255, 0.6);
}

#top-line-nobg {
	border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* ---------------------- */
/*     Header Texture     */
/* ---------------------- */

/* check if header texture is enabled */


/*********************
07. NAVIGATION STYLES
*********************/

#header-logoandmenu, #header-logoandwidget {
	/* box shadow is dynamic since we need to know the main theme color */
	/* check theme options */
			/* very soft and smooth shadow here :) */
		-moz-box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
		-webkit-box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
		box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
	}

/* menu links style */
.nav li a:hover, .nav li a:focus {
	border-bottom: 3px solid #FFFFFF !important;

	/* if user specifiec header texture, than use transparent menu hover style */
	/* check if the header texture is enabled and if there is one uploaded */
	 /* if not - use slightly darker color */
		background-color: #fdfdfd !important;
	 
	
	
	/* Custom Main Menu Option */
			/* gradient behind the menu title */
		background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
		background-image: -moz-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
		background-image: -o-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
		background-image: -ms-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
		background-image: linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
				
}


/* currently active menu or submenu item */
.current-menu-item a, .current-page-parent a {
	/* the bottom border of current menu item will have a softer version of main theme color */
	border-bottom: 3px solid rgba(255,255,255,0.4) !important;
}
.sub-menu a {border-bottom: none !important;}	/* the dropdown menu items won't have the bottom border while parent menu item is active, only while hover */

/* submenu dynamic borders */
ul.sub-menu {
	border-left: 3px solid rgba(255,255,255,0.7) !important;
	border-bottom: 3px solid rgba(255,255,255,0.5) !important;
}

/* submenu dynamic background */
.nav li ul.sub-menu li, .nav li ul.children li {
	background: rgba(255,255,255,0.02);
}


/* ------------------- */
/* Thin Menu Variation */
/* ------------------- */

.menu-thin, .menu-thin-centered {
	border-top: 1px solid rgba(255,255,255,0.15);
}

/* menu links style */
.menu-thin .nav li a:hover, .menu-thin .nav li a:focus, .menu-thin-centered .nav li a:hover, .menu-thin-centered .nav li a:focus {
	border-top: 1px solid #FFFFFF !important;
	border-bottom: 1px solid #FFFFFF !important;	
	
	/* animate hover & release */
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.menu-thin .current-menu-item a, .menu-thin-centered .current-menu-item a, .menu-thin .current-page-parent a, .menu-thin-centered .current-page-parent a {
	border-bottom-width: 2px !important;
	border-top: 1px solid rgba(255,255,255,0.35) !important;
}


.bones_page_navi li.bpn-current {
	border-bottom-color: #FFFFFF !important;
}


/*********************
08. POSTS & CONTENT STYLES
*********************/

/* used for post titles */
.title, .page-title, .wpb_heading {
	padding-left: 20px !important;

	/* making up the background created in photoshop using CSS3 gradients, including transparency */	
	background-image: #b0d397;
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
}


.title:hover, .page-title:hover, .wpb_heading:hover {
	/* make the background a bit darker while hovering */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.2) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.2) 21%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.2) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.2) 21%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.2) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.2) 21%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.2) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.2) 21%);
	background-image: linear-gradient(bottom, rgba(255,255,255,0.2) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.2) 21%);
}




/* widget titles will have slightly brighter background */
.widgettitle  {
	padding-left: 20px !important;

	/* making up the background created in photoshop using CSS3 gradients, including transparency */	
	background-image: #b0d397;
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.10) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.10) 21%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.10) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.10) 21%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.10) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.10) 21%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.10) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.10) 21%);
	background-image: linear-gradient(bottom, rgba(255,255,255,0.10) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.10) 21%);
}

.widgettitle:hover {
	/* make the background a bit darker while hovering */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);
	background-image: linear-gradient(bottom, rgba(255,255,255,0.15) 14%, #ffffff 15%, #ffffff 20%, rgba(255,255,255,0.15) 21%);

}


/* dynamic drop shadow for the main content part */
#inner-content {
/* check theme options */
			/* same drop shadow as for top menu */
		-moz-box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
		-webkit-box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
		box-shadow: 0px 2px 5px 1px rgba(255,255,255,0.33);
		
	/* 20px top & bottom margin for the main content option */
			margin-top: 20px;
		margin-bottom: 20px;
	}


/* ------------------------------ */		
/* Page Title & Breadcrumbs style */
#title-breadcrumbs {
	background-image: url();
	
			background-repeat: no-repeat;
		background-position: center top;	
	}


/* Archive style */
.byline {
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.byline:hover {
	border-bottom: 1px solid rgba(255,255,255,0.2);	
}

.byline:hover a, .byline a:hover {
	color: #FFFFFF !important;
}



/* ------------------------------ */
/* Visual Composer Harmony Styles */
/* ------------------------------ */
.teaser_grid_container a img, .featured-image {
	border: 5px solid rgba(255,255,255,0.1); !important;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;				
}

.teaser_grid_container a img:hover, .featured-image:hover {
	box-shadow: 0px 10px 8px #ededed;				
	border: 5px solid rgba(255,255,255,0.4); !important;
	border-radius: 0px;	
}

/* Elements */

/* Call To Action */
.wpb_call_to_action {
	/* add box shadow */
	box-shadow: 0px 1px 1px #ccc;
}

/* Tabs */
.wpb_content_element div.ui-tabs .ui-tabs-nav li {
	background-color: rgba(255,255,255,0.03);
	/* prepare the borders */
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-top: 3px solid transparent;
	/* shadow */
	box-shadow: 0px 1px 1px #ccc;
}

/* currently active tab style */
.wpb_content_element div.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background-color: white;
	border-top: 3px solid #FFFFFF;
	border-left: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	/* no shadow */
	box-shadow: none;
}

/* the tabs content container */
.ui-tabs-panel {
	border: 1px solid #eaeaea !important;
	box-shadow: 0px 1px 1px #ccc;
}

/* Accordion */
.wpb_content_element .ui-accordion .ui-accordion-header {
	background-color: rgba(255,255,255,0.03);
}

.ui-accordion-content-active {
	border: 2px solid rgba(255,255,255,0.03) !important;
}

/* Tabs & Accordion hover */
.wpb_content_element .ui-tabs .ui-tabs-nav li:hover,
.wpb_content_element .ui-accordion .ui-accordion-header:hover {
	background-color: rgba(255,255,255,0.06);
}



/* Tour Section styles */
.wpb_tour .wpb_wrapper ul li.ui-state-default {
	border-left: 1px solid #EAEAEA !important;
	border-top: none !important;
	border-bottom: none !important;
	border-right: none !important;
	box-shadow: 0px 0px 1px #ccc !important;
}

.wpb_tour .wpb_wrapper ul li.ui-state-default:hover {
	border-left: 10px solid #FFFFFF !important;
}

.wpb_tour .wpb_wrapper ul li.ui-state-active {
	border-left: 10px solid #FFFFFF !important;
	box-shadow: 0px 0px 1px #ccc !important;
}


/* disable overall border and shadow for the tour section content */
.wpb_tour .wpb_wrapper .ui-tabs-panel {
	border: none !important;
	box-shadow: none !important;
	
	/* custom left side border */
	border-left: 8px solid rgba(255,255,255,0.1) !important;
	
	/* custom background color and padding */
	background-color: rgba(255,255,255,0.05);
	padding: 10px !important;
}




/*********************
09. PAGE NAVI STYLES
*********************/

/******************************************************************
10. COMMENT STYLES
******************************************************************/

/******************************************************************
11. COMMENT FORM STYLES
******************************************************************/


/*********************
12. SIDEBARS & ASIDES
*********************/

/* the negative margins will be enabled only if the user turns on the switch in the theme options panel */
/* I won't comment here for each class, because each one uses the same technique - if the option switch is turned on than enable negative margins */
.title, .page-title {
			margin: 0px 0px 0px -10px !important;
	}

.widgettitle {
			margin: 0px -10px 14px 0px !important;	
	}

/* Some advanced CSS selecting, used to determine the margin for Content Builder headers */
.wpb_row .wpb_column:first-child .wpb_heading {	
			margin-left: -10px !important;	
	}

.wpb_row .wpb_column:last-child .wpb_heading {	
			margin-right: -10px !important;	
	}


.wpb_wrapper div.widget .widgettitle {
	margin-bottom: 10px !important;
}

.wpb_wrapper h4.widgettitle {
	margin: 0px 0px !important;
}


.wpb_row .wpb_column:first-child h4.widgettitle {
			margin-left: -10px !important;
	}

.wpb_row .wpb_column:last-child h4.widgettitle {
			margin-right: -10px !important;
	}


/******************************
13. FOOTER & FOOTER MENU STYLES
*******************************/

#gradient-footer {
	/* we need to have color with opacity over an image, thats why we need gradient (it's handled as image) */
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -o-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	background-image: linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url();
	/* fallback solution */
	background-color: rgba(255,255,255, 0.6);

}

#inner-footer ul.nav li a {
	border-top: 6px solid transparent;
}

/* top menu styles customizations for footer menu */
#inner-footer ul.nav li.current-menu-item a {
	/* the bottom border of current menu item will have a softer version of main theme color */
	border-top: 6px solid rgba(255,255,255,0.4) ;
	border-bottom: none !important;
}

#inner-footer ul.nav li a:hover, #inner-footer ul.nav li a:focus {
	border-top: 6px solid #FFFFFF ;
	border-bottom: none !important;
	background: none;
	background-color: transparent !important;
}


.sub-menu a {border-bottom: none !important;}	/* the dropdown menu items won't have the bottom border while parent menu item is active, only while hover */



/* -------------------------------------------- */
/* Include The Custom CSS From The Option Panel */


/* -------------------------------------------- */


/* -------------------------------------------------------------- */
/* ------------------ DYNAMIC MOBILE STYLES --------------------- */

/* 480px wide and less */
@media only screen and (max-width: 480px) {
	/* Fill the heading background with a solid color instead of a gradient */
	/* The gradient looks strange if the heading is very long and takes more than one line on the mobile phone */
	.title, .page-title, .wpb_heading, .widgettitle {
		background: rgba(255,255,255,0.15) !important;
	}
	
	/* The hover effect isn't actually necessary on mobile devices, but I did it anyway */
	.title:hover, .page-title:hover, .wpb_heading:hover, .widgettitle:hover {
		background: rgba(255,255,255,0.2) !important;
	}

}