/* colours - blue #2b2c3a, pink #e2186c, mint green #1fd19e, yellow #ffd500, teal #00aebf */

#page {	background:#fff;}
#page { padding-top: 0;}

#page .transparent {
    background-color: #ba1c1c00 !important;
}

#microsite_header {
    background-color: #2b2c3a !important;
	padding-top:1em;
}
	 
.banner-area {margin-top: -1.5em;}

.breadcrumb a, .breadcrumb a:visited, .breadcrumb a:active, 
.breadcrumb a:focus, .breadcrumb a:hover, .breadcrumb li:after {
    color: #fff;
    border-color: #fff;
}

.pad-double-bottom {
    padding-bottom: 2rem;
}

/* NAVIGATION */

#page .pseudo-h1 a {
    border-bottom: none;
    color: #fff;
}

#page .navbar-inner {
    box-shadow: none;
    border: 0;
    background-color: #2b2c3a;
}


#page .navbar .nav>li {
    border: none;
}

#page .navbar .nav>li:last-child {
    border-right: 0;
}

#page .navbar .nav>li>a {
    color: #fff;
    text-shadow: none;
    font-family: 'Oswald', sans-serif;
	
}

.navbar .nav li.dropdown>.dropdown-toggle .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}


#page .navbar .nav>li:nth-of-type(5) a {
	background: #d22777;
	color: #fff;   
	padding:0.5em
}

#page .navbar .nav>li:nth-of-type(5) a:hover {
    background: #1fd19e;
}

/* Hide nav bar drop-downs for Programmes */
#local_menu_header li:nth-of-type(2).dropdown .caret, #local_menu_header li:nth-of-type(2).dropdown ul.dropdown-menu {
    display: none;
}
.dropdown-menu li a, .dropdown-menu li a:visited{
	font-weight: 400 !important;
	color: #000;
}
.dropdown-menu li a:hover{
	color:#fff;
}

/*BANNERS - Breakout area alternate for rips under videos, banner-area for HHI*/

/*.breakout-area.rip.alternate.blue, .breakout-area.rip.banner-video  {
	margin-top:-1.5em
} NG 14 10 24 */

.breakout-area.rip.alternate.blue {
	margin-top:-1.5em
}

/* Fix for nav bottom/video top NG 14 10 24*/
/* .breakout-area.rip.banner-video */
.breakout-area.rip.alternate {
	margin-top:-0.5em;
}

/* .breakout-area.rip.banner-video NG 14 10 24 */
.breakout-area.rip.alternate:after {
	content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    bottom: -5.7em; /* -43.5em -31.5em -20.5em*/
    right: 0;
    background-image: url(/-/media/Files/CSS/hoc-schools/rip-white);
    background-repeat: no-repeat;
    background-size: contain; 
}

.breakout-area.rip.alternate.blue:after {
	content: none;
    position: revert;
    display: revert;
    background-image: none;
}

.banner-area:after {
	content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    bottom: -24em; /* For medium mobiles. Was -11em previously */
    right: 0;
    background-image: url(/-/media/Files/CSS/hoc-schools/rip-white);
    background-repeat: no-repeat;
    background-size: contain; 
}

/* FOOTER */

/* NG 14 11 24 */
footer {
    background: transparent;
}

.breakout-area.footer {
	background-color: #2B2C3A !important;
	border-top:none;	
	margin-top: 0;
}

footer .hoc-footer h2, footer .hoc-footer p {color: #fff!important;}
footer .footer .container {background-color: #E3E3E3 !important;}

.hoc-footer h2 {
    text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
    font-weight:600;
}

.hoc-footer a[role=button] {
	border-radius: 50px;
    box-shadow: none;
    background-color: #fff;
    color: #2B2C3A;
    border: none;
    font-weight: 700;
}
.hoc-footer a[role=button]:hover { 
	background-color: #1fd19e;   
	color: #2B2C3A;
}
/* Fix space on hcc footer NG 10 10 24 */
footer.navbar.noprint {
    padding-top: 0;
}

/*HEADINGS and LABELS*/

#page h1,
#page_content h1, #page .pseudo-h1,
#page h2, #page_content h2,
#page h3, #page_content h3,
#local_menu_header a {
    text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
    font-weight:600;
}

#page .pseudo-h1 {font-size: 2.5em;	padding-top: 15px}

#page .breakout-area.blue p.lead {
    color: #ffd500;
    font-weight:700;
    font-size:3em;
	font-family: 'Oswald', sans-serif;
    text-transform:uppercase;
    text-align:center;
}

p.intro {font-size:1.25em}

