@charset "UTF-8";
/* Common color codes */
/* Break points */
/* Transition times */
/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Mixins */
/* https://gwfh.mranftl.com/fonts/poppins?subsets=latin,latin-ext */
/* poppins-300 Light - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("./poppins-v23-latin_latin-ext-300-3fCbQMU_.woff2") format("woff2");
}
/* poppins-300italic LightItalic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: url("./poppins-v23-latin_latin-ext-300italic-PASQ7rZr.woff2") format("woff2");
}
/* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("./poppins-v23-latin_latin-ext-regular-DZXW5Tmd.woff2") format("woff2");
}
/* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("./poppins-v23-latin_latin-ext-italic-D5-YqCvY.woff2") format("woff2");
}
/* poppins-500 Medium - latin_latin-ext */
/* poppins-500italic MediumItalic - latin_latin-ext */
/* poppins-600 SemiBold - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("./poppins-v23-latin_latin-ext-600-BO279Z4F.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* poppins-600 SemiBold - latin_latin */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("./poppins-v23-latin_latin-600-DJVo7c07.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* poppins-600italic SemiBoldItalic- latin_latin-ext */
/* poppins-700 Bold - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("./poppins-v23-latin_latin-ext-700-BqqkXCuN.woff2") format("woff2");
}
/* poppins-700italic BoldItalic - latin_latin-ext */
/* poppins-800 ExtraBold - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  src: url("./poppins-v23-latin_latin-ext-800-CV8w9EPW.woff2") format("woff2");
}
/*
*   Interactive elements
*/
.buttonsRow { /* might be converted to generic row & column later */
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  background: pink;
}

.button {
  font-weight: 400;
  padding: 12px 25px;
  background-color: #F0F0F0;
  color: #222222;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
  font-size: 1.125rem;
}
.button:hover {
  color: #CE191F;
}

.buttonDefault {
  border: 1px solid #222222;
}
.buttonDefault:hover {
  color: #CE191F;
}

.buttonTellMeMore:hover,
.buttonBack:hover {
  color: #CE191F;
}

.buttonTellMeMore svg {
  margin-left: 10px;
  transform: translateY(3px);
}

.buttonBack svg {
  margin-right: 10px;
  transform: translateY(3px) rotate(90deg);
}

.buttonOptMeOut {
  color: #fff;
  background-color: #E71E24;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 7px 22px;
}
.buttonOptMeOut:hover {
  background-color: #CE191F;
  color: #fff;
}

.buttonOptMeOut:disabled,
.buttonOptMeOut[disabled] {
  background-color: #ccc;
  cursor: default;
}

.buttonMore {
  text-align: right;
}
.buttonMore::before {
  content: attr(data-more);
  margin-right: 0.5em;
  transform: translateY(-2px);
  display: inline-block;
}
.buttonMore.less::before {
  content: attr(data-less);
}
.buttonMore.less svg {
  transform: rotate(-180deg);
}

.buttonClose {
  background-color: yellow;
  background-image: url("/src/assets/img/close.svg");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 0px;
  padding-right: 20px;
  padding-top: 0px;
  margin-right: 1em;
  margin-bottom: 1em;
  cursor: pointer;
}

/* In the menu */
#headerLanguageSelect, #headerAbout {
  padding: 12px 14px;
  border: none;
  font-weight: 600;
}

#headerAbout {
  color: #B3B681;
}
#headerAbout:hover {
  color: #65673C;
}

#headerLanguageSelect {
  background-color: #B3B681;
  color: #fff;
}
#headerLanguageSelect:hover {
  background-color: #65673C;
}

