#page {
	background-color: #fff;
	background-image: url("/-/media/Files/CSS/archives/images/hals-building.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100%;
    padding-bottom: 8em;
}
@media only screen and (min-width: 37.5em){ 
	#page {
		background-image: url("/-/media/Files/CSS/archives/images/hals-building.png");				
		background-size: 50%;
		padding-bottom: 7em;
	}
}
@media only screen and (min-width: 48em) {
	#page {
		padding-bottom: 9.5em;
	}
}
@media only screen and (min-width: 64em) {
	#page {
		padding-bottom: 14.5em;
	}
}
@media only screen and (min-width: 90em) {
	#page {
		padding-bottom: 20.5em;
	}
}

/*#page .transparent {
    background-color: transparent !important;
}*/
#page #page_content a.blocklink {
border-bottom: none;
}
/* FONT STYLE - check for contrast accessibility, may need color variants for different backgrounds. If non-standard font required, remember to import it at top of stylesheet */

#page_content H1, #page_content H2, #page_content H3, #page_content H4, p.caption, #local_menu_header li, #page_content dt, #page .pseudo-h1 a, #page p, p.lead,  #page li, #page #page_content a {
	font-family: "overpass", sans-serif;
}
#page_content H1, #page_content H2, #page_content H3, #page_content H4, p.caption, #local_menu_header li, #page_content dt {
	font-weight: 700px;
    color: #A83215;
}

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

#page .pseudo-h1 {
	font-size: 3em;
}

#page p, p.lead,  #page li  {
	  color: #000;
}

/* NAVIGATION */

#page .navbar .nav>li {
	border-left: 1px solid #f6d6a2;
}
@media only screen and (min-width: 37.5em) {
	#page .navbar .nav>li {
		width:15.60%;
	}
	#page .navbar .nav>li:nth-of-type(3) {
		width:22%;
	}
}

@media only screen and (min-width: 64em) {
	#page .navbar .nav>li {
		width:16.60%;
	}
	#page .navbar .nav>li:nth-of-type(3) {
		width:17%;
	}
}

#page .navbar .nav>li:first-of-type {
	border-left: none;
}

#page .navbar .nav>li>a {
    text-shadow: none;
    font-size: larger;
	color:#FFFFFF;
	text-shadow: none; 
	text-align: center;
}

#page ul.dropdown-menu li a {
    background-color: #bf3a18;
    color: #FFFFFF;
}

#page ul.dropdown-menu li a:hover {
	background-color: #f6d6a2;
	color: #bf3a18 !important;
}

#page .navbar-inner{
	background: #bf3a18;
	border: 1px solid #f6d6a2;
}

/* NAVIGATION DROPDOWN ARROWS - the arrow comprises border-top and border-bottom, so ensure both are same colour */

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

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

#page #page_content .well,
#cboxContent .well {
    background: #f6d6a2;
    color: #000;
}

#page .well>h3{
	color:#AC3415;
}

#page #page_content .well.green,
#cboxContent .well.green {
    background: #a79b18;
	background-image: url("/-/media/Files/CSS/archives/images/pattern-white-10.png");
	background-repeat: repeat;
	background-position: top left;
	color:#000;
	text-shadow: none; 
}
#page #page_content .well.orange,
#cboxContent .well.orange {
    background: #d86712;
	background-image: url("/-/media/Files/CSS/archives/images/pattern-orange-10.png");
	background-repeat: repeat;
	background-position: top left;
	text-shadow: none; 
}

#page #page_content .well.orange a,
#page #page_content .well.green a {
    font-family: "overpass", sans-serif;
    color: #000000;
    border-bottom: 1px solid #000000;
    font-weight: bolder;
}

#page #page_content .breakout-bg.well.orange a:after,
#page #page_content .well.green a:after {
	color: #000;
	border: 1px solid #000;
}

#page .well.green h2,
#cboxContent .well.green h2,
#page .well.green h3,
#cboxContent .well.green h3,
#page .well.green h4,
#cboxContent .well.green h4,
#page .well.green a,
#cboxContent .well.green a,
#page .well.orange h2,
#cboxContent .well.orange h2,
#page .well.orange h3,
#cboxContent .well.orange h3,
#page .well.orange h4,
#cboxContent .well.orange h4,
#page .well.orange a,
#cboxContent .well.orange a {
    color: #000;
}

#page .well{
min-height:100%;
}

#page .conform-block>.columns>div {
    width: -webkit-fill-available;
}


