/******************************************************************
Theme Name: Simpsons Creative Grid 2017
Description: A responsive theme for WordPress, developed by Simpsons Creative, allowing for quick and fluid development of responsive websites - through the use of a dynamic grid system.
Author: Alex Wells
Version: 2.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
******************************************************************/

@import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400i,700,700i&display=swap');

/*==================== Standards ====================*/
/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc */
* { font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif; }
body { background-color: #fff; }


/*Text*/
h1, h2, h3, h4, h5, h6, p { margin: 0 0 3px 0; color: #000; font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif; }
h1 { font-size: 32px; color: white; text-align: center; width: 100%; }
body.page-id-10 h1 {font-size:26px;}
h2 { font-size: 26px; }
h3 { font-size: 26px; /*font-family: 'Dancing Script', cursive;*/ font-style:italic;}
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { font-size: 14px; }
a { color: #00A5DD; text-decoration: none; }
a:hover { text-decoration: underline; color : #00A5DD; }
a:visited { color: #0095C7; }


/*Buttons*/
/* Change however you need. Probably best to just change colors to match current site. */
/* Color important temporary solution - find alternative */
.button { padding: 10px; text-decoration: none; color: #fff; background-color: #00A5DD; border-radius: 4px; }
.button:hover { background-color: #0095C7; text-decoration: none; color: #fff; }
.button:visited { color: #fff; }
.button:visited:hover { color: #fff; }


/*Responsive Navigation*/
.slicknav_menu li a { text-align: center; font-size: 16px; background-color: #013050; color: #fff; }
.slicknav_menu li { margin: 5px 0px; }
.slicknav_nav li a { padding: 10px !important; }
.slicknav_item.slicknav_row a { padding: 0px !important; }
.slicknav_btn { background-color: #013050 !important; }
/*BG color*/
body .slicknav_menu { background: #fff; }
/*Border Color*/
.slicknav_menu ul li a { border: none; }
/*Text Color*/
.slicknav_nav li a { color: #fff; }
.slicknav_nav li a:hover { color: #666; }
/*Sub Menu Arrow*/
.slicknav_arrow { color: #fff; }
.slicknav_arrow:hover { color: #666; }



/*==================== Header ====================*/
.mainHeader { position: relative; background-color: #013050; }
.tranBlack { background-color: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7); }
#slider { position: relative; z-index: 1; }
.topHead { position: absolute; top: 0px; z-index: 100; height: 160px; width: 100%; border-bottom: #FFF solid 3px; padding: 10px; }
a.logo img { width: 95%; margin: 0 auto; float: none;  margin-top: 20px;}
a.logo { margin: 0 auto; float: none; max-width: 300px; display: block; }
div.rightHeading { float: right; }
div.rightHeading p, div.rightHeading a { color: white; text-decoration: none; font-size: 20px; }
div.rightHeading p { line-height: 30px; }
div.rightHeading a { line-height: 18px; }
.bottomHead { background-color: #013050; border-top: #FFF solid 3px; padding: 10px 0px; margin-top:-7px; position:relative; z-index:999; }
.bottomHead h1 { color: #fff; font-weight: 500; }
div.row.header { background: none; }
span.headerPhone { padding-left: 10px; }

/*Social Media*/
div.socialMedia { position:absolute; top:20px; right:20px; z-index:999999999;}
div.socialMedia img { width:50px;}
div.socialMedia a { float: left;}
div.socialMedia a:hover { opacity: 0.5;}


/*Nav*/
.nav { background: none; margin-top: 12px; }
.nav ul { background: none; }
.nav li { min-width: 12%; background-color: #013050; border: white solid 1px; margin-right: 10px; }
.nav li.menu-item-27 { width: 12%;  margin-right: 0px; }
.nav li a { font-size: 12px; text-transform: uppercase; text-align: center; }
.nav li a:hover { text-decoration: none; background-color:#60605f; }
.nav li ul.sub-menu, .nav li ul.children { border: none; }

/*Dropdown Menus*/
.nav li ul.sub-menu { padding-top: 10px; }
.nav li ul.sub-menu li { width:100%; margin-right: 0px; margin-bottom: 6px; }
.nav li ul.sub-menu li a { text-align: left; }
.nav li ul.sub-menu li a, .nav li ul.children li a { border-bottom: none; }

/*LayerSlider*/
.ls-overflow-hidden { overflow: visible; }
/*Slider CTA*/
.cta { width: 360px; height: 306px; border: #FFF solid 1px; margin-top: 200px; position: relative; margin-left: 110px; }
.cta img { float: left; height: 303px; width: 135px; }
.cta p { float: right; color: white; width: 207px; font-size: 14px; }
.cta p.heading { font-size: 110%; margin-top: 10px; margin-bottom: 20px; }
.cta a { color: white; font-size: 14px; text-decoration: none; border: #FFF solid 1px; padding: 5px 10px; position: absolute; bottom: 20px; }


/*==================== CONTENT AREA ====================*/
#content p { max-width: 750px; margin-left: auto; margin-right: auto; font-size: 16px; text-align: justify; }
#content { background: #fff; overflow: hidden; padding: 20px; margin-top: 0px; }
#content h2, #content h3 { width: 100%; display: inline-block; padding: 0 15px; position: relative; font-weight: bold; text-align: center; margin: 0 auto; clear: both; margin-bottom:20px; }
.entry-content { background: #fff; }
#content img.alignnone { max-width: 750px; height: auto; margin: 0 auto; margin-bottom: 20px; }
#content img.alignleft { float: left; }
.gallery { max-width: 750px; margin: 0 auto; }


/*Home Page*/
.home #content h4 { margin: 20px 0px 10px 0px; }

/*Latest posts section on Home Page*/
.blog-content { padding: 0px 20px 20px 20px; margin-top: 40px; }
#content h3.blogPost { padding: 5px 0px 5px 0px; margin-bottom: 0px; font-style: normal; }
#content h3.blogPost:before, #content h3.blogPost:after { background: none; }
#content p.blogPost { padding-bottom: 5px; margin-bottom: 0px; }
img.blogPost { max-width: 100%; height: auto; }
img.blogPost:hover { opacity: 0.5; }
.recentPosts { padding-bottom: 0px; }
.readMore, #content a.readMore, #content a.readMore:link, #content a.readMore:visited { display:block; background-color:black; color:white; padding: 10px; margin:5px; text-decoration:none; font-size:16px; font-weight: normal; }
.readMore:hover, #content a.readMore:hover { background-color: #60605f; }

/*Blog posts section*/
.article-header img { margin-bottom: 20px; }
.newsPost { background-color:white; padding: 30px 10px 20px 10px; }
.newsPost img {width:100%; height:auto; padding:0px; margin:0px; }
.newsPostImage {position:relative; }
.newsPostImage a img {position:absolute; top:10px; right:10px; width:40px; height:40px; }
#content .newsPost h1 { background: none; padding: 0px; margin-bottom: 0px; }
#content .newsPost h1 a:link, #content .newsPost h1 a:visited { background: none; color: #000; text-decoration: none; }
#content .newsPost h1 a:hover, #content .newsPost img:hover { opacity: 0.5; }

/*Musical Director Page*/
.page-id-572 img { float: left; margin-right: 20px; }
.page-id-572 #content p {max-width: 100%; }

/* Contact Page */
.page-id-20 img { display: inline; }

/* Contact Forms */
#content input[type=text], #content input[type=email], #content input[type=url], #content textarea { width: 100%; max-width: 100%; }
#content textarea { height: 150px; max-width: 100%; }
#content input[type=submit] { font-size: 16px; font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif; background: #013050; color: #fff; }
#content input[type=submit]:hover { background-color: #60605f; }
div.wpcf7 input, div.wpcf7 textarea {width:100%;}
.wpcf7-submit { background:none; border:none;display:block; background-color:black; color:white; padding:20px; margin:5px; text-decoration:none; font-size:16px; font-weight:bold;}
.wpcf7-submit:hover { background-color:#60605f;}

 /*==================== Footer ====================*/

#footer { width: 100%; max-width: 100%; background-color: #013050; min-height: 80px; padding: 15px; }
#inner-footer p {color:#fff; text-align:center; font-size:16px; line-height: 24px; }
#inner-footer p.footContact { font-size:20px; font-weight:bold;}
#inner-footer a { color: #fff; }
#inner-footer a:hover { text-decoration: none; }
span.phone { padding-left: 10px; }
#inner-footer p.footCharity { font-size: 12px; margin-top: 12px; }



/*==================== Media Queries ====================*/
 @media (max-width: 1250px)
 {
	.cta { margin-left: 0px; }
 }
 @media (max-width: 1150px)
 {
	.cta { margin-top: 160px; }
 }
 @media (max-width: 1029px)
 {
	/*Tablet*/
	.topHead { height: 180px; }
	.rightHeading { padding-left: 20px; }
	span.headerPhone { display: block; padding-left: 0px; }
	#slider { padding-top: 60px; }
	.cta { height: 180px; width: 420px; padding: 10px; }
	.cta img { display: none; }
	.cta p { width: 100%; float: left; }
	.cta p.heading { margin-top: 5px; margin-bottom: 10px; font-size: 14px; }
	.cta a { bottom: 10px; padding: 2px 20px; }

	.nav li, .nav li.menu-item-27  { width: auto;  }
 }
 @media (max-width: 790px)
 {
 	#content img.alignnone { max-width: 100%; height: auto; }
 }
 @media (max-width: 767px)
 {
	/*Mobile*/
	#logo { max-width: 50%;}
	#slider { padding-top: 200px; }
	.cta { display: none; }
	.topHead { height: auto; }
	.rightHeading { text-align: center; padding: 0px; }
	.entry-content { padding: 0px 10px 0px 10px; }
	#content img { max-width: 100%; }
 }
 @media (max-width: 480px)
 {
	/*Small Mobile*/
	#logo { max-width: 100%; padding: 0px 50px 0px 50px; margin-top: 60px; }
	#slider { padding-top: 368px; }
	span.phone { clear: both; display: block; margin-top: 6px; }

	/*social Media*/
	div.socialMedia { width:100%; left:0px;}
	a.instagram { position:absolute; right:0px;}
	a.youtube { position:absolute; right:50px;}
}


/*==================== Colour Changes ====================*/

/* Primary Colour */
.header, #footer { background: #013050; }
.tranBlack { background-color: rgba(1,48,80, 0.8); background: rgba(1,48,80,0.8); }

/* Secondary Colour */
.topHead { border-bottom-color: #fff; }
.bottomHead { border-top-color: #fff; }

/* Borders */
.nav li, .nav li a, .ls-box, av li ul.sub-menu li a, .nav li ul.children li a, .nav li ul.sub-menu li a, .nav li ul.children li a { border-color: #fff; }

/* Background Colour */
body { background: #fff; }

/* Text */
h1, h2, h3, h4, h5, h6, p { color: #000; }

/* Page Titles */
.bottomHead h1 { color: #fff; font-weight: 500; }

/* Content Links */
#content a:link, #content a:visited { color: #000; }
/* Header/Footer Links */
.header a, .header a:hover, #inner-footer p, p.footContact, .nav li a, .nav li a:hover, .nav li a:focus, #footer p, #footer a { color: #fff; text-decoration: none; }
/* Links Hover */
.header a:hover, #footer a:hover, #content a:hover { text-decoration: none; }

/* Blog Post Read More Buttons */
.readMore { color: #fff; font-weight: normal; }
 /* Blog Post Read More Links */
#content a.excerpt-read-more { color: #000; font-weight: normal; text-decoration: underline; }

/* Submit Button */
#content input[type=submit] { background: #013050; color: #fff; }
#content input[type=submit]:hover { background-color: #60605f; }

/*Slider CTA*/
.cta { border-color: #FFF; }
.cta p, .cta a { color: #fff; }



/*==================== August 2022 Changes ====================*/
.topHead.noImage { position: static; border-bottom: none; }

.topHead.featuredImage { z-index: 99999; }
.featured-image { position: relative; z-index: 9999; }
.featured-image .image img { width: 100%; height: 100%; max-height: 550px; object-fit: cover; }

.bottomHead { clear: both; }


@media (max-width: 767px)
{
	/*Mobile*/
	.topHead { float: left; position: static; border-bottom: none; margin-bottom: 20px; }
	.featured-image { border-top: 3px solid #fff; }
	#slider { float: left; padding-top: 0px; border-top: 3px solid #fff; }
}