:root {
  --primary: #7b68ee;
  --tertiary: #ff9800;
  --secondary: #3e57d0;
}

ul.trigonta-list li {
  float: left;
  width: 49%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 20pt;
  border-left: 3pt solid var(--primary);
  padding-left: 10pt;
  padding-right: 10pt;
  margin-bottom: 25pt;
}

ul.trigonta-list li h5 {
  font-size: 120%;
}

ul.trigonta-list li:nth-child(odd) {
  clear: both;
}

/*ul.trigonta-list li:nth-child(even) {
  padding-left: 10pt;
}*/
.clear,
.clearfix {
  clear: both;
}

.trigonta-text h3 {
  font-size: 200%;
}

.trigonta-text h4 {
  font-size: 120%;
}

.mb-20pt {
  margin-bottom: 20pt;
}

.mb-10pt {
  margin-bottom: 10pt;
}

ul.trigonta-list-full li {
  width: 100%;
  clear: both;
}

ul.trigonta-inline-list li {
  margin-bottom: 5pt;
  border-left: 3pt solid var(--tertiary);
}

ul.trigonta-list-large-steps li {
  margin-bottom: 20pt;
}

a.trigonta-box-href {
  display: block;
  width: 100%;
  background: var(--secondary);
  color: white;
  border-radius: 15pt;
  box-sizing: border-box;
  padding: 20pt;
  box-shadow: 0 0 3pt #ccc;
}

a.trigonta-box-href p {
  margin-top: 10pt;
  color: white;
}

a.trigonta-box-href:hover h4 {
  text-decoration: underline;
}

div.trigonta-infographic {
  box-sizing: border-box;
  padding: 20pt;
  background: #370b6f;
  background: linear-gradient(to bottom, #370b6f, #00429b, #006dba, #0095ce, #2dbcdc);
  border-radius: 15pt;
  text-align: center;
  color: white;
  box-shadow: 0 0 3pt #ccc;
}

div.trigonta-infographic h4 {
  margin-bottom: 15pt;
}

div.trigonta-infographic p.description {
  color: white;
  margin-bottom: 15pt;
}

div.trigonta-infographic .trigonta-infographic-box {
  box-sizing: border-box;
  display: inline-block;
  padding: 20pt;
  width: 27%;
  margin: 10pt 10pt 10pt 10pt;
  border-radius: 15pt;
  background: #fefefe;
  box-shadow: 0 0 3pt #ccc;
  border-top: 1pt solid var(--primary);
}

div.trigonta-infographic .trigonta-infographic-box strong {
  color: var(--secondary);
  font-size: 120%;
}

div.trigonta-infographic .trigonta-infographic-box span {
  padding-top: 10pt;
  display: block;
}

div.trigonta-infographic-four .trigonta-infographic-box {
  width: 40%;
}

@media only screen and (max-width: 767px) {
  ul.trigonta-list li {
    float: none;
    width: 99%;
    display: block;
    box-sizing: border-box;
    margin-bottom: 20pt;
    border-left: 3pt solid var(--primary);
    padding-left: 10pt;
    padding-right: 10pt;
    margin-bottom: 15pt;
  }

  div.trigonta-infographic .trigonta-infographic-box {
    width: 40%;
  }

  div.trigonta-infographic-four .trigonta-infographic-box {
    width: 70%;
  }
}

.trigonta-icon>img {
  max-height: 40pt;
  margin-bottom: 28pt;
  border-radius: 0;
}

.header-text-section {
  padding: 100px 0 0 0;
  text-align: center;
}

span.trigonta-highlight {
  color: var(--primary);
}

.trigonta-technology-logo {
  max-height: 60pt;
  width: auto;
}

.float-right {
  float: right;
}

a.a-inverted-colors {
  color: var(--primary);
}

a.a-inverted-colors:hover {
  color: var(--secondary);
}

.pl-20pt {
  padding-left: 20pt;
}

.pr-20pt {
  padding-right: 20pt;
}

.res-pl-20pt {
  padding-left: 20pt;
}

.res-pr-20pt {
  padding-right: 20pt;
}

.max-height-500pt {
  max-height: 500pt;
}

.width-auto {
  width: auto;
}

.height-auto {
  height: auto;
}

@media only screen and (max-width: 991px) {
  .res-pl-20pt {
    padding-left: 0pt;
  }

  .res-pr-20pt {
    padding-right: 0pt;
  }
}

.bg-number-1 {
  background-image: url("../pictures/bg_number_1.svg");
  background-repeat: no-repeat;
  background-size: 140px 200px;
}

.bg-number-2-w {
  background-image: url("../pictures/bg_number_2_w.svg");
  background-repeat: no-repeat;
  background-size: 182px 200px;
}

.bg-number-3 {
  background-image: url("../pictures/bg_number_3.svg");
  background-repeat: no-repeat;
  background-size: 177px 200px;
}

.bg-number-4-w {
  background-image: url("../pictures/bg_number_4_w.svg");
  background-repeat: no-repeat;
  background-size: 189px 200px;
}

.bg-number-5 {
  background-image: url("../pictures/bg_number_5.svg");
  background-repeat: no-repeat;
  background-size: 164px 200px;
}

.bg-number-top-right {
  background-position: top right;
}

.text-align-center {
  text-align: center;
}

.roi-calculator {
  padding: 20pt;
  border: 1px solid #ededed;
  background: white;
  border-radius: 10pt;
}

.roi-calculator label {
  float: left;
  clear: both;
}

.roi-calculator input {
  clear: both;
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 10pt;
  border: 1px solid #ededed;
}

.trigonta-article pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid var(--tertiary);
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

.trigonta-article h1,
.trigonta-article h2,
.trigonta-article h4 {
  margin-bottom: 10pt;
}

.trigonta-article h4 {
  font-size: 120%;
}

.trigonta-article ul,
.trigonta-article ol {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.trigonta-article ul li,
.trigonta-article ol li {
  border-left: 4px solid var(--primary);
  margin: 10px 0;
  padding: 12px 20px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.trigonta-article ul li:hover,
.trigonta-article ol li:hover {
  background: #f8f8f8;
}

.trigonta-article-video {
  width: 95%;
  height: 360px;
}

.trigonta-video-links {
  font-size: 120%;
}

.trigonta-video-links a {
  color: var(--primary);
}

.trigonta-slogan-larger {
  font-size: 60pt;
}

.trigonta-slogan-small {
  font-size: 20pt;
}

@media only screen and (max-width: 1399px) {
  .trigonta-slogan-larger {
    font-size: 40pt;
  }

  .main-banner-content h1 {
    font-size: 30pt;
  }
}

.form-step-none {
  display: none;
}

.trigonta-form-email input {
  margin: 10pt;
}

.trigonta-form-email label {
  color: white;
  margin-top: 10pt;
  font-size: 14pt;
  font-weight: bold;
  margin: 10pt;
}

.agreement-wrap {
  display: inline-block;
  align-items: center;
}

#emailSubNext3 {
  position: relative;
  display: inline-block;
}

#emailSubCase4 h4,
#emailSubCase4Error h4 {
  color: white;
}

.trigonta-form-checkbox {
  display: inline;
}

#form-message-error {
  font-weight: bold;
  color: red;
}

.justify-text {
  text-align: justify;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  li.responsive-social-icon a {
    margin-top: 10pt;
    display: block;
  }
}