/* Use standard Sitecore CSS colour classes for site-specific coloured items such as headings, breakout blocks and breakout areas
Home page - dkgreen
RVCP - teal
Lepe - dkblue
Staunton CP - red
QECP - purple
RHCP - blue
(Manor Farm, due at a later date - green)
*/


#page {
	background-color: rgba(224,219,213,0.58);
	background-image:  url("/-/media/files/css/things-to-do/countryside-weddings/cs-weddings-background.png");
	background-repeat: repeat;
	background-position: top left;
}

.banner-area{
	padding-bottom: 0;
	padding-top: 0;
}

/* Hide the header section and the default H1 heading inside it */
#page_content header {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* Hide empty headings on homepage hero images */
.columns.twelve.center {
	display: none;
}

/* HEADINGS */
.pseudo-h1, #page_content H2, #page_content H3, #page_content H4, p.caption, #local_menu_header li {
	font-family: 'Lora';
    font-weight: 600;
	text-align: left;
}

#page_content h2 {
	font-size: 2.25rem;
}

/* smaller h2 headings for breakout blocks */
#page_content .breakout-bg.bg h2 {
	font-size: 2rem;
	margin-top: 3rem;
	margin-bottom: 1rem;
}

@media only screen and (min-width: 48em) {
	#page_content .breakout-bg.bg h2 {
		margin-top: 2rem;
	}
}

#page_content h3 {
	font-size: 1.6rem;
}

/* Lepe headings */
#page_content h2.dkblue, #page_content h3.dkblue {
	color: #233645;
}

/* RVCP headings */
#page_content h2.teal, #page_content h3.teal {
	color: #35545C;
}

/* QECP headings */
#page_content h2.purple, #page_content h3.purple {
	color: #2b2036;
}

/* RHCP headings */
#page_content h2.blue, #page_content h3.blue {
	color: #063d4c;
}

/* Staunton CP headings */
#page_content h2.red, #page_content h3.red {
	color: #4e1819;
}


/* WELLS - Classes can be added to wells in rich text to enable multiple styles of well (colours, background-images, etc) */

#page #page_content .well{
	height:100%;
}

#page #page_content .well h2 {
	font-size: 1.6rem;
	padding-top: 0rem;
	text-align: center;
}

@media only screen and (min-width: 64em) {
	#page #page_content .well h2 {
		text-align: revert;
	}
}

#page .well p.button {
	text-align: center;
}

@media only screen and (min-width: 64em) {
	#page .well p.button {
		text-align: revert;
	}
}

/* Home page wells */
#page .well.parklink {
	background: #fff;
	color: #000;
	padding: 0;
}

#page .well.parklink div {
	padding: 2rem;
}

#page .well.parklink h2 {
	color: #064337;
}

#page .well.parklink.green {
	background: #064337;
	color: #fff;
}

#page .well.parklink.green h2 {
	color: #fff;
}

#page .well.parklink div p:last-of-type {
	text-align: center;
}

@media only screen and (min-width: 64em) {
	#page .well.parklink div p:last-of-type {
		text-align: revert;
	}
}


/* Lepe wells */
#page .well.dkblue {
	background: #233645;
	color: #fff;
}

#page .well.dkblue.summer:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 27%;
	height: 27%;
	top: -0.5em;
	right: 0em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/lepe-summer.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	#page .well.dkblue.summer:after {
		top: -0.5em;
		right: -2em;
	}
}

@media only screen and (min-width: 48em) {
	#page .well.dkblue.summer:after {
		width: 30%;
		height: 30%;
		top: -1em;
		right: 0em;
	}
}

@media only screen and (min-width: 64em) {
	#page .well.dkblue.summer:after {
		width: 40%;
		height: 40%;
		top: -1em;
		right: -4em;
	}
}

#page .well.dkblue.winter:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 27%;
	height: 27%;
	top: -0.5em;
	right: 0em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/lepe-winter.png);
	background-repeat: no-repeat;
	background-size: contain;
}

@media only screen and (min-width: 26em) {
	#page .well.dkblue.winter:after {
		top: -0.5em;
		right: -2em;
	}
}

@media only screen and (min-width: 48em) {
	#page .well.dkblue.winter:after {
		width: 30%;
		height: 30%;
		top: -1em;
		right: 0em;
	}
}

