@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap);
/**
 * This scss file get injected globally
 * from the Next configuration. See: stencil.config.js
 *
 */
/* Importing global UI components CSS */
/*=============================================
=      Normalization of HTML elements         =
=============================================*/
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

body,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
label {
  margin: 0;
  padding: 0; }

a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  text-decoration: none;
  outline: 0; }

ol,
ul {
  list-style: none; }

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

input {
  outline: 0; }

input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='file']::-webkit-file-upload-button,
button {
  box-sizing: border-box;
  padding: 0; }

::-ms-clear,
::-ms-reveal {
  display: none;
  width: 0;
  height: 0; }

::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
  display: none; }

/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

/* Media queries breakpoints variables */
/* Z-index variables */
.primary-button {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  background-color: var(--primary-0);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--neutral-0); }

.secondary-button {
  padding: 10px 20px;
  color: var(--primary-0);
  font-size: 14px;
  font-weight: 700;
  border: solid 3px var(--primary-0);
  text-decoration: none;
  background: transparent;
  text-transform: uppercase;
  cursor: pointer; }
  .secondary-button:hover {
    background-color: var(--primary-0);
    color: var(--neutral-0); }

.disabled-button {
  background-color: var(--disabled-background); }
  .disabled-button.secondary-button {
    border: 0px;
    color: var(--neutral-0); }
  .disabled-button:hover {
    cursor: not-allowed; }

.icon-button {
  background: transparent; }

.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

:root {
  --primary-0: #ef7d00;
  --neutral-0: #fff;
  --grey: #777777;
  --dark: #000000;
  --disabled-background: #e5e5e5;
  --text-primary: #323232; }

.gmnoprint {
  display: none; }

a[href^="https://maps.google.com/maps"] {
  display: none !important; }

.milestone__section-details:nth-child(4) {
  margin-top: 10px; }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.articles-container {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  margin-top: 10px; }
  @media all and (max-width: 767px) {
    .articles-container {
      width: 100%; } }

.c-link-image {
  width: -webkit-calc(calc(100% / 2 - 10px));
  width: -moz-calc(calc(100% / 2 - 10px));
  width: calc(calc(100% / 2 - 10px));
  height: 42vh; }
  @media all and (max-width: 767px) {
    .c-link-image {
      width: 100%; } }
  @media all and (max-width: 767px) and (orientation: landscape) {
    .c-link-image {
      height: 100vh; } }
  .c-link-image img {
    object-fit: cover; }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.c-page-subheader {
  height: 250px; }

.article-container * {
  max-width: 100%;
  overflow-wrap: break-word; }

.article-container a {
  color: var(--primary-0); }

.article-container .back-to-news-button {
  color: var(--neutral-0);
  text-align: center;
  align-self: flex-end;
  margin-right: 15%;
  box-shadow: 0px 6px 4px 0 rgba(0, 0, 0, 0.15); }
  @media all and (max-width: 767px) {
    .article-container .back-to-news-button {
      margin-right: 0;
      align-self: center; } }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.contact-sections {
  width: 70%;
  margin: auto;
  display: flex; }
  @media all and (max-width: 767px) {
    .contact-sections {
      flex-direction: column;
      width: 100%; } }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.contributors-container {
  text-align: center; }
  .contributors-container .page-description {
    margin-top: 40px; }
    .contributors-container .page-description h1 {
      margin: 0;
      font-size: 50px;
      text-align: left;
      font-weight: 400; }
      @media all and (max-width: 767px) {
        .contributors-container .page-description h1 {
          font-size: 24px; } }
  .contributors-container .contributors-container:first-child {
    margin: 0; }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.contributors-container {
  text-align: center; }
  .contributors-container .page-description {
    margin-top: 40px; }
    .contributors-container .page-description h1 {
      margin: 0;
      font-size: 50px;
      text-align: left;
      font-weight: 400; }
      @media all and (max-width: 767px) {
        .contributors-container .page-description h1 {
          font-size: 24px; } }
  .contributors-container .contributors-container:first-child {
    margin: 0; }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.pay-mode-wrapper {
  display: flex; }
  .pay-mode-wrapper vt-checkbox {
    margin-right: 30px; }

.section__subtitle {
  width: 200px; }

.other-amount__payments.sc-vt-other-amount {
  text-align: left; }

vt-general-section vt-other-amount .checkbox__text.sc-vt-checkbox {
  text-align: left; }

.infoGPS a {
  color: var(--primary-0); }

/**
* FONT variables
*/
/*
    added null property so you can get away using only what you need from this mixin
    ex1: @include font($font-size: 10px, $line-height: 1em);
    ex2: @include font(10px, red,  center);
    you can use it without variables but you MUST keep the order
  */
/* GENERAL MIXINS */
/*
    on event like: hover, focus or active, execute style;
    ex: .element { color: red;   @include on_event { color: blue }}
  */
/*
    this is the most solid clearfix there is, it works even on IE6;
    ex: .container-with-floated-children { @extend %clearfix; }
  */
/*
  remove margin
*/
/*
    add margin values
  */
/*
  remove padding
*/
/*
      add padding values
    */
/*
    mixin for setting the possition;
    if you don't want to set set/right/top/bottom you can use it like:
    @include position(absolute);
    .element { @include position(absolute, 10px, 20px, 30px, 40px); }
    this is if you want to define top, right bottom, left in this exact order
    .element { @include position(absolute, $top: 10px, left: 20px); }
    this is if you don't keep the order
  */
/*
    mixin to vertically-align: center a selector;
      ex: .txt { @include vertical_center(absolute); }
    beware: gives position as param and adds top, left: 50%, and translates the container to center it.
  */
/*
      mixin to vertically-align: center and horizontal align: center a selector;
        ex: .txt { @include force_center(absolute); }
      beware: gives position as param and adds top, left: 50%, and translates the container to center it.
    */
/*
      added null property so you can get away using only what you need from this mixin
      ex: good: @include display($justify-content: center, $align-items: center);
    */
/*
  added null property so you can get away using only what you need from this mixin
  ex: good: @include size($width: 100%, $max-widht: 320px);
  bad: @include size(100px, 200px); works anyhow but it's difficult to maintain
*/
/*
      add calculated values for length units
      ex: calc(height, '100% - 41px')
    */
/*
    fallback mixin for any vendor prefix:
      ex: @include prefix(transform, rotate(42deg), webkit moz ms o);
    you don't have to include all 4 fallbacks, you have to include at least 1;
  */
.container-fluid {
  padding: 0 15px 15px 15px; }
  @media all and (max-width: 767px) {
    .container-fluid {
      padding: 0 25px 20px 25px; } }

.main-wrap {
  padding-top: 53px; }

.section-container {
  margin-bottom: 15px; }
  @media all and (max-width: 767px) {
    .section-container {
      margin-bottom: 10px; } }

.no-scroll {
  overflow: hidden; }

.hidden-scroll-bar::-webkit-scrollbar {
  display: none; }

p {
  margin-bottom: 10px;
  margin-top: 0; }

button:focus {
  outline: none; }

#__next {
  position: relative; }

