/* = BRANDING.CSS

*** TABLE OF CONTENTS 

1.	Fonts Families
2.	Site Defaults
3.	Text Colors
4.	Background Colors
5.	Buttons
6.	Common Borders
7.	Form Elements
8.	Common Element Styles
9.	Main Menu

*** NOTES

1.	EVERYTHING in this file can and most likely should be edited
2.	To be edited with the aid of a branding guidline provided by the designer
3.	Additional styles can be added in this file but ONLY to existing selectors. New selectors need to go into custom.css

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




/* = Fonts Families
-------------------------------------------------------------- */

/*** Example Font Usage - Delete after use ***/
/* NOTE - This example uses two distinct fonts  for 'normal' and 'bold' weights */


@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Regular.ttf') format('trueType');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Bold.ttf') format('trueType');
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Hind';
	src: url('../fonts/Hind-Regular.ttf') format('trueType');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Hind';
	src: url('../fonts/Hind-Bold.ttf') format('trueType');
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
} 

@font-face {
	font-family: 'Neuton';
	src: url('../fonts/Neuton-Regular.ttf') format('trueType');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Neuton';
	src: url('../fonts/Neuton-Bold.ttf') format('trueType');
	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

html body .open-sans { font-family: 'Open Sans',Arial,Helvetica,sans-serif; }
html body .hind { font-family: 'Hind', sans-serif; }
html body .neuton { font-family: 'Neuton', sans-serif; }
html body .arial { font-family: Arial,Helvetica,sans-serif; }

/* = Site Defaults
-------------------------------------------------------------- */

body { font-family: 'Open Sans',Arial,Helvetica,sans-serif; }

/*** Default Heading Styles - can be overwritten individually & are not affected by 'strong', 'b' or 'a' styles ***/
/* NOTE - Do not change margin or font size unless you know EXACTLY how it will affect the spacing as a whole */


legend,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin-top: -0.375em;
	font-family: 'Neuton', sans-serif;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.h1 strong, .h2 strong, .h3 strong, .h4 strong, .h5 strong, .h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
.h1 b, .h2 b, .h3 b, .h4 b, .h5 b, .h6 b {
	font-weight: normal;
}

h1, html .h1 {
	font-size: 2.2em;
	margin-bottom: 0.8em;
	font-weight:bold;
	clear:both;	
}

h2, html .h2 {
	font-size: 1.8em;
	margin-bottom: 1em;
}
legend,
h3, html .h3 {
	font-size: 1.6em;
	margin-bottom: 1.2em;
}
h4, html .h4 {
	font-size: 1.4em;
	margin-bottom: 1.4em;
}
h5, html .h5 {
	font-size: 1.2em;
	margin-bottom: 1.6em;
}
h6, html .h6 {
	font-size: 1em;
	font-weight:bold;
	margin-bottom: 1.8em;
}

h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { color: #AFAFAF; font-weight: normal; }
h1 .small, h2 .small, h3 .small, .h1 .small, .h2 .small, .h3 .small { font-size: 0.65em; }
h4 .small, h5 .small, h6 .small, .h4 .small, .h5 .small, .h6 .small { font-size: 0.75em; }


/* = Text Colors
-------------------------------------------------------------- */

/*** Heading colour ***/

legend,
h1, .h1, h1 strong, .h1 strong, h1 b, .h1 b, h1 a, .h1 a,
h2, .h2, h2 strong, .h2 strong, h2 b, .h2 b, h2 a, .h2 a,
h3, .h3, h3 strong, .h3 strong, h3 b, .h3 b, h3 a, .h3 a,
h4, .h4, h4 strong, .h4 strong, h4 b, .h4 b, h4 a, .h4 a,
h5, .h5, h5 strong, .h5 strong, h5 b, .h5 b, h5 a, .h5 a,
h6, .h6, h6 strong, .h6 strong, h6 b, .h6 b, h6 a, .h6 a,
html .heading-text-color, html .heading-text-color a, html [class*="-text-color"] .heading-text-color, html [class*="-text-color"] .heading-text-color a {
	color: #55534F;
}

/*** Main content text color ***/
body, html .default-text-color, html .default-text-color a, html [class*="-text-color"] .default-text-color, html [class*="-text-color"] .default-text-color a {
	color: #55534F;
}

/*** Bold text color (usually darker than main text color) ***/
html blockquote, strong, dt, html .strong-text-color, html .strong-text-color a, html [class*="-text-color"] .strong-text-color, html [class*="-text-color"] .strong-text-color a {
	color: #555555;
}

/*** Secondary text color (usually lighter than main text color) ***/
html .tag-line, code, kbd, samp, pre, html .secondary-text-color, html .secondary-text-color a, html [class*="-text-color"] .secondary-text-color, html [class*="-text-color"] .secondary-text-color a,
.sidebar .esp-sub-menu li a, .sidebar .widget_nav_menu li a, .sidebar .esp-display-terms-widget li a {
	color: #60BCC2;
}

/*** Highlight color (usually more colorful than body text) ***/
/* NOTE - This class is optional and may not appear in some designs */
html .highlight-text-color, html .highlight-text-color a, html [class*="-text-color"] .highlight-text-color, html [class*="-text-color"] .highlight-text-color a, .highlight-hover-text-color:hover, .highlight-hover-text-color:hover * {
	color: #EB870F;
}

/***  link text colour - usually more colorful than body text ***/
a, html .link-text-color, html .link-text-color a, html [class*="-text-color"] .link-text-color, html [class*="-text-color"] .link-text-color a,
.sidebar .widget_nav_menu li.current-menu-item > a, .sidebar .esp-sub-menu > ul li.current-menu-item > a, .sidebar .esp-display-terms-widget li li.current-menu-item > a, .esp-sub-menu li:hover a {
	color: #379096;
}
a:hover, html .link-text-color, html .link-text-color a:hover, html [class*="-text-color"] .link-text-color, html [class*="-text-color"] .link-text-color a:hover, .sidebar .widget_nav_menu li.current-menu-item > a:hover, .sidebar .esp-sub-menu > ul li.current-menu-item > a:hover, .sidebar .esp-display-terms-widget li li.current-menu-item > a:hover, .esp-sub-menu li:hover a:hover {
	color: #60BCC2;
}


.esp-social-icon * {
	transition: all 0.2s ease-out;
}
.esp-social-icon:hover * {
	color: #518D93;
}

.white-text * {
	color: #fff;
}

/* DROP ARROWS */

.drop-arrow:after {
    right: 25px;
    transform: rotate(45deg);
}
.drop-arrow:before {
    right: 19px;
    transform: rotate(-45deg);
}

.active.drop-arrow:after {
    transform: rotate(-45deg);
}
.active.drop-arrow:before {
    transform: rotate(45deg);
}
.drop-arrow:hover:after, .drop-arrow:hover:before { 
	background-color: #364156;
}

.drop-arrow:after, .drop-arrow:before {
    background-color: #fff;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
	z-index: 2;
    transition: all 0.25s ease-in-out 0s;
    width: 10px;
}


/*** FANCY LINKS ***/
/*
#content-spacing a {
	background: linear-gradient(#fff, #fff) no-repeat scroll 0 95% / 0.05em 1px, linear-gradient(#fff, #fff) no-repeat scroll 100% 95% / 0.05em 1px, rgba(0, 0, 0, 0) linear-gradient(#0E76BD, #0E76BD) repeat-x scroll 0 95% / 1px 1px;
	text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
}
*/

/* = Menus
-------------------------------------------------------------- */
/*Tablet and Down*/
@media all and (max-width: 1024px) {
	
	.main-menu.nav-menu {margin-bottom:0px;}
	
	/*** Main Menu Colors ***/
	
	/* Main menu nav link  */
	.main-menu.nav-menu li a,
	.main-menu.nav-menu li.current-page-ancestor > a, .main-menu.nav-menu > li.current-menu-ancestor > a { color: #6a6a6a;}
	/* Main menu nav link : hover styles */
	.main-menu.nav-menu li a:hover,
	.main-menu.nav-menu li.current-page-ancestor > a:hover, .main-menu.nav-menu > li.current-menu-ancestor > a:hover { color: #355D68; }
	/* Main menu nav link parent and ancestor styles */
	.main-menu.nav-menu li.current-menu-item > a, .main-menu.nav-menu li.current-page-ancestor > a, .main-menu.nav-menu li.current-page-ancestor > a:hover, .main-menu.nav-menu > li.current-menu-ancestor > a, .main-menu.nav-menu > li.current-menu-ancestor > a:hover { color: #355D68; }
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    background-color: #FFF;
    height: 2px;
}

/*Desktop Only*/
@media all and (min-width: 1025px) {

	/*** Main Menu Colors ***/
	
	/* Main menu nav link  */
	.main-menu.nav-menu li a,
	.main-menu.nav-menu li.current-page-ancestor > a, .main-menu.nav-menu > li.current-menu-ancestor > a { color: #fff; }
	/* Main menu nav link : hover styles */
	.main-menu.nav-menu li a:hover,
	.main-menu.nav-menu li.current-page-ancestor > a:hover, .main-menu.nav-menu > li.current-menu-ancestor > a:hover {}
	/* Main menu nav link parent and ancestor styles */
	.main-menu.nav-menu li.current-menu-item > a, .main-menu.nav-menu li.current-page-ancestor > a, .main-menu.nav-menu li.current-page-ancestor > a:hover, .main-menu.nav-menu > li.current-menu-ancestor > a, .main-menu.nav-menu > li.current-menu-ancestor > a:hover { color: #fff;  }
	
	/*** Main Menu Spacing / Sizing ***/
	.main-menu li { margin: 0 25px 0 0; }
	.main-menu li a { padding: 0px 0; }
	
	#menu-footer-menu li { margin: 0 20px 0 0; padding: 0px 0;  }
	
	#menu-footer-menu li > a::after, .main-menu.nav-menu li > a::after {
		position: absolute;
		content: "";
		display: block;
		width: 0;
		height: 1px;
		left: 0px;
		background-color: #fff;
		transition: width 0.2s ease-out 0s;
		margin-top: 2px;
		pointer-events: none;
	}
	
	.main-menu.nav-menu > li:hover > a::after, #menu-footer-menu > li:hover > a::after, .main-menu.nav-menu > li.current-page-ancestor > a:after, .main-menu.nav-menu li.current_page_item > a:after, .main-menu.nav-menu .current-menu-parent > a:after, .main-menu.nav-menu > li .sub-menu > li:hover > a::after {
		width: 100%
	}
	.menu-item > a {
		position: relative;
	}

}
@media all and (min-width: 1025px) {
	.desktop-justify-menu .nav-menu li a {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/*** Sidebar ***/
body .sidebar .esp-sub-menu li a,
body .sidebar .widget_nav_menu li a,
body .sidebar .esp-display-terms-widget li a {

}
body .sidebar .widget_nav_menu li.current-menu-item > a,
body .sidebar .esp-sub-menu > ul li.current-menu-item > a,
body .sidebar .esp-display-terms-widget li li.current-menu-item > a {

}

/* Breadcrumbs */

.breadcrumbs-full {border-bottom-style:full;} /* Full width border*/
.breadcrumbs {border-bottom-style:none;} /* Content width border */


/*** Magic Line Styles ***/
.magic-line {height: 3px; background: #333;}


/* = Background Colors
-------------------------------------------------------------- */
.primary-hover-bg {
	transition: all 0.2s ease-out;
}
.primary-hover-bg:hover {
	background-color:#c9740d;
}
.secondary-hover-bg {
	transition: all 0.2s ease-out;
}
.secondary-hover-bg:hover {
	background-color:#55534F;
}
.tertiary-hover-bg {
	transition: all 0.2s ease-out;
}
.tertiary-hover-bg:hover {
	background-color:#518D93;
}
.light-grey-hover-bg {
	transition: all 0.2s ease-out;
}
.light-grey-hover-bg:hover {
	background-color:#f5f5f9;
}
.dark-grey-hover-bg {
	transition: all 0.2s ease-out;
}
.dark-grey-hover-bg:hover {
	background-color:#e1e1e1;
}

.primary-bg { background-color:#EB870F; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-primary-bg { background-color:#EB870F; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-primary-bg { background-color:#EB870F; } }
@media (max-width: 767px) { body .mobile-primary-bg { background-color:#EB870F; } }

.secondary-bg { background-color:#55534F; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-secondary-bg { background-color:#55534F; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-secondary-bg { background-color:#55534F; } }
@media (max-width: 767px) { body .mobile-secondary-bg { background-color:#55534F; } }

.tertiary-bg { background-color:#518D93; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-tertiary-bg { background-color:#518D93; }}
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-tertiary-bg { background-color:#518D93; }}
@media (max-width: 767px) { body .mobile-tertiary-bg { background-color:#518D93; }}

.white-bg { background-color:#FFFFFF; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-white-bg { background-color:#FFFFFF; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-white-bg { background-color:#FFFFFF; } }
@media (max-width: 767px) { body .mobile-white-bg { background-color:#FFFFFF; } }

.light-grey-bg { background-color:#f5f5f9; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-light-grey-bg { background-color:#f5f5f9; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-light-grey-bg { background-color:#f5f5f9; } }
@media (max-width: 767px) { body .mobile-light-grey-bg { background-color:#f5f5f9; } }

.dark-grey-bg { background-color:#e1e1e1; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-dark-grey-bg { background-color:#e1e1e1; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-dark-grey-bg { background-color:#e1e1e1; } }
@media (max-width: 767px) { body .mobile-dark-grey-bg { background-color:#e1e1e1; } }

.transparent-bg { background-color:transparent; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-transparent-bg { background-color:transparent; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-transparent-bg { background-color:transparent; } }
@media (max-width: 767px) { body .mobile-transparent-bg { background-color:transparent; } }

.above-header-bg { background-color:#11151C; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-above-header-bg { background-color:#11151C; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-above-header-bg { background-color:#11151C; } }
@media (max-width: 767px) { body .mobile-above-header-bg { background-color:#11151C; } }

.below-header-bg { background-color:#535F75; }
/* SAME AS ABOVE */
@media all and (min-width: 1025px) { body .desktop-below-header-bg { background-color:#535F75; } }
@media all and (min-width: 768px) and (max-width: 1024px) { body .tablet-below-header-bg { background-color:#535F75; } }
@media (max-width: 767px) { body .mobile-below-header-bg { background-color:#535F75; } }

/* Selection Colour */
/*
::selection,
::selection{text-shadow:none; background:#3399FF; color:#FFF;}
::-moz-selection{text-shadow:none; background:#3399FF; color:#FFF;}
::-moz-selection{text-shadow:none; background:#3399FF; color:#FFF;}

.dark-background ::selection,
.dark-background ::selection{background:#FFF; color:#3399FF;}
.dark-background ::-moz-selection{background:#FFF; color:#3399FF;}
.dark-background ::-moz-selection{background:#FFF; color:#3399FF;}
*/

/* = Buttons
-------------------------------------------------------------- */

html body #esp-site-wrap .button.disabled,
html body #esp-site-wrap .button:disabled,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
input[type="submit"], input[type="button"], input[type="reset"], .button, button {
	padding:16px 30px;
	color:#FFFFFF;
	border-style:solid;
	border-width:2px;
	border-radius: 0px;
	font-size: 1.1em;
	font-weight:normal;
}

/*** Button Sizes ***/
/* Usable Classes  : button-small, button-regular , button-large , button-full  */
/* NOTE - You can overwrite the border-radius of any of the button sizes with the following classes: .rounded-small | .rounded-regular | .rounded-large */
/* Example Usage : button button-small rounded-large */

html body #esp-site-wrap .button.button-small.disabled,
html body #esp-site-wrap .button.button-small:disabled,
.woocommerce .checkout_coupon .form-row-last .button,
#esp-site-wrap table .button,
html body .button-small {
	padding:13px 19px;
}

html body .rounded-small {
	border-radius: 3px;	
}

html body .button-regular {
	padding:16px 29px;
}

html body .rounded-regular {
	border-radius: 5px;
}

html body .button-large {
	padding:19px 44px;
}

html body .rounded-large {
	border-radius: 7px;
}

html body .button-round {
    border-radius: 50px;
}

html body .button-round {
    border-radius: 0px;
}


/*============= Button - Primary Color =============*/
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
input[type="submit"], input[type="button"], input[type="reset"], .button, button {
	background-color:#eb870f;
	border-color:#eb870f;
	color: #fff;
	border-radius: 20px;
	font-weight: bold;
}

/*** Button - Primary Color Hover ***/

woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .button:hover, button:hover, html body .button-hollow:hover {
	color: #eb870f;
	background-color: #fff;
	border-color:#eb870f;
}

/*** Button - Hollow ***/
/* Usable Classes : button-hollow  */
/* Example Usage : button button-hollow  */

html .button-hollow {
	background:none;
	color:#364156; /* IN MOST CASES THIS IS THE SAME AS THE PRIMARY BACKGROUND COLOR */
}

html .button-hollow:hover {
	color:#364156;
}

/*** Button - Hollow on Hover ***/
/* Usable Classes : button-hollow-hover */
/* Example Usage : button button-hollow-hover  */

html .button-hollow-hover:hover {
	background:none;
	border-color:#355D68; /* IN MOST CASES THIS IS THE SAME AS THE PRIMARY BACKGROUND COLOR HOVER */
	color:#355D68; /* IN MOST CASES THIS IS THE SAME AS THE PRIMARY BACKGROUND COLOR HOVER */
}


/*============= Button - Secondary Color =============*/

/* Class Usage  : button-hollow button-secondary-color  */

#esp-site-wrap .woocommerce input#submit.alt,
#esp-site-wrap .woocommerce .button.alt,
html body .button-secondary-color {
	background-color:#518D93;
	border-color:#518D93;	
	font-weight: bold;	
}

#esp-site-wrap .woocommerce input#submit.alt:hover,
#esp-site-wrap .woocommerce .button.alt:hover,
html .button-secondary-color:hover, html body .button-hollow:hover.button-secondary-color {
	color: #518D93;
	background-color:#fff; 
	border-color:#518D93;	
}

/*** Button - Hollow ***/
/* Usable Classes : button-hollow  */
/* Example Usage : button button-secondary-color button-hollow  */

html .button-hollow.button-secondary-color {
	background:none;
	color:#364156; /* IN MOST CASES THIS IS THE SAME AS THE SECONDARY BACKGROUND COLOR */
}

html .button-hollow:hover.button-secondary-color {
	color:#FFFFFF;	
}

/*** Button - Hollow on Hover ***/
/* Usable Classes : button-hollow-hover */
/* Example Usage : button button-secondary-color button-hollow-hover  */

html .button-hollow-hover.button-secondary-color:hover {
	background:none;
	border-color:#FFAD04; /* IN MOST CASES THIS IS THE SAME AS THE SECONDARY BACKGROUND COLOR HOVER */
	color:#FFAD04; /* IN MOST CASES THIS IS THE SAME AS THE SECONDARY BACKGROUND COLOR HOVER */
}

/* Disabled Button */

html body #esp-site-wrap .button.disabled,
html body #esp-site-wrap .button:disabled {
	background-color: #bbb!important;
	border-color: #bbb!important;
	color: #FFF!important;
	opacity:1!important;
}

.woocommerce .woocommerce-message .button {background-color:#FFF; border-color:#FFF;}

/* Dark Background Buttons */

html body .dark-background .button {
	transition: all 0.2s ease-out;
	background-color:transparent;
	color: #FFFFFF;
	border-color: #FFFFFF;
}
html body .dark-background .button:hover { 
	background-color: #55534F;
	color: #FFFFFF;
	border-color: #55534F;
}
/* = Alerts
-------------------------------------------------------------- */

.woocommerce-password-strength,
div[class*="alert-"],
html .woocommerce-error,
html .woocommerce-info,
html .woocommerce-message {
	font-family: inherit;
}

div[class*="alert-"] a,
html .woocommerce-error a,
html .woocommerce-info a,
html .woocommerce-message a {
	border-bottom:1px dotted;
}

/* ESP Succcess + Woo Message + Woo Validated Field */ 
html .woocommerce form .form-row.woocommerce-validated .select2-container, html .woocommerce form .form-row.woocommerce-validated input.input-text, html .woocommerce form .form-row.woocommerce-validated select,
.alert-success, html .woocommerce-message { background-color: #DFF0D8;	border-color: #DFF0D8; }
html .alert-success, html .alert-success *, .alert-success > label,
html .woocommerce-message, html .woocommerce-message * { color: #3C763D!important; }
html html .alert-success a, html .woocommerce-message a { color: #3C763D!important; }

/* ESP Info + Woo Info */ 
div.alert-info, html .woocommerce-info { background-color: #D9EDF7; border-color: #D9EDF7; }
html .alert-info, html .alert-info *, .alert-info > label,
html .woocommerce-info, html .woocommerce-info * { color: #31708F!important; }
html html .alert-info a, html .woocommerce-info a { color: #31708F!important; }

/* ESP Warning (no Woo) */ 
div.alert-warning {	background-color: #FCF8E3; border-color: #FCF8E3; }
html .alert-warning, html .alert-warning *, .alert-warning > label  { color: #8A6D3B!important; }
html html .alert-warning a { color: #8A6D3B!important; }

/* ESP Error + Woo Error + Woo Validate Field Error */ 
html .woocommerce form .form-row.woocommerce-invalid .select2-container, html .woocommerce form .form-row.woocommerce-invalid input.input-text, html .woocommerce form .form-row.woocommerce-invalid select,
div.alert-error, html .woocommerce-error { background-color: #F2DEDE; border-color: #F2DEDE; }
html .alert-error, html .alert-error *, .alert-error > label, .alert-error > label .required-marker,
html .woocommerce-error, html .woocommerce-error *, html .woocommerce form .form-row abbr.required { color: #A94442!important; }
html html .alert-error a, html .woocommerce-error a { color: #A94442!important; }

.woocommerce-password-strength,
[class*="alert-"],
[class*="alert-"].form-field,
[class*="alert-"], html .woocommerce-error, html .woocommerce-info, html .woocommerce-message { padding:15px 20px; text-align: inherit; }

html body .esp-form-hide-completed.has-errors .esp-form-remove-has-errors {
	display:none!important;
}

.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email, .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone {
	margin: 0.5em 0;
	padding-left: 1.5em;
}


/* = Images
-------------------------------------------------------------- */
/*
.loop img { border-radius: 3px; }

figure.wp-caption img {	border-radius: 3px 3px 0 0; }

.wp-caption-text-inner {
	background-color: #454545;
	color: #ffffff;
	border-radius: 0 0 3px 3px;
} */

.loop img { border-radius: 0; }


/* = Common Borders
-------------------------------------------------------------- */


/*** Commom Border Color - separate if need be ***/

html body #esp-site-wrap .woocommerce table th, html body #esp-site-wrap .woocommerce table td,
fieldset, pre, table td, table th, .table-responsive, .responsive-table-wrap, .loop article, .pagination-wrap, .comment-content, .breadcrumbs, .breadcrumbs-full, .common-border-color {
	border-color: rgba(0, 0, 0, 0.2);
    border-width: 1px;
}

/*** Common Border Radius - separate if need be ***/

code, kbd, pre, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select {
	border-radius: 0px;	
}




/* = Form Elements
-------------------------------------------------------------- */

/*Common Form Elements - Border Color */
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select {
	background-color: #FFFFFF;
	color: #757575;
	border:1px solid #CCC;
}


/*Common Form Elements - Border Color : Hover */
textarea:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="date"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, input[type="number"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="color"]:hover, select:hover {
	border-color:#9F9F9F;
} 


/*Common Form Elements - Border Color : Focus */
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, select:focus {
	border-color:#757575;
}


/*** Fancy Checkboxes & Radios ***/

/* Unchecked Border Color */
.form-field-checkbox input:checked + label:before, .form-field-checkbox input:not(checked) + label:before, .form-field-radio input:checked + label:before, .form-field-radio input:not(checked) + label:before {
	border:2px solid #DDD;
}

/* Unchecked Border : hover + : focus Color */
.form-field-checkbox input:hover:not(checked) + label:before, .form-field-radio input:hover:not(checked) + label:before, .form-field-checkbox input:focus:not(checked) + label:before, .form-field-radio input:focus:not(checked) + label:before {
	border-color:#CCC;
}

/* Checked Border Color */
.form-field-checkbox input:checked + label:before, .form-field-checkbox input:hover:checked + label:before, .form-field-radio input:checked + label:before, .form-field-radio input:hover:checked + label:before {
	border-color:#4483D0!important;
}

/* Checked Tick Color (checkbox) */
body .form-field-checkbox input:checked + label:after {
	border-color: #4FA4DD;
}

/* Checked Circle Color (radio) */
.form-field-radio input:not(checked) + label:after,
.form-field-radio input:checked + label:after {
	background-color: #4FA4DD;
}


/* Shadows */

.box-shadow {
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15);
    position: relative;
}
.floated-box-shadow {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.floated-box-shadow:hover, .floated-box-shadow:hover + .floated-box-shaddow, .floated-box-shadow:hover + .floated-box-shadow {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}



/* = Common Element Styles
-------------------------------------------------------------- */


/*** Tables ***/

table th {
	color: #333333;
	background-color:#EEEEEE;
}

.table-striped tr:nth-of-type(odd) {
	background-color: #f9f9f9;
}


/***  Blockquotes ***/

body blockquote {
	font-size:1.375em;
	text-align: center;
}

/*Desktop Only*/
@media all and (min-width: 1025px) {
	body blockquote {
		font-size:1.75em;
	}
}

blockquote em:before { content: "- "; }

blockquote em {
    font-size: 0.85em;
	font-style:normal;
}

/* First P in Main Content */
html body .leading-text > p:first-child {
	font-size:1.2em;
}

/* CSS COLUMNS */

[class*="column-css"] {
	/* column-rule: 1px solid rgba(0, 0, 0, 0.2); */
	column-rule: none;
}

/* Default Separators */

.sep-single {
    display: block;
    background-color: #000;
    height: 2px;
}
	
.sep-single.sep-small {
    width: 10px;
}
	
.sep-single.sep-large {
    width: 25px;
}

.sep-single.sep-thin {
    height: 1px;
}
  
.dark-background .sep-single  {
    background-color: #fff;
}

/* SEP COLOURS */

.sep-single.sep-primary { background-color:#EB870F; }
.sep-single.sep-secondary { background-color:#55534F; }
.sep-single.sep-tertiary { background-color:#518D93; }
.sep-single.sep-white { background-color:#FFF; }
.sep-single.sep-black { background-color:#000; }


/* Fixed News Modal Animations - Can Be Left */

.fixed-news-modal {
	opacity: 0;
	transition: opacity 0.2s ease-out 0s, visibility 0s ease-out 0.2s;
}
.fixed-news-modal.visible {
	opacity: 1;
	transition: opacity 0.2s ease-out 0s, visibility 0s ease-out 0s;
}

/* UI Date Picker */

.ui-datepicker .ui-widget-header {
	background: black none;
	color: #fff;
	font-weight: bold;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	background:white;
}

.ui-datepicker .ui-datepicker-prev .ui-icon { border-right-color: black; }
.ui-datepicker .ui-datepicker-next .ui-icon { border-left-color: black; }

/*** Modals and Shifts ***/

/* Shift */
body .shift-container-background {
	background:#FFF;
	opacity: 0.9;
}

.esp-close-button { border:2px solid #000; }
.esp-close-button:hover { background-color:#000; }

.esp-close-button-inner:before,
.esp-close-button-inner:after { 	
	background-color: #000;
}
.esp-close-button:hover .esp-close-button-inner:before,
.esp-close-button:hover .esp-close-button-inner:after {
	background-color: #FFF;
}

/* Shift Animations - Can Be Left */

.shift-container {
    right: 0;
    transform: translateX(100%);
    transition: transform 0.8s ease 0s;
}
.shift-container.shift-left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}
.shift-overlay.shift-active .shift-container {
    transform: translateX(0%);
}

/* = Unique Site Styles - NOW IN CUSTOM.CSS
-------------------------------------------------------------- */