#app {
  height: 100%;
  overflow-x: hidden;
}

.nav[data-v-eb0d4cd0] {
  align-items: center;
  display: flex;
  flex-direction: row;
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  height: 75px;
  justify-content: space-between;
  margin: 0 auto -75px;
  max-width: 1400px;
  padding: 0 10px;
  transition: background .3s ease-in-out;
  width: 100%;
  z-index: 10;
}
.nav .vc-logo[data-v-eb0d4cd0] {
    height: auto;
    width: 200px;
}
@media screen and (min-width: 850px) {
.nav .vc-logo[data-v-eb0d4cd0] {
        width: 350px;
}
}
.nav.scrolled[data-v-eb0d4cd0] {
    background-color: rgba(255, 255, 255, 0.7);
}
.nav__wrapper[data-v-eb0d4cd0] {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 0;
    position: relative;
    width: 100%;
}
.nav__logo[data-v-eb0d4cd0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nav__trigger-wrapper[data-v-eb0d4cd0] {
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    border-bottom: 0;
    border-top: 0;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px;
    position: fixed;
    right: 10px;
    top: 12px;
    transition: background .3s ease-in-out;
    z-index: 10;
}
@media screen and (min-width: 850px) {
.nav__trigger-wrapper[data-v-eb0d4cd0] {
        right: 40px;
        top: 25px;
}
}
.nav__trigger-wrapper.scrolled[data-v-eb0d4cd0] {
      background-color: rgba(255, 255, 255, 0.7);
}
.nav .nav__active-section[data-v-eb0d4cd0] {
    display: none;
    margin-right: 15px;
}
.nav .nav__nav-wrapper[data-v-eb0d4cd0] {
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    right: 10px;
    top: 62px;
    transform: scaleY(0);
    transform-origin: top right;
    transition: transform .3s ease-in-out;
    width: 300px;
    z-index: 10;
}
@media screen and (min-width: 850px) {
.nav .nav__nav-wrapper[data-v-eb0d4cd0] {
        right: 40px;
        top: 75px;
}
}
.nav .nav__nav-wrapper.show[data-v-eb0d4cd0] {
      pointer-events: all;
      transform: scaleY(1);
}
.nav .nav__nav-link[data-v-eb0d4cd0] {
    background-color: #C4BCBC;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: block;
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 14px;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
.nav .nav__nav-link[data-v-eb0d4cd0]:not(:last-child) {
      margin-bottom: -1px;
}
.nav .nav__nav-link[data-v-eb0d4cd0]:hover {
      background-color: #ED5923;
}
.nav .nav__nav-link--download[data-v-eb0d4cd0] {
      align-items: center;
      background-color: #3146E3;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
}
.nav .nav__nav-link--download[data-v-eb0d4cd0]:hover {
        background-color: #DD3077;
}
.nav .nav__hamburger-menu[data-v-eb0d4cd0] {
    box-sizing: border-box;
    height: 20px;
    position: relative;
    width: 24px;
}
.nav .nav__hamburger-menu--top[data-v-eb0d4cd0], .nav .nav__hamburger-menu--middle[data-v-eb0d4cd0], .nav .nav__hamburger-menu--bottom[data-v-eb0d4cd0] {
      background-color: #000;
      display: block;
      height: 3px;
      left: 50%;
      opacity: 1;
      position: absolute;
      transform: translate(-50%, -50%);
      transition: all .3s ease-in-out;
      width: 24px;
}
.nav .nav__hamburger-menu--top[data-v-eb0d4cd0] {
      top: calc(0% + 1.5px);
}
.nav .nav__hamburger-menu--middle[data-v-eb0d4cd0] {
      top: 50%;
}
.nav .nav__hamburger-menu--bottom[data-v-eb0d4cd0] {
      top: calc(100% - 1.5px);
}
.nav .nav__hamburger-menu.active .nav__hamburger-menu--top[data-v-eb0d4cd0] {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
}
.nav .nav__hamburger-menu.active .nav__hamburger-menu--middle[data-v-eb0d4cd0] {
      transform: translate(-50%, -50%) rotate(-45deg);
}
.nav .nav__hamburger-menu.active .nav__hamburger-menu--bottom[data-v-eb0d4cd0] {
      opacity: 0;
}
@media screen and (min-width: 850px) {
.nav[data-v-eb0d4cd0] {
      height: 100px;
      padding: 0 30px;
      margin-bottom: -100px;
}
.nav__wrapper[data-v-eb0d4cd0] {
        padding: 0;
}
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
.home__main-wrapper {
  height: auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  padding: 40px 20px;
}
@media screen and (min-width: 850px) {
.home__main-wrapper {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      justify-content: flex-start;
      height: 1150px !important;
      padding: 40px;
}
}
.home__flex {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 60px;
}
@media screen and (min-width: 850px) {
.home__flex {
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      margin: 0 auto;
      max-width: 1400px;
      padding-top: 0;
}
}
.home__heading {
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}
@media screen and (min-width: 850px) {
.home__heading {
      margin: auto;
      max-width: unset;
      transform: translateX(1vw);
      width: 50%;
}
}
.home__title {
  line-height: 1.125;
  width: 100%;
}
.home__title span {
    display: block;
    font-size: 50px;
}
.home__title--right {
    text-align: right;
}
.home__title--change {
    text-align: center;
}
@media screen and (min-width: 850px) {
.home__title--change {
        text-align: right;
}
}
.home__title--q1 {
    font-family: 'Albra';
    font-weight: bold;
    font-size: 30px !important;
    margin-top: 30px;
    text-align: left;
}
.home__title--q1-img {
    display: block;
    height: auto;
    margin: 0 0 0 auto;
    max-width: 200px;
    width: 100%;
}
@media screen and (min-width: 360px) {
.home__title span {
      font-size: 65px;
}
.home__title--q1 {
      font-size: 40px !important;
}
}
@media screen and (min-width: 420px) {
.home__title span {
      font-size: 80px;
}
.home__title--q1 {
      font-size: 45px !important;
}
}
@media screen and (min-width: 530px) {
.home__title span {
      font-size: 100px;
}
.home__title--q1 {
      font-size: 60px !important;
}
}
@media screen and (min-width: 850px) {
.home__title {
      margin-bottom: 50px;
      width: auto;
}
.home__title span {
        font-size: 90px;
}
.home__title--q1 {
        margin-top: auto;
}
}
@media screen and (min-width: 1200px) {
.home__title span {
      font-size: 120px;
}
.home__title--q1 {
      margin-top: auto;
}
}
@media screen and (min-width: 1400px) {
.home__title span {
      font-size: 140px;
}
}
.home__image {
  margin: 0 auto 20px;
  max-width: 500px;
  position: relative;
}
@media screen and (min-width: 850px) {
.home__image {
      flex-shrink: 0;
      margin-bottom: auto;
      max-width: unset;
      width: 560px;
}
}
.home__image-img {
  height: auto;
  width: 100%;
}
.home__badge {
  bottom: -30px;
  display: block;
  position: absolute;
  right: 30px;
  width: 28%;
}
@media screen and (min-width: 850px) {
.home__badge {
      right: 100px;
      bottom: -30px;
}
}
@media screen and (min-width: 1200px) {
.home__badge {
      right: 100px;
      bottom: -50px;
}
}

.home__ticker-wrapper[data-v-3a60a4e4] {
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  display: none;
  margin: -250px auto 0;
  padding: 20px 0;
  position: relative;
  white-space: nowrap;
  width: 100%;
}
.home__ticker-wrapper .home__ticker-download[data-v-3a60a4e4] {
    align-items: center;
    background-color: #3146E3;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 22px;
    justify-content: space-between;
    padding: 5px 10px;
    position: absolute;
    right: 30px;
    text-decoration: none;
    text-transform: uppercase;
    top: -30px;
    z-index: 2;
}
.home__ticker-wrapper .home__ticker-download span[data-v-3a60a4e4] {
      margin-right: 10px;
}
.home__ticker-wrapper .home__ticker-download[data-v-3a60a4e4]:hover {
      background-color: #DD3077;
}
.home__ticker-wrapper .overflow-hide[data-v-3a60a4e4] {
    overflow: hidden;
}
.home__ticker-wrapper .home__ticker[data-v-3a60a4e4] {
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 30px;
}
.home__ticker-wrapper .home__ticker span[data-v-3a60a4e4] {
      display: inline-block;
      margin: 0 20px;
      text-transform: uppercase;
}
.home__ticker-wrapper .home__ticker.ticker-en[data-v-3a60a4e4] {
      animation: ticker-en-data-v-3a60a4e4 10s infinite linear;
}
.home__ticker-wrapper .home__ticker.ticker-fr[data-v-3a60a4e4] {
      animation: ticker-fr-data-v-3a60a4e4 10s infinite linear;
}
.home__ticker-wrapper .home__ticker.ticker-it[data-v-3a60a4e4] {
      animation: ticker-it-data-v-3a60a4e4 10s infinite linear;
}
.home__ticker-wrapper .home__ticker.ticker-es[data-v-3a60a4e4] {
      animation: ticker-es-data-v-3a60a4e4 10s infinite linear;
}
.home__ticker-wrapper .home__ticker.ticker-de[data-v-3a60a4e4] {
      animation: ticker-de-data-v-3a60a4e4 10s infinite linear;
}
@keyframes ticker-en-data-v-3a60a4e4 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-1425px);
}
}
@keyframes ticker-fr-data-v-3a60a4e4 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-1690px);
}
}
@keyframes ticker-it-data-v-3a60a4e4 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-1580px);
}
}
@keyframes ticker-es-data-v-3a60a4e4 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-1620px);
}
}
@keyframes ticker-de-data-v-3a60a4e4 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-1260px);
}
}
@media screen and (min-width: 850px) {
.home__ticker-wrapper[data-v-3a60a4e4] {
      display: block;
}
}
@media screen and (min-width: 1200px) {
.home__ticker-wrapper[data-v-3a60a4e4] {
      margin-top: -200px;
}
}

