/*** BEGIN JEET.SCSS ***/
/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/* @import '_settings'; */
/* @import '_functions'; */
/* @import '_grid'; */
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
    * List functions courtesy of the wonderful folks at Team Sass.
    * Check out their awesome grid: Singularity.
    */
/**
    * Get  percentage from a given ratio.
    * @param {number} [$ratio=1] - The column ratio of the element.
    * @returns {number} - The percentage value.
    */
/**
    * Work out the column widths based on the ratio and gutter sizes.
    * @param {number} [$ratios=1] - The column ratio of the element.
    * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
    * @returns {list} $width $gutter - A list containing the with and gutter for the element.
    */
/**
    * Get the set layout direction for the project.
    * @returns {string} $direction - The layout direction.
    */
/**
    * Replace a specified list value with a new value (uses built in set-nth() if available)
    * @param {list} $list - The list of values you want to alter.
    * @param {number} $index - The index of the list item you want to replace.
    * @param {*} $value - The value you want to replace $index with.
    * @returns {list} $list - The list with the value replaced or removed.
    * @warn if an invalid index is supplied.
    */
/**
    * Reverse a list (progressively enhanced for Sass 3.3)
    * @param {list} $list - The list of values you want to reverse.
    * @returns {list} $result - The reversed list.
    */
/**
    * Get the opposite direction to a given value.
    * @param {string} $dir - The direction you want the opposite of.
    * @returns {string} - The opposite direction to $dir.
    * @warn if an incorrect string is provided.
    */
/**
    * Style an element as a column with a gutter.
    * @param {number} [$ratios=1] - A width relative to its container as a fraction.
    * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
    * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
    * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
    * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
    */
/**
    * An alias for the column mixin.
    * @param [$args...] - All arguments get passed through to column().
    */
/**
    * Get the width of a column and nothing else.
    * @param {number} [$ratios=1] - A width relative to its container as a fraction.
    * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
    */
/**
    * Get the gutter size of a column and nothing else.
    * @param {number} [ratios=1] - A width relative to its container as a fraction.
    * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
    */
/**
    * An alias for the column-width function.
    * @param [$args...] - All arguments get passed through to column().
    */
/**
    * An alias for the column-gutter function.
    * @param [$args...] - All arguments get passed through to column().
    */
/**
    * Style an element as a column without any gutters for a seamless row.
    * @param {number} [$ratios=1] - A width relative to its container as a fraction.
    * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
    * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
    * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
    */
/**
    * Reorder columns without altering the HTML.
    * @param {number} [$ratios=0] - Specify how far along you want the element to move.
    * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
    * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
    */
/**
    * Reset an element that has had shift() applied to it.
    */
/**
    * View the grid and its layers for easy debugging.
    * @param {string} [$color=black] - The background tint applied.
    * @param {boolean} [$important=false] - Whether to apply the style as !important.
    */
/**
    *  Alias for edit().
    */
/**
    * Horizontally center an element.
    * @param {number} [$max-width=1410px] - The max width the element can be.
    * @param {number} [$pad=0] - Specify the element's left and right padding.
    */
/**
    * Uncenter an element.
    */
/**
    * Stack an element so that nothing is either side of it.
    * @param {number} [$pad=0] - Specify the element's left and right padding.
    * @param {boolean/string} [$align=false] - Specify the text align for the element.
    */
/**
    * Unstack an element.
    */
/**
    * Center an element on either or both axes.
    * @requires A parent container with relative positioning.
    * @param {string} [$direction=both] - Specify which axes to center the element on.
    */
/**
    * Apply a clearfix to an element.
    */
/*** END JEET.SCSS ***/
#diamond-3 {
  border-left: 2px solid #54dddd;
  border-top: 2px solid rgba(84, 221, 221, 0.25);
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}

#diamond-4 {
  border-top: 2px solid #54dddd;
  border-right: 2px solid rgba(84, 221, 221, 0.25);
  border-bottom: 2px solid rgba(84, 221, 221, 0.25);
  border-left: 2px solid transparent;
}

