@font-face {
  font-family: "StagSansWeb-Light";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Light/StagSansWeb-Light.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Light/StagSansWeb-Light.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Light/StagSansWeb-Light.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Light/StagSansWeb-Light.svg#StagSansWeb-Light") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "StagSansWeb-Book";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Book/StagSansWeb-Book.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Book/StagSansWeb-Book.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Book/StagSansWeb-Book.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Book/StagSansWeb-Book.svg#StagSansWeb-Book") format("svg");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: "StagSansWeb-Medium";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Medium/StagSansWeb-Medium.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Medium/StagSansWeb-Medium.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Medium/StagSansWeb-Medium.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Medium/StagSansWeb-Medium.svg#StagSansWeb-Medium") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "StagSansWeb-Semibold";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Semibold/StagSansWeb-Semibold.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Semibold/StagSansWeb-Semibold.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Semibold/StagSansWeb-Semibold.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/StagSansWeb/StagSansWeb-Semibold/StagSansWeb-Semibold.svg#StagSansWeb-Semibold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "OpenSans-Regular";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_regular/OpenSans-Regular-webfont.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_regular/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_regular/OpenSans-Regular-webfont.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_regular/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "OpenSans-Semibold";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_semibold/OpenSans-Semibold-webfont.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_semibold/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_semibold/OpenSans-Semibold-webfont.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/open-sans/opensans_semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold") format("svg");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: "Which-Icons";
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/WhichIcons/WhichIcons.eot");
  src: url("https://fonts-which-co-uk.s3.amazonaws.com/WhichIcons/WhichIcons.eot?#iefix") format("embedded-opentype"), url("https://fonts-which-co-uk.s3.amazonaws.com/WhichIcons/WhichIcons.woff") format("woff"), url("https://fonts-which-co-uk.s3.amazonaws.com/WhichIcons/WhichIcons.svg#WhichIcons") format("svg"), url("https://fonts-which-co-uk.s3.amazonaws.com/WhichIcons/WhichIcons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'CELL-icons';
  src: url("CELL-icons/CELL-icons.eot");
  src: url("CELL-icons/CELL-icons.eot?#iefix") format("embedded-opentype"), url("CELL-icons/CELL-icons.woff") format("woff"), url("CELL-icons/CELL-icons.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
body:after {
  content: "";
  display: table;
  clear: both; }

body {
  margin: 0;
  padding: 0; }

.wills-container {
  font-family: 'OpenSans-Regular', sans-serif;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  max-width: 615px;
  margin: 0 auto;
  padding-top: 30px;
  border-radius: 3px;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  /*** RADIOS & CHECKBOXES ***/
  /* the basic, unchecked style */
  /* For hiding the original radio button but keeping it focusable in firefox, IE */
  /* hover style */
  /* the checked style using the :checked pseudo class */
  /* focus styling */
  /* focus and checked */
  /* update label indentation */
  /*ACCORDION*/ }
  .wills-container .intro .main {
    text-align: center; }
  .wills-container h1, .wills-container h2, .wills-container h3, .wills-container h4, .wills-container h5, .wills-container h6 {
    font-family: 'StagSansWeb-Light', sans-serif; }
  .wills-container h1 {
    font-size: 46px;
    font-weight: 300;
    color: #05171d;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 20px; }
    @media (max-width: 620px) {
      .wills-container h1 {
        font-size: 36px;
        font-weight: 500;
        font-family: "StagSansWeb-Medium"; } }
  .wills-container h3 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 0; }
  .wills-container .crop {
    padding-right: 50px; }
  .wills-container .progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #e7e7e7; }
    .wills-container .progress-container .progress-inner {
      height: 10px;
      background: #f44336;
      width: 0%;
      transition: all 500ms ease-in-out;
      max-width: 100%; }
  .wills-container .main {
    text-align: left;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    padding: 20px; }
  .wills-container .btn {
    text-align: center;
    display: inline-block;
    margin: 30px 0;
    cursor: pointer;
    background: #f44336;
    color: white;
    border-radius: 3px;
    padding: 10px 80px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3);
    font-size: 18px;
    transition: all 150ms ease-in-out; }
    @media (max-width: 620px) {
      .wills-container .btn {
        padding: 10px 20px; } }
    .wills-container .btn:hover {
      background: #e30613;
      border-width: 2px;
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.25);
      transition: all 150ms ease-in-out; }
  .wills-container .back {
    position: absolute;
    top: 15px;
    left: 10px;
    color: #ed4636;
    cursor: pointer; }
  .wills-container .restart {
    position: absolute;
    top: 15px;
    right: 10px;
    color: #ed4636;
    cursor: pointer; }
  .wills-container .error {
    display: none;
    color: #ed4636;
    margin-bottom: 0; }
  .wills-container .question-label {
    display: block;
    font-family: 'StagSansWeb-Light', sans-serif;
    font-weight: 300;
    font-size: 25px;
    line-height: 1.44;
    color: #05171d;
    margin-bottom: 26px;
    width: 85%; }
  .wills-container .radio,
  .wills-container .checkbox {
    margin-bottom: 20px;
    margin-left: 40px; }
  @media (max-width: 992px) {
    .wills-container {
      /* dont show on mobile devices to avoid double radios */ }
      .wills-container [type="radio"],
      .wills-container [type="checkbox"] {
        display: none; } }
  .wills-container [type="radio"],
  .wills-container [type="checkbox"] {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0; }
  .wills-container [type="radio"] + span:before,
  .wills-container [type="checkbox"] + span:before {
    content: '';
    display: inline-block;
    width: 27px;
    height: 24px;
    vertical-align: -8px;
    margin-right: 0.75em;
    transition: all 150ms ease-in-out;
    background: url(../images/radio-default.png) no-repeat;
    background-size: contain; }
  .wills-container [type="checkbox"] + span:before {
    background: url(../images/checkbox-default.png) no-repeat; }
  .wills-container .radio-bg-span:hover:before,
  .wills-container .checkbox-bg-span:hover:before {
    background: url(../images/radio-hover.png) no-repeat;
    background-size: contain;
    cursor: pointer; }
  .wills-container .checkbox-bg-span:hover:before {
    background: url(../images/checkbox-hover.png) no-repeat; }
  .wills-container [type="radio"]:checked + span:before,
  .wills-container [type="checkbox"]:checked + span:before {
    background: url(../images/radio-selected.png) no-repeat;
    background-size: contain; }
  .wills-container [type="checkbox"]:checked + span:before {
    background: url(../images/checkbox-selected.png) no-repeat; }
  .wills-container [type="radio"]:checked + span,
  .wills-container [type="checkbox"]:checked + span {
    font-weight: 600; }
  .wills-container [type="radio"]:focus + span:before,
  .wills-container [type="checkbox"]:focus + span:before {
    background: url(../images/radio-focus.png) no-repeat;
    background-size: contain; }
  .wills-container [type="checkbox"]:focus + span:before {
    background: url(../images/checkbox-focus.png) no-repeat; }
  .wills-container [type="radio"]:focus:checked + span:before,
  .wills-container [type="checkbox"]:focus:checked + span:before {
    background: url(../images/radio-selected-focus.png) no-repeat;
    background-size: contain; }
  .wills-container [type="checkbox"]:focus:checked + span:before {
    background: url(../images/checkbox-selected-focus.png) no-repeat; }
  .wills-container .radio label,
  .wills-container .checkbox label {
    padding-left: 0;
    margin-left: -39px;
    text-indent: 40px;
    font-family: 'OpenSans-Regular';
    cursor: pointer; }
  .wills-container .summary {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 20px;
    margin-top: 0; }
  .wills-container .img-wifi {
    background: url("../images/icons/wifi.png") no-repeat; }
  .wills-container .img-antivirus {
    background: url("../images/icons/antivirus.png") no-repeat; }
  .wills-container .img-smartphone {
    background: url("../images/icons/smartphone.png") no-repeat; }
  .wills-container .img-passwords {
    background: url("../images/icons/passwords.png") no-repeat; }
  .wills-container .img-social {
    background: url("../images/icons/social.png") no-repeat; }
  .wills-container .img-strangers {
    background: url("../images/icons/strangers.png") no-repeat; }
  .wills-container .img-post {
    background: url("../images/icons/post.png") no-repeat; }
  .wills-container .img-electoral {
    background: url("../images/icons/electoral.png") no-repeat; }
  .wills-container .question {
    display: none;
    background-position: 95% 20px;
    background-size: 50px 50px; }
  .wills-container .result {
    border-bottom: 1px solid #e7e7e7;
    background-position: top right;
    background-size: 50px 50px; }
    .wills-container .result:last-child {
      border-bottom: 0; }
    .wills-container .result h3 {
      padding-right: 60px; }
  .wills-container .score {
    text-align: center;
    padding: 10px;
    border-radius: 10px; }
  .wills-container .risk {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 20px; }
  .wills-container .red {
    color: #f44336; }
  .wills-container .answer {
    display: none;
    padding: 1px 20px;
    margin: 20px 0;
    background: #f7f7f7;
    border-radius: 10px; }
    .wills-container .answer p:first-of-type {
      font-weight: bold; }
  .wills-container .drop {
    margin-top: 30px; }
  .wills-container .accordion {
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: 0.2s;
    border-radius: 3px;
    color: #3f51b5; }
    .wills-container .accordion:hover {
      background: #dee1f3; }
    .wills-container .accordion:after {
      color: #3f51b5;
      font-family: "Which-Icons";
      content: '\25bc';
      font-size: 13px;
      margin-left: 5px;
      line-height: 18px;
      vertical-align: top; }
    .wills-container .accordion.active:after {
      content: "\25b2"; }
  .wills-container .accordion-panel {
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    opacity: 0;
    margin: 10px 0; }
    .wills-container .accordion-panel.show {
      opacity: 1;
      max-height: 1000px; }
  .wills-container .brand {
    border-top: 1px solid #e7e7e7;
    padding: 10px;
    background: #f7f7f7;
    text-align: left; }
    .wills-container .brand:after {
      content: "";
      display: table;
      clear: both; }
    .wills-container .brand img {
      display: block;
      width: 70px;
      float: right; }
    .wills-container .brand .share-link {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 12px 18px;
      border-radius: 2px;
      text-decoration: none;
      color: #05171d;
      font-size: 14px;
      cursor: pointer; }
      .wills-container .brand .share-link:hover, .wills-container .brand .share-link.white {
        background: #fff; }
  .wills-container .share {
    display: none;
    border-top: 1px solid #e7e7e7;
    padding: 20px 20px 16px;
    text-align: left; }
    .wills-container .share p {
      font-size: 14px;
      margin-top: 0; }
    .wills-container .share textarea {
      width: 100%;
      box-sizing: border-box;
      height: 127px; }