/*
Theme Name: Seja Design Framework V2.12
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:#fff;
	font-size:16px;
	/* set a background colour here if required */
}

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

/* header fonts */
h1,
h2,
h3,
h4,
h5,
h6,
th,
dt {
	font-family: 'Linux-Libertine', serif;
}
/*content fonts */
p,
ol,
ul,
dd,
pre,
td,
input,
textarea,
address,
form,
#copyright-wrapper  {
	font-family: 'Open Sans', sans-serif;
}

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


/* =Default Font Colours
-------------------------------------------------------------- */

/*main highlight colours */
h1,
h2,
h3,
h4,
h5,
h6,
legend,
th,
address,
.entry-title,
.entry-title a:link,
.entry-title a:visited,
h3#comments-title,
h3#reply-title,
.widget-title,
#wp-calendar caption {
	color:#1937cf;
}
/* highlight colours */
.highlight,
.bho-group {
	color:#f00808;
}
.alt-colour {
	color:#5da2d4;
}
/* default link colours  */
a:link {
	color: #566e88;
}
a:visited {
	color: #566e88;
}
/*menu colours */

#seja-framework-menu a {
	color:#566e88;
}
#seja-framework-menu ul ul a {
	color:#566e88;
}
#seja-framework-menu li:hover > a {
	color: #5da2d4;
}
#seja-framework-menu ul ul :hover > a {
	color:#5da2d4;
}

#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: #5da2d4;
}

/*default colour */
p,
ol,
ul,
dd,
pre,
td,
.comment-body p,
.custom-block {
	color:#444;
}
ins {
	color:#444;
}
#footer-widget-area .widget-title,
#footer-widget-area a:link,
#footer-widget-area a:visited,
#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 .alt-colour {
	color:#edfb0b;
}
/*
/* 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 {
	color:#999;
}

/* dark colour */
input,
textarea,
.category-title {
	color:#900;
}

/* link hover colours */

a:active,
a:hover,
.entry-title a:active,
.entry-title a:hover,
.entry-meta a:active,
.entry-meta a:hover,
.entry-utility a:active,
.entry-utility a:hover,
.navigation a:active,
.navigation a:hover,
#comments .comment-meta a:active,
#comments .comment-meta a:hover,
p.logged-in-as a:active,
p.logged-in-as a:hover,
#footer-widget-area a:active,
#footer-widget-area a:hover,
.site-info a:active,
.site-info a:hover,
.copyright a:active,
.copyright a:hover {
	color: #5da2d4;
}

/* background colours 
-------------------------------------------------------------- */

