@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');

.alert {
    border: 3px solid #2b548a;
    border-radius: 3px;
    color: black;
    background: #d0e7f0;
    display: block;
    padding: .75rem;
    margin: 0 0 2rem;
}

span.alert__heading {
    font-size: 2.2em;
}

body {
    background-color: #192f51;
}

/*SP STYLING FOR HEADER*/
#nav ul ul {
    position: initial;
    top: 100%;
    margin-top: 1em;
    left: -9999em;
    border-radius: 6px;
    list-style: none;
    margin: calc(-0.5em + 1px) 0 0 1px;
    padding: 0.5em 0;
    width: 11em;
    margin-top: .6em;
    font-size: 0.9em;
 width: 100%;
 background-color: transparent;
 box-shadow:none;
}

ul.icons {
    margin-top: 1rem;
}

header#header {
    background-color: #d0e7f0;
    border-bottom: none;
}

section#footer {
    background-color: transparent ;
}
#header nav {
font-size: 1.3em;
    height: inherit;
    line-height: inherit;
    position: inherit;
    right: 0.75em;
    top: 0;
    margin-left: 3%;
    margin: 0 auto;
   /* max-width: calc(100% - 5em);*/
right: 2.75em;
}
#header nav > ul > li a:not(.button) {
    color: #fff;
    display: inline-block;
    min-height: 2em;
    height: auto;
    text-decoration: none;
    display: none;
    border: 0;
}

main#main {
    background-image: url(https://beta.stoke.gov.uk/sencohub/images/Graduated_response__1920x546_clipped_1_14.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: color-burn;
}

article#content {
    border-radius: 10px;
}

.index-modular #page-wrapper #main .box {
    background: transparent;
    border-bottom: solid 1px #ccc;
    padding: 2.75em 1.75em 2.75em 1.75em;
}

.h1 {
    margin-top: 0.5em;
}

#header nav > ul > li {
    display: inline-block;
    /*padding-left: 0;*/
    /* width: 100%; */
    /*float: left;*/
    /*display: block;*/
    /*margin: 0 auto;*/
    /* max-width: calc(100% - 5em); */
    /*margin-left: 10%;*/
    /*width: 90%;*/
    /* width: 90em; */
	text-align: center;
}

#nav ul ul li {
    position: static;
    padding: 0;
    display: block;
    float: left;
}



/* #nav ul .list li:nth-of-type(4){display:none} */
#header #nav ul ul li:nth-child(1) {
    display: none;
}

#nav > ul > li > ul > li a:hover {
    /* background: #C24924; */
    color: #000000;
	text-decoration: underline;
	text-decoration-color: var(--sp-teal);
}
#nav > ul > li > ul > li a:not(.button) {
    
    border-right: solid 1px #bbb;
 
}

#header .h1 {
    color: #252122;
    font-weight: 900;
    font-size: 2.5em;
    letter-spacing: -0.035em;
    line-height: 1;
    text-decoration: underline 5px #2b548a;
}

#nav > ul > li > ul > li a:not(.button) {
    color: #000;
    display: block;
    padding: 0.15em 1em;
    border-radius: 0;
    transition: none;
    border: 0;
    font-size: 1em;
    font-style: normal;
    font-weight: 800;
    text-decoration: underline 3px #2b548a;
}
#nav > ul > li > ul > li a:not(.button):hover {
    text-decoration: none;
}
  /* #nav ul li:hover ul:before, #nav ul li.hover ul:before {
     content: ''; 
     display: none; 
    position: absolute; 
    left: 25%;
    margin-left: -10px;
    top: -5px;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 10px #252122;
    border-bottom-color: rgba(34, 30, 31, 0.98);
}*/

/*SP STYLING FOR HEADER*/

/* make lists buttons */
/*.widget-navigation ul,*/ .widget-sub-categories ul {
    display: flex;
    flex-wrap: wrap;
	padding: 0;
	gap: 5px;
}
/*.widget-navigation li.list__item, */.widget-sub-categories li.list__item {
    flex: auto;
}