.breakout-area.blue highlight { color:#1fd19e }

.breakout-area.blue highlight-two {color:#ffd500 }

.breakout-bg.pink highlight {
 	text-transform: initial;
 	display: block;
 	font-family: 'Source Sans Pro', Arial, sans-serif;
 	font-weight: 700;
 	line-height: normal;
}

.breakout-area.teal {
    background-color: #00aebf;
    }

/* HOME PAGE - PEACE OF MIND */

h3.pink-label {
    background-color: #e2186c;
    color:#fff;
    padding: 0.5em;  
    text-align: center;
}

h3.purple-label { 
	background-color: #544797;  
	color:#fff;
    padding: 0.5em;
    text-align: center;
}
   
h3.green-label { 
    background-color: #387e70;  
    color:#fff;
    padding: 0.5em;
    text-align: center;
}


/*BREAKOUTS WITH RIPS*/

.breakout-area.rip {
	margin-top: 1.25em
}

/* NG 09 12 24 - fix for h3 heading that comes out a bit small */
.breakout-area.rip h3.bigger {
	font-size: 1.5rem;
}

.breakout-area.rip:before {
    content: "";
    position: absolute;
    display: inline-block;
	width: 100%;
    height: 100%;
    top: -1.4em; /* -1.5em NG 07 10 24 */
    right: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.breakout-area.white.rip:before {
    background-image: url(/-/media/Files/CSS/hoc-schools/rip-white);
    top: -2.5em; /* NG 30 09 24 */
}

/* Upgrade block for programme pages */
.breakout-area.white.rip.alt:before {
    top: -3em; /* NG 01 10 24 */
}

/*.breakout-area.rip.blue {
	background-color: #2b2c3a;
	color:#fff
} NG 20 11 24 */
/* NG 20 11 24 */
.breakout-area.blue {
	background-color: #2b2c3a;
	color:#fff;
}

.breakout-area.blue.rip:before {
    background-image: url(/-/media/Files/CSS/hoc-schools/rip-navy);
}

.breakout-area.rip.green {   
	background-color: #1fd19e;
	color: #000;
}

.breakout-area.rip.green:before {
    background-image: url(/-/media/Files/CSS/hoc-schools/rip-mint);
}

/* NG 20 09 24 */
.content .breakout-area.rip.green a, .content .breakout-area.rip.green a[href$=".pdf"]:after {
    color: #000;
    border-bottom: 1px solid #000;
}
.content .breakout-area.rip.green a[href$=".pdf"]:after {
    border: #000 solid 1px;
}

/* yellow triangles on green rip NG 25 09 24 */
@media only screen and (min-width: 48em) {
    .breakout-area.rip.green.yellow:after {
        content: "";
        display: inline-block;
        width: 200px;
        height: 137px;
        background-image: url(/-/media/Files/CSS/hoc-schools/triangles-yellow.png);
        background-repeat: no-repeat;
        position: absolute;
        background-size: 60%;
        top: 0.6rem;
        right: -3rem;
    }
}

@media only screen and (min-width: 64em) {
    .breakout-area.rip.green.yellow:after {
        top: -1.4rem;
    }
}

@media only screen and (min-width: 90em) {
    .breakout-area.rip.green.yellow:after {
        background-size: 90%;
        top: 0rem;
        right: 2rem;
    }
}

/* OUR VALUES */
.breakout-area.grey {
    background-color: rgba(0, 0, 0, .05);
    padding-bottom: 1.5em;
    margin-bottom: 3em;
}

.breakout-area.grey .well {
    border: 1px solid #2b2c3a;
    background-color: #1fd19e;
}

/* Fix for wells on vertical tablets */
@media only screen and (min-width: 37em) and (max-width: 58em) {
    .columns.two.offset-by-one {
        margin-left: 0em !important;
    }
    
    .two.columns {
        width: 50%;
        margin-bottom: 1em;
    }

    .breakout-area.grey .well {
        width: 100%;
    }

    .breakout-area.grey .well h3 {
        text-align: center;
    }
}


/*BREAKOUT BACKGROUND BLOCKS*/

.breakout-bg.bg {
    padding-bottom: 1em;
}

.breakout-bg.bg.rip { 
	margin-top: 7em;  
}

#page .breakout-bg.bg.green {
    background-color: #1fd19e;
    padding-top: 1em;
    margin-top: 1em;
}

/* NG 22 10 24 */
#page .breakout-bg.bg.transparent.green {
    background-color: transparent;
    padding-top: 1em;
    margin-top: 1em;
}

#page .breakout-bg.bg.transparent.green .breakout-content {
    background-color: #1fd19e;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 2.5rem;
}

/* NG 25 09 24 */
#page .breakout-bg.bg.grey {
    padding-bottom: 0;
}

#page .breakout-bg.bg.grey .breakout-content {
    background-color: rgba(0, 0, 0, .05);
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 2.5rem;
}

/* BBBs in footer NG 11 10 24 */
footer.navbar.noprint .breakout-bg.bg.transparent {
    background-color: transparent;
}


/* SPECIAL OFFERS */

.breakout-bg.bg.pink {padding-bottom: 4em;} /* NG 02 10 24 */

.breakout-bg.bg.pink .breakout-content {
    background-color: #e2186c;
    padding: 1em;
    color:#fff;
}

.breakout-bg.bg.pink .breakout-content:before {
    content: "";
    display: inline-block;
    width: 200px;
    height: 137px;
    background-image: url(/-/media/Files/CSS/hoc-schools/rwe-programmes/triangles-mid-green-200x137);
    background-repeat: no-repeat;
    position: absolute;
    background-size: 80%;
    top: -4.3em; /* top: -3.3em */
    right: -4em;
}

.breakout-bg.bg.pink .breakout-content:after {
    content: "";
	background-image: url(/-/media/Files/CSS/hoc-schools/rwe-programmes/triangles-mid-green-200x137);
	display: inline-block;
    width: 200px;
    height: 137px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 80%;
    bottom: -3.3em;
    left: -4em;
	rotate:180deg;
}

/* BUTTONS */
#page a[role="button"] {
	border-radius:50px;
	box-shadow: none !important;
 	background-color: #2B2C3A;
    color: #fff;
    border:none;
	font-weight:700;
}

#page a[role="button"]:hover { 
	background-color: #1fd19e;   
	color: #2B2C3A;
}

a[href$=".pdf"]:hover:after {
    color: #2B2C3A;
    border: 1px solid #2B2C3A;
}

a.half-width {
	min-width:50%; 
	min-height:1.5em;
	padding:0.25em;
}

#page a[role="button"].white {background-color: #fff;	color: #2B2C3A; border: solid 1px #2B2C3A;}
#page a[role="button"].white:hover {background-color: #1fd19e;   color: #2B2C3A;}
#page a[role="button"].purple {background-color:#544797!important;  color:#fff!important}
#page a[role="button"].yellow {background-color:#ffd500!important; color: #000;}
#page a[role="button"].pink {background-color:#d22777!important; color: #fff;}
#page a[role="button"].pink:hover {background-color: #1fd19e!important;   color: #2B2C3A;}
#page a[role="button"].teal {background-color:#00aebf!important;  color:#000!important}
#page a[role="button"].green {background-color: #1fd19e;	color: #2B2C3A;}
#page a[role="button"].green:hover {background-color: #2B2C3A; color: #fff;}
#page a[role="button"].argoed {background-color:#7459a2!important;}
#page a[role="button"].calshot {background-color:#1165af!important;}
#page a[role="button"].rwe {background-color:#446026!important;}
#page a[role="button"].tbc {background-color:#ee730d!important;color: #000;}
#page a[role="button"].argoed:hover, #page a[role="button"].calshot:hover, #page a[role="button"].rwe:hover, #page a[role="button"].tbc:hover {background-color:#1fd19e!important;color: #000;}

/* NG 16 09 24 */
#page .well.alternate a[role="button"]{
    color: #2B2C3A;
    background-color: #fff;
}

