/*
****************************************************************
Styles to not first screen
****************************************************************
*/
/*--------------------------------------------------------------
=== GRID - 12cols ===
col-xs	[] <= 768px
col-md	[] >= 769px
--------------------------------------------------------------*/
@media (min-width:769px) {
  .col-md-12 { flex-basis:100%;}
  .col-md-11 { flex-basis:91.66666667%;}
  .col-md-10 { flex-basis:83.33333333%;}
  .col-md-9 { flex-basis:75%;}
  .col-md-8 { flex-basis:66.66666667%;}
  .col-md-7 { flex-basis:58.33333333%;}
  .col-md-6 { flex-basis:50%;}
  .col-md-5 { flex-basis:41.66666667%;}
  .col-md-4 { flex-basis:33.33333333%;}
  .col-md-3 { flex-basis:25%;}
  .col-md-2 { flex-basis:16.66666667%;}
  .col-md-1 { flex-basis:8.33333333%;}

  .md-offset-left-1 { margin-left:8.33333333%;}
  .md-offset-left-2 { margin-left:16.66666667%;}
  .md-offset-left-3 { margin-left:25%;}
  .md-offset-left-4 { margin-left:33.33333333%;}
  .md-offset-left-5 { margin-left:41.66666667%;}
  .md-offset-left-6 { margin-left:50%;}
  .md-offset-left-7 { margin-left:58.33333333%;}
  .md-offset-left-8 { margin-left:66.66666667%;}
  .md-offset-left-9 { margin-left:75%;}
  .md-offset-right-1 { margin-right:8.33333333%;}
  .md-offset-right-2 { margin-right:16.66666667%;}
  .md-offset-right-3 { margin-right:25%;}
  .md-offset-right-4 { margin-right:33.33333333%;}
  .md-offset-right-5 { margin-right:41.66666667%;}
  .md-offset-right-6 { margin-right:50%;}
  .md-offset-right-7 { margin-right:58.33333333%;}
  .md-offset-right-8 { margin-right:66.66666667%;}
  .md-offset-right-9 { margin-right:75%;}
}
@media (max-width:768px) {
  .col-xs-12 { flex-basis:100%;}
  .col-xs-11 { flex-basis:91.66666667%;}
  .col-xs-10 { flex-basis:83.33333333%;}
  .col-xs-9 { flex-basis:75%;}
  .col-xs-8 { flex-basis:66.66666667%;}
  .col-xs-7 { flex-basis:58.33333333%;}
  .col-xs-6 { flex-basis:50%;}
  .col-xs-5 { flex-basis:41.66666667%;}
  .col-xs-4 { flex-basis:33.33333333%;}
  .col-xs-3 { flex-basis:25%;}
  .col-xs-2 { flex-basis:16.66666667%;}
  .col-xs-1 { flex-basis:8.33333333%;}

  .xs-offset-left-1 { margin-left:8.33333333%;}
  .xs-offset-left-2 { margin-left:16.66666667%;}
  .xs-offset-left-3 { margin-left:25%;}
  .xs-offset-left-4 { margin-left:33.33333333%;}
  .xs-offset-left-5 { margin-left:41.66666667%;}
  .xs-offset-left-6 { margin-left:50%;}
  .xs-offset-left-7 { margin-left:58.33333333%;}
  .xs-offset-left-8 { margin-left:66.66666667%;}
  .xs-offset-left-9 { margin-left:75%;}
  .xs-offset-right-1 { margin-right:8.33333333%;}
  .xs-offset-right-2 { margin-right:16.66666667%;}
  .xs-offset-right-3 { margin-right:25%;}
  .xs-offset-right-4 { margin-right:33.33333333%;}
  .xs-offset-right-5 { margin-right:41.66666667%;}
  .xs-offset-right-6 { margin-right:50%;}
  .xs-offset-right-7 { margin-right:58.33333333%;}
  .xs-offset-right-8 { margin-right:66.66666667%;}
  .xs-offset-right-9 { margin-right:75%;}
}


/*--------------------------------------------------------------
=== COMMON LAYOUT ===
--------------------------------------------------------------*/
.row { display: flex; width: 100%;}
.fl-wrap { flex-wrap: wrap;}
.fl-col { flex-direction: column;}
.fl-i-center { align-items: center;}
.fl-j-center { justify-content: center;}

