@import url("https://use.typekit.net/qsn2mfu.css");
:root {
  --font-family: museo-sans-rounded, system-ui, sans-serif;
  --font-family--heading: moret, sans-serif;
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semi-bold: 600;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --font-weight--black: 900;
  --line-height: 1.5;
  --line-height--heading: 1.2;
  --border-radius: 0.1875rem;
  --spacing: 1.5rem;
  --spacing--small: 0.75rem;
  --border-width: 0.0625rem;
  --border: var(--border-width) solid currentColor;
  --focus-outline-width: 0.1875rem;
  --focus-outline-offset: 0.125rem;
  --focus-outline: var(--focus-outline-width) solid #1565c0;
  --duration: 150ms;
  --timing: ease; }

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #1565c0;
  border: 0;
  border-radius: var(--border-radius);
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: var(--spacing--small) var(--spacing);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration) var(--timing);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap; }
  button:hover,
  [type='button']:hover,
  [type='reset']:hover,
  [type='submit']:hover {
    background-color: #3b83d5; }
  button:focus,
  [type='button']:focus,
  [type='reset']:focus,
  [type='submit']:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset); }
  button:disabled,
  [type='button']:disabled,
  [type='reset']:disabled,
  [type='submit']:disabled {
    cursor: not-allowed;
    opacity: 0.5; }

:root {
  --form-box-shadow: inset 0 --border-width 0.1875rem rgba(#000, 0.06);
  --form-box-shadow-focus: var(--form-box-shadow), 0 0 0.3125rem #1565c0; }

fieldset {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  font-weight: 600;
  margin-bottom: var(--spacing--small);
  padding: 0; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing--small); }

input,
select,
textarea {
  display: block;
  font-family: var(--font-family);
  font-size: 1rem; }

[type='color'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
input:not([type]),
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--form-box-shadow);
  box-sizing: border-box;
  margin-bottom: var(--spacing--small);
  padding: calc(var(--spacing) / 3);
  transition: border-color var(--duration) var(--timing);
  width: 100%; }
  [type='color']:focus,
  [type='date']:focus,
  [type='datetime']:focus,
  [type='datetime-local']:focus,
  [type='email']:focus,
  [type='month']:focus,
  [type='number']:focus,
  [type='password']:focus,
  [type='search']:focus,
  [type='tel']:focus,
  [type='text']:focus,
  [type='time']:focus,
  [type='url']:focus,
  [type='week']:focus,
  input:not([type]):focus,
  textarea:focus {
    box-shadow: var(--form-box-shadow-focus); }
  [type='color']:disabled,
  [type='date']:disabled,
  [type='datetime']:disabled,
  [type='datetime-local']:disabled,
  [type='email']:disabled,
  [type='month']:disabled,
  [type='number']:disabled,
  [type='password']:disabled,
  [type='search']:disabled,
  [type='tel']:disabled,
  [type='text']:disabled,
  [type='time']:disabled,
  [type='url']:disabled,
  [type='week']:disabled,
  input:not([type]):disabled,
  textarea:disabled {
    cursor: not-allowed; }
    [type='color']:disabled:hover,
    [type='date']:disabled:hover,
    [type='datetime']:disabled:hover,
    [type='datetime-local']:disabled:hover,
    [type='email']:disabled:hover,
    [type='month']:disabled:hover,
    [type='number']:disabled:hover,
    [type='password']:disabled:hover,
    [type='search']:disabled:hover,
    [type='tel']:disabled:hover,
    [type='text']:disabled:hover,
    [type='time']:disabled:hover,
    [type='url']:disabled:hover,
    [type='week']:disabled:hover,
    input:not([type]):disabled:hover,
    textarea:disabled:hover {
      border: var(--border); }
  [type='color']::-webkit-input-placeholder, [type='date']::-webkit-input-placeholder, [type='datetime']::-webkit-input-placeholder, [type='datetime-local']::-webkit-input-placeholder, [type='email']::-webkit-input-placeholder, [type='month']::-webkit-input-placeholder, [type='number']::-webkit-input-placeholder, [type='password']::-webkit-input-placeholder, [type='search']::-webkit-input-placeholder, [type='tel']::-webkit-input-placeholder, [type='text']::-webkit-input-placeholder, [type='time']::-webkit-input-placeholder, [type='url']::-webkit-input-placeholder, [type='week']::-webkit-input-placeholder, input:not([type])::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #333;
    opacity: 0.25; }
  [type='color']::-moz-placeholder, [type='date']::-moz-placeholder, [type='datetime']::-moz-placeholder, [type='datetime-local']::-moz-placeholder, [type='email']::-moz-placeholder, [type='month']::-moz-placeholder, [type='number']::-moz-placeholder, [type='password']::-moz-placeholder, [type='search']::-moz-placeholder, [type='tel']::-moz-placeholder, [type='text']::-moz-placeholder, [type='time']::-moz-placeholder, [type='url']::-moz-placeholder, [type='week']::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder {
    color: #333;
    opacity: 0.25; }
  [type='color']:-ms-input-placeholder, [type='date']:-ms-input-placeholder, [type='datetime']:-ms-input-placeholder, [type='datetime-local']:-ms-input-placeholder, [type='email']:-ms-input-placeholder, [type='month']:-ms-input-placeholder, [type='number']:-ms-input-placeholder, [type='password']:-ms-input-placeholder, [type='search']:-ms-input-placeholder, [type='tel']:-ms-input-placeholder, [type='text']:-ms-input-placeholder, [type='time']:-ms-input-placeholder, [type='url']:-ms-input-placeholder, [type='week']:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #333;
    opacity: 0.25; }
  [type='color']::placeholder,
  [type='date']::placeholder,
  [type='datetime']::placeholder,
  [type='datetime-local']::placeholder,
  [type='email']::placeholder,
  [type='month']::placeholder,
  [type='number']::placeholder,
  [type='password']::placeholder,
  [type='search']::placeholder,
  [type='tel']::placeholder,
  [type='text']::placeholder,
  [type='time']::placeholder,
  [type='url']::placeholder,
  [type='week']::placeholder,
  input:not([type])::placeholder,
  textarea::placeholder {
    color: #333;
    opacity: 0.25; }