#diamond-1 {
  border-left: 2px solid #54dddd;
  border-top: 2px solid rgba(84, 221, 221, 0.25);
  border-bottom: 2px solid rgba(84, 221, 221, 0.25);
  border-right: 2px solid transparent;
}

#diamond-2 {
  border-bottom: 2px solid #54dddd;
  border-right: 2px solid rgba(84, 221, 221, 0.25);
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}

.diamond-grid {
  width: 1000px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  margin-top: 100px;
  height: 631px;
  transform: rotate(45deg);
  display: flex !important;
  flex-wrap: wrap;
  align-content: flex-start;
}
.diamond-grid .diamond {
  width: calc(calc(
  631px - 48px
) / 2);
  height: calc(calc(
  631px - 48px
) / 2);
  padding: 8px;
}
.diamond-grid .diamond:nth-child(7) {
  position: relative;
  left: 34.3333333333%;
}
.diamond-grid .diamond.blank-diamond {
  opacity: 0;
}
.diamond-grid .diamond .diamond-background {
  background: #1b2f54;
  width: 100%;
  height: 100%;
}
.diamond-grid .diamond .diamond-contents {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transform: rotate(-45deg);
}
.diamond-grid .diamond-title {
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 18px;
  color: #54dddd;
  font-weight: bold;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
.diamond-grid .diamond-body {
  font-size: 16px;
  font-weight: light;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

#diamond-container {
  background: #173863;
  min-height: 928px;
  position: relative;
}

.background-texture {
  position: absolute;
}
.background-texture img {
  max-width: 25vw;
}
.background-texture-top {
  top: 0px;
  right: 5vw;
}
.background-texture-bottom {
  bottom: 0px;
  left: 5vw;
}

#forum-text-box {
  overflow: hidden;
  background: rgb(54, 155, 208);
  background: linear-gradient(90deg, rgb(54, 155, 208) 0%, rgb(0, 182, 185) 100%);
  font-size: 48px;
  line-height: 72px;
  padding: 20px 0;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}

@media screen and (min-width: 1025px) and (max-width: 1065px) {
  .diamond-aligner {
    transform: translateX(-20px);
  }
}
@media screen and (max-width: 1024px) {
  #forum-text-box {
    font-size: 48px;
    line-height: 72px;
  }
}
@media screen and (max-width: 767.7px) {
  #forum-text-box {
    font-size: 32px;
    line-height: 48px;
  }
}
.product-banner-hero-with-video-background {
  position: relative;
  overflow: hidden;
}
.product-banner-hero-with-video-background #product-banner-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.product-banner-hero-with-video-background #product-banner-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#tmf-registration-box h2 {
  font-weight: 300;
  font-size: 38px;
  line-height: 56px;
  color: #173863;
}
#tmf-registration-box h3 {
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: #707070;
}
#tmf-registration-box p {
  font-weight: 300;
  font-size: 26px;
  line-height: 32px;
  color: #707070;
  max-width: 400px;
  margin: 0 auto;
}

.diamond-aligner {
  width: 1034px;
  margin: 0 auto;
  overflow: hidden;
}
.diamond-aligner .diamond-grid {
  margin-left: 43px;
}

