/* GENERAL NOTES - 
    All microsite css should be created in a file added at microsite landing page level, page level css files can be added as a last resort for e.g. promo pages with unique styles within a microsite,
    inline styling should be avoided AT ALL COSTS.

    Build for mobile first! This means all default css values should be for mobile device screen sizes (<37.5em), with variations on larger screen sizes added via media queries.
    Our standard screen size breakpoints are:
    @media only screen and (min-width: 37.5em) - for screen sizes larger than mobile
    @media only screen and (min-width: 48em) - for screens larger than tablet
    @media only screen and (min-width: 64em) - for wide screens

    Elements below are grouped by common type, but feel free to split them out if for example your H2 and H3 elements are different colours.

    Colour contrast accessibility can be checked here: https://webaim.org/resources/contrastchecker/
*/

/*colours: #D1CA13, #967B3A, #008D88 */

/* FONT IMPORT - only use if non-standard font is required */

/* cyrillic-ext */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(/Assets/fonts/nunito/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTk3j77e.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(/Assets/fonts/nunito/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTA3j77e.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(/Assets/fonts/nunito/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTs3j77e.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(/Assets/fonts/nunito/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTo3j77e.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url(/Assets/fonts/nunito/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3jw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* PAGE BACKGROUND - only background-color required if no images are being used. Hantsweb page background-color is set at #f8f8f8 by default */

#page {
	background-color: #fff;
    background-image: url(/-/media/Files/CSS/county-farms/turquoise-silhouette.png), url(/-/media/Files/CSS/county-farms/lime-silhouette.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0% 100%, 100% 100%;
    padding-bottom: 10rem;
}

@media only screen and (min-width: 37.5em) {
    #page {
        background-size: 50em;
	
	}
}


@media only screen and (min-width: 48em) {
    #page {
        background-size: 60em;
	padding-bottom: 19rem;
    }
}


@media only screen and (min-width: 64em) {
    #page {
        background-size: 80em;
		padding-bottom: 25em;
	
    }
}


/* 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, p.caption, #local_menu_header li {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
    color: #008D88;
    text-shadow: none;
}

#page_content H3, #page_content H4 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	color:#000;
	text-shadow: none;
}

#page p, p.lead {
    font-family: 'Nunito', sans-serif;;
    font-weight: 400;
    color: #000;
}

#page_content a {
	border-bottom: 1px solid #8C7236;
    color: #8C7236;
}

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

#page .pseudo-h1 {
	font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 3em;
	padding: 20px 0;
}

/* NAVIGATION & HEADER */

/* HEADER */

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

    #page .navbar .nav>li:nth-of-type(2) {
        width: 32%;
    }

    #page .navbar .nav>li:nth-of-type(3) {
        width: 19%
    }

    #page .navbar .nav>li:nth-of-type(4) {
        width: 26%
    }
}

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

#page .navbar-inner{
	background-color: #008D88;
}
#page ul.dropdown-menu li a {
    background-color: #967B3A;
    color: #000 !important;
}

/* 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: #000;
    border-bottom-color: #000;
}
/*Banner area*/
#page_content .banner-area {
    padding: 0 0 1em 0;
}

#page_content .banner-area p {
	color:#fff;
	font-size: 2rem;
	text-shadow: 1px 1px #000;
	line-height: 1.5em;
}

/* for tablets */
@media only screen and (min-width: 48em) {
    #page_content .banner-area p {   
        font-size: 3rem;
    }
}
/* for PCs */
@media only screen and (min-width: 64em) {
    #page_content .banner-area p {   
        font-size: 4rem;
        margin:0;
    }
}

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

#page .well {
	background: #D1CA13;
	color: #000;
}

#page .well h2, #page .well h3, #page .well h4 {
    color: #000;
}

#page .well p, #page .well a, #page .well ul {
    text-shadow: none;
}

#page .well a {
    color: #000;
    font-weight: bold;
}
#page .well.fixed-height {
 height: max-content;
 }


@media only screen and (min-width: 48em) {
#page .well.fixed-height {
 height: 30em;
 }
}

@media only screen and (min-width: 64em) {
#page .well.fixed-height {
 height: 20em;
 }
}

/* 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: #967B3A;
    color: #000;
    /*text-shadow: ;    */
}
#page .breakout-bg.alternate{
	background:#D1CA13;
	color: #000;
}

#page .breakout-bg.transparent {
    background: transparent;
}
#page .breakout-bg h2, #page .breakout-bg h3, #page .breakout-bg h4, #page .breakout-bg a {
    color: #000;
}

/* 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"] {
    color: #000 !important;
	background-color: #008D88;
	text-shadow: none;
}

#page button:hover, a[role="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: #000 !important;
	background-color: #967B3A;
}
#page a[role="button"].green{
	background-color: #967B3A;
	color: #000
}
#page a[role="button"].green:hover{
	background-color: #008D88;
	color: #000
}
/*OVERLAY IMAGES*/
.caption.bottom {
    background-color: #967B3A;
    width: 90%;
    border-radius: 0 0.5em 0 0.5em;
    bottom: 1px !important;
}

a.overlay-image.blocklink {
	border-bottom: none !important;
}

/*GUIDE PAGES*/
ol.numbered>li:before{
	background-color:#D1CA13;
}
.numbered-blocks dt:before{
	background-color: #D1CA13;
}

.list .nav li.active a{
	background-color:#8C7236;
    color: #ffffff !important;
}

#page_content img {
    border-radius: 0.5em;
}

#local_nav_guide a {
    border: none;
}

/*QUOTES*/

blockquote.feature-quote q:before, blockquote.feature-quote p:before, blockquote q:before, blockquote p:before {
    color: #008D88;
}

blockquote q {
    color: #967B3A;
}
/* ACCORDIONS */

summary.medium::before {
	color: #008D88 !important;
    border-color: #008D88 !important;
}