html, body, * { padding: 0; margin: 0; text-decoration: none; }
header { height: 400px; padding-top: 110px; }
body { background-image: url(../img/home-hero.svg); background-size: 3840px auto; background-repeat: no-repeat; font-family: "Fira Sans", sans-serif; font-size: 32px; color: #334651; }
body.home h1, body.home #container_main  { background: none; background-color: none; }
h1 { font-size: 95px; color: #FFFFFF; padding-left: 50px; margin-left: 80px; position: relative;}
h1:before {	content: "";display: block;width: 20.27px;height: 80px;border-radius: 20px;background: #f15e22;position: absolute;top: 16px;left: 0;}
h1.have_small:before {height: 154px;top: 2px;}
h1.have_2_lines:before {height: 192px;}
h1 sup { font-size: 62%; line-height: 0; position: relative; top: 2px; }
sup { line-height: 0; font-size: 70%; }
a { cursor: pointer; }
u { text-decoration: underline!important; }
.hidden { opacity: 0; transition: all 0.1s ease-out; }
.header_small_text { font-size: 40px; display: block; height: 40px; overflow: hidden; padding-bottom: 20px; }
#container_main { width: 3840px; height: 2160px; overflow: hidden; position: relative; background: #EBEDEB; box-sizing: border-box; background-image: url(../img/header-bg.svg); background-position: -1px -1px; background-size: 3312px 402px; background-repeat: no-repeat; }
.home #container_references_study { display: none; }

/*==================================*/
/*   UTILITIES   */
/*==================================*/
.fontSize_40 { font-size: 40px; }
.cursor-pointer { cursor: pointer; }
.hide { display: none; visibility: hidden; }
.show { display: unset; visibility: visible; }
.with-bullet:before,.with-bullet-line:before { content: "•"; margin-left: -31px; margin-right: 9px; }
.with-bullet { margin-left: 60px; }
.with-bullet-line {margin-left: 31px;}
.btn-arrow { width: 36.67px; height: 19.70px; right: 30px; top: 35px; position: absolute; }
.layout_columns_3 { display: flex; }
.head_reg { font-size: 72px; position: relative; top: -17px; }

/*==================================*/
/*   NAV   */
/*==================================*/
nav { font-family: "Fira Sans", sans-serif; position: absolute; top: 0; right: 0; width: 530px; height: 100%; background-color: #334651; }
nav a { color: #99a3a8; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; }
nav a:hover { color: #FFFFFF; }
#container_main:not(.isi_expanded) nav a.active { color: #F15E22; }
#nav_main { font-size: 60px; }
#nav_main a { padding: 16px 40px; min-height: 90px}
#nav_main .nav_sub a { font-size: 30px; margin: 0 35px; height: 72px;white-space: nowrap; padding: 0 40px; min-height: initial;}
#nav_main a { border-top: 2px solid #000000; } 
#nav_main > a:last-child { border-bottom: 2px solid #000000; }
#nav_main > a:first-child { border-top: none; }
#nav_main > .main_btn.active:first-of-type { background-color: #334651; }
#icon-home { opacity: 0.75; }
#icon-home:hover { opacity: 1; }
.isi_expanded #container_nav, .isi_expanded #container_references_study { display: block; visibility: visible; }
#container_main:not(.isi_expanded) .main_btn.active, #container_main:not(.isi_expanded) .main_btn.active + .nav_sub { background-color: rgba(0,0,0,0.3); }

/*==================================*/
/*   OVERLAY   */
/*==================================*/
#container_overlay, #overlay_bg { width: 100%; height: calc(2160px - 430px); position: absolute; top: 0; left: 0 }
#container_overlay.active { display: flex; }
#container_overlay { display: none; }
#container_overlay h2 { font-size: 90px; color: #F15E22; display: block; text-align: center; margin-bottom: 35px;}
#container_overlay h3 { font-size: 50px; margin: 40px 0 30px; }
#container_overlay p { margin-bottom: 10px; }
#container_overlay > div { display: block; }
#overlay_bg { background: rgba(89, 89, 92, 0.60); backdrop-filter: blur(12px); }
#overlay_frame {overflow: hidden; box-sizing: border-box; position: relative; width: auto; max-width: 3766px; border-radius: 30px; background-color: #FFFFFF; margin: auto; display: flex; padding: 120px 111px 111px 111px; min-width: 1240px; font-size: 32px; z-index: 1; box-shadow: 0 4px 44px -10px rgba(0,0,0,0.75); }
#overlay_btn_close {z-index: 1; display: flex; justify-content: flex-end; position: absolute; right: 50px; top: 50px; }
.orange_border #overlay_frame {border: 4px solid #FF5A20;}
/*==================================*/
/*   ISI   */
/*==================================*/
#frame_isi { width: calc(100% - 530px); height: calc(430px - 68px); position: absolute; bottom: 68px; background-color: #DFE7EA; overflow: hidden; }
#container_isi { font-size: 42px; color:#334651; overflow: hidden; padding: 40px 50px 20px; display: flex; }
#logo-QULIPTA-isi { width: 446px; height: 236px; background: url(../img/logo-QULIPTA.png) left 50px no-repeat; background-size: 446px; margin: -2px 80px 0; }
.isiTitle, .home .isiTitle { color:#F15E22; font-size: 48px; padding-bottom: 0.15em; }
.isiSubTitle { font-weight: bold; padding-bottom: 0.25em; }
#container_isi p { padding-left: 55px; padding-bottom: 12px; padding-bottom: 0.1em }
#content_plus { display: none; }
#isi_btn { width: 80px; height: 80px; background-image: url(../img/isi_btn_open.svg); cursor: pointer; position: absolute; right: 30px; }
.screensaver #frame_isi, .home #frame_isi { background-color: #323E48; width: 100%; }
.screensaver #container_isi p, .home #container_isi p { color: #FFFFFF;  }
.screensaver #logo-QULIPTA-isi, .home #logo-QULIPTA-isi { background: url(../img/logo-QULIPTA-white.png) left 50px no-repeat; background-size: 446px; }
.screensaver #isi_btn { background-image: url(../img/isi_btn_open_white.svg); }
.home #container_isi p.isiTitle { color: #F15E22; }
.home #isi_btn { background-image: url(../img/isi_btn_open.svg); }
#isi_footer { display: flex; width: 100%; justify-content: space-between; margin-top: 230px; }
/*============ISI_EXPAND============*/
.isi_expanded #frame_isi { width: 3310px; height: calc(100% - 68px); background-color: #DFE7EA; }
.isi_expanded #container_isi { flex-direction: column; }
.isi_expanded #container_isi p { color: #334651; }
.isi_expanded #container_isi p.isiTitle { color: #F15E22!important; }
.isi_expanded #content_plus { display: block; } 
.isi_expanded #content_plus p { margin-bottom: 10px; }
.isi_expanded #isi_btn { background-image: url(../img/overlay-btn-close.svg); }
.isi_expanded #logo-QULIPTA-isi { margin: -10px 80px 170px; background: url(../img/logo-QULIPTA.png) left 50px no-repeat; background-size: 446px; }
.isi_expanded #container_isi p { padding-left: 85px; padding-bottom: 11px; }
.isi_expanded #container_pi { width: calc(100% - 530px)!important; }
.isi_expanded .isiTitleISI { margin-top: 30px!important; }

/*==================================*/
/*   SCREENSAVER   */
/*==================================*/
/*#screensaver_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: unset; background: rgb(52,71,82); background: linear-gradient(155deg, rgba(52,71,82,1) 0%, rgba(16,126,154,1) 100%); }*/
/*#screensaver_logo { width: 823px; height: 343px; position: absolute; left: 50%; transform: translateX(-50%); top: 133px; }*/
/*#screensaver_box { width: 2830px; height: 834px; position: absolute; left: 505px; top: 560px; border-radius: 0px 140px; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(20px); }*/
/*#screensaver_tap { font-size: 50px; text-align: center; width: 1128px; position: absolute; left: 50%; transform: translateX(-50%); top: 1467px; color: #FFFFFF; letter-spacing: 10px; }*/
.screensaver #container_references_study { display: none; }
.screensaver-text { position: absolute; top: 0; left: 0; }
.screensaver #container_main { background-image: unset; }
#container_main .screensaver-text { width: 3840px; }

/*==================================*/
/*   PI BOX   */
/*==================================*/
#container_pi { font-family: "Fira Sans", sans-serif; color: #FFFFFF; background-color: #107E9A; font-size: 42px; font-weight: bold; letter-spacing: -0.42px; height: 68px; ;position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
#container_pi { width: calc(100% - 530px); }
.screensaver #container_pi, .home #container_pi { width: 100%; }

/*==================================*/
/*   LOAD FIRA SANS   */
/*==================================*/
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Thin.ttf") format('truetype'); font-weight: 100; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-ExtraLight.ttf") format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Light.ttf") format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Regular.ttf") format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Medium.ttf") format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-SemiBold.ttf") format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Bold.ttf") format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-ExtraBold.ttf") format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Black.ttf") format('truetype'); font-weight: 900; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-ThinItalic.ttf") format('truetype'); font-weight: 100; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-ExtraLightItalic.ttf") format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-LightItalic.ttf") format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-Italic.ttf") format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-MediumItalic.ttf") format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-SemiBoldItalic.ttf") format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-BoldItalic.ttf") format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-ExtraBoldItalic.ttf") format('truetype'); font-weight: 800; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: url("../font/FiraSans-BlackItalic.ttf") format('truetype'); font-weight: 900; font-style: italic; }