/* Checkbox */
.checkBox {
  height: 34px;
  width: 80px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg%20width='80'%20height='34'%20viewBox='0%200%2080%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='80'%20height='34'%20rx='17'%20fill='%23CCCCCC'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M46.3173%2018.7521L43.8855%2018.7521C42.7298%2018.7521%2041.7914%2017.8774%2041.7914%2016.7997L43.7523%207.95525C43.7523%206.87761%2044.6907%206.00284%2045.8464%206.00284L54.0577%206.00284C54.3561%206.00284%2054.6014%206.00337%2054.8011%206.00408C54.3649%206.04009%2055.4543%206.03118%2055.568%206.01906C56.3552%206.13083%2056.7004%206.54085%2056.9911%206.82199C56.9911%206.82199%2056.9828%2017.3877%2057.0017%2017.7413C57.0207%2018.0952%2056.5324%2018.6339%2056.5324%2018.6339C56.5324%2018.6339%2055.1894%2019.8367%2054.2611%2020.5912C51.5962%2022.7573%2049.7464%2024.962%2049.0189%2027.7877C48.6465%2029.2345%2047.1999%2029.0531%2046.7934%2028.8621C42.7332%2026.9557%2048.7458%2018.7771%2048.7458%2018.7771C48.7458%2018.7771%2047.3509%2018.7669%2046.3481%2018.7575C46.3378%2018.7575%2046.3274%2018.7557%2046.3173%2018.7521ZM55.568%206.01906C55.5514%206.01674%2055.5345%206.01442%2055.5174%206.01228C55.5771%206.0146%2055.5889%206.01674%2055.568%206.01906ZM55.5174%206.01228C55.422%206.0089%2055.2042%206.00569%2054.8011%206.00408C54.8063%206.00373%2054.8118%206.0032%2054.8173%206.00284C55.0833%205.98198%2055.3147%205.9875%2055.5174%206.01228ZM57.826%2017.6987L57.826%206.70718C57.826%206.31838%2058.1415%206.00284%2058.5303%206.00284L62.991%206.00284C63.3798%206.00284%2063.6953%206.31838%2063.6953%206.70718L63.6953%2017.6987C63.6953%2018.0874%2063.3798%2018.4029%2062.991%2018.4029L58.5303%2018.4029C58.1415%2018.4029%2057.826%2018.0874%2057.826%2017.6987Z'%20fill='white'/%3e%3c/svg%3e");
  position: relative;
  cursor: pointer;
  transition: background-image 0.2s;
  transition-delay: 0.1s;
}
.checkBox.checked {
  background-image: url("data:image/svg+xml,%3csvg%20width='80'%20height='34'%20viewBox='0%200%2080%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='80'%20height='34'%20rx='17'%20fill='%23B3B681'/%3e%3cg%20clip-path='url(%23clip0_493_762)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M33.1072%2015.078H35.5011C36.6388%2015.078%2037.5625%2015.9392%2037.5625%2017L35.6321%2025.7066C35.6321%2026.7675%2034.7084%2027.6286%2033.5707%2027.6286H25.4874C25.1936%2027.6286%2024.9521%2027.6281%2024.7556%2027.6274C25.185%2027.5919%2024.1126%2027.6007%2024.0006%2027.6126C23.2257%2027.5026%2022.8859%2027.099%2022.5997%2026.8222C22.5997%2026.8222%2022.6079%2016.4212%2022.5893%2016.0731C22.5705%2015.7247%2023.0512%2015.1944%2023.0512%2015.1944C23.0512%2015.1944%2024.3734%2014.0104%2025.2871%2013.2677C27.9106%2011.1353%2029.7314%208.965%2030.4476%206.1833C30.8142%204.75901%2032.2383%204.93766%2032.6385%205.12561C36.6354%207.00231%2030.7165%2015.0535%2030.7165%2015.0535C30.7165%2015.0535%2032.0897%2015.0635%2033.0768%2015.0728C33.087%2015.0728%2033.0972%2015.0745%2033.1072%2015.078ZM24.0006%2027.6126C24.0169%2027.6149%2024.0336%2027.6172%2024.0505%2027.6193C23.9917%2027.617%2023.9801%2027.6149%2024.0006%2027.6126ZM24.0505%2027.6193C24.1443%2027.6227%2024.3588%2027.6258%2024.7556%2027.6274C24.7505%2027.6277%2024.7451%2027.6283%2024.7396%2027.6286C24.4778%2027.6491%2024.25%2027.6437%2024.0505%2027.6193ZM21.7779%2016.115V26.9352C21.7779%2027.318%2021.4672%2027.6286%2021.0845%2027.6286H16.6934C16.3106%2027.6286%2016%2027.318%2016%2026.9352V16.115C16%2015.7324%2016.3106%2015.4218%2016.6934%2015.4218H21.0845C21.4672%2015.4218%2021.7779%2015.7324%2021.7779%2016.115Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_493_762'%3e%3crect%20width='21.5625'%20height='23'%20fill='white'%20transform='translate(16%205)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  transition: background-image 0.2s;
  transition-delay: 0.1s;
}
.checkBox.checked .checkBoxSlider {
  transform: translateX(46px);
  transition: transform 0.15s;
}

.checkBoxSlider {
  height: 30px;
  width: 30px;
  background: #fff;
  position: absolute;
  border-radius: 15px;
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform 0.3s;
}

/*
*   Section specific
*/
/* Step 1 */
#step1 .optOutToggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 15px;
}
#step1 .optOutToggle h2 {
  margin: 0;
  flex: 0 20 auto;
}
#step1 .pleaseNote * {
  color: #65673C !important;
}
#step1 .pleaseNote p {
  font-size: 1em;
}