@media only screen and (min-width: 64em) {
	#page .well.dkblue.winter:after {
		width: 40%;
		height: 40%;
		top: -1em;
		right: -4em;
	}
}

#page .well.lepe.blue {
	background-color: #a0bcc9;
}

#page .well.lepe.blue h2 {
	color: #233645;
	font-size: 1.5rem;
}

/* RVCP wells */
#page .well.teal {
	background: #49717B;
	color: #fff;
}

#page .well.teal h3 {
	text-align: center;
	padding-top: 1.6rem;
}

#page .well.teal p:last-of-type{
	text-align: center;
}

@media only screen and (min-width: 48em) {
	#page .well.teal p:last-of-type {
		text-align: revert;
	}
}

#page .well.ltteal {
	background-color: #B1D8D0;
	color: #000;
}

#page #page_content .well.ltteal h2 {
	color: #35545C;
}

@media only screen and (max-width: 47em) {
	#page .well.ltteal h2 {
		text-align: center;
		font-size: 2rem;
	}
}

#page .well.teal.maple:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 25%;
	height: 25%;
	top: -0.5em;
	right: 0em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-maple.png);
	background-repeat: no-repeat;
	background-size: contain;
}

#page .well.teal.aspen:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 25%;
	height: 25%;
	top: -0.5em;
	right: 0em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-aspen.png);
	background-repeat: no-repeat;
	background-size: contain;
}

#page .well.teal.birch:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 22%;
	height: 22%;
	top: -0.5em;
	right: 0.5em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-birch.png);
	background-repeat: no-repeat;
	background-size: contain;
}

#page .well.teal.elm:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 25%;
	height: 25%;
	top: -1.5em;
	right: -0.5em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-elm.png);
	background-repeat: no-repeat;
	background-size: contain;
}

#page .well.teal.oakfield:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 27%;
	height: 27%;
	top: -0.5em;
	right: -1.3em;
	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-oak.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/* Medium mobiles, like iphone 15 */
@media only screen and (min-width: 22em) {
	#page .well.teal.maple:after {
		width: 25%;
		height: 25%;
		top: -0.5em;
		right: 0.5em;
	}

	#page .well.teal.aspen:after {
		width: 25%;
		height: 25%;
		top: -0.5em;
		right: 0em;
	}

	#page .well.teal.elm:after {
		width: 25%;
		height: 25%;
		top: -1em;
		right: -1em;
	}

	#page .well.teal.oakfield:after {
		width: 29%;
		height: 29%;
		top: -0.5em;
		right: -2.3em;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	#page .well.teal.maple:after {
		width: 30%;
		height: 30%;
		top: -0.5em;
		right: 0.6em;
	}

	#page .well.teal.aspen:after {
		width: 30%;
		height: 30%;
		top: -0.7em;
		right: 0.7em;
	}

	#page .well.teal.birch:after {
		width: 28%;
		height: 28%;
		top: -0.5em;
		right: 0.5em;
	}

	#page .well.teal.elm:after {
		width: 27%;
		height: 27%;
		top: -0.9em;
		right: 0.7em;
	}

	#page .well.teal.oakfield:after {
		width: 26%;
		height: 26%;
		top: -1.2em;
		right: 0.7em;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	#page .well.teal.maple:after {
		width: 30%;
		height: 30%;
		top: -1em;
		right: 1em;
	}

	#page .well.teal.aspen:after {
		width: 28%;
		height: 28%;
		top: -1em;
		right: 0.7em;
	}

	#page .well.teal.birch:after {
		width: 27%;
		height: 27%;
		top: -1em;
		right: 1em;
	}

	#page .well.teal.elm:after {
		width: 24%;
		height: 24%;
		top: -1.5em;
		right: 0.7em;
	}

	#page .well.teal.oakfield:after {
		width: 26%;
		height: 26%;
		top: -1.2em;
		right: 0.2em;
	}
}

@media only screen and (min-width: 90em) {
	#page .well.teal.maple:after {
		width: 25%;
		height: 25%;
		top: -1em;
		right: 1em;
	}

	#page .well.teal.aspen:after {
		width: 25%;
		height: 25%;
		top: -1em;
		right: -0.3em;
	}

	#page .well.teal.birch:after {
		width: 25%;
		height: 25%;
		top: -1em;
		right: 0em;
	}

	#page .well.teal.elm:after {
		width: 25%;
		height: 25%;
		top: -1.5em;
		right: -1.5em;
	}

	#page .well.teal.oakfield:after {
		width: 25%;
		height: 25%;
		top: -1.3em;
		right: -2.2em;
	}
}

