/* 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: #F26640 (orange), #404D4D (dark grey), #d1d4d4 (light grey), #70D9F5 (blue) #000 black
*/



/* FONT IMPORT - only use if non-standard font is required - Google Fonts must NEVER be used. If a Google Font is required, request the Dev team to host a copy locally */



/* 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;
}

/* 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 {
	font-family: ;
    color: #404D4D;
}

#page .pseudo-h1 a {
    text-decoration: none;
    border-bottom: none;
	color: #000;
}

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

@media only screen and (min-width: 48em){
	#page .navbar .nav>li {
   		width:25%;
		border-color: transparent;
		text-align:center;
	}
}
#page .navbar .nav>li>a {
    text-shadow: none;
	color: #000;
	font-size: 1.2em;
}

/* 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;
}

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

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

#page .well h2, #page .well h3, #page .well h4 {
    color: #404D4D;
}
#page .well.alternate {
background-color:#B4E9F9
}
/* 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, #page .breakout-area.alternate {
    background: #d1d4d4;
    color: #000;
    text-shadow: ;    
}

#page .breakout-bg h2, #page .breakout-bg h3, #page .breakout-bg h4, #page .breakout-bg a {
    color: #404D4D;
}
#page .breakout-bg.alternate, #page .breakout-area.alternate-two {
    background: #70D9F5;
}

/* 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: #fff;
	background-color: #000;
}

#page button:hover, a[role="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: #000;
	background-color: #d1d4d4;
}

/* ACCORDIONS */

/* +/- sign on collapsed/expanded accordion - ensure color and border-color match */
details>summary{
	border: 2px solid #F26640;
	margin-bottom: 0.25em;
}
details>summary::before {
	color: #F26640;
    border-color: #F26640;
}

details summary[aria-expanded="true"]:before {
	color: #F26640;
	border-color: #F26640;
}
details summary[aria-expanded="true"]{
		border: 2px solid #F26640;
	margin-bottom: 0.25em;}

/*Link title/caption tiles*/
.columns a.thumbnail.no-padding, .columns p.title, .columns p.caption  {
    background-color: #F26640;
	color:#000;
}

.columns a.thumbnail.no-padding p.title{
	font-size: 1.5em;
}
/*QUOTES*/
blockquote q:before{
	color:#F26640;
	font-size:4rem;
	left: -0.2em;
}
	
/* ORANGE BREAKOUT AREA WITH ICONS */

.breakout-area.orange {
    background-color: #F26640;
    margin-top: -25px;
    margin-bottom: 25px;
}

@media only screen and (min-width: 48em) {
.breakout-area.orange .column.one-half {
  padding: 0 2em;
	}
}

.breakout-area.orange em {
    font-size: 4em !important;
    color: #000 !important;
}

p.widget-heading {
    text-align: center;
    font-size: 2em;
    margin-bottom: 0;
    line-height: 1.1em;
}

@media only screen and (max-width: 48em) {
p.widget-heading {
    font-size: 1.5em;
   }
}

p.widget-description {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 0;
}

/* HOMEPAGE HERO IMAGE*/

.columns.twelve.center h1 {
    color: #000 !important;
}

.columns.twelve.center {
    background-color: rgba(242, 102, 64,0.9);
    top: 5em;
}
@media only screen and (min-width: 37.5em) {
    .columns.twelve.center {
        width: 80%;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        padding-left: 1em;
		top: 3em;
    }
	.pull.left {
	    margin-left: 0;
	}
}

@media only screen and (min-width: 48em) {
    .columns.twelve.center {
        width: 60%;
     	top: 6em;
    }
}

@media only screen and (min-width: 64em) {
    .columns.twelve.center {
        width: 50%;
    	top: 5em;
    }
}

@media only screen and (min-width: 90em) {
    .columns.twelve.center {
        top: 2em;
    }
}

/* For pages with no hero image at the top */
div#page_content h1.no-hero {
	padding-top: 120px;
}
/*For pages with hero image and no overlay text*/
#page .breakout-area.alternate-three .columns.twelve.center{
	display: none;
}

/* CONTENT CARDS */
#page .card{
	border: #000 solid
}