@charset "UTF-8";
/* CSS Document */
body {
 padding: 0;
 margin: 0;
 font-family: 'Montserrat', sans-serif !important;
 color: #434343 !important;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 display: flex;
 flex-direction: column;
}

body.disable-scroll {
 overflow: hidden;
}

/* General */

section {
 position: relative;
 float: left;
 width: 100%;
 height: auto;
 display: flex;
}

p {
 font-size: 16px;
 color: #404041;
}

h2 {
 font-size: 24px !important;
 color: #6f5091 !important;
 font-weight: 700 !important;
}

h3 {
 font-size: 22px !important;
 color: #6f5091 !important;
 font-weight: 700 !important;
}

h4 {
 font-size: 22px;
 color: #6f5091 !important;
 font-weight: 500 !important;
}

h5 {
 font-size: 22px !important;
 color: #6f5190 !important;
 font-weight: 200 !important;
}

h6 {
 font-size: 18px !important;
 color: #000000 !important;
}

a {
 font-size: 16px;
 font-weight: 500;
}

a.button {
 position: relative;
 font-size: 14px;
 width: auto;
 min-width: 272px;
 padding: 10px;
 cursor: pointer;
 font-weight: 600 !important;
 text-align: center;
 text-decoration: none !important;
 background-color: #af1685;
 border: solid 1px #af1685 !important;
 color: #fff !important;
 transition: .2s ease-out;
}

a.button:hover{
 text-decoration: none !important;
 background-color: #ffffff !important;
    border: solid 1px #af1685 !important;
 color: #af1685 !important;
 box-shadow: 0 3px 3px 0 rgb(33 33 33 / 14%), 0 1px 7px 0 rgb(33 33 33 / 12%), 0 3px 1px -1px rgb(33 33 33 / 20%) !important;
}

/* a.button:after {
 content: "›";
 font-size: 18px;
 margin-left: 5px
} */

.button-container {
 width: 100%;
 height: auto;
 position: relative;

 display: flex;
 align-items: center;
 justify-content: center;
}

/* ------- NAVIGATION ------- */
.navigation {
 width: 100%;
 height: 250px;
 position: relative;
}

.navigation-image-container {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
}

.navigation-image-shell {
 width: auto;
 height: 100%;
 position: relative;
}

.navigation-image-shell .mktoGen.mktoImg {
 display: block !important;
}

#nav-bg-image {
 width: 1300px;
 height: 100%;
 position: relative;
}

.navigation-image-border {
 width: 100%;
 height: 8px;
 bottom: 0;
 left: 0;
 position: absolute;
 background-color: #6f5091;
}

#nav-bg-image-mobile {
 width: auto;
 height: 100%;
 position: relative;
 display: none;
}

@media screen and (max-width: 750px) {
 .navigation-image-container {
  width: 100%;
 }
 #nav-bg-image {
  display: none;
 }
  #nav-bg-image-mobile {
  display: block;
 }
}

.top-navigation, #top-navigation-rich-text, #top-navigation-rich-text div {
 width: 100%;
 height: auto;
 position: relative;
 height: 40px;
 display: flex;
 align-items: flex-end;
 justify-content: flex-end;
}

.top-navigation a {
 width: auto;
 min-width: 50px;
 height: 100%;
}

.top-navigation a:hover {
 text-decoration: none !important;
}

.top-navigation .fab {
 width: 50px;
 height: 100%;
 color: #af1685;
  font-size: 20px;

 display: flex;
 align-items: center;
 justify-content: center;
}

.top-navigation .button {
 width: auto;
 height: 100%;
 position: relative;
 font-weight: 500;
 min-width: auto;
 font-size: 15px;
 padding: 0 30px;
 text-decoration: none;
 color: #fff;
 background-color: #af1685;
 border-radius: 0;

 display: flex;
 align-items: center;
 justify-content: center;
}

.top-navigation .button:hover {
 background-color: #af1685 !important;
 color: #fff !important;
 box-shadow: none !important;
}

.bottom-navigation {
 width: 100%;
 height: auto;
 position: relative;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.bottom-navigation #bottom-navigation-logo {
 width: auto;
 max-width: 100px;
 height: 100%;
 position: relative;
 object-fit: contain;
}