.intro__wrapper {
  padding: 70px 0;
}
.intro__text {
  order: 0 !important;
  padding: 0 30px;
}
#introduction-page {
  margin: 0 auto;
}
#introduction-page p {
    opacity: 0;
    transform: translateY(100px);
}
.intro__title {
  font-size: 40px;
}
@media (min-width: 650px) {
.intro__title {
      font-size: 60px;
}
}
.intro__graphic {
  display: none;
}
@media (min-width: 850px) {
.intro__graphic {
      display: block;
}
}
.intro-col {
  width: 100%;
}
.fabric {
  left: -180px;
  width: 475px;
  height: 416px;
  position: relative;
  z-index: 0;
  top: -50px;
}
.intro__side-heading-wrapper {
  align-items: flex-start;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 850px) {
.intro__side-heading-wrapper {
      display: flex;
      width: 360px !important;
}
}
.intro__side-heading {
  border-bottom: 1px solid #000;
  display: inline-block;
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 60px;
  text-align: left;
  text-transform: uppercase;
}
.intro__side-heading-diff {
    border-bottom: 1px solid #000;
    display: inline-block;
    font-family: 'SSOF';
    font-size: 90px;
}
.intro__side-heading span {
    display: block;
    font-family: 'SSOF';
    font-size: 80px;
}
@media (min-width: 850px) {
.intro-col {
    width: 60%;
}
.intro__graphic {
    width: 40%;
}
.intro__summary-content {
    width: 100%;
    max-width: 500px;
}
}

#smart-community {
  overflow: hidden;
  position: relative;
  background-color: #3146E3;
  min-height: 100vh;
}
#smart-community .section-title h1 {
    margin: 40px 0;
    padding: 0 20px;
}
#smart-community .graphic-container {
    padding: 20px;
}
#smart-community .community-text {
    width: 100%;
    padding: 20px;
}
@media screen and (min-width: 850px) {
#smart-community .community-text {
        max-height: 100vh;
        overflow: auto;
}
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (orientation: landscape) {
#smart-community .float-from-left {
    left: 0;
    background-color: #C4BCBC;
    transform: translateX(-100%);
}
#smart-community .float-from-left,
  #smart-community .float-up,
  #smart-community .graphic-container {
    position: absolute;
    width: 50%;
    height: 100%;
}
#smart-community .float-up,
  #smart-community .graphic-container {
    right: 0;
}
#smart-community .float-up {
    position: absolute;
    transform: translateY(100%);
}
#smart-community .section-title {
    text-align: right;
    margin-right: -50px;
    z-index: 2;
    position: absolute;
    height: 100%;
    z-index: 3;
    width: 82%;
}
#smart-community .section-title h1 {
      font-size: 100px;
}
#smart-community .community-text {
    max-width: 65%;
}
}