@media only screen and (min-width: 120em) {
	#page .well.teal.maple:after {
		width: 25%;
		height: 25%;
		top: -1em;
		right: -0.7em;
	}

	#page .well.teal.aspen:after {
		width: 27%;
		height: 27%;
		top: -1em;
		right: -2.6em;
	}

	#page .well.teal.birch:after {
		width: 27%;
		height: 27%;
		top: -1em;
		right: -2.2em;
	}

	#page .well.teal.elm:after {
		width: 29%;
		height: 29%;
		top: -1.5em;
		right: -4em;
	}

	#page .well.teal.oakfield:after {
		width: 29%;
		height: 29%;
		top: -1.3em;
		right: -4.5em;
	}
}

/* Venue wells */
#page .well.venuelink {
	background: #fff;
	color: #000;
	padding: 0;
}

#page .well.venuelink div {
	padding: 2rem;
}

#page .well.venuelink h3 {
	text-align: center;
}

#page .well.venuelink p:last-of-type {
	text-align: center;
}

/*QECP wells */
#page .well.qecp.purple {
	background-color: #a38fb8;
}

#page .well.qecp.purple h2 {
	color: #2B2036;
	font-size: 1.5rem;
}
/*Staunton CP wells */

#page .well.staunton.red {
	background-color: #F07A7D;
}

#page .well.staunton.red h2 {
	color: #4E1819;
	font-size: 1.5rem;
}

/*RHCP wells */

#page .well.rhcp.blue {
	background-color: #b4e4ef;
}

#page .well.rhcp.blue h2 {
	color: #063D4C;
	font-size: 1.5rem;
}
/* Fix for same-height wells */
#page .conform-block>.columns>div {width: -webkit-fill-available;} 


/* LINKS */

/* Body content links */
#page a, #page a:hover, #page a:visited{
	color: #000;
	border-bottom: 1px solid #000;
}

/* White links for dark blue grids and wells */
#page .well.dkblue a, #page .well.dkblue a:hover, #page .well.dkblue a:visited{
	color: #fff;
	border-bottom: 1px solid #fff;
}

/* White PDF icons for dark blue wells */
#page .well.dkblue a[href$=".pdf"]:after, #page .well.dkblue a[href$=".pdf"]:after {
	color: #fff;
	border: 1px solid #fff;
}


/* BUTTONS - general settings */

#page a[role="button"], #page a[role="button"]:visited, button#search, #page .well a[role="button"] {
	background-color: #baa782;
	color: #000;
	border-radius: 50px;
	text-shadow: none;
	box-shadow: none;
	border: 0;
	font-weight: 700;
	text-transform:uppercase;
}

/* BREAKOUT BACKGROUND BLOCKS - */

