#ossur-header {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg, #B796FF 0%, #1C9DB9 100%);
  background-position:  top left;             
  background-repeat:  no-repeat;
}

@media all and (min-width: 768px) {
  #ossur-header {
    padding-top: 80px;
  }
}

@media all and (min-width: 1024px) {
  #ossur-header {
    padding-top: 120px;
    padding-bottom: 20px;
  }
}

.ossur-header__wrap {
  z-index: 10;
  position: relative;
}

@media all and (min-width: 1024px) {
  .ossur-header__lead {
    display: grid;
    grid-template-columns: 5.5fr 4.5fr;
    column-gap: 40px;
  }  
}

@media all and (min-width: 1200px) {
  .ossur-header__lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }  
}

.ossur-header__lead-headline img {
  display: none;
}

@media all and (min-width: 1024px) {
  .ossur-header__lead-headline img {
    display: block;
    height: 65px;
    margin-bottom: 30px;
  }
}

#ossur-header h1 {
  max-width: 890px;
  margin-bottom: 60px;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
}

@media all and (min-width: 768px) {
  #ossur-header h1 {
    font-size: 3rem;
  }
}

@media all and (min-width: 1024px) {
  #ossur-header h1 {
    font-size: 3.3rem;
    line-height: 1.1;
    text-align: left;
  }
}

@media all and (min-width: 1200px) {
  #ossur-header h1 {
    font-size: 3.5rem;
  }
}

#ossur-header h1 b {
  font-weight: 600;
}

.ossur-header__video-player wistia-player {
  border: 3px solid #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .ossur-header__video-player wistia-player {
    border-width: 7px;
  }
}

@media all and (min-width: 1024px) {
  .ossur-header__company-info {
    margin-top: 10px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 2.5fr 7.5fr;
    column-gap: 60px;
  }
}

.ossur-header__company-info-promo {
  width: 100%;
  margin-top: -20px;
  text-align: center;
}

@media all and (min-width: 1024px) {
  .ossur-header__company-info-promo {
    margin-top: 0;
    text-align: left;
  }
}

.ossur-header__company-info-promo img {
  width: 260px;
}

@media all and (min-width: 1024px) {
  .ossur-header__company-info-promo img {
    display: none;
  }
}

.ossur-header__company-info-stat h2 {
  font-size: 6rem;
  font-weight: 600;
  line-height: .87;
}

@media all and (min-width: 768px) {
  .ossur-header__company-info-stat h2 {
    font-size: 6.875rem;
  }
}

.ossur-header__company-info-stat h2 span {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
}

@media all and (min-width: 768px) {
  .ossur-header__company-info-stat h2 span {
    font-size: 1.8rem;
  }
}

.ossur-header__company-info-details {
  font-weight: 300;
  width: 100%;
}

@media all and (min-width: 640px) {
  .ossur-header__company-info-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap:  40px;
  }
}

@media all and (min-width: 768px) {
  .ossur-header__company-info-details {
    column-gap:  60px;
  }
}

@media all and (min-width: 1024px) {
  .ossur-header__company-info-details {
    padding-right: 100px;
    column-gap:  70px;
  }
}

.ossur-header__company-info-details b {
  font-weight: 600;
}
.header-animated-circle {
  z-index: 8;
  position: absolute;
  pointer-events: none;
  animation-name: header-animation;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier();
}

.header-animated-circle__top {
  top: 0;
  right: -285px;
  width: 570px;
  animation-duration: 11s;
  animation-delay: 5s;
}

@media all and (min-width: 1200px) {
  .header-animated-circle__top {
    right: calc(50% - 860px);
  }
}

.header-animated-circle__bottom {
  bottom: 200px;
  left: -212px;
  width: 424px;
  animation-duration: 10s;
}

@media all and (min-width: 768px) {
  .header-animated-circle__bottom {
    bottom: 150px;
  }
}

@media all and (min-width: 1024px) {
  .header-animated-circle__bottom {
    bottom: 240px;
  }
}

@media all and (min-width: 1200px) {
  .header-animated-circle__bottom {
    left: calc(50% - 860px);
  }
}

.header-animated-circle__bottom-right {
  bottom: 0;
  right: -200px;
  width: 400px;
  animation-duration: 9s;
  animation-delay: 3s;
}

@media all and (min-width: 1200px) {
  .header-animated-circle__bottom-right {
    right: calc(50% - 860px);
  }
}

@keyframes header-animation {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

#ossur-intro {
  background-image: url('../images/circle-purple-r.svg');
  background-position: top 60px right;
  background-repeat: no-repeat;
  background-size: 211px 214px;
}

@media all and (min-width: 1280px) {
  #ossur-intro {
    background-image: url('../images/circle-purple-full.svg');
    background-position: top 80px right calc(50vw - 771px);
    background-size: auto 214px;
  }
}

#ossur-body-text-1 {
  background-image: url('../images/circle-teal-l.svg');
  background-position: 0% calc(30%);
}

@media all and (min-width: 769px) {
  #ossur-body-text-1 {
    background-position: 0% calc(50% + 107px);
  }
}

@media all and (min-width: 1280px) {
  #ossur-body-text-1 {
    background-image: url('../images/circle-teal-full.svg');
    background-position: calc(50vw - 771px) calc(50% + 107px);
  }
}

#ossur-body-text-2 {
  background-image: url('../images/circle-purple-r.svg');
  background-position: 100% calc(30%);
}