#pages-in-list .list__item, /*.widget-navigation li.list__item, .widget-documents li.list__item,*/ .list--record li.list__item, .widget-sub-categories li.list__item {
    background-color: #2b548a;
    list-style: none;
    display: inline-block;
    font-weight: 700;
    box-sizing: border-box;
    display: inline-block;
    min-height: unset;
    vertical-align: top;
    width: 49%;
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    font-size: 1.1em;
    padding: 0.6em;
    margin: 0;
    text-align: center;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;
    -ms-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
}


#pages-in-list .list__item a, /*.widget-navigation li.list__item a, .widget-documents li.list__item a,*/ .list--record li.list__item a,  .widget-sub-categories li.list__item a {
    color: white;
}

.widget-sub-categories .widget__heading{
	display:none;
}

.form .js-question:last-child {
    display: none;
}

.active:after {
    content: ' \0002d';
}
ul.list::before {
display: none !important;
}

li.list__item.is-active {
    color: white;
}

button.collapsible {
    width: 100%;
    text-align: left;
}
h2#a11y-pages-in-heading {
    display: none;
}
.box.post header {
    margin: 0;
}
ol#pages-in-list {
    padding-left: 0;
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
}
#header {

    padding: 5px 0 5px 0;

}

.row > * {
    padding: 0 0 0 50px;
}

/* navigation lists */

ul.list.list--navigation.primary, ul.list.list--navigation.secondary, .widget-navigation ul, .widget-documents ul  {
    list-style: none;
}

ul.list.list--navigation.primary li:before, ul.list.list--navigation.secondary li:before, .widget-navigation li:before, .widget-documents li:before {
    content: '\00bb';
    margin-left: -30px;
    margin-right: 15px;
    color: #c20269;
	font-size:2em;
	font-weight:600;
}

ul li {
    padding-left: 1em;
}
a {
    /* color: #066464; */
    /* font-size: 1.2em; */
    line-height: 1.5;
    font-weight: 400;
}

span.image.image--with-link {
    padding: .5rem 0;
}

span.image.image--with-link img {
    border-radius: 10px;
    border: 3px dashed #066464;
}

.widget-image {
    margin-top: 15px;
}

