@import 'https://use.typekit.net/xmo4jxo.css';

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-Light.ttf);
  font-weight: 100;
}

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-LightItalic.ttf);
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-Medium.ttf);
  font-weight: normal;
}

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-MediumItalic.ttf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Barlow;
  src: url(./templates/assets/fonts/Barlow-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-modal-opened="true"] {
  height: 100vh;
  overflow: hidden;
}

body {
  --left-width: 52%;
  font-family: Barlow;
  font-weight: normal;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper .main {
  flex: 1;
  scroll-behavior: smooth;
}

a {
  color: #475254;
  text-decoration: none;
}

input[type=submit] {

}

h1 {
  font-family: Barlow;
  font-weight: 100;
  font-size: 50px;
  color: #475254;
  font-style: italic;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
h1 b {
  font-weight: 700;
}

h2 {
  font-family: Barlow;
  font-weight: 700;
  font-style: italic;
  font-size: 46px;
  margin: 0;
  text-transform: uppercase;
}
@media only screen and (max-width: 950px) {
  h2 {
    font-size: 28px;
  }
}

h2.light {
  font-family: Barlow;
  font-weight: 300;
  font-style: italic;
  font-size: 46px;
  text-transform: uppercase;
}

h3 {
  font-family: Barlow;
  font-weight: 700;
  font-style: italic;
  font-size: 30px;

}

h4 {
  font-family: "trade-gothic-next";
  font-weight: bold;
  font-size: 22px;
}

h5 {
  font-family: "trade-gothic-next";
  font-weight: bold;
  font-size: 18px;
}

p.large {
  font-family: Barlow;
  font-weight: 300;
  font-style: italic;
  font-size: 24px;
}

p.small {
  font-family: Barlow;
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
}

p {
  font-family: "trade-gothic-next";
  font-weight: normal;
  font-size: 16px;
}

.gradient-btn {
  font-family: "trade-gothic-next";
  align-items: center;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  justify-content: center;
  line-height: 20px;
  padding: 9px 22px;
  position: relative;
}

.gradient-btn.grey {
  background: #666f72;
  background: linear-gradient(49deg, #666f72 35%, #6f7c85);
}
.gradient-btn.green {
  background: #468A5F;
  background: linear-gradient(49deg, #468A5F 35%, #44A65F);
}
.gradient-btn.green.disabled {
  background: #A3AEAC !important;
  pointer-events: none;
  /*background: linear-gradient(49deg, #468A5F 35%, #44A65F);*/
}
.gradient-btn.green.disabled::before {

}


.gradient-btn:before {
  background: linear-gradient(270deg, #a3b6c1, #60686b);
  border-radius: inherit;
  bottom: 0;
  content: "";
  left: 0;
  margin: -3px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .3s ease-in-out;
  z-index: -1;
}

.gradient-btn.grey:before {
  background: linear-gradient(270deg, #a3b6c1, #60686b);
}

.gradient-btn.green:before {
  background: linear-gradient(270deg, #6cce8d, #44A65F);
}

@font-face {
  font-family: esg-report;
  src: url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.eot?2893135");
  src:
    url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.eot?2893135#iefix") format("embedded-opentype"),
    url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.woff2?2893135") format("woff2"),
    url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.woff?2893135") format("woff"),
    url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.ttf?2893135") format("truetype"),
    url("/themes/custom/tti_sustainability/templates/assets/fonts/fontello/fontello.svg?2893135#esg-report") format("svg");
  font-weight: normal;
  font-style: normal;
}

.esg-report-icon {
  font-family: esg-report, serif;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --tti-red: #D3222A;
  --tti-grey: #475254;
  --tti-light-grey: #A3AEAC;
  --tti-blue: #0080C1;
  --tti-blue2: #809DB2;
  --tti-blue4: #E0E9F1;
  --tti-green: #D5D400;
  --tti-light-green: #95b248;
  --tti-cta-green: #33754B;
  --tti-white: #FFFFFF;
}

.messages--error {
   /*display: none !important;*/
}

.ts-wrapper.multi .ts-control > div {
  background: transparent;
}
.ts-wrapper.multi .ts-control > div.item {
  border: solid 1px #dadada;
  background: #EEFAD9;
  border-radius: 15px;
  padding: 3px 9px 3px;
}
.ts-wrapper.multi .ts-control > div.active {
  border: solid 1px dodgerblue;
  border-radius: 3px;
}
.ts-control .part-number.item {
  max-width: calc(100% - 34px);
}