/* LEPE COLOURS */
/* yellow #C99603, dkblue #233645, blue #1B75BC, green #98C23C, white #fff */

#page {
	background-color: #f3f2ee;
	background-image:  url("/-/media/files/css/lepe/lepe-background.png");
	background-repeat: repeat;
	background-position: left-top;
	background-size: 10%;
}
.banner-area{
	padding-bottom: 0;
}

#page_content H1, #page_content H2, #page_content H3, #page_content H4, p.caption, #local_menu_header li {
	font-family: "open-sans",sans-serif;
}

#page .eight.columns.alpha h1{
	color: #1B75BC;
	padding-top: 1.5em;
}

#page p.lead {
	color:#233645;
	font-size:1.5em;
	margin-top:1rem;
}

@media only screen and (min-width: 60em){
	#page p.lead {
		font-size:1.75em;
	}
}


/*LOGO*/
a#header-logo-link {
    border-bottom: none;
}

img#header-logo {
    max-width: 80%;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

@media only screen and (min-width: 48em){
	img#header-logo {
    	max-width: 30%
	}	
}

/* NAVIGATION & HEADER */

/* HEADER */

#microsite_header {
	background: url("/-/media/files/css/lepe/seagull.png") right bottom/15% no-repeat
}

@media only screen and (min-width: 48em){
	#microsite_header {
		background: url("/-/media/files/css/lepe/bird-1.png") left 5em top 6em/21% no-repeat, url("/-/media/files/css/lepe/cloud.png") left 10em top 4.5em/10% no-repeat, url("/-/media/files/css/lepe/cloud.png") left 4em top 7.5em/10% no-repeat, url("/-/media/files/css/lepe/cloud.png") right 9em top 4.5em/10% no-repeat, url("/-/media/files/css/lepe/seagull.png") right 3em top 7em/10% no-repeat;
	}
}

@media only screen and (min-width: 64em){
	#microsite_header {
		background: url("/-/media/files/css/lepe/bird-1.png") left 5em top 6em/18% no-repeat, url("/-/media/files/css/lepe/cloud.png") left 12em top 4em/11% no-repeat, url("/-/media/files/css/lepe/cloud.png") left 3em top 8.5em/10% no-repeat, url("/-/media/files/css/lepe/cloud.png") right 11em top 4em/11% no-repeat, url("/-/media/files/css/lepe/seagull.png") right 3em top 6.5em/8% no-repeat;
	}
}

/* NAVIGATION */
#local_header .navbar-inner {
    background-color: rgba(255,255,255,0.9) !important;
    position: absolute;
    top: 11px;
    left: calc(-50vw + 50%);
    z-index: 1000;
    width: 100vw;
	box-shadow: none;
}

/*@media only screen and (min-width: 100em) {
	ul#local_menu_header {
		margin: 0 500px;
	}
}*/

@media only screen and (min-width: 48em){
	#page .navbar .nav>li {
   		width:20%;
		border-color: transparent;
		text-align:center;
	}
}

#page .navbar .nav>li>a {
    text-shadow: none;
	color: #1B75BC;
	font-weight:600;
}

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

/* NAVIGATION DROPDOWNS */
#page .dropdown-menu, #page .dropdown .caret {display: none;}
/* VIDEOS */

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

video#auto-video {
	margin-top: -1.5em;
	display: block;
	margin-right: auto;
	margin-left: auto;
}


#video-overlay a[role="button"].green {
	position: absolute;
	background: #1B75BC;
	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: #1B75BC ;
    border: 2px solid #C99603;
	box-shadow: none;
	position: absolute;
	bottom: 2em;
}

#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-vid {
    display: none;
}

/* MOBILE VIDEO DISPLAY */
@media only screen and (max-width: 37.5em) {
    video#auto-video {
	display: none;
	border-bottom: none;
}

.mob-vid {
	display: block;
	border-bottom: none;
}
}

#video-overlay-m {
	position: relative;
	bottom: 4em;
	right: 0;
	padding: 1em;
}


/* 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 .well.yellow {
	background: #C99603;
	color: #000;
}
#page .well.dkblue {
	background: #233645;
	color: #fff;
}
#page .well.blue {
	background: #1B75BC;
	color: #fff;
}
#page .well.green {
	background: #98C23C;
	color: #000;
}
#page .well.white {
	background: #fff;
	height: 100%
}
#page .well.white h2, #page .well.white h3{
	color: #1B75BC;
}

#page .well.transparent {
	background: transparent;
	height: 100%
}

/* Fix for same-height wells */
#page .conform-block>.columns>div {width: -webkit-fill-available;} 

/* GRIDS*/

.row.alt.yellow {
	background-color: #C99603;
}	

.row.alt.dkblue {
	background-color: #233645;
	color: #fff;
}	