input[type="button"], input[type="submit"], input[type="reset"], button, .button {
   
    background: #066464;
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active, .button:active {
    background: #066464;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover {
    background: #066464;
}

.button.disabled {
    display: none;
}

.box.post h2, h2.supplement__heading, h2  {
    margin: 0 0 .5rem;
    font-size: 1.5em;
    font-weight: 400;
}

ol.list.list--breadcrumb li:nth-child(2) {
    display: none;
}
/* ol.list.list--breadcrumb li:nth-child(2) {
    display: none;
}*/

ol.list.list--breadcrumb li:last-child {
    display: inline-block;
}


.list--record li.list__item a {
    color: black;
    text-decoration: underline 2px #c20269;
}

.list--record li.list__item {
    color: black;
    background-color: transparent;
    display: block;
    min-height: unset;
    text-align: left;
}
/* body, p { */
	
	/* font-size: 1.2em; */
    /* line-height: 1.5; */
    /* font-weight: 400; */
/* } */

h3, h4, h5, h6 {
    font-size: 1.25em;
    font-weight: 400;
}

p, ol, ul, table, dl {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.logo img { max-width:100px;}

.breadcrumb li.list__item {
    color: #066464;
    font-weight: 300;
    font-size: .8em;
}

.widget-stack span.image.image--with-link {
    padding: 0;
    width: 100%;
    /* height: 200px; */
    /* overflow: hidden; */
    /* object-fit: cover; */
}

.widget-stack span.image.image--with-link img {

    object-fit: cover;
    height: 130px;
}

iframe, video {
    border: 3px dashed #c20269;
    border-radius: 10px;
    max-width: 100%;
}

ul li ul li {
    font-size: .8em;
}

.search-list .row {
    margin: 0;
}

.widget-directory-search a.button.button--primary:nth-child(2) {
    display: none;
}


.directory-record-article table {
    margin-top: 20px;
}

.directory-record-article ol.list.list--breadcrumb {
    padding-left: 0;
	margin-bottom: 20px;
}

.directory-record-article li.list__item {
    margin-bottom: .1em;
	padding-left: 0;
}
.directory-record-article h1 {
    padding-left: 0;
    margin-bottom: 10px;
}

.directory-record-article h4 {
    font-weight: 400;
}

.directory-record-article table td, .directory-record-article table th {
    padding: 0 0 .5em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.directory-record-article table tr th {
    padding: .5em 0 0 0;
}

@media screen and (max-width: 980px){

#navPanel .link {
    color: white;
    font-weight: 800;
   
}
}


.box.post h1 {
    font-size: 1.7em;
}

h1.page-heading {
    margin-bottom: 50px;
}

form.form {
    margin-top: 20px;
}

.form__instructions {
    margin-top: 20px;
}

/*Collapsible styling*/
   details.contentCollapsible {
      max-width: 100%;
      overflow: hidden;
      border-radius: 10px 10px 0 0;
      margin:  auto;
      font-family:sans-serif;
    }

    summary.collapsibleHeading {
      display: block;
      align-items: center;
      font-weight: 600;
      font-size: 15pt;
      justify-content: space-between;
      font-family:sans-serif;
    }

    summary.collapsibleHeading::-webkit-details-marker {
      display: none;
    }

    span.collapsibleHeadingBox {
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 1rem;
      background: #2d548b;
      color: white;
      height: 3rem;
      font-family:sans-serif;
    }
	
	@media screen and (max-width: 530px){
		span.collapsibleHeadingBox {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    background: #2d548b;
    color: white;
    height: auto;
    font-family: sans-serif;
}
	}

    span.collapsibleHeadingBox:hover {
      cursor: pointer;
    }

    span.collapsibleHeadingBox::before {
      content: "►";
      font-size: 1rem;
      display: flex;
      align-items: center;
      margin-right: 0.5rem;
      transition: rotate 200ms 400ms ease-out;
    }

    div.categoryContent {
      box-sizing: border-box;
      max-height: 0;
      overflow: hidden;
      padding: 0 10px;
      border: ;
      transition: max-height 400ms ease-out, border 0ms 400ms linear;
      background: #e0f2fd;
      max-width: 100%;
      border-radius: 0 0 10px 10px;
      margin: auto;
      margin-bottom: 5px;
      font-family:sans-serif;
      font-size: 12pt;
    }

    details.contentCollapsible[open]{
      max-height: 800px;
      border-color: #e0f2fd;
      transition: max-height 1s ease-out, border 0ms linear;
      border-radius: 10px 10px 0 0;
    }
    details.contentCollapsible[open] + div.categoryContent {
      max-height: 100%;
      border-color: #e0f2fd;
      transition: max-height 1s ease-out, border 0ms linear;
      
    }
    

    details.contentCollapsible[open] span.collapsibleHeadingBox::before {
      rotate: 90deg;
      transition: rotate 200ms ease-out;
      text-decoation: none;
    }
	
	.categoryContent ul li a {
	  color: #2d548b;
	  text-decoration: none;
	}
	
	.categoryContent ul li a:hover {
	  color: grey;
	  text-decoration: underline;
	}

ul.graduatedApproachCategories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: ease-in 0.2s;
}

a.graduatedApproachCategoryLink {
    border: none;
    color: white;
}

li.graduatedApproachCategory {
    list-style: none;
    background: #c20269;
    padding: 1em;
    border: #1a2f51 solid 5px;
    cursor: pointer;
    flex: auto;
    text-align: center;
    border-radius: 18px;
    font-weight: 200;
    color: white;
}

li.graduatedApproachCategory:hover {
    background: #1a2f51;
    color: #c20269;
    border: 5px solid #c20269;
}

.container {
    width: 95%;
}
p, li {
	color: black;
	font-weight: 400;
	font-family: "Raleway"
}

#copyright ul.links li {
    color: white;
}

#copyright ul.links li:nth-child(2) {
    display: none;
}

#footer .row {
    height: 1em;
}

