/* 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 Bright blue #5f98c9, paler blue #8cbade, very pale blue #a8d9f3, green #aed9b7, teal #93ceca  */

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

@import url("https://use.typekit.net/hne2jse.css");

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


#page {
	padding-top:0;
}

/* 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 H1, #page_content H2, #page_content H3, #page_content p {
	font-family: "museo-sans", sans-serif;
}

#page H1 {
  font-weight: 1000 !important;
  font-style: normal; 
	color: #fff;
}

#page_content H2 {
	color: #5f98c9;
	font-weight: 900;

}

#page p.lead
 {
color: #fff;
	 font-size: 2.5em;
	padding-top: 0.5em;
}



/* NAVIGATION & HEADER */

/* HEADER */

#microsite_header {
	background-color: #5f98c9;
	position: relative;
	height: 450px;
}

#microsite_header::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 220px;
    background-image: url("/-/media/Images/socialcareandhealth/public health/strategy2630/Public-Health-Strategy-web-images-top-image-people.png");
    background-repeat: no-repeat;
    background-size: contain;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30%;
    pointer-events: none;
}

@media only screen and (min-width: 48em) {
	#microsite_header {
		height: 300px;
		}
	
	#microsite_header::after {
     	width: 550px;
 		left: auto;
		right: 0;
		transform: none;
		bottom: -70px;
}
}

@media only screen and (min-width: 64em) {
	#microsite_header::after {
 		left: 40%;
	}
}

/* NAVIGATION */

ul#global_breadcrumb {
	padding-top: 1em;
}

#page .navbar .nav>li {
	border: ;
	margin: ;
	padding: ;
}

#page .navbar .nav>li>a {
    text-shadow: ;
    font-size: ;
	color: ;
}

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

/* 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: ;
    border-bottom-color: ;
}

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

#page .well {
	background: ;
	color: ;
	text-shadow: ;
}

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

/* 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: #fff;
    color: #222;
    text-shadow: none;    
}

#page .breakout-bg.transparent {
    background: transparent;
}

#page .breakout-bg.alternate {
    background: #AED9B7;
    color: #222;
    text-shadow: none;    
}

#page .breakout-bg.alternate h2, #page .breakout-bg h3, #page .breakout-bg h4, #page .breakout-bg a {
    color: #222;
}


#page .breakout-area.alternate-two {
	min-height: 400px;
	padding-top: 2rem;
	background: #5f98c9;
	color: #fff;
	overflow: visible;
    position: relative;
    background-image: url("/-/media/Images/socialcareandhealth/public%20health/strategy2630/Public-Health-Strategy-web-images-bottom-image-people.png");
    background-repeat: no-repeat;
    background-position: center bottom -3px;
    background-size: 300px;
}

@media only screen and (min-width: 37.5em) {
	#page .breakout-area.alternate-two {
		background-size: 350px;
}
}

@media only screen and (min-width: 48em) {
	#page .breakout-area.alternate-two {
			background-position: center bottom -4px;
			background-size: 400px;
}
}

@media only screen and (min-width: 64em) {
	#page .breakout-area.alternate-two {
		min-height: 500px;
		background-position: center bottom -9px;
		background-size: 900px;
}
}	

#page .breakout-area.alternate-two h2 {
    color: #fff !important;
}

#page .breakout-area.alternate-two a[role="button"],
#page .breakout-area.alternate-two a[role="button"]:visited {
    color: #222 !important;
    background-color: #93ceca;
    border-radius: 14px;
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
    border: 2px solid #93ceca;
}

#page .breakout-area.alternate-two a[role="button"]:hover {
    color: #222 !important;
    background-color: #E9f5f4;
    border-color: #E9f5f4;
}

#page .breakout-area.alternate-two .columns.five.offset-by-three {
	margin-left: 10px;
	padding-right: 1rem;
}

@media only screen and (min-width: 48em) {
#page .breakout-area.alternate-two .columns.five.offset-by-three {
	margin-right: 10px;
}
}

/* 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 !important;
	background-color: #67AE7F;
	border-radius: 14px;
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
	border: 2px solid #67AE7F;
}

#page button:hover, a[role="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: #222 !important;
	background-color: #EFF7F1;
}

/* KEYFIGURES - aka price blocks */

#page .keyfigure.well {
    background-color: ;
    color: ;
    text-shadow: ;
}

/* ACCORDIONS */

details summary {
	background-color: ;
	color: ;
}

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

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



a.thumbnail {
    box-shadow: none;
    border: none;
    border-radius: 1em;
}

.thumbnail img {
	position: relative;
	height: 100px;
	bottom: -125px;
	right: -40px;
	

}

.link-caption {
	position: relative;
	bottom: 100px;
	width: 60%;
	color: #000;
}