/* BREAKOUT AREAS - as with wells, multiple styles of breakout area can be created. Additional classes can be added in Experience Editor (via 'Edit component properties'), such as 'alternate', 'alternate-two'
    These classes have no inherent styling attached and so can be used to build up a suite of styled breakout blocks */

#page .breakout-bg {
    background: #f6d6a2;
	background-image: url("/-/media/Files/CSS/archives/images/pattern-white-10.png");
	background-size: 50%;	
    color: #000;
	min-height: 10em;
	padding-top: 1em;
    padding-bottom: 0.2em;
}

#page .breakout-bg h2, #page .breakout-bg h3, #page .breakout-bg h4 {
    color: #BF3A18;
}
#page .breakout-bg.alternate {
	background: #BF3A18;
    color: #fff;
    min-height: 10em;
	padding-top: 0.2em;
    padding-bottom: 0.2em;
}

#page .breakout-bg.alternate p, #page .breakout-bg.alternate h2, #page .breakout-bg.alternate h3, #page .breakout-bg.alternate h4, #page .breakout-bg.alternate a, #page .breakout-bg.alternate a:after, #page .breakout-bg.alternate li {
    color: #FFFFFF !important;
}

#page .breakout-bg.alternate a {
    font-family: "overpass", sans-serif;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-weight: bolder;
}
#page .breakout-bg.alternate a:after{
	 border: 1px solid #fff;
}
#page .breakout-bg.transparent{
	background:none;
}

#page .breakout-bg .thumbnail h3 {
	color: #000000;
}
#page .breakout-bg .thumbnail{
	border-bottom: none !important;
}

/* BUTTONS - a class of .green can be added to make a generic Hantsweb call-to-action button, and may already be present in renderings which include a button */

#page button[type="submit"], a[role="button"], a[role="button"]:visited, input[type="submit"], input[type="reset"], input[type="button"] {
    color: #fff !important;
	background-color: #BF3A18 !important;
	text-shadow: none;
}

#page button[id="search"] {
	font-size: 1.2rem;
}

a[role="button"]:after {
	color: #fff !important;
	border: 1px solid #fff !important;
}
#page button[type="submit"]:hover, a[role="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: #BF3A18 !important;
	background-color: #f6d6a2 !important;
}
a[role="button"]:hover:after {
	color: #BF3A18;
	border: 1px solid #BF3A18;
}
#page .breakout-bg.alternate button,
#page .breakout-bg.alternate a[role="button"],
#page .breakout-bg.alternate a[role="button"]:visited,
#page .breakout-bg.alternate input[type="submit"],
#page .breakout-bg.alternate input[type="reset"],
#page .breakout-bg.alternate input[type="button"] {
    color: #A83215 !important;
	background-color: #f6d6a2 !important;
	text-shadow: none;
}
#page .breakout-bg.alternate button:hover,
#page .breakout-bg.alternate a[role="button"]:hover,
#page .breakout-bg.alternate input[type="submit"]:hover,
#page .breakout-bg.alternate input[type="reset"]:hover,
#page .breakout-bg.alternate input[type="button"]:hover {
    color: #fff !important;
	background-color: #BF3A18 !important;
}

#page .breakout-bg button:hover,
#page .breakout-bg a[role="button"]:hover,
#page .breakout-bg input[type="submit"]:hover,
#page .breakout-bg input[type="reset"]:hover,
#page .breakout-bg input[type="button"]:hover,
div.well.add-top a[role="button"]:hover {
    color: #FFFFFF !important;
	background-color: #d86712 !important;
}

/* TILES */

a.thumbnail,
div.link-colorbox li:nth-of-type(even) a {
    background-color: #a79b18;    
	border: #a79b18;
	background-image: url("/-/media/Files/CSS/archives/images/pattern-white-10.png");
	background-repeat: repeat;
	background-position: right bottom, left top;
	background-size: 100%;
    text-shadow: none;
    text-align: center;
	padding: 0.6em;
}

a.thumbnail p {
    
    font-size: 1.5rem;
    margin: .75em 0;
    line-height: 1.25em;
    margin-top: 5px;
}

a.thumbnail.center {
	box-shadow: inset 0 0.125rem 0 0.125rem transparent, 0 0.5rem 0 -0.25rem rgb(0 0 0 / 10%);
}

a.thumbnail.center:hover {
	background-color: rgba(167,155,24,0.6);
}