.w-100 { width: 100%;}

.col { min-height: 1px;}
.pull-left { float: left;}
.pull-right { float: right;}
.center {  margin-left: auto; margin-right: auto;}
img, table { border: 0;}
img { display: block; max-width: 100%; height: auto;}
ul { list-style: none;}
#page ul li { position: relative; padding-left: 13px;}
#page ul li:before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 100%; background: #212121;}
ol li { margin-left:24px;}
#page p:not(:last-child), #page ul, #page ol { margin-bottom: var(--mb-base);}

@media (min-width:769px) {
  .md-fl-i-center { align-items: center;}
  .md-fl-j-center { justify-content: center;}

  .space-top, .md-space-top {}
  .space-bot, .md-space-bot {}
  .space-top-lg, .md-space-top-lg {}
  .space-bot-lg, .md-space-bot-lg {}
  .space-top-md, .md-space-top-md {}
  .space-bot-md, .md-space-bot-md {}
  .space-top-sm, .md-space-top-sm {}
  .space-bot-sm, .md-space-bot-sm {}

  .space-left, .md-space-left {}
  .space-right, .md-space-right {}

  .md-pull-left { float:left;}
  .md-pull-right { float:right;}

  .xs-visible { display: none!important;}
  .md-visible { display: block!important;}
  .md-hidden { display: none!important;}
}
@media (max-width:768px) {
  .row { flex-direction: column;}

  .xs-fl-col { flex-direction: column;}
  .xs-fl-wrap { flex-wrap: wrap;}
  .xs-fl-i-center { align-items: center;}
  .xs-fl-j-center { justify-content: center;}

  .space-top, .xs-space-top {}
  .space-bot, .xs-space-bot {}
  .space-top-lg, .xs-space-top-lg {}
  .space-bot-lg, .xs-space-bot-lg {}
  .space-top-md, .xs-space-top-md {}
  .space-bot-md, .xs-space-bot-md {}
  .space-top-sm, .xs-space-top-sm {}
  .space-bot-sm, .xs-space-bot-sm {}

  .space-left, .xs-no-space-left {}
  .space-right, .xs-no-space-right {}

  .xs-visible { display: block!important;}
  .xs-hidden { display: none!important;}
  .md-visible { display: none!important;}
  .xs-no-pull { float: none!important;}
}


/*--------------------------------------------------------------
=== PRINT ===
--------------------------------------------------------------*/
@media print {
  .hidden-print { display:none!important;}
}


/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
.text-left { text-align:left;}
.text-right { text-align:right;}
.text-center { text-align:center;}
.text-center img { margin-left: auto; margin-right: auto;}
.text-justify { text-align:justify;}
.text-nowrap { white-space:nowrap;}
.text-lowercase { text-transform:lowercase;}
.text-uppercase { text-transform:uppercase;}
.text-capitalize { text-transform:capitalize;}
@media (max-width: 768px) {
  .xs-text-center { text-align:center;}
}

h1, .h1 {}
h2, .h2 {} /* on the first screen */
h3, .h3 { margin-bottom: var(--mb-base); font-size: 3.6rem; line-height: 1.33; font-weight: 500;}
h4, .h4 { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--dark-maroon);}
h5, .h5 { margin-bottom: var(--mb-base); font-size: 2.6rem; line-height: 1.42; font-weight: 600;}
@media (max-width:768px) {
}
@media (min-width:769px) {
  h4, .h4 { font-size: 2.6rem;}
}

a { color: var(--dark-teal); text-decoration: none; cursor: pointer; transition: .25s ease-in-out;}
a:hover, a:focus { color: var(--dark-maroon);}
sup, sub { position:relative; font-size:.7em; vertical-align:baseline;}
sup { top:-.5em;}
sub { bottom:-.25em;}
strong, b, .text-bold { font-weight: 600;}
.txt-w-medium { font-weight: 500;}

small, .text-small { font-size:.85em;}
big, .text-big { font-size: 1.33em; line-height: 1.25em;}


.text-light { font-weight: 300;}
.text-normal { font-weight: 400;}
.text-medium { font-weight: 500;}
.text-semiBold { font-weight: 600;}