/* TABLET */
@media screen and (max-width: 1024px) {
  #diamond-container h2 {
    margin-bottom: 47px;
  }

  .diamond-aligner {
    width: 620px;
    height: 1032px;
    padding-top: 196px;
    margin: 0 auto;
  }
  .diamond-aligner .diamond-grid {
    margin-left: -90px;
  }

  .diamond-grid {
    width: 1012px;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    height: 417px;
  }

  .diamond {
    width: calc(calc(
  417px - 48px
) /);
    height: calc(calc(
  417px - 48px
) /);
    padding: calc(16px / 2);
  }

  #diamond-1 {
    order: 1;
  }

  #diamond-2 {
    order: 2;
    border-top: 2px solid #54dddd;
    border-right: 2px solid rgba(84, 221, 221, 0.25);
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
  }

  #diamond-3 {
    order: 5;
    border-left: 2px solid #54dddd;
    border-bottom: 2px solid rgba(84, 221, 221, 0.25);
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
  }

  #diamond-4 {
    order: 6;
    border-top: 2px solid #54dddd;
    border-bottom: 2px solid rgba(84, 221, 221, 0.25);
    border-right: 2px solid rgba(84, 221, 221, 0.25);
    border-left: 2px solid transparent;
  }

  #blank-1 {
    order: 3;
  }

  #blank-2 {
    order: 4;
  }

  .background-texture-top {
    top: 100px;
  }
  .background-texture-top img {
    max-width: 30vw !important;
    width: 30vw;
  }

  .background-texture-bottom {
    bottom: 50px;
  }
  .background-texture-bottom img {
    max-width: 30vw !important;
    width: 30vw;
  }
}
@media screen and (max-width: 670px) {
  .diamond-aligner {
    width: 100%;
    height: auto;
    padding-top: 0;
  }

  .diamond-aligner .diamond-grid {
    margin-left: 0;
  }

  .diamond-grid-container {
    padding: 0px;
    margin-left: 0px;
  }

  #tmf-intro-box {
    text-align: center;
  }

  .diamond br {
    display: none;
  }

  #diamond-container {
    padding: 70px 0 !important;
    overflow: hidden;
  }

  .background-texture-top {
    top: 87px;
    right: -10vw;
  }
  .background-texture-top img {
    max-width: 50vw;
  }

  .background-texture-bottom {
    bottom: 10px;
    left: -10vw;
  }
  .background-texture-bottom img {
    max-width: 50vw;
  }

  .diamond-grid {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    flex-direction: column;
    margin-top: 0;
  }
  .diamond-grid .diamond {
    width: 100%;
    height: auto;
    padding: 35px 35px 0 35px;
    border: 0px !important;
  }
  .diamond-grid .diamond .diamond-body {
    font-size: 18px;
    line-height: 22px;
    font-weight: 300;
  }
  .diamond-grid .diamond .diamond-contents {
    transform: rotate(0deg);
    padding: 50px 17.5vw;
  }

  .blank-diamond {
    display: none;
  }

  #diamond-1 {
    order: 1;
  }

  #diamond-2 {
    order: 2;
  }

  #diamond-4 {
    order: 6;
  }

  #diamond-3 {
    order: 5;
  }

  #blank-1 {
    order: 3;
  }

  #blank-2 {
    order: 4;
  }
}
@media screen and (max-width: 500px) {
  .diamond-grid .diamond .diamond-contents {
    padding: 50px 10vw !important;
  }
}
.large-tmf-title {
  font-size: 60px;
  line-height: 64px;
  font-weight: bold !important;
  max-width: 768px;
  margin: 20px auto !important;
}

.medium-tmf-title {
  max-width: 430px;
  margin: 0 auto !important;
  font-weight: light !important;
}

.veeva-navy-blue {
  color: #173863;
}

.veeva-teal {
  color: #00b6b9;
}

.veeva-white {
  color: #fff;
}

.achieve-stat-number {
  color: #00b6b9;
  font-size: 120px;
  line-height: 144px;
  font-weight: bold;
}

.achieve-stat-text {
  font-size: 26px;
  line-height: 32px;
  max-width: 255px;
  margin: 0 auto !important;
  color: #444;
  font-weight: medium;
}

@media screen and (max-width: 1035px) {
  .achieve-stat-number {
    font-size: 90px;
    line-height: 108px;
  }

  .achieve-stat-text {
    font-size: 22px;
    line-height: 30px;
  }
}
#tmf-innovation-stats-box {
  align-items: flex-start;
}

@media screen and (max-width: 767px) {
  #tmf-innovation-stats-box .achieve-stat {
    margin-bottom: 20px;
  }
}
#tmf-achieve-stats-box {
  align-items: flex-start;
}

/*# sourceMappingURL=sm-style.css.map */