/* Splash screens & other pages */
/* Country Select */
#countrySelect .listCountries {
  flex: 1 1 auto;
}
#countrySelect ul {
  list-style: none;
  padding: 0;
}
#countrySelect li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5em;
  color: #a6a6a6;
}
#countrySelect li .active {
  cursor: pointer;
  color: #222222;
}
#countrySelect li .active:hover {
  color: #CE191F;
  text-decoration: underline;
}

/* Step 4 */
#step4 .letter {
  background-color: #ecede0;
  padding: 30px 10px 0 10px;
  border: 1px solid #D3D5B7;
}
@media only screen and (min-width: 640px) {
  #step4 .letter {
    padding: 30px 2.15% 0 2.15%;
  }
}
@media only screen and (min-width: 768px) {
  #step4 .letter {
    padding: 30px 4.3% 0 4.3%;
  }
}
#step4 .letter p {
  font-size: 1em;
}
#step4 .letter {
  position: relative;
}
#step4 .letter .buttonMore {
  background: #fff;
  border: 1px solid #D3D5B7;
  position: absolute;
  right: 5px;
  bottom: -42px;
  z-index: 0;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 40px;
}
#step4 .letterAddress {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 11em;
  margin-bottom: 3em;
}
#step4 .letterAddress .sender,
#step4 .letterAddress .recipient {
  align-self: flex-end;
}
#step4 .letterMeta {
  margin-bottom: 2em;
}
#step4 .letterBody {
  margin-bottom: 50px;
  max-height: auto;
}
#step4 .letterBody.readLess {
  max-height: 100px;
  margin-bottom: 0;
  overflow-y: hidden;
}
#step4 .donateOption {
  flex: 0 0 auto;
  width: 140px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 640px) {
  #step4 .donateOption {
    flex-wrap: nowrap;
  }
}
#step4 .donateOption[data-selected=true] .buttonDonate {
  background: #D1AA0A;
}
#step4 .donateOption[data-selected=true] {
  color: #D1AA0A;
}
#step4 .donateOption:hover .buttonDonate {
  background: #C09600;
}
#step4 .donateOption:hover {
  color: #C09600;
}
#step4 .buttonDonate {
  text-align: center;
  font-weight: 600;
  color: #fff;
  background: #222222;
}
#step4 .donateLabel {
  margin: 10px 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5em;
}

