/******************************************************************
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=Montserrat:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');

	/*Website Maximum Width - Default: 1920px*/
	.site-width { max-width: 1920px; }
	/*Website Maximum Inner Width - Default: 1280px*/
	.inner-width { max-width: 1280px; width: 100%; margin: 0 auto; }
	/*Post Maximum Width - Default: 960px*/
	.single-post article.post { max-width: 960px; margin: 0 auto; }

/*==================== Standards ====================*/
	/* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc */

	body { background: url(https://headlineshertford.co.uk/wp-content/themes/SCGrid-2017/library/images/bg.png); background-position: center; background-attachment: fixed; background-size: contain; background-repeat: no-repeat; }
	*, p { font-family: 'Montserrat', sans-serif; }

	/*Text*/
		h1, h2, h3, h4, h5, h6, p {color: #000; font-family: 'Montserrat', sans-serif; margin: 0 0 3px 0; }
		h1{font-size: 30px;}
		h2{font-size: 26px;}
		h3{font-size: 22px;}
		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;}

	/*Gallery*/
	main#main .wp-block-gallery.is-cropped img { height: 100%; max-width: unset; }
	/*Gallery Caption*/
		.wp-caption-text, .gallery-caption { text-align: center; }

	/*Bullet Points/Numbered Lists*/
		.entry-content ul > li { list-style-type: disc; color: #000; padding-bottom: 5px; }
		.entry-content ol > li { list-style-type: decimal; padding-bottom: 5px; }

	/*Responsive Navigation*/
		/*BG color*/
			body .slicknav_menu{background: #f3f3f3;}
		/*Border Color*/
			.slicknav_menu  ul li a{border: 1px solid #666;}
		/*Text Color*/
			.slicknav_nav li a{color: #000;}
			.slicknav_nav li a:hover{color: #666;}
		/*Sub Menu Arrow*/
			.slicknav_arrow{color: #000;}
			.slicknav_arrow:hover{color: #666;}




/*==================== Header ====================*/
.header { background-color: rgba(39, 16, 43,0.8); height: 103px; position: fixed; z-index: 999; }
.inner-header { background-color: transparent; overflow: unset; }
.logo { width: 340px; float: left; }
.logo img { padding: 30px 20px; margin: 0 auto; }

.header-right { float: right; }

.contact-details { height: 103px; float: left; display: table; float: right; }
.contact-details p { color: #fff; font-size: 16px; font-weight: 400; line-height: normal; display: table-cell; vertical-align: middle; padding: 0px 40px 0px 40px; }
.contact-details a { color: #fff; }
.contact-details a:hover, .contact-details a:focus { opacity: 0.8; text-decoration: none; }

.booking-button { background-color: rgba(222,172,7,0.9); height: 103px; display: table; float: right; }
.booking-button a { color: #27102B; font-size: 16px; font-weight: bold; line-height: normal; text-transform: uppercase; display: table-cell; vertical-align: middle; padding: 20px; }
.booking-button a:hover, .booking-button a:focus { opacity: 0.8; text-decoration: none; }

.header-margin { width: 100%; float: left; position: relative; margin-top: 103px; }
.home .header-margin { display: none; }

.nav { background-color: transparent; width: auto; height: 103px; display: table; }
.nav ul { background-color: transparent; display: table-cell; vertical-align: middle; padding: 0px 20px; }
.nav li a { color: #fff; font-size: 16px; font-weight: 400; line-height: normal; text-transform: uppercase; padding: 12px 18px; }
.nav li a:hover, .nav li a:focus { opacity: 0.8; text-decoration: none; }

/* Current Menu Item */
.nav li.current-menu-item > a { color: #fff; font-weight: bold; }
.nav li.current-menu-parent > a { color: #fff; font-weight: bold; }
.nav li ul.sub-menu li.current-menu-item a { color: #fff; font-weight: bold;  }

.nav li ul.sub-menu {background-color: #27102B;}
.nav li ul.sub-menu, .nav li ul.children { border: none; }
.nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 300px; border-bottom: 1px solid #ccc; }



/* Responsive Menu */
.responsive-menu-button { top: 25px !important; background: none !important; color: #fff !important; }
.responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after { background-color: #fff; }
button#responsive-menu-button { z-index: 999; }
button#responsive-menu-button:hover .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-inner::after, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:hover .responsive-menu-open .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-inner::after, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::before, button#responsive-menu-button:focus .responsive-menu-open .responsive-menu-inner::after { background-color: #fff !important; }
.responsive-menu-open .responsive-menu-inner, .responsive-menu-open .responsive-menu-inner::before, .responsive-menu-open .responsive-menu-inner::after { background-color: #fff; }

#responsive-menu-container { background: #27102B; }
#responsive-menu-container #responsive-menu-wrapper { background: #27102B; }
#responsive-menu-container #responsive-menu li.responsive-menu-item a { background: #27102B; text-transform: uppercase; }
#responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link { background-color: #907EAB; border-color: #907EAB; }

#responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow { background-color: #27102B; }
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a { background-color: #27102B; }
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link { background-color: #907EAB; }
#responsive-menu-container #responsive-menu li.current-menu-item div.responsive-menu-subarrow { background-color: #907EAB; }


#responsive-menu-additional-content { float: left; }
#responsive-menu-additional-content .contact { width: 100%; float: left; margin-bottom: 15px; }
#responsive-menu-additional-content .contact a { color: #fff; font-size: 16px; line-height: 20px; float: left; margin-right: 20px; margin-bottom: 10px; }
#responsive-menu-additional-content .button { background-color: rgba(222,172,7,0.9); color: #27102B; font-weight: bold; text-transform: uppercase; float: left; padding: 20px;  border: none; margin-bottom: 30px; }

#responsive-menu-additional-content .social { width: 100%; float: left; margin-bottom: 15px; }
#responsive-menu-additional-content .social a { padding: 0px 10px; }

body.logged-in.admin-bar .responsive-menu-button { top: 57px !important; }
body.logged-in.admin-bar #responsive-menu-container { top: 32px !important; }



/*==================== Body ====================*/
#content { background-color: #fff; background-color: rgb(255,255,255,0.9); padding: 0px; }
.inner-content { padding: 30px 20px; }

.wp-block-columns { margin-bottom: 1.75em; }

h1, h2, h3, h4, h5, h6, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #27102B; font-weight: 500; text-transform: uppercase; }
h1.page-title { text-align: center; }
p, #content p { font-size: 20px; font-weight: 300; line-height: 22px; }
p:empty { display: none; }

.purple-overlay { background-color: rgba(39,16,43,0.5); position: absolute; text-align: center; top: 0; left: 0; width: 100%; height: calc(100% + 1px); transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; }


/*Buttons*/
.button, #content .button, a.button, #content a.button { background-color: #27102B; color: #fff; font-size: 18px; text-transform: uppercase; text-decoration: none; float: left; padding: 15px 20px; }
.button:hover, #content .button:hover { opacity: 0.7; }


/* Tables */
.entry-content table { background-color: #F2F2F2; margin: 0px auto 20px auto; }
.entry-content table th { background-color: #27102B; color: #fff; font-size: 14px; text-align: left; text-transform: uppercase; padding: 15px; }
.entry-content table tr td { border-bottom: 5px solid #fff; }
.entry-content table td, #content .entry-content table td { font-size: 14px; padding: 10px 15px; }


/*Home Page*/
.home #content h1, .home #content h2 { font-size: 30px; line-height: 40px; }
.home #content .inner-content p { color: #9B9B9B; font-size: 25px; line-height: 27px; }
.home .flex-center img { float: left; padding: 20px; }
.home .embed-clear { padding-bottom: 120px; }
.home-news { padding: 40px 10px; }
.latest-news .news-post { padding: 0px 10px; margin-bottom: 20px; }
.latest-news a.button { margin-right: auto; margin-left: auto; }

/*PageCTA*/
.pageCTA.flex-container { justify-content: space-between; }
.pageCTA .gridColumn { position: relative; margin-bottom: 40px; }
.pageCTA .d-1of3.gridColumn { flex-basis: calc(33.3333333333% - 13.33333333333333px); }
.pageCTA .button, #content .pageCTA .button { background-color: rgba(0,0,0,0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 30px; border: 1px solid #6E6E6E; }
.pageCTA .button h3, #content .pageCTA .button h3 { color: #fff; font-weight: 300; float: left; margin-bottom: 0px; }


/*Pricing Page*/
.page-id-17 table { width: 100%; }


/*Meet the Team Page*/
.page-id-74 .wp-block-column { text-align: center; text-transform: uppercase; }
.page-id-74 .wp-block-column h2, .page-id-74 #content .wp-block-column h2 {  margin-top: 15px; margin-bottom: 5px; }
.page-id-74 .wp-block-column p, .page-id-74 #content .wp-block-column p { margin-bottom: 5px; }
.page-id-74 .wp-block-column img { border-radius: 50px; }
.page-id-74 .wp-block-column .darken img { -webkit-filter: brightness(0.9); filter: brightness(0.9); }


/*Testimonials Page*/
.page-id-180 .entry-content p, .page-id-180 #content .entry-content p { font-size: 18px; text-align: center; }
.page-id-180 .entry-content p::after, .page-id-180 #content .entry-content p::after { content: ''; display: block; width: 75%; border-top: 1px solid #27102B; margin: 20px auto 0 auto; }
.page-id-180 .entry-content p strong, .page-id-180 #content .entry-content p strong { font-size: 16px; }


/*Contact Us Page*/
.page-id-19 #content h1.page-title { margin-bottom: 0px; }

/*Google reCAPTCHA Badge*/
.grecaptcha-badge { opacity: 0 !important; }
.page-id-19 .grecaptcha-badge { opacity: 1 !important; }



/*News/Blog Page*/
.blog .inner-content { padding: 30px 10px; }
.all-news { justify-content: flex-start; margin-bottom: 0px; }
.all-news .news-post { padding: 0px 10px; margin-bottom: 40px; }
.news-post img { margin-bottom: 10px; }
.news-post .post-text { width: 100%; float: left; }
.news-post .post-text a, #content .news-post .post-text a { text-decoration: none; }
.news-post h3.post-title, #content .news-post h3.post-title { margin-bottom: 10px; }
.news-post p.post-date, #content .news-post p.post-date { font-size: 16px; line-height: 18px; margin-bottom: 10px; }

/* Pagination */
.pagination, #content .pagination { text-align: center; width: 100%; float: left; clear: both; margin: 20px 0px; }
.pagination ul, #content .pagination ul {display: inline-block;background-color: #27102B;white-space: nowrap;padding: 0;margin: 0;clear: both;border-radius: 3px;}
.pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
.pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 16px; font-size: 16px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #fff; }
.pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #DEAC07 !important; color: #fff !important; }
.pagination .current, #content .pagination .current { cursor: default; color: #fff !important; background-color: #DEAC07; }
.pagination .current:hover, .pagination .current:focus { background-color: #DEAC07; color: #fff !important;}

/*Single Post*/
.single h1.post-title, .single #content h1.post-title { text-align: center; margin-bottom: 10px; }
.single p.post-date, .single #content p.post-date { text-align: center; }
.single .post-image { margin-bottom: 20px; }




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

#footer { background-color: #27102B; padding: 30px 0px 30px 0px; }
.inner-footer { background: none; padding: 0px 20px; }

#footer h2 { color: #fff; font-size: 30px; text-align: center; margin-bottom: 20px; }
#footer p { color: #fff; font-size: 20px; line-height: 24px; text-align: center; margin-bottom: 20px; }

#footer-phone { text-transform: uppercase; }

/* Footer Form */
.footer-form { width: 100%; max-width: 1280px; float: left; }
#footer .wpcf7 { width: 100%; max-width: 870px; float: none; margin: 0px auto 60px auto; }
/* Form Input */
.footer-form input, .footer-form textarea, .footer-form select, .footer-form button { background-color: rgba(0,0,0,0.5); color: #434646; font-size: 14px; float: left; padding: 10px; margin-bottom: 20px; border: 1px solid #6E6E6E; }
.footer-form input, .footer-form textarea { width: 100%; }
/* Name Input */
.footer-form span.wpcf7-form-control-wrap.your-name input, .footer-form span.wpcf7-form-control-wrap.your-tel input {width: calc(50% - 10px);margin-right: 10px;}
/* Email Input */
.footer-form span.wpcf7-form-control-wrap.your-email input, .footer-form span.wpcf7-form-control-wrap.your-company input { width: calc(50% - 10px); margin-left: 10px; }
/* Message Input */
.footer-form textarea.wpcf7-form-control.wpcf7-textarea { height: 160px; margin-bottom: 30px; }
/* Submit Button */
.footer-form input.wpcf7-form-control.wpcf7-submit { background-color: rgba(0,0,0,0.5); color: #fff; font-size: 18px; font-weight: 400; text-transform: uppercase; width: 383px; max-width: 100%; float: none; padding: 15px; border: 1px solid #6E6E6E; margin-right: auto; margin-left: auto; }
.footer-form input.wpcf7-form-control.wpcf7-submit:hover { opacity: 0.7; }
.footer-form input::placeholder, .footer-form textarea::placeholder { color: #fff; font-size: 18px; font-weight: 300; text-transform: uppercase; }

.footer-social { text-align: center; padding: 30px 20px 20px 20px; }
a.social-icon { color: #fff; font-size: 30px; padding: 0px 10px; }
a.social-icon:hover { opacity: 0.7; }

.footer-nav { text-align: center; padding: 10px 20px 0px 20px; }
#footer .footer-nav p { color: #fff; font-size: 14px; line-height: 24px; text-transform: uppercase; margin-bottom: 0px; }
.footer-nav a { color: #fff; font-size: 14px; line-height: 24px; text-transform: uppercase; }


/**
 * Contact form edits
 */
.wpcf7-not-valid-tip {/*display:none!important;*/ display: block;clear: both;}
.wpcf7-form-control-wrap {position:static;}

.wpcf7-form input,.wpcf7-form textarea {color: white;}

/*==================== Media Queries ====================*/
	@media (max-width: 1796px)
	{
		/*Fixed Header/Nav*/
		.header { height: 146px; }
		.nav { height: auto; }
		.nav ul { padding-left: 0px; }
		.nav li ul.sub-menu { background-color: rgba(39, 16, 43,0.8); }
		.booking-button { height: auto; margin-top: 20px; margin-right: 20px; }
		.header-margin { margin-top: 146px; }
	}
	@media (max-width: 1280px)
	{
		/*Small Desktop*/

	}
	@media (max-width: 1029px)
	{
		/*Tablet*/
		.header { height: 103px; }
		.nav, .contact-details, .booking-button { display: none; }
		.header-margin { margin-top: 103px; }
		#responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link { font-size: 16px; }
		#content br { display: none; }
		.page-id-180 #content br { display: block; }
	}
	@media (max-width: 783px)
	{
		/*Admin Bar/Responsive Menu*/
		body.logged-in.admin-bar .responsive-menu-button { top: 71px !important; }
		body.logged-in.admin-bar #responsive-menu-container { top: 46px !important; }

	}
	@media (max-width: 767px)
	{
		/*Mobile*/
		.booking-button { display: none; }
		.pageCTA .m-all.gridColumn { flex-basis: 100%; }
		.header { background-color: #27102B; }
		.home .header-margin { display: block; }
	}
	@media (max-width: 480px)
	{
		/*Small Mobile*/
		.header { background-color: #27102B; }
		.home .header-margin { display: block; }

	}
	@media (max-width: 400px)
	{
		/*Responsive Menu Fixes*/
		.header { height: 92px; }
		.logo { width: 260px; }
		body.logged-in.admin-bar .responsive-menu-button { top: 64px !important; }
		.header-margin { margin-top: 92px; }
		.responsive-menu-button { top: 18px !important; }
		#responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link, #responsive-menu-additional-content .contact a { font-size: 14px; }
	}



/* Reopening Popup (COVID-19) - June 2020 */
#popmake-300.pum-theme-294 .pum-container, .pum-theme-lightbox .pum-container { background: url('https://headlineshertford.co.uk/wp-content/uploads/2020/06/reopening-bg.jpg'); min-height: 440px; border: none; }

#popmake-300 h1 { color: #fff; font-size: 80px; line-height: 115px; text-transform: unset; margin-bottom: 20px; }
#popmake-300 h1 span.date { font-size: 130px; font-family: 'Marck Script', cursive; }
#popmake-300 h2 { color: #fff; font-size: 40px; text-transform: unset; margin-bottom: 20px; }
#popmake-300 p { color: #fff; font-size: 22px; font-weight: 500; }

@media (max-width: 1029px)
{
	#popmake-300 h1 { font-size: 50px; line-height: 70px; }
	#popmake-300 h1 span.date { font-size: 80px; }
	#popmake-300 h2 { font-size: 30px; }
	#popmake-300 p { font-size: 20px; }
}

@media (max-width: 480px)
{
	#popmake-300 h1 { font-size: 40px; line-height: 60px; }
	#popmake-300 h1 span.date { font-size: 70px; }
}

@media (max-width: 380px)
{
	#popmake-300 h1 { font-size: 30px; line-height: 50px; }
	#popmake-300 h1 span.date { font-size: 60px; }
	#popmake-300 h2 { font-size: 26px; }
}


/* Closing Popup (COVID-19) - December 2020 */
#popmake-610.pum-theme-294 .pum-container, .pum-theme-lightbox .pum-container { background: url('https://headlineshertford.co.uk/wp-content/uploads/2020/06/reopening-bg.jpg'); background-repeat: no-repeat; background-size: cover; min-height: 440px; border: none; }

#popmake-610 h1 { color: #fff; font-size: 80px; line-height: 115px; text-transform: unset; margin-bottom: 20px; }
#popmake-610 h1 span.date { font-size: 130px; font-family: 'Marck Script', cursive; }
#popmake-610 h2 { color: #fff; font-size: 40px; text-transform: unset; margin-bottom: 20px; }
#popmake-610 p { color: #fff; font-size: 22px; font-weight: 500; line-height: normal; margin-bottom: 20px; }

@media (max-width: 1029px)
{
	#popmake-610 h1 { font-size: 50px; line-height: 70px; }
	#popmake-610 h1 span.date { font-size: 80px; }
	#popmake-610 h2 { font-size: 30px; }
	#popmake-610 p { font-size: 20px; }
}

@media (max-width: 480px)
{
	#popmake-610 h1 { font-size: 40px; line-height: 60px; }
	#popmake-610 h1 span.date { font-size: 70px; }
}

@media (max-width: 380px)
{
	#popmake-610 h1 { font-size: 30px; line-height: 50px; }
	#popmake-610 h1 span.date { font-size: 60px; }
	#popmake-610 h2 { font-size: 26px; }
}