.tringle-down {
  position: absolute;
  top: 50%;
  margin-top: 20px;
}

.tringle-right-wrapper {
  position: absolute;
  right: 0;
}

.tringle-right {
  right: auto;
}

.flip-180 {
  transform: rotate(180deg);
  margin-left: -90px;
  margin-top: 0;
}

.trigle-lg {
  width: 384px;
}

.trigle-md {
  width: 238px;
}

.trigle-sm {
  width: 183px;
}

.r-0 {
  right: 0;
}

.trigle-xsm {
  width: 148px;
}

.right-top {
  top: -60px;
}

/*tringle outline css*/

.tringle-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9px;
  max-width: 100%;
  stroke-linecap: round;
}

.outline-solid {
  stroke-width: 3px;
}

.outline-tringle-lg .tringle-outline {
  stroke-width: 0.5px;
}

.outline-tringle-xlg .tringle-outline {
  stroke-width: 0.5px;
}

.tringle-colors {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5px;
}

.tringle-outside {
  position: relative;
}

.tringle-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  align-content: center;
}

.tringle-container {
  padding: 30px;
}

.tringle-flip {
  transform: scale(-1, 1);
}

.outline-tringle-xlg {
  max-width: 648px;
  width: 100%;
}

.outline-tringle-lg {
  max-width: 460px;
  width: 100%;
}

.outline-tringle-md {
  max-width: 250px;
  width: 100%;
}

.tringle-title-lg {
  margin: 0;
  display: block;
  position: relative;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
  padding: 10px 0;
  color: currentColor;
}

.tringle-title-sm {
  margin: 0;
  display: block;
  position: relative;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 0;
  color: currentColor;
}

.outline-tringle-lg.tringle-bottom {
  margin-left: 30px;
}

.banner-tringle-xlg {
  max-width: 620px;
  width: 100%;
}

.banner-tringle-lg {
  max-width: 530px;
  width: 100%;
}

.banner-tringle-md {
  max-width: 320px;
  width: 100%;
}

.sticky-left {
  position: absolute;
  left: 0;
}

.tringle-b-r {
  position: absolute;
  right: 0;
  left: calc(100% - 150px);
  margin-top: -50%;
}

.trigle-scale-down {
  margin-top: 100px;
}

.trigle-scale-up {
  margin-top: -100px;
}

/*trigle sizes css*/

