/*
Theme Name: Seja Design Framework V2.11
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:url(../images/isabella-nursery-bg.jpg) repeat;
	font-size:16px;
}

/* =Fonts
-------------------------------------------------------------- */
/* header fonts */
h1,
h2,
h3,
h4,
h5,
h6,
th,
dt,
p,
ol,
ul,
dd,
pre,
td,
input,
textarea,
address,
form,
#copyright-wrapper,
.header-contact-right  {
	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:#053c04;
}
/* highlight colours */
.highlight {
	color:#f00;
}
/* default link colours  */
a:link {
	color: #053c04;
}
a:visited {
	color: #053c04;
}
/*menu colours */

#seja-framework-menu a {
	color:#e2dac2;
}
#seja-framework-menu ul ul a {
	color:#fff;
}
#seja-framework-menu li:hover > a {
	color: #c54821;
}
#seja-framework-menu ul ul :hover > a {
	color:#c54821;
}

#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;
}

/*default colour */
p,
ol,
ul,
dd,
pre,
td,
.comment-body p,
.custom-block {
	color:#444;
}
#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;
}
/*
/* 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:#9ac63e;
}

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

/* 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,
.site-info a:active,
.site-info a:hover,
.copyright a:active,
.copyright a:hover {
	color: #c54821;
}

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

#header-shell {
	background: url(../images/isabella-nursery-headerbg.png) repeat-x bottom;
}
#header-img {
	background:url(../images/headers/isabellas-logo-large.png) no-repeat 0 0;
	background-size:710px 205px;
	float:left;
}
#header-img img {
	width:710px;
	height:205px;
}
.header-contact-right {
	width:300px;
	float:right;
	margin-right:50px;
}
.header-contact-right .reverse-block33:first-child {
	font-size:1.3125rem;
	line-height:1.65rem;
}
.reverse-block33 {
	margin-bottom:20px;
}
.header-contact-right .large {
	font-size:1.125rem;
}
.phone-icon,
.email-icon {
	display:none;
}
@media (max-width:1100px) {
	#header-img {
		background:url(../images/headers/isabellas-logo-600.png) no-repeat 0 0;
		background-size:600px 205px;
	}
	#header-img img {
		width:inherit;
		height:inherit;
	}
}
@media (max-width:975px) {
	.header-contact-right {
		margin-right:10px;
		width:260px;
	}
	.email-text-a {
		display:none;
	}
}
@media (max-width:890px) {
	#header-img {
		width: calc(100% - 270px );
		height:auto;
		background-size:100% auto;
	}
}
@media (max-width:800px) {
	#header-shell {
		background-size:100% 100%;
	}
	#header-img {
		background:url(../images/headers/isabellas-logo-600.png) no-repeat 0 0;
		background-size:600px 205px;
		width:100%;
	}
	#header-img img {
		width:inherit;
		height:inherit;
	}
	.header-contact-right {
		float:none;
		width:100%;
	}
	.reverse-block33 {
		width:31%;
		padding:0 1%;
		float:left;
		margin-bottom:5px;
	}
}
@media (max-width:700px) {
	.phone-text,
	.email-text-b {
		display:none;
	}
	.phone-icon,
	.email-icon {
		display:block;
		font-size:2.8rem;
	}
	.reverse-block33 {
		width:41%;
	}
	#header {
		position:relative;
	}
	.reverse-block33:last-child {
		width:100px;
		position:absolute;
		top:200px;
		right:0;
	}
	.reverse-block50 {
		width:50%;
		float:left;
	}
}
@media (max-width:630px) {
	#header-img {
		width: 100%;
		height:auto;
		background-size:100% auto;
	}
}
@media (max-width:550px) {	
	#header-img {
		width: calc(100% - 75px);
	}
	.reverse-block33 {
		width:48%;
	}
	.reverse-block33:last-child {
		width:50px;
		top:10px;
		right:0;
	}
	.reverse-block50 {
		float:none;
	}
	.phone-icon {
		margin-bottom:20px;
	}
}
@media (max-width:490px) {
	.phone-icon {
		margin-bottom:0;
	}
	.header-contact-right .reverse-block33:first-child {
		font-size:1.1rem;
		line-height:1.3rem;
	}
}
#content {
	margin:5px auto 15px;
}
.colmask {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,1) 5.1%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 5.1%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 5.1%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.col1{
	background:#fff;
	margin-top:15px
}
.col2{
	background: rgb(135,168,132);
	background: -moz-linear-gradient(left,  rgba(135,168,132,1) 0%, rgba(195,239,191,1) 2%, rgba(224,244,222,1) 20%, rgba(232,248,230,1) 50%, rgba(224,244,222,1) 80%, rgba(195,239,191,1) 98%, rgba(135,168,132,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(135,168,132,1) 0%,rgba(195,239,191,1) 2%,rgba(224,244,222,1) 20%,rgba(232,248,230,1) 50%,rgba(224,244,222,1) 80%,rgba(195,239,191,1) 98%,rgba(135,168,132,1) 100%);
	background: linear-gradient(to right,  rgba(135,168,132,1) 0%,rgba(195,239,191,1) 2%,rgba(224,244,222,1) 20%,rgba(232,248,230,1) 50%,rgba(224,244,222,1) 80%,rgba(195,239,191,1) 98%,rgba(135,168,132,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87a884', endColorstr='#87a884',GradientType=1 );
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius:    10px 10px 0 0;
	border-radius: 		   10px 10px 0 0;
	-webkit-box-shadow: 1px 5px 3px #768574 inset;
	-moz-box-shadow:    1px 5px 3px #768574 inset;
	box-shadow:         1px 5px 3px #768574 inset;
}
@media (max-width:800px) {
	.col2 {
		background: rgba(232,248,230,1);
		-webkit-border-radius: 0;
		-moz-border-radius:    0;
		border-radius: 		   0;
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
	}
}
.single-column {
	background:#fff;
}
#footer {
	background:#3c5535;
}

/* Navigation 
-------------------------------------------------------------- */
.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 {
	border: 1px solid #979a75;
	background: url(../images/menu-bg.jpg) no-repeat center;
	-webkit-border-radius: 10px;
	-moz-border-radius:    10px;
	border-radius:         10px;
}
#navigation #seja-framework-menu li {
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
}
#navigation #seja-framework-menu a {
	/* text-transform: uppercase; */
	text-shadow: 0 1px 0 #000;
}
@media (max-width:1060px) {
	#navigation #seja-framework-menu a {
		padding:12px 10px;
	}
}
@media (max-width:895px) {
	#navigation #seja-framework-menu a {
		padding:12px 7px;
	}
}
#navigation #seja-framework-menu ul {
	top: 45px; /* change this to adjust the drop-down's position */
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);    
	background: -o-linear-gradient(#444, #111);	
	background: -ms-linear-gradient(#444, #111);	
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#navigation #seja-framework-menu ul {
	/*width:160px;  remove this if you do not want the drop-down constrained by width */
}
#navigation #seja-framework-menu ul ul {
	-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}
