/*Contains any common function to modify the tables, which can then be imported and applied per sub style.
	eg, for the email table may want to show lines, so can import the below to apply show-lines() just for item-container.email*/
/*tag colours on people page for diff link types.*/
@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*Mixin to make avatar circle, for users, to be added inside a .name-and-avatar-display style*/
@font-face {
  font-family: 'Biennale Semibold';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Biennale-Semibold.woff");
}
@font-face {
  font-family: 'Biennale Regular';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Biennale-Regular.woff");
}
@font-face {
  font-family: 'Absolute';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Absolute-Regular.otf");
}
@font-face {
  font-family: 'Font Awesome Light';
  font-style: normal;
  font-weight: 400;
  src: url("/Content/FontAwesome/webfonts/fa-light-300.ttf");
}
@font-face {
  font-family: 'Font Awesome Bold';
  font-style: normal;
  font-weight: 400;
  src: url("/Content/FontAwesome/webfonts/fa-solid-900.ttf");
}
@font-face {
  font-family: 'Font Awesome Brands';
  font-style: normal;
  font-weight: 400;
  src: url(/Content/FontAwesome/webfonts/fa-brands-400.ttf);
}
body {
  margin: 0;
}
body.dialog-active {
  overflow: hidden;
}
button-container {
  display: grid;
}
button-container button,
button-container .button {
  justify-self: center;
  transition: 0.3s;
}
button-container button:hover,
button-container .button:hover {
  box-shadow: 0px 0px 10px 8px rgba(239, 136, 210, 0.5);
}
h1 {
  font-size: 66px;
  font-family: "Biennale Semibold";
  margin: 0;
  text-align: center;
  max-width: 800px;
}
@media only screen and (max-width: 1100px) {
  h1 {
    font-size: 50px;
    max-width: 630px;
  }
}
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 32px;
    max-width: 100%;
  }
}
h2 {
  font-size: 41px;
  font-family: "Biennale Semibold";
  color: #6426E3;
  margin: 0;
}
@media only screen and (max-width: 1100px) {
  h2 {
    font-size: 30px;
  }
}
h2 rectangle {
  color: white;
  background-color: #5BBCD1;
  padding: 0 20px;
  border-radius: 25px 16px 50px 11px;
  white-space: nowrap;
}
h2 seperator {
  color: #5BBCD1;
}
h3 {
  color: #6426E3;
  font-size: 27px;
  font-family: 'Biennale Semibold';
  margin: 0;
}
@media only screen and (max-width: 800px) {
  h3 {
    font-size: 22px;
  }
}
h3 fancy {
  color: #5BBCD1;
}
p {
  font-size: 16px;
  line-height: 26px;
}
ul {
  padding: 0;
}
.action-month-button {
  background-color: #ef88d2;
  color: white;
  font-family: "Biennale Semibold";
  border-radius: 50px;
  padding: 20px 60px;
  font-size: 17px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.action-month-button.disabled {
  cursor: none;
  pointer-events: none;
  opacity: 0.7;
}
.action-month-cancel-button {
  background: none;
  border: none;
  font-size: 16px;
  text-decoration: underline;
  text-underline-position: under;
  cursor: pointer;
  margin-left: 10px;
}
.hidden {
  display: none !important;
}
dialog-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
dialog-overlay dialog {
  display: block;
  z-index: 3;
  background: none;
  border: none;
  top: 10%;
}
@media only screen and (max-width: 1100px) {
  dialog-overlay dialog {
    display: block;
    top: 0;
  }
}
@media only screen and (max-width: 800px) {
  dialog-overlay dialog {
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
dialog-overlay dialog iframe {
  width: 600px;
  height: 900px;
}
@media only screen and (max-width: 1100px) {
  dialog-overlay dialog iframe {
    width: 90vw;
    height: 90vh;
  }
}
@media only screen and (max-width: 800px) {
  dialog-overlay dialog iframe {
    width: 100vw;
    height: 90vh;
  }
}
.ui-dialog {
  box-sizing: border-box;
  font-family: "Biennale Semibold";
  border-radius: 33px;
  position: fixed !important;
  top: 40%;
  z-index: 100;
  border: none !important;
  background-color: white;
}
.ui-dialog #confirmDialog {
  padding: 15px;
}
.ui-dialog .ui-dialog-titlebar.ui-widget-header {
  background-color: #6426E3;
  padding: 10px;
  color: #FFFFFF;
  border-bottom: none;
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}
.ui-dialog .ui-dialog-titlebar.ui-widget-header span.ui-dialog-title {
  font-size: 22px;
}
.ui-dialog .ui-dialog-titlebar.ui-widget-header button.ui-button.ui-dialog-titlebar-close {
  display: none;
  /*background-color: @purpleColor;


            .ui-button-icon-primary:before {
                font-family: 'Font Awesome Bold';
                color: #FFFFFF;
                content: "\f057";
            }

            .ui-button-text {
                font-size: 0;
                display: none;
            }*/
}
.ui-dialog .ui-dialog-buttonpane {
  text-align: right;
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  padding: 0 15px 10px 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  background-color: #ef88d2;
  color: white;
  border-radius: 50px;
  padding: 20px 60px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-state-hover {
  box-shadow: none;
  opacity: 0.8;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-state-focus {
  box-shadow: none;
}
mailing-list-container {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-family: "Biennale Regular";
}
mailing-list-container mailing-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: #e7f3f6;
  border-radius: 30px;
  padding: 20px;
  transition: all 0.3s ease-in-out;
}
mailing-list-container mailing-list h2 {
  color: black;
  padding-bottom: 30px;
}
mailing-list-container mailing-list p {
  margin-top: 0;
  font-size: 16px;
  color: #381483;
}
mailing-list-container mailing-list fields {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
mailing-list-container mailing-list fields label {
  padding-bottom: 5px;
  flex: 1 100%;
}
mailing-list-container mailing-list fields input {
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid rgba(54, 134, 159, 0.25);
  border-radius: 23px;
  height: 42px;
  font-size: 16px;
  margin-bottom: 5px;
  flex: 1;
  margin-right: 20px;
}
mailing-list-container mailing-list fields input:focus,
mailing-list-container mailing-list fields input.focus,
mailing-list-container mailing-list fields input.chosen-container-active,
mailing-list-container mailing-list fields input.cke_focus,
mailing-list-container mailing-list fields input.focussed {
  box-shadow: 0 0 10px #36869FC7;
  outline: none;
}
mailing-list-container mailing-list fields button#Submit {
  border-radius: 30px;
  padding: 12px 18px;
  background-color: #5abcd1;
}
mailing-list-container mailing-list fields #EmailError {
  position: absolute;
  bottom: -5px;
  color: #e80000;
}
mailing-list-container mailing-list fields,
mailing-list-container mailing-list recaptcha-section {
  position: relative;
}
mailing-list-container mailing-list.processing {
  pointer-events: none;
}
mailing-list-container mailing-list.processing .action-month-button {
  opacity: 0.5;
  pointer-events: none;
}
mailing-list-container mailing-list.processing .cancel {
  opacity: 0;
  pointer-events: none;
}
mailing-list-container mailing-list subscribe-seperation {
  position: relative;
}
mailing-list-container mailing-list subscribe-seperation recaptcha-section {
  display: block;
  position: absolute;
}
@media only screen and (max-width: 800px) {
  mailing-list-container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}
section {
  position: relative;
  font-family: "Biennale Regular";
}
section content {
  display: grid;
  padding: 90px 30px 100px 30px;
  position: relative;
}
@media only screen and (max-width: 1100px) {
  section content {
    padding: 80px 30px 90px 30px;
  }
}
@media only screen and (max-width: 800px) {
  section content {
    padding: 30px 15px 40px 15px;
  }
}
section content content-container {
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
}
section button-container {
  justify-self: center;
}
@media only screen and (max-width: 800px) {
  section button-container {
    justify-self: start;
  }
}
section[hero] content {
  padding: 0;
  position: relative;
  /* for desktop, we'll make the splash a fixed size */
  height: 650px;
  background: url("/Content/Images/ActionMonth/action-month-hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* for mobile, we'll make the splash full screen, looks nicer*/
}
@media only screen and (max-width: 800px) {
  section[hero] content {
    height: 100%;
    width: 100vw;
  }
}
section[hero] content content-container {
  justify-self: center;
  grid-row: 1;
  grid-column: 1;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-bottom: 70px;
  /*go-to-bottom {
                align-self: center;
                position: absolute;
                min-width: 100%;
                bottom: 0;

                svg-container {
                    display: grid;

                    svg {
                        grid-row: 1;
                        grid-column: 1;

                        circle {
                            cursor: pointer;
                        }
                    }

                    .desktop-svg {
                        @media @tablet {
                            display: none;
                        }
                    }

                    .tablet-svg {
                        display: none;

                        @media @tablet {
                            display: block;
                        }

                        @media @mobile {
                            display: none;
                        }
                    }

                    .mobile-svg {
                        display: none;

                        @media @mobile {
                            display: block;
                        }
                    }

                    a {
                        grid-row: 1;
                        grid-column: 1;
                        margin-top: auto;
                        z-index: 2;
                        justify-self: center;
                        text-decoration: none;
                        font-size: 25px;
                        padding: 32px 64px;
                        cursor: pointer;

                        &:before {
                            position: absolute;
                            content: "\f063";
                            font-family: "Font Awesome Light";
                            display: block;
                            color: @secondaryColor;
                            font-style: initial;
                            margin-left: -10px;
                            animation: 2s goToBottom infinite;

                            @media @mobile {
                                animation: 2s goToBottomMobile infinite;
                            }

                            &:hover {
                            }
                        }

                        @media @mobile {
                            font-size: 18px;
                            padding-bottom: 5px;
                        }
                    }
                }
            }*/
}
section[hero] content content-container logo-container {
  display: grid;
}
section[hero] content content-container logo-container img {
  width: 100%;
  max-height: 250px;
  justify-self: center;
  max-width: 355px;
}
section[hero] content content-container h1 {
  text-align: center;
  line-height: 73px;
}
@media only screen and (max-width: 800px) {
  section[hero] content content-container h1 {
    line-height: 43px;
  }
}
section[hero] content content-container h1 action {
  font-family: "Absolute";
  font-size: 115px;
  font-weight: 400;
  color: #5BBCD1;
}
@media only screen and (max-width: 1100px) {
  section[hero] content content-container h1 action {
    font-size: 70px;
  }
}
@media only screen and (max-width: 800px) {
  section[hero] content content-container h1 action {
    font-size: 50px;
  }
}
section[hero] content content-container h1 seperator {
  color: #5BBCD1;
}
section[hero] content content-container p {
  font-size: 25px;
  text-align: center;
  margin: 0;
}
section[hero] content content-container p underline {
  text-decoration: underline;
}
section[hero] content content-container sponsored {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  bottom: 0;
  padding-right: 50px;
  padding-bottom: 50px;
  right: 0;
}
section[hero] content content-container sponsored p {
  text-align: end;
  font-size: 16px;
}
section[hero] content content-container sponsored img {
  padding: 5px 15px;
  border-radius: 10px;
  background: white;
  height: 63px;
  width: 215px;
}
@media only screen and (max-width: 1200px) {
  section[hero] content content-container sponsored {
    position: relative;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    padding-right: 0;
  }
  section[hero] content content-container sponsored p {
    text-align: start;
  }
}
section[hero] content content-container bottom-button {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0;
  cursor: pointer;
}
section[hero] content content-container bottom-button circle {
  position: absolute;
  border-radius: 50%;
  background-color: white;
  transition: 0.3s ease-in-out;
}
section[hero] content content-container bottom-button circle.inner {
  opacity: 1;
  width: 90px;
  height: 90px;
  left: -45px;
  top: -45px;
}
section[hero] content content-container bottom-button circle.middle {
  opacity: 0.3;
  width: 116px;
  height: 116px;
  left: -58px;
  top: -58px;
}
section[hero] content content-container bottom-button circle.outer {
  opacity: 0.1;
  width: 142px;
  height: 142px;
  left: -71px;
  top: -71px;
}
section[hero] content content-container bottom-button:hover circle.inner,
section[hero] content content-container bottom-button:hover circle.outer {
  opacity: 1;
  width: 116px;
  height: 116px;
  left: -58px;
  top: -58px;
}
section[hero] content content-container bottom-button:hover arrow {
  animation: 2s goToBottom infinite;
}
section[hero] content content-container bottom-button arrow {
  position: absolute;
  display: block;
  color: #5BBCD1;
  font-family: "Font Awesome Light";
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  font-size: 20px;
  font-weight: 800;
}
section[hero] content content-container bottom-button arrow:after {
  content: "\f063";
}
@media only screen and (max-width: 800px) {
  section[hero] content content-container bottom-button arrow {
    top: -26px;
  }
}
@keyframes goToBottom {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@keyframes goToBottomMobile {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(-18px);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-15px);
  }
}
section[eyecare] {
  display: grid;
}
section[eyecare] content {
  display: grid;
  justify-self: center;
  max-width: 1620px;
}
section[eyecare] content h2 {
  margin-top: 0;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1400px) {
  section[eyecare] content h2 {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 800px) {
  section[eyecare] content h2 {
    font-size: 30px;
  }
}
section[eyecare] content content-and-image {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auot;
  grid-column-gap: 80px;
  justify-self: center;
}
@media only screen and (max-width: 1400px) {
  section[eyecare] content content-and-image {
    grid-template-columns: auto;
    grid-template-rows: auto;
    justify-self: start;
  }
}
section[eyecare] content content-and-image content-container {
  min-width: 500px;
  grid-column: 2 / span 1;
}
@media only screen and (max-width: 1400px) {
  section[eyecare] content content-and-image content-container {
    grid-column: initial;
    min-width: initial;
  }
  section[eyecare] content content-and-image content-container:first-of-type {
    grid-row: 1 / span 1;
  }
  section[eyecare] content content-and-image content-container:last-of-type {
    grid-row: 3 / span 1;
  }
}
section[eyecare] content content-and-image content-container p {
  color: #381483;
  margin: 10px 0;
}
section[eyecare] content content-and-image content-container body-text p {
  margin: 30px 0;
}
section[eyecare] content content-and-image image-container {
  grid-row: 1 / span 3;
  text-align: center;
}
@media only screen and (max-width: 1400px) {
  section[eyecare] content content-and-image image-container {
    grid-row: 2 / span 1;
  }
}
section[eyecare] content content-and-image image-container img {
  grid-row: 2;
  justify-self: center;
  max-width: 800px;
}
section[eyecare] content content-and-image image-container img.mam-mobile {
  display: none;
}
@media only screen and (max-width: 1400px) {
  section[eyecare] content content-and-image image-container img {
    max-width: 800px;
    padding-top: 40px;
  }
}
@media only screen and (max-width: 800px) {
  section[eyecare] content content-and-image image-container img {
    width: 100%;
  }
  section[eyecare] content content-and-image image-container img.mam-desktop {
    display: none;
  }
  section[eyecare] content content-and-image image-container img.mam-mobile {
    display: block;
  }
}
section[eyecare] content p {
  color: #381483;
}
section[eyecare] content button-container {
  margin: 40px 0 0 0;
  justify-content: center;
}
@media only screen and (max-width: 1100px) {
  section[eyecare] content button-container {
    justify-self: center;
  }
}
section[schedule] {
  background-color: #f7f4fd;
}
section[schedule] h2 {
  text-align: center;
}
section[schedule] p {
  color: #381483;
  font-size: 20px;
}
section[schedule] offering-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-column-gap: 20px;
  margin: 50px auto 70px auto;
}
section[schedule] offering-container:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
  section[schedule] offering-container h3 {
    margin-bottom: 15px;
  }
}
section[schedule] offering-container > * {
  grid-column-start: 1;
  grid-column-end: 2;
}
section[schedule] offering-container img {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 4;
  height: 220px;
}
@media only screen and (max-width: 1100px) {
  section[schedule] offering-container img {
    height: 180px;
  }
}
@media only screen and (max-width: 800px) {
  section[schedule] offering-container {
    display: block;
    text-align: center;
  }
}
section[schedule] offering-container button-container {
  justify-self: left;
}
section[online-seminar-list] content {
  padding-top: 40px;
  padding-bottom: 0;
}
section[online-seminar-list] content content-container {
  max-width: 1000px;
}
section[online-seminar-list] img.header-logo {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto 30px auto;
}
section[online-seminar-list] p {
  color: #381483;
}
section[online-seminar-list] advertising-banner {
  max-width: 900px;
  display: block;
  margin: 40px auto;
}
@media only screen and (max-width: 800px) {
  section[online-seminar-list] advertising-banner {
    margin: 20px auto;
  }
}
section[online-seminar-list] advertising-banner a {
  display: contents;
}
section[online-seminar-list] advertising-banner img {
  display: block;
  width: 100%;
  max-height: 300px;
}
section[online-seminar-list] online-seminar {
  display: grid;
  margin: 40px 0;
  border-radius: 20px;
  padding: 20px;
  background-color: #f7f4fd;
}
section[online-seminar-list] online-seminar:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
  section[online-seminar-list] online-seminar {
    display: block;
    margin: 20px 0;
  }
}
section[online-seminar-list] online-seminar seminar-heading {
  position: relative;
  padding-right: 200px;
}
section[online-seminar-list] online-seminar seminar-heading h3 {
  font-weight: bold;
}
section[online-seminar-list] online-seminar seminar-heading p {
  font-weight: lighter;
  margin: 0;
}
section[online-seminar-list] online-seminar seminar-heading button-container {
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (max-width: 800px) {
  section[online-seminar-list] online-seminar seminar-heading button-container {
    position: relative;
    right: initial;
    top: initial;
  }
}
@media only screen and (max-width: 800px) {
  section[online-seminar-list] online-seminar seminar-heading {
    padding-right: 0;
    text-align: center;
  }
}
section[online-seminar-list] online-seminar session-items {
  display: block;
}
section[online-seminar-list] online-seminar session-items session {
  display: block;
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  border: solid 1px #707070;
  margin: 40px 0;
}
@media only screen and (max-width: 800px) {
  section[online-seminar-list] online-seminar session-items session {
    margin: 20px 0;
    padding-right: 20px;
    text-align: center;
  }
}
section[online-seminar-list] online-seminar session-items session * {
  color: #381483;
  font-weight: 200;
  display: block;
}
section[online-seminar-list] online-seminar session-items session h4 {
  font-size: 26px;
  margin: 0 0 20px 0;
}
Section[sponsors] content-container {
  display: block;
  width: 90%;
}
Section[sponsors] content-container company-list card-list-set {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin: 30px 0;
}
@media only screen and (max-width: 1100px) {
  Section[sponsors] content-container company-list card-list-set {
    grid-template-columns: 1fr 1fr;
  }
}
Section[sponsors] content-container company-list card-list-set card-item {
  display: block;
  border-radius: 43px;
  transition: box-shadow 0.2s, ease-in-out 0.2s;
  border: 3px solid #4D849D;
  overflow: hidden;
  max-width: 250px;
  width: 100%;
}
Section[sponsors] content-container company-list card-list-set card-item:hover {
  box-shadow: rgba(55, 134, 159, 0.2) 0px 0px 0px 8px;
  transform: scale(1.02);
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link {
  text-decoration: none;
  display: block;
  position: relative;
  height: 100%;
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link card-image-section {
  margin: 10px;
  display: block;
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link card-image-section card-image-container {
  display: block;
  position: relative;
  height: 200px;
  width: 100%;
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link card-image-section card-image-container card-image {
  display: block;
  background-color: #fff;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link card-info-section {
  display: block;
  padding: 0 20px 10px 20px;
}
Section[sponsors] content-container company-list card-list-set card-item a.card-link card-info-section prompt-text {
  font-size: 16px;
  line-height: 27px;
  color: #4D849D;
  font-weight: bold;
}
Section[sponsors] content-container company-list sponsors h3 {
  color: #fff;
  padding: 20px 40px;
  border-radius: 44px;
  margin-bottom: 0;
}
Section[sponsors] content-container company-list sponsors.platinum h3 {
  background-color: #787E8C;
}
Section[sponsors] content-container company-list sponsors.gold h3 {
  background-color: #C99F50;
}
Section[sponsors] content-container company-list sponsors.silver h3 {
  background-color: #A8A8A8;
}
Section[sponsors] content-container {
  display: block;
}
Section[sponsors] content-container .premier-sponsor-title {
  display: block;
  text-align: center;
  border: 2px solid #6426E3;
  border-radius: 43px;
  background-color: rgba(100, 38, 227, 0.2);
  margin: 40px 0;
}
Section[sponsors] content-container .premier-sponsors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  column-gap: 30px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
Section[sponsors] content-container .premier-sponsors a {
  border-radius: 43px;
  transition: box-shadow 0.2s, ease-in-out 0.2s;
  border: 3px solid #6426E3;
  overflow: hidden;
  padding: 20px;
  display: grid;
  grid-template-rows: 1fr 55px;
  text-decoration: none;
  max-width: 200px;
  text-align: center;
}
Section[sponsors] content-container .premier-sponsors a:hover {
  box-shadow: rgba(100, 38, 227, 0.2) 0px 0px 0px 8px;
  transform: scale(1.02);
}
Section[sponsors] content-container .premier-sponsors a > p {
  color: #6426E3;
  font-weight: 600;
}
Section[sponsors] content-container .premier-sponsors a .card {
  align-self: center;
}
Section[sponsors] content-container .premier-sponsors a .card img {
  max-width: 100%;
  max-height: 200px;
  width: 200px;
  object-fit: contain;
}
Section[sponsors] content-container .supporting-sponsors-title {
  display: block;
  text-align: center;
  border: 2px solid rgba(100, 38, 227, 0.4);
  border-radius: 43px;
  margin: 40px 0;
}
@media only screen and (max-width: 800px) {
  Section[sponsors] content-container .supporting-sponsors-title {
    font-size: 20px;
    line-height: 30px;
  }
}
Section[sponsors] content-container .supporting-sponsors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 30px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
}
Section[sponsors] content-container .supporting-sponsors .card {
  border-radius: 43px;
  transition: box-shadow 0.2s, ease-in-out 0.2s;
  border: 3px solid rgba(100, 38, 227, 0.4);
  overflow: hidden;
  padding: 30px;
  display: grid;
  align-items: center;
}
Section[sponsors] content-container .supporting-sponsors .card img {
  max-width: 100%;
}
@media only screen and (max-width: 1100px) {
  Section[sponsors] content-container .premier-sponsors {
    width: 75%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 30px;
  }
  Section[sponsors] content-container .supporting-sponsors {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 30px;
  }
}
@media only screen and (max-width: 800px) {
  Section[sponsors] content-container .premier-sponsors {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  Section[sponsors] content-container .supporting-sponsors {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
section[stages] {
  background-color: #f7f4fd;
}
section[stages] content-container {
  display: grid;
  max-width: 1620px;
  justify-self: center;
}
section[stages] content-container heading h2 {
  text-align: center;
}
section[stages] content-container p {
  text-align: center;
  color: #381483;
}
section[stages] content-container stage-container {
  padding-top: 40px;
}
@media only screen and (max-width: 800px) {
  section[stages] content-container stage-container {
    padding-top: 0;
  }
}
section[stages] content-container stage-container ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
}
@media only screen and (max-width: 1100px) {
  section[stages] content-container stage-container ul {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
  }
}
@media only screen and (max-width: 800px) {
  section[stages] content-container stage-container ul {
    grid-template-columns: auto;
    grid-template-rows: repeat(12, auto);
  }
}
section[stages] content-container stage-container ul li {
  display: contents;
}
section[stages] content-container stage-container ul li img {
  justify-self: center;
  width: 100%;
  max-width: 250px;
}
section[stages] content-container stage-container ul li h3 {
  text-align: center;
}
section[stages] content-container stage-container ul li p {
  padding: 0 35px;
  margin: 0;
}
@media only screen and (max-width: 1100px) {
  section[stages] content-container stage-container ul li p {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 800px) {
  section[stages] content-container stage-container ul li p {
    padding: 0;
  }
}
section[stages] content-container action-summary {
  padding-top: 80px;
}
@media only screen and (max-width: 800px) {
  section[stages] content-container action-summary {
    padding-top: 40px;
  }
}
section[stages] content-container action-summary h3 {
  padding-bottom: 10px;
  text-align: center;
}
section[stages] content-container action-summary p {
  padding: 0 420px;
}
@media only screen and (max-width: 1100px) {
  section[stages] content-container action-summary p {
    padding: 0 100px;
  }
}
@media only screen and (max-width: 800px) {
  section[stages] content-container action-summary p {
    padding: 0;
  }
}
section[stages] content-container action-summary button-container {
  display: grid;
  margin: 40px 0 0 0;
}
section[stages] content-container action-summary button-container button {
  justify-self: center;
}
section[empowering] {
  display: grid;
}
section[empowering] content {
  max-width: 1620px;
  justify-self: center;
}
section[empowering] content heading h2 {
  text-align: center;
}
section[empowering] content heading p {
  text-align: center;
  padding: 0 350px;
  color: #381483;
}
@media only screen and (max-width: 1100px) {
  section[empowering] content heading p {
    padding: 0;
  }
}
section[empowering] content content-container {
  display: block;
}
section[empowering] content content-container ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 40px;
}
@media only screen and (max-width: 800px) {
  section[empowering] content content-container ul {
    grid-template-columns: auto;
  }
}
section[empowering] content content-container ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 45px;
  justify-self: center;
}
@media only screen and (max-width: 1100px) {
  section[empowering] content content-container ul li {
    grid-template-columns: auto;
    grid-gap: 20px;
  }
}
section[empowering] content content-container ul li about {
  text-align: center;
}
@media only screen and (max-width: 1100px) {
  section[empowering] content content-container ul li img {
    justify-self: center;
  }
}
section[empowering] content content-container ul li p {
  max-width: 450px;
  color: #381483;
}
section[empowering] content content-container button-container {
  margin: 40px 0 0 0;
  display: grid;
}
section[empowering] content content-container button-container button {
  justify-self: center;
}
section[action] {
  display: none;
  background: #f7f4fd;
}
section[action] heading {
  justify-self: center;
}
section[action] heading h2 {
  text-align: center;
}
section[action] heading p {
  color: #381483;
  text-align: center;
  max-width: calc(1520px / 2 + 100px);
}
section[action] card-container {
  padding: 100px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-self: center;
  grid-gap: 70px;
}
@media only screen and (max-width: 1100px) {
  section[action] card-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 80px 30px;
  }
}
@media only screen and (max-width: 800px) {
  section[action] card-container {
    grid-template-columns: auto;
    padding: 50px 30px;
  }
}
section[action] card-container card {
  position: relative;
  max-height: 370px;
  justify-self: center;
  border-radius: 50px 50px 36px 36px;
  display: grid;
  background-color: white;
  width: 100%;
}
section[action] card-container card sponsors {
  min-height: 250px;
  margin: 30px 25px;
}
section[action] card-container card sponsors image-container {
  justify-self: center;
  align-self: center;
}
section[action] card-container card sponsor-type {
  border-radius: 0 0 30px 30px;
  max-height: 60px;
  align-self: end;
  padding: 10px 0;
}
section[action] card-container card sponsor-type h3 {
  text-align: center;
  color: white;
}
section[action] card-container card[platinum] {
  border: 3px solid #787E8C;
}
section[action] card-container card[platinum]:before {
  color: white;
  font-size: 0.7em;
  text-transform: uppercase;
  padding: 2px 10px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-clip: padding-box;
  font-weight: 700;
  position: absolute;
  font-size: 60px;
  font-family: 'Font Awesome Bold';
  content: '\f02e';
  left: 8%;
  top: -5px;
  color: #787E8C;
}
section[action] card-container card[platinum] sponsors {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
section[action] card-container card[platinum] sponsors img {
  max-width: 100%;
  max-height: 135px;
}
section[action] card-container card[platinum] sponsors img.myopia-sponsor {
  max-height: 100px;
}
section[action] card-container card[platinum] sponsors img.oculus-sponsor {
  max-height: 80px;
}
section[action] card-container card[platinum] sponsor-type {
  background-color: #787E8C;
}
section[action] card-container card[gold] {
  border: 3px solid #C99F50;
}
section[action] card-container card[gold]:before {
  color: white;
  font-size: 0.7em;
  text-transform: uppercase;
  padding: 2px 10px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-clip: padding-box;
  font-weight: 700;
  position: absolute;
  font-size: 60px;
  font-family: 'Font Awesome Bold';
  content: '\f02e';
  left: 8%;
  top: -5px;
  color: #C99F50;
}
section[action] card-container card[gold] sponsors {
  display: grid;
  grid-template-columns: auto;
}
section[action] card-container card[gold] sponsors img {
  max-width: 250px;
}
section[action] card-container card[gold] sponsor-type {
  background-color: #C99F50;
}
section[action] card-container card[silver] {
  border: 3px solid #B4B4B4;
}
section[action] card-container card[silver]:before {
  color: white;
  font-size: 0.7em;
  text-transform: uppercase;
  padding: 2px 10px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-clip: padding-box;
  font-weight: 700;
  position: absolute;
  font-size: 60px;
  font-family: 'Font Awesome Bold';
  content: '\f02e';
  left: 8%;
  top: -5px;
  color: #B4B4B4;
}
section[action] card-container card[silver] sponsors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 60px;
  margin-top: 40px;
}
section[action] card-container card[silver] sponsors img {
  max-width: 130px;
}
section[action] card-container card[silver] sponsor-type {
  background-color: #B4B4B4;
}
section[stand] {
  display: grid;
  overflow: hidden;
}
section[stand] content {
  background: url("/Content/Images/ActionMonth/stand-background.png");
  background-size: cover;
  background-repeat: no-repeat;
}
section[stand] content image-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
section[stand] content image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section[stand] content-container {
  max-width: 1000px;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
}
@media only screen and (max-width: 1100px) {
  section[stand] content-container {
    max-width: calc(100vw - 100px);
  }
}
section[stand] content-container heading {
  display: block;
}
section[stand] content-container heading h2 {
  color: white;
  padding: 0 100px;
  text-align: center;
}
@media only screen and (max-width: 1100px) {
  section[stand] content-container heading h2 {
    padding: 0 50px;
  }
}
@media only screen and (max-width: 800px) {
  section[stand] content-container heading h2 {
    padding: 0;
  }
}
section[stand] content-container heading p {
  text-align: center;
  color: white;
}
section[stand] content-container button-container {
  display: grid;
  margin-top: 40px;
}
@media only screen and (max-width: 1100px) {
  section[stand] content-container button-container {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 800px) {
  section[stand] content-container button-container {
    padding: 0;
    margin-top: 30px;
  }
}
section[stand] content-container button-container button {
  justify-self: center;
}
section[footer] content {
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
}
section[footer] content content-container a {
  color: black;
}
section[footer] content content-container img {
  width: 450px;
  height: auto;
  justify-self: center;
  grid-column: 1 / span 1;
}
@media only screen and (max-width: 800px) {
  section[footer] content content-container img {
    width: 100%;
    max-width: 450px;
  }
}
section[footer] content content-container socials-container {
  padding-top: 30px;
  display: block;
  text-align: center;
}
section[footer] content content-container socials-container a {
  text-decoration: none;
  display: inline-block;
  margin: 2px;
}
section[footer] content content-container socials-container a socials {
  background: #956EE5;
  border-radius: 50%;
  font-size: 18px;
  display: inline-block;
  height: 35px;
  width: 35px;
}
section[footer] content content-container socials-container a socials:before {
  font-family: 'Font Awesome Brands';
  color: white;
  line-height: 35px;
}
section[footer] content content-container socials-container a socials.facebook:before {
  content: "\f39e";
}
section[footer] content content-container socials-container a socials.instagram:before {
  content: '\f16d';
  /*Because instagram isn't balanced, need to boost size*/
  font-size: 22px;
}
section[footer] content content-container socials-container a socials.twitter:before {
  content: '\f099';
}
section[footer] content content-container socials-container a socials.linkedin:before {
  content: '\f0e1';
}
section[footer] content content-container span.copyright {
  display: block;
  padding-top: 30px;
  font-size: 14px;
}
@media only screen and (max-width: 1100px) {
  section[footer] content content-container {
    grid-template-columns: 1fr;
  }
  section[footer] content content-container mailing-list-container {
    grid-column: 1 / span 1;
  }
  section[footer] content content-container socials-container {
    grid-column: 1 / span 1;
  }
  section[footer] content content-container span.copyright {
    grid-column: 1 / span 1;
  }
}
.grecaptcha-badge {
  display: none;
}