/*
   imported from mobile-page.scss 
*/

/*
  When adding a color, please add it to the :export section at the end of this file.
  If you need to add a new section/type of color, you can add the section title to the :export by pre-prending it with an underscore.
*/
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* Primary Colors */
/* Secondary Colors */
/* Gradients */
/* Transparencies */
/* stylelint-disable */

/* stylelint-enable */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* Line Heights */
/* stylelint-disable */

/* stylelint-enable */
/**
  If making changes to this file, please make sure the changes are reflected on the :export section at the end of the file.
 */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* stylelint-disable */

/* stylelint-enable */
/* Base Styles */
.mobile-page__page___1eDYv {
  height: 100%;
  overflow-y: auto;
  width: 100%; }

.mobile-page__pageContent___1XkN7 {
  height: 100%;
  padding: 0 12px;
  position: relative;
  width: 100%;
  z-index: 1; }

.mobile-page__headerContainer___2HMDl {
  height: 240px;
  z-index: 1; }

.mobile-page__headerGradientContainer___DYe9U {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 0;
  align-items: center;
  background-image: linear-gradient(45deg, #4392D7 0%, #00E3C6 100%);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding-top: 90px; }
  .mobile-page__headerGradientContainer___DYe9U > h1 {
    margin-top: 12px; }

.mobile-page__headerScrollContainer___i-IV3 {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
  align-items: flex-end;
  background-image: linear-gradient(to bottom, #607997 50%, transparent 50%);
  background-position: bottom;
  background-size: 100% 200%;
  color: transparent;
  display: flex;
  height: 110px;
  justify-content: space-between;
  padding: 0 24px 20px;
  width: 100%; }
  .mobile-page__headerScrollContainer___i-IV3 > h1 {
    line-height: calc(28px + 9 * (100vw - 320px) / 1120);
    -webkit-user-select: none; }
  .mobile-page__headerScrollContainer___i-IV3 svg > path {
    fill: #FFFFFF; }

/* Animation Styles */
.mobile-page__start-transition___2lltj.mobile-page__headerContainer___2HMDl {
  height: 110px;
  transition: height 0.5s; }

.mobile-page__start-transition___2lltj .mobile-page__headerScrollContainer___i-IV3 {
  background-position: top;
  color: #FFFFFF;
  transition: background-position 0.5s, color 0.5s; }
  .mobile-page__start-transition___2lltj .mobile-page__headerScrollContainer___i-IV3 > h1 {
    -webkit-user-select: text; }

.mobile-page__start-transition___2lltj .mobile-page__headerGradientContainer___DYe9U {
  opacity: 0;
  transition: opacity 0.5s; }

.mobile-page__reset-transition___Xc4ly.mobile-page__headerContainer___2HMDl {
  transition: height 0.5s; }

.mobile-page__reset-transition___Xc4ly .mobile-page__headerScrollContainer___i-IV3 {
  transition: background-position 0.5s, color 0.5s; }

.mobile-page__reset-transition___Xc4ly .mobile-page__headerGradientContainer___DYe9U {
  transition: opacity 0.5s ease-in; }