/*Root*/
:root {
  --sans-serif: Avenir, Helvetica Neue, Helvetica, Arial, sans-serif;
  --serif: PlantinStd, Georgia, Times New Roman, Times, serif;
}
/* Base classes */
.sans-serif {
  font-family:var(--sans-serif)
}
.serif {
  font-family: var(--serif)
}
/*Headers*/
#global-rsc-bar {
  width: 100%
}
.rsc-bar-ip {
  margin-left: auto;
  margin-right: -15px
}

#ip-auth0 {
  display: none;
  width: 15px;
  margin-left: auto;
  position: relative;
  height: 43px
}

#ip-auth--name {
  display: none;
  position: absolute;
  top: 0;
  right: 25px;
  height: 43px;
  background: rgba(255, 255, 255, .9);
  width: 725px
}

#ip-auth--name p {
  font-family: var(--sans-serif);
  font-size: .7rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #888;
  margin: 15px 0 0 0;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right
}

#ip-auth-padlock {
  fill: #888
}

@media screen and (min-width:768px) {
  .rsc-bar-ip {
    margin-left: initial;
    margin-right: 0
  }

  #ip-auth0 {
    margin-right: auto;
    margin-left: initial;
    padding-left: 25px
  }

  #ip-auth--name {
    display: inline-block;
    bottom: 0;
    left: 45px
  }

  #ip-auth--name p {
    text-align: left
  }
}
/*Footers*/
.footer .footerSocial ul {
  margin-left: 0
}

.footer .webvision {
  padding: 12px;
  border-top: 0
}

.footer-block .sleeve {
  padding: 20px 10px 0 10px
}

.footer .footerTopNavPageText {
  border-top: 1px solid #ddd
}

.footer .topNav {
  border-bottom: 0
}

.footer .footerSocial {
  margin-bottom: 16px
}

.footer .bottomNav {
  margin-bottom: 16px
}

.footer .bottomNav>.inner-sleeve>ul {
  border-bottom: 0
}

@media screen and (max-width:479px) {
  .footer .topNav ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2
  }

  .footer .topNav ul li {
    display: inline-block;
    width: 100%
  }

  .footer .bottomNav ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2
  }
}

@media screen and (min-width:480px) {
  .footer-block .sleeve ul {
    margin-left: auto;
    margin-right: auto;
    width: 75%
  }
}

@media screen and (max-width:767px) {
  .footer-block .sleeve ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2
  }
}

