h1, h2, h3, h4 {
	color:  #402b39;
	text-align: center;
}

body {
	border-top:  3px #40c0cb solid;
	color:  #402b39;
}

p, div, ul, li, td {
	color:  #402b39;
}

#top_bar {
	background-image:  none;
	max-width: 100%;
}	

#top_bar_inner {
	padding: 0;
	max-width: 100%;
}	

#top_logo {
	float:  none;
	display:  block;
	margin:  0 auto;
}

#award_website {
	position:  absolute;
	top: 68px;
	right:  50px;
	transition: transform 0.3s;
}

#social_media {
	position: static;
	width: auto;
}

#page_content {
	margin:  0;
	width: calc(100%);
}


@media only screen and (max-width: 1300px) and (orientation: landscape), (min-width: 769px) and (orientation: portrait) {

	#content_wrapper {
		padding: 0 50px;
	}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
	
	h1 {
		font-size: 150%;
	}

	h2 {
		font-size: 140%;
	}

	h3 {
		font-size: 130%;
	}

	h4 {
		font-size: 120%;
	}

	p {
		font-size: 90%;
	}

	#top_bar {
		height:  190px;
	}
	
	#top_bar_inner {
		height:  auto;
	}		

	#top_logo {
		padding: 0;
		width:  350px;
	}

	#social_media {
		position:  absolute;
		top: 0;
		left: 0;
		background: none;
	}

	#award_website {
		position:  absolute;
		top: 120px;
		right:  10px;
	}

	#page_content {
		margin:  0 10px;
		width: calc(100% - 20px);
	}

	#install_app_popup {
		display: flex !important;
	}

}

#award_website:hover {
	transform:  scale(1.1);
}

#content_wrapper {
	margin: 50px auto 0 auto;
}

#footer {
	background:  #baeaee;
}

#footer * {
	color:  #000;
}

#footer_left {
	width: calc(100%/6*5);
	float: left;
}

#footer_logo {
	width: calc(100%/6);
	float: left;
	text-align: right;
	opacity: 0.7;
}

/* general nav styles */

#mobile_menu {
	position:  absolute;
	top: 72px;
	left:  50px;
}


#navigation {
	position: absolute;
	z-index: 999999;
	top: 120px;
	left: calc(-100%);
	width: 220px;
	background: #40c0cb;
	transition: left 0.3s;
	border-radius: 0 15px 15px 0;
	padding:  0;
	height:  auto;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

	#mobile_menu {
		position: absolute;
		top: 120px;
		left: 0;
	}	

	#navigation {
		top: 180px;
	}
	
	#footer_left {
		width: 100%;
		float: none;
	}

}

.navigation_active {
	left: 0 !important;
}


.nav_item, 
.nav_item:hover,
.nav_item_active  {
	font-family: "Noto Sans", arial, verdana, sans-serif;
	display: block;
	text-align: left;
	color: #fff !important;
	background-color: transparent !important;
	font-weight: 300 !important;
	padding: 8px 10px;
	height: auto;
	font-size: 100% !important;
	transition: background-color 0.3s, color 0.3s;
	margin: 0 0 0 0;
	background:  none;
	border-radius: 0;
	white-space: normal;
}

.nav_item:hover,
.nav_item_active:hover {
	background: #aee239 !important;
	color:  #000 !important;
	text-decoration: none !important;
}

.nav_container {
	position: relative;
	margin: 0;
}

#nav, #nav ul {
	display: block;
	width: auto;
	padding: 0 0 0 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
}

#nav li {
	float:  none;
}

#nav li a {
	color: #fff;
}

#nav li:hover ul,
#nav li:focus ul {
	display: block;
}

#nav li ul {
	display: none;
	margin: 0;
}

.dd_nav_item, .dd_nav_item_last {
	color: #fff !important;
	font-weight: normal !important;
	padding: 8px 15px 3px 40px;
	margin: 0;
}



/* simple slider */

#simple_slider {
	position: relative;
	display: block;
	height: auto;	
	width: 100%;
	padding-top: 48.78%;
	filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.2));
}

.ss_wrapper {
	position: relative;
	top: 0;
	height: 100%;
}

#ss_previous {
	display: block;
	position: absolute;
	top: calc((100% - 115px)/2);
	left: 30px;
	width: 63px;
	height: 115px;
	background: url(../images/site/arrows_social_care.png) no-repeat left top;
	z-index: 9999;
	cursor: pointer;
}

#ss_next {
	display: block;
	position: absolute;
	top: calc((100% - 115px)/2);
	right: 30px;
	width: 63px;
	height: 115px;
	background: url(../images/site/arrows_social_care.png) no-repeat right top;
	z-index: 9999;
	cursor: pointer;
}

.ss_slide {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100%);
	height: calc(100%);
	display: none;
}

#ss_1 {
	display: block;
}

#ss_1 p {
	color: #000 !important;
}