#header-shell {
	
}
#header {}
#top-content-block {}
#content-shell {}
#alt-content-block {
	background: rgb(86,110,136);
	background: -moz-linear-gradient(top,  rgba(86,110,136,1) 0%, rgba(127,149,173,1) 15%, rgba(127,149,173,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(86,110,136,1) 0%,rgba(127,149,173,1) 15%,rgba(127,149,173,1) 100%);
	background: linear-gradient(to bottom,  rgba(86,110,136,1) 0%,rgba(127,149,173,1) 15%,rgba(127,149,173,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#566e88', endColorstr='#7f95ad',GradientType=0 );
}
#content {
	background:#fff;
}
#footer {
	background: rgb(6,45,88);
	background: -moz-linear-gradient(top,  rgba(6,45,88,1) 0%, rgba(0,63,134,1) 15%, rgba(0,63,134,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(6,45,88,1) 0%,rgba(0,63,134,1) 15%,rgba(0,63,134,1) 100%);
	background: linear-gradient(to bottom,  rgba(6,45,88,1) 0%,rgba(0,63,134,1) 15%,rgba(0,63,134,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#062d58', endColorstr='#003f86',GradientType=0 );
}
#colophon {
	
}
#wp-calendar td {}
/* header 
-------------------------------------------------------------- */ 

.no-bullet {} /* remove the bullet - this needs to move to a different location */
.header-contact {
	padding-top:20px;
} 
.header-contact h3.widget-title {}
.header-contact h2 .sitename {
	font-size:3.5rem;
	font-weight:600;
}
.header-contact h2 .subtext {
	font-size:1.875rem;
	font-style:italic;
	font-family: 'Open Sans', sans-serif;
}
.header-image {
	background:url(../images/header-full.jpg) no-repeat;
	background-size:100% auto;
	width:100%;
	overflow:hidden;
}
.header-image img {
	width:100%;
	height:auto;
}
@media (max-width:1220px) {
	.header-contact {
		padding: 20px 10px 0;
	}
}
@media (max-width:900px) {
	.header-image {
		background:url(../images/header-half.jpg) no-repeat;
		background-size:100% auto;
	}
	.header-image img {
		width:200%;
		height:auto;
	}	
}
.single-column .entry-content {
	padding:40px 20px 20px;
}
.column {
	float:left;
	padding:0 10px;
}
.w50 {
	width:calc(48% - 20px);
}
.w25 {
	width:calc(26% - 20px);
	padding-top:75px;
}
.absolute-1 {
	position:relative;
	left:-48%;
}
.absolute-2 {
	position:relative;
	left:26%;
}
.absolute-3 {
	position:relative;
	left:0%;
}
.book-cta {
	position:absolute;
	left:calc(74% + 65px);
	top:-45px;
}
@media (max-width:900px) {
	.w50 {
		width:calc(100% - 20px);
	}
	.w25 {
		width:calc(50% - 20px);
	}
	.absolute-1, .absolute-2, .absolute-3 {
		left:0;
	}
	.book-cta {
		left:75%;
	}
}
@media (max-width:575px) {
	.w25 {
		width:285px;
		margin:0 auto;
	}
}

/* parallex 
-------------------------------------------------------------- */ 

.site-header {
    background-color: #fafafa;
    position: relative;
}
body.has-header-image .custom-header-media {
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
}
body.has-header-image.admin-bar  .custom-header-media {
    height: calc(100vh - 32px);
}
.has-header-image .custom-header-media {
    height: 0;
    position: relative;
}
.custom-header-media::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%) repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}
.has-header-image .custom-header-media::before {
    height: 33%;
}
.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-video .custom-header-media iframe {
    height: 100%;
    left: 0;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100vw;
    padding-bottom: 1px;
    position: fixed;
    top: 0;
    transform: translateX(-50%) translateY(-50%);
    width:  100%;
	object-fit: cover;transform: none;
}
.top-nav-bar,
.scroll-nav-bar {
	top:0;
	display:block;
	height:80px;
	padding-top:0;
	position:fixed;
	width:100%;
	vertical-align:top;
	z-index:5;
}
.top-nav-bar {
	background:rgba(18,41,108,0.5);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
.scroll-nav-bar {
	background:rgba(18,41,108,1);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
.admin-bar .top-nav-bar {
	top:32px;
}
.site-branding {
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    padding-top: 0;
    position: absolute;
    width: 100%;
	vertical-align: bottom;
	z-index:3;
}
.site-branding a {
    text-decoration: none;
    transition: opacity 0.2s ease 0s;
	transition: margin-bottom 0.2s ease 0s;
    z-index: 3;
}
.site-branding a:hover,
.site-branding a:focus {
	opacity:0.7;
}
#header-shell .wrap {
    position: relative;
}
.wrap {
    max-width: 1000px;
    padding-left: 3em;
    padding-right: 3em;
	margin-left: auto;
    margin-right: auto;
}
.wrap::after {
    clear: both;
    content: "";
    display: block;
}
.site-branding-text {
    display: inline-block;
    vertical-align: middle;
}
.site-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}
.site-title a {
    color: #ffffff;
	opacity: 1;
}
.site-description {
    font-size: 1rem;
}
body.has-header-image .site-description, 
body.has-header-video .site-description {
    color: #ffffff;
    opacity: 0.8;
}
.site-header .menu-scroll-down .icon {
    transform: rotate(90deg);
}
.menu-scroll-down .icon {
    height: 18px;
    width: 18px;
}
svg:not(:root) {
    overflow: hidden;
}

/* parallax - other elements */

.has-header-image .site-logo {
	float:left;
	width:250px;
	position:relative;
	top:0;
	padding:0 0 0 50px;
}
.has-header-image #navigation{
	width:900px;  /* let's make this dynamic, based on the logo image width */
	position:relative;
	clear:none;
	margin-top:20px;
}
.has-header-image #content-shell {
	position:relative;
	background:#fff;
}
.seja-parallax-scroll-icon {
	fill:#e6e7e8; 
	fill-rule:evenodd;
	clip-rule:evenodd;
}

/* Navigation 
-------------------------------------------------------------- */


#navigation{clear:both;} /* to place this to the side of the logo, remove the clear and set float:left */

.header-menu {
	width:100%; 
	/* add float right if you want a right justified menu (NOTE: Right float menu is not suitable if you're going to add drop down elements (especially if they are at the right hand side) */
}
#navigation #seja-framework-menu {
}
#navigation #seja-framework-menu li {
}
#navigation #seja-framework-menu a {
	/* text-transform: uppercase; */
}
#navigation #seja-framework-menu ul {
	top: 45px; /* change this to adjust the drop-down's position */
	background: #f1f1f1;
	background: rgb(241,241,241);
	background: -moz-linear-gradient(top,  rgba(241,241,241,1) 0%, rgba(229,229,229,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(241,241,241,1) 0%,rgba(229,229,229,1) 100%);
	background: linear-gradient(to bottom,  rgba(241,241,241,1) 0%,rgba(229,229,229,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e5e5e5',GradientType=0 );

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#navigation #seja-framework-menu ul {
}
#navigation #seja-framework-menu ul ul {
}
#navigation #seja-framework-menu ul li {
}
#navigation #seja-framework-menu ul a:hover {
	background: rgb(239,242,243);