#page .well.getintouch.pink a[role="button"]{
    color: #2B2C3A;
    background-color: #fff;
    border: none;
}

#page .well.getintouch.pink a[href$=".pdf"]:after {
    color: #2B2C3A;
    border: #2B2C3A solid 1px;
}

#page .well.getintouch.pink a[role="button"]:hover { 
	background-color: #1fd19e;   
	color: #2B2C3A;
}

/* NG 20 09 24 */
.well.getintouch.alternate {
    background-color: #2B2C3A;
    color: #fff;
	margin-top: 0;
    padding-left: 1em;
}

#page .well.getintouch.alternate a[role="button"] {
	border-radius:50px;
	box-shadow: none !important;
 	background-color: #fff;
    color: #2B2C3A;
    border:none;
}
#page .well.getintouch.alternate a[role="button"]:hover { 
	background-color: #1fd19e;   
	color: #2B2C3A;
}
.content .well.getintouch.alternate a {
    color: #fff;
    border-bottom: 1px solid #fff;
}

#page .well.getintouch.alternate a[href$=".pdf"]:after {
    color: #2B2C3A;
    border: #2B2C3A solid 1px;
}


/* ACCORDIONS */

#page summary:hover, summary:focus {
     border: none;
}

details>summary {
    background-color: #e2186c;
    border: none;
	border-radius:30px;
	color: #fff;
    box-shadow:none;
	margin: 0.1em;
}

details>summary::before {
    color: #fff;
	border:0;
}

details[open]>summary:before {
    color: #fff;
    border-color: #fff;
}

/* Fix horizontal alignment for standard accordion content */
details div {
    padding-left: 2em;
}

@media only screen and (min-width: 48em) {
    details div {
        padding-left: 3em;
    }
}

.breakout-bg.bg.alternate-two.transparent details div,.breakout-bg.bg.alternate-four.transparent details div {
    padding-left: 0;
}

/* ACCORDIONS - GREEN - NG 18 02 25 */
.breakout-bg.bg.alternate-six.transparent details>summary {
    background-color: #1fd19e;
    color: #000;
}

.breakout-bg.bg.alternate-six.transparent details>summary::before {
    color: #000;
    border: 0;
}

.breakout-bg.bg.alternate-six.transparent details h3 {
    font-size: 1.2rem;
}

.breakout-bg.bg.alternate-six.transparent details h4, .breakout-bg.bg.alternate-six.transparent details h5 {
    text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
    font-weight:600;
}

.breakout-bg.bg.alternate-six.transparent details h4 {
    font-size: 1.1rem;
}

.breakout-bg.bg.alternate-six.transparent details h5 {
    font-size: 0.98rem;
}

@media only screen and (min-width: 48em) {
    .breakout-bg.bg.alternate-six.transparent details div {
        padding-left: 0.65em;
    }
}


/* NEED TO CHECK WHERE ELSE WE USE THIS */

/*a[href$=".pdf"]:after {
    color:#fff;
	border:#fff solid 1px
}*/

/*WELLS*/

.breakout-area.primary .well.transparent {
    text-align: center;
}

.breakout-area.primary .well.transparent a {
    color: #fff;
    border-bottom: 1px solid #FFF;
}    

.well {
    background-color: #fff;
	color: #000;
    border-radius:30px; /* NG 25 09 24 */
}

.well.alternate {
    background-color: #2B2C3A;
    color: #fff;
	padding-left:2em;
}

.well.alternate-two {
    background-color: #1fd19e;
    color: #000;
	padding-left:2em;
}

.well.alternate-three {
    background-color: rgba(0, 0, 0, .05);
    color: #000;
	padding-left:2em;
}

.well.alternate-four {
    background-color: #00aebf;
    color: #000;
	padding-left:2em;
}

/* NG 9 02 25 */
.well.alternate-five {
    background-color: #e2186c;
    color: #fff;
	padding-left:2em;
}

/* NG 26 09 24 */
.content .well.alternate a, .content .well.alternate-five a {
    color: #fff;
    border-bottom: 1px solid #fff;
}  

/* NG 07 11 24 */
.content .well.alternate-two a, .content .well.alternate-three a, .content .well.alternate-four a  {
    color: #000;
    border-bottom: 1px solid #000;
} 

.well.getintouch {
    background-color: #fff;
	margin-top: 1em;
	/*border-radius: 30px;*/
	text-align: center;
}

.content .well.getintouch a {
    color: #000;
    border-bottom: 1px solid #000;
}

.content .well.getintouch a[role=button][href$=".pdf"]:after {
    color:#fff;
	border:#fff solid 1px;
}

.content .well.getintouch a[role=button][href$=".pdf"]:hover:after {
    color:#2B2C3A;
	border:#2B2C3A solid 1px;
}

/* LOCATION WELLS - centres page */
.well.location {
    border: solid;
}

/* NG updated 25 10 24 */
#page .well.getintouch.pink {
    background-color: #d22777;
}

#page .well.getintouch.pink h2 {
    color: #fff;
}


#page .well.getintouch.pink a {
    color: #fff;
    border-bottom: 1px solid #fff;
}

#page .well.getintouch.pink .icon.phone:before {
    color: #fff;
}

.well.pink h3 {
    color: #d22777;
}

.well.purple h3 {
    color: #544797;
}

.well.triangles {
    border-radius: 30px;
    margin: 2rem 0 2em;
    color: #000;
    padding: 2rem;
}

.well.triangles h3 {
    color: #000 !important;
}


@media only screen and (min-width: 48em) {
    .well.triangles {
        margin: 4rem 0 2em;
    }

    .well.triangles:after {
        content: "";
        display: inline-block;
        width: 200px;
        height: 137px;
        background-repeat: no-repeat;
        position: absolute;
        background-size: 80%;
        top: -3.3em;
        right: 1em;
    }
}

@media only screen and (min-width: 60em) {
    .well.triangles:after {
        background-size: 90%;
    }
}

@media only screen and (min-width: 48em) {
    .well.yellow:after {
        content: "";
        display: inline-block;
        width: 200px;
        height: 137px;
        background-image: url(/-/media/Files/CSS/hoc-schools/triangles-yellow);
        background-repeat: no-repeat;
        position: absolute;
        background-size: 80%;
        top: -3.3em;
        right: -7em;
    }
}