@media all and (min-width: 769px) {
  #ossur-body-text-2 {
    background-position: 100% calc(50% + 107px);
  }
}

@media all and (min-width: 1280px) {
  #ossur-body-text-2 {
    background-image: url('../images/circle-purple-full.svg');
    background-position: calc(50vw + 349px) calc(50% + 107px);
  }
}

div[id^='ossur-body-text-'] {
  background-size: auto 214px;
  background-repeat: no-repeat;
}

@media all and (min-width: 769px) {
  div[id^='ossur-body-text-'] .text-media__container {
    align-items: center;
  }
}

@media all and (max-width: 768px) {
  div[id^='ossur-body-text-'] .text-media__image-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media all and (max-width: 768px) {
  div[id^='ossur-body-text-'] .text-media__image-content img {
    width: 80%;
    max-width: 450px;
    margin-bottom: 40px;
  }
}

#ossur-personal-quote {
  padding-top: 0;
}

#ossur-personal-quote .quote__text {
  margin-bottom: 80px;
}

#ossur-personal-quote .quote__text blockquote {
  padding-bottom: 30px;
}

@media all and (min-width: 1024px) {
  #ossur-personal-quote .quote__text blockquote {
    padding-top: 140px;
    padding-bottom: 60px;
  }
}

#ossur-personal-quote .quote__text blockquote::before {
  background-image: url('../images/quote-top.svg');
}

#ossur-personal-quote .quote__text blockquote::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.9375rem;
  height: 1.3125rem;
  background-image: url('../images/quote-bottom.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  pointer-events: none;
}

@media all and (min-width: 1024px) {
  #ossur-personal-quote .quote__text blockquote::before, #ossur-personal-quote .quote__text blockquote::after {
    width: 76px;
    height: 111px;
  }
}

@media all and (max-width: 768px) {
  #ossur-personal-quote .quote--image img {
    width: 100%;
    max-width: 450px;
    margin-bottom: 60px;
  }
}

#ossur-personal-quote .quote__image {
    text-align: center;
  }

@media all and (min-width: 769px) {
  #ossur-personal-quote .quote__image {
    width: 100%;
    padding-left: 60px;
    text-align: left;
  }
}

@media all and (max-width: 768px) {
  #ossur-personal-quote .swiper-wrapper {
    display: block;
  }
}

@media all and (min-width: 769px) {
  #ossur-personal-quote .quote--image {
    width: 45%;
  }

  #ossur-personal-quote .quote__text {
    width: 55%;
  }
}

.ossur-name-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ossur-name-card__top {
  width: 100%;
  max-width: 500px;
  padding-left: 45px;
  background: linear-gradient(90deg, #B796FF 0%, #1C9DB9 100%);
  border-top-left-radius: 40px;
  font-size: 1.75rem;
}

.ossur-name-card hr {
  width: 100%;
  background-color: #FFFFFF;
  height: 5px;
  border: none;
}

.ossur-name-card__bottom {
  width: 100%;
  max-width: 450px;
  margin-left: 45px;
  padding: 10px 0 10px 45px;
  border-bottom-left-radius: 40px;
  font-size: .875rem;
}

div[id^='ossur-personal'], #ossur-closing-quote {
  background: linear-gradient(90deg, rgba(183, 150, 255, .2) 0%, rgba(28, 157, 185, .2) 100%);
}

#ossur-results {
  background-image: url('../images/circle-teal-l.svg');
  background-position: left top 180px;
  background-repeat: no-repeat;
  background-size: auto 214px;
}

@media all and (min-width: 769px) {
  #ossur-results {
    background-position: left top 210px;
  }
}

@media all and (min-width: 1280px) {
  #ossur-results {
    background-image: url('../images/circle-teal-full.svg');
    background-position: left calc(50vw - 771px) top 210px;
  }
}

#ossur-results .rich-text, #ossur-closing .rich-text {
  font-weight: 300;
}

#main .rich-text {
  font-weight: 300;
}

#main .rich-text p {
  font-size: 1.2rem;
}

@media all and (min-width: 768px) {
  #main .rich-text p {
    font-size: 1.6rem;
  }
}

@media all and (min-width: 1024px) {
  #main .rich-text p {
    font-size: 1.7rem;
    line-height: 1.6;
  }
}

@media all and (max-width: 767px) {
  #ossur-results-image .container {
    padding: 0;
    width: 100%;
  }
}

#ossur-closing-quote h2 {
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 600;  
}

@media all and (min-width: 768px) {
  #ossur-closing-quote h2 {
    font-size: 2.125rem;
  }
}

.full-width-image {
  width: 100%;
  min-width: 100%;
}

#ossur-results-image .full-width-image {
  border: 1px solid #000000;
  border-right-width: 0;
  border-left-width: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); 
}

@media all and (min-width: 768px) {
  #ossur-results-image .full-width-image {
    border-right-width: 1px;
    border-left-width: 1px;
    border-radius: 25px;
  }
}

.decorative-first-letter {
  color: #1e9db8;
  line-height: 1;
  font-size: 3rem;
  font-weight: 600;
}

@media all and (min-width: 768px) {
  .decorative-first-letter {
    font-size: 4rem;
  }
}

@media all and (min-width: 1024px) {
  .decorative-first-letter {
    font-size: 4.68rem;
  }
}