@media (min-width: 768px) {
.tringle-inside-md {
    width: 45%;
  }

  
  .tringle-left-wrapper {
    max-width: 525px;
    top: 0;
  }
  .tringle-right-wrapper {
    max-width: 525px;
    top: 0;
  }
  .tringle-inside-lg {
    width: 80%;
  }
  
  .tringle-banner-xxlg {
    max-width: 589px;
    width: 36%;
  }
  .tringle-banner-xlg {
    width: 31%;
    max-width: 606px;
  }
  .tringle-banner-lg {
    max-width: 27%;
    width: 100%;
  }
  .tringle-banner-xxmd {
    max-width: 23%;
    width: 100%;
  }
  .tringle-banner-xmd {
    max-width: 19%;
    width: 100%;
  }
  .tringle-banner-md {
    max-width: 304px;
    width: 16%;
  }
  .tringle-banner-sm {
    max-width: 276px;
    width: 13%;
  }
  .tringle-banner-xsm {
    max-width: 8%;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .tringle-inside-lg {
    width: 100%;
  }
  .tringle-inside-md {
    width: 70%;
  }
  .tringle-banner-xlg {
    max-width: 772px;
    width: 100%;
  }
  .tringle-banner-xxmd {
    width: 60.5556%;
  }
  .tringle-banner-md {
    max-width: 100;
    width: 59%;
  }
  .tringle-banner-sm {
    max-width: 276px;
    width: 39.44%;
  }
  .tringle-banner-xsm {
    max-width: 110px;
    width: 30.55555555555556%;
  }
  .tringle-up {
    margin-top: 0 !important;
  }
}

.tringle-bottom-right {
  position: absolute;
  top: 50%;
  left: 30%;
  margin-right: -30px;
  margin-top: -10px;
}

.tringle-bottom-left {
  position: absolute;
  top: 50%;
  right: 30%;
  margin-left: -30px;
  margin-top: -10px;
}

.tringle-push-top {
  margin-bottom: -50%;
}



@media (min-width: 768px) {
  .tringle-banner-xxmd {
    max-width: 15%;
  }
  .tringle-banner-xlg {
    width: 25%;
  }
}

/*tringle sizes */

:root {
  --screen: 1900;
  --size-xxl: 698;
  --size-xl: 518;
  --size-xlg: 606;
  --size-lg: 452;
  --size-xmd: 378;
  --size-md: 306;
  --size-xsm: 282;
  --size-sm: 248;
  --size-xxs: 186;
  --size-xs: 150;
  --sizes-xxl: (var(--size-xxl) / var(--screen));
  --sizes-xl: (var(--size-xl) / var(--screen));
  --sizes-xlg: (var(--size-xlg) / var(--screen));
  --sizes-lg: (var(--size-lg) / var(--screen));
  --sizes-xmd: (var(--size-xmd) / var(--screen));
  --sizes-md: (var(--size-md) / var(--screen));
  --sizes-xsm: (var(--size-xsm) / var(--screen));
  --sizes-sm: (var(--size-sm) / var(--screen));
  --sizes-xxs: (var(--size-xxl) / var(--screen));
  --sizes-xs: (var(--size-xs) / var(--screen));
}

/* Extra small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) {}

/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) and (max-width: 991.98px) {}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) and (max-width: 1199.98px) {}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 992px) {
  .tringle-scale-up {
    margin-top: -100px;
  }
  .tringle-scale-down {
    margin-top: 100px;
  }
  .tringle-left-sticky {
    position: absolute;
    left: 0;
    top: 0;
  }
  .tringle-right-sticky {
    position: absolute;
    right: 0;
    top: 0;
  }
  .trigle-one-eight {
    width: 78%;
  }
  .trigle-one-five {
    width: 50%;
  }
  .tringle-size-one {
    width: 100%;
  }
  .tringle-size-xxl {
    width: calc(var(--sizes-xxl)* 100%);
  }
  .tringle-size-xl {
    width: calc(var(--sizes-xl)* 100%);
  }
  .tringle-size-xlg {
    width: calc(var(--sizes-xlg)* 100%);
  }
  .tringle-size-lg {
    width: calc(var(--sizes-lg)* 100%);
  }
  .tringle-size-xmd {
    width: calc(var(--sizes-xmd)* 100%);
  }
  .tringle-size-md {
    width: calc(var(--sizes-md)* 100%);
  }
  .tringle-size-xsm {
    width: calc(var(--sizes-xsm)* 100%);
  }
  .tringle-size-sm {
    width: calc(var(--sizes-sm)* 100%);
  }
  .tringle-size-xxs {
    width: calc(var(--sizes-xxs)* 100%);
  }
  .tringle-size-xs {
    width: calc(var(--sizes-xs)* 100%);
  }
  .tringle-big-top {
    width: 83.07692307692308%;
  }
  .tringle-small-bottom {
    width: 56.30769230769231%;
    margin-top: -50%;
  }
  .tringle-small-bottom-left {
    width: 80%;
    margin-top: -50%;
    margin-right: -20%;
  }
  .tringle-b-t {
    width: 83.07692307692308%;
  }
  .tringle-s-b-p-r {
    width: 50%;
    margin-top: -55%;
    margin-left: 60%;
  }
}

@media (max-width: 1199.98px) {
  .tringle-inside-md {
    min-width:280px;
  }
  .nationwide-tringle {
    margin-top: -50%;
    width: auto;
    margin-right: 0;
    margin-left: 20px;
    min-width: 320px; 
  }
  .tringle-big-top {
    width: 83.07692307692308%;
  }
  .tringle-small-bottom {
    width: 56.30769230769231%;
    margin-top: -50%;
  }
}

@media (max-width: 991.98px) {
  .flip-180 {
    margin-left: -30px;
    margin-top: 0;
  }
  .tringle-m-nine {
    width: 90%;
    max-width: 380px;
  }
  .tringle-m-sixth {
    width: 83.07692307692308%;
    max-width: 380px;
  }
  .tringle-m-half {
    width: 56.30769230769231%;
  }
  .tringle-m-one {
    width: 100%;
  }
  .tringle-push-top {
    margin-bottom: -50%;
  }
  .tringle-push-top-m {
    margin-bottom: -50%;
  }
  .tringle-flip-md {
    transform: scale(-1, 1);
  }
  .tringle-bottom-m {
    margin-top: -50%;
    position: relative;
  }
  .tringle-one-half {
    width: 54%;
  }
  .tringle-one-sixth {
    width: 84%;
    max-width: 544px;
  }

}
@media (max-width: 1600px) {
  :root {
    
    --size-xlg: 480;
   
  }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  :root {
    --size-xxl:620;
    --size-xl: 518;
    --size-xlg: 480;
    --size-lg: 452;
    --size-xmd: 378;
    --size-md: 306;
    --size-xsm: 282;
    --size-sm: 248;
    --size-xxs: 186;
    --size-xs: 150;
  }
  .nationwide-tringle {
    margin-top: -50%;
    width: 98%;
    margin-right: 0;
    margin-left: 10px;
  }
  .tringle-container {
    padding: 20px;
  }
  .tringle-title-lg {
    font-size:24px;
  }
}

@media (min-width: 1600px) {
  .nationwide-tringle {
    width: 75%;
    margin-right: -10%;
    margin-left: auto;
  }
}
.nationwide-tringle {
  margin-top: -50%;
}