@media only screen and (min-width: 60em) {
    .well.yellow:after {
        background-size: 90%;
    }
}

/* VIDEOS */
/* NG 10 10 24 */
/*@media only screen and (max-width: 48em){
    .desk-vid {
        display:block;
        margin-top: 6em;
    }
}*/


.hero-video {
	padding:56.25% 0 2.9rem 0;
	position:relative;
}

#video-overlay a[role="button"].green {
	position: absolute;
	background: #1fd19e;
	border:#fff;
	color: #fff;
	text-shadow: none;
	right: 3em;
	top: -0.6em;
}

#auto-video-pause,
#auto-video-m-pause {
	min-height: auto;
	border-radius: 10em;
	height: 3em;
	width: 3em;
	text-align: center;
	color: #fff;
	background: #1fd19e;
	box-shadow: none;
	position: absolute;
	right: 0;
	bottom: 5em; /* 2em NG 10 10 24 */
}

#auto-video-pause em:before,
#auto-video-m-pause em:before {
	font-family: 'wcms';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	font-size: 1.5em;
	position: absolute;
	top: 0.35em;
	left: 0.45em;
	content: "\e600";
	text-shadow: none;
}

#auto-video-pause.paused em:before,
#auto-video-m-pause.paused em:before {
	font-size: 1.75em;
	color: #fff;
	position: absolute;
	top: 0.35rem;
	left: 0.65rem;
	content: "\e60e";
}

/*.mob-desk-vid {
    display: block;
}*/

/* HOMEPAGE HERO IMAGES - remove empty h2 headings */
#page .columns.twelve.center h2.pad-top {
	display: none;
}

/* IMAGES */

img.frame {
    border: 10px solid #fff;
    box-shadow: 0 14px 14px rgba(42,48,49,.2),0 10px 10px rgba(42,48,49,.15) !important;
}

/* NG 01 10 24 */
img.frame-left {
    border: 10px solid #fff;
    box-shadow: 0 14px 14px rgba(42, 48, 49, .2), 0 10px 10px rgba(42, 48, 49, .15);
    transform: rotate(-5deg);
}

/* NG 01 10 24 */
img.frame-right {
    border: 10px solid #fff;
    box-shadow: 0 14px 14px rgba(42, 48, 49, .2), 0 10px 10px rgba(42, 48, 49, .15);
    transform: rotate(5deg);
}

.image-set img {
	position: absolute;
	width: 300px;
}

.image-set img.img1 {
	top: -20px;
    left: 30px;
    z-index: 10;
	transform: rotate(8deg);
}

.image-set img.img2 {
    left: -5px;
    top: 10px;
    z-index: 100;
	transform: rotate(-8deg);
}

img.circle {
    border-radius: 999em;
    line-height: 0;
    border: 10px solid #1fd19e;
  	image-rendering: auto;
    height: auto;
    vertical-align: middle;
    width: 100%;
}


/* SLIDESHOW - STACKED PHOTO GALLERIES */

#slideshow {
    margin-top: 2em;
    margin-left: 2em;
}

#slideshow h2 {
	display: none;
}

#slideshow img {
    border: 10px solid white;
    box-shadow: 0 14px 14px rgba(42,48,49,.2),0 10px 10px rgba(42,48,49,.15);
}
 
#slideshow li {
    left: 0 !important;
    top: 0 !important;
}
 
#slideshow li.invisible {
	transform: rotate(-8deg);
	z-index: -1000;
}
 
.shadowed {
    box-shadow: none;
}


#page #slideshow p.slideshowmenu {
    text-align: right;
    position: absolute;
    bottom: -3em;
    right: 1em;
}


/* PROMO BLOCK*/

a.thumbnail.no-padding {
	border-radius:20px;
	border: solid 1px
}
a.thumbnail.no-padding img {
	border-radius:20px 0 0 20px; /* NG 04 11 24 */
    /* min-height:12em NG 31 10 24 */
}

/* NG 04 11 24 */
.four.columns a.thumbnail.no-padding img, .six.columns a.thumbnail.no-padding img {
	border-radius:20px 20px 0 0; 
}
	
.breakout-bg.bg.promo  p.caption {
    text-transform:revert!important;
	font-family:revert!important;
	font-size:1rem;
	}

/*.breakout-bg.bg.promo .title { font-size: 1em;}*/

.breakout-bg.bg.transparent.promo {margin-bottom: 0.75em;}
.breakout-bg.bg.transparent.promo .thumbnail{ box-shadow: none;}
.breakout-bg.bg.promo a.thumbnail.no-padding {background-color: #fff; color: #2B2C3A;}
.breakout-bg.bg.promo a.thumbnail.no-padding:hover {background-color: #1fd19e ;color: #2B2C3A;}

/* CENTRES PAGE */

.breakout-bg.bg.transparent.alt .thumbnail {
    box-shadow:none;
}

.breakout-bg.bg.transparent.alt .thumbnail .link-caption {
    margin: 0;
}

.breakout-bg.bg.transparent.alt .thumbnail .caption {
    padding-left: 1em;
    padding-right: 1em;
}

.breakout-bg.bg.transparent.alt p.title {
	font-weight:400;
	text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
	padding:0.5em;
	margin: 0;
	font-size: 1.5em;
	text-align: center;
	display: block;
}

.row.argoed.calshot .columns:nth-of-type(2n+1) p.title  {
    background-color: #592680;
	color:#fff;
}

.row.argoed.calshot .columns:nth-of-type(2n+2) p.title  {
	background-color: #1165af;
	color:#fff;
}

.row.runways.tilebarn .columns:nth-of-type(2n+1) p.title  {
	background-color: #426329;
	color:#fff;
}

.row.runways.tilebarn .columns:nth-of-type(2n+2) p.title  {
	background-color: #ee730d;
	color:#000;
}
	
/*CONTENT CARDS */
    
h2.card-heading {text-transform:revert!important; font-family:revert!important}
	
a.card-button.button-link .card-heading {display:none}

div.card-tags {	position: absolute; left: -9999px; }

div.card-media {height: 12em;}
    
centrename {
    text-transform: initial;
    font-size: 1.05rem;
   	display: block;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-weight: 700;
    line-height: normal;
}

.card {border: solid #4c4848 1px }
    
li.four.columns.stamp.add-bottom {
    background-color: #2b2c3a;
} 

   	
/* Outcomes content cards */

.breakout-bg.bg.alternate-two .card .card-content h2.card-heading {
    display: none;
}

/* updated NG 16 01 25
.breakout-bg.bg.alternate-two .card-content.row.remove-bottom {
    background-color: #fff;
}*/

.breakout-bg.bg.alternate-two .card-content .card-description {
    display: revert;
    color: #fff;
}

#page_content .breakout-bg.bg.alternate-two .card-content h3 {
    color: #2B2C3A;
    text-align: center;
}

.scale-images .outcome p {
    text-align: center;
    color: #000;
}
	
#page_content .breakout-bg.bg.alternate-two .scale-images .outcome img {
    width: revert;
}

#page_content .breakout-bg.bg.alternate-two  .card-footer {
    display: none;
}


