:root {
  /* brand */
  --brand-master: #1461a3;
  --brand-secondary: #a55115;
  /* Typography */
  --font-primary: #262626;
  --font-primary-50: rgba(38, 38, 38, 0.5);
  --font-details: #abd8ff;
  --font-text: #727171;
  /* feedback */
  --feedback-error: #b71c1c;
  --feedback-success: #81c784;
  --feedback-warning: #fbbc05;
  /* shade */
  --shade-white: #fff;
  --shade-light1: #f0f0f0;
  --shade-light2-40: rgba(219, 219, 219, 0.4);
  --shade-light2: #dbdbdb;
  --shade-light3: #c7c7c7;
  --shade-gray1: #9e9e9e;
  --shade-gray2: #757575;
  --shade-gray3: #4c4c4c;

  --footer-color: #2b73b1;
}
* {
  box-sizing: border-box;
}
body {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
}
/* Width */
.w-80 {
  width: 80%;
}
.w-50 {
  width: 50%;
}
.w-25 {
  width: 25%;
}

/* Font color */
.font__color--brand-primary {
  color: var(--brand-master) !important;
}
.font__color--brand-secondary {
  color: var(--brand-secondary) !important;
}
.font__color--light1 {
  color: var(--shade-light1);
}
.font__color--details {
  color: var(--font-details);
}
.font__color--font-primary {
  color: var(--font-primary);
}
.font__color--text {
  color: var(--font-text);
}
.font__color--gray2 {
  color: var(--shade-gray2);
}
.font__color--gray3 {
  color: var(--shade-gray3);
}

/* Font weight */
b {
  font-weight: 500;
}
.font__weight--medium {
  font-weight: 500;
}
/* trasform */
.font__transform--uppercase {
  text-transform: uppercase;
}
/* Font size */

.font__web-head {
  font-size: 6rem;
  line-height: 7.125rem;
}

.font__web-title {
  font-size: 4.5rem;
  line-height: 5.313rem;
}

.font__web-subtitle {
  font-size: 64px;
  line-height: 76px;
}

.font__master-headline {
  font-size: 3rem;
  line-height: 3.5625rem;
}

.font__super-headline {
  font-size: 2.5rem;
  line-height: 2.938rem;
}

.font__big-headline {
  font-size: 2rem;
  line-height: 2.375rem;
}

.font__headline1 {
  font-size: 1.5rem;
  line-height: 1.75;
}