@media screen and (min-width:768px) {
  .footer-block .sleeve ul {
    width: 100%;
    margin-left: 0;
    margin-right: 0
  }
}
/*Navigation*/
.mobileMenu {
  top: 43px
}
.desktopNavigation .promotedStory a:hover .captionBlock .title {
  color: #135c84;
  text-decoration: none
}
.showMenu .showMenuPushed {
  transform: none !important
}
.desktopNavigation .subnav>ul li {
  font-size: 1.3rem;
  line-height: 1.5rem
}
.desktopNavigation .subnav>ul li li {
  line-height: 1.3rem
}
.desktopNavigation .subnav>ul li.notch-nav:first-child::before {
  content: "";
  background-image: url(https://www.chemistryworld.com/pictures/web/n/k/d/notchcollectionslogo_728143.png);
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 1.5rem;
  margin-bottom: 12px;
  pointer-events: none
}
.desktopNavigation .subnav>ul li li.notch-nav {
  list-style: none;
  color: #f7d600;
  padding-left: 0
}
.desktopNavigation .subnav>ul li.notch-nav a span {
  color: #f7d600
}
.desktopNavigation .subnav>ul li li.notch-nav:not(:last-child):nth-child(n+8) {
  display: none
}
.desktopNavigation .subnav>ul li li.notch-nav::before {
  display: none
}
.hot-topics-container {
  font-family: var(--sans-serif)
}
.mobileMenu .main li.nav-highlight-red>a,
.mobileMenu .main li.nav-highlight-red>span,
ul.main>li.nav-item.nav-highlight-red a span {
  color: red
}
ul.main>li.nav-item.nav-highlight-red:hover {
  background: #1a1a1a
}
ul.main>li.nav-item.nav-highlight-red:hover a span {
  color: red
}
.desktopNavigation ul.main>li.nav-highlight-red>a>span:after {
  content: '';
  background: red none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}
.desktopNavigation ul.main>li:hover.nav-highlight-red>a>span:after {
  transform: scale(1);
  opacity: 1
}

.mobileMenu .main li.nav-highlight-purple>a,
.mobileMenu .main li.nav-highlight-purple>span,
ul.main>li.nav-item.nav-highlight-purple a span {
  color: #753bbd
}
ul.main>li.nav-item.nav-highlight-purple:hover {
  background: #1a1a1a
}
ul.main>li.nav-item.nav-highlight-purple:hover a span {
  color: #753bbd
}
.desktopNavigation ul.main>li.nav-highlight-purple>a>span:after {
  content: '';
  background: #753bbd none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}
.desktopNavigation ul.main>li:hover.nav-highlight-purple>a>span:after {
  transform: scale(1);
  opacity: 1
}
.mobileMenu .main li.nav-highlight-pink>a,
.mobileMenu .main li.nav-highlight-pink>span,
ul.main>li.nav-item.nav-highlight-pink a span {
  color: #c6007e
}
ul.main>li.nav-item.nav-highlight-pink:hover {
  background: #1a1a1a
}
ul.main>li.nav-item.nav-highlight-pink:hover a span {
  color: #c6007e
}
.desktopNavigation ul.main>li.nav-highlight-pink>a>span:after {
  content: '';
  background: #c6007e none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}
.desktopNavigation ul.main>li:hover.nav-highlight-pink>a>span:after {
  transform: scale(1);
  opacity: 1
}
.mobileMenu .main li.nav-highlight-green>a,
.mobileMenu .main li.nav-highlight-green>span,
ul.main>li.nav-item.nav-highlight-green a span {
  color: #78be20
}
ul.main>li.nav-item.nav-highlight-green:hover {
  background: #1a1a1a
}
ul.main>li.nav-item.nav-highlight-green:hover a span {
  color: #78be20
}
.desktopNavigation ul.main>li.nav-highlight-green>a>span:after {
  content: '';
  background: #78be20 none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}
.desktopNavigation ul.main>li:hover.nav-highlight-green>a>span:after {
  transform: scale(1);
  opacity: 1
}
.mobileMenu .main li.nav-highlight-orange>a,
.mobileMenu .main li.nav-highlight-orange>span,
ul.main>li.nav-item.nav-highlight-orange a span {
  color: #ff671f
}
ul.main>li.nav-item.nav-highlight-orange:hover {
  background: #1a1a1a
}
ul.main>li.nav-item.nav-highlight-orange:hover a span {
  color: #ff671f
}
.desktopNavigation ul.main>li.nav-highlight-orange>a>span:after {
  content: '';
  background: #ff671f none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}
.desktopNavigation ul.main>li:hover.nav-highlight-orange>a>span:after {
  transform: scale(1);
  opacity: 1
}

.mobileMenu .main li.nav-highlight-blue>a,
.mobileMenu .main li.nav-highlight-blue>span,
ul.main>li.nav-item.nav-highlight-blue a span {
  color: #1f92d1
}

ul.main>li.nav-item.nav-highlight-blue:hover {
  background: #1a1a1a
}

ul.main>li.nav-item.nav-highlight-blue:hover a span {
  color: #1f92d1
}

.desktopNavigation ul.main>li.nav-highlight-blue>a>span:after {
  content: '';
  background: #1f92d1 none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}

.desktopNavigation ul.main>li:hover.nav-highlight-blue>a>span:after {
  transform: scale(1);
  opacity: 1
}

.mobileMenu .main li.nav-highlight-gold>a,
.mobileMenu .main li.nav-highlight-gold>span,
ul.main>li.nav-item.nav-highlight-gold a span {
  color: gold
}

ul.main>li.nav-item.nav-highlight-gold:hover {
  background: #1a1a1a
}

ul.main>li.nav-item.nav-highlight-gold:hover a span {
  color: gold
}

.desktopNavigation ul.main>li.nav-highlight-gold>a>span:after {
  content: '';
  background: gold none !important;
  transition: transform 250ms, opacity 250ms;
  transform: scale(0)
}

.desktopNavigation ul.main>li:hover.nav-highlight-gold>a>span:after {
  transform: scale(1);
  opacity: 1
}

.desktopNavigation ul.main>li ul li.nav-highlight-new>a,
.desktopNavigation ul.main>li ul li.nav-highlight-new>span,
.desktopNavigation ul.main>li.nav-highlight-new>a,
.desktopNavigation ul.main>li.nav-highlight-new>span,
.mobileMenu .main li.nav-highlight-new>a,
.mobileMenu .main li.nav-highlight-new>span {
  padding-left: 45px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbi1zdmctcmVjdC1uZXciIGRhdGEtbmFtZT0iaWNvbiBzdmcgcmVjdCBuZXciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMxIDE2IiB3aWR0aD0iMzEiIGhlaWdodD0iMTYiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgc3Ryb2tlOiAjMWY5MWQwOyAgICAgIH0gICAgICAuY2xzLTIgeyAgICAgICAgZmlsbDogIzFmOTJkMTsgICAgICB9ICAgICAgLmNscy0zIHsgICAgICAgIHN0cm9rZTogbm9uZTsgICAgICB9ICAgICAgLmNscy00IHsgICAgICAgIGZpbGw6IG5vbmU7ICAgICAgfSAgICA8L3N0eWxlPiAgPC9kZWZzPiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY3MSAtMzI5KSI+ICAgIDxnIGNsYXNzPSJjbHMtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjcxIDMyOSkiPiAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjE2Ii8+ICAgICAgPHJlY3QgY2xhc3M9ImNscy00IiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjE1Ii8+ICAgIDwvZz4gICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNS4yMywwLDIuMzgtNC42M0gyLjM1TDIuMzksMEguNzNWLTcuMDhIMi42OEw1LjUyLTIuNDZoLjAzTDUuNTEtNy4wOEg3LjE3VjBabTMuNCwwVi03LjA4aDQuNzZ2MS40NEgxMC4yOFYtNC4zaDIuOTR2MS4zN0gxMC4yOHYxLjQ3aDMuMjlWMFpNMjIuMiwwSDIwLjUxbC0xLjQtNC43OWgtLjAzTDE3LjY4LDBoLTEuN0wxMy45Ny03LjA4aDEuODRsMS4xMiw0LjcxaC4wM2wxLjI2LTQuNzFIMjBsMS4yNyw0LjcxaC4wM2wxLjE0LTQuNzFoMS43OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NCAzNDEpIi8+ICA8L2c+PC9zdmc+)
}

.desktopNavigation ul.main>li ul li.nav-highlight-new>a,
.desktopNavigation ul.main>li ul li.nav-highlight-new>span {
  background-position: 5px 50%;
  padding: 10px 0 10px 45px
}
/* Desktop space showing on mobile*/
.desktopNavigationSpace {
  height:0
}
@media screen and (min-width:1024px){
  .desktopNavigationSpace {
    height:57px
  }
}
/**/
/* Show/hide SPIN on screen size*/
.show-large-screen {
  display:none
}
@media screen and (min-width:768px) {
  .show-small-screen {
    display:none
  }
  .show-large-screen {
    display:inherit
  }
}