/* Themes content cards  - NG 02 09 24 */

.breakout-bg.bg.transparent.alternate-three .card {
    border: 1px solid #446026;
    background-color: #DCE7AD; /* NG 16 01 25 */
}

.breakout-bg.bg.transparent.alternate-three .bx-wrapper .card-media img {
    top: 61%;
}

.breakout-bg.bg.transparent.alternate-three .card-content.row.remove-bottom {
    /* background-color: #DCE7AD; NG 16 01 25 */
    color: #000;
}

/* updated NG 16 01 25 */
.breakout-bg.bg.transparent.alternate-three .bx-wrapper h2.card-heading {
    color: #000 !important;
    text-transform: uppercase !important;
    font-family: 'Oswald', sans-serif !important;
    top: -10.3em;
    right: -0.81em;
    width: 111.5%;
    min-height: 3rem;
    position: absolute;
    text-align: center;
    padding-top: 1rem;
    border-radius: 8px 8px 0 0;
}

.breakout-bg.bg.transparent.alternate-three .card .card-content .card-heading, .breakout-bg.alt .card-content.row.remove-bottom {
    background-color: #DCE7AD;
    color: #000;
}

.breakout-bg.bg.transparent.alternate-three .card-content .card-description {
    color: #000;
    font-size: 1rem;
    padding-top: 1rem;
}

#page_content .breakout-bg.bg.transparent.alternate-three a.card-button.button-link {
    background-color: #DCE7AD;
    color: #000;
    margin-bottom: 0.1em; /* NG 17 01 25 */
}

/*.breakout-bg.bg.transparent.alternate-three .card-footer {
    background-color: #DCE7AD;  
} NG 16 01 25 */

/* Content cards on programmes page and centre pages - fix for empty h2 card headings NG 23 12 24 */
.breakout-bg.bg.alternate-five  .card .card-content h2.card-heading {
	display:none;
}
	
	
/* QUOTES */

.breakout-area blockquote, .breakout-area figcaption {
    color: #000;
    font-weight: 700;
    font-size: x-large;
    line-height: 1.25;
}

.breakout-area blockquote.testimonial {
    font-size: large;
}

blockquote q:before {
    top: -0.2em;
    left: -0.1em;
}

@media only screen and (min-width: 48em) {   
	.breakout-area blockquote:before {
		content: "";
		display: inline-block;
		width: 200px;
		height: 159px;
		background-repeat: no-repeat;
		position: absolute;
		background-size: 60%;
		top: -0.75em;
		left: -9em; /* -10em NG 02 10 24 */
	}

   	.breakout-area blockquote:after {
        content: "";
        display: inline-block;
        width: 200px;
        height: 159px;
        background-repeat: no-repeat;
        position: absolute;
        background-size: 60%;
        top: 2.5em;
        right: -11em; /* -13em NG 03 10 24 */
    }

    .breakout-area.green blockquote:before {
	    background-image: url(/-/media/Files/CSS/hoc-schools/calshot-programmes/calshot-quote-blue-open);
    }

	.breakout-area.green blockquote:after {
        background-image: url(/-/media/Files/CSS/hoc-schools/calshot-programmes/calshot-quote-blue-close);
    }

    .breakout-area.green blockquote.yellow:before, .breakout-area.teal blockquote.yellow:before {
	    background-image: url(/-/media/Files/CSS/hoc-schools/quote-yellow);
        transform: rotate(180deg); /* NG 02 10 24*/
        top: -4.75em; /* NG 02 10 24*/
    }

	.breakout-area.green blockquote.yellow:after, .breakout-area.teal blockquote.yellow:after {
        background-image: url(/-/media/Files/CSS/hoc-schools/quote-yellow);
    }
}

@media only screen and (min-width: 60em) {
    .breakout-area blockquote:before {
        background-size: 60%;
        top: -1.3em;
        right: 38em;
    }

    .breakout-area  blockquote:after {
        background-size: 60%;
        top: 3.7em;
        right: -10.5em; /* NG 03 10 24 */
    }

}

@media only screen and (min-width: 90em) {
     .breakout-area  blockquote:before {       
		 background-size: 60%;
         top: -3.3em;
       	 right: 38em;
	 }

    .breakout-area  blockquote:before .breakout-area.green .well:after {
        background-size: 60%;
        top: 2.7em;
        right: -13em;
    }
}




/* MEDIA QUERIES */

/* smaller mobile phones NG 30 09 24 */
@media only screen and (min-width: 20em) and (max-width: 21em) {
    /*#page .pseudo-h1 a {color: #ccc;}*/
    #page .pseudo-h1 {padding-bottom: 1em;} /* NG 07 10 24 */
	.banner-area:after {bottom: -20.5em;}
    .breakout-area.rip.alternate:after {bottom: -4.7em;} /* NG 14 10 24*/
}

/* iphone 15 NG 30 09 24 */
@media only screen and (min-width: 22em) {
    /*#page .pseudo-h1 a {color: #ffffcc;}*/
    .breakout-area.rip.alternate:after {bottom: -6.7em;} /* NG 14 10 24*/
    .banner-area:after {bottom: -25em;} /* NG 14 10 24 */
}

