/*Colours Green #7d9938, Dark green: #495b2b,  Grey Green #59675d, 
Purple: #553a82, Lilac: #8d7ca8, Brown: #784c2f*/




/* PAGE BACKGROUND */

#page {
	background-color: #E3DDD2;
	background-image:  url("/-/media/files/css/qecp/qe-bg-50.png");
	background-repeat:  repeat;
	background-position:  left top;
	background-size: 100%;
}

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

/*FOOTER*/

.footer-image {
background-color: #7C9938;
margin-top: -3em !important;
    padding: 0 3em;
}

.footer-image h2 {
    color: #000
}

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

/*CONFORM BLOCKS FIX - WELL HEIGHT MUST ALSO BE SET TO 100%*/

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

#page .row.alternate {
    padding: 0 1em;
}


/* FONT STYLES - SEE BREAKOUTS AND WELLS FOR SPECIFIC CHANGES */

#page h1, h2, h3, p.title{
	font-weight:700;
    color:#59675d;
	}

#page h1 {
	font-size: 2.5em;
    padding-top: 1.5em;
}

/* Used on landing pages */
#page .breakout-area h1 {

	padding-top: 0em!important ;
}

/* Used on homepage */
/*.columns.twelve.center h1 {
    color: white!important;
    font-size:2.8em !important; 
}*/

#page .columns.twelve.center {
    display: none;
}

@media only screen and (min-width: 48em) {
    .columns.twelve.center h1 {
        font-size:2.3em !important; 
    }
}

@media only screen and (min-width: 60em) {
    .columns.twelve.center h1 {
        font-size:3em !important; 
    }
}

#page h2 {
	font-size: 1.75em;
}

/* Sorts padding on event pages */
#page section.row.event-banner-row {
    padding-top: 4em;
}



#page h2.card-heading {
    font-size: 1.25em!important;
}

#page p.caption.bottom {
    font-size: 1.25rem;
    font-weight: 700;
    
}

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

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



/* NAVIGATION & HEADER */

#local_header {
    z-index: 10000;
    }

#local_header .navbar-inner {
    background-color: rgb(58,43,112,0.75) !important;
    color: #fff;
    position: absolute;
    left: calc(-50vw + 50%);
    z-index: 1000;
    width: 100vw;
    box-shadow: none;
}

.banner-area.breakout-area h2 {	
     position: absolute;
	left: -9999px;
}



/* MOBILE MENU BAR COLOUR */
#local_header .navbar-inner #header {
	background: #002848;
}

#local_header .nav>li {
	border-right: 1px solid #fff;
}

@media only screen and (min-width: 48em) {
    #local_header .nav>li {
	    width: 14.2%;
    }
}

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

#local_header .nav>li>a {
    text-shadow: none;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.25em;
}

@media only screen and (min-width: 48em) and (max-width: 59em) {
    #local_header .nav>li>a {
        font-size: 1em;
    }
}

@media only screen and (min-width: 48em) {
	ul#local_menu_header {
	    padding: 0 1em;
	}
}

@media only screen and (max-width: 37.5em) {
    #local_header .navbar-inner {
        width: 100vw;
    }
}

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

    div.noprint a.blocklink img.scale-with-grid {
        top: 130px;
        position: absolute;
        z-index: 10;
        left: 10px;
    }
    /*.columns.twelve.center h1 {
        font-size: revert;
    }*/
}

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

    div.noprint a.blocklink img.scale-with-grid {
        top: 108px;
        position: absolute;
        z-index: 10;
        left: 171px;
    }
    .columns.twelve.center h1 {
        font-size: 2.25rem;
    }
}


/* NAVIGATION DROPDOWN ARROWS  */

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

/* NAVIGATION DROPDOWN  */  

#page ul.dropdown-menu li a {
       background-color: #fff;
  color:#000!important;
}

#page ul.dropdown-menu li a:hover {
	background-color: #685c90;
	color: #fff !important;
		
}

/* 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 ul.dropdown-menu {
        display: none;
    }
}


/*IMAGES*/
#page img.frame {
    padding: 0.5em;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0.5em 0.5em 0.75em 0 rgba(0,0,0,0.25);
  
}


#page img.tilt-right {
	  transform: rotate(5deg);
}

#page img.tilt-left {
	   transform: rotate(-2deg);
}


/* BREAKOUT BLOCKS - */

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

#page .breakout-area.purple {
    background-color: #8d7ca8;
    color: #000!important;
}


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




#page .breakout-area.dkgreen {
    background-color: #59675d;
    color:#fff;
}

#page .breakout-area.dkpurple {
    background-color: #553a82;
    color:#fff;
}



#page .breakout-area.dkgreen h2, .breakout-area.dkgreen h1 {
   
    color:#fff!important;
}

#page .breakout-area.dkpurple h2, .breakout-area.dkpurple h1 {
   
    color:#fff!important;
}

#page .breakout-area.tyre {
    background-image: URL(/-/media/Files/CSS/qecp/qe-tyre.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100%;
}

#page .breakout-area.boot {
    background-image: URL(/-/media/Files/CSS/qecp/qe-boot.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100%;
}

/* 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 .columns.three {
    padding-right: 1.5em;
}



/* BUTTONS */
		
