/** RECRUITMENT WEBSITE CSS FOR JADU PHOTON **/

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

/*set Raleway as the default site font, remove hyphenation and change letter spacing*/
body, #searchbtn, #search-site-header {
	font-family: "Raleway", Helvetica, Sans-Serif !important;
	letter-spacing: 0.01em !important;
	hyphens: none;
}

/*general pseudo elements*/
:focus {
	outline: 0px solid white;
}

/*set vertical margin on 'p' elements to 1em*/
p {
	margin: 0 0 1em 0;
}

/*makes the default headers and sign-in/register section inside the menu invisbile*/
#menu h2, #menu ul:nth-of-type(2) {
    display: none;
}

/*hides home category on the menu sidebar*/
#menu ul > li:first-child {
display: none;
}

/*applies styling from the first category item onto the second*/
#menu ul > li:nth-child(2){
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}

/*stops text transform from affecting inner tags*/
.inner h2, .inner h3, .inner h4, .inner h5, .inner h6 {
    text-transform: none;
}

/*stops text transform from affecting menu link items*/
#menu ul > li > a {
    text-transform: none;
}

/*shrinks the homepage banner on homepages (excluding the main page)*/
.category-modular > #page-wrapper > #content > #main > header, .homepage-modular > #page-wrapper > #content > #main > header {
  padding: 2em 0 1em 0;
}

/*shrinks the homepage banner on document pages*/
.document-article > #page-wrapper > #content > #main > header {
  padding: 2em 0 1em 0;
}

/*changes the font colour of headers*/
.wrapper.style5 h2, .wrapper.style5 h3, .wrapper.style5 h4, .wrapper.style5 h5, .wrapper.style5 h6 {
	color: #da1936;
}

/*deliberate conflict to prevent header disappearing*/ 
#main > header h2 {
	display: block !important;
}

/*changes header colour*/
#header {
	background-color: #da1936;
}

/*changes the letter-spacing of headers*/
h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0.020em !important;
}

/*changes size of content headings*/
.widget-content > h2 {
	font-weight: 400;
	font-size: 1.7em;
}

/*changes the width of content on document pages to 100% (as opposed to 66% by default) 
- note that sidebar content will no longer work on document pages*/
.document-article .row > .col-8 {
    padding: 0;
    width: 100%;
}

/*changes the width of content on document pages to 100% (as opposed to 66% by default) 
- note that sidebar content will no longer work on document pages*/
.document-article .row > .col-8 {
    padding: 0;
    width: 100%;
}

/*changes the design of the background of the page*/
.wrapper.style5 {
    background-color: #ffffff00;
}
.widget-width.widget-width--100 {
    padding: 1rem 1.5rem;
}
.inner.row {
    border: 0px solid white;
    border-radius: 25px;
    background: white;
    width: 95%;
    padding: 10px 20px;
}

/*sets image width to 100% of the span*/
.image img {
    width: 100%;
  }
  .image {
    width: 100%;
  }

/*adds a container class to be used*/
.containertotal {
    position: relative;
    overflow: auto;
	margin-bottom: 10px;
}

/*rules for an img with the width of 10% and text with 90% to fit inside the above container class*/
.img10 {
    float: left;
    width: 10%;
}
.img10 img {
    margin: auto;
    width: 60%;
    display: block;
}
.text90 {
    float: right;
    width: 90%;
}

/*rules for an img with the width of 20% and text with 70% and a 5% margin to fit inside the container*/
.text70 {
    width: 70%;
    float: left;
    margin: 0 5% 0 0;
}
.img20 {
    width: 20%;
    float: right;
    margin: 0 5% 0 0;
}
.img20 img {
    width: 100%;
}

/*hides document widget headings*/
.widget-documents > .widget__heading {
	display: none;
}
.category-list h2 {
    display: none;
}

/*turns .list--navigation into a flexbox (used to allow transform property as inline elements cannot be used otherwise)*/
.widget-documents > .list--navigation {
	display: flex;
	flex-wrap: wrap;
}

/*same as above, but for page supplements*/
.list.list--navigation.secondary {
    display: flex;
    flex-wrap: wrap;
}
.supplement__heading {
    display: none;
}