#member-sales {
  height: 100vh;
  overflow: hidden;
  text-align: left;
  text-transform: uppercase;
}
.member-sales__wrapper {
  max-width: 100%;
  padding: 0 20px;
}
@media screen and (min-width: 850px) {
.member-sales__wrapper {
      max-width: unset;
}
}
.member-sales__wrapper h4 {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 30px;
  line-height: 1.25;
  text-align: left;
}
@media screen and (min-width: 850px) {
.member-sales__wrapper h4 {
      font-size: 40px;
}
}
.member-sales__number {
  font-feature-settings: "tnum";
  font-size: 120px;
  font-variant-numeric: tabular-nums;
  height: 145px;
  margin: -40px 0 10px 0;
  max-width: 380px;
  width: 100%;
}
@media screen and (min-width: 370px) {
.member-sales__number {
      font-size: 140px;
      height: 170px;
}
}
@media screen and (min-width: 850px) {
.member-sales__number {
      font-size: 160px;
      height: 200px;
}
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
.members__wrapper {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  max-width: 1200px;
  padding: 0;
}
@media screen and (min-width: 850px) {
.members__wrapper {
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
}
}
#members__summary,
#members__graphic {
  width: 100%;
}
@media screen and (min-width: 850px) {
#members__summary {
    width: 60%;
    padding: 0 40px 0 0;
}
}
@media screen and (min-width: 850px) {
#members__graphic {
    width: 40%;
}
}
#members {
  min-height: 850px;
}
@media screen and (min-width: 850px) {
#members {
      min-height: 0;
}
}
.members {
  height: auto;
  margin-top: 20px;
  padding: 50px 20px;
  min-height: 100vh;
}
@media screen and (min-width: 850px) {
.members {
      height: 100%;
      margin-top: 0;
}
}
.members__graphic {
  margin: 0 auto;
  max-width: 450px;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 850px) {
.members__graphic {
      max-width: unset;
      z-index: 1;
}
}
.members__text {
  margin-top: 100px;
  z-index: 1;
}
@media screen and (min-width: 850px) {
.members__text {
      margin-top: auto;
}
}
.members__graphic-img {
  height: auto;
  max-width: 100%;
  z-index: 1;
}
.members__graphic-bg {
  bottom: -60px;
  position: absolute;
  right: -5px;
  z-index: 0;
}
@media screen and (min-width: 850px) {
section.members.from-left {
    transform: translateX(-100%);
}
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
.shopping-socially__wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
}
@media screen and (min-width: 850px) {
.shopping-socially__wrapper {
      flex-direction: row;
      max-width: unset;
}
}
#shopping-socially__summary, #graphic {
  width: 100%;
}
.shopping-socially__graphic {
  /*background: url('static/assets/shopping-socially/shopping-socially.jpg') no-repeat center;*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
  height: 300px !important;
  padding: 20px;
  width: 100%;
}
@media screen and (min-width: 850px) {
.shopping-socially__graphic {
      height: 100% !important;
      max-height: unset;
      max-width: unset;
      padding: 50px;
}
}
.shopping-socially__graphic-inner {
  background-size: cover;
  /*background: url('static/assets/shopping-socially/shopping-socially.jpg') center / cover no-repeat;*/
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}
.shopping-socially__summary {
  height: unset !important;
  padding: 60px 20px;
}
@media screen and (min-width: 850px) {
.shopping-socially__summary {
      padding: 120px 30px;
}
}
.summary__content {
  width: 100%;
}
.summary__content p {
    width: 100%;
}
.shopping-socially__counters {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  margin: 40px 0;
}
.shopping-socially__counters:last-of-type {
    border-bottom: 2px solid #000;
}
@media screen and (min-width: 850px) {
.shopping-socially__counters {
      flex-direction: row;
}
}
.plus-symbol {
  border: solid 2px black;
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-feature-settings: "tnum";
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  height: 50px;
  margin: 50px 0;
  position: relative;
  text-align: center;
  width: 150px !important;
}
.plus-symbol:before, .plus-symbol:after {
    content: " ";
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    border: solid 2px black;
    left: 50%;
    transform: translateX(-50%);
}
.plus-symbol.clear, .plus-symbol.clear:before, .plus-symbol.clear:after {
    border: 0;
}
.plus-symbol.pink, .plus-symbol.pink:before, .plus-symbol.pink:after {
    background-color: #DD3077;
}
.plus-symbol:before {
    bottom: 99%;
    border-bottom: 0 !important;
}
.plus-symbol:after {
    top: 99%;
    border-top: 0 !important;
}
.plus-symbol.orange, .plus-symbol.orange:before, .plus-symbol.orange:after {
    background-color: #ED5923;
}
.shopping-socially__counters-caption {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 18px;
  padding: 20px 0 0;
  text-decoration: underline;
  text-transform: uppercase;
  width: 60%;
}
@media screen and (min-width: 750px) {
.shopping-socially__counters-caption {
      padding: 0 20px;
}
}
.ss__reduced-margin {
  margin-top: -50px;
  margin-bottom: 20px;
}
@media screen and (min-width: 750px) {
.ss__reduced-margin {
      margin-bottom: 0;
      margin-top: 0;
}
}
.ss__plus-container {
  width: 150px;
}
@media (min-width: 850px) {
#shopping-socially__summary, #graphic {
    width: 50%;
}
#graphic {
    order: 1;
}
.summary__content {
    max-width: 455px;
}
}

#taking-action {
  min-height: 100vh;
}
#summary {
  padding: 30px;
  order: 2;
}
#donation-tween {
  transform: rotate(-10deg);
}
#summary, #graphic {
  width: 100%;
}
.taking-action {
  overflow: hidden;
}
.taking-action__wrapper {
  padding: 20px 0;
}
@media (min-width: 850px) {
.taking-action__wrapper {
      padding: 120px 0;
}
}
.taking-action__graphic {
  padding: 0 20px;
  height: 500px;
}
@media (min-width: 850px) {
.taking-action__graphic {
      padding: 0;
}
}
.taking-action__mid-img {
  margin: 50px 0;
  position: relative;
}
.taking-action__lady-img {
  border: 1px solid #000;
  height: auto;
  max-width: 391px;
  width: 100%;
  z-index: 1;
}
.taking-action__material {
  max-height: unset;
  max-width: unset;
  position: absolute;
  right: -260px;
  top: -60px;
  transform: rotate(-8deg);
  z-index: -1;
}
@media (min-width: 850px) {
#summary, #graphic {
    width: 50%;
}
#graphic {
    order: 1;
}
#summary__content {
    width: 100%;
    max-width: 500px;
}
}