.home-cta {
    display: contents;
}
.home-cta .imageCaption img {
    height: 250px;
    object-fit: cover;
	width: 100%;
	border: 2px solid white;
	border-radius: 5px;
}
.box.post .home-cta h2 {
    z-index: 1000;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: -190px;
    margin-bottom: 70px;
    background-color: #fff8fb;
    position: absolute;
    padding: 2px 1em;
    max-width: 215px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    opacity: 0.9;
}


@media screen and (max-width: 735px) {
	.box.post .home-cta h2 {
    z-index: 1000;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: -160px;
    margin-bottom: 70px;
    background-color: #fff8fb;
    position: absolute;
    padding: 2px 1em;
    max-width: 185px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    opacity: 0.9;
    margin-left: -30px;
}
.home-cta img {
    height: 200px;
    object-fit: cover;
	width: 100%;
	border: 2px solid white;
	border-radius: 5px;
}
}

@media screen and (max-width: 850px) {
	.box.post .home-cta h2 {
    z-index: 1000;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: -160px;
    margin-bottom: 70px;
    background-color: #fff8fb;
    position: absolute;
    padding: 2px 1em;
    max-width: 185px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    opacity: 0.9;
}
}




#nav ul.list li.list__item:nth-child(4), #nav ul.list li.list__item:nth-child(5), #nav ul.list li.list__item:nth-child(6), #nav ul.list li.list__item:nth-child(7), #nav ul.list li.list__item:nth-child(8), #nav ul.list li.list__item:nth-child(9), #nav ul.list li.list__item:nth-child(10), #nav ul.list li.list__item:nth-child(11), #nav ul.list li.list__item:nth-child(13) {
	display: none;
}



#navPanel a:nth-child(1), #navPanel a:nth-child(2), #navPanel a:nth-child(3), #navPanel a:nth-child(6),#navPanel a:nth-child(7),  #navPanel a:nth-child(8), #navPanel a:nth-child(9), #navPanel a:nth-child(10), #navPanel a:nth-child(11), #navPanel a:nth-child(12), #navPanel a:nth-child(13), #navPanel a:nth-child(15), #navPanel a:nth-child(17), #navPanel a:nth-child(18){
    display: none;
}

.row .col-12 h2 {
    margin-top: 1em;
}

.imageCaption img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.imageCaption {
    display: flex;
    flex-direction: column;
}

.overlaptext {
    text-align: center;
    font-size: 1.2em;
    color: white;
    background-color: #2b548a;
    padding-top: 0.4rem;
    padding-bottom: 0.4em;
}

.links-in-page {
    background-color: #2b548a;
    border-radius: 15px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.mainPageLink {
    flex: auto;
    border-left: 1px solid white;
    padding: 1em;
    border-right: 1px solid white;
}

.mainPageLink a {
    color: white;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
	text-align: center;
    text-decoration: none;
}

@media screen and (max-width: 489px){
    .links-in-page {
        background-color: #2b548a;
        border-radius: 15px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .mainPageLink {
        flex: auto;
        border-bottom: 1px solid white;
        padding: 1em;
        width: 100%;
    }
}

.mainPageLink a:hover {
    color: white;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
	text-align: center;
    text-decoration: underline;
}


@media screen and (min-width: 760px) {
	.widget-width {
		float: left;
		padding: 1em 0.4rem 0em 0.4rem;
		margin-top: 0;
	}
}

@media screen and (max-width: 735px) {
	.index-modular .imageCaption {
    margin-left: -2rem;
	margin-right: -2rem;
}

@media screen and (max-width: 980px) {
	html, body {
		overflow-x: clip;
	}
	.row > * {
    padding: 0 0 0 20px;
}
}

nav {
    margin-top: 1em;
}

.GA-image .imageCaption img {
    width: 100%;
    object-fit: cover;
    margin-bottom: -40px;
    height: auto;
}


@media screen and (max-width: 489px){
    .links-in-page {
        background-color: #2b548a;
        border-radius: 15px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .mainPageLink {
        flex: auto;
        border-bottom: 1px solid white;
        padding: 1em;
        width: 100%;
    }
}