/* Home page intro block */
.breakout-bg.bg.dkgreen {
	background-color: #064337;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.dkgreen .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkgreen .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.dkgreen .lead {
	color: #064337;
	background-color: #baa782;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.4rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkgreen .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* Oak branch asset */
/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkgreen::after {
		content: "";
    	position: absolute;
    	display: inline-block;
		height: 43%;
    	width: 43%;
   		top: -2.5rem;
    	right: 34rem;
    	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rhcp-oak-branch.png);
   		background-repeat: no-repeat;
    	background-size: contain;
    	transform: rotate(95deg);
		opacity: 0.25;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.dkgreen::after {
    	width: 43%;
   		top: 4rem;
    	right: 30rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.dkgreen::after {
    	width: 43%;
   		top: 8rem;
    	right: 30rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-bg.bg.dkgreen::after {
    	width: 43%;
   		top: 12rem;
    	right: 34rem;
	}
}

@media only screen and (min-width: 120em) {
		.breakout-bg.bg.dkgreen::after {
    	width: 43%;
   		top: 15rem;
    	right: 35rem;
	}
}

/* Lepe intro block */
.breakout-bg.bg.dkblue {
	background-color: #233645;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.dkblue .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkblue .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.dkblue .lead {
	color: #233645;
	background-color: #a0bcc9;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.4rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkblue .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* Lepe pine branch line drawing asset */

/* smaller mobile phones */
@media only screen and (min-width: 20em) and (max-width: 21em) {
	.breakout-bg.bg.dkblue::after {
		content: "";
    	position: absolute;
    	display: inline-block;
    	width: 20%;
    	height: 20%;
   		top: 76rem;
    	right: 1rem;
    	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/lepe-pine.png);
   		background-repeat: no-repeat;
    	background-size: contain;
	}
}

/* Medium mobiles, such as iphone 15 */
@media only screen and (min-width: 22em) {
	.breakout-bg.bg.dkblue::after {
		content: "";
    	position: absolute;
    	display: inline-block;
    	width: 20%;
    	height: 20%;
		top: 66.2rem;
    	right: 1rem;
    	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/lepe-pine.png);
   		background-repeat: no-repeat;
    	background-size: contain;
	}
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	.breakout-bg.bg.dkblue::after {
   		top: 46rem;
    	right: 1rem;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.dkblue::after {
    	width: 47%;
    	height: 47%;
   		top: 52.8rem;
    	right: 1rem;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.dkblue::after {
		width: 25%;
    	height: 25%;
   		top: 44.8rem;
    	right: 1rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.dkblue::after {
   		top: 51.6rem;
    	right: -1rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-bg.bg.dkblue::after {
    	width: 30%;
		height: 30%;
   		top: 45.8rem;
    	right: -7rem;
	}
}

@media only screen and (min-width: 100em) {
	.breakout-bg.bg.dkblue::after {
    	width: 30%;
		height: 30%;
   		top: 45.8rem;
    	right: 0rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-bg.bg.dkblue::after {
		height: 30%;
		width: 30%;
   		top: 57.4rem;
    	right: -1rem;
	}
}
	
/* Other dark blue breakout blocks for Lepe */
@media only screen and (max-width: 47em) {
	.breakout-bg.bg.dkblue.alternate-two {
		padding-top: 1.3rem;
	}
}


/* RVCP INTRO BLOCKS */
.breakout-bg.bg.teal {
	background-color: #49717B;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.teal .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.teal .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.teal .lead {
	color: #063d4c;
	background-color: #B1D8D0;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.7rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.teal .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* RVCP chapel tower line drawing asset - for rvcp home page */
.breakout-bg.bg.teal::after {
	content: "";
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 20%;
   	top: 72.1rem;
    right: 1rem;
    background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-tower.png);
   	background-repeat: no-repeat;
    background-size: contain;
}

/* Medium mobiles, like iphone 15 */
@media only screen and (min-width: 22em) {
	.breakout-bg.bg.teal::after {
		width: 18%;
    	height: 18%;
   		top: 66.8rem;
    	right: 1rem;
	}
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	.breakout-bg.bg.teal::after {
   		top: 41.7rem;
    	right: 1rem;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.teal::after {
    	width: 28%;
    	height: 28%;
   		top: 34.9rem;
    	right: 1rem;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.teal::after {
		width: 28%;
    	height: 28%;
   		top: 38rem;
    	right: 1rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.teal::after {
   		top: 43.6rem;
    	right: 1rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-bg.bg.teal::after {
    	width: 30%;
		height: 30%;
   		top: 45.8rem;
    	right: 0rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-bg.bg.teal::after {
		height: 28%;
		width: 28%;
   		top: 52.8rem;
    	right: 1rem;
	}
}

/* RVCP intro breakout block for child pages - no line drawing */
.breakout-bg.bg.teal.alternate::after {
    background-image: none;
}

/* QECP INTRO BLOCKS */
.breakout-bg.bg.purple {
	background-color: #4d385f;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.purple .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.purple .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.purple .lead {
	color: #2b2036;
	background-color: #a38fb8;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.7rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.purple .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* QECP line drawing asset - for QECP home page */
.breakout-bg.bg.purple::after {
	content: "";
    position: absolute;
    display: inline-block;
   	width: 20%;
    	height: 20%;
   		top: 76rem;
    	right: 1rem;
    background-image: url(/-/media/files/css/things-to-do/countryside-weddings/qecp-oak.png);
   	background-repeat: no-repeat;
    background-size: contain;
}

/* Medium mobiles, like iphone 15 */
@media only screen and (min-width: 22em) {
	.breakout-bg.bg.purple::after {
   		top: 64rem;
    	right: 1.5rem;
	}
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	.breakout-bg.bg.purple::after {
      		top: 63.5rem;
    	right: 1rem;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.purple::after {
   		top: 35rem;
    	right: 1.5rem;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.purple::after {
		width: 16%;
    	height: 16%;
   		top: 45rem;
    	right: 1rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.purple::after {
   	   		top: 50rem;
    	right: -1rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-bg.bg.purple::after {
   		top: 45.8rem;
    	right: -7rem;
	}
}

@media only screen and (min-width: 100em) {
    .breakout-bg.bg.purple::after {
   		top: 54rem;
    	right: 0rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-bg.bg.purple::after {
   		top: 60rem;
    	right: -3rem;
	}
}

/* QECP intro breakout block for child pages - no line drawing */
.breakout-bg.bg.purple.alternate::after {
    background-image: none;
}

/* RHCP INTRO BLOCK */
.breakout-bg.bg.blue {
	background-color: #09607d;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.blue .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.blue .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.blue .lead {
	color: #063d4c;
	background-color: #b4e4ef;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.7rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.blue .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* RHCP oak branch line drawing asset */
.breakout-bg.bg.blue::after {
	content: "";
    position: absolute;
    display: inline-block;
	height: 43%;
    width: 43%;
   	top: 61rem;
    right: 17rem;
    background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rhcp-oak-branch.png);
   	background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(95deg);
	opacity: 0.25;
}

/* Medium mobiles, like iphone 15 */
@media only screen and (min-width: 22em) {
	.breakout-bg.bg.blue::after {
		height: 40%;
    	width: 40%;
   		top: 59rem;
    	right: 13rem;
	}
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	.breakout-bg.bg.blue::after {
   		top: 59rem;
    	right: 11rem;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.blue::after {
		height: 43%;
    	width: 43%;
   		top: -2.5rem;
    	right: 38rem;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.blue::after {
	   	width: 43%;
   		top: 4rem;
    	right: 30rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.blue::after {
    	width: 43%;
   		top: 8rem;
    	right: 30rem;
	}
}


@media only screen and (min-width: 90em) {
	.breakout-bg.bg.blue::after {
    	width: 43%;
   		top: 12rem;
    	right: 34rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-bg.bg.blue::after {
    	width: 43%;
   		top: 15rem;
    	right: 35rem;
	}
}

/* STAUNTON CP BREAKOUT BLOCK */
.breakout-bg.bg.red {
	background-color: #762326;
	color: #fff;
	padding-top: 2.5rem;
	padding-bottom: 0.05rem;
	margin-bottom: 1.5rem;
}

.breakout-bg.bg.red .pseudo-h1 {
	color: #fff;
	font-size: 2.5rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.red .pseudo-h1 {
		font-size: 3.25rem;
		text-align: left;
	}
}

.breakout-bg.bg.red .lead {
	color: #4e1819;
	background-color: #f07a7d;
	display:inline-block;
	padding: 0.5rem;
	font-size: 1.7rem;
	font-family: 'Lora';
    font-weight: 600;
	text-align: center;
	width: 100%;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.red .lead {
		font-size: 2.25rem;
		text-align: left;
		width: revert;
	}
}

/* Staunton CP folly line drawing asset */
.breakout-bg.bg.red::after {
	content: "";
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 20%;
   	top: 82.1rem;
    right: 1rem;
    background-image: url(/-/media/files/css/things-to-do/countryside-weddings/staunton-cp-folly.png);
   	background-repeat: no-repeat;
    background-size: contain;
}

/* Medium mobiles, like iphone 15 */
@media only screen and (min-width: 22em) {
	.breakout-bg.bg.red::after {
		width: 18%;
    	height: 18%;
   		top: 77rem;
    	right: 0.5rem;
	}
}

/* Larger mobiles */
@media only screen and (min-width: 26em) {
	.breakout-bg.bg.red::after {
   		top: 71rem;
    	right: 1rem;
	}
}

/* Tablet - older */
@media only screen and (min-width: 48em) {
	.breakout-bg.bg.red::after {
    	width: 28%;
    	height: 28%;
   		top: 43.9rem;
    	right: 1rem;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-bg.bg.red::after {
		width: 28%;
    	height: 28%;
   		top: 45rem;
    	right: 1rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-bg.bg.red::after {
   		top: 55.6rem;
    	right: 1rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-bg.bg.red::after {
    	width: 30%;
		height: 30%;
   		top: 50.8rem;
    	right: -3rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-bg.bg.red::after {
		height: 28%;
		width: 28%;
   		top: 61.8rem;
    	right: 1rem;
	}
}

/* 4k screen */
@media only screen and (min-width: 160em) {
	.breakout-bg.bg.red::after {
		height: 28%;
		width: 28%;
   		top: 71.8rem;
    	right: 1rem;
	}
}

/* SHARED BREAKOUT BACKGROUND BLOCK STYLES */
#page_content .breakout-bg.bg h2 {
	text-align: center;
}

@media only screen and (min-width: 48em) {
	#page_content .breakout-bg.bg h2 {
		text-align: revert;
	}
}

.breakout-bg.bg.transparent {
	background-color: transparent;
	color: #000;
	padding-top: 0;
	margin-top: -1rem;
}

/* Make unordered lists split across 2 columns look like 1 column on mobiles */
.breakout-bg.bg.transparent.alternate-three .columns.six {
	margin-bottom: 0;
}

.breakout-bg.bg.transparent.alternate-three .columns.six.alt, .breakout-bg.bg.transparent.alternate-three .columns.six.alt ul {
	margin-top: -1rem;
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg.transparent {
		padding-top: revert;
		margin-top: revert;
	}
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg .breakout-content .columns.six.alt {
		padding: 1rem 1rem 0 1rem;
	}
}

@media only screen and (min-width: 48em) {
	.breakout-bg.bg .breakout-content .columns.six.alt h2 + p {
		margin-top: 1.3rem;
	}
}

.breakout-bg.bg {
	padding-top: 1.3rem;
}


@media only screen and (min-width: 48em) {
	.breakout-bg.bg {
		padding-top: revert;
	}
}

/* BREAKOUT AREAS */

/* Shared breakout area styles */
#page_content .breakout-area h2 {
	font-size: 1.8rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	#page_content .breakout-area h2 {
		font-size: 1.8rem;
		text-align: revert;
	}
}

@media only screen and (min-width: 90em) {
	#page_content .breakout-area h2 {
		padding-top: 1.4rem;
		font-size: 2rem;
	}
}

.breakout-area.grey {
	background-color: #e0dbd5;
}

.breakout-area.brown {
	background-color: #c9c1b6;
	color: #000;
}

/* Extra padding at the bottom of a breakout area */
@media only screen and (min-width: 48em) {
	.breakout-area.alternate-five {
		padding-bottom: 2.5rem;
	}
}

/* alternate closes gaps between breakouts and should be used in conjunction with one of the colour breakouts */
.breakout-area.alternate {
   margin-top: -1em;
}

/* alternate-two is used for the 'discover other venues' section and any similar area where the text is on the right */
@media only screen and (min-width: 90em) {
	#page_content .breakout-area.alternate-two .columns.seven {
   		padding-left: 3rem;
   		padding-right: 8.3rem;
	}
}

@media only screen and (min-width: 120em) {
	#page_content .breakout-area.alternate-two .columns.seven {
   		padding-left: 3rem;
   		padding-right: 30.3rem;
	}
}

.breakout-area .columns.seven p:last-of-type {
	text-align: center;
}

.breakout-area .columns.seven {
	padding: 0.5rem 0.5rem 0 0.5rem;
}

.breakout-area .columns.five {
	padding: 0.5rem;
	margin-bottom: 0;
}

@media only screen and (min-width: 48em) {
	.breakout-area .columns.seven {
		padding: revert;
		text-align: revert;
	}

	.breakout-area .columns.seven p:last-of-type {
		text-align: revert;
	}

	.breakout-area .columns.five {
		padding: revert;
		margin-bottom: revert;
	}
}
	
/* Tablet - old */
@media only screen and (min-width: 48em) {
	.breakout-area .columns.seven {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-area .columns.seven {
		padding-left: 2rem;
		padding-right: 8rem;
	}

	.breakout-area.alternate .columns.seven {
		padding-left: 8rem;
		padding-right: 2rem;
	}
}

@media only screen and (min-width: 90em) {
	.breakout-area .columns.seven {
		padding-left: 8.3rem;
		padding-right: 3rem;
	}

	.breakout-area.alternate .columns.seven {
		padding-top: 2rem;
	}
}

@media only screen and (min-width: 120em) {
	.breakout-area .columns.seven {
		padding-left: 29.3rem;
		padding-right: 5.3rem;
	}

	.breakout-area.alternate .columns.seven {
		padding-left: 11rem;
		padding-right: 20rem;
	}
}

/* alternate-four reduces excessive vertical gaps between grids in a breakout area - use for bulleted lists that are split in two on deskto mode */
.breakout-area.alternate-four .row {
	margin: 0;
}

.breakout-area.alternate-four .row .columns.four {
	margin-bottom: 1.5rem;
}

.breakout-area.alternate-four .column.one, .breakout-area.alternate-four .columns.ten {
	margin-bottom: 0rem;
}

@media only screen and (min-width: 48em) {
	.breakout-area.alternate-four .row {
		margin: 0 0 1rem 0;
	}

	.breakout-area.alternate-four .row .columns.four {
		margin-bottom: 0.5rem;
	}

	.breakout-area.alternate-four .column.one, .breakout-area.alternate-four .columns.ten {
		margin-bottom: 0.5rem;
	}
}

/* RVCP */
.breakout-area.teal {
	background-color: #49717B;
	color: #fff;
}

.breakout-area.teal h2 {
	font-size: 2rem;
	text-align: center;
}

@media only screen and (min-width: 48em) {
	.breakout-area.teal {
		margin-bottom: 3.5rem;
	}

	.breakout-area.teal h2 {
		font-size: revert;
		text-align: revert;
	}
}

/* Branch asset */
/* Tablets - old */
@media only screen and (min-width: 48em) {
	.breakout-area.alternate-three::after {
		content: "";
    	position: absolute;
    	display: inline-block;
    	width: 40%;
    	height: 40%;
   		top: 46rem;
    	right: -6rem;
    	background-image: url(/-/media/files/css/things-to-do/countryside-weddings/rvcp-branch.png);
   		background-repeat: no-repeat;
    	background-size: contain;
		transform: rotate(-408deg);
		opacity: 1;
	}
}

/* 1024px screen - iPad 9 */
@media only screen and (min-width: 64em) {
	.breakout-area.alternate-three::after {
    	width: 55%;
    	height: 55%;
   		top: 27rem;
    	right: -15rem;
		transform: rotate(303deg);
	}
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	.breakout-area.alternate-three::after {
		width: 60%;
    	height: 60%;
   		top: 17rem;
    	right: -21rem;
		transform: rotate(293deg);
	}
}

@media only screen and (min-width: 90em) {
	.breakout-area.alternate-three::after {
    	width: 60%;
    	height: 60%;
    	right: -25rem;
		transform: rotate(297deg);
	}
}

@media only screen and (min-width: 120em) {
	.breakout-area.alternate-three::after {
    	width: 80%;
    	height: 80%;
   		top: -13rem;
    	right: -53rem;
		transform: rotate(297deg);
	}
}

/* LEPE */
.breakout-area.dkblue {
	background-color: #233645;
	color: #fff;
}

/*QECP*/
.breakout-area.purple {
	background-color: #4d385f;
	color: #fff;
}
/*Staunton CP*/
.breakout-area.red {
	background-color: #762326;
	color: #fff;
}

/*RHCP*/
.breakout-area.blue {
	background-color: #09607d;
	color: #fff;
}
/* ACCORDIONS */

summary {
	border: 1px solid #BAA782;
	box-shadow: none;
	margin-bottom: 0.5rem;
	padding: 1rem 0.5rem 0.5rem 1.5rem;
}

#page_content summary h3 {
	font-family: revert;
	font-weight: normal;
	font-size: 1.25rem;
	color: #000;
}

details>summary::before {
	color:#BAA782;
	border-color: #BAA782;
	padding: .098rem .375rem;
}

details[open]>summary::before {
	color:#BAA782;
	border-color: #BAA782;
	padding: .08rem 0.55rem .098rem .55rem;
}