.row.alternate .columns.four:nth-of-type(3n+1) .thumbnail, .row.alternate-two .columns.four:nth-of-type(3n+2) .thumbnail, .row.alternate-three .columns.four:nth-of-type(3n+3) .thumbnail   {
    background-color: #a8d9f3;
	border: 2px solid #a8d9f3;
   
}

.row.alternate .columns.four:nth-of-type(3n+1) .thumbnail:hover, .row.alternate-two .columns.four:nth-of-type(3n+2) .thumbnail:hover, .row.alternate-three .columns.four:nth-of-type(3n+3) .thumbnail:hover  {
    background-color: #a8d9f380;
	border: 2px solid #a8d9f3;
   
}

.row.alternate .columns.four:nth-of-type(3n+2) .thumbnail, .row.alternate-two .columns.four:nth-of-type(3n+3) .thumbnail {
    background-color:  #aed9b7;
    border: 2px solid #aed9b7;
}

.row.alternate .columns.four:nth-of-type(3n+2) .thumbnail:hover, .row.alternate-two .columns.four:nth-of-type(3n+3) .thumbnail:hover {
    background-color:  #aed9b780;
}

.row.alternate .columns.four:nth-of-type(3n+3) .thumbnail, .row.alternate-three .columns.four:nth-of-type(3n+1) .thumbnail {
    background-color: #5f98c9;
	border: 2px solid #5f98c9;
}

.row.alternate .columns.four:nth-of-type(3n+3) .thumbnail:hover, .thumbnail, .row.alternate-three .columns.four:nth-of-type(3n+1) .thumbnail:hover {
    background-color: #5f98c980;
}


.row.alternate-two .columns.four:nth-of-type(3n+1) .thumbnail, .row.alternate-three .columns.four:nth-of-type(3n+2) .thumbnail {
    background-color: #93ceca;
	border: 2px solid#93ceca;
}

.row.alternate-two .columns.four:nth-of-type(3n+1) .thumbnail:hover, .row.alternate-three .columns.four:nth-of-type(3n+2) .thumbnail:hover {
    background-color: #93ceca80;
}

.talk-bubble.tri-right.left-top {
    margin:40px;
    display: inline-block;
    position: relative;
    height: auto;
    background-color: #a8d9f3;
    padding: 10px;
    border: 2px solid #5f98c9;
    border-radius: 30px;
        }

/*Triangle top left */
/*Right triangle, placed bottom right side slightly in*/
.tri-right.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: 40px;
	right: auto;
	top: -40px;
	border: 20px solid;
	border-color: transparent transparent #5f98c9 #5f98c9;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: 43px;
	right: auto;
	top: -32px;
	border: 30px solid;
	border-color: transparent transparent #a8d9f3 #a8d9f3 ;
}

/*Ambition tiles*/

.ambition-tile{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	height: 260px;
	padding: 1.5rem;
	box-sizing: border-box;
}

.tile-front{
	height: 100%;	
}

.tile-front h3 {
    line-height: 1.2;
    font-weight: 500;
    font-size: 1.15rem;
    margin-top: 1.3em;
}

.tile-back{
	height: 100%;
}


.tile-icon-front, .tile-icon-back {
    position: absolute;
	height: 110px;
	width: auto;
	bottom: 0;
	right: 5px;
}

.tile-sky-blue{
	background-color: #9ED2EA;
	border: 2px solid #9ED2EA;
}

.tile-sky-blue.active{
	background-color: #ECF6F8;
	border: 2px solid #9ED2EA;
}

.tile-green{
	background-color: #AED9B7;
	border: 2px solid #AED9B7;
}

.tile-green.active{
	background-color:#EFF7F1;
	border: 2px solid #AED9B7;
}

.tile-blue{
	background-color: #8cbade;
	border: 2px solid #8cbade;
}

.tile-blue.active{
	background-color: #E8F1F8;
	border: 2px solid #8cbade;
}

.tile-teal{
	background-color: #93ceca;
	border: 2px solid #93ceca;
}

.tile-teal.active{
	background-color: #E9F5F4;
	border: 2px solid #93ceca;
}


/*TILE FLIP */

.ambition-tile {
    cursor: pointer;
}

.ambition-tile .tile-front {
    display: block;
}

.ambition-tile .tile-back {
    display: none;
}

.ambition-tile.active .tile-front {
    display: none;
}

.ambition-tile.active .tile-back {
    display: block;
}


.tile-front, .tile-back {
    position: relative;
}

.ambition-tile::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 15px;
    width: 25px;
    height: 25px;
    background-image: url('/-/media/B2B1AC1DDC64405588B3BD28628B17AB.ashx');
    background-repeat: no-repeat;
    background-size: contain;
}