/* Font link from https://fonts.google.com/ */
      @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400&display=swap');

      /* General colors  */
      :root {
        --white: #fff;
        --primary: #703e97;
        --secondary: #2a276e;
        --tertiary: #f6f6f6;
        --divider-primary: #8e04ff;
        --divider-secondary: #f1cb14;
        --hover-primary: #b791c9;
        --hover-secondary: #f1ecf6;
        --hover-outline: #dccfe5;
        --disabled: #c9c3d8;
        --disabled-outline: #9493b6;
        --nav-link: #2a276e;
        --nav-link-hover: #f1cb14;
        --back-link: #664f9e;
        --back-link-hover: #b99ecc;
        --black: #000;
      }

      /* Body  styles  */
      body {
        font-family: 'Open Sans', 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: normal;
        line-height: 1.67;
        background-color: var(--tertiary, #f6f6f6);
        margin: 0;
        padding: 0;
      }

      /* Wrapper for whole page */
      main {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* General styles for links  */
      a {
        color: #000;
      }

      /* Styles for headings  and text*/
      h1 {
        font-size: 36px;
        font-weight: 300;
        line-height: 1.28;
        letter-spacing: 0.36px;
        color: var(--white, #fff);
        margin: 0;
      }

      h2 {
        color: #000000;
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 1.2;
        padding-bottom: 10px;
      }

      p {
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 1.5;
        color: #767676;
      }

      /* Styles for button */
      button {
        padding: 15px 25px;
        cursor: pointer;
        text-decoration: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: none;
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.57;
        background-color: var(--primary, #703e97);
        color: var(--white, #fff);
      }

      button::after {
        content: ' ';
        display: inline-block;
        margin-left: 8.7px;
        background-size: contain;
        width: 30px;
        height: 12px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' width='30px' height='12px' viewBox='0 0 30 12' enable-background='new 0 0 30 12' xml:space='preserve'>  <image id='image0' width='30' height='12' x='0' y='0' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAOCAQAAACS72SyAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCRISHjRcVrIlAAAAVElEQVQoz2P4z0A0FPh//v98ZBHitTL8D/j///9/ZO2kaGb4n4CqnTTN aNpJ1YyinXTNSNpZGP4zkAcSGBiYyNQKAZQ4m64BRkFUUZBIKEqeGBkDAI7eiMspdBSfAAAAJXRF WHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTE4VDE4OjMwOjUyKzAyOjAwDfIs/wAAACV0RVh0ZGF0ZTpt b2RpZnkAMjAyMC0wOS0xOFQxODozMDo1MiswMjowMHyvlEMAAAAZdEVYdFNvZnR3YXJlAEFkb2Jl IEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC'/></svg>");
      }

      .checkbox__section {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 40px;
        flex-wrap: wrap;
      }

      .checkbox__section-left{
          flex-basis: 50%;
      }

      .checkbox__section-right{
          flex-basis: 50%;
      }

      .monthly__checkbox {
       margin-right: auto;
        margin-top: 40px;
      }

      /* Header with logo and text */
      header {
        width: 100%;
        background-color: var(--white, #fff);
        text-align: center;
        margin-bottom: 30px;
      }

      #headline {
        background-color: var(--primary, #703e97);
      }

      /* Wrapper for different sections */
       section {
        border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        padding: 30px;
        margin-bottom: 30px;
        max-width: 720px;
        background-color: var(--white, #fff);
      }

      @media (min-width: 992px){
          section{
              width: 720px;
          }
          }

      .container__text {
        font-size: 15px;
      }

      /* Wrapper for footer button */
      .footer {
        display: flex;
        justify-content: center;
      }

      /* Input styles */
      .two-column input,
      select {
        width: 100%;
        background-color: var(--white, #fff);
        border-bottom: 3px solid var(--divider-primary, #8e04ff);
        border-top: 0;
        border-right: 0;
        border-left: 0;
        padding: 0.7em;
        margin-bottom: 0.5rem;
        transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
      }

      input:focus:invalid,
      select:focus:invalid {
        border: red solid 3px;
      }

      div[role='group'].two-column {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }

      div[role='group'].two-column .column-single {
        flex: 1;
      }

      div[role='group'].two-column .column-double {
        flex: 2;
      }

      div[role='group'].two-column .column-first {
        margin-right: 0.5em;
        margin-bottom: 0;
      }

      div[role='group'].two-column .column-second {
        margin-left: 0.5em;
        margin-bottom: 0;
      }

      /* Remove outline for input */
      select:focus,
      input:focus {
        outline: 0;
        outline-offset: 0;
      }

     /* Overlay for the Pref Center Unsubscribe */
/* Overlay for the Pref Center Unsubscribe */

.container__overlay {
  display: none;
  overflow: auto;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.overlay {
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translate(0, -50%);
  margin-top: 10px;
  max-width: 900px;
}

.overlay__section-loader {
  display: none;
  overflow: auto;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.overlay-loader {
  width: 120px;
  height: 120px;
  position: relative;
  margin: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.overlay__section-show {
  display: block;
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  top: 1px;
  right: 15px;
  font-size: 30px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  font-weight: 700;
  opacity: 0.5;
}

.modal__close:hover {
 opacity: 1;
transition: all .5s ease-out;
}

/* Class for parts of text */
.note {
  font-size: 15px;
  color: #000;
}

/* Media queries */
@media (max-width: 991px) {
  section {
    margin-left: 30px;
    margin-right: 30px;
    max-width: 600px;
  }

  .overlay {
    margin: 0 10px;
  }
}


.loader {
display: block;
  margin: 10px auto;
  border: solid 10px #f3f3f3;
  border-top: 10px solid var(--primary, #703e97);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


#emailAddressPlaceholder{
color: #000;
text-decoration: underline;
}

@media (max-width: 600px) {
  .overlay {
    margin: 10px 15px;
  }
}

@media (max-width: 600px) {
  section {
    margin: 5px 0;
    padding: 10px;
    max-width: 100%;
  }

  .checkbox__section {
    flex-direction: column;
  }

.overlay-unsubscribe {
    margin-top: 150px;
  }
}