/*styling for list items and transition property for hover pseudo class*/
.widget-documents li.list__item, .supplement--navigation li.list__item, .list.list--record li {
	background-color: #da1936;
	color: white;
	list-style: none;
	font-weight: 600;
	padding: 1em;
	margin: 10px;
	width: 47%;
	max-height: 10%;
	text-align: center;
	border: 0px solid white;
	border-radius: 15px;
	transition: ease 0.2s
}

/*adds a class to fit group logos at the bottom of the 'our commitments' page*/
.group-logo {
    height: 115px;
    object-fit: scale-down;
}

/*fixing stuff*/
.img_container, .subpage_img_container {
	position: relative;
	text-align: center;
	color: white;
   }  
  .centered_text, .subpage_centered_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  h2.centered_text > a  {
    color: white;
    text-shadow: 1px 2px 5px black;
    font-size: 2em;
  }
  
  .img_container img, .subpage_img_container img {
    height: 250px;
    min-width: 100%;
    object-fit: cover;
  }
#ccc-icon {
    box-shadow: none;
  }

  /*fixing stuff on subpages*/
  .subpage_img_container img {
    object-fit: cover;
  }

  .subpage_img_container > h2.subpage_centered_text {
    color: white;
    text-shadow: 1px 2px 5px black;
    font-size: 3em;
  }
  .page-subheading {
	display: none;
}

/*styling for the elements in the row that the logo images sit in*/
.logo-row {
	width: 60%;
	margin: 5% auto 0 auto;
}
.logo-width {
	padding: 0;
}
.list__item:last-child {
	margin-right: 0px !important;
}

/*removes padding on the list items so they fit inline with the rest of the content*/
.list.list--navigation, .list.list--record {
	padding: 0;
	margin: 0;
}

/*pseudo hover element to enlarge list items (not including list items in the sidebar menu)*/
.widget-documents > .list.list--navigation > .list__item:hover, .supplement--navigation > .list.list--navigation > .list__item:hover {
	transform: scale(1.02);
}

/*changes padding on main block*/
.row > * {
	padding: 0 1.5em 0 1.5em;
}
.col-8.col-12-medium {
	padding: 1rem 1.5rem !important;
}

/*collapsible button styling*/
.collapsible {
	color: #da1936 !important;
	box-shadow: none !important;
	font-family: Raleway;
	margin-bottom: 10px;
	color: #da1936 !important;
    box-shadow: none !important;
    font-family: Raleway;
    margin-bottom: 10px;
	letter-spacing: 0.020em;
	line-height: 1em;
	font-weight: 800;
    font-size: 1.15em;
	max-width: 100% !important;
    padding: 0;
	white-space: normal;
    text-transform: none;
	text-decoration: underline 2px solid #F37326;
}
.collapsible_content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.collapsible_content > p {
	margin-top: 10px;
}

/*sets jobs section as a flexbox container*/
.jobcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*styling for individual items to display as row of three*/
.jobitem {
  width: 32%;
  padding-bottom: 2%;
  margin-bottom: 2%;
  position: relative;
}

/*separates space between jobs and next button on the vacancy page*/
.innerjob {
	margin-bottom: 5% !important;
}

/*pseudo classes for the collapsible buttons*/
.collapsible.active:focus, .collapsible.active, .collapsible:focus, .collapsible.active:hover, button:hover, button:focus  {
  background: none !important;
  border: none !important;
}
.collapsible:after {
	content: "+";
}
.collapsible.active:after {
	content: "-";
}

/*changes searchbar properties*/
#search-site-header {
	background-color: white !important;
	color: black !important;
	width: 45% !important
}
#searchbtn {
	height: 3.6em !important;
}

/*changes footer colour and changes the copyright tag for accessibility reasons*/
#footer {
	background-color: #da1936;
}
body.landing #footer {
	background-color: #da1936;
}
.copyright {
	color: white !important;
}

ol#pages-in-list > .list__item {
    background-color: #da1936;
    color: white;
    list-style: none;
    font-weight: 600;
    padding: 1em;
    margin: 10px;
    width: 30%;
    max-height: 10%;
    text-align: center;
    border: 0px solid white;
    border-radius: 15px;
    transition: ease 0.2s;
  }
  
  ol#pages-in-list > .list__item:hover {
  transform: scale(1.05);
  }
  
  #pages-in-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  #a11y-pages-in-heading.nav__heading {
      display: none;
  }

