html, body, * { padding: 0px; margin: 0px; text-decoration: none; }
header { height: 400px; padding-top: 110px; }
body { background-image: url(../img/home-hero.jpg); background-size: 3100px 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; background-image: url(../img/header-bar.png); background-repeat: no-repeat;  background-position: left center; background-size: 20px 100%; }
h1 sup { font-size: 62%; line-height: 0px; position: relative; top: 2px; }
sup { line-height: 0px; 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: 10px; }
#container_main { width: 3840px; height: 2160px; overflow: hidden; position: relative; background: #EBEDEB; border: 1px #107E9A solid; box-sizing: border-box; background-image: url(../img/header-bg.svg); background-repeat: no-repeat; }
#frame_isi { position: absolute; right: 0px; top: 0px; background-color: #FFFFFF; }
.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 { content: "•"; margin-left: -31px; margin-right: 9px; }
.with-bullet { margin-left: 60px; }
.btn-arrow { width: 36.67px; height: 19.70px; right: 30px; top: 30px; 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; bottom: 0px; width: 3100px; background-image: url(../img/nav-bg.svg); background-size: 3100px 150px; background-repeat: no-repeat; background-position: bottom left; background-color: #334651; }
nav a { color: #99a3a8; font-weight: 600; position: absolute; padding: 40px 0px 10px; }
nav #nav_sub a { padding: 30px 0px 5px; }
nav a:hover { color: #FFFFFF; }
nav a.active { color: #FFFFFF; border-bottom: 8px solid #F15E22; }
#nav_main { width: 3100px; height: 150px; font-size: 60px;  }
#nav_sub, #nav_sub > div { font-size: 40px; width: 1440px; height: 108px; position: absolute; right: 00px;  }
#nav_sub { bottom: 150px; display: none; }
#nav_sub > div { display: none; }
#nav_sub_1 { background-image: url(../img/nav-sub-1-bg.svg); background-repeat: no-repeat; }
#nav_sub_4 { background-image: url(../img/nav-sub-4-bg.svg); background-repeat: no-repeat; }
#nav_sub.active_sub_1, #nav_sub.active_sub_4 { display: block; }
#nav_sub.active_sub_1 #nav_sub_1 { display: block; }
#nav_sub.active_sub_4 #nav_sub_4 { display: block; }
#icon-home { opacity: 0.75; }
#icon-home:hover { opacity: 1; }

/*==================================*/
/*   OVERLAY   */
/*==================================*/
#container_overlay, #overlay_bg { width: 3100px; height: 2160px; position: absolute; top: 0px; left: 0px }
#container_overlay.active { display: flex; }
#container_overlay { display: none; }
#container_overlay h2 { font-size: 100px; color: #F15E22; display: block; text-align: center; margin-bottom: 100px;}
#container_overlay h3 { font-size: 50px; margin: 40px 0px 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 { width: auto; max-width: 2500px; border-radius: 30px; background-color: #FFFFFF; margin: auto; display: flex; padding: 75px 150px 100px; font-size: 32px; z-index: 1; box-shadow: 0px 4px 4px rgba(0,0,0,0.75); }
#overlay_btn_close { display: flex; justify-content: flex-end; margin-right: -100px; margin-top: -30px; }

/*==================================*/
/*   ISI   */
/*==================================*/
#frame_isi, #container_isi { height: 2100px; } 
#frame_isi { width: 680px; padding: 60px 30px 0px; }
#container_isi { font-size: 32px; color:#334651; width: 680px; }
#logo-QULIPTA-isi { width: 100%; }
#logo-QULIPTA-isi img { width: 446px;margin: 0px auto 40px; display: block; }
.isiTitle { color:#F15E22; font-size: 40px; }
.isiSubTitle { font-weight: bold; padding-bottom: 5px; padding-bottom: 0.5em; }
#container_isi p { padding-bottom: 12px; padding-bottom: 0.31em }

/*==================================*/
/*   SCREENSAVER   */
/*==================================*/
#screensaver_bg { position: absolute; top: 0px; left: 0px; width: 3100px; height: 2160px; }
#screensaver_logo { width: 883px; height: 368px; position: absolute; left: 1111px; top: 213px; }
#screensaver_box { width: 2830px; height: 834px; position: absolute; left: 138px; top: 738px; 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: 989px; top: 1707px; color: #FFFFFF; letter-spacing: 10px; }
.screensaver #container_references_study { display: none; }
.screensaver-text { position: absolute; top: 0; left: 0; }
.screensaver #container_main { background-image: url(../img/0.1-screensaver-bg.jpg); }
#container_main .screensaver-text { width: 3100px; }

/*==================================*/
/*   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; }