/*
Theme Name: Seja Framework Version 3.6
Description: Customise styles - This is where you style your theme. 
This style sheet should load last (although some plugins may load later), so anything 
written here *should* be final, without the need for the !important call. 
*/

body {	
	background:#362728;
	font-size:20px;
	--menu-bg:#fff;
	--menu-hover-bg:#fff;
	--menu-parent:#78161a;
	--menu-child:#78161a;
	--menu-hover-parent:#168EDF;
	--menu-hover-child: var(--menu-hover-parent);
}

/* FONTS
-------------------------------------------------------------- */
pre,#respond .form-allowed-tags{font-family: "Courier 10 Pitch", Courier, monospace;}
code,kbd {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}

/* FONT COLOURS
-------------------------------------------------------------- */
.highlight {color:var(--theme-colour);}
input,textarea,.category-title,.archive h1.page-title {color:var(--theme-colour);}
.alt-colour {color:#00f;}

/* current menu page colour */
#seja-framework-menu ul li.current_page_item > a,#seja-framework-menu ul li.current-menu-ancestor > a,#seja-framework-menu ul li.current-menu-item > a,#seja-framework-menu ul li.current-menu-parent > a {color: #fff;}
/* light colour */
.entry-meta,.entry-meta a:link,.entry-meta a:visited,.entry-utility,.entry-utility a:link,.entry-utility a:visited,.navigation a:link,.navigation a:visited,p.logged-in-as,p.logged-in-as a:link,p.logged-in-as a:visited,p.form-allowed-tags,p.comment-meta,.comment-meta a:link,.comment-meta a:visited,a.reset_variations{color:#999;}
/* dark colour */

#wp-calendar caption,#wp-calendar tfoot a{color:#fff;}
/*footer widgets*/
#footer-widget-area .widget-title {color:#fff}
#footer-widget-area p,#footer-widget-area ol,#footer-widget-area ul,#footer-widget-area dd,#footer-widget-area pre,#footer-widget-area td {color:#fff;}
#footer-widget-area a:link,#footer-widget-area a:visited {color:#fff;}
#footer-widget-area a:active,#footer-widget-area a:hover{color:#fff;}


/* MAIN BLOCKS - Structure and Colours
-------------------------------------------------------------- */

#header-shell {position:relative;background:#fff}
#header {} /* delete any elements that are not being used */
#top-content-block {background:#fff}
.home .single-column{padding:0 2% 20px;}
#content-shell {font-size: 0.8em;background:#fff;}/* adjusts page font to match old template size */
#content {background:#fff;}
.pre-colophon {padding-top:30px;}

/* HEADER
-------------------------------------------------------------- */ 

.no-bullet {} /* remove the bullet  */
.header-contact { margin-left:20px; float:left; width:500px; max-width:calc(100% - 20px)} /* this is the wrapper for the header contact widget - 500px is recommended but adjust as required*/
.header-contact h3.widget-title {}
.header-img{position: absolute;top:0;}
.header-image .attachment-post-thumbnail{ width: 100%;height: auto;}
@media( max-width: 800px ) {
	.header-img img {
		height:150px;
		width:auto;
	}
}
@media( max-width: 550px ) {
	.header-img img {
		height:100px;
	}
}
.metaslider .flex-control-nav{position:absolute;bottom:15px!important;}


/* NAVIGATION 
-------------------------------------------------------------- */

/* Legacy menu CSS has been removed for all new themes built after v3.6.  */

/* Seja Three */

 /* the var is adjustable in the body tag above, but the first (duplicate) property should remain so this menu displays in Internet Explorer. Do not adjust the colours as the fallback hover and hyperlink colours are not adjustable */
.seja-three > ul > li > a{padding: 17px;font-size: 12px;letter-spacing: 1px;text-decoration: none;color: #dddddd;font-weight: 700;text-transform: uppercase;}
.seja-three ul ul li a{border-bottom: 1px solid rgba(150, 150, 150, 0.15);padding: 11px 15px;width: 170px;font-size: 12px;text-decoration: none;color: #dddddd;font-weight: 400;}
.seja-three > ul > li.has-sub > a:after,.seja-three > ul > li.has-sub > a:before{background: #dddddd;}
@media all and (max-width: 817px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px){
.seja-three{background:#fff;}
.seja-three #menu-button{color: #dddddd;}
}

/* Seja Access */
#nav-access{height:56px;}
.home #nav-access{position:relative;top:-40px;}
.nav-collapse a:hover,.nav-collapse li.focus > a{background-color:#4f4f4f;background-color:var(--menu-hover-bg);}
/* this will eventually be moved to the generated inline styles */
@media screen and (max-width:39.999em){
  #nav-access .nav-collapse .dropdown-toggle{border-color:#fff;color:#fff;background:rgba(0,0,0,0.4);}
  #nav-access .nav-collapse .dropdown-toggle:hover,#nav-access .nav-collapse .dropdown-toggle:focus,#nav-access .nav-collapse .dropdown-toggle:active{background-color:#ccc;color:#333;}
	#seja-framework-menu a{background:#f1f1f1;}
}


/* CONTENT - GENERAL
-------------------------------------------------------------- */

.separator {}
.seja-link-div {background:#f1f1f1;}
p {line-height:2rem;margin-bottom:30px;}/* for more compact designs use this - line-height:1.6em;margin-bottom:18px; */


.cta {
    /*background: url(images/cta-background.jpg) no-repeat 95% 95% #ebebeb;*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 110px 8px 10px;
    margin-top: 100px;
    position: relative;
}
.cta h2, .cta .highlight {
    font-size: 1.2rem;
    font-weight: 500;
}
.cta h3{
    font-size: 1.2rem;
    font-weight:800;
    color:var(--theme-colour);
    margin:0;
}
.cta h2 {
    color: #78161a;
}
.\34 wd-graphic {
    position: absolute;
    top: -120px;
    width: 90%;
    margin: 0 3%;
}

.purchase-link-cta {
    background: #d92027;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.purchase-link-cta:hover {
    background: #cd5459;
}
.purchase-link-cta p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.4rem;
}
.purchase-link-cta a {
    color: #fff;
    font-size: 2.3rem;
}
.purchase-link-cta a:hover {
    color: #fff;
}


.ui-accordion{margin-bottom:18px;}
.ui-accordion .ui-accordion-header{border-top:1px dotted #999;padding:12px 0 8px 30px;background:url(images/accordian-closed.png) no-repeat left center;display:block;width:calc(100% - 42px);color:#444;}
.ui-accordion .ui-accordion-header:hover{color:#BD013B;}
.ui-accordion .ui-state-active{background:url(images/accordian-open.png) no-repeat left center;}
.ui-accordion-content{padding:10px;}
	.accordion dd.final{}
/* CONTENT - FORM
-------------------------------------------------------------- */
/* want larger form elements - wrap the form using .large-form  MAKE A NOTE OF THIS IN THE HELP PAGES*/
input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="file"],input[type="url"],select,textarea { 
	background: #f8f8f8;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
}
input[type="submit"],
a.button,
.wp-block-button{
	color:#fff;
	text-transform:uppercase;
}
input[type="submit"],
a.button,
.wp-block-button__link{
	border: 1px solid rgb(161,174,181);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.calendar_wrap, /* use the same background as the button for the calendar or move it and give it new attributes */
input[type="submit"],a.button,.wp-block-button__link,
.woocommerce #content input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce-page #content input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt	{
background: rgb(217,32,39);
background: -moz-linear-gradient(top,  rgba(217,32,39,1) 0%, rgba(177,24,30,1) 100%);
background: -webkit-linear-gradient(top,  rgba(217,32,39,1) 0%,rgba(177,24,30,1) 100%);
background: linear-gradient(to bottom,  rgba(217,32,39,1) 0%,rgba(177,24,30,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92027', endColorstr='#b1181e',GradientType=0 );
}
input[type="submit"]:hover,a.button:hover,.wp-block-button__link:hover,
.woocommerce #content input.button.alt:hover,.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,.woocommerce-page #respond input#submit.alt:hover,.woocommerce-page a.button.alt:hover,.woocommerce-page button.button.alt:hover,.woocommerce-page input.button.alt:hover {
background: rgb(161,174,181);
background: -moz-linear-gradient(top,  rgba(161,174,181,1) 0%, rgba(143,159,167,1) 100%);
background: -webkit-linear-gradient(top,  rgba(161,174,181,1) 0%,rgba(143,159,167,1) 100%);
background: linear-gradient(to bottom,  rgba(161,174,181,1) 0%,rgba(143,159,167,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1aeb5', endColorstr='#8f9fa7',GradientType=0 );
}
.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt[disabled]:disabled, .woocommerce #respond input#submit.alt[disabled]:disabled:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt[disabled]:disabled, .woocommerce a.button.alt[disabled]:disabled:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt[disabled]:disabled, .woocommerce button.button.alt[disabled]:disabled:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt[disabled]:disabled, .woocommerce input.button.alt[disabled]:disabled:hover {
	background:#bdb7b8;
}
/* widget search submit button */
.widget_search input#searchsubmit {
	-webkit-border-radius: 0 15px 15px 0;
	-moz-border-radius:    0 15px 15px 0;
	border-radius:         0 15px 15px 0;
}
.ui-datepicker-div{font-size:0.75em;} /* if you've changed the font size in body{}, you may want to adjust this */
.ui-datepicker .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#6F4A4C;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#6F4A4C;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:#6F4A4C;
}

/* FOOTER
-------------------------------------------------------------- */

#footer {font-size:0.8em;}
#footer-widget-area p, #footer-widget-area ol, #footer-widget-area ul, #footer-widget-area dd, #footer-widget-area pre, #footer-widget-area td, #home-gallery h3 {
    color: #fff;
}
#footer-widget-area a:link, #footer-widget-area a:visited, #home-gallery a:link, #home-gallery a:visited {
    color: #fff;
}
#footer-widget-area a:active, #footer-widget-area a:hover, #home-gallery a:active, #home-gallery a:hover {
    color: #feefcc;
}

/* WOOCOMMERCE
-------------------------------------------------------------- */

.price span{font-size:1.25em;}/* price size*/
.woocommerce div.product p.price, .woocommerce div.product span.price {color:#8fae1b;}/* pricing colour here */
.woocommerce-message::before {color: #8fae1b;}/* GREEN colour here */
.woocommerce-message {border-top-color: #8fae1b;}/* GREEN border here */
.woocommerce a.remove{color:#f00 !important;}/* RED colour here */
.woocommerce a.remove:hover{background: #ff0000;}
/* slideout sidebar */
.two-fixed .col2.slideout {
	width:550px;
	background:#f5f5f5;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
	-moz-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	-webkit-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	box-shadow: 0 1px 0 #1d47c1, 0 3px 0 #061952;
}
/* PAGINATION AND CALENDAR
-------------------------------------------------------------- */
.pagination span, .pagination a {
	background: #fff; /* background colour of inactive pagination blocks */
}
.pagination .current,
.pagination a:hover{
	color:#fff; /* font colour of current page block */
}
#wp-calendar tbody td{background:#f5f5f5;border:1px solid #fff;}
#wp-calendar tbody a{background: #f00;color:#fff;}
/* MOSAIC
-------------------------------------------------------------- */
.mosaic-wrapper{
	/* to make responsive (but causes issues with overlay postion)width:calc( 33% - 25px); */
}
.mosaic-block {
	width:400px;
	/*fixed size */
	height:250px;
	/* responsive size
	padding-bottom:62.5%; /*maintains ratio */
}
.mosaic-block h3,
.mosaic-block p,
.mosaic-block a {
	color:#ffffff
}
.mosaic-backdrop {
	background:#111;
}
.mosaic-overlay {
	background:#fff;
}
/* WEATHER ICON */

.seja-weather-graph {
	width:45px; 
}
.seja-weather-output p {
	color:#967a50;
	margin-bottom:0;
}
.seja-weather-location h2 {
	font-size:0.9rem;
	font-weight:300;
	text-align:center;
}