.ss__background-wrapper {
  position: relative;
}
.ss__background {
  background-attachment: fixed;
  background-image: url("../static/assets/seeking-sustainability/seeking-sustainability-bg.jpg");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
@supports (-webkit-touch-callout: none) {
.ss__background {
      background-attachment: scroll;
}
}
#seeking-sustainability-section-2 {
  background-image: url("../static/assets/gradientbg-min.jpg");
  background-attachment: fixed;
  background-size: cover;
}
@supports (-webkit-touch-callout: none) {
#seeking-sustainability-section-2 {
      background-attachment: scroll;
}
}
.panel {
  width: 100%;
  height: auto;
}
.panel .page-copy {
    max-width: 100%;
    margin: 0 auto;
}
@media screen and (min-width: 850px) {
.panel .page-copy {
        width: 500px;
}
}
.seeking-sustainability__stat {
  width: 100%;
  margin-bottom: 20px;
}
@media screen and (min-width: 750px) {
.seeking-sustainability__stat {
      width: 33.3%;
      padding: 0 15px;
      margin-bottom: 50px;
}
.seeking-sustainability__stat:first-child {
        padding-left: 0;
}
.seeking-sustainability__stat:last-child {
        padding-right: 0;
}
}
.panel.graphic-panel {
  padding: 20px;
}
.ss__title {
  font-size: 40px;
  margin-bottom: 30px;
}
@media screen and (min-width: 650px) {
.ss__title {
      font-size: 60px;
}
}
@media screen and (min-width: 850px) {
.ss__title {
      margin-bottom: 60px;
}
}
.ss__section-two {
  padding: 40px 20px;
}
@media screen and (min-width: 850px) {
.ss__section-two {
      padding: 120px 20px;
}
}
.sustainability-product__text {
  padding-bottom: 40px;
}
@media screen and (min-width: 850px) {
.sustainability-product__text {
      padding-bottom: 72px;
}
}
.sustainability-product__wrapper {
  align-items: center !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
@media screen and (min-width: 850px) {
.sustainability-product__wrapper {
      flex-direction: row-reverse !important;
      justify-content: space-between !important;
}
}
.sustainability-product__list-wrapper {
  border-top: solid 2px #000;
  padding-top: 10px;
  margin: 0 auto;
  max-width: 327px;
  width: 100%;
}
@media screen and (min-width: 850px) {
.sustainability-product__list-wrapper {
      margin: 0;
      max-width: 390px;
}
}
.sustainability-product__image-wrapper {
  text-align: center;
}
.sustainability-product__list-arrow {
  display: none;
}
@media screen and (min-width: 980px) {
.sustainability-product__list-arrow {
      display: block;
      max-width: 160px;
}
}
.sustainability-product__list-item {
  border: solid 1px;
  cursor: pointer;
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  padding: 10px 20px;
  text-transform: uppercase;
}
.sustainability-product__list-item:not(:last-child) {
    border-bottom: none;
}
.sustainability-product__list-item.active, .sustainability-product__list-item:hover {
    background-color: #3146E3;
}
@media (min-width: 850px) {
.panel,
  .panel.graphic-panel {
    width: 50%;
}
}
@media (min-width: 850px) and (orientation: landscape) {
.panel,
    .panel.graphic-panel {
      height: 100vh !important;
}
}
@media (min-width: 850px) {
.panel.graphic-panel {
    padding: 100px;
}
}
@media (min-width: 850px) and (orientation: portrait) {
.ss__blue-section {
    padding: 50px 30px !important;
}
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
#buying-better {
  padding: 20px 20px 40px;
  position: relative;
}
@media screen and (min-width: 850px) {
#buying-better {
      padding: 100px 10px 30px;
}
}
#buying-better .content-container {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (min-width: 850px) {
#buying-better .content-container {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
}
#buying-better .content-container > div {
          width: 50%;
}
}
.graphic {
  width: 100%;
  padding: 0 30px;
}
.summary {
  width: 100%;
}
.summary .page-title {
    margin-top: 20px;
}
@media screen and (min-width: 850px) {
.summary {
      padding: 0 30px;
}
.summary .page-title {
        margin-top: 0;
}
}
#girl-on-phone {
  display: none;
  margin-bottom: 100px;
}
@media screen and (min-width: 850px) {
#girl-on-phone {
      display: block;
}
}
.buying-better__mobile-image {
  display: block;
}
@media screen and (min-width: 850px) {
.buying-better__mobile-image {
      display: none;
}
}
.trends {
  margin-top: 40px;
}
@media screen and (min-width: 850px) {
.trends {
      margin-top: 0;
}
}
.lounge-lovers,
.clever-thinkers,
.responsible-dressers {
  margin-bottom: 40px;
  padding: 0 24px;
  width: 100%;
}
@media (min-width: 768px) and (orientation: landscape) {
.lounge-lovers,
    .clever-thinkers,
    .responsible-dressers {
      width: 33.3% !important;
}
}
.tracksuits-container,
.responsible-dressers-container,
.clever-thinkers-container {
  position: relative;
  margin-bottom: 20px !important;
  height: 200px;
  width: 280px;
  margin: 0 auto;
}
.tracksuits-container .ganni,
  .responsible-dressers-container .ganni,
  .clever-thinkers-container .ganni {
    height: 100%;
}
@media screen and (min-width: 850px) {
.tracksuits-container,
    .responsible-dressers-container,
    .clever-thinkers-container {
      height: 20em;
      width: 20em;
}
}
.trends__heading {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}
.tracksuits-container .trousers, .tracksuits-container .jacket {
  position: absolute;
}
.tracksuits-container .trousers {
  top: 0px;
  left: -20px;
  height: 100%;
  /*background-image: url('static/assets/buying-better/tracksuit-trousers@2x-min.png');*/
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  width: 100%;
}
.tracksuits-container .jacket {
  top: -46px;
  right: -35px;
  height: 100%;
  /*background-image: url('static/assets/buying-better/tracksuit-jacket@2x-min.png');*/
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  width: 100%;
  background-position: center;
}
.clever-thinkers-container {
  text-align: center;
}
.clever-thinkers-container .scarf {
    height: 100%;
    position: relative;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.clever-thinkers-container .glow {
    height: 100px;
    position: absolute;
    top: 24px;
    opacity: 0;
    transform: scale(1);
    z-index: 1;
    left: 50%;
}
.graphic,
.graphic__center {
  background-position: top left;
  background-size: cover;
}
.graphic {
  background-size: cover;
  min-height: 50vh;
  padding: 20px;
  order: -1;
}
.graphic__center {
  height: 100%;
  width: 100%;
}
.bb__hide-on-mob {
  display: none;
}
@media screen and (min-width: 850px) {
.bb__hide-on-mob {
      display: block;
}
}
.bb__list {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 14px;
}
.bb__asterisk {
  margin-bottom: 20px;
  padding: 0 24px;
}
@media (min-width: 850px) {
.summary, .graphic {
    width: 50%;
}
.graphic {
    top: 0;
    right: 0;
    position: absolute;
    padding: 5vh;
    background-size: auto;
    height: 100vh;
    order: 1;
}
.summary__content {
    width: 100%;
    max-width: 455px;
}
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
#thinking-circular {
  height: 100vh;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.thinking-circular-container {
  width: 300%;
}
@media screen and (min-width: 850px) {
.thinking-circular-container {
      width: 100%;
      transform: translateX(200px);
}
}
.thinking-circular-container .thinking-circular-panel {
    width: calc(100%/3);
    padding: 15px;
    position: relative;
}
@media screen and (min-width: 850px) {
.thinking-circular-container .thinking-circular-panel {
        padding: 50px;
}
}
.content-box .felix {
  width: 50%;
}
.thinking-circular-badge {
  width: 40%;
  position: absolute;
  right: -20%;
  top: -10%;
  z-index: -1;
}
.thinking-circular-fabric {
  position: absolute;
  right: -50%;
  bottom: -25%;
  z-index: -1;
  transform: rotate(-160deg);
  width: 500px;
}
.tc__attribution {
  font-weight: bold;
}
.tc__quote {
  font-style: italic;
}

#the-picture {
  overflow: hidden;
  position: relative;
  background-color: #ED5923;
  min-height: 100vh;
}
@media screen and (min-width: 850px) {
#the-picture .section-title h1 {
      margin: 40px 0;
}
}
#the-picture .section-title h1 span {
    display: block;
}
#the-picture .section-title h1 span:first-child,
  #the-picture .section-title h1 span:nth-child(2) {
    text-align: left;
    transform: translateX(-20%);
}
#the-picture .section-title h1 span:nth-child(3) {
    text-align: left;
    transform: translateX(-10%);
}
#the-picture .picture__heading {
    font-size: 50px;
}
@media screen and (min-width: 450px) {
#the-picture .picture__heading {
        font-size: 70px;
}
}
@media screen and (min-width: 1200px) {
#the-picture .picture__heading {
        font-size: 120px;
}
}
#the-picture .graphic-container {
    padding: 20px;
}
#the-picture .community-text {
    width: 100%;
    padding: 20px;
    min-height: 100%;
}
#picture-text {
  min-height: 100%;
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (orientation: landscape) {
#the-picture .float-from-left {
    left: 0;
    background-color: #C4BCBC;
    transform: translateX(-100%);
}
#the-picture .float-from-left,
  #the-picture .float-up,
  #the-picture .graphic-container {
    position: absolute;
    width: 50%;
}
#the-picture .float-from-left,
  #the-picture .graphic-container {
    height: 100%;
}
#the-picture .float-up,
  #the-picture .graphic-container {
    right: 0;
}
#the-picture .float-up {
    position: absolute;
    transform: translateY(100%);
    min-height: 100%;
}
#the-picture .section-title {
    text-align: right;
    margin-right: -50px;
    z-index: 2;
    position: absolute;
    height: 100%;
    z-index: 3;
    width: 50%;
}
#the-picture .community-text {
    max-width: 80%;
    margin: 25% auto;
}
}