#bottom-navigation-rich-text {
 width: auto;
 height: 100%;
 position: relative;
 border-top: solid 1px #6f5190;
 border-bottom: solid 1px #6f5190;
 display: flex;
 align-items: center;
}

#bottom-navigation-rich-text a {
 margin-left: 20px;
 text-decoration: none;
 color: #6f5190;
 font-size: 15px;
 font-weight: 500;
}

#bottom-navigation-rich-text a:first-child {
 margin-left: 0;
}

#bottom-navigation-rich-text a:hover {
 color: #000;
}

.mobile-menu-open {
 width: 50px;
 height: 100%;
 position: relative;
 cursor: pointer;

 display: none;
 align-items: center;
 justify-content: center;
 background-image: url(https://labs.etumos.com/rs/803-AEG-857/images/biomarin-non-branded-menu-icon.png);
 background-size: 30px 25px;
 background-repeat: no-repeat;
 background-position: center;
}


@media screen and (max-width: 1100px) {

 .navigation .container {
  max-width: 100% !important;
  padding-right: 10px !important;
    padding-left: 10px !important;
 }

 .top-navigation, #bottom-navigation-rich-text {
  display: none;
 }

 .mobile-menu-open {
  display: flex;
 }

 #bottom-navigation-logo {
  height: 42px !important;
 }
}

/* ------- MOBILE NAVIGATION ------- */

.mobile-navigation {
 width: 100%;
 height: 100%;
 top: 100%;
 left: 100%;
 position: fixed;
 transition: all ease-in-out .6s;

 display: flex;
 flex-direction: column;
 overflow: hidden;
 z-index: 99999;
 pointer-events: none;
 transition: opacity 200ms linear;
 opacity: 0;
}

.mobile-navigation.open {
 top: 0%;
 left: 0%;
 opacity: 1;
 pointer-events: auto;
}

.mobile-navigation-header {
 width: 100%;
 position: relative;
 height: 60px;
 min-height: 60px;
 padding-right: 10px;
 padding-left: 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: #fff;
}

.mobile-navigation-header #mobile-navigation-logo {
 width: auto;
 max-width: 100px;
 height: 42px;
 position: relative;
 object-fit: contain;
}

.mobile-menu-close {
 width: 50px;
 height: 100%;
 position: relative;
 cursor: pointer;
 margin-top: -1px;

 align-items: center;
 justify-content: center;
 background-image: url(https://labs.etumos.com/rs/803-AEG-857/images/biomarin-non-branded-menu-icon-close.png);
 background-size: 30px 25px;
 background-repeat: no-repeat;
 background-position: center;
}

.mobile-container {
 width: 100%;
 height: auto;
 flex-grow: 1;
 position: relative;
 overflow-y: scroll;
}

.mobile-container-background {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 background-color: rgba(0,0,0,.5);
}

.mobile-link-container, #top-navigation-rich-text-mobile, #top-navigation-rich-text-mobile div {
 width: 100%;
 height: auto;
 position: relative;
 background-color: #fff;
 display: flex;
 flex-direction: column;
}

.mobile-link-container a {
 width: 100%;
 height: auto;
 border-top: solid 1px #6f5190;
 text-decoration: none;
}

.mobile-link-container a:hover {
 text-decoration: none !important;
}

#top-navigation-rich-text-mobile {
 width: 100%;
 height: auto;
 position: relative;
}

#top-navigation-rich-text-mobile a {
 background-color: #fff;
 padding: 20px 0 20px 7px;
 color: #6f5190;
 font-size: 20px;
 font-weight: 500;
 line-height: 20px;
}

.mobile-social-container {
 width: 100%;
 height: auto;
 position: relative;
 background-color: #fff;
 border-top: solid 1px #6f5190;
}

#mobile-social-navigation-rich-text, #mobile-social-navigation-rich-text div {
 width: 100%;
 height: auto;
 min-height: 100px;
 position: relative;

 display: flex;
 align-items: center;
 justify-content: center;
}

