@charset "UTF-8";
/*
available fonts:
font-family: "Reddit Sans", sans-serif; (400,500,600,700)
font-family: "Red Hat Display", sans-serif; (400,500,600)
font-family: "Work Sans", sans-serif; (300,400,700)
*/

/*================================================================
  SITE BASE OVERRIDE STYLES
=================================================================*/
/*--- header: home page edits ---*/
.home h1, .home .h1-like {
  margin: 0;
  font-size: 42px;
  font-weight: 500;
  line-height: 44px;
}
.home h2, .home .h2-like {
  margin: 0 0 24px 0;
  font-size: 33px;
  line-height: 35px;
}
.home h3, .home .h3-like {
  margin: 8px 0;
  font-size: 25px;
  line-height: 29px;
}
.home h4, .home .h4-like {
  margin: 0;
  font-size: 21px;
  line-height: 24px;
}
/*--- swiper: home page edits ---*/
.swiper {
  --swiper-pagination-bullet-size: 13px;
  --swiper-pagination-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-inactive-color: rgba(0,0,0,0);
  --swiper-pagination-bottom: 0;
  --swiper-navigation-sides-offset: 5px;
}
.swiper .swiper-pagination-bullet {
  border: 1px solid var(--swiper-pagination-color);
}
.swiper .swiper-button-next, .swiper  .swiper-button-prev {
  width: 40px;
  height: 40px;
  margin: 0;
  background-color: #F9F9F9;
  border: 1px solid #D8D8D8;
  border-radius: 50%;
  top: 150px;
}
.swiper .swiper-button-next:after, .swiper .swiper-button-prev:after {
  color: #000;
  font-size: 16px;
}
.swiper .swiper-button-prev:after {
  margin-right: 2px;
}
.swiper .swiper-button-next:after {
  margin-left: 2px;
}

/*================================================================
  MMWC ORB CONTAINER STYLES
=================================================================*/
.mmwc-orb-container {
  width: 100%;
  margin: 0 0 149px 0;
  color: #000;
  overflow: hidden;
}
/*
.mmwc-orb-container.no-orbs {
  padding-top: 102px;
}
*/
/* (!) overwrite any "base styles" for this section */
.mmwc-orb-container p {
  margin: 0;
  color: #000;
}
/*------------ orb container: orbs ------------*/
.mmwc-orb-container .orbs {
  width: 100%;
  display: flex;
  justify-content: center;
}
.mmwc-orb-container .orb {
  width: 190px;
  height: 190px;
  background-color: #FFF7ED;
  border: 1px solid #EAD8DE;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*------ orbs: default style ------*/
.mmwc-orb-container .orbs .orb:first-of-type {
  margin: 191px 2.125vw 0 0;
}
.mmwc-orb-container .orbs .orb:nth-of-type(2),
.mmwc-orb-container .orbs .orb:nth-of-type(4) {
  margin: 41px 0 0 0;
}
.mmwc-orb-container .orbs .orb:nth-of-type(3) {
  margin: 0 5vw;
}
.mmwc-orb-container .orbs .orb:last-of-type {
  margin: 191px 0 0 2.125vw;
}
/*------ orbs: single-orb edits ------*/
.mmwc-orb-container.single-orb .orbs .orb:first-of-type {
  margin: 0;
}
/*------ orbs: double-orbs edits ------*/
.mmwc-orb-container.double-orbs .orbs .orb:first-of-type {
  margin: 41px 19.85vw 0 0;
}
.mmwc-orb-container.double-orbs .orbs .orb:nth-of-type(2) {
  margin: 41px 0 0 0;
}
/*------ orbs: triple-orbs edits ------*/
.mmwc-orb-container.triple-orbs .orbs .orb:first-of-type,
.mmwc-orb-container.triple-orbs .orbs .orb:last-of-type {
  margin: 41px 0 0 0;
}
.mmwc-orb-container.triple-orbs .orbs .orb:nth-of-type(2) {
  margin: 0 5vw;
}
/*------ orbs: quadruple-orbs edits ------*/
.mmwc-orb-container.quadruple-orbs .orbs .orb:nth-of-type(2) {
  margin: 41px 19.85vw 0 0;
}
.mmwc-orb-container.quadruple-orbs .orbs .orb:nth-of-type(3) {
  margin: 41px 0 0 0;
}

.mmwc-orb-container .orb .image-like {
  width: 46px;
  height: 46px;
  background: transparent no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}
/*--- orb element: pesudo block element ---*/
.mmwc-orb-container .orb .image-like:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #EAD8DE no-repeat top center;
  display: block;
  transition: opacity .3s;
  pointer-events: none;
}
.mmwc-orb-container .orb .image-like.element-initialized:before {
  opacity: 0;
}
.mmwc-orb-container .orb p {
  max-width: 148px;
  max-height: 63px;
  margin: 10px 0 0 0;
  font-family: "Red Hat Display", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*------------ orb container: orbs-slider (only for tablet/mobile) ------------*/
.mmwc-orb-container .orbs-slider {
  display: none;
}
/*------------ orb container: orb content ------------*/
.mmwc-orb-container .orb-content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* margin-top: -36px; */
  margin-top: -139px;
  padding: 112px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* background-color: rgba(255,0,0, 0.25); */
}
.mmwc-orb-container .orb-content:after {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  background-color: rgba(255,0,0, 0.25);
  background-color: #FCFCFC;
}
/*------ orb content: no-orbs edits ------*/
.mmwc-orb-container.no-orbs .orb-content {/* remove the negative margin if no orbs are included */
	margin-top: 0;
}
/*------ orb content: single-orb edits ------*/
.mmwc-orb-container.single-orb .orb-content {
  margin-top: 52px;
}
/*------ orb content: double-orbs edits ------*/
.mmwc-orb-container.double-orbs .orb-content {
  margin-top: 12px;
}
/*------ orb content: triple-orbs edits ------*/
.mmwc-orb-container.triple-orbs .orb-content {
  margin-top: 12px;
}