[type="search"] {
  -webkit-appearance: textfield; }

textarea {
  resize: vertical; }

[type="checkbox"],
[type="radio"] {
  display: inline;
  margin-right: var(--spacing--small); }

[type="file"] {
  margin-bottom: var(--spacing--small);
  width: 100%; }

select {
  margin-bottom: var(--spacing--small);
  width: 100%; }

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="file"]:focus,
select:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset); }

html {
  background-color: #fff;
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

html,
body {
  height: 100%; }

body {
  margin: 0; }

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0; }

dl {
  margin: 0; }

dt {
  font-weight: 600;
  margin: 0; }

dd {
  margin: 0; }

figure {
  margin: 0; }

img,
picture {
  margin: 0;
  max-width: 100%; }

table {
  border-collapse: collapse;
  margin: var(--spacing) 0;
  table-layout: fixed;
  text-align: left;
  width: 100%; }

thead {
  line-height: var(--line-height--heading);
  vertical-align: bottom; }

tbody {
  vertical-align: top; }

tr {
  border-bottom: var(--border); }

th {
  font-weight: 600; }

th,
td {
  padding: var(--spacing--small) var(--spacing--small) var(--spacing--small) 0; }

html {
  color: #333;
  font-family: var(--font-family);
  font-size: 100%;
  line-height: var(--line-height); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family--heading);
  font-size: 1.25em;
  line-height: var(--line-height--heading);
  margin: 0 0 var(--spacing--small);
  font-weight: 500; }

p {
  margin: 0 0 var(--spacing--small); }

a {
  color: #1565c0;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip: ink;
  transition: color var(--duration) var(--timing); }
  a:hover {
    color: #3b83d5; }
  a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset); }