/* Step 6 */
.social .social-inner {
  margin: 0 auto;
}
.social ul {
  margin: 20px 0;
  display: flex;
  clear: both;
  gap: 20px;
  list-style: none;
  padding: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media only screen and (min-width: 640px) {
  .social ul {
    justify-content: center;
  }
}
.social a {
  display: inline-block;
}
.social a:hover {
  text-decoration: none;
}
.social a:hover .socialIcon svg {
  transition: background-color 0.3s;
  background: #E71E24;
  color: #fff;
}
.social a:hover .socialName {
  color: #E71E24;
}
.social li:before {
  content: none;
}
.social .socialIcon svg {
  display: block;
  margin: 0 auto 10px auto;
  background: #f7f7f7;
  padding: 6px 30px;
  border-radius: 30px;
  width: auto;
  height: 24px;
  color: #222222;
}
.social .socialName {
  display: block;
  font-size: 0.9rem;
  max-width: 100px;
  text-align: center;
  color: #222222;
}
.social .socialName[data-copied=true] {
  animation-name: fadeIn;
  animation-duration: 0.8s;
}

/*
*   Forms
*/
fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

legend {
  font-weight: bold;
}

.fieldset {
  margin-bottom: 1.5em;
}

label {
  display: block;
  margin: 0 0.5em 0.3em 0;
  font-size: 1rem;
  font-weight: 600;
  flex: 0 0 auto;
}

input,
select,
textarea,
button {
  background: #f7f7f7;
  color: #555555;
  font-style: italic;
  font-weight: 400;
  max-width: 460px;
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1.5em;
  border: none;
  border-radius: 2px;
  font-size: 1.125rem;
  box-sizing: border-box;
  border: 1px solid transparent;
  margin: 0;
}

input:disabled {
  color: green;
}

input[name=senderId] {
  width: 5em;
  text-align: center;
}

input[type=radio],
input[type=checkbox] {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #222222;
}

input[type=checkbox] {
  transform: translateY(4px);
  margin: 0px 10px 0 0;
}

input[type=checkbox]:checked::after {
  content: "✓";
  position: absolute;
  left: 0;
  top: -3px;
  width: 20px;
  height: 20px;
  font-size: 1.2em;
  color: #fff;
}

/* Hide the spin buttons in WebKit browsers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide spin buttons in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=date]::-webkit-datetime-edit {
  color: #555555;
}

input[type=date]::-webkit-datetime-edit-text {
  color: #555555;
}

input:focus::placeholder {
  opacity: 0;
}

input::placeholder {
  color: #888;
}

input[type=text]:first-child {
  margin-top: -1.5em;
  transform: translateY(-5px);
}

button {
  cursor: pointer;
  background: #007BFF;
  color: white;
  border: none;
}

button:hover {
  background: #0056b3;
}

/* Errors */
.label { /* contains inputError */
  display: flex;
  justify-content: flex-start;
  max-width: 460px;
  flex-wrap: wrap;
}

label.isInvalid {
  color: #E71E24;
}

.inputError {
  flex: 0 0 auto;
  color: #E71E24;
  font-size: 0.8em;
  padding: 5px 0;
}

input.isInvalid {
  border: 1px solid #E71E24;
}

/*
*   Typography
*/
p {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5em;
  color: #222222;
  margin: 0 0 1em 0;
  padding: 0;
}

a {
  color: #E71E24;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-weight: 600;
  margin: 0 0 0.3em 0;
}

h1 {
  font-size: 1.875rem;
  line-height: 1.2em;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
}
@media only screen and (min-width: 640px) {
  h1 {
    font-size: 2.25rem;
  }
}

h2 {
  font-size: 1.125rem;
}
@media only screen and (min-width: 640px) {
  h2 {
    font-size: 1.5rem;
  }
}

h3 {
  font-size: 1.125rem;
}

em {
  font-weight: 600;
  color: #E71E24;
  font-style: normal;
}

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

li:before {
  content: "-";
  margin-right: 10px;
}

strong {
  font-weight: 600;
}

pre {
  overflow-x: scroll;
}

/*
*   body & Layout
*/
body {
  background-color: #ccc;
  margin: 0;
  place-items: center;
  background-image: url("./bgr-DM-slcoQ.svg");
  background-color: #ecede0;
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: "Poppins", serif;
  overflow-x: hidden;
}

#root {
  width: 50%;
  min-height: 500px;
  margin: 25px auto;
  padding: 0 0 30px 0;
  width: 100%;
  background: #fff;
}
@media only screen and (min-width: 640px) {
  #root {
    max-width: calc(100% - 40px);
  }
}
@media only screen and (min-width: 768px) {
  #root {
    max-width: calc(100% - 68px);
  }
}
@media only screen and (min-width: 980px) {
  #root {
    max-width: 940px;
  }
}