#going-up {
  min-height: 100vh;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 30px;
  /*overflow: hidden;*/
}
@media screen and (min-width: 850px) {
#going-up {
      padding-top: 0;
}
}
@media screen and (max-width: 850px) {
#going-up .slide-container {
      position: relative;
      height: auto;
}
#going-up .slide-container .slide-panel {
      float: none;
      padding: 0 15px;
      margin-bottom: 30px;
}
}
@media screen and (min-width: 850px) {
.going-up-container {
    width: 400%;
}
}
.going-up-panel {
  padding: 20px;
}
@media screen and (min-width: 850px) {
.going-up-panel {
      width: 25%;
}
}
#goingup_pin,
#menswear-globe-pin {
  overflow: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
#goingup_slide_container {
  width: 400%;
  /* to contain 4 panels, each with 100% of window width */
  height: 100%;
}
#goingup_slide_container .panel {
    height: 100%;
    width: 25%;
    /* relative to parent -> 20% of 500% = 100% of window width */
    float: left;
}
#goingup_menswear_globe_container,
#goingup_womenswear_globe_container {
  width: 300%;
  /* to contain 3 panels, each with 100% of window width */
  height: 100%;
}
#goingup_menswear_globe_container .panel,
  #goingup_womenswear_globe_container .panel {
    height: 100%;
    width: 33.3%;
    /* relative to parent -> 20% of 500% = 100% of window width */
    float: left;
}
.going-up__intro-title,
.going-up__intro-text {
  margin-bottom: 30px;
}
.globe {
  border: solid 2px;
  border-radius: 50%;
  display: none;
  max-height: 80%;
}
.globe:first-child {
    display: block;
}