.row.alt.blue {
	background-color: #1B75BC;
	color: #fff;
}

.row.alt.green {
	background-color: #98C23C;
}

.row.alt.white {
	background-color: #fff;
}

.row.alt .columns {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}

.row.alt .columns p, .row.alt .columns h2, .row.alt .columns h3, .row.alt .columns h4, .row.alt .columns ul, .row.alt .columns dl, .row.white .columns p, .row.white .columns h3 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.row.alt .columns .well p, .row.alt .columns .well h2 {
	padding-left: revert;
	padding-right: revert;
}

@media only screen and (min-width: 60em) {
	.row.alt .columns p.bottom-paragraph {
		margin-bottom: 0;
	}
}

.row.white .columns h2, .row.white .columns h3 {
	color: #1B75BC;
}

/* Home page 6-6 grids */
/* Make the background colour of homepage 6-6 grids white, for larger screens only */
@media only screen and (min-width: 48em) {
	.row.alt {
		background-color: #fff;
	}
}

/* Reduce vertical spacing between images and text blocks for homepage 6-6 grids */
@media only screen and (max-width: 37.5em) {
	div.row.alt .six.columns:first-child {
		margin-bottom: 0;
	}
}

/* LINKS */

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

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

/* Dark blue links for yellow, green and white wells and grids */
.row.alt.yellow a, .row.alt.yellow a:hover, .row.alt.yellow a:visited, #page .well.yellow a, #page .well.yellow a:hover, #page .well.yellow a:visited, .row.alt.green a, .row.alt.green a:hover, .row.alt.green a:visited, #page .well.green a, #page .well.green a:hover, #page .well.green a:visited, .row.alt.white a, .row.alt.white a:hover, .row.alt.white a:visited, #page .well.white a, #page .well.white a:hover, #page .well.white a:visited {
	color: #233645;
	border-bottom: 1px solid #233645;
}


/* 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, a[role="button"], a[role="button"]:visited, input[type="submit"], input[type="reset"], input[type="button"] { */
#page a[role="button"], #page a[role="button"]:visited, button#search {
	/*background-color: #C99603;*/
	background-color: transparent;
	border-radius: 0;
	text-shadow: none;
	box-shadow: none;
	border: solid 4px;
	font-weight: 700;
}
/* Upcoming events slider button */
#page a[role="button"].white, button#search {
	color:#1B75BC;
    border-color: #1B75BC;
    background-color: #fff; 
}

#page a[role="button"].white:hover, button#search:hover {
	background-color:  #1B75BC;
	color:#fff;
	border: 4px solid #e6e6e6;
}

#page .well.white a[role="button"], #page .row.white .columns a[role="button"], #page .well.white a[role="button"]:visited, #page .row.white .columns a[role="button"]:visited {
	color:#1B75BC;
	border: 4px solid #1B75BC;
	background-color: transparent;
}

#page .well.blue a[role="button"], #page .well.dkblue a[role="button"],#page .well.blue a[role="button"]:visited, #page .well.dkblue a[role="button"]:visited{
	color:#fff;
	border: 4px solid #fff;
	background-color: transparent;
}

#page .well.yellow a[role="button"], .well.green a[role="button"], #page .breakout-area.yellow a[role="button"], #page .breakout-area.green a[role="button"], #page .well.yellow a[role="button"]:visited, #page .well.green a[role="button"]:visited, #page .breakout-area.yellow a[role="button"]:visited, #page .breakout-area.green a[role="button"]:visited {
	color:#000;
	border: 4px solid #000 !important;
	background-color: transparent;
}

/* #page button:hover, a[role="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, #page .breakout-area.green a[role="button"]:hover, #page .well.yellow a[role="button"]:hover { */
#page a[role="button"]:hover, #page .breakout-area.yellow a[role="button"]:hover, #page .breakout-area.green a[role="button"]:hover, #page .well.yellow a[role="button"]:hover, #page .well.green a[role="button"]:hover {
    color: #000;
	background-color: #fff;
	border-color: #000;
	box-shadow: none;
	border-bottom: solid 4px;
}

#page .well.white a[role="button"]:hover, #page .row.white .columns a[role="button"]:hover {
	color: #fff;
    border-color: #e6e6e6;
    background-color: #1B75BC;
}

#page .well.blue a[role="button"]:hover, #page .well.blue a[href$=".pdf"]:hover:after {
	color: #1B75BC;
	border-color:#e6e6e6;
	background-color: #fff;
}

#page .well.dkblue a[role="button"]:hover, #page .well.dkblue a[href$=".pdf"]:hover:after {
	color: #233645;
	border-color:#3c5d77;
	background-color: #fff;
}


/*Well decoration */
#page .well.butterfly:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 10em;
	height: 10em;
	bottom: -3em;
	right: -4em;
	background-image: url(/-/media/files/css/lepe/butterfly.png);
	background-repeat: no-repeat;
	background-size: contain;
}