/*------ orb content: content background ------*/
.mmwc-orb-container .orb-content .content-background {
  width: 100%;
  height: 760px;
  background-color: #5F002F;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
/*--- content background: pesudo arch ---*/
/* this pesudo elements are postioned in a way to form an arch-like element */
.mmwc-orb-container .orb-content .content-background:before {
  content: "";
  width: calc(100% + 8px);
  height: 100%;
  background-color: #FCFCFC;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: -4px;
}
/*------ orb content: pesudo arch ------*/
/*
.mmwc-orb-container .orb-content:before, .mmwc-orb-container .orb-content:after {
  content: "";
  height: 760px;
  border-radius: 50%;
  display: block;
  position: absolute;
}
.mmwc-orb-container .orb-content:before {
  width: 100%;
  background-color: #5F002F;
  top: 0;
  left: 0;
}
.mmwc-orb-container .orb-content:after {
  width: calc(100% + 8px);
  background-color: #FCFCFC;
  top: 10px;
  left: -4px;
}
*/
.mmwc-orb-container .orb-content .content {
  width: 100%;
  max-width: 478px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}
/*--- orb content: content ---*/
/*- content: pesudo cover-up element -*/
/* positioned at the bottom of the content to cover-up any loose pixels that come from .orb-content's 'pesudo arch' element */
/*
.mmwc-orb-container .orb-content .content:after {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(255,0,0, 0.25);
}
*/
.mmwc-orb-container .orb-content .content .subheader {
  font-family: "Red Hat Display", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
}
.mmwc-orb-container .orb-content .content .h1-like {
  margin: 12px 0;
}
.mmwc-orb-container .orb-content .content p {
  text-align: center;
}
.mmwc-orb-container .orb-content .content a {
  margin: 0 0 0 5px;
  display: inline-block;
  position: relative;
  top: 3px;
}

/*================================================================
  MMWC SPHERE CONTAINER STYLES
=================================================================*/
.mmwc-sphere-container {
  width: 100%;
  /* margin: 0 0 10px 0; */
  margin: 0 0 54px 0;
  padding: 0 0 46px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* background-color: rgba(255, 0, 0, 0.25); */
}
/*--- sphere container: pesudo background circle ---*/
.mmwc-sphere-container:before {
  content: "";
  width: 665px;
  height: 665px;
  background-color: #EAD8DE;
  border-radius: 50%;
  opacity: 0.5;
  display: block;
  position: absolute;
  bottom: 0;
  left: -396px;
  z-index: 1;
  pointer-events: none;
}
/*- pesudo background circle: sphere-background-right edit -*/
.mmwc-sphere-container.sphere-background-right:before {
  left: auto;
  right: -396px;
}

/* (!) overwrite any "base styles" for this section */
.mmwc-sphere-container p {
  margin: 0;
  color: #000;
  text-align: center;
}
.mmwc-sphere-container .content {
  width: 100%;
  max-width: 745px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  /* background-color: rgba(0, 255, 0, 0.25); */
}
/*------ sphere container: sphere elements ------*/
.mmwc-sphere-container .spheres {
  width: 100%;
  margin: 36px 0;
  /* padding: 0 3.75em; */
  padding: 0 5vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 5;
  /* background-color: rgba(0, 0, 255, 0.25); */
}
/*--- sphere elements: single-sphere + double-sphere edits ---*/
.mmwc-sphere-container.single-sphere .spheres,
.mmwc-sphere-container.double-spheres .spheres {
  justify-content: center;
}
.mmwc-sphere-container .sphere {
  max-width: 352px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*--- sphere elements: double-spheres edits ---*/
.mmwc-sphere-container.double-spheres .spheres .sphere:first-of-type {
  margin-right: 2.75vw;
}
/*--- sphere elements: quadruple-spheres edits ---*/
.mmwc-sphere-container.quadruple-spheres .spheres .sphere {
  max-width: 256px;
}
.mmwc-sphere-container .sphere .sphere-image {
  max-width: 100%;
  width: 352px;
  height: 352px;
  padding: 9px 3px 0 3px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: rgba(0, 0, 255, 0.25);
}
/*--- sphere elements: quadruple-spheres edits ---*/
.mmwc-sphere-container.quadruple-spheres .spheres .sphere .sphere-image {
  max-width: 256px;
  max-height: 256px;
}
/*
.mmwc-sphere-container .sphere .sphere-image img {
  max-width: 100%;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 10;
}
*/
.mmwc-sphere-container .sphere .sphere-image a.image-like {
  width: 100%;
  height: 100%;
  background: transparent no-repeat center center;
  background-size: 100%;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 10;
  transition: background-size .2s;
}
.mmwc-sphere-container .sphere .sphere-image a.image-like:hover {
  background-size: 103%;
  transition: background-size .3s ease-out;
}
/*--- sphere elements: quadruple-spheres edits ---*/
/*
.mmwc-sphere-container.quadruple-spheres .spheres .sphere .sphere-image img {
  max-width: 256px;
  max-height: 256px;
}
*/
/*--- sphere elements: image pesudo background circles ---*/
/* this :before pesudo circle acts as the background for the sphere */
.mmwc-sphere-container .sphere .sphere-image:before,
.mmwc-sphere-container .sphere .sphere-image:after {
  content: "";
  border-radius: 50%;
  display: block;
  position: absolute;
  pointer-events: none;
}
.mmwc-sphere-container .sphere .sphere-image:before {
  width: 100%;
  height: 100%;
  background-color: #5F002F;
  top: 0;
  z-index: 1;
}
/* this :after pesudo circle acts as a placeholder for the sphere's image and is hidden behind the image when its loaded */
.mmwc-sphere-container .sphere .sphere-image:after {
  width: calc(100% - 6px);
  height: calc(100% - 9px);
  background-color: #960058;
  bottom: 0;
  z-index: 5;
}
/*--- sphere elements: default-sphere pesudo circle ---*/
.mmwc-sphere-container .sphere a.sphere-image.default-sphere:after {
  background: url('/assets/images/icon_mmwc-logo.png') #FFF7ED no-repeat center center;
  background-size: 35%;
  transition: background-size .2s;
}
.mmwc-sphere-container .sphere a.sphere-image.default-sphere:hover:after {
  background-size: 37%;
  transition: background-size .3s ease-out;
}
/*--- sphere elements: quadruple-spheres edits ---*/
.mmwc-sphere-container.quadruple-spheres .spheres .sphere a.sphere-image.default-sphere:after {
  max-width: 256px;
  max-height: 256px;
}
.mmwc-sphere-container .sphere .h3-like {
  width: 100%;
  margin: 15px 0 0 0;
  text-align: center;
}
/*------ sphere container: sphere slider ------*/
.mmwc-sphere-container .spheres-slider {
  display: none;
}

/*================================================================
  MMWC SQUARE CONTAINER STYLES
=================================================================*/
.mmwc-square-container {
  /* width: 100%; */
  width: calc(100% - 60px);
  margin: 0 auto 127px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgba(255,0,0,0.25); */
}
/* (!) overwrite any "base styles" for this section */
.mmwc-square-container p {
  margin: 0;
  color: #000;
}
.mmwc-square-container a.button-like {
  margin: 0;
}
/*------ square container: content ------*/
.mmwc-square-container .content {
  max-width: 745px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  /* background-color: rgba(0, 255, 0, 0.25); */
}
.mmwc-square-container .content p {
  text-align: center;
}
/*------ square container: squares ------*/
.mmwc-square-container .squares {
  width: calc(100% - 56px);
  max-width: 850px;
  margin: 24px 0 36px 0;
  display: flex;
  justify-content: space-between;
  /* background-color: rgba(0,255,0,0.25); */
}
.mmwc-square-container .square {
  max-width: 112px;
}
/*--- squares: image ---*/
.mmwc-square-container .square .square-image {
  width: 112px;
  height: 137px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*- image: default-state -*/
.mmwc-square-container .square .square-image.default-state {
  background-size: 50%;
}
.mmwc-square-container .square .square-image img {
  max-width: 112px;
  max-height: 137px;
  display: block;

}
.mmwc-square-container .square p {
  margin: 14px 0 0 0;
  font-family: "Reddit Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;

  max-height: 63px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*------ square container: squares-slider ------*/
.mmwc-square-container .squares-slider {
  width: 100%;
  margin: 30px auto;
  padding: 0 15px;
  display: none;
}
.mmwc-square-container .squares-slider:before, .mmwc-square-container .squares-slider:after {
  content: "";
  width: 15px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  z-index: 10;
}
.mmwc-square-container .squares-slider:before {
  background-image: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  left: 0;
}
.mmwc-square-container .squares-slider:after {
  background-image: linear-gradient(to left, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  right: 0;
}
/*--- squares-slider: swiper-slide ---*/
.mmwc-square-container .squares-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*--- squares-slider: buttons ---*/
.mmwc-square-container .squares-slider .swiper-button-next, .mmwc-square-container .squares-slider .swiper-button-prev {
  top: 58px;
}

/*================================
  MMWC POSTER OVERWRITES
================================*/
.home .mmwc-poster {
  width: calc(100% + 30px);
  left: -15px;
}
/* (!) overwrite any "base styles" for this element */
.home .mmwc-poster h3 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

/*================================================================
  MMWC RECTANGLE CONTAINER OVERWRITES
=================================================================*/
.mmwc-rectangle-container {
  margin: 0 0 149px 0;
}
/*------ rectangle container: rectangles ------*/
.mmwc-rectangle-container .rectangles {
  width: calc(100% - 88px);
  margin: 0 auto 40px auto;
  flex-wrap: initial;
  justify-content: center;
}
.mmwc-rectangle-container .rectangles-slider {
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0 30px 50px 30px;
  display: none;

  --swiper-navigation-sides-offset: 10px;
}
.mmwc-rectangle-container .rectangles-slider:before, .mmwc-rectangle-container .rectangles-slider:after {
  content: "";
  width: 15px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  z-index: 10;
}
.mmwc-rectangle-container .rectangles-slider:before {
  background-image: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  left: 0;
}
.mmwc-rectangle-container .rectangles-slider:after {
  background-image: linear-gradient(to left, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  right: 0;
}
.mmwc-rectangle-container .rectangles-slider .swiper-button-next, .mmwc-rectangle-container .rectangles-slider .swiper-button-prev {
  top: 85px;
}
.mmwc-rectangle-container .rectangles-slider .swiper-slide {
  display: flex;
  justify-content: center;
}
.mmwc-rectangle-container .rectangles-slider .rectangle {
  width: 100%;
  max-width: 302px;
}
.mmwc-rectangle-container .rectangles-slider .rectangle .rectangle-image {
  width: 302px;
  height: 205px;
}
.mmwc-rectangle-container .rectangles-slider .rectangle .rectangle-image.default-state {
  background-size: 35%;
}

/*================================================================
  MMWC ENCOURAGE ORBS CONTAINER STYLES
=================================================================*/
.mmwc-encourage-orbs-container {
  width: 100%;
  margin: 0 0 150px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgba(255,0,0,0.25); */
}
/* (!) overwrite any "base styles" for this section */
.mmwc-encourage-orbs-container p {
  margin: 0;
}
.mmwc-encourage-orbs-container a.button-like {
  margin: 0;
}
/*------ encourage orbs container: orbs ------*/
.mmwc-encourage-orbs-container .encourage-orbs {
  width: 100%;
  padding: 0 7.15vw;
  display: flex;
  justify-content: space-between;
  /* background-color: rgba(0,0,255,0.25); */
}
/*--- orbs: single-orb + double-orbs edits ---*/
.mmwc-encourage-orbs-container.single-orb .encourage-orbs,
.mmwc-encourage-orbs-container.double-orbs .encourage-orbs {
  justify-content: center;
}
/*--- orbs: orb element ---*/
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgba(0,0,255,0.25); */
}
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content {
  width: 302px;
  height: 302px;
  margin: 0 0 25px 0;
  padding: 38px 41px;
  border-radius: 50%;
  background-color: #FFF7ED;
  border: 1px solid #EAD8DE;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/*- orb element: double-orbs edits -*/
.mmwc-encourage-orbs-container.double-orbs .encourage-orbs .encourage-orb:first-of-type {
  margin-right: 7vw;
}
/*
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content img {
  max-width: 45px;
  max-height: 46px;
  margin: 0 0 26px 0;
}
*/
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content .image-like {
  width: 46px;
  height: 46px;
  margin: 0 0 26px 0;
  background: transparent no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}
/*- orb element: pesudo block element -*/
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content .image-like:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #EAD8DE no-repeat top center;
  display: block;
  transition: opacity .3s;
  pointer-events: none;
}
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content .image-like.element-initialized:before {
  opacity: 0;
}
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content .h3-like {
  margin: 0;
}
.mmwc-encourage-orbs-container .encourage-orbs .encourage-orb .content p {
  margin: 8px 0 0 0;
  font-size: 20px;
  line-height: 23px;
  text-align: center;
}

/*================================================================
  MMWC ENGAGEMENT ORBS CONTAINER STYLES
=================================================================*/
.mmwc-engagement-container {
  width: calc(100% - 82px);
  margin: 0 auto 150px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgba(255,0,0,0.25); */
}
/* (!) overwrite any "base styles" for this section */
.mmwc-engagement-container .h1-like {
  margin: 0 0 15px 0;
}
.mmwc-engagement-container p {
  margin: 0;
  color: #000;
  text-align: center;
}
.mmwc-engagement-container button {
  margin: 0;
}
.mmwc-engagement-container form {
  width: 100%;
  max-width: 560px;
  margin: 37px 0 42px 0;
}
.mmwc-engagement-container form fieldset {
  margin: 0 0 9px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mmwc-engagement-container form fieldset:last-of-type {
  margin: 0;
}
.mmwc-engagement-container form fieldset label {
  color: #000;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
}
.mmwc-engagement-container form fieldset input {
  width: calc(100% - 124px);
}

/*================================================================
  MMWC TILE CONTAINER STYLES
=================================================================*/
.mmwc-tile-container {
  width: calc(100% - 30px);
  margin: 0 auto 150px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: rgba(255,0,0,0.25); */
}
.mmwc-tile-container .content {
  width: 100%;
  max-width: 745px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mmwc-tile-container .content p {
  /* margin: 0; */
  text-align: center;
}
/*------ tile container: swiper ------*/
.mmwc-tile-container .swiper {
  width: 100%;
  max-width: 1170px;
  padding: 0 15px;
  /* background-color: rgba(0,0,255,0.25); */

  --swiper-navigation-top-offset: 70px;
  --swiper-navigation-sides-offset: 1px;
}
.mmwc-tile-container .swiper:before, .mmwc-tile-container .swiper:after {
  content: "";
  width: 15px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  z-index: 10;
}
.mmwc-tile-container .swiper:before {
  background-image: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  left: 0;
}
.mmwc-tile-container .swiper:after {
  background-image: linear-gradient(to left, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  right: 0;
}
/*--- swiper: buttons ---*/
.mmwc-tile-container .swiper .swiper-button-next, .mmwc-tile-container .swiper .swiper-button-prev {
  width: 36px;
  height: 36px;
  margin: 0;
  background-color: #F9F9F9;
  border: 1px solid #E6D5CD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 78px;
}
.mmwc-tile-container .swiper .swiper-button-next:after, .mmwc-tile-container .swiper .swiper-button-prev:after {
  color: #000;
  font-size: 14px;
}
/*- buttons: swiper-button-lock edit -*/
.mmwc-tile-container .swiper .swiper-button-lock {
  display: none;
}
.mmwc-tile-container .swiper .swiper-slide {
  max-width: 258px;
  display: flex;
  justify-content: center;
}
.mmwc-tile-container .tile {
  max-width: 258px;
}
.mmwc-tile-container .tile .image-like {
  width: 100%;
  height: 177px;
  background: transparent no-repeat center center;
  background-size: contain;
  display: block;
  position: relative;
}
/*- slide image-like: pesudo block element -*/
.mmwc-tile-container .tile .image-like:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #960058;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all;
  transition: opacity .3s;
}
.mmwc-tile-container .tile .image-like.element-initialized:before {
  opacity: 0;
}
.mmwc-tile-container .tile h4 {
  margin-top: 18px;
  text-align: center;
}
.mmwc-tile-container .swiper .swiper-pagination {
  display: none;
}

/*================================================================================================================================
  MEDIA QUERIES
=================================================================================================================================*/
/*================ media queries: below max body width (1440px) ================*/
@media only screen and (max-width: 1440px) {
  .home .mmwc-poster {
    width: 100%;
    left: auto;
  } 
}

/*================ media queries: in-between body max-width and body min-width (1200px) ================*/
@media only screen and (max-width: 1200px) {
  /*------------ @1200 - mmwc-sphere-container ------------*/
  .mmwc-sphere-container {}
  .mmwc-sphere-container .sphere {
    max-width: 300px;
  }
  .mmwc-sphere-container .sphere .sphere-image {
    width: 300px;
    height: 300px;
  }
  /*------ @1200 - mmwc-sphere-container: quadruple-spheres edits ------*/
  .mmwc-sphere-container.quadruple-spheres .spheres .sphere .sphere-image {
    width: 225px;
    height: 225px;
  }

  /*------ @1200 - encourage orbs container ------*/
  .mmwc-encourage-orbs-container .encourage-orbs {
    padding: 0 5vw;
  }

  /*------------ @1200 - rectangle container ------------*/
  /*--- @1200 - rectangle container: rectangle ---*/
  .mmwc-rectangle-container .rectangles .rectangle {
    max-width: 290px;
  }
  .mmwc-rectangle-container .rectangles .rectangle .rectangle-image {
    width: 290px;
    height: 209px;
  }
  .mmwc-rectangle-container .rectangles .rectangle .rectangle-image.default-state {
    background-size: 35%;
  }
}

/*================ media queries: start tablet styles (1023px) ================*/
@media only screen and (max-width: 1023px) {
  /*------------ @1023 - mmwc-orb-container ------------*/
  .mmwc-orb-container {
    width: calc(100% - 50px);
    margin: 0 auto 98px auto;
  }
  .mmwc-orb-container .orbs {
    /* justify-content: space-between; */
  }
  .mmwc-orb-container .orbs .orb {
    width: 137px;
    height: 137px;
  }
  .mmwc-orb-container .orbs .orb:first-of-type {
    /* margin: 118px 2.125vw 0 0; */
    margin: 118px 0 0 0;
  }
  .mmwc-orb-container .orbs .orb:nth-of-type(2), .mmwc-orb-container .orbs .orb:nth-of-type(4) {
    margin: 28px 0 0 0;
  }
  .mmwc-orb-container .orbs .orb:nth-of-type(3) {
    /* margin: 0; */
    margin: 0 3.5vw;
  }
  .mmwc-orb-container .orbs .orb:last-of-type {
    /* margin: 118px 0 0 2.125vw; */
    margin: 118px 0 0 0;
  }
  .mmwc-orb-container .orb-content .content-background {
    width: calc(100vw - 50px);
    height: calc(100vw - 50px);
    left: calc(50% - (50vw - 25px));
  }
  /*
  .mmwc-orb-container .orb-content:after {
    width: calc((100vw - 50px) + 12px);
    height: calc(100vw - 50px);
    left: calc((50% - (50vw - 25px)) - 6px);
  }
  */
  .mmwc-orb-container .orbs .orb .image-like {
    width: 36px;
    height: 36px;
  }
  .mmwc-orb-container .orbs .orb p {
    max-width: calc(100% - 15px);
    max-height: 51px;
    margin: 7px 0 0 0;
    font-size: 15px;
    line-height: 17px;
  }
  .mmwc-orb-container .orb-content {
    margin-top: -85px;
    padding: 79px 0 0 0;
  }

  /*------------ @1023 - mmwc-sphere-container ------------*/
  .mmwc-sphere-container {
    width: 100%;
    margin: 0 auto 72px auto;
    padding: 0 15px;
  }
  .mmwc-sphere-container .spheres {
    display: none;
  }
  .mmwc-sphere-container .sphere .sphere-image {

  }
  /*------ @1023 - mmwc-sphere-container: spheres-slider ------*/
  .mmwc-sphere-container .spheres-slider {
    width: 100%;
    margin: 42px 0 12px 0;
    padding: 0 0 37px 0;
    display: block;
  }
  /*--- @1023 - spheres-slider: pesudo side panels gradient element ---*/
  .mmwc-sphere-container .spheres-slider:before, .mmwc-sphere-container .spheres-slider:after {
    content: "";
    width: 15px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: 10;
  }
  .mmwc-sphere-container .spheres-slider:before {
    background-image: linear-gradient(to right, rgba(243, 234, 237, 1) 0%, rgba(243, 234, 237, 0) 100%);
    left: 0;
  }
  .mmwc-sphere-container .spheres-slider:after {
    background-image: linear-gradient(to left, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
    right: 0;
  }
  /*- @1023 - pesudo side panels gradient element: sphere-background-right edits -*/
  .mmwc-sphere-container.sphere-background-right .spheres-slider:before {
    background-image: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(252, 252, 252, 0) 100%);
  }
  .mmwc-sphere-container.sphere-background-right .spheres-slider:after {
    background-image: linear-gradient(to left, rgba(243, 234, 237, 1) 0%, rgba(243, 234, 237, 0) 100%);
  }
  .mmwc-sphere-container .spheres-slider .swiper-slide {
    width: 100%;
    /* max-width: 100vw; */
    display: flex;
    justify-content: center;
  }
  /*
  .mmwc-sphere-container .content {
    width: calc(100% - (25px / 2));
  }
  */
  /*------------ @1023 - mmwc-encourage-orbs-container ------------*/
  .mmwc-encourage-orbs-container {
    /* display: none; */
  }
  .mmwc-encourage-orbs-container .encourage-orbs {
    flex-wrap: wrap;
    column-gap: 33px;
    row-gap: 33px;
    justify-content: center;
  }

  /*------------ @1023 - rectangle container ------------*/
  .mmwc-rectangle-container .rectangles {
    width: calc(100% - 50px);
    column-gap: 20px;
    justify-content: center;
  }
  .mmwc-rectangle-container .rectangles .rectangle {
    max-width: 226px;
  }
  .mmwc-rectangle-container .rectangles .rectangle .rectangle-image {
    width: 226px;
    height: 163px;
  }

  /*------------ @1023 - mmwc-engagement-container ------------*/
  .mmwc-engagement-container {}
  .mmwc-engagement-container form fieldset {
    margin: 0 0 20px 0;
    flex-wrap: wrap;
  }
  .mmwc-engagement-container form fieldset label {
    width: 100%;
    margin: 0 0 8px 0;
  }
  .mmwc-engagement-container form fieldset input {
    width: 100%;
  }
}

/*================ media queries: in-between tablet and mobile (768px) ================*/
@media only screen and (max-width: 768px) {
  /*------------ @768 - rectangle container ------------*/
  .mmwc-rectangle-container .rectangles {
    display: none;
  }
  .mmwc-rectangle-container .rectangles-slider {
    display: block;
  }
}

/*================ media queries: in-between tablet and mobile (685px) ================*/
@media only screen and (max-width: 685px) {
  .home h1, .home .h1-like {
    text-align: center;
  }

  /*------------ @685 - mmwc-orb-container ------------*/
  .mmwc-orb-container {
    margin: 0 auto 98px auto;
  }
  /*------ @685 - orb container: orbs (only for desktop) ------*/
  .mmwc-orb-container .orbs {
    display: none;
  }
  /*------ @685 - orb container: orbs-slider ------*/
  .mmwc-orb-container .orbs-slider {
    /* padding: 37px 0 19px 0; */
    padding-top: 37px;
    display: block;
    position: relative;
    z-index: 5;
  }
  .mmwc-orb-container .orbs-slider:before, .mmwc-orb-container .orbs-slider:after {
    content: "";
    width: 25px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: 10;
    pointer-events: none;
  }
  .mmwc-orb-container .orbs-slider:before {
    background-image: linear-gradient(to right, rgba(252,252,252,1) 0%, rgba(252,252,252,0) 100%);
    left: 0;
  }
  .mmwc-orb-container .orbs-slider:after {
    background-image: linear-gradient(to left, rgba(252,252,252,1) 0%, rgba(252,252,252,0) 100%);
    right: 0;
  }
  .mmwc-orb-container .orbs-slider .swiper-slide {
    /* min-width: 170px; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* background-color: rgba(255,0,0,0.25); */
  }
  .mmwc-orb-container .orbs-slider .orb {
    /* min-width: 170px; */
    width: 170px;
    /* min-height: 170px; */
    height: 170px;
    transform: translateY(0);
    transition: transform .5s .1s;
  }
  .mmwc-orb-container .orbs-slider .swiper-slide-active {
    z-index: 5;
  }
  .mmwc-orb-container .orbs-slider .swiper-slide-active .orb {
    transform: translateY(-37px);
  }
  /*------ @685 - orb container: orbs-content ------*/
  .mmwc-orb-container .orb-content {
    margin-top: 23px;
  }

  /*------------ @685 - square container ------------*/
  /*------ @685 - square container: squares ------*/
  .mmwc-square-container .squares {
    display: none;
  }
  /*------ @685 - square container: squares-slider ------*/
  .mmwc-square-container .squares-slider {
    display: block;
  }
}

/*================ media queries: mobile (500px) ================*/
@media only screen and (max-width: 500px) {
  /*------------ @500 - mmwc-tile-container ------------*/
  .mmwc-tile-container .swiper {
    padding: 0 0 40px 0;
  }
  .mmwc-tile-container .swiper .swiper-slide {
    max-width: initial;
  }
  .mmwc-tile-container .swiper .swiper-pagination {
    display: block;
  }
}