.ss_image {
	display: block;
	position: absolute;
	width: calc(100%);
	height: calc(100%);
	background: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.ss_caption {
	display: block;
	position: absolute;
	top: calc(30%);
	left: 25%;
	width: calc(50%);
	text-align: center;
	background-color: transparent;
}

.ss_caption_inner {
	display: block;
	padding: 30px;
	color: #000;
}

.ss_caption_inner * {
	margin:0;
	padding:5px;
	color: #000;
	font-size:  300% !important;
	font-weight: bold;
}


@media only screen and (max-width: 767px) and (orientation: portrait) {

	.ss_caption {
		top: calc(20%);
		left: 50px;
		width: calc(100% - 100px);
	}

	.ss_caption_inner * {
		font-size:  130%;
	}

}


/* topic grid */

#topic_grid {
	margin: 50px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	position: relative;
}

.topic_item {
	display: block;
	flex-basis: 220px;
	height:  220px;
	position: relative;
	background:  #000;
	filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.2));
	margin:  20px;
	overflow: hidden;
}

.topic_bg {
	position:  absolute;
	top: 0;
	left:  0;
	bottom:  0;
	right:  0;
	background-size: cover;
	background-position: center center;
	opacity:  0.8;
	transition: opacity 0.3s, transform 0.3s;
}

.topic_item:hover .topic_bg {
	transform:  scale(1.1);
	opacity:  0.5;
}

.topic_title {
	position:  absolute;
	top: 0;
	left:  0;
	bottom:  0;
	right:  0;
	display:  flex;
	align-items:  center;
	align-content:  center;
}

.topic_title span {
	width:  calc(100%);
	text-align:  center;
	font-size:  150%;
	color:  #fff;
	font-weight: bold;
	transition: transform 0.3s;
}


.topic_item:hover .topic_title span {
	transform:  scale(1.1);
}

/* topic page */

.topic_image {
	background-size: cover;
	background-position: top center;
	width:  calc(100%);
	padding-top:  46%;
	filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.2));
	margin:  20px 0 50px 0;
}

.fifty_px_spacer {
	height:  50px;
}

.text_1 {
	background:  #daedef;
	padding:  50px;
}

.resources_box {
	background:  #fbfdf5;
	border:  3px solid #abd03f;
	border-radius:  3px;
	padding:  30px;
}

.resources_box .icon {
	display:  block;
	padding: 0 0 0 25px !important;
	background: url(../images/social-care/document.png) no-repeat left center;
	background-size: auto 20px;
	color:  #40c0cb;
}

.resources_box .icon:hover {
	color:  #abd03f;
}

.two_columns {
	column-count: 2;
}

#col_1 h2, 
#col_1 h3, 
#col_1 h4 {
	background:  #40c0cb;
	color:  #fff;
	padding: 10px 0;
}

#col_2 h2, 
#col_2 h3, 
#col_2 h4 {
	background:  #abd03f;
	color:  #fff;
	padding: 10px 0;
}

#col_1 iframe, 
#col_2 iframe {
	width:  calc(100%);
}

.text_4 {
	background:  #e9f5f6 url(../images/social-care/signposting-bg.png) bottom right no-repeat;
	background-size: 30% auto;
	border: 3px solid #40c0cb;
	padding:  50px 350px 50px 50px;
	border-radius:  3px;
	min-height:  200px;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

	.text_1 {
		padding:  10px;
	} 

	.text_4 {
		padding:  10px 10px 120px 10px;
	}

}


.button {
	background: #40c0cb;
}	

.button:hover {
	background: #aee239;
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 5px 5px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 1; }
  .hamburger.is-active:hover {
    opacity: 1; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #aee239;  /* active state colour */
    outline: none !important;
}

.hamburger:focus {
    outline: none !important;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #40c0cb !important; /* off state colour */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



/* PWA installer popup */

#install_app_popup {
	font-family: "Noto sans", verdana, sans-serif;
	font-size: 100%;	
	position:  fixed;
	bottom:  -100px;
	left:  0;
	width:  calc(100% - 80px);
	height:  70px;
	background: #fff url(../images/social-care/android-chrome-192x192.png) no-repeat 10px center;
	background-size:  50px 50px;
	padding: 0 10px 0 70px;
	z-index:  9999999;
	box-shadow: 0 0 3px #000;
	text-align: center;
	transition: bottom 1s;
	border-radius: 5px 5px 0 0;
	display:  none;
	align-items: center;
}

.install_app_popup_animation {
	bottom:  0 !important;
}

#install_app_close {
	display:  block;
	position:  absolute;
	top:  -15px;
	right:  0px;
	width: 30px;
	height:  30px;
	background: url(../images/site/install-app-close.svg) no-repeat center center;
	background-size:  30px 30px;
}

/* popup */


/* special offers */

#socialcare_popup_text {
	position: fixed;
	top: 50px;
	left: 200px;
	right: 200px;
	height: auto;
	background: #ffffffee;
	border:  3px #40c0cb solid;
	padding: 30px 30px 0 30px;
	z-index: 999999;
	display: none;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

	#socialcare_popup_text {
		left:  50px;
		right:  50px;
	} 

}

#socialcare_popup_text img {
	max-width: calc(100%);
	height: auto;
}

#socialcare_popup_close {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 40px;
	height: 40px;
	background: url(../images/social-care/close.svg) no-repeat center center;
	cursor: pointer;
}

#socialcare_cover {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #00000066;
	z-index: 999998;
	cursor: pointer;
	display: none;
}