a[role="button"],
a[role="button"]:visited,
a[role="button"].green,
a[role="button"].white,
button.green,
input[type="submit"].green,
input[type="reset"].green,
input[type="button"].green {
	background: linear-gradient(to bottom, #371d64 0%,#61498b 100%);
	color: #fff;
	border-radius: .5em;
	min-height: 3em;
	transition: all .5s ease;
	box-shadow: none;
	border: none;
	font-weight: 700;
}

a[role="button"]:hover, 
a[role=button].white:hover,
a[role="button"].green:hover,
button.green:hover,
input[type="submit"].green:hover,
input[type="reset"].green:hover,
input[type="button"].green:hover
 {
	background: linear-gradient(to bottom, #61498b 0%,#371d64 100%);
	color: #fff;
	
}

/* ACCORDIONS */

#page details summary {
    display: block;
    line-height: 1em;
    margin-top: 0.25em;
    border: 0.25rem solid #553a82!important;
    border-radius: 10px;
    background-color: #8d7ca8;
    color: #000;
	box-shadow:none;
	
}

#page details summary::before {
    color: #000!important;
    border-color: #000!important;
}

details p {
    margin-left: 3em!important;
}

details h3, details h4 {
    margin-left: 2.5em!important;
}

details h3 {
  color: #000;
}





/* WELLS */

#page .well {
    background-color: #efe2dca3;
    padding: 2em;
    height: 100%;
}

.well.alternate {
    background-color: transparent!important;
}

#page .well.green {
    background-color: #59675d;
	color: #fff;
}
#page .well.purple {
    background-color: #8d7ca8; 
	color: #000
}
#page .well.purple p, .well.purple h2, .well.purple h3{
		color:#000;   
}


/* KEYFIGURES */

.keyfigure .figure {
    font-size: 2em;
    line-height: 1em;
    font-style: oblique;
    font-weight: 700;
  
}

#page .keyfigure.well {
    background-color: #7d9938;
    border-radius: 20px;
}

/* CONTENT CARDS */

.card:hover .card-media img {
	-webkit-filter: brightness(1.15);
	filter: brightness(1.15);
}

.card .card-content .card-heading {
	position: absolute;
	top: -4em;
	background: linear-gradient(to bottom, #371d64 0%,#61498b 100%);
	color: white ! important ;
	padding: 0.5rem 1rem;
	right: -0.75em;
	text-align: right;
	margin: 0 !important;
	border-radius: 0.5em 0 0 0.5em;
	width: auto;
}

.card-description {
		padding-top:1em;
	
.card-description {
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top:1em;
		line-height: 1.25;
		font-size: 1em;
		color: #222;
};
		font-size: 1rem;
}


.card:hover .card-content .card-heading{
	font-size:1.5rem;
}


.wall .brick .card-media img {
	position: relative;
	top: 0;
	transform: none;
}

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

/* HIDES EMPTY H2 ON CONTENT CARDS */

.alternate-seven .card-heading h2 {
display: none;
}

/* Hide extra headings on home page walks and trails content cards */
#page .breakout-area.boot.alt h2.card-heading {
	display: none;
}

/* Hide extra headings on trails pages content cards */
.breakout-bg.bg.transparent.alt h2.card-heading {
	display: none;
}

/* Remove footer background colour applied to footer tag in main Hantsweb stylesheet */
#page .breakout-area.boot.alt .card footer, .breakout-bg.bg.transparent.alt .card footer {
	background: transparent;
}

/* VISIBILITY CLASSES FOR IMAGES ETC */


@media print, screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important; } }

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important; } }

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important; } }

@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important; } }

@media print, screen and (min-width: 40em) and (max-width: 63.99875em) {
  .hide-for-medium-only {
    display: none !important; } }

@media screen and (max-width: 39.99875em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important; } }

@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important; } }

@media screen and (max-width: 63.99875em) {
  .show-for-large {
    display: none !important; } }

@media print, screen and (min-width: 64em) and (max-width: 74.99875em) {
  .hide-for-large-only {
    display: none !important; } }

@media screen and (max-width: 63.99875em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important; } }



/* PROMO LOOPING VIDEO */

#video-overlay {
    position: relative;
    bottom: 4em;
    right: 0;
    /* background: rgba(0, 0, 0, 0.75); */
    padding: 1em;
}

#video-overlay h2{
    font-size: 2em;
    position: absolute;
    color: #fff;
    text-align: right;
    font-style:oblique;
    text-shadow: 0 0 0.25em rgba(0,0,0,1);
    right: 0;
    /*top: -7em;*/
    bottom: 1em;
}

#video-overlay a[role="button"].green{
    position: absolute;
	right: 3em;
    top: -0.6em;
}

#auto-video-pause{
    min-height:auto;
    border-radius: 10em;
    height: 2em;
    width: 2em;
    text-align: center;
    color: #fff;
   	background: linear-gradient(to bottom, #371d64 0%,#61498b 100%);
    box-shadow: none;
    position: absolute;
    right: 0;
    bottom: 0;
}

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

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

@media only screen and (min-width: 60em) {
	#auto-video {
		width: 100%;
	}
}

/* EVENTS */
/* Hide in or around search filter */
ul#local_filters li:nth-child(2){
	display:none;
}

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

/* Hide addresses used for map pins */
.surround {
    display: none;
}

/* HOMEPAGE FEATURES */

.breakout-area.feature a.thumbnail:hover {
	background-color: #59675d87;
	color: #000;
}

.breakout-area.feature a.thumbnail:hover .title {
	color: #000;

}

.breakout-area.feature a.thumbnail {
	background-color: #59675d;
	color: #fff;
	box-shadow:none;
}

.breakout-area.feature a.thumbnail .title {
	color: #fff;
font-size: 1.5em
}