/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v15-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v15-latin-regular.woff") format("woff"), url("../fonts/roboto-v15-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v15-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto-v15-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Italic"), local("Roboto-Italic"), url("../fonts/roboto-v15-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-italic.woff2") format("woff2"), url("../fonts/roboto-v15-latin-italic.woff") format("woff"), url("../fonts/roboto-v15-latin-italic.ttf") format("truetype"), url("../fonts/roboto-v15-latin-italic.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-v15-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/roboto-v15-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-500.woff2") format("woff2"), url("../fonts/roboto-v15-latin-500.woff") format("woff"), url("../fonts/roboto-v15-latin-500.ttf") format("truetype"), url("../fonts/roboto-v15-latin-500.svg#Roboto") format("svg");
  /* Legacy iOS */ }
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v15-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-700.woff2") format("woff2"), url("../fonts/roboto-v15-latin-700.woff") format("woff"), url("../fonts/roboto-v15-latin-700.ttf") format("truetype"), url("../fonts/roboto-v15-latin-700.svg#Roboto") format("svg");
  /* Legacy iOS */ }
#c5-wrapper {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  background-color: #28444F;
  box-sizing: border-box;
  position: relative;
  height: 60.48387vw;
  overflow: hidden;
  /* draggable targets */
  /* drop target state */
  /* drop target focus and dragover state */
  /* draggable items */
  /* items focus state */
  /* items grabbed state */ }
  #c5-wrapper section {
    height: 60.48387vw;
    box-sizing: border-box;
    margin: auto;
    display: none; }
    #c5-wrapper section.active {
      display: inherit; }
  #c5-wrapper button {
    background: none;
    border: none; }
    #c5-wrapper button.progress {
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: #FFDE17;
      color: #28444F;
      border: none;
      border-radius: 0.40323vw;
      padding: 0.70565vw 3.02419vw;
      font-size: 1.5121vw;
      font-weight: 500;
      box-shadow: 0 0.50403vw #978100;
      transition: box-shadow .15s ease, margin-top .15s ease; }
      @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #c5-wrapper button.progress {
          transition: none; } }
      #c5-wrapper button.progress:-moz-focusring {
        outline: 2px dotted blue; }
      #c5-wrapper button.progress:hover, #c5-wrapper button.progress:focus {
        box-shadow: 0 0.30242vw #978100;
        margin-top: 0.30242vw; }
      #c5-wrapper button.progress:active {
        box-shadow: 0 0 #978100;
        margin-top: 0.50403vw; }
      #c5-wrapper button.progress:disabled {
        background-color: #8c8c8c;
        box-shadow: 0 0 #8c8c8c;
        color: lightgray; }
        #c5-wrapper button.progress:disabled:hover, #c5-wrapper button.progress:disabled:active {
          box-shadow: 0 0 #8c8c8c;
          margin-top: 0; }
  #c5-wrapper #intro {
    padding-top: 9.27419vw;
    padding-bottom: 7.56048vw; }
    #c5-wrapper #intro img.logo {
      display: block;
      margin: auto;
      margin-bottom: 3.02419vw;
      margin-top: 3.02419vw;
      width: 26.10887vw;
      visibility: hidden; }
    #c5-wrapper #intro .flex-container {
      display: flex;
      flex-direction: row;
      align-itmes: center;
      justify-content: center;
      margin-bottom: 4.03226vw;
      visibility: hidden; }
      #c5-wrapper #intro .flex-container img {
        width: 24.29435vw; }
      #c5-wrapper #intro .flex-container p {
        font-size: 2.01613vw;
        line-height: 2.82258vw;
        color: white;
        text-align: left;
        width: 38.70968vw;
        display: block;
        margin-left: 2.01613vw; }
    #c5-wrapper #intro button {
      background-color: #9355B6;
      box-shadow: 0 0.50403vw #4e2a62;
      color: white;
      transform: scale(0); }
      #c5-wrapper #intro button:hover, #c5-wrapper #intro button:focus {
        box-shadow: 0 0.30242vw #4e2a62;
        margin-top: 0.30242vw; }
      #c5-wrapper #intro button:active {
        box-shadow: 0 0 #4e2a62;
        margin-top: 0.50403vw; }
  #c5-wrapper #country-selection {
    padding-top: 5.04032vw; }
    #c5-wrapper #country-selection #map {
      width: 89.0121vw;
      height: 43.34677vw;
      display: block;
      margin: auto; }
      #c5-wrapper #country-selection #map .pins {
        display: none; }
    #c5-wrapper #country-selection .pins button {
      position: absolute;
      width: 2.92339vw;
      height: 4.53629vw;
      padding: 0;
      background-image: url("../img/drop-pin-red.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
      #c5-wrapper #country-selection .pins button:-moz-focusring {
        outline: 2px dotted blue; }
      #c5-wrapper #country-selection .pins button img {
        display: none; }
      #c5-wrapper #country-selection .pins button:hover {
        background-image: url("../img/drop-pin-yellow.svg"); }
      #c5-wrapper #country-selection .pins button:disabled {
        background-image: url("../img/drop-pin-checkmark.svg"); }
      #c5-wrapper #country-selection .pins button[data-country="jamaica"] {
        top: 20.06048vw;
        left: 20.66532vw; }
      #c5-wrapper #country-selection .pins button[data-country="colombia"] {
        top: 24.89919vw;
        left: 21.77419vw; }
      #c5-wrapper #country-selection .pins button[data-country="united-kingdom"] {
        top: 7.96371vw;
        left: 43.14516vw; }
      #c5-wrapper #country-selection .pins button[data-country="sweden"] {
        top: 6.45161vw;
        left: 47.58065vw; }
      #c5-wrapper #country-selection .pins button[data-country="lebanon"] {
        top: 15.52419vw;
        left: 53.62903vw; }
      #c5-wrapper #country-selection .pins button[data-country="ghana"] {
        top: 23.89113vw;
        left: 42.84274vw; }
      #c5-wrapper #country-selection .pins button[data-country="south-korea"] {
        top: 14.21371vw;
        left: 79.03226vw; }
      #c5-wrapper #country-selection .pins button[data-country="japan"] {
        top: 14.1129vw;
        left: 82.15726vw; }
    #c5-wrapper #country-selection .modal {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: rgba(255, 255, 255, 0.9);
      visibility: hidden;
      border-radius: 0.50403vw; }
      #c5-wrapper #country-selection .modal.intro {
        visibility: visible;
        width: 60.48387vw;
        height: 37.5vw; }
        #c5-wrapper #country-selection .modal.intro .inner {
          margin: 1.41129vw;
          overflow-y: scroll;
          height: 34.67742vw; }
          #c5-wrapper #country-selection .modal.intro .inner::-webkit-scrollbar {
            -webkit-appearance: none; }
          #c5-wrapper #country-selection .modal.intro .inner::-webkit-scrollbar:vertical {
            width: 11px; }
          #c5-wrapper #country-selection .modal.intro .inner::-webkit-scrollbar:horizontal {
            height: 11px; }
          #c5-wrapper #country-selection .modal.intro .inner::-webkit-scrollbar-thumb {
            border-radius: 8px;
            border: 2px solid white;
            /* should match background, can't be transparent */
            background-color: rgba(0, 0, 0, 0.5); }
          #c5-wrapper #country-selection .modal.intro .inner::-webkit-scrollbar-track {
            background-color: none;
            border-radius: 8px; }
          #c5-wrapper #country-selection .modal.intro .inner img {
            display: block;
            margin-left: auto;
            margin-right: auto; }
            #c5-wrapper #country-selection .modal.intro .inner img:first-of-type {
              width: 3.72984vw;
              margin-top: 6.55242vw;
              margin-bottom: 3.02419vw; }
            #c5-wrapper #country-selection .modal.intro .inner img:nth-of-type(2) {
              margin-bottom: 6.04839vw;
              width: 7.7621vw;
              height: 3.93145vw; }
            #c5-wrapper #country-selection .modal.intro .inner img:last-of-type {
              width: 11.49194vw;
              margin-bottom: 3.02419vw;
              padding-left: 2.01613vw; }
          #c5-wrapper #country-selection .modal.intro .inner p {
            display: block;
            margin-left: auto;
            margin-right: auto;
            color: #28444F;
            text-align: center;
            font-size: 1.41129vw;
            line-height: 2.31855vw; }
            #c5-wrapper #country-selection .modal.intro .inner p:first-of-type {
              width: 33.26613vw;
              margin-bottom: 4.03226vw; }
            #c5-wrapper #country-selection .modal.intro .inner p:nth-of-type(2) {
              width: 38.50806vw;
              margin-bottom: 1.00806vw; }
            #c5-wrapper #country-selection .modal.intro .inner p:last-of-type {
              width: 38.50806vw;
              margin-bottom: 0vw;
              margin-top: 0;
              padding-bottom: 2.01613vw; }
          #c5-wrapper #country-selection .modal.intro .inner button {
            margin-bottom: 3.52823vw; }
      #c5-wrapper #country-selection .modal.completion {
        width: 38.60887vw;
        height: 23.18548vw;
        margin: 10.08065vw auto auto; }
        #c5-wrapper #country-selection .modal.completion img {
          display: block;
          width: 6.75403vw;
          margin: 3.83065vw auto 1.20968vw; }
        #c5-wrapper #country-selection .modal.completion h4 {
          text-align: center;
          color: #28444F;
          font-size: 2.41935vw;
          line-height: 2.31855vw;
          margin: 0; }
    #c5-wrapper #country-selection .popup {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 16.63306vw;
      box-sizing: border-box;
      padding-left: 14.51613vw;
      padding-right: 14.51613vw;
      background-color: rgba(255, 255, 255, 0.9); }
      #c5-wrapper #country-selection .popup h3 {
        font-size: 3.52823vw;
        letter-spacing: .025em;
        line-height: 2.62097vw;
        text-transform: uppercase;
        margin-bottom: 1.6129vw; }
        #c5-wrapper #country-selection .popup h3 img {
          width: 3.93145vw;
          margin-top: -0.80645vw; }
      #c5-wrapper #country-selection .popup p {
        font-size: 1.20968vw;
        line-height: 1.81452vw; }
  #c5-wrapper .myplate {
    width: 100%;
    height: 60.48387vw;
    background-color: #1F313D;
    z-index: 100; }
    #c5-wrapper .myplate svg {
      width: 100px; }
    #c5-wrapper .myplate h2.country {
      display: flex;
      align-items: center;
      height: 10.8871vw;
      background-color: #9355B6;
      color: #ffffff;
      margin: 0;
      font-size: 3.52823vw;
      letter-spacing: .025em;
      padding-left: 6.55242vw; }
    #c5-wrapper .myplate .growl {
      position: absolute;
      width: 27vw;
      height: 9vw;
      background: #fff;
      border-radius: 0.5vw;
      top: 9.5vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.95;
      visibility: hidden;
      pointer-events: none;
      z-index: 10; }
      #c5-wrapper .myplate .growl h2 {
        font-size: 3vw;
        font-style: italic; }
    #c5-wrapper .myplate .startzone {
      width: 100%;
      height: 100%; }
      #c5-wrapper .myplate .startzone img {
        position: absolute; }
        #c5-wrapper .myplate .startzone img.item {
          cursor: pointer; }
    #c5-wrapper .myplate .endzone {
      padding: 0;
      margin: 0 auto;
      width: calc(100vw/3);
      height: 6.04839vw;
      margin-top: 1.5121vw;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      #c5-wrapper .myplate .endzone img {
        width: 5vw;
        max-height: 6.04839vw; }
        #c5-wrapper .myplate .endzone img.checkmark {
          width: 3vw;
          padding: 1vw;
          opacity: 0; }
    #c5-wrapper .myplate .dragdrop {
      width: 90vw;
      height: 40.02016vw;
      color: #fff;
      padding: 0 5vw; }
      #c5-wrapper .myplate .dragdrop .wrapper {
        width: 30vw;
        height: 40.02016vw;
        float: left;
        display: flex;
        align-items: center;
        justify-content: space-around; }
        #c5-wrapper .myplate .dragdrop .wrapper.left {
          justify-content: flex-start;
          margin-top: -6.04839vw;
          height: 46.06855vw; }
          #c5-wrapper .myplate .dragdrop .wrapper.left p {
            width: 75%;
            font-size: 1.41129vw;
            line-height: 2.21774vw; }
            #c5-wrapper .myplate .dragdrop .wrapper.left p .name {
              font-weight: 500;
              font-size: 2.41935vw;
              line-height: 2.62097vw; }
            #c5-wrapper .myplate .dragdrop .wrapper.left p .group {
              font-size: 1.81452vw;
              font-weight: 500;
              line-height: 2.21774vw; }
              #c5-wrapper .myplate .dragdrop .wrapper.left p .group.fruits {
                color: #F15A5A; }
              #c5-wrapper .myplate .dragdrop .wrapper.left p .group.grains {
                color: #FF6C36; }
              #c5-wrapper .myplate .dragdrop .wrapper.left p .group.vegetables {
                color: #1EC855; }
              #c5-wrapper .myplate .dragdrop .wrapper.left p .group.proteins {
                color: #9355B6; }
              #c5-wrapper .myplate .dragdrop .wrapper.left p .group.dairy {
                color: #3A70C7; }
        #c5-wrapper .myplate .dragdrop .wrapper.center {
          position: relative; }
          #c5-wrapper .myplate .dragdrop .wrapper.center .arrow {
            position: absolute;
            width: 5.64516vw;
            top: 4.03226vw;
            left: 27.21774vw; }
        #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate {
          display: block;
          background: url("../img/myplate.svg") no-repeat;
          background-size: 100%;
          width: 100%;
          height: 30vw;
          z-index: 0;
          position: relative; }
          #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"] {
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 1; }
            #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].fruits {
              top: 8.5%;
              left: 9.4%;
              width: 9.6vw;
              height: 8.8vw;
              border-radius: 0.75vw;
              border-top-left-radius: 100%; }
              @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].fruits {
                  top: 15.5%; } }
            #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].grains {
              top: 8.5%;
              left: 41.1%;
              width: 9.7vw;
              height: 10.5vw;
              border-radius: 0.75vw;
              border-top-right-radius: 100%; }
              @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].grains {
                  top: 15.5%; } }
            #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].vegetables {
              top: 37.5%;
              left: 9%;
              width: 9.7vw;
              height: 10.5vw;
              border-radius: 0.75vw;
              border-bottom-left-radius: 100%; }
              @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].vegetables {
                  top: 45.5%; } }
            #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].proteins {
              top: 42.8%;
              left: 41.1%;
              width: 9.6vw;
              height: 8.8vw;
              border-radius: 0.75vw;
              border-bottom-right-radius: 100%; }
              @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].proteins {
                  top: 49.8%; } }
            #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].dairy {
              top: 7.2%;
              left: 73.4%;
              width: 7vw;
              height: 7vw;
              border-radius: 100%; }
              @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #c5-wrapper .myplate .dragdrop .wrapper.right .drop-plate [data-draggable="target"].dairy {
                  top: 14.2%; } }
    #c5-wrapper .myplate button.progress {
      transition: box-shadow .15s ease, margin-top .15s ease, transform .15s ease;
      position: absolute;
      bottom: 23.53629vw;
      width: 12.09677vw;
      left: 0;
      right: 0;
      margin: auto; }
      #c5-wrapper .myplate button.progress:hover {
        transform: translateY(0.30242vw); }
      @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #c5-wrapper .myplate button.progress {
          transition: none; } }
  #c5-wrapper #jamaica .startzone .plate {
    width: 19.15323vw;
    top: 9.87903vw;
    left: 0; }
  #c5-wrapper #jamaica .startzone #ackee {
    top: 17.54032vw;
    left: 4.03226vw;
    width: 11.59274vw; }
  #c5-wrapper #jamaica .startzone #saltfish {
    top: 11.49194vw;
    left: 5.14113vw;
    width: 10.9879vw; }
  #c5-wrapper #jamaica .startzone #callaloo {
    top: 11.52127vw;
    width: 8.56855vw;
    left: 0.50403vw; }
  #c5-wrapper #jamaica .startzone #breadfruit {
    top: 6.85484vw;
    left: 18.04435vw;
    width: 9.67742vw; }
  #c5-wrapper #colombia .startzone .plate {
    width: 18.14516vw;
    top: 9.87903vw; }
  #c5-wrapper #colombia .startzone #arepa {
    top: 9.47581vw;
    left: 4.6371vw;
    width: 10.9879vw; }
  #c5-wrapper #colombia .startzone #eggs {
    top: 16.12903vw;
    left: 1.6129vw;
    width: 9.97984vw; }
  #c5-wrapper #colombia .startzone #fruit-juice {
    width: 6.25vw;
    left: 20.16129vw;
    top: 6.35081vw; }
  #c5-wrapper #colombia .startzone #avocado {
    top: 16.83468vw;
    left: 18.04435vw;
    width: 8.66935vw; }
  #c5-wrapper #ghana .startzone #koko {
    top: 17.1371vw;
    left: 0vw;
    width: 12.09677vw; }
  #c5-wrapper #ghana .startzone #eggs {
    top: 4.03226vw;
    left: 8.06452vw;
    width: 11.08871vw; }
  #c5-wrapper #ghana .startzone #waakye {
    top: 17.43952vw;
    left: 15.12097vw;
    width: 12.09677vw; }
  #c5-wrapper #united-kingdom .startzone #berries-and-bananas {
    left: 0vw;
    top: 8.06452vw;
    width: 9.375vw; }
  #c5-wrapper #united-kingdom .startzone #porridge {
    width: 12.90323vw;
    left: 7.96371vw;
    top: 13.91129vw; }
  #c5-wrapper #united-kingdom .startzone #milk {
    width: 6.85484vw;
    left: 20.16129vw;
    top: 6.35081vw; }
  #c5-wrapper #sweden .startzone #sandwich-bread {
    width: 14.1129vw;
    top: 9.87903vw;
    left: -1.00806vw; }
  #c5-wrapper #sweden .startzone #herring {
    width: 9.07258vw;
    left: 13.10484vw;
    top: 18.14516vw; }
  #c5-wrapper #sweden .startzone #cucumber-and-tomato {
    width: 8.06452vw;
    left: 14.1129vw;
    top: 8.06452vw; }
  #c5-wrapper #sweden .startzone #cheese {
    width: 7.05645vw;
    left: 21.16935vw;
    top: 13.30645vw; }
  #c5-wrapper #lebanon .startzone #manousheh {
    left: 5.04032vw;
    top: 7.05645vw;
    width: 18.85081vw; }
  #c5-wrapper #lebanon .startzone #jibneh {
    top: 8.87097vw;
    left: 6.45161vw;
    width: 15.52419vw; }
  #c5-wrapper #lebanon .startzone #tomatoes-and-cucumber {
    top: 9.97984vw;
    left: 7.25806vw;
    width: 14.31452vw; }
  #c5-wrapper #south-korea .startzone #rice {
    left: 16.12903vw;
    top: 5.04032vw;
    width: 11.08871vw; }
  #c5-wrapper #south-korea .startzone #soup {
    top: 1.5121vw;
    left: 0vw;
    width: 14.1129vw; }
  #c5-wrapper #south-korea .startzone #kimchi {
    top: 19.15323vw;
    left: 3.02419vw;
    width: 10.08065vw; }
  #c5-wrapper #south-korea .startzone #fish {
    top: 20.66532vw;
    left: 16.33065vw;
    width: 11.08871vw; }
  #c5-wrapper #japan .startzone #rice {
    left: 16.12903vw;
    top: 5.04032vw;
    width: 11.08871vw; }
  #c5-wrapper #japan .startzone #miso-soup {
    top: 1.5121vw;
    left: 0vw;
    width: 14.1129vw; }
  #c5-wrapper #japan .startzone #natto {
    top: 20.3629vw;
    left: 3.02419vw;
    width: 10.08065vw; }
  #c5-wrapper #japan .startzone #pickled-cucumber {
    top: 19.65726vw;
    left: 16.33065vw;
    width: 10.08065vw; }
  #c5-wrapper #results img.food {
    width: 48.3871vw;
    display: block;
    padding-top: 14.1129vw;
    margin: auto; }
  #c5-wrapper #results img.logo {
    width: 15.625vw;
    display: block;
    margin: auto;
    margin-top: 3.02419vw; }
  #c5-wrapper #results h5 {
    color: white;
    text-align: center;
    font-size: 2.72177vw;
    line-height: 2.62097vw;
    font-weight: 500;
    margin-top: 2.01613vw;
    margin-bottom: 2.01613vw; }
  #c5-wrapper #results p {
    color: white;
    text-align: center;
    font-size: 1.41129vw;
    line-height: 2.31855vw;
    padding-bottom: 2.01613vw;
    margin-bottom: 0; }
  #c5-wrapper #results .top, #c5-wrapper #results .bottom {
    height: 7.56048vw;
    overflow: auto; }
  #c5-wrapper #results .continue {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; }
  #c5-wrapper #results button {
    background-color: #9355B6;
    box-shadow: 0 0.50403vw #4e2a62;
    color: white;
    width: 16.12903vw;
    margin: 0 1.31048vw; }
    #c5-wrapper #results button:hover, #c5-wrapper #results button:focus {
      box-shadow: 0 0.30242vw #4e2a62;
      transform: translateY(0.30242vw); }
    #c5-wrapper #results button:active {
      box-shadow: 0 0 #4e2a62; }
    @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      #c5-wrapper #results button.confetti {
        display: none; } }
  #c5-wrapper #results #canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; }
  #c5-wrapper [data-draggable="target"] {
    overflow-y: auto;
    padding: 1vw; }
    #c5-wrapper [data-draggable="target"] .check {
      position: absolute;
      max-width: 2vw;
      z-index: 1; }
      #c5-wrapper [data-draggable="target"] .check:nth-of-type(1) {
        top: 0vw;
        left: 4.6vw; }
      #c5-wrapper [data-draggable="target"] .check:nth-of-type(2) {
        top: 0vw;
        left: 14vw; }
      #c5-wrapper [data-draggable="target"] .check:nth-of-type(3) {
        top: 10.5vw;
        left: 4.6vw;
        border: 1px solid red; }
      #c5-wrapper [data-draggable="target"] .check:nth-of-type(4) {
        top: 10.5vw;
        left: 14vw; }
    #c5-wrapper [data-draggable="target"] .hide {
      display: none;
      opacity: 0; }
  #c5-wrapper [data-draggable="target"][aria-dropeffect="move"],
  #c5-wrapper .ui-droppable-active {
    border-color: #68b;
    background: #fff;
    opacity: 0.6; }
  #c5-wrapper [data-draggable="target"][aria-dropeffect="move"]:focus,
  #c5-wrapper [data-draggable="target"][aria-dropeffect="move"].dragover,
  #c5-wrapper .ui-droppable-hover {
    outline: none;
    opacity: 0; }
  #c5-wrapper [data-draggable="item"] {
    display: inline-block;
    width: 10vw;
    padding: 1vw;
    transition: transform 0.25s;
    transform: scale(1);
    z-index: 5; }
  #c5-wrapper [data-draggable="item"].ui-draggable-dragging {
    opacity: .6;
    z-index: 100; }
  #c5-wrapper [data-draggable="item"]:focus,
  #c5-wrapper [data-draggable="item"]:hover {
    outline: none;
    transform: scale(1.1); }
  #c5-wrapper [data-draggable="item"][aria-grabbed="true"] {
    color: #fff; }

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }

/*# sourceMappingURL=main.css.map */