div.row div.link-colorbox:nth-of-type(1) div.three:nth-of-type(2) a.thumbnail:hover,
div.row div.link-colorbox:nth-of-type(1) div.three:nth-of-type(4) a.thumbnail:hover,
div.row div.link-colorbox:nth-of-type(2) div.three:nth-of-type(1) a.thumbnail:hover,
div.row div.link-colorbox:nth-of-type(2) div.three:nth-of-type(3) a.thumbnail:hover {
	background-color: rgba(216,103,18,0.6);
}


/* KEYFIGURES - aka price blocks */

#page #page_content .keyfigure.well {
    background-color: #d86712;
    color: #000;
    text-shadow: none;
}

#cboxContent .keyfigure.well {
    background-color: #d86712;
    color: #000;
    text-shadow: none;
}

figcaption {
    color: #000;
    font-style: normal;
}

/* HR - dividing lines */

hr:before {
    display: block;
    height: 1px;
    content: '';
    position: relative;
    bottom: -0.5rem;
    visibility: visible;
    width: 100%;
    background: rgba(0,0,0,.1);
    background: -webkit-linear-gradient(left,transparent 0%,rgba(0,0,0,.25) 50%,transparent 100%);
    background: linear-gradient(to right,transparent 0%,rgba(0,0,0,.25) 50%,transparent 100%);
}

hr:after {
    display: block;
    height: 2px;
    content: '';
    position: relative;
    visibility: visible;
    width: 100%;
    background: rgba(216,103,18,.75);
    background: -webkit-linear-gradient(left,rgba(216,103,18,0) 0%,#D86712 50%,rgba(216,103,18,0) 100%);
    background: linear-gradient(to right,rgba(216,103,18,0) 0%,#D86712 50%,rgba(216,103,18,0) 100%);
}

/* ACCORDIONS */

#page details{margin:0.5em 0;}

#page details summary {
	color: #BF3A18;
	border-radius: 0.5em;
	border:#BF3A18 solid 2px;
	box-shadow: none;
}

/* +/- sign on collapsed/expanded accordion - ensure color and border-color match */
details>summary::before {
	color: #BF3A18;
    border-color:#BF3A18 ;
}

details summary[aria-expanded="true"]:before {
	color: #BF3A18;
    border-color:#BF3A18 ;
}


#page details>summary::before {
border: 0px;
font-size: 2.5rem;
}

/* QUOTES */

blockquote.feature-quote q:before,
blockquote.feature-quote p:before {
	color: #a79b18;
}
blockquote.feature-quote {
	margin-bottom: 2em;
}

@media only screen and (min-width: 37.5em) {
	#page .feature-quote.large {
		left: 25%;
	}
}

/*Images*/
img.orange-frame {
    image-rendering: auto;
    height: auto;
    vertical-align: middle;
    background-image: url(/-/media/Files/CSS/archives/images/pattern-orange.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 10px;
}
img.light-frame {
	image-rendering: auto;
	height: auto;
	vertical-align: middle;
	background-image:url(/-/media/Files/CSS/archives/images/pattern-orange-10.png);
	background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 10px;
}

.overlay-image p.caption {
	background: rgba(167,155,24,0.9);
}

#page .scale-images .thumbnail p {
	color: #000000 !important;
}

.thumbnail i {
    display: none !important;
}

a.thumbnail.center p:first-of-type {
    display: none;
}

/* SEARCH PROMO BLOCK */

#search-promo-hero {
    background-image: url(/-/media/Images/archives/History-pages/00-thatched-480x400/64-thatched-1500x400.jpg);
    background-size: cover;
    background-position: center center;
    padding: 2rem;
}

#search-promo-hero .well {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 1.5rem;
    margin: 0.5rem;
    box-shadow: 0 0 0 0.5em rgba(145,132,90,0.5), inset 0 2px 0 0 rgba(149,149,125,1.0);
}
#search-promo-hero .seven.columns {
    border-radius: 2rem;
    border: 1px solid rgba(132,117,76,0.75);
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
    padding: 0;
}
@media screen and (min-width: 37.5em) {
#search-promo-hero .seven.columns {
    width: 45%;
}
}

#search-promo-hero h2,
#search-promo-hero .lead {
    color: #BF3A18;
}
#search-promo-hero h2 {
    font-size: 2rem;
}
#search-promo-hero .lead {
    font-size: 1.5rem;
}

.hero-form.has-legend fieldset legend {
	background-color: #BF3A18;
	color: #fff;
	font-size: 1.5rem;
}

#page input[type="text"] {
	height: 4rem;
}

.input-append .button, .input-append button {
	height: 4rem;
}