/*media rules*/
@media screen and (max-width: 360px){
.widget-documents li.list__item {
	width: 100%;
	margin: 0 0 10px 0;
	}
	.widget-width.widget-width--100 {
		padding: 0 0 10 0;
	}
	.img10 {
		display: none;
    }
	.text90 {
	width: 100%;
    }
}

@media screen and (min-width: 360px) and (max-width: 920px){
	.widget-documents li.list__item {
	width: 100%;
	}
	.containertotal {
	text-align: center;
	}
	.img10 {
	display: none;
	}
}

/*Home CTA styling*/
.home-cta h2 {
    position: relative;
    margin-top: -180px;
    font-size: 2em;
    z-index: 1000;
    padding: 5px;
	text-align: center;
}

.wrapper.style5 .home-cta h2 a {
    color: white;
    -webkit-text-stroke: 2px black;
}

.wrapper.style5 .home-cta h2 a:hover {
    font-weight: 700;
}
.home-cta {
    padding: 1em 0;
}

.widget-width--29, .widget-width--28, .widget-width--27, .widget-width--26, .widget-width--25, .widget-width--24, .widget-width--23, .widget-width--22 {
    width: 25%;
    padding: 0 0.5rem;
}

.home-cta img {
    height: 250px;
    object-fit: cover;
    width: 100%;
}	
	  .home-cta {
    margin: 40px 0;
}


.wrapper.style5 .home-cta a h2:hover {
    font-weight: 400;
}

@media screen and (max-width: 1170px) {
.widget-width--29, .widget-width--28, .widget-width--27, .widget-width--26, .widget-width--25, .widget-width--24, .widget-width--23, .widget-width--22 {
    width: 49%;
    padding: .5rem .5rem 1rem .5rem;
}
}
@media screen and (max-width: 960px) {
.widget-width--29, .widget-width--28, .widget-width--27, .widget-width--26, .widget-width--25, .widget-width--24, .widget-width--23, .widget-width--22 {
    width: 100%;
    padding: .5rem .5rem 1rem .5rem;
}
}

/*homepage banner image height & CTA*/
#banner {
    height: 20vh;
	min-height: unset;
}
a.more.scrolly {
    display: none;
}
.landing h2.widget__heading {
    margin-top: 50px;
    margin-bottom: 5px;
}
 
  
/*transparent body background for homepage*/  
.wrapper.style5 {
    /*! background-color: #ffffff00; */
    /*! color: #4E4852; */
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("/site/images/Town_Hall___Outisde_shot_2.jpg");
}
  
/*summary and details styles*/
  details summary > * {
  display: inline-block;
    cursor: pointer;
}
summary::marker {
    font-size: 1.4em;
	font-weight:600;
	color:teal;
	cursor:pointer;
}
.homepage-modular .wrapper.style5 {
    background-color: #ffffff;
    color: #4E4852;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("/site/images/Town_Hall___Outisde_shot_2.jpg");
    border-top: 2px solid white;
    background-size: cover;
}

/*flipped background image child pages*/
.document-article .wrapper.style5, .category-modular .wrapper.style5 {
    background-color: #ffffff;
    color: #4E4852;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("/site/images/Town_Hall___Outisde_shot_2.jpg");
    border-top: 2px solid white;
    transform: scalex(-1);
    background-size: cover;
}
.document-article .inner.row, .category-modular .inner.row {
    transform: scaleX(-1);
}

#main a:focus {
	outline: none;
}

h1:before {
    content: 'Stoke-on-trent city council ';
}

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

#footer .copyright li:first-child:after {
    content: ' at Stoke-on-Trent City Council';
}

.widget-navigation.list__link {
    background-color: #da1936;
    color: white;
    list-style: none;
    font-weight: 600;
    padding: 1em;
    margin: 10px;
    width: 47%;
    max-height: 10%;
    text-align: center;
    border: 0px solid white;
    border-radius: 15px;
    transition: ease 0.2s;
  }

  .widget-navigation.list__item {
    background-color: #da1936;
    color: white;
    list-style: none;
    font-weight: 600;
    padding: 1em;
    margin: 10px;
    width: 47%;
    max-height: 10%;
    text-align: center;
    border: 0px solid white;
    border-radius: 15px;
    transition: ease 0.2s;
  }

  .widget-navigation > ul > li.list__item {
    background-color: #da1936;
    color: white;
    list-style: none;
    font-weight: 600;
    padding: 1em;
    margin: 10px;
    width: 35%;
    max-height: 10%;
    text-align: center;
    border: 0px solid white;
    border-radius: 15px;
    
    transition: ease 0.2s;
  }
  .widget-navigation ul {
    display: flex;
    padding: 0;
  }
  
  .widget-navigation > ul > li.list__item:hover {
    transform: scale(1.02);
  }

