<div id="masthead" class="masthead masthead--corporate">
<div class="masthead__mobile ">
<div class="masthead__mobile__main">
<div class="masthead__logo">
<a href="http://localhost:3000?nopop" title="Home">
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="-194 390.9 206 60">
<style>.st0{fill:#18296c}.st1{fill:#1a93e5}</style>
<path class="st0" d="M-150.1 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-8.3c0-.4.4-.6.7-.6.3 0 .5.3.6.6v8.3zM-166.1 393.3s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6"/><path class="st0" d="M-175.5 397.2c-8.3 3.6-12.5 7.3-12.5 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5 5.6-9.3 10.8-12.3m2.8 25.2h-.1c-.7-.2-16.3-5.9-16.1-13.9.1-5.6 7.7-10.8 22.7-15.5.2-.1.5.1.6.3.1.2-.1.4-.3.5-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.2-.3.4-.6.5.1 0 .1 0 0 0z"/><path class="st0" d="M-185.6 447.4s40.3-13.3 6.9-28.2c0 .1 39.8 15-6.9 28.2"/><path class="st0" d="M-167.3 426.2c1.5 1.5 2.3 3.6 2.3 5.8-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7.1-2.5-1.6-4.9-4-6.9m-18.3 21.7c-.2 0-.4-.1-.4-.3-.1-.2 0-.5.3-.5.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.3 16.1 14.3-.2 5.5-8 10.5-23.1 14.7.1 0 0 0 0 0M-109.9 416.5c0 2.2-.6 3.1-2.8 3.1h-11.9v-7.3c0-2 1-3.1 3.6-3.1h8.3c2.2 0 2.9.9 2.8 3.1v4.2zm3.5-10.7h-28.9v26.6h10.7V423h18.3c4.5 0 7.1-1 7.1-5.4v-6.4c-.1-4.4-2.7-5.4-7.2-5.4M-151.2 405.8h10.7v26.6h-10.7zM-62.3 426.9c0 3-.9 5.5-7 5.5h-24.3V429h18.1c1.3.1 2.4-.9 2.5-2.1v-3.3c0-2-.9-2.9-2.7-2.9h-14.1c-4.8 0-6.2-2.3-6.2-5.2v-4.9c0-2.9 2.3-4.8 6.2-4.8h23.5s-.3 3.4-4.5 3.4h-11.8c-2.2 0-2.8 1.3-2.8 2.7v2.5c0 1.6.6 2.8 2.6 2.8H-69c5.3 0 6.7 2.1 6.7 5.9v3.8zM-59 432.4v-26.6h29.1v3.5h-15.6c-1.8 0-2.8.7-2.8 2.8v5.2H-33s-.3 3.4-4.5 3.4h-10.8v5.5c0 2.1 1 2.8 2.7 2.8h15.7v3.4H-59zM.9 432.4c-2.5 0-4.4-1-6.3-3.2l-16-18.3h-.1v21.5h-4.9v-26.6h9.8c1.8-.1 3.6.6 4.9 2 1.3 1.6 16.6 19.1 16.6 19.1H5v-21.1h4.9v26.6h-9zM-148.3 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6V443c-.1-1-1-1.7-2-1.6-.8.1-1.5.8-1.6 1.6v3.8c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6zM-140.3 440.8c0-.4.4-.6.7-.6.3 0 .5.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6V443c-.2-1-1.1-1.6-2.1-1.5-.7.1-1.3.7-1.5 1.5v3.8c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-6zM-129.2 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6-1.6 0-2.1 1.4-2.1 2.6-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-125 441.2c-.1-.1-.1-.3-.1-.5 0-.3.3-.5.6-.5s.6.2.7.4l1.8 4.9 1.8-4.9c.1-.3.4-.5.7-.4.3 0 .6.2.6.5 0 .2-.1.3-.1.5l-2.2 5.7c-.1.3-.3.5-.7.5s-.6-.2-.7-.5l-2.4-5.7zM-114.9 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.2 1.4-2.2 2.6c0 1.2.6 2.6 2.2 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.6c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v6zM-109.4 438.7c0-.4.3-.6.6-.6.4 0 .6.3.6.6v1.5h.5c.4 0 .7.2.7.5s-.2.5-.7.5h-.5v5.5c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.5zM-104.6 446.7c0 .3-.2.6-.6.6h-.1c-.3 0-.6-.2-.6-.5v-6.1c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v6.1zm-.6-9c.4 0 .8.2.8.6 0 .4-.2.8-.6.8h-.2c-.4 0-.8-.2-.8-.6 0-.4.2-.8.6-.8h.2M-99.7 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-94.8 440.8c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-.1l-.2-6zM-81.4 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.7c0-.8.7-1.5 1.5-1.5H-80.6c.3 0 .7.2.7.5s-.2.5-.7.5h-.3c-.4 0-.5.2-.5.5v1.7h.8c.4 0 .7.2.7.5s-.2.5-.7.5h-.8v5.5zM-76.1 446.3c1.6 0 2.2-1.4 2.2-2.6 0-1.2-.6-2.6-2.2-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-71.3 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.3 0 .7.2.7.5v.1c0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-6zM-59.4 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m-3.4-5.5c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.7 1.3-1.1 2.1-1 2 .2 3.5 1.9 3.3 3.9-.2 1.7-1.5 3.1-3.3 3.3-.8 0-1.6-.4-2.1-1v3.1c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-8.7zM-51.5 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c0 1.2.5 2.6 2.1 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v5.9zM-45.9 438.7c0-.4.4-.6.7-.6.3 0 .5.3.6.6v1.5h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5v-1.5zM-41.1 446.7c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6c0-.4.3-.6.6-.6.4 0 .7.3.7.6v6zm-.7-9c.4 0 .7.4.7.8s-.4.7-.8.7-.7-.3-.7-.7c0-.5.4-.8.8-.8M-34.3 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.2.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.9.1-3.5-1.3-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.3 1.5 3.3 3.4v.1c0 .4-.2.6-.7.6l-4.8-.1zM-31.6 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6l-.1-6zM-23.3 438.7c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v1.6h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-5.6h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5l-.1-1.5zM-12.9 440.1c1.3 0 2.1.4 2.1.9 0 .3-.3.5-.5.5-.5 0-.7-.4-1.6-.4-1.4.2-2.4 1.5-2.2 3 .2 1.2 1.1 2.1 2.2 2.2.9 0 1.1-.4 1.6-.4.2 0 .5.1.5.4v.1c0 .4-.7.9-2.1.9-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4M-6.3 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m3.3.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.5v6zM-1.2 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.4 0 .7.2.7.6 0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.7-.3-.7-.6v-6zM8.6 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.3.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.8.1-3.5-1.2-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.4 1.5 3.4 3.3v.1c0 .4-.2.6-.7.6H4.3z"/><path class="st1" d="M-192.4 424.4s40.3-13.3 6.9-28.2c0 0 39.8 14.9-6.9 28.2"/><path class="st1" d="M-174.1 403.1c1.5 1.5 2.3 3.6 2.3 5.7-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7 0-2.4-1.7-4.8-4-6.8m-18.3 21.7c-.2 0-.4-.2-.4-.4s.1-.4.3-.4c.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.2 16.1 14.3-.2 5.5-8 10.5-23 14.7h-.1"/><path class="st1" d="M-159.5 414.4s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6M-161.7 406.6c.8 1.7.1 3.7-1.6 4.5-.1.1-.3.1-.5.2-1.8.7-3.3-.9-3.7-2.1-.4-1.9 1.7-3.1 3.9-3.5.8-.2 1.6.2 1.9.9"/><path class="st1" d="M-168.9 418.3c-8.3 3.6-12.5 7.3-12.6 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5.1 5.6-9.3 10.9-12.3m2.8 25.1h-.1c-.7-.2-16.3-5.9-16.1-14 .1-5.6 7.7-10.8 22.7-15.5.2-.1.5 0 .5.3.1.2 0 .5-.3.6-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.3-.3.5-.5.5z"/>
</svg> </a>
</div>
<div class="snowball"></div>
<button class="mobile-nav__toggle">
<svg id="nav-trigger" class="nav-trigger" viewbox="0 0 24 24" width="30">
<path id="burger" d="M5.18 10.97H20v2H5.18zM5.18 16.97h11.06v2H5.18zM5.18 4.97h11.06v2H5.18z" />
<path id="cross" d="M5.65 7.443L7.064 6.03l10.48 10.48-1.415 1.414zM5.644 16.509l3.931-3.932 1.414 1.415-3.931 3.931zM12.194 9.956l3.931-3.932L17.54 7.44l-3.931 3.931z" />
</svg>
</button>
</div>
</div>
<div class="masthead__inner">
<div class="masthead__mobile--scroll-wrapper">
<div class="masthead__upper">
<div class="masthead__widget-area masthead__widget-area--left">
<div class="masthead-country-widget">
<div class="widget-trigger" data-country-trigger>
Ipsen in the world
<span class="widget-arrow-icon"></span>
</div>
<div class="masthead-country-widget__inner">
<div class="masthead-country-widget__inner-er">
<h2></h2>
<ul class="masthead-country-widget__list">
<li class="masthead-country-item"><a href="">Belgium</a></li>
<li class="masthead-country-item"><a href="">France</a></li>
<li class="masthead-country-item"><a href="">United Kingdom</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="masthead__widget-area masthead__widget-area--left">
<div class="masthead-language-widget">
<h2 class="widgettitle">Change Language</h2>
<div class="menu-language-container">
<ul id="menu-language" class="menu">
<li id="menu-item-386" class="site-id-1 mlp-language-nav-item menu-item menu-item-type-mlp_language menu-item-object-mlp_language mlp-current-language-item menu-item-386">
<a rel="alternate" href="http://local.ipsen.com/">English (UK)</a>
</li>
<li id="menu-item-387" class="site-id-2 mlp-language-nav-item menu-item menu-item-type-mlp_language menu-item-object-mlp_language menu-item-387">
<a rel="alternate" href="http://local.ipsen.com/fr/">Français (Algérie)</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="masthead__main">
<div class="masthead__logo">
<a href="http://localhost:3000?nopop" title="Home">
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="-194 390.9 206 60">
<style>.st0{fill:#18296c}.st1{fill:#1a93e5}</style>
<path class="st0" d="M-150.1 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-8.3c0-.4.4-.6.7-.6.3 0 .5.3.6.6v8.3zM-166.1 393.3s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6"/><path class="st0" d="M-175.5 397.2c-8.3 3.6-12.5 7.3-12.5 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5 5.6-9.3 10.8-12.3m2.8 25.2h-.1c-.7-.2-16.3-5.9-16.1-13.9.1-5.6 7.7-10.8 22.7-15.5.2-.1.5.1.6.3.1.2-.1.4-.3.5-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.2-.3.4-.6.5.1 0 .1 0 0 0z"/><path class="st0" d="M-185.6 447.4s40.3-13.3 6.9-28.2c0 .1 39.8 15-6.9 28.2"/><path class="st0" d="M-167.3 426.2c1.5 1.5 2.3 3.6 2.3 5.8-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7.1-2.5-1.6-4.9-4-6.9m-18.3 21.7c-.2 0-.4-.1-.4-.3-.1-.2 0-.5.3-.5.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.3 16.1 14.3-.2 5.5-8 10.5-23.1 14.7.1 0 0 0 0 0M-109.9 416.5c0 2.2-.6 3.1-2.8 3.1h-11.9v-7.3c0-2 1-3.1 3.6-3.1h8.3c2.2 0 2.9.9 2.8 3.1v4.2zm3.5-10.7h-28.9v26.6h10.7V423h18.3c4.5 0 7.1-1 7.1-5.4v-6.4c-.1-4.4-2.7-5.4-7.2-5.4M-151.2 405.8h10.7v26.6h-10.7zM-62.3 426.9c0 3-.9 5.5-7 5.5h-24.3V429h18.1c1.3.1 2.4-.9 2.5-2.1v-3.3c0-2-.9-2.9-2.7-2.9h-14.1c-4.8 0-6.2-2.3-6.2-5.2v-4.9c0-2.9 2.3-4.8 6.2-4.8h23.5s-.3 3.4-4.5 3.4h-11.8c-2.2 0-2.8 1.3-2.8 2.7v2.5c0 1.6.6 2.8 2.6 2.8H-69c5.3 0 6.7 2.1 6.7 5.9v3.8zM-59 432.4v-26.6h29.1v3.5h-15.6c-1.8 0-2.8.7-2.8 2.8v5.2H-33s-.3 3.4-4.5 3.4h-10.8v5.5c0 2.1 1 2.8 2.7 2.8h15.7v3.4H-59zM.9 432.4c-2.5 0-4.4-1-6.3-3.2l-16-18.3h-.1v21.5h-4.9v-26.6h9.8c1.8-.1 3.6.6 4.9 2 1.3 1.6 16.6 19.1 16.6 19.1H5v-21.1h4.9v26.6h-9zM-148.3 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6V443c-.1-1-1-1.7-2-1.6-.8.1-1.5.8-1.6 1.6v3.8c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6zM-140.3 440.8c0-.4.4-.6.7-.6.3 0 .5.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6V443c-.2-1-1.1-1.6-2.1-1.5-.7.1-1.3.7-1.5 1.5v3.8c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-6zM-129.2 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6-1.6 0-2.1 1.4-2.1 2.6-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-125 441.2c-.1-.1-.1-.3-.1-.5 0-.3.3-.5.6-.5s.6.2.7.4l1.8 4.9 1.8-4.9c.1-.3.4-.5.7-.4.3 0 .6.2.6.5 0 .2-.1.3-.1.5l-2.2 5.7c-.1.3-.3.5-.7.5s-.6-.2-.7-.5l-2.4-5.7zM-114.9 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.2 1.4-2.2 2.6c0 1.2.6 2.6 2.2 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.6c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v6zM-109.4 438.7c0-.4.3-.6.6-.6.4 0 .6.3.6.6v1.5h.5c.4 0 .7.2.7.5s-.2.5-.7.5h-.5v5.5c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.5zM-104.6 446.7c0 .3-.2.6-.6.6h-.1c-.3 0-.6-.2-.6-.5v-6.1c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v6.1zm-.6-9c.4 0 .8.2.8.6 0 .4-.2.8-.6.8h-.2c-.4 0-.8-.2-.8-.6 0-.4.2-.8.6-.8h.2M-99.7 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-94.8 440.8c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-.1l-.2-6zM-81.4 446.7c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.7-.2-.7-.5s.2-.5.7-.5h.5v-1.7c0-.8.7-1.5 1.5-1.5H-80.6c.3 0 .7.2.7.5s-.2.5-.7.5h-.3c-.4 0-.5.2-.5.5v1.7h.8c.4 0 .7.2.7.5s-.2.5-.7.5h-.8v5.5zM-76.1 446.3c1.6 0 2.2-1.4 2.2-2.6 0-1.2-.6-2.6-2.2-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m0-6.2c2-.1 3.7 1.4 3.8 3.4.1 2-1.4 3.7-3.4 3.8-2 .1-3.7-1.4-3.8-3.4v-.2c-.1-1.9 1.3-3.5 3.2-3.6h.2M-71.3 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.3 0 .7.2.7.5v.1c0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6v-6zM-59.4 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m-3.4-5.5c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v.4c.5-.7 1.3-1.1 2.1-1 2 .2 3.5 1.9 3.3 3.9-.2 1.7-1.5 3.1-3.3 3.3-.8 0-1.6-.4-2.1-1v3.1c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-8.7zM-51.5 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c0 1.2.5 2.6 2.1 2.6m3.4.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.6v5.9zM-45.9 438.7c0-.4.4-.6.7-.6.3 0 .5.3.6.6v1.5h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .4-.4.6-.7.6-.3 0-.5-.3-.6-.6v-5.5h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5v-1.5zM-41.1 446.7c0 .4-.3.6-.7.6-.4 0-.6-.3-.6-.6v-6c0-.4.3-.6.6-.6.4 0 .7.3.7.6v6zm-.7-9c.4 0 .7.4.7.8s-.4.7-.8.7-.7-.3-.7-.7c0-.5.4-.8.8-.8M-34.3 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.2.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.9.1-3.5-1.3-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.3 1.5 3.3 3.4v.1c0 .4-.2.6-.7.6l-4.8-.1zM-31.6 440.8c0-.4.3-.6.6-.6.4 0 .6.3.6.6v.3c.5-.6 1.3-1 2.2-.9 1.4-.1 2.6 1 2.7 2.4v4.2c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5V443c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8v3.8c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6l-.1-6zM-23.3 438.7c0-.3.2-.6.6-.6h.1c.3 0 .6.2.6.5v1.6h.5c.4 0 .6.2.6.5s-.2.5-.6.5h-.5v5.5c0 .3-.2.6-.5.6h-.1c-.3 0-.6-.2-.6-.5v-5.6h-.5c-.4 0-.6-.2-.6-.5s.2-.5.6-.5h.5l-.1-1.5zM-12.9 440.1c1.3 0 2.1.4 2.1.9 0 .3-.3.5-.5.5-.5 0-.7-.4-1.6-.4-1.4.2-2.4 1.5-2.2 3 .2 1.2 1.1 2.1 2.2 2.2.9 0 1.1-.4 1.6-.4.2 0 .5.1.5.4v.1c0 .4-.7.9-2.1.9-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4M-6.3 446.3c1.6 0 2.1-1.4 2.1-2.6 0-1.2-.6-2.6-2.1-2.6s-2.1 1.4-2.1 2.6c-.1 1.2.5 2.6 2.1 2.6m3.3.5c0 .3-.3.6-.6.6s-.6-.2-.6-.5v-.5c-.5.7-1.3 1.1-2.1 1.1-2-.1-3.5-1.8-3.4-3.8.1-1.8 1.6-3.3 3.4-3.4.8 0 1.6.3 2.1 1v-.4c0-.3.3-.6.6-.6s.6.2.6.5v6zM-1.2 440.8c0-.4.3-.6.7-.6.4 0 .6.3.6.6v.6c.3-.7 1-1.1 1.8-1.2.4 0 .7.2.7.6 0 .3-.3.5-.8.6-1 .1-1.8 1-1.7 2v3.4c0 .4-.3.6-.6.6-.4 0-.7-.3-.7-.6v-6zM8.6 443.3c.1-1.2-.8-2.2-2-2.3s-2.2.8-2.3 2v.3h4.3zm-4.3.9c0 1.2.9 2.1 2.1 2.1h.2c1.7 0 2.2-.9 2.6-.9.3 0 .5.2.5.5 0 .6-1.6 1.5-3.1 1.5-1.8.1-3.5-1.2-3.6-3.1v-.5c-.1-1.9 1.4-3.5 3.3-3.6h.2c1.9 0 3.4 1.5 3.4 3.3v.1c0 .4-.2.6-.7.6H4.3z"/><path class="st1" d="M-192.4 424.4s40.3-13.3 6.9-28.2c0 0 39.8 14.9-6.9 28.2"/><path class="st1" d="M-174.1 403.1c1.5 1.5 2.3 3.6 2.3 5.7-.2 4.9-5.8 9-11.1 11.8 8.3-3.3 12.6-6.9 12.8-10.7 0-2.4-1.7-4.8-4-6.8m-18.3 21.7c-.2 0-.4-.2-.4-.4s.1-.4.3-.4c.2-.1 19.4-6.5 19.8-15.1.2-4.2-4.1-8.3-13-12.3-.2-.1-.3-.4-.2-.6.1-.2.3-.3.5-.2.7.3 16.4 6.2 16.1 14.3-.2 5.5-8 10.5-23 14.7h-.1"/><path class="st1" d="M-159.5 414.4s-39.8 14.3-6.6 28.6c0 0-39.6-14.1 6.6-28.6M-161.7 406.6c.8 1.7.1 3.7-1.6 4.5-.1.1-.3.1-.5.2-1.8.7-3.3-.9-3.7-2.1-.4-1.9 1.7-3.1 3.9-3.5.8-.2 1.6.2 1.9.9"/><path class="st1" d="M-168.9 418.3c-8.3 3.6-12.5 7.3-12.6 11.2 0 2.5 1.7 4.8 4 6.8-1.5-1.5-2.3-3.6-2.3-5.7.1-5.1 5.6-9.3 10.9-12.3m2.8 25.1h-.1c-.7-.2-16.3-5.9-16.1-14 .1-5.6 7.7-10.8 22.7-15.5.2-.1.5 0 .5.3.1.2 0 .5-.3.6-.2.1-19.2 7-19.5 15.7-.1 4.2 4.2 8.3 12.9 12 .2 0 .4.2.4.4-.1.3-.3.5-.5.5z"/>
</svg> </a>
</div>
<nav class="masthead__nav" tabindex="0">
<ul>
<li class="">
<a class="masthead__primary-link" target="" href="#" data-js-trigger-subnav data-image="https://via.placeholder.com/400x400" data-menu-item="01">Our company</a>
</li>
<li class="">
<a class="masthead__primary-link" target="" href="#" data-js-trigger-subnav data-image="https://via.placeholder.com/400x400" data-menu-item="02">Our science</a>
</li>
<li class="">
<a class="masthead__primary-link" target="" href="#" data-image="https://via.placeholder.com/400x400" data-menu-item="03">Our responsibility</a>
</li>
<li class="">
<a class="masthead__primary-link" target="" href="#" data-js-trigger-subnav data-image="https://via.placeholder.com/400x400" data-menu-item="04">Patients</a>
</li>
<li class="search__trigger">
<a href="#" data-js-trigger-search>
<div class="mobile-text">Search</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 0 24 24">
<path d="M23 21.7l-6-6c1.4-1.5 2.2-3.5 2.2-5.7 0-4.7-3.9-8.6-8.6-8.6C5.9 1.4 2 5.3 2 10s3.9 8.6 8.6 8.6c1.8 0 3.5-.6 4.9-1.5l6.1 6.1 1.4-1.5zM3.9 9.9c0-3.6 3-6.6 6.6-6.6s6.6 3 6.6 6.6-3 6.6-6.6 6.6-6.6-3-6.6-6.6z" />
</svg>
</a>
</li>
</ul>
<div class="search">
<div class="search__field">
<form action="" method="get">
<div class="icon-toggle">
<svg id="close-icon" class="close-icon" viewbox="0 0 24 24" width="30">
<path id="minus" d="M4.18 11.28h15.43v2H4.18z"/>
<path id="cross" d="M5.65 7.443L7.064 6.03l10.48 10.48-1.415 1.414zM5.644 16.509l3.931-3.932 1.414 1.415-3.931 3.931zM12.194 9.956l3.931-3.932L17.54 7.44l-3.931 3.931z" />
</svg>
</div>
<input type="text" name="s" placeholder="I'm searching for...">
<button type="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 0 24 24">
<path d="M23 21.7l-6-6c1.4-1.5 2.2-3.5 2.2-5.7 0-4.7-3.9-8.6-8.6-8.6C5.9 1.4 2 5.3 2 10s3.9 8.6 8.6 8.6c1.8 0 3.5-.6 4.9-1.5l6.1 6.1 1.4-1.5zM3.9 9.9c0-3.6 3-6.6 6.6-6.6s6.6 3 6.6 6.6-3 6.6-6.6 6.6-6.6-3-6.6-6.6z" />
</svg>
</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="global-subnav on-load global-subnav--corporate" data-submenu-item="01">
<button class="global-subnav__section-title mobile-back-button"><span></span>Our company</button>
<div class="global-subnav__intro">
<div class="global-subnav__intro__inner">
<img id="global-subnav-image__1" class="global-subnav__item-image" src="https://via.placeholder.com/400x400">
<div class="global-subnav__intro__text">
Lorem Ipsum dolores sit emit.
</div>
</div>
</div>
<div class="global-subnav__links">
<ul>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__1" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Our company
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__1" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__1" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__1" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__1" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
</ul>
</div>
<div class="global-subnav__cta">
<h3 class="global-subnav__cta__description">
Woohoo!
</h3>
<a href="" class="cta cta--secondary cta--has-shadow" data-shadow-color="0, 111, 238">
<span class="cta__label">This is a CTA
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
</div>
</div>
<div class="global-subnav on-load global-subnav--corporate" data-submenu-item="02">
<button class="global-subnav__section-title mobile-back-button"><span></span>Our science</button>
<div class="global-subnav__intro">
<div class="global-subnav__intro__inner">
<img id="global-subnav-image__2" class="global-subnav__item-image" src="https://via.placeholder.com/400x400">
<div class="global-subnav__intro__text">
Lorem Ipsum dolores sit emit.
</div>
</div>
</div>
<div class="global-subnav__links">
<ul>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__2" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Our science
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__2" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__2" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__2" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
</ul>
</div>
<div class="global-subnav__cta">
<h3 class="global-subnav__cta__description">
Woohoo!
</h3>
<a href="" class="cta cta--secondary cta--has-shadow" data-shadow-color="0, 111, 238">
<span class="cta__label">This is a CTA
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
</div>
</div>
<div class="global-subnav on-load global-subnav--corporate" data-submenu-item="04">
<button class="global-subnav__section-title mobile-back-button"><span></span>Patients</button>
<div class="global-subnav__intro">
<div class="global-subnav__intro__inner">
<img id="global-subnav-image__4" class="global-subnav__item-image" src="https://via.placeholder.com/400x400">
<div class="global-subnav__intro__text">
Lorem Ipsum dolores sit emit.
</div>
</div>
</div>
<div class="global-subnav__links">
<ul>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__4" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Patients
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__4" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
<li class="">
<a data-image="https://via.placeholder.com/400x400" data-image-target="#global-subnav-image__4" href="" class="global-subnav__primary-link">
<span class="global-subnav__primary-link__title">
Hello world
</span>
<p class="global-subnav__primary-link__excerpt">
Lorem Ipsum dolores sit emit.
</p>
</a>
</li>
</ul>
</div>
<div class="global-subnav__cta">
<h3 class="global-subnav__cta__description">
Woohoo!
</h3>
<a href="" class="cta cta--secondary cta--has-shadow" data-shadow-color="0, 111, 238">
<span class="cta__label">This is a CTA
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
</div>
</div>
</div>
%svg-white {
path {
fill: white;
}
}
.masthead--white-ghost {
@extend .masthead--white;
}
/* @masthead */
.masthead {
background-color: rgba(30, 55, 73, 0.6);
backdrop-filter: blur(2px);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 650 !important;
transition: background-color 0.3s;
@media screen and (min-width: 770px) {
// height: 120px;
display: flex;
flex-direction: column;
overflow: initial;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.admin-bar & {
top: 32px !important;
@media screen and (max-width: 782px) {
top: 46px !important;
}
}
@include themify($themes) {
background-color: themed('mastheadBackgroundColor');
}
&--white {
background-color: white !important;
}
&__widget-area {
@media screen and (min-width: 768px) {
&--left {
// margin-right: auto;
}
&--right {
margin-left: auto;
}
}
.menu {
list-style: none;
padding: 0;
margin: 0;
li {
a {
color: white;
}
}
}
}
@media screen and (max-width: 769px) {
.lang-switcher-container {
width: 100%;
height: 100%;
background-color: white;
display: flex !important;
align-items: center;
ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
a {
font-size: 14px;
padding: 10px 30px 10px 10px;
text-align: center;
}
}
.mobile-back-button {
align-self: stretch;
width: 100%;
}
}
}
&__inner {
@media screen and (max-width: 769px ) {
height: 30px;
width: 30px;
overflow: scroll;
right: -110%;
top: 60px;
// display: flex;
width: 100%;
// flex-flow: column-reverse nowrap;
// justify-content: flex-end;
position: absolute;
z-index: 1000;
transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
.masthead__mobile--scroll-wrapper {
display: flex;
flex-flow: column-reverse nowrap;
justify-content: flex-end;
overflow: auto;
min-height: min-content;
}
.masthead__nav ul li,
.masthead__middle div,
.masthead__dropdown,
.masthead__widget-area,
.help-trigger {
opacity: 0;
transform: scale(0.9);
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
&.mobile-nav--is-open {
height: auto;
min-height: 100%;
width: 100%;
right: 0;
.masthead__nav {
ul li {
opacity: 1;
transform: scale(1);
@for $i from 1 to 10 {
&:nth-child(#{$i}) { transition-delay: #{$i*0.1s + 0.3s} }
}
// this is the search bar thats visually first thanks to flexbox
&.search__trigger {
transition-delay: 0.3s !important;
}
}
}
.masthead__upper {
.masthead__dropdown,
.masthead__widget-area,
.help-trigger {
opacity: 1;
transform: scale(1);
&:nth-of-type(1) {
transition-delay: 1s;
}
&:nth-of-type(2) {
transition-delay: 1.15s;
}
&:last-child {
transition-delay: 1.45s;
}
.hasMiddle & {
&:nth-of-type(1) {
transition-delay: 1.4s;
}
&:nth-of-type(2) {
transition-delay: 1.5s;
}
&:last-child {
transition-delay: 1.6s;
}
}
.header-cta {
width: 100%;
min-height: 30px;
a {
display: block;
height: 100%;
span {
height: 100%;
padding-right: 2rem;
&:after {
position: absolute;
right: 0;
}
}
}
}
}
}
.masthead__middle div {
opacity: 1;
transform: scale(1);
@for $i from 1 to 8 {
&:nth-child(#{$i}) { transition-delay: #{$i*0.1s + 1s} }
}
}
}
.masthead__logo {
display: none;
}
.animate {
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
&.fadeout {
.animate {
opacity: 0 !important;
transition-delay: 0s !important;
transform: scale(0.9) !important;
}
}
&.fadein {
.animate {
transition-delay: 300ms !important;
}
}
}
@media screen and (min-width: 770px) {
height: auto !important;
.masthead__widget-area--left {
.masthead-country-widget {
.mobile-header {
display: none !important;
}
}
}
}
.mobile-text {
@media screen and (min-width: 770px) {
display: none;
}
}
}
&__middle {
height: 40px;
background: #f2f2f2;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 1.5rem;
span, a {
@include themify($themes) {
font-family: themed('ctaFont');
font-size: themed('ctaFontSize');
}
}
a {
@include themify($themes) {
color: themed('middleNavColor');
font-weight: normal;
}
}
@media screen and (max-width: 769px) {
flex-direction: column;
height: auto;
padding: 0;
background: #ffffff;
> div {
padding: .7rem 3rem;
background: #f2f2f2;
width: 100%;
margin: 0;
&:first-child {
padding-top: 1.7rem;
}
&:last-child {
padding-bottom: 1.7rem;
}
}
}
}
&__upper {
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-start;
transition: background-color 0.3s;
.masthead__widget-area--right {
justify-self: flex-end;
}
@media screen and (min-width: 770px) {
flex-flow: row;
height: 40px;
.theme-corporate .masthead--white & {
background-color: #003c68;
}
@include themify($themes) {
background-color: themed('mastheadUpperBackgroundColor');
}
// @include poly-padding-x--large;
}
@media screen and (max-width: 769px) {
.header-cta {
padding: 0;
}
}
}
&__main {
display: flex;
align-items: stretch;
justify-content: space-between;
@media screen and (min-width: 770px) {
height: 80px;
padding-bottom: 0;
}
}
&__logo {
padding: 14px 25px 14px 1.5rem;
// flex: 1;
flex-shrink: 0;
min-width: 200px;
max-width: 250px;
@media screen and (min-width: 770px) and (max-width:1024px) {
min-width: 150px;
}
@media screen and (min-width: $monster-screen) {
margin-left: 1.5rem;
}
> a {
display: block;
}
img, svg {
max-height: 50px;
}
}
&__nav {
display: flex;
justify-content: flex-end;
position: relative;
flex: 1;
@media screen and (max-width: 769px ) {
flex-flow: column;
padding-bottom: $base-spacing;
outline: none;
flex: 1;
}
ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-around;
z-index: 10;
// @media screen and (min-width: 770px) {
// padding-right: 1.5rem;
// }
// @media screen and (min-width: $x-large-screen) {
// @include poly-padding-right--large;
// }
@media screen and (max-width: 769px ) {
flex-flow: column;
}
li {
// display: inline-block;
display: flex;
margin: 0;
@media screen and (max-width: 769px) {
width: 100%;
&:first-child {
padding-top: $base-spacing;
}
}
a {
font: 900 12px "Biryani", sans-serif;
display: flex;
align-items: center;
padding: $small-spacing $large-spacing;
color: $white;
height: 55px;
position: relative;
transition: color 0.3s;
letter-spacing: normal;
z-index: 350;
text-align: left;
@media screen and (min-width: 770px) {
height: 100%;
padding: 1rem;
}
@media screen and (min-width: $x-large-screen) {
padding: $base-spacing;
}
@media screen and (max-width: 769px) {
display: flex;
transition-delay: 0.2s;
padding: .75rem 4.5rem .75rem 3rem;
width: 100%;
sup {
margin-left: 2px;
}
&::after {
content: '';
display: block;
height: 17px;
width: 18px;
background-image: $arrow-blue-svg;
background-repeat: no-repeat;
background-size: contain;
right: 3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
@include themify($themes) {
$escapeArrowColor: str-replace(quote(#{themed('ctaColor')}), '#', '');
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpolygon fill='%23#{$escapeArrowColor}' points='14.54 7.63 13.04 8.76 13.71 10.97 5.18 10.97 5.18 12.97 13.71 12.97 13.04 15.17 14.54 16.3 19.86 12.8 19.86 11.13 14.54 7.63'/%3E%3C/svg%3E");
}
}
}
@include themify($themes) {
color: themed('navColor');
font-family: themed('ctaFont');
font-size: themed('ctaFontSize');
svg {
path {
fill: themed('ctaColor');
}
}
}
.theme-corporate & {
color: white;
svg {
@extend %svg-white;
}
}
.masthead--white & {
@include themify($themes) {
color: themed('navColor') !important;
svg {
path {
fill: themed('ctaColor') !important;
}
}
}
}
@media screen and (min-width: 770px) {
&::after {
content: '';
width: 100%;
background-color: rgba(0, 111, 238, 1);
display: block;
height: 8px;
position: absolute;
bottom: -4px;
left: 0;
transform: scaleX(0);
transition: transform 0.12s;
@include themify($themes) {
background-color: themed('navUnderline');
}
}
&:hover,
&:focus {
&::after {
transform: scaleX(1);
}
}
}
}
@media screen and (min-width: 770px) {
&.current-menu-item a,
&.current-menu-parent a {
&::after {
transform: scaleX(1);
}
}
}
&.search__trigger {
@media screen and (max-width: 769px) {
background-color: $concrete;
order: -1;
}
@media screen and (min-width: 770px) {
width: 80px;
}
a {
@media screen and (max-width: 769px) {
padding: .75rem 3rem .75rem 3rem;
justify-content: space-between;
&::after {
display: none;
}
}
}
&.open {
z-index: 6;
background-color: transparent;
@media screen and (min-width: 770px) {
&:hover {
background-color: darken($blue-ribbon, 10%);
}
}
a {
&:hover,
&:focus {
&::after {
display: none;
}
}
}
.masthead--white & {
svg {
path {
@include themify($themes) {
fill: themed('ctaGradient');
}
}
}
}
}
}
}
}
.search {
position: absolute;
top: 0;
width: 0;
right: 0;
transition: 0.3s;
background-color: $blue-ribbon;
height: 55px;
@include themify($themes) {
background-color: themed('mastheadSearchColor');
}
@media screen and (min-width: 770px) {
bottom: 0;
height: auto;
}
&__field {
width: 0;
overflow: hidden;
form {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
input {
background-color: $blue-ribbon;
border: none;
height: 87%;
width: 80%;
color: white;
font: 200 20px "Biryani", sans-serif;
position: relative;
top: 10%;
left: 20px;
@include themify($themes) {
font: 200 20px themed('ctaFont');
background-color: themed('mastheadSearchColor');
}
@media screen and (min-width: 770px) {
left: 80px;
right: 80px;
}
&::placeholder {
color: white;
font-weight: 900;
}
&:focus {
&::placeholder {
color: transparent;
}
}
}
button {
width: 50px;
height: 55px;
transform: translateX(30%);
@include poly-margin-right--large;
@media screen and (min-width: 770px) {
width: 80px;
height: 80px;
&:hover {
background-color: darken($blue-ribbon, 10%);
@include themify($themes) {
background-color: themed('mastheadSearchColor');
}
}
}
svg {
@extend %svg-white;
}
}
}
.icon-toggle {
position: absolute;
width: 80px;
height: 100%;
text-align: center;
cursor: pointer;
display: none;
@media screen and (min-width: 770px) {
display: block;
}
svg {
margin-top: 50%;
transform: translateY(-50%);
path {
fill: white;
&:nth-of-type(2) {
visibility: hidden;
}
}
}
}
}
&.open {
width: 100%;
z-index: 999;
.search__field {
width: 100%;
height: 100%;
background-color: $blue-ribbon;
@include themify($themes) {
background-color: themed('mastheadSearchColor');
}
}
}
}
}
&__mobile {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
height: 60px;
position: relative;
&__twolayer {
flex-flow: column wrap;
height: auto;
min-height: 110px;
justify-content: flex-start;
}
&__middle {
height: auto;
min-height: 50px;
display: flex;
padding: 0 1rem 0;
flex-flow: row nowrap;
width: 100%;
background: #f2f2f2;
align-items: center;
z-index: 500;
&--left,
&--right {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
flex-basis: 50%;
> div {
width: 100%;
}
.header-secondary-cta {
margin-right: 0;
margin-bottom: 10px;
}
span, a {
@include themify($themes) {
font-family: themed('ctaFont');
font-size: themed('ctaFontSize');
}
font-size: 80% !important;
}
a {
@include themify($themes) {
color: themed('middleNavColor');
}
}
}
&--right {
text-align: right;
padding-top: 5px;
}
}
&__main {
height: 60px;
display: flex;
}
.masthead__logo {
width: 133px;
padding: 12px;
z-index: 15;
position: relative;
img, svg {
height: 36px;
}
}
.snowball {
border-radius: 50%;
width: 0px;
height: 0px;
position:absolute;
top: -35px;
right: -36px;
background:#fff;
opacity:1;
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
.mobile-nav__toggle {
height: 60px;
width: 60px;
color: $white;
overflow: hidden;
position: absolute;
z-index: 10;
outline: 0;
right: 0;
@media (min-width: 770px) {
height: 70px;
width: 70px;
}
@include themify($themes) {
svg {
path {
fill: themed('navColor');
}
}
}
.theme-corporate & {
svg {
path {
fill: white;
}
}
}
.masthead--white & {
@include themify($themes) {
svg {
path {
fill: themed('navColor');
}
}
}
}
.nav-trigger {
path:nth-of-type(2) {
visibility: hidden;
}
}
}
&.active {
.mobile-nav__toggle {
@include themify($themes) {
svg {
path {
fill: themed('ctaGradient');
}
}
}
}
.snowball {
width: 2500px;
height: 2500px;
top: -1060px;
right: -1065px;
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
}
@media screen and (min-width: 770px) {
display: none;
}
}
&:not(.masthead--white) {
.masthead__logo {
svg {
@extend %svg-white;
}
.logo-outline {
stroke: rgba(#fff, 0.5);
}
}
}
.disable-pointer-events {
pointer-events: none;
}
}
.global-subnav {
position: fixed;
top: 160px;
width: 100%;
z-index: 200;
background-color: rgba(#fff, 0.5);
display: flex;
transition: 0.3s;
opacity: 0;
pointer-events: none;
&__item-image {
max-height: 140px;
margin: 0 auto;
}
&.on-load {
display: none;
}
@media screen and (min-width: 770px) {
transform: scale(0.95);
transform-origin: top;
height: auto !important;
.theme-corporate & {
top: 120px;
}
.admin-bar & {
top: 152px !important;
}
}
@media screen and (max-width: 769px) {
position: absolute;
top: 60px;
bottom: 0;
left: 110%;
opacity: 1;
flex-direction: column;
background-color: white;
z-index: 2005;
box-shadow: rgba(15, 128, 238, 0.6) 9px 8px 33px;
transition: left 500ms 100ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
overflow: scroll;
padding-top: 50px;
}
&--is-open {
opacity: 1;
transform: scale(1);
transition: 0.3s;
pointer-events: initial;
// display: flex;
// transition: left 500ms 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
@media screen and (max-width: 769px) {
left: 0;
}
}
&--fadeout {
opacity: 0 !important;
transition-delay: 0s !important;
transform: scale(0.9) !important;
}
&__section-title {
height: 50px;
color: white;
font: 900 12px "Biryani", sans-serif;
display: flex;
justify-content: flex-start;
align-items: flex-start;
line-height: 50px;
position: absolute;
top: 0;
width: 100%;
@include poly-padding-x--large;
@include themify($themes) {
background-color: themed('navColor');
}
span:first-child {
display: block;
height: 50px;
width: 15px;
background-image: $arrow-white-svg-left;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: rotate(180deg);
margin-right: $base-spacing;
float: left;
}
@media screen and (min-width: 770px) {
display: none;
}
}
&__intro {
@include poly-padding--large;
background-color: $white;
flex: 1;
flex-basis: 25%;
@media screen and (max-width: 769px) {
display: none;
}
&__inner {
width: fit-content;
max-width: 55%;
margin: 0 auto;
}
&__text {
margin-top: $base-spacing;
font-size: 14px;
font-weight: 300;
line-height: 2.14;
letter-spacing: 1px;
color: $black;
}
}
&__links {
flex: 2;
@media screen and (min-width: 770px) {
flex-basis: 50%;
background-color: $light-grey;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
@media screen and (min-width: 770px) {
flex-direction: row;
align-items: stretch;
}
li {
margin: 0;
width: 100%;
border-bottom: 2px solid #f2f2f2;
@media screen and (min-width: 770px) {
flex-basis: 50%;
border-bottom: none;
}
a {
@include poly-padding-x--large;
padding-top: $base-spacing;
padding-bottom: $base-spacing;
height: auto;
display: flex;
flex-direction: column;
transition: background-color 0.3s;
justify-content: center;
@media screen and (min-width: 770px) {
height: 100%;
}
&:hover,
&:focus {
background-color: $white;
background-position: 90% center;
background-repeat: no-repeat;
background-size: 20px;
@include themify($themes) {
$escapeArrowColor: str-replace(quote(#{themed('ctaColor')}), '#', '');
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpolygon fill='%23#{$escapeArrowColor}' points='14.54 7.63 13.04 8.76 13.71 10.97 5.18 10.97 5.18 12.97 13.71 12.97 13.04 15.17 14.54 16.3 19.86 12.8 19.86 11.13 14.54 7.63'/%3E%3C/svg%3E");
}
}
.global-subnav__primary-link__title {
font-weight: bold;
margin-bottom: $small-spacing;
@include themify($themes) {
// font-family: themed('headingFont');
font-family: themed('ctaFont');
color: themed('navColor');
font-size: themed('ctaFontSize');
}
}
.global-subnav__primary-link__excerpt {
font-size: 12px;
font-weight: 300;
line-height: 1.58;
letter-spacing: 0.9px;
}
@media screen and (max-width: 769px) {
background-color: $white;
background-image: $arrow-blue-svg;
background-position: 90% center;
background-repeat: no-repeat;
background-size: 20px;
@include themify($themes) {
$escapeArrowColor: str-replace(quote(#{themed('navColor')}), '#', '');
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpolygon fill='%23#{$escapeArrowColor}' points='14.54 7.63 13.04 8.76 13.71 10.97 5.18 10.97 5.18 12.97 13.71 12.97 13.04 15.17 14.54 16.3 19.86 12.8 19.86 11.13 14.54 7.63'/%3E%3C/svg%3E");
}
p,
span {
padding-right: $large-spacing;
}
}
}
@media screen and (min-width: 770px) {
&.current-menu-item a {
background-color: $white;
background-position: 90% center;
background-repeat: no-repeat;
background-size: 20px;
}
}
}
}
}
&__cta {
@include poly-padding--large;
flex: 1;
flex-basis: 25%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
@media screen and (max-width: 769px) {
display: none;
}
h3 {
line-height: 1.3;
font-size: 20px;
color: $white;
}
.cta {
margin-top: $base-spacing;
}
@include themify($themes) {
background-color: themed('highlightColor');
font-family: themed('ctaFontFamily');
}
}
}
.masthead__primary-link {
text-align: center;
}
.navigation-page-cover {
position: fixed;
z-index: 300;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: cyan;
opacity: 0;
&--is-visible {
background-color: cyan;
opacity: 1;
}
}
.theme-corporate .masthead__nav ul li a svg path {
fill: #fff;
}
/* masthead */
import $ from 'jQuery'
import { TweenMax } from 'gsap'
import 'MorphSVGPlugin.js'
(function() {
let windowWidth
let mobileSize = 769
let touchmoved;
//SUBNAV for mobile and desktop
function handleSubnav (e, elem) {
var $this = elem
var menuItem = $this.data('menu-item')
var currentItem = $('.global-subnav.global-subnav--is-open').data('submenu-item')
$('.global-subnav').removeClass('global-subnav--is-open')
$('.masthead__inner').removeClass('fadein').addClass('fadeout')
$('[data-js-trigger-subnav]').removeClass('isopen')
$(this).addClass('isopen')
if ( !currentItem || currentItem !== menuItem) {
$('.global-subnav[data-submenu-item=' + menuItem + ']').addClass('global-subnav--is-open')
}
setTimeout(function() {
$('.search, .search__trigger').removeClass('open')
}, 300)
if ( windowWidth <= mobileSize ) {
$('.search, .search__trigger a, .animate a').addClass('disable-pointer-events')
}
e.preventDefault()
}
// SEARCH animation
function handleSearchBar () {
$('a[data-js-trigger-search]').on('click touchend', function (e) {
var $searchButton = $(this).parent()
var $searchField = $searchButton.closest('.masthead__nav').find('.search')
$('.global-subnav').removeClass('global-subnav--is-open')
if (!$searchButton.hasClass('open')) {
$searchButton.addClass('open')
$searchField.addClass('open')
setTimeout(function() {
TweenMax.to('#minus', 0.3, {
morphSVG: { shape: '#cross', shapeIndex: [3] },
ease: Power2.easeInOut
})
}, 200)
}
e.preventDefault()
})
}
// DESKTOP Search Icon toggle + close search bar
function handleDesktopSearchClose () {
$('.icon-toggle').on('click touchend', function (e) {
TweenMax.to('#minus', 0.3, {
morphSVG: { shape: '#minus', shapeIndex: [1] },
ease: Power2.easeInOut
})
setTimeout(function() {
$('.masthead__nav').find('.search__trigger').removeClass('open')
$('.masthead__nav').find('.search').removeClass('open')
}, 200)
})
}
//Toggle Mobile nav
function handleMobileNavToggle () {
let windowHeight = $(window).outerHeight()
let headerHeight = $('.masthead__mobile').outerHeight()
let calcHeight = windowHeight - headerHeight
let $mastheadInner = $('.masthead__inner')
let $mastheadMobile = $('.masthead__mobile')
let $globalSubnav = $('.global-subnav')
$('.mobile-nav__toggle').click(function () {
if (!$(this).hasClass('mobile-nav__toggle--is-open')) {
$(this).toggleClass('mobile-nav__toggle--is-open')
$('body').css('overflow', 'hidden')
$mastheadInner.addClass('mobile-nav--is-open')
$mastheadMobile.addClass('active')
$mastheadMobile.closest('.masthead').addClass('masthead--white-ghost')
$mastheadInner.css({'height': calcHeight, 'top': headerHeight})
$globalSubnav.css({'height': calcHeight, 'top': headerHeight})
TweenMax.to('#burger', 0.3, {
morphSVG: { shape: '#cross', shapeIndex: [3] },
ease: Power2.easeInOut
})
} else {
$('.mobile-nav__toggle').removeClass('mobile-nav__toggle--is-open')
$globalSubnav.addClass('global-subnav--fadeout')
$mastheadInner.addClass('fadeout')
$('body').css('overflow', 'visible')
setTimeout(function() {
$mastheadMobile.closest('.masthead').removeClass('masthead--white-ghost')
$mastheadInner.removeClass('mobile-nav--is-open')
$mastheadMobile.removeClass('active')
$mastheadInner.css({'height': 35 + 'px'}).removeClass('fadeout fadein')
$globalSubnav.removeClass('global-subnav--is-open')
$('.search, .search__trigger').removeClass('open')
},350)
setTimeout(function() {
$globalSubnav.removeClass('global-subnav--fadeout')
$mastheadInner.removeClass('fadeout')
},650)
TweenMax.to('#burger', 0.3, {
morphSVG: { shape: '#burger', shapeIndex: [1] },
ease: Power2.easeInOut
})
}
})
handleCloseMobileSubnav()
}
//Close mobile subnav
function handleCloseMobileSubnav () {
$(document).on('click touchend', 'button.mobile-back-button', function (e) {
$(this).closest('.global-subnav').removeClass('global-subnav--is-open')
$('.masthead__inner').removeClass('fadeout').addClass('fadein')
$('[data-js-trigger-subnav]').removeClass('isopen')
$('.search, .search__trigger').removeClass('open')
setTimeout(function() {
$('.search, .search__trigger a, .animate a').removeClass('disable-pointer-events')
},300)
})
}
function populateSubnavLoadImg () {
var currentItem = $('#masthead .current-menu-item')
if (currentItem.length) {
var thisHere = currentItem.find('a')
var imageUrl = thisHere.attr('data-image')
var target = thisHere.closest('.global-subnav').find('img')
$(target).attr('src', imageUrl);
} else {
$('.masthead__primary-link').each(function() {
if ($(this.hasAttribute('data-image]'))) {
var thisHere = $(this)
var imageUrl = thisHere.attr('data-image')
var menuItem = thisHere.data('menu-item')
var target = $('.global-subnav[data-submenu-item=' + menuItem + ']').find('img')
$(target).attr('src', imageUrl);
}
})
}
}
$(document).ready(function () {
windowWidth = $(window).outerWidth()
var mastheadHeight = $('.masthead').outerHeight()
if ($('.no-hero-here').length) {
$('.no-hero-here').css('padding-top', mastheadHeight)
}
handleSearchBar()
populateSubnavLoadImg()
handleDesktopSearchClose()
handleMobileNavToggle()
$('[data-js-trigger-subnav]').on('touchend click', function (e) {
var elem = $(this)
if(touchmoved != true){
handleSubnav(e, elem)
}
}).on('touchmove', function(e){
touchmoved = true;
}).on('touchstart', function(){
touchmoved = false;
});
// this prevents subnav and the lang flashing on page load
setTimeout(function() {
$('.global-subnav').removeClass('on-load')
$('.lang-switcher-container').css('display', 'block')
}, 500)
if ( windowWidth <= mobileSize ) {
if ($('.masthead__mobile__middle').length) {
$('.masthead').addClass('hasMiddle')
}
$('.masthead__upper > *, .masthead__middle > div, .masthead__nav li').addClass('animate')
}
$('.global-subnav__primary-link').mouseenter(function() {
var image = $(this).attr('data-image')
var target = $(this).attr('data-image-target')
$(target).attr('src', image);
});
})
$(window).resize(function() {
windowWidth = $(window).outerWidth()
if ( windowWidth <= mobileSize ) {
if ($('.masthead__mobile__middle').length) {
$('.masthead').addClass('hasMiddle')
}
$('.masthead__upper > *, .masthead__middle > div, .masthead__nav li').addClass('animate')
}
})
})();
$(document).on('click', function (e) {
if ($(e.target).closest("#masthead").length === 0) {
$('.global-subnav').removeClass('global-subnav--is-open')
}
});