.padding-bottom--30 {
  padding-bottom: 30px; }

.social-button {
  margin-right: 15px; }

/* Media queries breakpoints variables */
/* Z-index variables */
.verticalCenter {
  display: flex;
  align-items: center; }

.totalCenter, .thank-you-container {
  display: flex;
  justify-content: center;
  align-items: center; }

.horizontalCenter {
  display: flex;
  justify-content: center; }

.spaceBetween {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.directionColumn, .thank-you-container {
  display: flex;
  flex-direction: column; }

.directionRow {
  flex-direction: row; }

.resetToDirectionColumn {
  flex-direction: column; }

.verticalCenterColumn {
  display: flex;
  align-items: center;
  flex-direction: column; }

.thank-you-container {
  height: 100vh;
  text-align: center; }
  .thank-you-container .sc-vt-page-description-s.page-description {
    margin: 0 0 52px;
    max-width: 700px;
    font-size: 36px; }
    @media all and (max-width: 767px) {
      .thank-you-container .sc-vt-page-description-s.page-description {
        max-width: 100%;
        margin-bottom: 30px;
        font-size: 21px; } }
    .thank-you-container .sc-vt-page-description-s.page-description .content > * {
      font-size: 36px; }
      @media all and (max-width: 767px) {
        .thank-you-container .sc-vt-page-description-s.page-description .content > * {
          font-size: 21px; } }

.back-to-site-button {
  margin-bottom: 30px;
  color: var(--primary-0); }