#the-future {
  overflow: hidden;
  position: relative;
  background-color: #DD3077;
  min-height: 100vh;
}
#the-future .section-title {
    padding: 0 20px;
}
#the-future .section-title h1 span {
      display: block;
      text-align: left;
}
@media screen and (min-width: 850px) {
#the-future .section-title h1 {
        margin: 40px 0;
}
}
#the-future .ft__align-fix {
    align-items: center;
}
#the-future .future__heading {
    font-size: 50px;
}
@media screen and (min-width: 450px) {
#the-future .future__heading {
        font-size: 70px;
}
}
@media screen and (min-width: 1200px) {
#the-future .future__heading {
        font-size: 120px;
}
}
#the-future .graphic-container {
    padding: 20px;
}
#the-future .community-text {
    align-items: flex-start;
    width: 100%;
    padding: 20px;
    min-height: 100%;
}
#future-text {
  min-height: 100%;
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (orientation: landscape) {
#the-future .float-from-left {
    left: 0;
    background-color: #C4BCBC;
    transform: translateX(-100%);
}
#the-future .float-from-left,
  #the-future .float-up,
  #the-future .graphic-container {
    position: absolute;
    width: 50%;
}
#the-future .float-from-left,
  #the-future .graphic-container {
    height: 100%;
}
#the-future .float-up,
  #the-future .graphic-container {
    right: 0;
}
#the-future .float-up {
    position: absolute;
    transform: translateY(100%);
    min-height: 100%;
}
#the-future .section-title {
    text-align: right;
    margin-right: -50px;
    z-index: 2;
    position: absolute;
    height: 100%;
    z-index: 3;
    width: 50%;
}
#the-future .community-text {
    max-width: 75%;
    margin: 25% auto;
}
}
.future__bold {
  font-weight: bold;
}

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
#vintage {
  min-height: 100vh;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.vintage-slide-container {
  width: 100%;
}
.vintage-slide-container.slide-container {
    position: relative;
}
@media screen and (min-width: 850px) {
.vintage-slide-container {
      width: 600%;
      transform: translateX(200px);
      width: 300%;
}
.vintage-slide-container.slide-container {
        position: absolute;
}
}
@media screen and (min-width: 1240px) {
.vintage-slide-container {
      width: 200%;
}
}
.vintage-slide-container .vintage-panel {
    width: 100%;
    padding: 15px;
}
.vintage-slide-container .vintage-panel.panel {
      float: none;
}
@media screen and (min-width: 850px) {
.vintage-slide-container .vintage-panel {
        float: left;
        width: calc(100%/6);
        padding: 50px;
}
}
.vintage-product-wrapper,
.vintage-product-wrapper .product-stats {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
.vintage-product-wrapper {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.vintage-product-wrapper .product-image, .vintage-product-wrapper .product-stats {
    width: 50%;
}
@media screen and (min-width: 850px) {
.vintage-product-wrapper .product-image {
      text-align: center;
}
}
.vintage-product-wrapper .product-stats {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.vintage-product-wrapper .product-stats .product-brand-name {
      font-size: 20px;
      font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
      text-transform: uppercase;
}
.vintage-product-wrapper .product-stats .product-pct {
      font-size: 40px;
      line-height: 1;
}
@media screen and (min-width: 850px) {
.vintage-product-wrapper .product-stats .product-pct {
          font-size: 50px;
}
}
@media screen and (min-width: 1200px) {
.vintage-product-wrapper .product-stats .product-pct {
          font-size: 60px;
}
}
.vintage-product-wrapper .product-image img {
    max-height: 120px;
    max-width: 210px;
}
@media screen and (min-width: 500px) {
.vintage-product-wrapper .product-image img {
        max-height: 150px;
        max-width: 150px;
}
}
@media screen and (min-width: 850px) {
.vintage-product-wrapper .product-image img {
        max-height: 180px;
        max-width: 100%;
}
}

#final-view {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
}
#final-view #final-view-text {
    width: 100%;
}
#final-view #final-view-text p {
      opacity: 0;
}
#final-view #final-view-text .community-text {
      width: 100%;
      padding: 20px;
      overflow: auto;
}
#final-view .final__quote {
    font-style: italic;
}
#final-view .final__attribution {
    font-weight: bold;
}
#final-view .graphic,
  #final-view .graphic__center {
    background-position: top left;
    background-size: cover;
}
#final-view .graphic {
    background-size: cover;
    min-height: 50vh;
    padding: 20px;
    order: -1;
    width: 100%;
    top: 0;
    height: 100%;
    right: 0;
}
@media (min-width: 850px) {
#final-view .graphic {
        background-image: none !important;
        padding: 120px 20px;
}
}
@media (max-width: 849px) and (orientation: landscape) {
#final-view .graphic {
        min-height: 400px;
}
}
#final-view .graphic__center {
    height: 100%;
    width: 100%;
}
#final-view .home__ticker-download {
    align-items: center;
    background-color: #3146E3;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 22px;
    justify-content: space-between;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 260px;
    z-index: 2;
}
#final-view .home__ticker-download span {
      margin-right: 10px;
}
#final-view .home__ticker-download:hover {
      background-color: #DD3077;
}
@media (min-width: 850px) {
#final-view #final-view-text, #final-view .graphic {
    width: 50%;
    position: absolute;
}
}