hr {
  border-bottom: var(--border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: var(--spacing) 0; }

.wrapper {
  text-align: center;
  font-weight: 300; }
  .wrapper .inner {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px; }
  .wrapper h2 {
    font-weight: 700;
    font-size: 1.8em;
    margin-bottom: 1em; }
  .wrapper section {
    padding: 40px 0; }
    .wrapper section.top {
      padding: 10px 0; }
      .wrapper section.top .inner {
        display: flex;
        justify-content: space-between;
        align-items: center; }
      .wrapper section.top img {
        max-width: 200px;
        margin-top: 14px; }
        @media screen and (max-width: 375px) {
          .wrapper section.top img {
            max-width: 125px; } }
      .wrapper section.top ul {
        display: flex; }
        .wrapper section.top ul li {
          line-height: 10px;
          margin-left: 10px; }
    .wrapper section.header {
      background-color: #5D48EF;
      color: #fff;
      background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/lines.svg);
      background-size: cover;
      background-position: center; }
      .wrapper section.header h1 {
        font-weight: 500;
        font-size: 2.5em;
        line-height: 1.1em; }
      .wrapper section.header .img {
        display: none; }
      @media screen and (min-width: 701px) {
        .wrapper section.header .inner {
          display: flex;
          flex-direction: row-reverse;
          align-items: center; }
          .wrapper section.header .inner .img {
            width: 50%;
            display: block; }
          .wrapper section.header .inner .text {
            flex: 1;
            text-align: left;
            padding-left: 20px; } }
    .wrapper section.calc_wrap {
      background-color: #F4F0F7;
      position: relative;
      padding-bottom: 100px; }
      .wrapper section.calc_wrap:before {
        content: "";
        top: -30px;
        left: 0;
        position: absolute;
        height: 30px;
        width: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/header-border.png);
        background-size: 100% 30px;
        z-index: 0; }
      .wrapper section.calc_wrap .calc {
        position: relative;
        border-radius: 50px;
        padding: 40px 0 0 0;
        margin-bottom: 50px;
        background-color: #fff;
        box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.2); }
        .wrapper section.calc_wrap .calc h2 {
          font-size: 1.5em;
          font-weight: 700; }
        .wrapper section.calc_wrap .calc p:nth-of-type(1) {
          margin: 20px; }
        .wrapper section.calc_wrap .calc .inputs {
          margin: 20px; }
          .wrapper section.calc_wrap .calc .inputs .input {
            margin-bottom: 20px; }
            .wrapper section.calc_wrap .calc .inputs .input label {
              font-size: 1.2em;
              margin: 0px; }
            .wrapper section.calc_wrap .calc .inputs .input input {
              border: 2px solid #00EAB3;
              border-radius: 10px; }
              .wrapper section.calc_wrap .calc .inputs .input input#salary {
                padding-left: 20px;
                background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/pound.svg);
                background-size: 9px;
                background-repeat: no-repeat;
                background-position: 10px center; }
            .wrapper section.calc_wrap .calc .inputs .input select {
              display: block;
              font-size: 16px;
              font-weight: 300;
              color: #444;
              line-height: 1.3;
              padding: .6em 1.4em .5em .8em;
              width: 100%;
              max-width: 100%;
              box-sizing: border-box;
              margin: 0;
              border: 2px solid #00EAB3;
              border-radius: 10px;
              -moz-appearance: none;
              -webkit-appearance: none;
              appearance: none;
              background-color: #fff;
              background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/arrow.svg);
              background-repeat: no-repeat, repeat;
              background-position: right .7em top 50%, 0 0;
              background-size: 20px auto, 100%; }
              .wrapper section.calc_wrap .calc .inputs .input select::-ms-expand {
                display: none; }
              .wrapper section.calc_wrap .calc .inputs .input select:focus {
                border-color: #aaa;
                box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
                box-shadow: 0 0 0 3px -moz-mac-focusring;
                color: #222;
                outline: none; }
              .wrapper section.calc_wrap .calc .inputs .input select option {
                font-weight: normal; }
            @media screen and (min-width: 701px) {
              .wrapper section.calc_wrap .calc .inputs .input input, .wrapper section.calc_wrap .calc .inputs .input select {
                min-width: 230px; } }
        .wrapper section.calc_wrap .calc button.submit {
          color: #fff;
          background-color: #5D48EF;
          border-radius: 10px;
          width: 150px; }
        .wrapper section.calc_wrap .calc .output {
          margin: 50px 0 0; }
          .wrapper section.calc_wrap .calc .output .text {
            margin: 0 20px; }
            .wrapper section.calc_wrap .calc .output .text h3 {
              font-family: var(--font-family);
              color: #FC5842;
              margin: 0 0 20px; }
            .wrapper section.calc_wrap .calc .output .text ul {
              display: flex;
              flex-wrap: wrap; }
              .wrapper section.calc_wrap .calc .output .text ul li {
                width: 50%;
                padding: 0 10px;
                margin-bottom: 20px; }
                .wrapper section.calc_wrap .calc .output .text ul li .num {
                  background-color: #FC5842;
                  color: #fff;
                  border-radius: 100px;
                  padding: 10px 0; }
                .wrapper section.calc_wrap .calc .output .text ul li p {
                  margin: 5px 0 0; }
          .wrapper section.calc_wrap .calc .output .img {
            background-color: #FC5842;
            color: #fff;
            border-radius: 0 0 50px 50px;
            padding: 20px 0; }
            .wrapper section.calc_wrap .calc .output .img p {
              margin: 0; }
        @media screen and (min-width: 701px) {
          .wrapper section.calc_wrap .calc {
            overflow: hidden;
            margin-top: -300px; }
            .wrapper section.calc_wrap .calc p:nth-of-type(1) {
              max-width: 400px;
              margin: 20px auto 40px;
              text-align: left;
              display: block; }
            .wrapper section.calc_wrap .calc .inputs {
              display: flex;
              justify-content: space-around;
              align-items: flex-end; }
              .wrapper section.calc_wrap .calc .inputs input {
                margin: 0; }
              .wrapper section.calc_wrap .calc .inputs .input {
                margin-bottom: 0;
                text-align: left; }
                .wrapper section.calc_wrap .calc .inputs .input:nth-child(2) {
                  margin: 0 10px; }
            .wrapper section.calc_wrap .calc .output {
              margin: 40px;
              border-radius: 25px;
              box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);
              display: flex; }
              .wrapper section.calc_wrap .calc .output .text {
                flex: 1; }
                .wrapper section.calc_wrap .calc .output .text h3 {
                  margin: 30px 0; }
                .wrapper section.calc_wrap .calc .output .text ul {
                  justify-content: space-around; }
                  .wrapper section.calc_wrap .calc .output .text ul li {
                    width: auto; }
                    .wrapper section.calc_wrap .calc .output .text ul li .num {
                      text-align: left;
                      padding: 5px 30px; }
              .wrapper section.calc_wrap .calc .output .img {
                width: 200px;
                border-radius: 0 25px 25px 0;
                padding: 20px;
                min-height: 195px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center; }
                .wrapper section.calc_wrap .calc .output .img p {
                  text-align: center; }
                .wrapper section.calc_wrap .calc .output .img img {
                  max-height: 90px;
                  margin-bottom: 10px; } }
      .wrapper section.calc_wrap .cta {
        margin: 20px auto;
        max-width: 500px; }
    .wrapper section.table_wrap {
      position: relative; }
      .wrapper section.table_wrap:before {
        content: "";
        top: -70px;
        left: 0;
        position: absolute;
        height: 70px;
        width: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/table-border.png);
        background-size: 100% 70px;
        z-index: 0; }
      .wrapper section.table_wrap:after {
        content: "";
        bottom: -70px;
        left: 0;
        position: absolute;
        height: 70px;
        width: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/table-border.png);
        background-size: 100% 70px;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        z-index: 0; }
      .wrapper section.table_wrap .table {
        margin: 40px 0; }
        .wrapper section.table_wrap .table h3 {
          font-family: var(--font-family);
          font-size: 1em;
          font-weight: 700; }
        .wrapper section.table_wrap .table .row {
          display: flex;
          margin-bottom: 7px; }
          .wrapper section.table_wrap .table .row > div {
            font-size: 0.8em;
            padding: 2px 0; }
          .wrapper section.table_wrap .table .row:not(.header) > div {
            color: #fff; }
          .wrapper section.table_wrap .table .row:not(.header) .task, .wrapper section.table_wrap .table .row:not(.header) .all {
            background-color: #5D48EF; }
          .wrapper section.table_wrap .table .row:not(.header) .task {
            border-radius: 10px 0 0 10px;
            border-right: 1px solid; }
          .wrapper section.table_wrap .table .row:not(.header) .male {
            background-color: #FC5842; }
          .wrapper section.table_wrap .table .row:not(.header) .female {
            background-color: #00EAB3;
            border-radius: 0 10px 10px 0; }
          .wrapper section.table_wrap .table .row:nth-last-child(1) {
            font-weight: 700; }
          .wrapper section.table_wrap .table .row .task {
            flex: 1;
            text-align: left;
            padding: 2px 5px 2px 10px;
            line-height: 1.4em; }
          .wrapper section.table_wrap .table .row .all, .wrapper section.table_wrap .table .row .male, .wrapper section.table_wrap .table .row .female {
            width: 60px; }
          .wrapper section.table_wrap .table .row.total {
            padding-top: 10px;
            border-top: 2px solid #5D48EF; }
        @media screen and (min-width: 531px) {
          .wrapper section.table_wrap .table {
            max-width: 600px;
            margin: 40px auto;
            font-size: 1.3em; }
            .wrapper section.table_wrap .table .row {
              margin: 0; }
              .wrapper section.table_wrap .table .row > div {
                margin: 0 10px 10px 0;
                border-radius: 100px !important; }
              .wrapper section.table_wrap .table .row .all, .wrapper section.table_wrap .table .row .male, .wrapper section.table_wrap .table .row .female {
                width: 80px; }
              .wrapper section.table_wrap .table .row .female {
                margin-right: 0; } }
    .wrapper section.city {
      background-color: #e8e4eb;
      padding-top: 100px;
      background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/lines-white.svg);
      background-size: cover;
      background-position: center; }
      .wrapper section.city .map .desktop {
        display: none; }
        .wrapper section.city .map .desktop p.bold {
          font-size: 1.1em;
          font-weight: 700;
          display: block;
          width: 400px;
          margin: 20px auto; }
        @media screen and (min-width: 701px) {
          .wrapper section.city .map .desktop {
            display: block;
            position: relative;
            height: 0;
            padding-bottom: 100%;
            margin: 0 1.7%; }
            .wrapper section.city .map .desktop .base, .wrapper section.city .map .desktop .pins {
              width: 100%;
              position: absolute;
              left: 0;
              top: 0;
              height: auto; }
            .wrapper section.city .map .desktop .pins {
              height: 0;
              padding-bottom: 100%; }
              .wrapper section.city .map .desktop .pins .pin {
                width: 7%;
                position: absolute;
                opacity: 0; }
                .wrapper section.city .map .desktop .pins .pin img {
                  width: 100%; }
                .wrapper section.city .map .desktop .pins .pin:hover {
                  opacity: 1; }
                .wrapper section.city .map .desktop .pins .pin._1 {
                  top: 20%;
                  left: 12%; }
                .wrapper section.city .map .desktop .pins .pin._2 {
                  top: 53%;
                  left: -4%; }
                .wrapper section.city .map .desktop .pins .pin._3 {
                  top: 70%;
                  left: 93%; }
                .wrapper section.city .map .desktop .pins .pin._4 {
                  top: 60%;
                  left: 15%; }
                .wrapper section.city .map .desktop .pins .pin._5 {
                  top: 70%;
                  left: 1.5%; }
                .wrapper section.city .map .desktop .pins .pin._6 {
                  top: 31%;
                  left: 78.5%; }
                .wrapper section.city .map .desktop .pins .pin._7 {
                  top: 43%;
                  left: 8.5%; }
                .wrapper section.city .map .desktop .pins .pin._8 {
                  top: 87%;
                  left: 22%; }
                .wrapper section.city .map .desktop .pins .pin._9 {
                  top: 31%;
                  left: -4.5%; }
                .wrapper section.city .map .desktop .pins .pin._10 {
                  top: 52%;
                  left: 97.5%; }
                .wrapper section.city .map .desktop .pins .pin._11 {
                  top: 28%;
                  left: 66.5%; }
                .wrapper section.city .map .desktop .pins .pin._12 {
                  top: 78%;
                  left: 79%; }
                .wrapper section.city .map .desktop .pins .pin._13 {
                  top: 59%;
                  left: 86.5%; }
                .wrapper section.city .map .desktop .pins .pin._14 {
                  top: 78%;
                  left: 12.5%; }
                .wrapper section.city .map .desktop .pins .pin._15 {
                  top: 18.5%;
                  left: 53%; }
                .wrapper section.city .map .desktop .pins .pin._16 {
                  top: 83%;
                  left: 61%; }
                .wrapper section.city .map .desktop .pins .pin._17 {
                  top: 42%;
                  left: 89%; } }
        @media screen and (min-width: 1101px) {
          .wrapper section.city .map .desktop {
            height: 1012px;
            padding-bottom: 0; } }
      .wrapper section.city .map .mobile {
        margin: 40px 0 0; }
        .wrapper section.city .map .mobile ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center; }
          .wrapper section.city .map .mobile ul li {
            margin: 5px; }
            .wrapper section.city .map .mobile ul li p {
              background-color: #5D48EF;
              color: #fff;
              border-radius: 100px;
              width: 120px;
              position: relative;
              font-size: 0.9em;
              height: 24px;
              line-height: 24px;
              padding: 0 10px 0 25px; }
              .wrapper section.city .map .mobile ul li p:before {
                content: attr(data-num);
                position: absolute;
                top: 2px;
                left: 2px;
                display: flex;
                width: 20px;
                height: 20px;
                justify-content: center;
                align-items: center;
                border-radius: 100px;
                background-color: #FC5842;
                font-size: 0.9em; }
            .wrapper section.city .map .mobile ul li:nth-child(1) p::before {
              background-color: #e36c5f; }
            .wrapper section.city .map .mobile ul li:nth-child(2) p::before {
              background-color: #e3795f; }
            .wrapper section.city .map .mobile ul li:nth-child(3) p::before {
              background-color: #e3855f; }
            .wrapper section.city .map .mobile ul li:nth-child(4) p::before {
              background-color: #e3925f; }
            .wrapper section.city .map .mobile ul li:nth-child(5) p::before {
              background-color: #e39f5f; }
            .wrapper section.city .map .mobile ul li:nth-child(6) p::before {
              background-color: #e3ac5f; }
            .wrapper section.city .map .mobile ul li:nth-child(7) p::before {
              background-color: #e3b95f; }
            .wrapper section.city .map .mobile ul li:nth-child(8) p::before {
              background-color: #e3c65f; }
            .wrapper section.city .map .mobile ul li:nth-child(9) p::before {
              background-color: #e3d35f; }
            .wrapper section.city .map .mobile ul li:nth-child(10) p::before {
              background-color: #e3e05f; }
            .wrapper section.city .map .mobile ul li:nth-child(11) p::before {
              background-color: #d8e35f; }
            .wrapper section.city .map .mobile ul li:nth-child(12) p::before {
              background-color: #cbe35f; }
            .wrapper section.city .map .mobile ul li:nth-child(12) p::before {
              background-color: #cbe35f; }
            .wrapper section.city .map .mobile ul li:nth-child(13) p::before {
              background-color: #bee35f; }
            .wrapper section.city .map .mobile ul li:nth-child(14) p::before {
              background-color: #b1e35f; }
            .wrapper section.city .map .mobile ul li:nth-child(15) p::before {
              background-color: #a5e35f; }
            .wrapper section.city .map .mobile ul li:nth-child(16) p::before {
              background-color: #98e35f; }
            .wrapper section.city .map .mobile ul li:nth-child(17) p::before {
              background-color: #8be35f; }
        @media screen and (min-width: 701px) {
          .wrapper section.city .map .mobile {
            display: none; } }
    .wrapper section.sector {
      position: relative; }
      .wrapper section.sector:before {
        content: "";
        top: -70px;
        left: 0;
        position: absolute;
        height: 70px;
        width: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/table-border.png);
        background-size: 100% 70px;
        z-index: 0; }
      .wrapper section.sector:after {
        content: "";
        bottom: -70px;
        left: 0;
        position: absolute;
        height: 70px;
        width: 100%;
        background-image: url(https://images.musicmagpie.co.uk/images/campaignpages/paid-to-procrastinate/img/table-border.png);
        background-size: 100% 70px;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        z-index: 0; }
      .wrapper section.sector .sectors {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 40px auto 0;
        max-width: 1300px; }
        .wrapper section.sector .sectors div {
          margin: 0 10px 10px 10px;
          max-width: 120px; }
          .wrapper section.sector .sectors div p span {
            display: block;
            line-height: 1.2em; }
            .wrapper section.sector .sectors div p span.time {
              font-weight: 700; }
    .wrapper section.footer {
      background-color: #5D48EF;
      color: #fff;
      font-size: 1.3em;
      padding-top: 100px; }
      .wrapper section.footer a {
        color: inherit;
        font-weight: 700; }
      .wrapper section.footer .cc {
        margin-top: 40px;
        font-size: 0.7em; }
        .wrapper section.footer .cc img {
          margin: 0 0 10px; }