background: -moz-linear-gradient(top,  rgba(239,242,243,1) 0%, rgba(225,231,233,1) 100%);
background: -webkit-linear-gradient(top,  rgba(239,242,243,1) 0%,rgba(225,231,233,1) 100%);
background: linear-gradient(to bottom,  rgba(239,242,243,1) 0%,rgba(225,231,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff2f3', endColorstr='#e1e7e9',GradientType=0 );

}
#navigation #seja-framework-menu ul li:first-child > a {
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
/* navigation arrow colours */
/*
#navigation #seja-framework-menu ul li:first-child > a::after {
	border-bottom-color: #			DOWN ARROW COLOUR
}
#navigation #seja-framework-menu ul li:first-child > a:hover::after {
	border-bottom-color: #			DOWN ARROW HOVER COLOUR
}
#navigation #seja-framework-menu ul ul li:first-child a:after{
	border-right-color: #			LEFT ARROW COLOUR
}
#navigation #seja-framework-menu ul ul li:first-child a:hover:after {
	border-right-color: # 			LEFT ARROW HOVER COLOUR
}
*/
/*responsive menu */
#navigation nav select {
	border: 1px solid #000;
	background:url(../images/bar.svg) #f1f1f1 no-repeat 8px 16px;
	color:#333;
	/*** May need to add a height attribute and adjust the '16px' in the background above (chrome is displaying differently to firefox) */
}
#navigation nav select option::before,
#sidebar-navigation nav select option::before {
	font-family:'FontAwesome';
	font-size:0.4em;
	content: "\f1db";
	padding-right:12px;
	position:relative;
	top:-5px;
}
/* NOTE: to set colour of the navbar icon you will need to edit the bar.svg file in the images folder (or use bar-light.svg on dark themes) */

/* form elements 
-------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
input[type="url"],
select,
textarea { 
	background: f1f1f1;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
}
input[type="submit"],
a.button{
	border: 1px solid #f00808;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#fff;
	text-transform:uppercase;
}
input[type="submit"],a.button,
.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:#f00808;
}
input[type="submit"]:hover,a.button: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:#b40303;
}
.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:#b3a2a2;
}
/* 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 .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }


/* WooCommerce - DELETE THIS SECTION IF NOT USING
-------------------------------------------------------------- */
/* pricing colour here */
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color:#8fae1b;}
/* GREEN colour here */
.woocommerce-message::before {
	color: #8fae1b;}
.woocommerce-message {
    border-top-color: #8fae1b;
}
/* RED colour here */
.woocommerce a.remove {
	color:#f00 !important;
}
.woocommerce a.remove:hover {
    background: #ff0000;
}

/* theme specific elements 
-------------------------------------------------------------- */

.separator {
	
}
.seja-link-div {
	background:#f1f1f1;
}
.bho-group {
	font-weight:600;
}
.cta-button {
	width:410px;
	padding:10px 15px;
	margin:0 auto 20px;
	background:#dfdfda;
	-webkit-border-radius: 10px;
	-moz-border-radius:    10px;
	border-radius:         10px;
}
.cta-button p{
	color:#571412;
	font-size:1.375rem;
	line-height:1.5rem;
}
.cta-button.highlight-button {
	background:#f00808;
}
.cta-button.highlight-button p {
	color:#fff;
}
.cta-button .click {
	color:#003e85;
	font-size:1rem
}
.cta-button.highlight-button .click {
	color:#eaaeac;
}
@media (max-width:1130px) and (min-width:900px) {
	.cta-button {
		width:calc(100% - 30px);
	}
}
@media (max-width:575px) {
	.cta-button {
		width:calc(100% - 30px);
	}
}
/* Other WordPress elements 
-------------------------------------------------------------- */
.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 */
	/* background colour selected in Admin > Seja Template > Theme Settings > Theme Content */
}
.pagination a:hover{
	background: #f90; /* match both with the theme hover colour */
	border:1px solid #f90;
}
#wp-calendar td{background:#f5f5f5;border:1px solid #fff;}
/* Mosaic Styles
-------------------------------------------------------------- */
.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;
}

/* new beta items @2.12
-------------------------------------------------------------- */
/* new weather icon */
.seja-current-weather {
	width:100px;
}
.seja-current-weather.has-apparent {
	width:250px;
}
.seja-weather-graph,
.seja-weather-output {
	float:left;
}
.seja-weather-graph {
	width:45px; /* in future versions we're going to allow different size icons so this will need to be dynamic */ 
}
.seja-weather-output {
	width:50px;
}
.has-apparent .seja-weather-output {
	width:200px;
}
.seja-weather-output p {
	color:#967a50;
	margin-bottom:0;
}
.seja-weather-location {
	clear:both;
}
.seja-weather-location h2 {
	font-size:0.9rem;
	font-weight:300;
	text-align:center;
}