.font__headline2 {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.font__body1 {
  font-size: 1.125rem;
  line-height: 150%;
}

.font__body2 {
  font-size: 1rem;
  line-height: 150%;
}

.font__body3 {
  font-size: 0.875rem;
  line-height: 140%;
}

.font__caption1 {
  font-size: 0.75rem;
  line-height: 0.875rem;
}

.font__caption2 {
  font-size: 0.625rem;
  line-height: 0.75rem;
}
@media (max-width: 768px) {
  .mb-24--md {
    margin-bottom: 1.5rem !important;
  }
  .w-100--md {
    width: 100% !important;
  }
}
@media (max-width: 576px) {
  .text__align-left--sm {
    text-align: left;
  }
  .font__web-head--sm {
    font-size: 6rem;
    line-height: 7.125rem;
  }

  .font__web-title--sm {
    font-size: 4.5rem;
    line-height: 5.313rem;
  }

  .font__web-subtitle--sm {
    font-size: 64px;
    line-height: 76px;
  }

  .font__master-headline--sm {
    font-size: 3rem;
    line-height: 3.5625rem;
  }

  .font__super-headline--sm {
    font-size: 2.5rem;
    line-height: 2.938rem;
  }

  .font__big-headline--sm {
    font-size: 2rem;
    line-height: 2.375rem;
  }

  .font__headline1--sm {
    font-size: 1.5rem;
    line-height: 1.75;
  }

  .font__headline2--sm {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }

  .font__body1--sm {
    font-size: 1.125rem;
    line-height: 150%;
  }

  .font__body2--sm {
    font-size: 1rem;
    line-height: 150%;
  }

  .font__body3--sm {
    font-size: 0.875rem;
    line-height: 140%;
  }

  .font__caption1--sm {
    font-size: 0.75rem;
    line-height: 0.875rem;
  }

  .font__caption2--sm {
    font-size: 0.625rem;
    line-height: 0.75rem;
  }

  /* margins */

  .mt-8--sm {
    margin-top: 0.5rem !important;
  }
  .mb-8--sm {
    margin-bottom: 0.5rem !important;
  }
  .mr-8--sm {
    margin-right: 0.5rem !important;
  }
  .mt-16--sm {
    margin-top: 1rem !important;
  }
  .mr-16--sm {
    margin-right: 1rem !important;
  }
  .mb-16--sm {
    margin-bottom: 1rem !important;
  }
  .mt-24--sm {
    margin-top: 1.5rem !important;
  }
  .mr-24--sm {
    margin-right: 1.5rem !important;
  }
  .mb-24--sm {
    margin-bottom: 1.5rem !important;
  }
  .mt-32--sm {
    margin-top: 2rem !important;
  }
  .mb-32--sm {
    margin-bottom: 2rem !important;
  }
  .mt-36--sm {
    margin-top: 2.25rem !important;
  }
  .mb-36--sm {
    margin-bottom: 2.25rem !important;
  }
  .mt-40--sm {
    margin-top: 2.5rem !important;
  }
  .mb-40--sm {
    margin-bottom: 2.5rem !important;
  }
  .mt-56--sm {
    margin-top: 3.5rem !important;
  }
  .mb-56--sm {
    margin-bottom: 3.5rem !important;
  }
  .mt-64--sm {
    margin-top: 4rem !important;
  }
  .mb-64--sm {
    margin-bottom: 4rem !important;
  }
  .hide--sm {
    display: none !important;
  }
  .flex--sm {
    display: flex !important;
  }
}
div.flex--sm {
  display: none;
}

.container {
  position: inherit;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 768px) {
  .container {
    /* width: 85%; */
    width: calc(100% - 2rem);
    padding: 0;
  }
}
/*
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1224px;
  }
}

/* margins */
.mt-8 {
  margin-top: 0.5rem;
}
.mb-8 {
  margin-bottom: 0.5rem;
}
.mr-8 {
  margin-right: 0.5rem;
}
.mr-16 {
  margin-right: 1rem;
}
.mt-16 {
  margin-top: 1rem;
}
.mb-16 {
  margin-bottom: 1rem;
}
.mt-24 {
  margin-top: 1.5rem;
}
.mr-24 {
  margin-right: 1.5rem;
}
.mb-24 {
  margin-bottom: 1.5rem;
}
.mt-32 {
  margin-top: 2rem;
}
.mb-32 {
  margin-bottom: 2rem;
}
.mt-36 {
  margin-top: 2.25rem;
}
.mb-36 {
  margin-bottom: 2.25rem;
}
.mt-40 {
  margin-top: 2.5rem;
}
.mb-40 {
  margin-bottom: 2.5rem;
}
.mt-56 {
  margin-top: 3.5rem;
}
.mb-56 {
  margin-bottom: 3.5rem;
}
.mt-64 {
  margin-top: 4rem;
}
.mb-64 {
  margin-bottom: 4rem;
}

/* button */
.button--master {
  cursor: pointer;
  border-radius: 8px;
  background: var(--brand-master);
  color: var(--shade-white);
}
.button--secondary {
  cursor: pointer;
  border-radius: 8px;
  background: var(--brand-secondary);
  color: var(--shade-white);
}
.button--header {
  padding: 1rem 2.375rem;
}
.button--contact {
  /* padding: 1.188rem 4.5rem; */
  padding: 1.25rem 4.5625rem;
}