header {
  margin: 0 0 50px 0;
  padding: 25px 30px;
  background-image: url("data:image/svg+xml,%3csvg%20width='400'%20height='86'%20viewBox='0%200%20400%2086'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_328_271)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M395.352%2082.2324C347.501%2083.5746%201.42492%2084.9825%201.42492%2084.9825L0.0078125%200L400.008%203.13L395.352%2082.2324L393.549%2010.8906L11.6659%2010.2222C11.6659%2010.2222%2011.2786%2023.0388%2010.3757%2077.3937L395.352%2082.2324ZM90.0214%2023.8213C98.0692%2023.8253%20104.118%2027.958%20104.118%2036.4621C104.118%2044.969%2098.0638%2049.6519%2090.0119%2049.6519H84.3651V64.8791H74.9636V23.8213H90.0119H90.0214ZM87.0131%2042.1879C90.7097%2042.1879%2094.212%2040.9424%2094.212%2036.7614C94.212%2032.5791%2090.7097%2031.2853%2087.0131%2031.2853H84.3651V42.1879H87.0131ZM46.8967%2023.8213C58.3442%2023.8213%2067.6486%2033.0825%2067.6486%2045.075C67.6486%2057.0675%2058.7424%2066.3756%2046.8967%2066.3756C35.0496%2066.3756%2026.0948%2057.0675%2026.0948%2045.075C26.0948%2033.0825%2035.5449%2023.8213%2046.8967%2023.8213ZM46.8967%2057.3185C54.3952%2057.3185%2057.5007%2051.1967%2057.5007%2045.075C57.5007%2038.9532%2054.2022%2032.8315%2046.8967%2032.8315C39.5911%2032.8315%2036.2427%2038.9532%2036.2427%2045.075C36.2427%2051.1967%2039.193%2057.3185%2046.8967%2057.3185ZM109.151%2023.8213H138.152V32.0396H128.352V64.8885H118.951V32.0396H109.151V23.8213ZM195.253%2040.537H195.01L186.56%2064.6281H180.962L172.512%2040.537H172.26L170.31%2064.8791H160.908L164.605%2023.8213H174.608L183.756%2047.5178L192.905%2023.8213H202.908L206.605%2064.8791H197.204L195.253%2040.537ZM237.176%2032.0396H222.971V40.1988H236.574V48.4063H222.971V56.6716H237.176V64.8791H213.571V23.8213H237.176V32.0396ZM279.836%2023.8213C291.284%2023.8213%20300.588%2033.0825%20300.588%2045.075C300.588%2057.0675%20291.691%2066.3756%20279.836%2066.3756C267.98%2066.3756%20259.034%2057.0675%20259.034%2045.075C259.034%2033.0825%20268.484%2023.8213%20279.836%2023.8213ZM279.836%2057.3185C287.336%2057.3185%20290.44%2051.1967%20290.44%2045.075C290.44%2038.9532%20287.142%2032.8315%20279.836%2032.8315C272.531%2032.8315%20269.182%2038.9532%20269.182%2045.075C269.182%2051.1967%20272.132%2057.3185%20279.836%2057.3185ZM339.6%2050.2988C339.6%2060.4472%20334.002%2065.6321%20323.494%2065.6321C312.987%2065.6321%20307.389%2060.4566%20307.389%2050.2988V23.8213H316.79V47.5661C316.79%2054.4314%20318.886%2056.43%20323.494%2056.43C328.103%2056.43%20330.199%2054.4408%20330.199%2047.5661V23.8213H339.6V50.2988ZM346.002%2023.8213H375.001V32.0396H365.202V64.8885H355.801V32.0396H346.002V23.8213Z'%20fill='%23E71E24'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 300px;
  height: 140px;
  background-position: center bottom;
}
@media only screen and (min-width: 980px) {
  header {
    background-size: 400px;
  }
}

.menu {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}

.row {
  margin: 0 0 50px 0;
}
@media only screen and (min-width: 640px) {
  .row {
    margin: 0 2.125% 50px 2.125%;
  }
}
@media only screen and (min-width: 768px) {
  .row {
    margin: 0 4.25% 50px 4.25%;
  }
}

.col-10 { /* 10 Columns */
  margin: 0 10px;
}
@media only screen and (min-width: 640px) {
  .col-10 {
    margin: 0 2.125%;
  }
}
@media only screen and (min-width: 768px) {
  .col-10 {
    margin: 0 4.25%;
  }
}

.col-8 { /* 10 Columns */
  margin: 0 10px;
}
@media only screen and (min-width: 640px) {
  .col-8 {
    margin: 0 4.25%;
  }
}
@media only screen and (min-width: 768px) {
  .col-8 {
    margin: 0 2.125%;
  }
}
@media only screen and (min-width: 980px) {
  .col-8 {
    margin: 0 14%;
  }
}

/*
*   Helper classes
*/
.flex-start {
  display: flex;
  clear: both;
  gap: 20px;
  justify-content: flex-start;
}
.flex-end {
  display: flex;
  clear: both;
  gap: 20px;
  justify-content: flex-end;
}
.flex-center {
  display: flex;
  clear: both;
  gap: 20px;
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

.hide {
  display: none;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
}

/*
*   Special elements
*/
h1.headline {
  margin-left: 0 10px;
}
@media only screen and (min-width: 640px) {
  h1.headline {
    margin: 0 4.25%;
  }
}
@media only screen and (min-width: 768px) {
  h1.headline {
    margin: 0 2.125%;
  }
}

.intro {
  font-size: 1.125rem;
  line-height: 1.5em;
  color: #555555;
  text-align: center;
  font-weight: 300;
  margin-bottom: 50px;
}
@media only screen and (min-width: 640px) {
  .intro {
    font-size: 1.5rem;
  }
}

.readMore {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}
.readMore.show {
  max-height: max-content;
  opacity: 1;
  transition: opacity 0.8s;
}
.readMore {
  /* temporary until content is placed correctly */
  font-size: 1.125rem;
  font-weight: 300;
  color: #222222;
}

.progress {
  text-align: center;
  background-repeat: no-repeat;
  width: 229px;
  margin: 30px auto;
}
.progress.bar1 {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='229'%20height='27'%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23EFF0E5'%20transform='translate(157,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23EFF0E5'%20transform='translate(83,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(7,9)'/%3e%3c/svg%3e");
}
.progress.bar2 {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='229'%20height='27'%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23EFF0E5'%20transform='translate(157,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(83,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(7,9)'/%3e%3c/svg%3e");
}
.progress.bar3 {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='229'%20height='27'%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(157,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(83,9)'/%3e%3cpath%20d='M0%200%20C22.11%200%2044.22%200%2067%200%20C67%201.98%2067%203.96%2067%206%20C44.89%206%2022.78%206%200%206%20C0%204.02%200%202.04%200%200%20Z%20'%20fill='%23C1C399'%20transform='translate(7,9)'/%3e%3c/svg%3e");
}

.notification {
  background-color: #D1AA0A;
  background-image: url("./icon_lightbulb-DlqVUI_8.svg");
  background-size: 35px 35px;
  background-position: right 20px top 25px;
  background-repeat: no-repeat;
  padding: 20px calc(35px + 3.22%) 1px 3.22%;
  margin-bottom: 30px;
}
.notification p, .notification h2 {
  color: #fff;
}

.listCountries .active {
  color: black !important;
}