@font-face {
  font-family: 'Albra';
  src: url("./fonts/Albra-Medium.eot");
  src: url("./fonts/Albra-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/Albra-Medium.woff2") format("woff2"), url("./fonts/Albra-Medium.woff") format("woff"), url("./fonts/Albra-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'SSOF';
  src: url("./fonts/SSOF-Bold.eot");
  src: url("./fonts/SSOF-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/SSOF-Bold.woff2") format("woff2"), url("./fonts/SSOF-Bold.woff") format("woff"), url("./fonts/SSOF-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Helvetica Now Text';
  src: url("./fonts/HelveticaNowText-LtIt.eot");
  src: url("./fonts/HelveticaNowText-LtIt.eot?#iefix") format("embedded-opentype"), url("./fonts/HelveticaNowText-LtIt.woff2") format("woff2"), url("./fonts/HelveticaNowText-LtIt.woff") format("woff"), url("./fonts/HelveticaNowText-LtIt.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'Helvetica Now Text';
  src: url("./fonts/HelveticaNowText-Light.eot");
  src: url("./fonts/HelveticaNowText-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/HelveticaNowText-Light.woff2") format("woff2"), url("./fonts/HelveticaNowText-Light.woff") format("woff"), url("./fonts/HelveticaNowText-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

img {
  max-width: 100%;
  max-height: 100%; }

* {
  box-sizing: border-box; }

p {
  margin-bottom: 15px; }

/* 
*   Flexbox Containers - The 'flex' value causes an element to generate a block-level flex
*   container box.
* 
*   The 'inline-flex' value causes an element to generate a inline-level flex container box. 
*   display: flex | inline-flex
*   http://w3.org/tr/css3-flexbox/#flex-containers
*   (Placeholder selectors for each type, for those who rather @extend)
*/
/* Flexbox Direction
*
* The 'flex-direction' property specifies how flex items are placed in
* the flex container, by setting the direction of the flex container's
* main axis. This determines the direction that flex items are laid out in. 
*
* Values: row | row-reverse | column | column-reverse
* Default: row
*
* http://w3.org/tr/css3-flexbox/#flex-direction-property
*/
/*
*   Flexbox Wrap
*
*   The 'flex-wrap' property controls whether the flex container is single-line
*   or multi-line, and the direction of the cross-axis, which determines
*   the direction new lines are stacked in. 
*
*   Values: nowrap | wrap | wrap-reverse
*   Default: nowrap
*
*   http://w3.org/tr/css3-flexbox/#flex-wrap-property
*/
/*
*	Flexbox Flow (shorthand)
*	
*	The 'flex-flow' property is a shorthand for setting the 'flex-direction'
*	and 'flex-wrap' properties, which together define the flex container's
*	main and cross axes.
*	
*	Values: <flex-direction> | <flex-wrap> 
*	Default: row nowrap
*	
*	http://w3.org/tr/css3-flexbox/#flex-flow-property
*/
/*
*	Flexbox Order
*	
*	The 'order' property controls the order in which flex items appear within
*	their flex container, by assigning them to ordinal groups.
*	
*	Default: 0
*	
*	http://w3.org/tr/css3-flexbox/#order-property
*/
/*
*   Flexbox Grow
*
*   The 'flex-grow' property sets the flex grow factor. Negative numbers
*   are invalid.
*
*   Default: 0
*
*   http:*w3.org/tr/css3-flexbox/#flex-grow-property
*/
/*
*   Flexbox Shrink
*
*   The 'flex-shrink' property sets the flex shrink factor. Negative numbers
*   are invalid.
*
*   Default: 1
*
*   http:*w3.org/tr/css3-flexbox/#flex-shrink-property
*/
/*
*   Flexbox Basis
*
*   The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
*
*   Values: Like "width" 
*   Default: auto
*
*   http:*www.w3.org/TR/css3-flexbox/#flex-basis-property
*/
/*
*   Flexbox "Flex" (shorthand)
*
*   The 'flex' property specifies the components of a flexible length: the
*   flex grow factor and flex shrink factor, and the flex basis. When an
*   element is a flex item, 'flex' is consulted instead of the main size
*   property to determine the main size of the element. If an element is
*   not a flex item, 'flex' has no effect.
*
*   Values: none | <flex-grow> <flex-shrink> || <flex-basis>
*   Default: See individual properties (1 1 0).
*
*   http:*w3.org/tr/css3-flexbox/#flex-property
*/
/*
*   Flexbox Justify Content
*
*   The 'justify-content' property aligns flex items along the main axis
*   of the current line of the flex container. This is done after any flexible
*   lengths and any auto margins have been resolved. Typically it helps distribute
*   extra free space leftover when either all the flex items on a line are
*   inflexible, or are flexible but have reached their maximum size. It also
*   exerts some control over the alignment of items when they overflow the line.
*
*   Note: 'space-*' values not supported in older syntaxes.
*
*   Values: flex-start | flex-end | center | space-between | space-around
*   Default: flex-start
*
*   http:*w3.org/tr/css3-flexbox/#justify-content-property
*/
/*
*   Flexbox Align Items
*
*   Flex items can be aligned in the cross axis of the current line of the
*   flex container, similar to 'justify-content' but in the perpendicular
*   direction. 'align-items' sets the default alignment for all of the flex
*   container's items, including anonymous flex items. 'align-self' allows
*   this default alignment to be overridden for individual flex items. (For
*   anonymous flex items, 'align-self' always matches the value of 'align-items'
*   on their associated flex container.) 
*
*   Values: flex-start | flex-end | center | baseline | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-items-property
*/
/*
*   Flexbox Align Self
*
*   Values: auto | flex-start | flex-end | center | baseline | stretch
*   Default: auto
*/
/*
*   Flexbox Align Content
*
*   The 'align-content' property aligns a flex container's lines within the
*   flex container when there is extra space in the cross-axis, similar to
*   how 'justify-content' aligns individual items within the main-axis. Note,
*   this property has no effect when the flexbox has only a single line.
*
*   Values: flex-start | flex-end | center | space-between | space-around | stretch
*   Default: stretch
*
*   http:*w3.org/tr/css3-flexbox/#align-content-property
*/
/*
*   Flexbox- Start
*/
/*
*   Flexbox - Center
*/
/*
*   Flex Row End
*/
/*
*   Flex Row Space Around
*/
/*
*   Flex Row Space Between
*/
.fx-row,
.fx-col {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  align-content: stretch; }

.fxas-a {
  align-self: auto;
  -webkit-align-self: auto; }

.fxas-s {
  align-self: stretch;
  -webkit-align-self: stretch; }

.fxas-c {
  align-self: center;
  -webkit-align-self: center; }

.fxas-s {
  align-self: flex-start;
  -webkit-align-self: flex-start; }

.fxas-e {
  align-self: flex-end;
  -webkit-align-self: flex-end; }

.fxas-b {
  align-self: baseline;
  -webkit-align-self: baseline; }

.fx-row-s-s,
.fx-col-s-s {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

.fx-row-s-c,
.fx-col-s-c {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  max-width: 100%; }

.fx-row-s-e,
.fx-col-s-e {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  align-content: flex-end; }

.fx-row-c,
.fx-col-c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  align-content: stretch; }

.fx-row-c-s,
.fx-col-c-s {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

.fx-row-c-c,
.fx-col-c-c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  max-width: 100%; }

.fx-row-c-e,
.fx-col-c-e {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  align-content: flex-end; }

.fx-row-e,
.fx-col-e {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  align-content: stretch; }

.fx-row-e-s,
.fx-col-e-s {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

.fx-row-e-c,
.fx-col-e-c {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  max-width: 100%; }

.fx-row-e-e,
.fx-col-e-e {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  align-content: flex-end; }

.fx-row-sa,
.fx-col-sa {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  align-content: stretch; }

.fx-row-sa-s,
.fx-col-sa-s {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

.fx-row-sa-c,
.fx-col-sa-c {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  max-width: 100%; }

.fx-row-sa-e,
.fx-col-sa-e {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  align-content: flex-end; }

.fx-row-sb,
.fx-col-sb {
  -webkit-box-pack: space-Between;
  -ms-flex-pack: space-Between;
  -webkit-justify-content: space-Between;
  -moz-justify-content: space-Between;
  justify-content: space-Between;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
  align-content: stretch; }

.fx-row-sb-s,
.fx-col-sb-s {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  align-content: flex-start; }

.fx-row-sb-c,
.fx-col-sb-c {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  align-content: center;
  max-width: 100%; }

.fx-row-sb-e,
.fx-col-sb-e {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
  align-content: flex-end; }

.fx-row, .fx-row-s-s, .fx-row-s-c, .fx-row-s-e,
.fx-row-c, .fx-row-c-s, .fx-row-c-c, .fx-row-c-e,
.fx-row-e, .fx-row-e-s, .fx-row-e-c, .fx-row-e-e,
.fx-row-sa, .fx-row-sa-s, .fx-row-sa-c, .fx-row-sa-e,
.fx-row-sb, .fx-row-sb-s, .fx-row-sb-c, .fx-row-sb-e {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%; }

.fx-col, .fx-col-s-s, .fx-col-s-c, .fx-col-s-e,
.fx-col-c, .fx-col-c-s, .fx-col-c-c, .fx-col-c-e,
.fx-col-e, .fx-col-e-s, .fx-col-e-c, .fx-col-e-e,
.fx-col-sa, .fx-col-sa-s, .fx-col-sa-c, .fx-col-sa-e,
.fx-col-sb, .fx-col-sb-s, .fx-col-sb-c, .fx-col-sb-e {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%; }

.fx {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.fx-flex {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.fx > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%; }

.fx-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.fx-wrap-rev {
  -webkit-flex-wrap: wrap-reverse;
  -moz-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse; }

.text-center {
  text-align: center; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.fill-viewport {
  min-height: 100vh;
  width: 100%; }
  .fill-viewport > div[class^="fx-col*"] {
    height: auto; }

.content-container {
  max-width: 100%;
  width: 1200px;
  margin: 0 auto; }

.page-copy {
  padding: 15px; }

h1 {
  font-family: 'Albra';
  font-weight: bold;
  line-height: 1; }

h2 {
  font-family: 'Albra';
  font-weight: bold;
  line-height: 1; }

h3 {
  font-family: 'Albra';
  font-weight: bold;
  line-height: 1; }

h4 {
  font-family: 'Albra';
  font-weight: bold;
  line-height: 1; }

h1 {
  font-size: 35px; }
  @media screen and (min-width: 375px) {
    h1 {
      font-size: 45px; } }
  @media screen and (min-width: 850px) {
    h1 {
      font-size: 60px; } }
  h1.page-title {
    margin-bottom: 60px; }

h4 {
  font-size: 30px; }
  h4.underline {
    border-bottom: solid 1px;
    padding-bottom: 3px;
    margin-bottom: 3px; }

.ssof__outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  font-family: 'SSOF';
  text-transform: uppercase; }

body, html {
  font-family: Helvetica Neue;
  scroll-behavior: smooth; }

.section {
  height: 100%; }

body {
  line-height: 1.5;
  margin: 0;
  background-image: url("../static/assets/gradientbg-min.jpg");
  background-attachment: fixed;
  background-size: cover; }
  @supports (-webkit-touch-callout: none) {
    body {
      background-attachment: scroll !important;
      background-image: url("../static/assets/gradientbg-ios-min.jpg") !important;
      background-size: contain !important; } }

.grey-fill {
  background-color: #C4BCBC; }

.pink-fill {
  background-color: #DD3077; }

.blue-fill {
  background-color: #3146E3; }

.orange-fill {
  background-color: #ED5923; }

.white-fill {
  background-color: #fff; }

p {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
  font-size: 19px;
  line-height: 1.4; }
  p.small-text {
    font-size: 14px; }
  @media screen and (min-width: 850px) {
    p {
      margin-bottom: 28px; } }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.pane-graphic {
  text-align: center;
  padding: 50px;
  height: 100%; }

.slide-container {
  height: 100%;
  position: absolute; }
  .slide-container .slide-panel {
    height: 100%;
    float: left; }
    @media (min-width: 768px) and (orientation: landscape) {
      .slide-container .slide-panel {
        top: 0;
        left: 0; } }

@media screen and (max-width: 850px) {
  .hide-on-mobile {
    display: none !important; } }

.content-box {
  background-color: #C4BCBC;
  border: solid 2px;
  padding: 15px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 14px;
  overflow: auto; }
  .content-box h3 {
    font-size: 40px;
    margin-bottom: 20px; }
  @media screen and (min-width: 850px) {
    .content-box {
      max-height: 90vh; } }

.stats-block {
  border-top: solid 2px; }
  .stats-block h2 {
    font-size: 38px;
    width: 100%;
    margin: 20px 0; }

.internal-link {
  color: inherit;
  text-decoration: underline; }

.globe-one__item-div {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}
     
    .globe-two__item-div{
        -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}
     
     h4.globe-one__item-description-title {
    text-transform: uppercase;
}

h4.globe-two__item-description-title{
    text-transform: uppercase;
}

img.globe-two__item-img {
    max-height: none;
    
    }

.intro-col,.members__text p,.ss__blue-section,.sustainability-product__text,.stats-block p, .going-up__intro-text p, .final__quote p,.going-up__intro-text p{
    text-align: justify;
}

#future-text p,#picture-text p,#summary__content  p{
      text-align: justify;
}

.community-text p{
    text-align: justify;
}

.summary__content p{
        text-align: justify;
}
@media only screen and (max-height:43.75em) { 
    p{font-size:14px;}
}

@media only screen and (max-height:50em) { 
 p{font-size:16px;}
}

span.home__title--q1 {
    display: none;
}


	#mc_embed_signup{ text-align: center;width:100%; max-width: 1160px;margin-left:auto;margin-right:auto; padding: 0px 20px 0px 20px;
}
    input#mc-embedded-subscribe {
    align-items: center;
    background-color: #3146E3;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    flex-direction: row;
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 22px;
    justify-content: space-between;
    padding: 10px 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 260px;
    z-index: 2;
        Margin-top:24px;
}
    input#mc-embedded-subscribe:hover {
        background-color: #ED5923;
    }
    input#mce-EMAIL {
    border: 1px solid #000;
    padding: 10px 10px;
    width: 400px;
        visibility:visible
    font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
    text-transform: uppercase;
        text-align:center;
        font-size: 16px;
    }
    
    /* container */

#share {
	width: 100%;
  	margin: 50px auto 20px auto;
  	text-align: center;
}

/* buttons */

#share a {
	width: 50px;
  	height: 50px;
  	display: inline-block;
  	margin: 8px;

}
    .email_smalltext p.small-text {
    margin-bottom: 0;
}
#mc_embed_signup h1 {
    margin-bottom: 40px;
}
    
    label {
     font-family: 'Helvetica Now Text', 'Helvetica Neue', 'Helvetica', sans-serif;
        font-size: 16px;
        font-weight:300;
}
@media only screen and (max-width:500px) { 
fadeformin{
    height:auto!important;
    
    
}
    input#mce-EMAIL {
        width:100%;
    }
    #fadeformin{
    margin-top: 100px!important;
}
}