#navigation #seja-framework-menu ul li {
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#navigation #seja-framework-menu ul a:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
}
#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: ADD YOUR DOWN ARROW COLOUR HERE
}
#navigation #seja-framework-menu ul li:first-child > a:hover::after {
	border-bottom-color: ADD YOUR DOWN ARROW HOVER COLOUR HERE
}
#navigation #seja-framework-menu ul ul li:first-child a:after{
	border-right-color: ADD YOUR LEFT ARROW COLOUR HERE
}
#navigation #seja-framework-menu ul ul li:first-child a:hover:after {
	border-right-color: ADD YOUR LEFT ARROW HOVER COLOUR HERE
}
*/
/*responsive menu */
#navigation nav select {
	border: 1px solid #000;
	background:url(../images/bar-light.svg) #53381d no-repeat 8px 16px;
	color:#fff;
}
#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: #fff;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
}
input[type="submit"],
a.button{
	border: 1px solid #176ea8;
	-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:#3c5535;
}
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:#b71b38;
}
.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:#96ac90;
}
/* 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;
}

/* Pagenation THIS NEEDS SOME CORRECTING
-------------------------------------------------------------- */
.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;
}

/* add all custom header elements here */

/* add all custom content elements here */

/* add all custom footer elements here */



/* experimental - this will get distributed between here, the styles.css and the dynamic header-styles file */
/*General Mosaic Styles*/
.mosaic-wrapper {
	float:left;
	margin:10px;
	/* to make responsive (issues with overlay postion) 
	width:calc( 33% - 25px); */
}
.mosaic-block {
	position:relative;
	overflow:hidden;
	width:400px;
	background:#111 url(../images/progress.gif) no-repeat center center;
	border:1px solid #fff;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
	/*fixed size */
	height:250px;
	/* responsive size
	padding-bottom:62.5%; /*maintains ratio */
}
.details{ 
	margin:8px 20px;
}	
.mosaic-block h3,
.mosaic-block p {
    color: #ffffff;
    text-shadow: 1px 1px 0 #000000;
}
.mosaic-block a {
	color:#ffffff;
	text-decoration:none;
}
.mosaic-backdrop {
	display:none;
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background:#111;
}
.mosaic-block img {
	width:100%;
	height:auto;
}
.mosaic-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
	background:#fff;
}
/* animation styles */
.bar .mosaic-overlay {
	bottom:-100px;
	height:60px;
	background:rgba(0,0,0,0.75);
}
.circle .mosaic-overlay {
	background:url(../images/hover-magnify.png) no-repeat center center;
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	display:none;
}
.circle h3,
.circle p {
	display:none;
}
.fade .mosaic-overlay {
	opacity:0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	background:rgba(0,0,0,0.75);
}
.bar1 .mosaic-overlay {
	bottom:-50px;
	height:100px;
	opacity:0.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	filter:alpha(opacity=75);
	background:rgba(0,0,0,0.75);
}
.bar1 .mosaic-overlay:hover {
	opacity:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
}
.bar2 .mosaic-overlay {
	top:-100px;
	height:60px;
	background:rgba(0,0,0,0.75);
}
.bar2 h3 {
	margin:0 0 8px;
}