.mobile-social-container .fab {
 width: 60px;
 height: 100%;
 color: #af1685;
  font-size: 30px;

 display: flex;
 align-items: center;
 justify-content: center;
}

.mobile-social-container a:hover {
 text-decoration: none !important;
}

/* ------- CONTENT MOD 1 - C:1 ------- */

.content-mod-1 {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

/* ------- CONTENT MOD 2 - C:2 ------- */
.content-mod-2 {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.profile-card {
 width: 100%;
 height: auto;
 padding: 10px 0;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.profile-card-copy {
 width: 100%;
 height: auto;
 padding: 10px 0;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.profile-card p {
 max-width: 300px;
}

.profile-card .mktoImg {
 width: 100%;
 height: auto;
 position: relative;
}

.profile-card img {
 width: 100%;
 max-width: 100%;
 min-width: 100%;
 height: auto;
 position: relative;
 margin-bottom: 10px;
 overflow: hidden;
}

.profile-name {
 width: 100%;
 height: auto;
 margin-bottom: 5px;
 position: relative;
 font-weight: 400 !important;
 color: #38312C !important;
 font-size: 24px !important;
 text-align: center;
}

.content-mod-2 a {
 text-decoration: none;
}

.content-mod-2 a:hover {
 text-decoration: none;
}

/* ------- CONTENT MOD 3 - C:3 ------- */
.content-mod-3 {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.content-mod-3 p {
 font-size: 14px !important;
}

.banner {
 width: 100%;
 height: auto;
 min-height: 20px;
 background-color: #041a72;
 display: flex;
 position: relative;
 overflow: hidden;
}

.banner-image-container {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
}

.banner img {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 object-fit: cover;
}

.banner-rich-text {
 width: 100%;
 position: relative;
 display: flex;
 align-items: center;
 padding: 20px 20px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.banner-rich-text h3 {
 color: #fff !important;
}

.rich-text {
 width: auto;
 position: relative;
 flex-grow: 1;
 /* padding-right: 20px; */
}

.link-text {
 width: auto;
 position: relative;
 color: #fff;
}

.link-text a {
 color: #fff;
 text-decoration: underline;
 white-space: nowrap;
}

.link-text a:hover {
 color:inherit;
 text-decoration: underline;
}

.combo-container {
 width: 100%;
 height: auto;
 position: relative;
 margin-top: 5px;
 background-color: #f6f6f6;
 border-bottom: 5px solid #6f5091;

 display: flex;
 align-items: center;
 justify-content: center;
}

.combo-rich-text {
 width: 100%;
 height: 100%;
 position: relative;
 padding: 20px;
}

.combo-rich-text a {
 color: #af1685;
 text-decoration: underline;
}

.combo-image {
 width: 100%;
 height: 100%;
 position: relative;
 object-fit: cover;
}

.combo-size-large .mktoImg {
 width: 100%;
 height: 100%;
}

.combo-size-large img {
 width: 100%;
 height: 100%;
 position: relative;
 object-fit: cover;
}

@media (max-width: 991px) {
 .combo-container .combo-size-large {
  order: 1;
 }
 .combo-container .combo-size-small {
  order: 2;
 }
}

/* ------- CONTENT MOD 4 - C:4 ------- */
.content-mod-4 {
 width: 100%;
 height: auto;
 position: relative;
 padding: 60px 0;
}

/* ------- CONTENT MOD 5 - C:5 ------- */
.content-mod-5 {
 width: 100%;
 height: auto;
 position: relative;
 padding: 60px 0;
}

.form-container {
 width: 100%;
 height: auto;
 margin-top: 40px;
 position: relative;
 display: flex;
 justify-content: center;
}

.c5-form {
 max-width: 940px;
}

/* -------ISI ------- */
.isi {
 width: 100%;
 height: auto;
 position: relative;
 background-color: #fff;
}

.isi-banner {
 width: 100%;
 height: 68px;
 min-height: 68px;
 display: flex;
 align-items: center;
 padding: 10px 0;
 position: relative;
 background: #d9d9d9;
}

.isi-banner-container {
 width: 100%;
 height: auto;
 display: flex;
 justify-content: center;
 align-items: center;
}

.isi-banner-copy {
 width: auto;
 flex-grow: 1;
 padding: 10px 0;
 color: #041a72;
 font-size: 22px;
 line-height: normal;
 font-weight: 700;
}

.isi-large, .isi-small {
 margin-top: 20px;
 margin-bottom: 20px;
}

@media (max-width: 767px) {
 .isi-small {
  order: 1;
 }
 .isi-large {
  order: 2;
 }

 .isi-banner-copy {
  font-size: 14px;
 }
}
/* ------- CONTENT MOD 6 - C:6 ------- */
.content-mod-6 {
 width: 100%;
 height: auto;
 position: relative;
 padding: 60px 0;
}

.card {
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
}

.card-banner-text {
 width: 100%;
 height: auto;
 background: #404041;
 padding: 20px 15px;
 min-height: 80px;
}

.card-banner-text .rich-text {
 color: #fff;
 font-size: 18px;
  font-weight: 700;
 text-align: center;
}

.card-image {
 width: 100%;
 height: 180px;
  position: relative;
}

.card-image img {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 object-fit: cover;
}

.card-body-text {
 background: #f6f6f6;
 padding: 15px 10px;
 min-height: 255px;
 margin-bottom: 50px;
 position: relative;

 display: flex;
 flex-direction: column;
}

.card-body-text .button-container a {
 width: 100%;
}

.rich-text {
 width: 100%;
 flex-grow: 1;
 position: relative;
}

/* ------- CONTENT MOD 7 - C:7 ------- */
.content-mod-7 {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.mod-7-container {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;
 align-items: center;
}

.mod-7-card {
 width: 100%;
 height: auto;
 position: relative;
 padding: 0 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.content-mod-7 .col-12:not(:first-child) {
  border-left: 1px solid #333333;
 border-top: none 0px transparent;
}

.mod-7-card .mod-7-image {
 margin-top: 40px;
}

.mod-7-card .rich-text {
 margin-top: 10px;
 text-align: center;
}

.mod-7-card .button-container {
 margin: 40px 0;
}

.mod-7-card .button-container a {
    width: 100%;
}

.mod-7-card img {
 width: auto;
 max-width: 100%;
 height: auto;
 position: relative;
 margin-bottom: 10px;
 overflow: hidden;
}

.content-mod-7 .banner {
 margin-bottom: 40px;
}


.c-7-banner-text-left {
 width: auto;
 height: auto;
 position: relative;
 flex-grow: 1;
}

.c-7-banner-text-right {
 width: auto;
 height: auto;
 min-width: 140px;
 position: relative;
 text-align: right;
}

.c-7-banner-text-right .fab {
 margin-left: 20px;
 color: #fff;
 font-size: 30px;
}

@media (max-width: 767px) {
 .content-mod-7 .banner-rich-text {
   flex-wrap: wrap;
  }

 .c-7-banner-text-right {
  width: 100%;
   text-align: center;
   margin-top: 20px
 }
}

@media (max-width: 991px) {
 .content-mod-7 .col-12:not(:first-child) {
  border-left: none 0px transparent;
  border-top: 1px solid #333333;
   margin-top: 20px;
 }
}

/* ------- BANNER A ------- */
.banner-a {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.banner-a-content {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 background-color: #eee;
}

.banner-a-image {
 width: 40%;
 height: 100%;
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: left;
 justify-content: left;
}

.banner-a-image img {
 width: auto;
 height: 100%;
 min-height: 100%;
 position: relative;
 object-fit: contain;
}

.banner-a-text-container {
 width: 60%;
 height: 100%;
 position: relative;
 display: flex;
 flex-direction: column;
 padding: 20px;
}

.banner-a-text-container .fab{
 font-size: 20px;
 margin-right: 20px;
 color: #af1685;
}

@media (max-width: 991px) {
 .banner-a-text-container {
  width: 100%;
 }
 .banner-a-image {
  width: 100%;
 }
}

/* ------- BANNER B ------- */
.banner-b {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.banner-b-content {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;

 border-top: solid 2px#6f5091;
 border-bottom: solid 2px#6f5091;
 padding: 5px 0px;
}

.banner-b-content-block {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 background-color: #6f5091;
 padding: 30px 30px;
}

.banner-b-text {
 width: auto;
 flex-grow: 1;
 position: relative;
 color: #fff;
 font-size: 20px;
 text-align: center;
}

.banner-b-text p {
 color: #fff;
}

.banner-b-cta-container {
 width: auto;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* .banner-b-cta-container .button:hover {
 text-decoration: none !important;
 color: #fff !important;
} */

@media (max-width: 767px) {
 .banner-b-content-block {
  justify-content: center;
 }
 .banner-b-text {
  width: 100%;
 }

 .banner-b-cta-container {
  width: 100%;
 }
}

/* ------- BANNER C ------- */
.banner-c {
 width: 100%;
 height: auto;
 padding: 60px 0;
 position: relative;
}

.banner-c-content {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 background-color: #eee;
}

.banner-c-text, .banner-c-text div {
 width: 100%;
 height: auto;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.banner-c-content {
 width: 100%;
 height: auto;
 position: relative;
 padding: 60px 20px;
 /* margin: 0 16px; */
}

.banner-c-bg-image, .banner-c-bg-image img{
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 object-fit: cover;
}

/* .banner-c-text .button:hover {
 text-decoration: none !important;
 color: #fff !important;
} */

/* ------- FOOTER ------- */
.footer {
 width: 100%;
 height: auto;
 position: relative;

 background: #eeeff2;
  color: #000;
  font-size: 14px;
  padding: 43px 0;
}

.footer a, .footer p{
  font-size: 14px;
}

.footer-logo-container {
 width: 100%;
 height: auto;
 position: relative;

 display: flex;
 justify-content: flex-end;
}

.footer-logo-container img {
 width: auto;
 height: auto;
 max-width: 240px;
 margin-bottom: 20px;
 position: relative;
}

#footer-social-content .fab {
 padding: 10px;
 font-size: 30px;
 text-align: left;
}

.footer-disclaimer-content {
 text-align: right;
}

.footer p {
 margin-bottom: 5px;
 color: #000;
 text-align: right;
}

.footer a {
 color:#af1685;
 font-weight: 500;
}

.footer a:hover {
 text-decoration: none !important;
 color:#af1685;
}

.footer .col-left {
 margin-top: 30px;
 text-align: left;
}

.footer .col-right {
 margin-top: 30px;
 text-align: right;
}

.footer .col-right span {
 margin: 0 12px;
}

.footer .nav {
 display: flex;
 margin-top:  20px;
}

.footer .d-md-inline, .footer .d-lg-inline  {
 padding: 0 10px;
}

@media (max-width: 991px) {
 .footer-logo-container {
  justify-content: center;
 }
 .footer ul li {
  width: 100%;
  text-align: center;
 }
 .footer p {
  text-align: center;
 }
 .footer .nav {
  display: flex;
  justify-content: center;
 }
 #footer-social-content {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
 }
}

/* -------ISI ------- */
.fixed-isi {
 width: 100%;
 height: 100%;
 position: fixed;
 top: calc(100% - 120px);
 background-color: #fff;
 transition: top ease-in-out 400ms;
}

.fixed-isi.hide {
 visibility: hidden;
 opacity: 0;
 height: 0;
 left: 100%;
}

.fixed-isi .arrow-container {
 width: 60px;
 min-width: 60px;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}

.fixed-isi .arrow-container .arrow {
 width: 38px;
 height: 18px;
 background-size: cover;
 background-image: url(https://labs.etumos.com/rs/803-AEG-857/images/biomarin-palynziq-isi-arrow.png);
 position: relative;
 transform: rotate(180deg);
}

.isi-scroll-container {
 width: 100%;
 height: calc(100% - 68px);
 padding-bottom: 10px;
 position: absolute;
 overflow-y: scroll;
}

.fixed-isi.open {
 top: 0%;
}

.fixed-isi.open .arrow {
 transform: rotate(0deg);
}

/*-------------- Misc Styles ----------------*/
sup { 
 line-height: 0; font-size: 75%; 
}