/*
	Theme Name: Talbot Specialist School
	Theme URI: https://www.talbotlearningcommunity.org.uk/
	Description: Talbot Specialist School Theme
	Version: 1.0.0
	Author: Primary ICT Support Ltd
	Author URI: https://www.primaryictsupport.co.uk
*/


* { padding: 0; margin: 0; line-height: 20px; font-size: 16px; outline: none; box-sizing: border-box; font-family: museo-sans, sans-serif; color:#333333; transition:all 0.3s ease; }

	img { max-width: 100%; height: auto; }
	iframe, object, table { max-width: 100%; }
	a { color: #EB1A24; text-decoration: none; }
	a:hover { color:#333F48; text-decoration: none; }
	textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; }


div.container { }
	.inner { width: 1100px; margin: 0 auto; max-width: 98%; }
	.clear { clear: both; }

div.container header { }
	div.container header div.inner { padding-top: 15px; padding-bottom: 15px; }
	div.container header div.inner a.logo { display: inline-block; float: left; }
	div.container header div.inner ul.social { list-style: none; float: right; text-align: right; margin-top: 35px }
		div.container header div.inner ul.social li { margin-left: 10px; display: inline-block; background: #3368C6; width: 32px; height: 32px; border-radius: 16px; text-align: center; color: #FFF; float: left; }
		div.container header div.inner ul.social li a { display: block; }
		div.container header div.inner ul.social li:hover { background: #36489A; }
		div.container header div.inner ul.social li i { color: #FFF; line-height: 32px; }
		div.container header div.inner ul.social li.search { width: auto; background: none; }
		div.container header div.inner ul.social li.search form.search { }
		div.container header div.inner ul.social li.search form.search input.search-input { display: inline-block; background: #EFEFEF; width: 200px; height: 32px; border-radius: 16px; text-align: left; color: #333; border:none; line-height: 32px; font-size: 14px; padding: 0 10px; margin-right: -33px; float: left; }
		div.container header div.inner ul.social li.search form.search button.search-submit { display: inline-block; background: #3368C6; width: 32px; height: 32px; border-radius: 16px; text-align: center; color: #FFF; border:none; cursor: pointer; }
		div.container header div.inner ul.social li.search form.search button.search-submit:hover { background: #36489A; }

	.nav-btn { display: none; color: #FFF; text-transform: uppercase; font-weight: bold; line-height: 55px; text-align: center; background: #28377B; }

	div.container header nav { background:#3368C6; }
	div.container header nav div.inner { padding-top: 0; padding-bottom: 0; }
	div.container header nav div.inner ul { list-style: none; display: flex; }
	div.container header nav div.inner ul li { display: inline-block; flex-grow: 1; position: relative; }
	div.container header nav div.inner ul li a { color: #FFF; display: block; text-transform: uppercase; font-weight: bold; line-height: 55px; border-right: #4877CC 1px solid; text-align: center; }
	div.container header nav div.inner ul li a:hover { background:#3163BF; }
	div.container header nav div.inner ul li:first-of-type a { border-left: #4877CC 1px solid; }

	div.container header nav div.inner ul li ul { display: none; }
	div.container header nav div.inner ul li:hover ul { display: block; position: absolute; top:54px; left:50%; width: 240px; background: #334499; transform: translateX(-50%); z-index: 999; }
	div.container header nav div.inner ul li ul:before { width: 14px; height: 7px; content: ""; background: url("assets/images/nav-arrow.png") 0 0 no-repeat; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); }
	div.container header nav div.inner ul li ul li { display: block; }
	div.container header nav div.inner ul li ul li:first-of-type a { border-left:none; }
	div.container header nav div.inner ul li ul li a { border-right: none; border-bottom: #4877CC 1px solid; line-height: 22px; padding: 10px; font-size: 14px; }
	div.container header nav div.inner ul li ul li a:hover { background: #28377B; }


	div.container div.newsalert { }
	div.container div.newsalert div.title { background: #FFBF25; line-height: 55px; width: 126px; display: inline-block; float:left; color:#FFF; font-weight: bold; text-align: center; }
	div.container div.newsalert div.message { background: #EFEFEF; line-height: 55px; padding: 0 15px; width: calc(100% - 126px); display: inline-block; float:left; color:#3367C5; font-weight: bold; overflow: hidden; }
div.container div.newsalert div.message div { color:#3367C5; font-weight: bold; line-height: 55px; }
	div.container div.quicklinks { }


div.container div.hero { min-height: 570px; background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; }
	div.container div.hero div.inner { align-self: center; }
	div.container div.hero div.inner h1 { font-size:40px; line-height: 1; color:#FFF; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); margin-bottom: 25px; }
	div.container div.hero div.inner h1 span { display: block; font-size: 20px; line-height: 1; color:#FFF; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); margin-bottom: 10px; }
	div.container div.hero div.inner p { color:#FFF; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); line-height: 1.5; margin-bottom: 25px; max-width: 70%; }
	div.container div.hero div.inner a.readmore { display: inline-block; background: #3368C6; color:#FFF; font-weight: bold; padding: 14px 40px; }
	div.container div.hero div.inner a.readmore:hover { background: #36489A; }

div.container div.hero-overlay { background: url("assets/images/hero-overlay.png") bottom center no-repeat; background-size: cover; height: 93px; margin-top: -93px; }


.hero-sub { min-height: 340px; background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; }
	.hero-sub .inner { align-self: center; }
	.hero-sub .inner h1 { font-size:48px; line-height: 1; color:#FFF; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); text-align: center; }


.content-sub { padding-top: 50px; padding-bottom: 50px; }
	.content-sub .left { width: calc(100% - 280px); float: left; }
	.content-sub .left.left-wide { width: 100%; float: left; }
		.content-sub .left h2 { color:#36489A; font-size: 26px; margin-bottom: 15px; margin-top:30px; font-weight:normal; }
		.content-sub .left h3 { color:#3368C6; font-size: 20px; margin-bottom: 15px; margin-top:30px; font-weight:normal; }
			.content-sub .left ul, .content-sub .left ol { margin: 20px; }
			.content-sub ul#custom-ul { padding-left: 50px; }
			.content-sub ul#custom-ul li {list-style-image: url(assets/images/bullet-point.png);}
			.content-sub ul#custom-ul li span { position: relative; top: -4px; }
			.content-sub .left p { margin-bottom: 20px; }
			.content-sub .left table { width: 100% !important; border:none !important; border-collapse: collapse; margin-bottom: 15px; }
			.content-sub .left table td { border:#B4DAEF 1px solid; padding: 5px; }
			.content-sub .left table th { border:#B4DAEF 1px solid; padding: 5px; background: #B4DAEF; }
			.content-sub .left .alignleft { float: left; margin: 0 15px 15px 0; }
			.content-sub .left .alignright { float: right; margin: 0 0 15px 15px; }
			.content-sub .left img { border-radius: 3px; }
			.content-sub .left article { border-bottom:#B4DAEF 1px dotted; padding-bottom: 30px; margin-bottom: 30px; }
			.content-sub .left article h2 { color:#36489A; font-size: 26px; margin-bottom: 5px; margin-top:30px; }
			.content-sub .left article h2 a { color:#36489A; font-size: 26px; font-weight:normal; }
			.content-sub .left article h2 a:hover { color: #333; }
			.content-sub .left span.date { color:#B4DAEF; margin-bottom: 15px; display: block; }


	.content-sub .right { width: 240px; float: right; }
	.content-sub .right h3 { background:#B4DAEF; color:#3368C6; padding: 18px 15px; font-size: 20px; font-weight: normal; }
	.content-sub .right ul { list-style: none; background: #E7F3FA; }
	.content-sub .right ul li { }	
	.content-sub .right ul li a { color:#3368C6; display: block; padding: 12px 15px; border-bottom:#B4DAEF 1px solid; font-size: 15px; }	
		.content-sub .right ul li a:hover { background: #D7EBF7; }

div.container div.home-contactinfo { background: #B4DAEF; }
	div.container div.home-contactinfo div.inner { padding-top: 25px; padding-bottom: 25px; }
	div.container div.home-contactinfo div.inner ul { list-style: none; display: flex; }
	div.container div.home-contactinfo div.inner ul li { flex-grow: 1 }
	div.container div.home-contactinfo div.inner ul li a { display: block; color:#3367C5; font-size: 14px; }
	div.container div.home-contactinfo div.inner ul li a i { margin-top: -7px; float: left; width: 54px; height: 54px; background: #FFF; line-height: 55px; text-align: center; color:#3367C5; margin-right: 10px; font-size: 26px; border-radius: 27px; }
	div.container div.home-contactinfo div.inner ul li a span { color:#354799; display: block; font-size: 18px; font-weight: bold; }
	div.container div.home-contactinfo div.inner ul li a:hover i {  background:#3367C5; color: #FFF; }

div.container div.home-content { margin:40px 0; }

	div.container div.home-content div.inner div.quicklinks ul { list-style: none; display: flex;}
	/*float:left; width: 31%; }*/
	div.container div.home-content div.inner div.quicklinks ul li { color:#FFF; font-weight: bold; min-height: 150.5px; position: relative; background-position: center; background-size: cover; display: inline-block; width: 100%; float: left; margin: 10px; }
	div.container div.home-content div.inner div.quicklinks ul li a { background: rgba(51, 104, 198, 0.8); color: #FFF; padding: 15px; position: absolute; bottom:15px; left:0; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); }

	div.container div.home-content div.inner div.quicklinks ul li a:hover { background: rgba(51, 104, 198, 1); }

	div.container div.home-content div.inner div.quicklinks .twitterfeed { float: right; width: 31% !important; border:#EFEFEF 1px solid !important; margin: 0 3.5%; display: none;}

	div.container div.home-content div.inner div.quicklinks .home-video { float: right; width: 31% !important; border:#EFEFEF 1px solid !important; display: none;}
	div.container div.home-content div.inner div.quicklinks .home-video video { float: left; }

div.container footer { background: #EFEFEF url("assets/images/footer-overlay.png") bottom center no-repeat; background-size: cover; }
	div.container footer div.inner { padding-top: 30px; padding-bottom: 30px; text-align: center; }
	div.container footer div.inner h3 { color: #3367C5; font-size: 36px; line-height: 1; font-weight: 400; }
	div.container footer div.inner p { margin: 15px 0 25px; }
	div.container footer div.inner img { }
	div.container footer div.footerlinks { background: #8DC8E7; text-align: center; }
	div.container footer div.footerlinks .inner { padding-top: 0; padding-bottom: 0; }
	div.container footer div.footerlinks ul { list-style: none; }
	div.container footer div.footerlinks ul li { display: inline-block; }
	div.container footer div.footerlinks ul li a { display: block; line-height: 60px; padding: 0 20px; color:#FFF; }
	div.container footer div.footerlinks ul li a:hover { color:#3368C6; }


div.container div.lower { }
	div.container div.lower div.inner { padding-top: 30px; padding-bottom: 30px; font-size: 14px; }
	div.container div.lower div.inner a { float: right; text-align: right; color:#333; font-size: 14px; }
	div.container div.lower div.inner a:hover { color:#3368C6; }



@media screen and (max-width: 995px) {

	div.container header div.inner a.logo { width: 100%; float: none; }
	div.container header div.inner a.logo img { margin: 0 auto; display: block; }
	
	div.container header div.inner ul.social { float: none; text-align: center; margin-top: 15px; }
	div.container header div.inner ul.social li { float: none; }
		
	.nav-btn { display: block; }
	div.container header nav div.inner ul { display: none; }
	div.container header nav div.inner ul li { flex-grow: none; display: block; border-bottom: #4877CC 1px solid; }
	div.container header nav div.inner ul li.menu-item-has-children:after { content:"\f0dd"; font-family: "Font Awesome 5", "Font Awesome 5 Pro"; position: absolute; top:10px; right:0; width: 36px; height: 36px; background:rgba(40, 55, 123, 0.8); color: #FFF; font-weight: bold; border-radius: 18px; line-height: 31px; text-align: center; }
	div.container header nav div.inner ul li ul li.menu-item-has-children:after { content:""; position: absolute; top:0; right:0; width: 0; height: 0; background:none; }
	div.container header nav div.inner ul li:hover ul { display: none; position: relative; top:0; left:0; width: 100%; background: #334499; transform: translateX(0%); }
	div.container header nav div.inner ul li a { border-right: none; }
	div.container header nav div.inner ul li:first-of-type a { border-left: none; }
	div.container header nav div.inner ul li ul:before { display: none; }
	
	div.container div.hero div.inner p { max-width: 100%; }
	
	div.container div.home-contactinfo div.inner ul { display: block; }
	div.container div.home-contactinfo div.inner ul li { display: block; width: 100% !important; float: none; clear: both; margin-bottom: 30px; }
	div.container div.home-contactinfo div.inner ul li:last-of-type { margin-bottom: 0; }
	
	
	div.container div.home-content div.inner div.quicklinks ul { width: 100%; }
	div.container div.home-content div.inner div.quicklinks .twitterfeed { width: 100% !important; margin: 30px 0 0 0 !important }
	div.container div.home-content div.inner div.quicklinks .home-video { width: 100% !important; margin: 30px 0 0 0 !important; }
	
	
	
	div.container footer { background:#EFEFEF; }	
	div.container footer div.footerlinks ul li { display: block; }
	div.container footer div.footerlinks ul li a { line-height: 45px; }
	
	div.container div.lower div.inner { text-align: center; }
	div.container div.lower div.inner a { float: none; display: block; text-align: center; margin-bottom: 15px; }

	
	.content-sub .left { width: 100%; }
	.content-sub .right { width: 100%; margin-top: 30px; }
}


@media screen and (max-width: 805px) {

}

