svg {
      width: 100%;
      height: 100%;
      font-family: sans-serif;
      font-size: 22px;
    }

    .segment {
        stroke-width: 5px;
        stroke: #fff;
      }

      .seg-1 {
        fill: #253e87;
      }

      .seg-2 {
        fill: #009648;
      }

      .seg-3 {
        fill: #ec8a22;
      }

      .seg-in {
        fill: #e8edee;
      }

      .seg-1.seg-sub {
        fill: #d2dae7;
      }

      a:hover .seg-1.seg-sub,
      a.active .seg-1.seg-sub {
        fill: #253e87;
      }

      .seg-2.seg-sub {
        fill: #d2e9db;
      }

      a:hover .seg-2.seg-sub,
      a.active .seg-2.seg-sub {
        fill: #009648;
      }

      .seg-3.seg-sub {
        fill: #f5e7d2;
      }

      a:hover .seg-3.seg-sub,
      a.active .seg-3.seg-sub {
        fill: #ec8a22;
      }

    .segment {
      transform-origin: 50% 50%;
      opacity: 0;
      animation: rotateIn 0.6s ease-out forwards;
    }

    .segment:nth-child(1), .segment.seg-a { animation-delay: 0s; }
    .segment:nth-child(2), .segment.seg-b { animation-delay: 0.2s; }
    .segment:nth-child(3), .segment.seg-c { animation-delay: 0.4s; }
    .segment:nth-child(4), .segment.seg-d { animation-delay: 0.6s; }
    .segment:nth-child(5), .segment.seg-e { animation-delay: 0.8s; }
    .segment:nth-child(6), .segment.seg-f { animation-delay: 1s; }
    .segment:nth-child(7), .segment.seg-g { animation-delay: 1.2s; }
    .segment:nth-child(8), .segment.seg-h { animation-delay: 1.4s; }
    .segment:nth-child(9), .segment.seg-i { animation-delay: 1.6s; }
    .segment:nth-child(10), .segment.seg-j { animation-delay: 1.8s; }
    .segment:nth-child(11), .segment.seg-k { animation-delay: 2s; }
    .segment:nth-child(12), .segment.seg-l { animation-delay: 2.2s; }

    .label {
      opacity: 0  ;
      animation: fadeIn 0.6s ease-out forwards;    
      animation-delay: 2.2s
    }

    a:hover .label,
    a.active .label {
      fill: #fff;
    }

    .icon {
      opacity: 0  ;
      animation: fadeIn 0.6s ease-out forwards;    
      animation-delay: 2.2s
    }

    .cls-1 {
        fill: #fff;
        font-family: ArialMT, Arial;
        font-size: 38px;
        opacity: 0  ;
        animation: fadeIn 0.6s ease-out forwards;    
        animation-delay: 2.2s
    }

    @keyframes rotateIn {
      0% {
        transform: rotate(-90deg);
        opacity: 0;
      }
      100% {
        transform: rotate(0deg);
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .details1 .nhsuk-details__text {
    	border-color: #253e87;
    }

    .details2 .nhsuk-details__text {
    	border-color: #009648;
    }

    .details3 .nhsuk-details__text {
    	border-color: #ec8a22;
    }

    .js-enabled details {
	  transition: opacity 0.3s ease-in-out;
	  opacity: 0;
	}

	.js-enabled details.fade-in {
	  opacity: 1;
	}

	.js-enabled details.fade-out {
	  opacity: 0;
	}

    .js-enabled .hidden {
    	display:none;
    	height:0;
    }