@media only screen and (min-width: 60em) {
    #page .well.butterfly:after {
        bottom: -5.5em;
    }
}

#page .well.bucket:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 7em;
    height: 6em;
    bottom: 0em;
    left: 14.5em;
	background-image: url(/-/media/files/css/lepe/bucket-150x212.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/* bucket2 - for wide blocks such as contact us on the visit page */
#page .well.bucket2:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 7em;
    height: 6em;
    bottom: 0em;
    left: 15.5em;
	background-image: url(/-/media/files/css/lepe/bucket-150x212.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/* bucket3 - for wells containing lots of text link the scavenger well on the beach page*/
#page .well.bucket3:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 7em;
    height: 6em;
    bottom: -2em;
    left: 19em;
	background-image: url(/-/media/files/css/lepe/bucket-150x212.png);
	background-repeat: no-repeat;
	background-size: contain;
}

@media only screen and (max-width: 22em) {
	#page .well.bucket3:after {
		bottom: -1em;
    	left: 15em;
	}
}

@media only screen and (min-width: 48em) {
	#page .well.bucket2:after {
		bottom: 0em;
		left: 42.5em;
		background-image: url(/-/media/files/css/lepe/bucket-150x212.png);
	}

	#page .well.bucket3:after {
		bottom: -1em;
		left: 41.5em;
	}
}

@media only screen and (min-width: 60em) {
	#page .well.bucket:after {
		width: 10em;
		height: 8em;
		bottom: -2em;
		left: 22.5em;
		background-image: url(/-/media/files/css/lepe/bucket.png);
	}

	#page .well.bucket2:after {
		width: 10em;
		height: 8em;
		bottom: 0em;
		left: 52.5em;
		background-image: url(/-/media/files/css/lepe/bucket.png);
	}

	#page .well.bucket3:after {
		bottom: -0.5em;
		left: 56.5em;
	}
}

@media only screen and (min-width: 90em) {
	#page .well.bucket:after {
		left: -5em;
	}

	#page .well.bucket2:after {
		left: 52em;
	}

	#page .well.bucket3:after {
		width: 10em;
		height: 8em;
		bottom: -0.5em;
		left: 57.5em;
		background-image: url(/-/media/files/css/lepe/bucket.png);
	}
}


/* KEYFIGURES - aka price blocks */
.keyfigure {
	text-align: center;
}

li.caption {
	font-size: 1.25rem;
}

#page .keyfigure.well {
    background-color: #1B75BC;
    color: #fff;
    text-shadow: none;
}

/* remove horizontal lines above and below the number */
.keyfigure .figure:nth-child(2):before, .caption:nth-child(1):after, .keyfigure .caption:nth-child(3):before, .keyfigure .figure:after {
	background: none;
}

/* ACCORDIONS */
details summary {
	background-color: #1B75BC;
	color: #fff;
	width: 95%;
	margin-bottom: 0.5rem;
}

/* accordions in coloured grids */
.row.alt details summary {
	margin-left: 0.5rem;
}
details summary h3{
		color: #fff !important;
}

@media only screen and (min-width: 48em) {
	.row.alt details summary {
		margin-left: 0.7rem;
	}
}

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

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




/* BREAKOUT AREAS */

/* alternate 6 closes gaps between breakouts and should be used in conjunction with one of the colour breakouts,
alternate 7 must be applied to first breakout when immediately below the navigation */

#page .breakout-area.alternate-six {
   margin-top: -1em;
}

#page .breakout-area.alternate-seven {
    margin-top: 0.5em;
}

#page .breakout-area .columns.five {
    padding: 2.5em 5em;
}

#page .breakout-area .columns.three.alt {
    padding-left: 2.5em;
}

#page .breakout-area.alternate .columns.three, #page .breakout-area.alternate .columns.four {
    padding-left: 1.25em;
}

/* Improve look of breakout areas on mobile devices */
@media only screen and (max-width: 37.5em){
	#page .breakout-area .columns.five {
    	padding: 0;
	}

	.breakout-area.yellow .row.yellow, .breakout-area.alternate-six.green .row {
		padding: 1.2em 1em 1em 1em;
	}
}

/* BREAKOUT BLOCKS - */
#page .breakout-bg.bg.transparent {
	background-color: transparent !important;
}

#page .breakout-area.green {
    background-color: #98C23C;
    color: #000!important;
}

#page .breakout-area.yellow {
    background-color: #C99603;
    color: #000!important;
}

.breakout-area.yellow h1, .breakout-area.yellow h2, .breakout-area.green h1, .breakout-area.green h2 {
    color: #000!important;
}

#page .breakout-area h2, #page .breakout-area h3{
	font-weight: bold;
}