.bg-greyLight { background: #eff1f2;}
.text-grey { color: #333;}
.text-greyLight { color: #737c81;}
.text-blue { color: #396b91;}


/*--------------------------------------------------------------
=== HEADER ===
--------------------------------------------------------------*/
header.sticky-header { position: fixed; box-shadow: 0 0 8px rgba(23, 94, 118,.45)}


/*--------------------------------------------------------------
=== NAVIGATION ===
--------------------------------------------------------------*/
.nav-open .nav-control span { position: absolute; height: 5px;}
.nav-open .nav-control span:nth-child(1) { transform: rotate(45deg);}
.nav-open .nav-control span:nth-child(2) { top: 21px; width: 0%; left: 50%;}
.nav-open .nav-control span:nth-child(3) { transform: rotate(-45deg);}

@media (max-width:1149px) {
  .nav-open .menu-menu-container { max-height: calc(100vh - 1.2rem); overflow: auto; padding: 160px 0 40px; box-shadow: 0 0 8px rgba(23, 94, 118,.45);}
  #main-nav { flex-direction: column; margin: 0 auto; max-width: 230px;}
  #main-nav li { width: 100%;}
  #main-nav a:not(.btn) { padding: 12px; font-size: 20px; line-height: 1.1;}
  #main-nav a br { display: none;}
  #main-nav .btn { margin: 6rem 0 0 2rem;  width: 170px;}
}


/*--------------------------------------------------------------
=== FOOTER ===
--------------------------------------------------------------*/
footer { padding: 7rem 0 3rem; border-radius: 3.5rem 3.5rem 0 0; background: var(--dark-teal);}
.footer-top .btn-row { margin-top: calc(var(--mb-base) * 5); display: flex; gap: 3rem;}

footer h2, footer .h2 { color: #fff;}
.footer-nav { display: flex; font-size: 1.6rem; line-height: 1.2; font-weight: 500;}
.footer-nav a { display: block; position: relative;}
.footer-nav a:not(:first-child) { padding-left: 1.5rem;}
.footer-nav a:not(:last-child) { padding-right: 1.5rem;}
.footer-nav a:not(:last-child):after { content: ""; position: absolute; right: 0; width: 1px; height: 1.2em; background: #fff;}

.footer-bot { margin-top: calc(var(--mb-base) * 6); display: flex; justify-content: space-between; font-size: 1.6rem; line-height: 1.2;}
footer, footer a { color: #fff;}
footer a:hover, footer a:focus { color: var(--light-blue);}
footer .copyright {}

@media (max-width:1109px) {
  footer { text-align: center;}
  footer .row { flex-direction: column;}
  footer h2, footer .h2 { margin-bottom: calc(var(--mb-base) * 2);}
  .footer-top .btn-row, .footer-bot { flex-direction: column; align-items: center; gap: 2rem;}
}
@media (min-width:1110px) {
  footer { padding: 17rem 0 3rem; border-radius: 0 20rem 0 0;}
  footer .col-1 { padding-right: 6rem;}
  .footer-top .footer-nav { flex-grow: 1;}
  .footer-bot { margin-top: calc(var(--mb-base) * 12);}

}



/*--------------------------------------------------------------
=== BUTTONS & SEPARATORS & ANCHORS ===
--------------------------------------------------------------*/
.btn-default { padding: 2rem 2rem 1.7rem; width: 25rem; /*height: 6.8rem;*/ font-size: 2.6rem; line-height: 1.2; font-weight: 600; color: var(--dark-teal)!important; text-transform: uppercase; border-radius: 4rem; background: var(--light-blue);}
.btn-default:hover, .btn-default:focus { background: var(--seafoam);}

.btn-link { padding: 1.6rem 2.6rem; color: var(--dark-teal)!important; border-radius: 20rem; background: var(--lightest-seafoam);}
.btn-link:hover, .btn-link:focus { background: var(--light-blue);}

.btn-set .btn { margin-bottom: var(--mb-base); }
.btn-lg { width: 100%;}
.btn-md { width: 45%; white-space: nowrap;}

.anchor { position: absolute; margin-top: -100px;}


@media (max-width:768px) {
  #trial.anchor { margin-top: -160px;}
  #hidradenitis.anchor { margin-top: -140px;}
  #faq.anchor { margin-top: -140px;}
  #resources.anchor { margin-top: -130px;}
}
@media (min-width:769px) {
  .btn-link { padding: 1rem 2.2rem;}
  #trial.anchor { margin-top: -210px;}
  #avtx-009.anchor { margin-top: -80px;}
  #hidradenitis.anchor { margin-top: -140px;}
  #faq.anchor { margin-top: -190px;}
  #resources.anchor { margin-top: -130px;}
}


/*--------------------------------------------------------------
=== BLOCKs ===
--------------------------------------------------------------*/
.brd { border-radius: 3.5rem;}


/* --- section GLANCE */
.glance { padding-top: 10rem;}


/* TILEs */
.tiles { gap: 3.1rem;}
.tiles .tile { padding: 2.6rem calc(1.8rem + 2%); text-align: center; border-radius: 3rem;}
.tile .tile-ico { margin: 0 auto .8rem; width: 15.9rem;}

.able .tile {  border: 2px solid var(--light-blue);}
.participate .tile { position: relative; background: var(--lightest-seafoam);}

.tiles-info { margin-top: calc(var(--mb-base) * 1.5);}

@media (min-width:769px) {
  .participate .tile:not(:last-child):after { content: ""; position: absolute; right: -3.1rem; top: 5rem; width: 3.1rem; height: 10rem; background: url("../img/title-arr.svg") center / contain no-repeat;}
}
@media (max-width:768px) {
  .tiles-able { align-items: center;}
  .able .tile { width: 100%; max-width: 340px;}
}


/* --- section PHASE */
.phase { padding-top: 3.5rem; padding-bottom: 12rem;}
.tiles-participate { margin-top: calc(var(--mb-base) * 2.3);}
@media (max-width:768px) {
  .tiles-participate { align-items: center;}
  .tiles-participate .tile { max-width: 340px;}
}


/* --- sub-section TELES-ABLE */
.tiles-able { margin-top: calc(var(--mb-base) * 2);}

/* --- sub-section PARTICIPATE */
.participate { margin-top: calc(var(--mb-base) * 8.5);}

/* --- section TRIAL TREATMENTS */
.trial-treatments { padding: 14rem 0; color: #fff; background: var(--dark-teal);}
.trial-treatments .container > .row { gap: 5rem;}
.trial-treatments .list-group { margin-bottom: calc(var(--mb-base) * 5); max-width: 600px;}
.trial-treatments .list-group .row { gap: 1rem; align-items: center;}
.trial-treatments .list-ico { flex: 0 0 12.2rem;}
.trial-treatments .list-text { flex-grow: 1; font-weight: 600;}
@media (max-width:768px) {
  .trial-treatments { padding: 0 0 8rem; border-radius: 3.5rem;}
  .trial-treatments .container > .row { flex-direction: column-reverse;}
  .img-trial-treatments { position: relative; margin: 0 -20px; width: 100vw; max-width: none; height: 87.8vw; object-position: -23vw top; object-fit: cover; border-radius: 3.5rem 3.5rem 0 0;}
  .trial-treatments .list-group { max-width: 240px; margin-left: auto; margin-right: auto; text-align: center;}
  .trial-treatments .list-group .row:not(:last-child) { margin-bottom: 2rem;}
}
@media (min-width:769px) and (max-width:1109px) {}
@media (min-width:769px) {
  .trial-treatments { border-radius: 0 20rem 0 20rem;}
  .trial-treatments .list-group .row { gap: 2rem;}
  .trial-treatments .list-text { padding-top: .5em;}
}
@media (min-width: 1425px) {
  .img-trial-treatments { max-width: none; width: calc(100% + (50vw - 1425px / 2 - 60px)); margin-right: calc(-1 * (50vw - 1425px / 2 - 60px)); margin-top: .6rem; margin-bottom: calc(var(--mb-base) * 2);}
}

/* --- section TRIALTESTS */
.trial-tests { padding: 12rem 0;}
.trial-tests .list-group { flex-wrap: wrap; gap: 5rem; justify-content: space-between;}
.trial-tests .list-group .row { flex: 0 0 calc(50% - 2.5rem); gap: 2rem; align-items: center; max-width: 600px;}
.trial-tests .list-group .list-ico { flex: 0 0 10.6rem;}
@media (max-width:768px) {
  .trial-tests .list-group { margin-top: calc(var(--mb-base) * 2);}
  .trial-tests .list-group .row { flex-direction: row;}
}


/* --- section AVTX-009 */
.avtx-009 { border-radius: 3.5rem; background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image: image-set("../img/lotus-bg.webp" 1x, "../img/lotus-bg@2x.webp" 2x);
}
@media (min-width:769px) {
  .avtx-009 { padding: 17rem 0; border-radius: 20rem 0 20rem 0;}
}


/* --- section FAQ */
.faq { padding-top: 6rem;}
.faq-item { margin-bottom: calc(var(--mb-base) * 4); }


/* --- section MORE */
.more { border-radius: 3.5rem; background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image: image-set("../img/lotus-bg.webp" 1x, "../img/lotus-bg@2x.webp" 2x);
}
.more .row { gap: 5rem;}

@media (max-width:1109px) {
  .more { padding-top: 0;}
  .more .row { flex-direction: column-reverse;}
  .more .section-head { margin-bottom: calc(var(--mb-base) * 1.5);}
  .img-more {
    position: relative;
    margin: 0 -50px 3.5rem;
    width: 100vw;
    max-width: none;
    height: 59.15vw;
    object-position: center top;
    object-fit: cover;
    border-radius: 3.5rem 3.5rem 0 0;
  }
}
@media (max-width:768px) {
  .img-more { margin-left: -20px; margin-right: -20px;}
}
@media (min-width: 769px) and (max-width: 1109px) {
  .img-more { margin: -5rem auto 0; width: 769px; height: 455px; border-radius: 3.5rem;}
}
@media (min-width:1110px) {
  .more { padding: 15rem 0; border-radius: 20rem 0 20rem 0;}
  .more .row { justify-content: space-between;}
  .img-more { margin-top: calc(-10rem - 6vw);}
}
@media (min-width: 1425px) {
  .img-more { max-width: none; width: calc(100% + (50vw - 1425px / 2 - 60px)); margin-right: calc(-1 * (50vw - 1425px / 2 - 60px));}
}


/* --- section RESOURCES */
.resources .row { gap: 1rem;}
.resources .btn-set .btn { text-align: left;}
.resources .row-2 { margin-top: calc(var(--mb-base) * 2);}
.resources .row-2 .btn-set { max-width: 630px; display: flex; flex-wrap: wrap; justify-content: space-between;}
@media (max-width: 768px) {
  .resources .section-head { margin-bottom: var(--mb-base);}
}
@media (min-width:769px) {
  .resources .row { gap: 5rem;}
  .resources .row-2 { margin-top: calc(var(--mb-base) * 6);}
}


/* --- footnote */
.footnote { margin-top: calc(var(--mb-base) * 5); font-size: 1.4rem; line-height: 1.5;}
@media (min-width:769px) {
  .footnote { margin-top: calc(var(--mb-base) * 10);}
}

/*--------------------------------------------------------------
=== POPUP ===
--------------------------------------------------------------*/
.popup { visibility: hidden; z-index: 10000; position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.85); transition: .25s ease-in-out; opacity: 0;}
.popup.visible { visibility: visible; opacity: 1;}
.popup-wrapper { position: relative; margin-top: -10rem; padding: 5rem; width: 70rem; max-width: 95vw; text-align: center; background: #fff; transition: .5s ease-in-out;}
.popup.visible .popup-wrapper { margin-top: 0;}

.popup .close { position: absolute; right: 1.2rem; top: 1.2rem; width: 2rem; height: 2rem; cursor: pointer; text-indent: -100rem; overflow: hidden;}
.popup .close:before, .popup-wrapper .close:after {content: ""; position: absolute; left: 0; top: 50%; margin-top: -1px; width: 110%; height: 2px; transition: .25s ease-in-out; background: var(--dark-teal);}
.popup .close:before { transform: rotate(45deg);}
.popup .close:after { transform: rotate(-45deg);}
.popup .close:hover:before, .popup-wrapper .close:hover:after { background: var(--dark-maroon);}

.popup-title { color: var(--dark-maroon)}
.popup .btn-row { margin-top: calc(var(--mb-base) * 3)}


/*--------------------------------------------------------------
=== ANIMATION ===
--------------------------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.slideInTop {
  -webkit-animation-name: slideInTop;
  animation-name: slideInTop;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    transform: translateX(50px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}