.content {
  background-color: #f1f1f1;
}
.container {
  position: relative;
}
.btn.next {
  margin-top: 3rem;
}
.footer {
  text-align: right;
}
.footer a.esg {
  display: inline-block;
  color: #555559;
}
.footer a.esg span,
.footer a.esg img {
  vertical-align: text-bottom;
  display: inline-block;
}
.footer a.esg span {
  text-align: left;
}
.footer a.esg img {
  width: 7rem;
  margin-left: 1rem;
  margin-top: 2rem;
}
.pnl {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pnl:not(.is-current) {
  display: none;
}
ul.option {
  list-style: none;
  width: 100%;
  overflow: hidden;
  padding: 0;
}
ul.option li {
  display: block;
  position: relative;
  padding: 0;
  margin: 0.8em 0 0 0;
  text-align: left;
  max-width: 800px;
  background-color: #fff;
}
ul.option li.selected {
  background-color: #ff8200;
  color: #fff;
}
ul.option li input[type=radio],
ul.option li input[type=checkbox] {
  position: absolute;
  top: 17px;
  left: 17px;
  opacity: 0;
}
ul.option li label {
  display: block;
  padding: 15px;
  margin: 0;
  text-align: left;
  font-size: 1em;
  line-height: 120%;
  word-break: break-word;
  cursor: pointer;
}
ul.option + h4 {
  margin-top: 4rem;
}
#pnlQuestions .container {
  padding-top: 8rem;
}
#pnlQuestions h2 {
  text-align: center;
}
ul.progress-nav {
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
}
ul.progress-nav li {
  position: relative;
  width: 45.5%;
  margin: 0;
  padding: 0;
}
ul.progress-nav li:last-child {
  width: 9%;
}
ul.progress-nav li:last-child span {
  width: 100%;
}
ul.progress-nav li span {
  display: block;
  width: 19.75%;
  padding: 1rem 0;
  color: #555559;
  font-size: 1.8rem;
  line-height: 1em;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
}
ul.progress-nav li.selected span {
  border-color: #ff8200;
}
ul.progress-nav li:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 70.75%;
  height: 0;
  border-top: 1px dashed #555559;
}
.question-block.not-answered {
  box-shadow: 0 0 10px #ff8200;
}
.question-block + .question-block {
  margin-top: 4rem;
}
.question-block h3 {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ccc;
}
.question-block h3 span {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.question-block h3 span:before {
  display: none !important;
}
.question-block h3 span.icon-organization {
  background-image: url("../images/organization.png");
}
.question-block h3 span.icon-shield {
  background-image: url("../images/shield.png");
}
.question-block h3 span.icon-checklist {
  background-image: url("../images/checklist.png");
}
.question-block h3 span.icon-microscope {
  background-image: url("../images/microscope.png");
}
.question-block h3 span.icon-cloud-check {
  background-image: url("../images/cloud-check.png");
}
.question-block h3 span.icon-netskope-logo-orange {
  background-image: url("../images/netskope-logo-orange.png");
}
.question-block h4 {
  margin-top: 3rem;
}
.question-block + div.cf:last-child {
  text-align: right;
}
#pnlResults h3 {
  font-size: 2.4rem;
}
.red {
  color: #f00;
}
.orange {
  color: #ff671f;
}
.blue-arrow {
  display: block;
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 4rem auto;
}
.blue-arrow:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: -2rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5rem 0 4.5rem 4.5rem;
  border-color: transparent transparent transparent #00a9ce;
}
.blue-arrow span {
  display: block;
  position: relative;
  padding: 1rem 0;
  margin-left: 1.3rem;
  margin-right: 4.5rem;
  color: #fff;
  font-size: 2.4rem;
  font-weight: normal;
  text-align: center;
  background: #00a9ce;
}
.blue-arrow span:before,
.blue-arrow span:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  background: #00a9ce;
}
.blue-arrow span:before {
  width: 0.3rem;
  left: -1.3rem;
}
.blue-arrow span:after {
  width: 0.6rem;
  left: -0.8rem;
}
ul.maturity-levels {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
ul.maturity-levels > li {
  margin: 0;
  padding: 4rem 2rem;
  color: #fff;
}
ul.maturity-levels > li + li {
  margin-top: 2rem;
}
ul.maturity-levels > li h4 {
  display: block;
  margin: 0;
  text-align: center;
  font-size: 2rem;
}
ul.maturity-levels > li h4:before {
  content: "";
  display: block;
  width: 9rem;
  height: 9rem;
  margin: 0 auto 3rem auto;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
ul.maturity-levels > li ul {
  list-style: disc;
  margin: 3rem 0 0 0;
  padding: 0 0 0 2rem;
  font-size: 1.8rem;
}
ul.maturity-levels > li ul > li + li {
  margin-top: 0.5rem;
}
ul.maturity-levels > li:nth-child(1) {
  background-color: #653819;
}
ul.maturity-levels > li:nth-child(1) h4:before {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2089.3%2089%22%3E%3Cstyle%3E.st0%7Bfill%3A%23fff%7D%3C/style%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M67.6%2075.1c-10-10-13.9-14.3-13.9-15.4%200-1.9-1.1-4-2.1-4-1.4.5-2.7%201.1-3.9%202-10.3%206.2-23.2%206.2-33.4-.1-4-2.8-7.5-6.4-10.1-10.5C0%2040.2-1.2%2029.3%201.4%2021.4%205.5%208.5%2017.5-.2%2031.1%200%2040-.2%2048.5%203.5%2054.3%2010.2c5.9%206.4%208.3%2013.2%207.8%2022.7-.2%205-.6%206.7-2.3%2010.5-1%202.2-2.1%204.3-3.4%206.3-1.2%201.8-1.2%201.9-.1%202.9.9.7%202%201%203.1%201%201.6%200%204.1%202.2%2016%2014.1l14%2014.1-3.6%203.6c-1.2%201.3-2.5%202.5-3.9%203.6-.3%200-6.7-6.3-14.3-13.9zM35.5%2052.9c9-1.9%2015.3-8%2017.3-16.7.5-2%20.7-3.5.5-3.5-1.5%201-2.9%202.2-4.2%203.5-2.5%202.2-5.3%204.2-8.2%205.8-3.9%201.9-5%202.2-9.7%202.2s-5.8-.3-9.7-2.2c-3-1.6-5.7-3.5-8.2-5.8-1.3-1.3-2.7-2.5-4.2-3.5-.2%200%200%201.6.5%203.5%201.8%208.2%208.2%2014.7%2016.4%2016.5%204.1%201.1%205.3%201.1%209.5.2zm-.1-14c5.9-3.1%205.9-12.6%200-15.7S22.3%2024.3%2022.3%2031c0%205%204.1%209%209%209%201.4%200%202.8-.4%204.1-1.1zm-22.2-13c2.5-2.2%205.3-4.2%208.2-5.8%203.9-1.9%205-2.2%209.7-2.2s5.8.3%209.7%202.2c3%201.6%205.7%203.5%208.2%205.7%201.3%201.3%202.7%202.5%204.2%203.5.8%200-1.4-7.3-3-10C47%2014%2041.8%2010.5%2035%209.2c-9.1-1.7-18.2%202.4-23%2010.3-1.6%202.7-3.8%2010-3%2010%201.5-1.1%202.9-2.3%204.2-3.6z%22/%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M28%2034.2c-1.4-1.6-1.4-4.9.1-6.2%201.6-1.4%204.9-1.4%206.2.1%201.4%201.6%201.4%204.9-.1%206.2-1.7%201.4-4.9%201.3-6.2-.1z%22/%3E%3C/svg%3E");
}
ul.maturity-levels > li:nth-child(2) {
  background-color: #ff671f;
}
ul.maturity-levels > li:nth-child(2) h4:before {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2078%2089.7%22%3E%3Cstyle%3E.st0%7Bfill%3A%23fff%7D%3C/style%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M29.8%2075.3c0-12.7-.2-14.1-.8-11.3l-.8%203.3-3.4.2c-3.1.2-3.4.1-3.4-1.2%200-1.4%202.9-25.2%203.6-29.1.4-2.1.3-2.1-1.3-1.5-3.4.9-6.9.8-10.3-.3-1.5-.8-2.9-1.8-4.1-3.1C6.7%2029.5%200%2020.8%200%2020.2s5.5-4.6%206.6-4.9c.5-.2%202.4%201.9%204.4%204.6%204.8%206.6%205.7%207.4%207.6%207.4%201.6-.2%203.1-.9%204.3-1.8%202.2-1.5%203.2-1.8%207.1-1.8h4.6l1.9%2013.9c1.1%207.5%202.2%2013.8%202.3%2013.8s1.2-6.2%202.3-13.8L43%2023.7h4.6c4%200%204.9.3%207.2%201.8%202.5%201.8%205.1%202.3%206.5%201.3.9-.6%206.1-7.6%206.1-8.2%200-.2-2.4-4-5.3-8.3l-5.3-7.9%201.5-1.2c.6-.5%201.3-.9%202-1.2.3%200%202.7%203.3%205.3%207.3%203.7%205.7%205.6%207.9%208.4%209.9%201.3.9%202.6%201.9%203.7%203%200%20.6-6.7%209.3-9.4%2012.2-1.2%201.3-2.6%202.3-4.1%203.1-3.3%201.1-6.9%201.1-10.3.3-1.6-.7-1.7-.6-1.3%201.5.7%203.9%203.6%2027.6%203.6%2029.1%200%201.2-.3%201.4-3.4%201.2l-3.4-.2L49%2064c-.7-2.9-.8-1.4-.8%2011.3l-.1%2014.4H29.9l-.1-14.4z%22/%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M35.4%2018.3c-2.8-1.3-5.5-5.5-5.5-8.7.3-2.8%201.8-5.4%204.2-7.1C37.2.9%2040.9.9%2044%202.5c2.1%201.3%204.2%204.8%204.2%207.1%200%202.1-1.6%205.4-3.4%207.2s-7%202.5-9.4%201.5z%22/%3E%3C/svg%3E");
}
ul.maturity-levels > li:nth-child(3) {
  background-color: #ff8200;
}
ul.maturity-levels > li:nth-child(3) h4:before {
  background-size: 85%;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2070%2071.5%22%3E%3Cstyle%3E.st0%7Bfill%3A%23fff%7D%3C/style%3E%3Ccircle%20class%3D%22st0%22%20cx%3D%2235%22%20cy%3D%2218.3%22%20r%3D%2218.3%22/%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M49.8%2047.1l-2.4%2010L35%2043.8%2022.6%2057l-2.4-10S5.9%2050.9%200%2062.2v9.3h70v-9.3c-5.9-11.3-20.2-15.1-20.2-15.1z%22/%3E%3C/svg%3E");
}
.your-rating {
  padding: 2rem;
  margin-top: 2rem;
  font-size: 2rem;
  background-color: #f1f1f1;
  border: 0.4rem solid #55565a;
}
.your-rating > *:last-child {
  margin-bottom: 0;
}
.details-cta {
  background: #fff;
  padding: 4rem 0;
  margin: 5rem 0;
  text-align: center;
}
.details-cta .btn {
  margin: 2rem auto 0 auto;
}
ul.boxes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
ul.boxes > li {
  margin: 4rem 0 0 0;
  padding: 0;
  text-align: center;
}
ul.boxes > li .number {
  display: block;
  font-size: 9rem;
}
.result-btns {
  margin: 6rem 0 3rem 0;
  text-align: center;
}
.popup {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(241,241,241,0.9);
}
.popup.popup-active {
  display: block;
}
.popup .popup-content {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2rem;
}
.popup .popup-content p:first-child {
  font-size: 1.8rem;
  margin: 2rem;
}
.popup .popup-content input[type="text"],
.popup .popup-content select {
  width: 100%;
  padding: 0 1rem;
  margin: 0 0 1rem 0;
  height: 4rem;
}
.popup .popup-content .btn {
  display: block;
  margin: 2rem auto 0 auto;
}
.popup .btn-close {
  display: block;
  position: relative;
  width: 4rem;
  height: 4rem;
  margin: 4rem auto 0 auto;
}
.popup .btn-close:before,
.popup .btn-close:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.5rem;
  height: 100%;
  background: #000;
}
.popup .btn-close:before {
  transform: rotate(45deg);
}
.popup .btn-close:after {
  transform: rotate(-45deg);
}
@media (min-width: 641px) {
  #pnlHome {
    position: relative;
  }
  #pnlHome:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(40% - 20px);
    height: 100%;
    background-image: url("../images/home-hero.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
  }
  #pnlHome .container {
    width: auto;
    padding-right: 40%;
  }
  .footer a.esg img {
    width: 9rem;
  }
  .question-block {
    padding-right: 100px;
  }
  .question-block h3 span {
    top: 100%;
    left: 100%;
    transform: translate(50%, -50%);
  }
  ul.option.col-3 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  ul.option.col-3 li {
    width: 32%;
    display: flex;
    align-items: center;
  }
  ul.option.col-3 li label {
    width: 100%;
    text-align: center;
  }
  ul.progress-nav li {
    width: 47%;
  }
  ul.progress-nav li:last-child {
    width: 6%;
  }
  ul.progress-nav li span {
    width: 13%;
  }
  ul.progress-nav li:not(:last-child):after {
    width: 77%;
  }
}
@media (min-width: 768px) {
  ul.maturity-levels {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
  }
  ul.maturity-levels > li {
    width: 31%;
  }
  ul.maturity-levels > li + li {
    margin-top: 0;
  }
  ul.maturity-levels > li.selected {
    position: relative;
    z-index: 2;
  }
  ul.maturity-levels > li.selected:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -7.6rem;
    left: 50%;
    width: 10rem;
    height: 7.6rem;
    margin-left: -5rem;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2076%22%3E%3Cpath%20fill%3D%22%23f1f1f1%22%20d%3D%22M71%2040v-4h17.6L50%205.12%2011.4%2036H29v40h42V40z%22/%3E%3Cpath%20fill%3D%22%2355565a%22%20d%3D%22M90%2032L50%200%2011%2031.2%200%2040h25v36h4V36H11.4L50%205.12%2088.6%2036H71v40h4V40h25l-10-8z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .your-rating {
    position: relative;
    z-index: 1;
    margin-top: 7.2rem;
  }
  ul.boxes {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
  }
  ul.boxes > li {
    width: 33.333%;
    padding: 0 2%;
  }
  .result-btns .btn + .btn {
    margin-left: 3%;
  }
}
@media (max-width: 640px) {
  .question-block {
    padding-left: 90px;
  }
  .question-block h3 span {
    top: 0;
    right: 100%;
    margin-right: 2rem;
  }
}