.breakout-bg.bg.white {
	background: transparent;
	margin-top: 1em;
	margin-bottom: 1em;
}

.breakout-bg.bg.white .breakout-content {
	background: #fff;
	padding-top: 0.1em;
	padding-bottom: 1em;
}

.breakout-bg.bg.white .breakout-content h2, .breakout-bg.bg.white .breakout-content h3 {
	color: #1B75BC;
}

/*INLINE CONTENT */
#page a.thumbnail {
	background-color: #1B75BC; 
	border: 4px solid #fff;
}

#page a.thumbnail p {
    font-size: 1.5rem;
    text-align:center;
    line-height: 1.25em;
    margin-top: 5px;
	color: #fff;
}

/* EVENTS */
#page a.pullbar.thumbnail {
	background-color: #fff;
	color: #01599d;
	border: none;
}

section.row.event-banner-row {
	margin-top: 5em;
}

/* FOOTER */
.footer-image {
	background-color: #C99603;
	/*margin-top: -2.5em !important;*/
    padding: 3em 3em;
}
@media only screen and (min-width: 64em) {
	.footer-image {
		margin-top: -0.5em !important;
	}
}

@media only screen and (min-width: 90em) {
	.footer-image {
		margin-top: -3.9em !important;
	}
}
.footer-image h2 {
    color: #000
}

.footer-image a{
    color: #000;
	text-decoration:underline!important;
}

/* OVERLAY IMAGES */

.overlay-image{
	position: relative;
	overflow: hidden;
}

.overlay-image img{
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.overlay-image:hover img, .overlay-image:focus img {
	-moz-transform: scale(1.25);
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
}

.overlay-image .caption{
	background-color: #C99603;
	color: #000;
	padding-left:0.5em;
	font-weight: 700;
	position:absolute !important;
	bottom: 15% !important;
	padding: 0.25em !important;
	width:auto;
	font-size: 1.3em;
}

@media only screen and (min-width: 48em){
	.overlay-image .caption{
		font-size: 1em;
	}
}

/* H1 on hero image */

.columns.twelve.center h1, h1.mobile-hero {
	color: #fff !important;
	font-size: 2em !Important;
	/*font-size: 3.5em !Important;*/
    font-weight: 700;
    background-color: #1B75BC;
	padding: 10px 0;
	position: relative;
	text-align: center;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

/*
@media only screen and (min-width: 26em) { 
	.columns.twelve.center h1 {
		top: 350px;
	}
}*/

@media only screen and (min-width: 48em) { 
	.columns.twelve.center h1 {
		width: 40%;
		/*top: -10% !important;*/
		top: 2em;
		left:-30%;
		/*font-size: 2.5em !important;*/
		padding-left: 0.1em;
		padding-right: 0.1em;
	}
}

@media only screen and (min-width: 64em) { 
	.columns.twelve.center h1 {
		width: 40%;
		left: -31%;
		top: 100%;
		font-size: 3.5em !important;
 	}
}

@media only screen and (min-width: 90em) { 
	.columns.twelve.center h1 {
		width: 35%;
    	left: -33%;
 	}
}

h1.mobile-hero {
	width: 100%;
}
 /* FEATURE SLIDER (gallery)  */
  .bxslider a.thumbnail {
      padding: 0.75em;
    border: 0;
}

#page_content .breakout-content .bxslider.thumbnail-block a {
    box-shadow: none;
}

#page_content .breakout-content .bxslider.thumbnail-block a h3 {
    display:none;
}  

.bxslider-wrap .bx-wrapper {
    margin-bottom: 0;
    padding-bottom: 0
}

/* PROMO THUMBNAILS (e.g. link image/title)*/

.breakout-bg.bg.promo .thumbnail p.caption {
	font-size: 1em !important;	
	
}

.breakout-bg.bg.promo .thumbnail p {
	color: #000 !important;
}

.breakout-bg.bg.promo .thumbnail {
		background-color: #C99603 !Important;
	box-shadow: none;
}

.breakout-bg.bg.promo .thumbnail:hover {
			background-color: #fff !Important;
}

/*LINK TILES - TO ENABLE WHEN THERE IS ONLY ONE */

@media only screen and (min-width: 40em) {

    #page .breakout-bg.bg.promo .thumbnail>img {
        width: 70%;
        }
    #page .breakout-bg.bg.promo a.thumbnail.no-padding {
        display: flex;
        }
    #page .breakout-bg.bg.promo .columns.six a.thumbnail.no-padding, columns.four a.thumbnail.no-padding {      
        display: inline;
        }
    #page .breakout-bg.bg.promo .columns.six .thumbnail>img, .columns.four .thumbnail>img {     
        width: 100%;
    }
}
/* CONTENT CARDS */
footer.card-footer {
	background:#C99603;
}