/* larger mobile phones NG 30 09 24 */
@media only screen and (min-width: 26em) {
    /*#page .pseudo-h1 a {color: #e2186c;} */
    #page .pseudo-h1 {padding-bottom: 1em;} /* NG 07 10 24 */
	.banner-area:after {bottom: -27.75em;}
    .breakout-bg.bg.pink {padding-bottom: 4em;} /* NG 03 10 24 */
    .breakout-area.rip.alternate:after {bottom: -6.7em;} /* NG 14 10 24*/
}

@media only screen and (min-width: 28em) { /* Will's iphone SE  3 horizontally */
    /* #page .pseudo-h1 a {color: #e97923;} */
	.banner-area:after {bottom: -10.75em;} /* -8.75em NG 21 10 24 */
	.breakout-area.rip.alternate.blue:before { top: -2em;}
	.breakout-area.rip:before { top: -2.5em;}
    .breakout-area.rip.alternate:after {bottom: -8.7em;} /* NG 14 10 24*/
}

/* Horizontal iphone 8 */
@media only screen and (min-width: 37.5em) {
    /* #page .pseudo-h1 a {color: #1fd19e;} */
	#page .pseudo-h1 {font-size: 1em; padding-top: 15px;}
	.banner-area:after {bottom: -12em;} /* NG 21 10 24 */
	#page #local_header {
        left: 25%;
        width: 100%;
        top: 3.75em;
        margin-bottom: 0;
        position: absolute;
        line-height: 1em;
    }

	#page #local_header li a {font-size: 0.8em;}
	.breakout-area.rip:before { top: -3em; }
	.breakout-area.rip.alternate.blue:before { top: -2.5em;} /* missing bracket fixed NG 02 09 24*/
	button#contact-stickies-button {width: 10em;height:3.5em;}
	.breakout-bg.bg .thumbnail>img {width: 70%;}
	.breakout-bg.bg a.thumbnail.no-padding {display: flex;}
	.breakout-bg.bg .columns.six a.thumbnail.no-padding, 
	.columns.four a.thumbnail.no-padding   	{display: inline;}
	.breakout-bg.bg .columns.six .thumbnail>img, .columns.four .thumbnail>img {width: 100%;}
    /*.breakout-area.rip.banner-video:after {bottom:-12.5em} /* removed NG 16 10 24 */
    .breakout-bg.bg.pink {padding-bottom: 4em; padding-top:4em;} /* NG 03 10 24 */
    .breakout-area.rip.alternate:after {bottom: -10.7em;} /* NG 14 10 24*/
    /*.breakout-area.rip.white.alt {margin-top: -0.75em} do we want to do this?!!! */
}

/* iphone 15 horizontal */
@media only screen and (min-width: 42em) {
   /* #page .pseudo-h1 a {color: #ffff00;} */
    .breakout-area.rip.alternate:after {bottom: -12.7em;} /* NG 14 10 24*/
    .banner-area:after {bottom: -14em;} /* NG 14 10 24*/
}

/* ipad 9 vertical */
@media only screen and (min-width: 48em) {
   /* #page .pseudo-h1 a { color: #68cfe0;} */
    #page .pseudo-h1 {font-size: 1.55em;}
	#page #local_header li a {font-size: 1em;}
	#page #local_header {left: 30%; top: 4.25em;}
	.banner-area:after {bottom: -15em;}
    .breakout-bg.bg.pink {padding-bottom: 5em; margin-top: 3em; padding-top: 2em;} /* NG 03 10 24 */
    /*.breakout-area.rip.banner-video:after {bottom:-13.5em} /* removed NG 16 10 24 */
    .breakout-area.white.rip:before {top: -3em; } /* NG 01 10 24 */
    .breakout-area.white.rip.alt:before {top: -6em;} /* NG 01 10 24 */
}

/*  around 449px to 599px wide */
@media only screen and (min-width: 54em) {
   /*	#page .pseudo-h1 a { color: #ba4a48;} */
	#page .pseudo-h1 {font-size: 2em; padding-bottom: revert;} /* NG 07 10 24 */
	#page #local_header li a {font-size: 1em;}
	#page #local_header {left: 35%; top: 4.5em;}
	.banner-area:after {bottom: -17em;}
    /*.breakout-area.rip.banner-video:after {bottom:-8.5em} /* removed NG 16 10 24 */
	.breakout-area.rip:before { top: -3em; }
    .well.aftervisit:before {top:23.9rem} /* NG 14 10 24 */
    .breakout-area.rip.alternate:after {bottom: -14.7em;} /* NG 14 10 24*/
    .banner-area:after {bottom: -16em;} /* NG 14 10 24*/
}


/* Hide drop-downs on horizontal nav bar for tablets only */
@media only screen and (min-width: 48em) and (max-width: 59em) {
    #local_menu_header li.dropdown .caret,
    #local_menu_header li.dropdown .dropdown-menu {display: none;}
}

/* iPad 9 size */
@media only screen and (min-width: 64em) {
    /* #page .pseudo-h1 a {color: #de5290;} */
    #page #local_header {left: 40%; top: 5em;}
    #page #local_header li a {font-size: 1em;}
    #page .pseudo-h1 {font-size: 2.5em;}
	.breakout-content {margin-bottom: 4em;}
	.banner-area:after {bottom: -19em;}
	.breakout-area.rip:before, .breakout-area.white.rip:before  { top: -3.75em; }
    .breakout-area.rip.alternate:before  { top: -1.75em; } /* NG 21 10 24 */
    /*.breakout-area.rip.banner-video:after {bottom:-18.5em} /* removed NG 16 10 24 */
    .breakout-bg.bg.pink {padding-bottom: 1em;} /* NG 30 09 24 */
    .breakout-area.rip.alternate:after {bottom: -16.7em;} /* NG 14 10 24*/
}

/* HCC device screen size */
@media only screen and (min-width: 72em) {
	/* #page .pseudo-h1 a {color: #02e44c;} */
	#page #local_header li a {font-size: 1em;}
	.banner-area:after {bottom: -22em;} /* 24em */
	.breakout-area.rip.alternate.blue:before { top: -3.25em; }
	.breakout-area.rip:before { top: -3em; } /* -1em -4em; NG 22 10 24 */
	#contact-stickies { bottom: calc(50vh - 7em); right: calc(-38em + 50vw);}
    /*.breakout-area.rip.banner-video:before {top: 0} /* removed NG 16 10 24 */
    /*.breakout-area.rip.banner-video:after {bottom:-21em} /* removed NG 16 10 24 */	
    .breakout-area.white.rip.alt:before {top: -7em;} /* NG 01 10 24 */
    .breakout-area.rip.alternate:after {bottom: -21.7em;} /* NG 14 10 24*/
    .breakout-area.rip.alternate:before { top: -0.75em; } /* NG 31 10 24 */
}