/* HOMEPAGE SLIDESHOW */
#slideshow ul.on li div.caption {
	position: absolute;
	max-width: 100%;
	background-color: rgba(0, 0, 0, 0.35);
	height: auto !important;
	padding: 1rem 4rem;
	text-align: center;	
}  

#slideshow ul.on li div.caption h2, #slideshow ul.on li div.caption p {
	color: #fff;
	margin-bottom:1em;
	font-family: overpass, sans-serif;
	font-weight: 600;
}

#slideshow .navprev {
    margin-left: 0.5rem;
}

#slideshow .navnext {
    margin-right: 0.5rem;
}

#slideshow ul.on li div.caption h2 {
    font-size: 1.25rem;
}
	
#slideshow ul.on li div.caption p {
    font-size: 0.9rem;
}

@media only screen and (min-width: 48em) {
	#slideshow ul.on li div.caption {
		display: inline-block;
		position: absolute;
		top: 1rem;
		left: 50%;
		max-width: 60%;
		bottom: auto !important;
		margin:0 0 0 -30%;
		padding:2rem;
	}
	#slideshow .navprev {
        margin-left: 3rem;
    }
	#slideshow .navnext {
        margin-right: 3rem;
    }

	#slideshow ul.on li div.caption h2 {
    	font-size: 2rem;
	}
	
	#slideshow ul.on li div.caption p {
    	font-size: 1rem;
	}
}

@media only screen and (min-width: 64em) {
	#slideshow ul.on li div.caption {
		height: 100% !important;
		margin: 0;
		background: 
		linear-gradient(to bottom left, transparent 50%, #bf3a18 50%);
		background-position: left bottom;
		max-width: 45%;
		top: 0;
		left: 0;
	}
	#slideshow .navbuttons {
		bottom: 100px;
	}
	#slideshow ul.on li div.caption h2 {
		font-size: 1.5rem;
		position: absolute;
		top: 55%;
		max-width: 45%;
		color: #FFFFFF;
	}
	#slideshow ul.on li div.caption p {
		font-size: 1rem;
		position: absolute;
		top: 75%;
		max-width: 65%;
		line-height: 2rem;
		color: #FFFFFF;
	}
}

@media only screen and (min-width: 90em) {
	#slideshow .navbuttons {
		bottom: 150px;
	}
	#slideshow ul.on li div.caption h2 {
		font-size: 2.5rem;
		top: 50%;
		max-width: 50%;
	}
	#slideshow ul.on li div.caption p {
		font-size: 1.45rem;
		top: 70%;
		max-width: 65%;
	}
}

/* POPULAR RECORDS - card wall */

.card-media {
	height: 10em !important;
}

.card-media img {
	top: 68% !important;
}

/* EVENTS */

#page .event-search-breakout {
	display: none;
}

.event-tag-results .tag {
	background: #a79b18 !important;
}

#page #page_content .event-tag-results a,
#page #page_content a.paginate_active {
	color: #000000;
}

.paginate a.paginate_active, .dataTables_paginate a.paginate_active {
	background-color: #a79b18 !important;
}

.ui-datepicker-trigger {
	right: 0 !important;
}

#page .dateblock.well {
	background: #FFFFFF !important;
	color: #bf3a18 !important;
}
/*inline content*/
.breakout-bg.inline-expand .four .active:after {
    content: " ";
    width: 0;
    height: 0;
    border-left: 141.3px solid transparent !important;
    border-right: 141.3px solid transparent !important;
    border-top: 30px solid rgba(167,155,24,.4) !important;
    border-bottom: none !important;
    position: absolute;
    bottom: -30px;
    left: 0;
    visibility: visible;
}
.breakout-bg.inline-expand .three .active:after {
	content: " ";
    width: 0;
    height: 0;
    border-left: 93.4px solid transparent !important;
    border-right: 93.4px solid transparent !important;
    border-top: 28px solid rgba(167,155,24,.4) !important;
    border-bottom: none !important;
    position: absolute;
    bottom: -28px;
    left: 10px;
    visibility: visible;
}

/* Guide Pages */

div#local_nav_guide li.active a {
	background-color: #a79b18;
	color: #000000 !important;
}

div#local_nav_guide li a:hover {
	background-color: rgba(167,155,24,0.1);
}

div#local_nav_guide h3.nav-header {
	text-shadow: none !important;
}

.numbered-blocks dt:before {
	background-color: rgba(167,155,24,0.1);
}

/*Events social media links*/
a.facebookShare:after{
	color: #fff !important;
	border-color: transparent !important;
}
a.twitterShare:after{
	color: #000 !important;
	border-color: transparent !important;
}