/*media rule for vacancy page*/
@media screen and (max-width: 710px){
  .jobitem {
    min-width: 100%;
  }
  .widget-documents li.list__item {
    margin: 0 0 1em 0;
  }
    .widget-documents li.list__item:last-child {
    margin: 0 0 0 0;
  }

}
ul.pageImageLists{
	display: flex;
    padding: 0;
}
li.PageImageCaption {
    list-style: none;
	width: 100%;
}
.PageImageCaption img {
	height: 9em;
	width: 100%;
	object-fit: cover;
}
@media screen and (max-width: 710px){
	ul.pageImageLists {
		display: flex;
		flex-direction: column;
	}
	li.PageImageCaption {
		list-style: none;
	}
}

h2.pageHeader {
	color: white !important;
}

h2.pageHeader {
    position: relative;
    margin-top: -180px;
    font-size: 2em;
    z-index: 1000;
    padding: 1em;
    text-align: center;
    -webkit-text-stroke: 2px black;
}

.pageHeading img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

h2.home-cta-h2 {
    margin-top: -170px;
    text-align: center;
    font-size: 2em;
}

ol#pages-in-list > .list__item {
  background-color: #da1936;
  color: white;
  list-style: none;
  font-weight: 600;
  padding: 1em;
  margin: 10px;
  width: 30%;
  max-height: 10%;
  text-align: center;
  border: 0px solid white;
  border-radius: 15px;
  transition: ease 0.2s;
}

ol#pages-in-list > .list__item:hover {
transform: scale(1.05);
}

#pages-in-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

#a11y-pages-in-heading.nav__heading {
	display: none;
}

@media screen and (max-width: 710px){
	.intro {
		margin-top: 50px;
	}
	
}

@media screen and (max-width: 450px){
    
    .widget-row {
    margin-left: -3rem;
    margin-right: -3rem;
    margin-top: 0rem;
    margin-bottom: 0rem
}
.img_container img, .subpage_img_container img {
    height: 100px;
    object-fit: cover;
  }
  .subpage_img_container img {
    border: 0px solid;
    border-radius: 5px;
  }
  .subpage_img_container > h2.subpage_centered_text {
    font-size: 2em;
  }
  .widget-width--25 {
    padding: 0;
  }
  h2.centered_text > a {
	font-size: 1em;
}
    .home-cta {
        margin-bottom: -2rem;
        margin-top: 1rem;
        object-fit: cover
    }
    h2.home-cta-h2 {
    margin-top: -7em;
    text-align: center;
    font-size: 2em;
    }
    .home-cta img{
        height: 15em;
    }
    #header .logo h1{
        display: none;
    }
    .inner.row {
    border: 0px solid white;
    border-radius: 0px;
    background: white;
    width: 100%;
    padding: 10px 20px 10px 20px;
}
    .landing h2.widget__heading {
    margin-top: 100px;
    margin-bottom: 5px;
}
    .wrapper {
    padding: 0em 0em 0em 0em;
}  
}

@media screen and (max-width: 450px){ 
  .pageHeading img, .pageHeader {
    display: none;
}
    .imageCaption {
        margin-top: 5%
    }
    .widget-content {
        margin: 5%;
    }
}

@media screen and (max-width: 900px){
    .img20 {
        display: none;
    }
    .text70 {
        width: 100%;
    }
}

@media screen and (max-width: 810px) { 
  ol#pages-in-list > .list__item {
    width: 100%;
  }
}

@media screen and (max-width: 1080px) {
  .widget-navigation ul{
    flex-direction: column;
  }
  .widget-navigation > ul > li.list__item, .jobitem {
    min-width: 100%;
  }}
  
  summary {
	list-style: none;
	padding: 10px;
	background-color: #da1936;
	color: white;
	font-weight: bold;
  margin-bottom: 5px;

}
  summary:after {
    content: "+";
    margin-left: 5px;
  }
  summary:hover {
    cursor: pointer;
    text-decoration: underline 3px white;
  }
  details:open > summary:after {
    content: "-";
  }