/* 1440px laptop */
@media only screen and (min-width: 90em) {
    /* #page .pseudo-h1 a {color: #f6ec4a;} */
   	.banner-area:after {bottom: -25em;} /* 33em NG */
	.breakout-area.rip.alternate.blue:before { top: -4.4em; } /* -4.25em */
	.breakout-area.rip:before { top: -5em; } /* -6em NG 31 10 24 */
	/*.breakout-area.rip.banner-video:after  {top: 30em; } /* removed NG 16 10 24 */
    .breakout-area.rip.alternate:after {bottom: -22.7em;} /* NG 13 03 25 new */
    .breakout-area.white.rip.alt:before {top: -7em;} /* NG 01 10 24 */
    .breakout-area.rip.alternate:before { top: -3.75em; } /* NG 31 10 24 */
    .breakout-area.tertiary.rip:before { top: -3em; } /* NG 31 10 24 */
}

/* Becky Cornish's big screen NG 04 11 24 */
@media only screen and (min-width: 100em) {
    /*#page .pseudo-h1 a {color: #9933ff;}*/
    .breakout-area.rip.alternate:after {bottom: -27.7em;} /* NG 13 03 25 -26.7em */
    .banner-area:after {bottom: -29em} /* -28 NG 19 11 24 */
}

/* Nikki's and Suzanna's big screen */
@media only screen and (min-width: 120em) {
    /* #page .pseudo-h1 a {color: #00ffff;} */
    .breakout-area.rip:before { top: -6em; } /* NG 31 10 24 */
    .breakout-area.white.rip:before  { top: -6.3em; }
    /*.breakout-area.rip:before { top: 0; }*/ /* -4em NG 10 10 24 commented out 21 10 24 */
    .breakout-area.rip.alternate:after {bottom: -31.7em;} /* -33.7 for HCC big screen? NG 21 10 24 */
    .breakout-bg.bg.pink {padding-bottom: 4em; margin-top: 4em;} /* NG 30 09 24 */
    .banner-area:after {bottom: -33em;} /* NG 01 10 24 */
    .breakout-area.white.rip.alt:before {top: -8em;} /* NG 01 10 24 */
    .breakout-area.tertiary.rip:before {top:-4em} /* NG 11 10 24 */
    .breakout-area.green.rip:before {top:-4em} /* NG 11 10 24 */
    .breakout-area.rip.alternate:before {top:-0.75em} /* NG 24 10 24 */
}

/* work big screen NG 22 10 24 */
@media only screen and (min-width: 125em) {
   /* #page .pseudo-h1 a {color: #00ff00;} */
    .breakout-area.rip:before { top: -4em; } /* updated NG 14 01 25 - was 0 */
    .breakout-area.rip.alternate:after {bottom: -32.7em;}
}

/* Fran's big screen - NG 11 11 24 */
@media only screen and (min-width: 130em) {
    /* #page .pseudo-h1 a {color: #ffcc66;} */
    /*.breakout-area.rip.banner-video:after  {top: 31em; } removed NG 16 10 24 */
    .breakout-area.primary.rip:before, .breakout-area.rip.green:before, .breakout-area.rip.secondary:before  {top:-5em}
    .breakout-area.rip.alternate.blue:before  {top:-5.4em}
    .breakout-area.rip.alternate:after {bottom: -36.7em;} /* NG 14 10 24*/
    .banner-area:after {bottom: -39em;} /* NG 14 10 24*/
}

/* 4k screens */
@media only screen and (min-width: 160em) {
    /* #page .pseudo-h1 a {color: #ffccff;} */
    .breakout-area.rip:before { top: -5em; } /* -6em NG */
    .banner-area:after {bottom: -43em;} /* NG 01 10 24 */
    .breakout-area.rip.alternate.blue:before {top: -5.4em;} /* NG 01 10 24 */
    .breakout-area.white.rip.alt:before {top: -9em;} /* NG 01 10 24 */
    /*.breakout-area.rip.banner-video:after {top: 43em;} removed NG 16 10 24 */
    .breakout-area.tertiary.rip:before {top:-5em} /* NG 11 10 24 */
}


/* ACTIVITIES */
.activity {
	display: inline-block;
    color: #fff;
    text-align: center;
}

a.activity {
	border-bottom: none;
}

a.activity:hover, a.activity:visited, a.activity:focus {
	border-bottom: none;
    color:#fff;
}

p.activity {
    margin-top: 0;
}

.breakout-bg.bg.alternate-three .activity img.scale-with-grid {
    background-color: #fff;
    border-radius: 3em;
}

/* MAP ICONS NG 16 09 24 */
.pointer.large.location.icon.teal {
    color: #1fd19e;
}

/*.esri-view-root text {
    fill: #1fd19e;
}*/

/* OVERLAY IMAGES */
.overlay-image, .overlay-image img {
	border-radius: 20px;
    border: 1px solid #2b2c3a;
}

.overlay-image .caption.bottom {
	border-radius: 0 0 20px 20px;
    border-style: solid;  
    border-color: #2b2c3a;
    border-width: 0 1px 1px 1px;
    color: #2b2c3a;
    background-color: #fff;
    font-weight: 700;
}

/* WALL - search box well NG 23 09 24 */
.stamp .well {
    background-color: #2B2C3A;
    color: #fff;
}

/* BORDERED GRIDS NG 26 09 24 */
.row.alt.green {
    border: 1px solid #1fd19e;
    border-radius: 20px;
    padding: 1em;
}

.row.alt.pink {
    border: 1px solid #e2186c;
    border-radius: 20px;
    padding: 1em;
}

.row.alt.blue {
    border: 1px solid #2b2c3a;
    border-radius: 20px;
    padding: 1em;
}

