/*Accordion*/
.accordion {
  font-family: var(--sans-serif)
  color: #000;
  margin-bottom: 1rem;
  background-color: #eee;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border: 0;
  text-align: left;
  outline: 0;
  transition: .4s;
  border-radius: 6px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.accordion:after {
  content: '';
  position: absolute;
  right: 20px;
  transform: rotate(0);
  transition: transform 250ms;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 9px;
  border-color: transparent transparent transparent #888
}

.accordion.active:after {
  transform: rotate(90deg)
}

.accordion.active+.panel {
  max-height: 600px;
  overflow: auto
}

.accordion.active .vector-icon {
  transform: rotate(90deg)
}

.accordion.active,
.accordion:hover {
  background-color: #ccc
}
.accordion+.panel {
  padding: 0 1rem;
  margin-left: 1rem;
  margin-bottom: 2rem;
  border-left: 2px solid #ccc;
  max-height: 0;
  background-color: #fff;
  overflow: hidden;
  transition: max-height linear 250ms
}
/* Newsletter widget */
.newsletterSignup {
  border-top: 0;
  background-color: #fff
}

.newsletterSignup .newsletterSignupHead {
  background-color: #404040;
  position: relative
}

.newsletterSignup .newsletterSignupHead .email {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 52px;
  background-position: unset;
  background-image: url(https://www.chemistryworld.com/pictures/web/n/k/y/cw_marque_svg_481051.svg);
  background-size: cover
}

.newsletterSignup .newsletterSignupHead .headInfo {
  margin-left: 10px;
  margin-bottom: 10px;
  padding-right: 90px;
  font-family: var(--sans-serif)
}

.newsletterSignup .newsletterSignupHead h2 {
  color: #fff
}

.newsletterSignup .newsletterSignupHead p {
  font-size: .8rem;
  color: #fff
}

.newsletterSignup .form ul li .switch-label {
  font-family: var(--sans-serif);
  color: #444
}

.newsletterSignup .newsletterSignupFoot {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  background: #f5f5f5;
  font-family: var(--sans-serif)
}
/* Newsletter one-click widget */
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-tag {
  text-transform:uppercase;
}
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-tag,
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-info p,
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-form-response {
  font-family:var(--sans-serif);
}
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-details .newsletterSignup-widget-info h2 {
  padding-bottom: unset;
  border-bottom: unset;
}
.newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-info li {    
font-family:var(--sans-serif);
  font-size: .889rem;
    line-height: 1.266rem;
    margin-bottom: 0.25rem;
}
.grecaptcha-badge {
  visibility: hidden;
}

@container newsletterSignupWidget (max-width:599px) {
  .newsletterSignup-widget .newsletterSignup-widget-content .newsletterSignup-widget-img {
    height:150px
  }
}
/* Styling for ad-text */
.ad-text {
	font-family: var(--sans-serif);
   text-transform: uppercase;
	text-align:center;
   color: #888;
   font-weight: 500;
   letter-spacing: .05em;
   font-size: .7rem;
   line-height: .9rem;
}
/*Styling for CLS*/
.ad-mpu {
  min-height: 50px
}
.ad-ldrbrd {
  min-height: 110px
}
@media screen and (min-width:1024px) {
  #ad-slot-b .ad-mpu,
  #ad-slot-c .ad-mpu,
  #ad-slot-e .ad-mpu,
  #ad-slot-f .ad-mpu {
    min-height: 200px
  }
}
/* Sign in */
.formbox.signIn.forgot .formButton p {
  font-family: var(--sans-serif)
}
.signin-mem-content {
  border-top: 1px solid #f0f2f2;
  padding: 20px 0;
  display: flex;
  flex-direction: column
}
.signin-mem-logo {
  width: 40%;
  order: 1;
  margin-bottom: 12px
}
.signin-mem-logo img {
  width: 100%;
  height: auto
}
.signin-mem-text {
  font-family: var(--sans-serif);
  width: 100%;
  order: 2
}
.signin-mem-text>p {
  font-size: .9rem;
  line-height: 1.2rem;
  margin-bottom: 0;
  padding-bottom: 12px
}
@media screen and (min-width:600px) {
  .signin-mem-content {
    flex-direction: row
  }
  .signin-mem-logo {
    width: 23.2%;
    margin-right: 2.3%;
    margin-bottom: 0;
    align-self: center
  }
  .signin-mem-text {
    width: 74.5%
  }
}
/* Show/hide SPIN on screen size*/
.spin-large-screen {
  display:none
}
@media screen and (min-width:768px) {
  .spin-small-screen {
    display:none
  }
  .spin-large-screen {
    display:block
  }
}