.row.alt.green details, .row.alt.pink details, .row.alt.blue details {
    margin-top: 1.5em;
}

/* HOME PAGE TAILORED PROGRAMMES NG 27 09 24 */
h2.arrowspace {
    margin-bottom: 2.2em;
}

.beforevisit h3, .duringvisit h3, .aftervisit h3 {
    font-size: 1.5rem;
}

@media only screen and (min-width: 48em) {
    .well.duringvisit:before {
        content: "";
        display: inline-block;
        width: 200px;
        height: 137px;
        background-image: url(/-/media/Files/CSS/hoc-schools/arrow.png);
        background-repeat: no-repeat;
        position: absolute;
        background-size: 60%;
        top: -6.3rem;
        right: 11rem;
        transform: scaleX(-1) rotate(219deg);
    }

    .well.aftervisit:before {
        content: "";
        display: inline-block;
        width: 200px;
        height: 137px;
        background-image: url(/-/media/Files/CSS/hoc-schools/arrow.png);
        background-repeat: no-repeat;
        position: absolute;
        background-size: 60%;
        top: 21.9rem;
        right: 11rem;
        transform: rotate(40deg);
    }
}

@media only screen and (min-width: 48em) {
    .well.duringvisit:before {
        right: 7rem;
    }

    .well.aftervisit:before {
        top: 28.9rem;
        right: 7rem;
    }
}

@media only screen and (min-width: 54em) { /* NG 14 10 24 */
    .well.aftervisit:before {
        top:23.9rem
    } 
}

@media only screen and (min-width: 64em) {
    .well.duringvisit:before {
        right: 11rem;
    }

    .well.aftervisit:before {
        top: 21.9rem;
        right: 11rem;
    }
}

/* TIMETABLES FOR PROGRAMMES NG 27 09 24 */
#page .breakout-bg.bg.alternate-four {
    margin-bottom: 4em;
}

#page .breakout-bg.bg.alternate-four .well {
    border-radius: 0;
}

/* DAY VISITS PACKAGES */
.well.package {
    border-radius: 25px;
    color: #000;
}

.well.package.bronze {
    background-color: #c97d3b;
}

.well.package.silver {
    background-color:  #b3b6b6;
}

.well.package.gold {
    background-color:  #fcd621;
}

.well.package p, .well.package ul, .well.package h3 { /* updated NG 06 12 24 */
    color: #000;
}

.well.package h3 {
    padding-top: 0.5rem;
    text-align: center;
    font-size: 1.65rem; /* NG 23 01 25 */
}

.well.package p.price {
    text-align: center;
    background-color: #2b2c3a;
    color: #fff;
    padding: 1.6rem 1rem 1rem 1rem;
    border-radius: 50%;
    /* font-weight: bold;*/
    width: 7em;
    height: 7em;
    margin: auto;
}

/* NG 24 11 24 */
.well.package p.price.big {
    width: 7.5em;
    height: 7.5em;
    padding: 0.6rem 1rem 1rem 1rem;
}

.well.package p.price span { /* updated 23 01 25 */
    font-size: 2.3rem; 
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}

.well.package p.price.big span { /* NG 24 01 25 */
    font-size: 2.1rem;
    line-height: 1.25;
}

/* NG 06 12 24  - fix vertical alignment */
@media only screen and (min-width: 48em) {
    .well.package p.price.pushdown {
        margin-top: 2.3rem;
    }
}

.breakout-area.primary p.pricecircle {
    text-align: center;
    background-color: #1fd19e;
    color: #000;
    padding: 1.6rem 1rem 1rem 1rem;
    border-radius: 50%;
    /*font-weight: bold;*/
    width: 7em;
    height: 7em;
}

.breakout-area.primary p.pricecircle.alternate {
    text-align: center;
    background-color: #e2186c;
    color: #fff;
    padding: 1.3rem;
    border-radius: 50%;
    font-weight: bold;
    width: 7em;
    height: 7em;
    border: 2px solid #fff;
}

.breakout-area.secondary p.pricecircle {
    text-align: center;
    background-color: #e2186c;
    color: #fff;
    padding: 1.3rem;
    border-radius: 50%;
    font-weight: bold;
    width: 7em;
    height: 7em;
}

@media only screen and (max-width: 47em) {
    .breakout-area.primary p.pricecircle, .breakout-area.secondary p.pricecircle {
        margin: auto;
    }
}

.breakout-area.primary p.pricecircle span, .breakout-area.secondary p.pricecircle span {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}

.breakout-area.primary .well.transparent.white {
    background-color: transparent;
    color: #fff;
    text-align: left;
}

/* NG 21 11 24 */
.breakout-area.primary .well.transparent.black {
    background-color: transparent;
    color: #000;
    text-align: left;
}

/* NG 14 1 25 */
p.medium {
    font-weight: bold;
}


/* SLIDER used on Winter residentials but could be used elsewhere */

.card-content .promo-slider h3.yellow {
    background-color: #ffd500;
    text-align: center;
}

.card-content h3.blue {
    background-color: #00aebf;
    text-align: center;
}

.card-content h3.green {
    background-color: #1fd19e;
    text-align: center;
}

/* KEYFIGURES */

.keyfigure {
    background-color: transparent;
    border-radius: unset;
    padding-top: 0;
    padding-bottom: 0;
}

.keyfigure .caption {
    text-transform: uppercase;
    font-size: 1.5em;
    text-align: left;
}

.keyfigure .figure {
    text-align: left;
}

.keyfigure .figure:after,.caption:nth-child(1):after,hr:before,.section-break:after {
    display: none;
}

.keyfigure .figure:nth-child(2):before,.keyfigure .caption:nth-child(2):before,.keyfigure .caption:nth-child(3):before,hr:after {
    display: none;
  }

.columns:nth-child(1) .keyfigure {
	color: #1fd19e; 
 }

.columns:nth-child(2) .keyfigure {
	color: #ffd500;
}

.columns:nth-child(3) .keyfigure {
	color: #00aebf;
}

.columns:nth-child(4) .keyfigure {
	color: #E571A7;
}

@media only screen and (min-width: 48em) {
	.columns:nth-child(1) .keyfigure, .columns:nth-child(2) .keyfigure, .columns:nth-child(3) .keyfigure {
		border-right: 2px solid white;
	}
}