theme-styles.css 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226
  1. @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap");
  2. @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
  3. @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css");
  4. *, *::before, *::after {
  5. box-sizing: border-box;
  6. }
  7. * {
  8. font-family: "Open Sans", sans-serif;
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12. p {
  13. max-width: 800px;
  14. font-size: 16px;
  15. }
  16. .grid {
  17. gap: 30px;
  18. }
  19. body {
  20. overflow-y: scroll;
  21. }
  22. section {
  23. margin: 0 auto;
  24. padding: 0px !important;
  25. }
  26. main {
  27. padding-top: 104px;
  28. background-color: #fff;
  29. }
  30. body.home main {
  31. margin-top: 100vh;
  32. position: relative;
  33. }
  34. h1 {
  35. font-size: 40px !important;
  36. letter-spacing: 2px !important;
  37. line-height: 110%;
  38. }
  39. button {
  40. margin: 20px auto;
  41. margin-bottom: 10px;
  42. max-width: 300px;
  43. font-size: 20px;
  44. border-radius: 0px;
  45. border: none;
  46. background: #0b1419;
  47. border-radius: 4px;
  48. }
  49. button:hover {
  50. background: #F68B1F;
  51. }
  52. .container {
  53. margin: 0xp auto;
  54. padding: 10px 30px;
  55. overflow: hidden;
  56. }
  57. .grid {
  58. justify-content: center;
  59. padding: 0px 5px;
  60. }
  61. #navbar {
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. right: 0;
  66. padding: 0;
  67. margin: 0 !important;
  68. z-index: 999;
  69. height: fit-content;
  70. }
  71. #navbar #uiu-global-nav nav {
  72. text-align: center;
  73. padding: 0.25rem 0 !important;
  74. margin: 0 !important;
  75. justify-content: center;
  76. align-items: center;
  77. z-index: 10;
  78. transition: 0.5s ease-in-out;
  79. background-color: #160c0c;
  80. box-shadow: 0px 5px 12px -5px #2F4858;
  81. border-bottom: 4px solid #F68B1F;
  82. }
  83. @media (max-width: 1100px) {
  84. #navbar #uiu-global-nav nav {
  85. display: block !important;
  86. text-align: unset;
  87. height: unset;
  88. align-items: unset;
  89. border: unset;
  90. padding: unset !important;
  91. }
  92. }
  93. #navbar #uiu-global-nav nav .logo-close-menu {
  94. display: flex;
  95. justify-content: space-between;
  96. align-items: center;
  97. z-index: 20;
  98. }
  99. @media (max-width: 1100px) {
  100. #navbar #uiu-global-nav nav .logo-close-menu {
  101. border-bottom: 4px solid #F68B1F;
  102. }
  103. }
  104. #navbar #uiu-global-nav nav .logo-close-menu .logo {
  105. width: auto;
  106. padding-right: 30px;
  107. padding-left: 20px;
  108. height: 70px;
  109. transition-duration: 0.5s;
  110. margin-right: 1rem;
  111. }
  112. @media (max-width: 1100px) {
  113. #navbar #uiu-global-nav nav .logo-close-menu .logo {
  114. height: 50px !important;
  115. }
  116. }
  117. #navbar #uiu-global-nav nav .logo-close-menu .logo img {
  118. height: 100% !important;
  119. }
  120. #navbar #uiu-global-nav nav .logo-close-menu #menu-bars,
  121. #navbar #uiu-global-nav nav .logo-close-menu #seacrh {
  122. display: none !important;
  123. transition-duration: 0.4s;
  124. padding-top: 0.25rem;
  125. padding-right: 0.25rem;
  126. font-size: 2.5rem;
  127. cursor: pointer;
  128. color: #fff;
  129. }
  130. @media (max-width: 1100px) {
  131. #navbar #uiu-global-nav nav .logo-close-menu #menu-bars,
  132. #navbar #uiu-global-nav nav .logo-close-menu #seacrh {
  133. display: block !important;
  134. }
  135. }
  136. #navbar #uiu-global-nav nav .logo-close-menu #menu-bars {
  137. padding-left: 0.5rem;
  138. margin: 0;
  139. }
  140. #navbar #uiu-global-nav nav .logo-close-menu #seacrh {
  141. font-size: 2.4rem;
  142. margin-right: 1rem;
  143. }
  144. #navbar #uiu-global-nav nav .logo-close-menu #seacrh:hover {
  145. color: #f3e7e7;
  146. }
  147. #navbar #uiu-global-nav nav ul.menu {
  148. display: flex;
  149. align-items: center;
  150. z-index: 10;
  151. }
  152. @media (max-width: 1100px) {
  153. #navbar #uiu-global-nav nav ul.menu {
  154. background-color: #070303 !important;
  155. display: none !important;
  156. padding: 2rem;
  157. height: 0px;
  158. }
  159. }
  160. @media (max-width: 1100px) {
  161. #navbar #uiu-global-nav nav .menu.show {
  162. display: block !important;
  163. height: 100vh;
  164. overflow-y: auto;
  165. }
  166. }
  167. #navbar #uiu-global-nav nav .menu > li {
  168. margin-right: 50px;
  169. padding: 0.25rem !important;
  170. }
  171. @media (max-width: 1100px) {
  172. #navbar #uiu-global-nav nav .menu > li {
  173. display: block;
  174. margin: unset;
  175. margin-bottom: 1rem !important;
  176. text-align: unset;
  177. padding: 0.75rem 0.25rem;
  178. }
  179. }
  180. @media (max-width: 1100px) {
  181. #navbar #uiu-global-nav nav .menu > li.search {
  182. display: none;
  183. }
  184. }
  185. #navbar #uiu-global-nav nav .menu > li:last-child {
  186. margin-right: 0px;
  187. }
  188. #navbar #uiu-global-nav nav .menu > li:last-child {
  189. margin-right: 0;
  190. }
  191. #navbar #uiu-global-nav nav .menu > li > a {
  192. color: #fff;
  193. transition-duration: 0.3s;
  194. font-size: 14px;
  195. letter-spacing: 2px;
  196. text-transform: uppercase;
  197. font-weight: bold;
  198. font-size: 12px;
  199. cursor: pointer !important;
  200. }
  201. @media (max-width: 1100px) {
  202. #navbar #uiu-global-nav nav .menu > li > a {
  203. text-align: unset;
  204. overflow-y: auto;
  205. border-bottom: 1px solid #333;
  206. width: 100%;
  207. padding-left: 0 !important;
  208. border-radius: unset;
  209. }
  210. }
  211. #navbar #uiu-global-nav nav .menu > li:after {
  212. content: "";
  213. display: block;
  214. margin: auto;
  215. height: 1px;
  216. width: 0px;
  217. background: transparent;
  218. transition: width 0.3s ease, background-color 0.5s ease;
  219. }
  220. @media (max-width: 1100px) {
  221. #navbar #uiu-global-nav nav .menu > li:after {
  222. display: none !important;
  223. }
  224. }
  225. #navbar #uiu-global-nav nav .menu > li:hover:after {
  226. width: 100%;
  227. background: #fff;
  228. }
  229. #navbar #uiu-global-nav nav .menu > li.active:after {
  230. width: 100%;
  231. background: #fff;
  232. }
  233. #navbar #uiu-global-nav nav ul.sub-menu {
  234. background: #FFFBF6 !important;
  235. color: #070303;
  236. position: fixed;
  237. top: 56px;
  238. left: 0;
  239. right: 0;
  240. z-index: 500 !important;
  241. display: none;
  242. transition-duration: 0.5s;
  243. box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
  244. }
  245. @media (max-width: 1100px) {
  246. #navbar #uiu-global-nav nav ul.sub-menu {
  247. position: unset;
  248. background: transparent !important;
  249. box-shadow: unset !important;
  250. }
  251. }
  252. #navbar #uiu-global-nav nav ul.sub-menu .container {
  253. padding: 2rem 0;
  254. display: flex;
  255. justify-content: space-between;
  256. gap: 2rem;
  257. }
  258. @media (max-width: 1100px) {
  259. #navbar #uiu-global-nav nav ul.sub-menu .container {
  260. -moz-columns: 1;
  261. columns: 1;
  262. padding: 0.25rem 0;
  263. max-width: unset !important;
  264. }
  265. }
  266. #navbar #uiu-global-nav nav ul.sub-menu .container .menu-item {
  267. margin: unset !important;
  268. margin-bottom: 0.5rem !important;
  269. padding: 0 !important;
  270. text-align: start;
  271. font-size: 0.8rem;
  272. display: block;
  273. }
  274. #navbar #uiu-global-nav nav ul.sub-menu .container .menu-item a {
  275. color: #000;
  276. padding: 5px !important;
  277. margin: 0 !important;
  278. }
  279. @media (max-width: 1100px) {
  280. #navbar #uiu-global-nav nav ul.sub-menu .container .menu-item a {
  281. color: #fff;
  282. margin: unset;
  283. margin-bottom: 0.25rem;
  284. }
  285. }
  286. #navbar #uiu-global-nav nav ul.sub-menu .container .menu-item a:hover {
  287. color: #994D33;
  288. opacity: 1;
  289. }
  290. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-feature {
  291. width: 40%;
  292. display: block;
  293. text-align: left;
  294. color: #994D33;
  295. padding-right: 2rem;
  296. }
  297. @media (max-width: 1100px) {
  298. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-feature {
  299. display: none;
  300. }
  301. }
  302. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-feature .menu_feature_image {
  303. width: 100%;
  304. max-width: 350px;
  305. }
  306. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-feature .menu_title {
  307. margin-top: 1rem;
  308. font-weight: 600;
  309. font-size: 1rem;
  310. text-transform: capitalize;
  311. line-height: 1.4;
  312. }
  313. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-feature .menu_description {
  314. margin-top: 0.5rem;
  315. font-size: 0.8rem;
  316. line-height: 1.7;
  317. text-align: justify;
  318. }
  319. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-link-container {
  320. width: 60%;
  321. padding-left: 2rem;
  322. display: grid !important;
  323. grid-template-columns: repeat(2, 1fr);
  324. height: -moz-fit-content;
  325. height: fit-content;
  326. }
  327. @media (max-width: 1100px) {
  328. #navbar #uiu-global-nav nav ul.sub-menu .container .sub-menu-link-container {
  329. width: 100% !important;
  330. padding-left: 0.75rem;
  331. display: block !important;
  332. }
  333. }
  334. #navbar #uiu-global-nav nav .menu .sub-menu.show-mega-menu {
  335. display: block !important;
  336. }
  337. #navbar #uiu-departmental-nav nav {
  338. text-align: center;
  339. padding: 2px 0 !important;
  340. margin: 0 !important;
  341. justify-content: center;
  342. align-items: center;
  343. z-index: 10;
  344. transition: 0.5s ease-in-out;
  345. background: #2c5d73 !important;
  346. }
  347. @media (max-width: 1100px) {
  348. #navbar #uiu-departmental-nav nav {
  349. display: block !important;
  350. text-align: unset;
  351. height: unset !important;
  352. align-items: unset;
  353. border: unset;
  354. padding: unset;
  355. }
  356. }
  357. #navbar #uiu-departmental-nav nav #responsive-btn {
  358. cursor: pointer !important;
  359. }
  360. #navbar #uiu-departmental-nav nav .dep-name-res-icon {
  361. color: #fff;
  362. display: none;
  363. justify-content: space-between;
  364. align-items: center;
  365. width: 100%;
  366. padding: 0.1rem 0.75rem;
  367. }
  368. @media (max-width: 1100px) {
  369. #navbar #uiu-departmental-nav nav .dep-name-res-icon {
  370. display: flex !important;
  371. }
  372. }
  373. #navbar #uiu-departmental-nav nav .dep-name-res-icon .department {
  374. font-size: 0.9rem;
  375. font-weight: 500;
  376. }
  377. #navbar #uiu-departmental-nav nav .dep-name-res-icon .responsive-btn {
  378. font-size: 1.8rem;
  379. }
  380. #navbar #uiu-departmental-nav nav .uiu-departmental-header-menu {
  381. width: 100%;
  382. }
  383. #navbar #uiu-departmental-nav nav .menu {
  384. display: flex;
  385. align-items: center;
  386. justify-content: space-evenly;
  387. width: 100%;
  388. padding: 0;
  389. }
  390. @media (max-width: 1100px) {
  391. #navbar #uiu-departmental-nav nav .menu {
  392. display: none !important;
  393. align-items: start;
  394. padding: 1rem 2rem;
  395. height: 0px;
  396. }
  397. }
  398. #navbar #uiu-departmental-nav nav .menu .menu-item {
  399. padding: 0;
  400. padding-bottom: 0.15rem;
  401. }
  402. @media (max-width: 1100px) {
  403. #navbar #uiu-departmental-nav nav .menu .menu-item {
  404. display: block;
  405. margin-bottom: 1.25rem !important;
  406. width: 100%;
  407. }
  408. }
  409. #navbar #uiu-departmental-nav nav .menu a {
  410. color: #fff;
  411. font-size: 0.8rem;
  412. padding: 0.25rem !important;
  413. cursor: pointer !important;
  414. }
  415. @media (max-width: 1100px) {
  416. #navbar #uiu-departmental-nav nav .menu a {
  417. width: 100%;
  418. border-bottom: 1px solid #3b545e;
  419. border-radius: unset !important;
  420. padding-left: 0 !important;
  421. }
  422. }
  423. #navbar #uiu-departmental-nav nav .menu > li:after {
  424. content: "";
  425. display: block;
  426. margin: auto;
  427. height: 1px;
  428. width: 0px;
  429. background: transparent;
  430. transition: width 0.3s ease, background-color 0.5s ease;
  431. }
  432. @media (max-width: 1100px) {
  433. #navbar #uiu-departmental-nav nav .menu > li:after {
  434. display: none !important;
  435. }
  436. }
  437. #navbar #uiu-departmental-nav nav .menu > li:hover:after {
  438. width: 100%;
  439. background: #fff;
  440. }
  441. #navbar #uiu-departmental-nav nav .menu > li.active:after {
  442. width: 100%;
  443. background: #fff;
  444. }
  445. #navbar #uiu-departmental-nav nav .menu .sub-menu {
  446. margin-top: unset !important;
  447. background: #F1FBFF !important;
  448. color: #160c0c;
  449. position: fixed;
  450. top: 102px;
  451. left: 0;
  452. right: 0;
  453. transition-duration: 0.5s;
  454. display: none;
  455. }
  456. @media (max-width: 1100px) {
  457. #navbar #uiu-departmental-nav nav .menu .sub-menu {
  458. position: unset;
  459. background: transparent !important;
  460. box-shadow: unset !important;
  461. padding-left: 0.75rem;
  462. }
  463. }
  464. #navbar #uiu-departmental-nav nav .menu .sub-menu .container {
  465. padding: 2rem 0;
  466. display: flex;
  467. justify-content: space-between;
  468. gap: 2rem;
  469. }
  470. @media (max-width: 1100px) {
  471. #navbar #uiu-departmental-nav nav .menu .sub-menu .container {
  472. -moz-columns: 1;
  473. columns: 1;
  474. padding: 0.75rem 0.25rem;
  475. max-width: unset !important;
  476. }
  477. }
  478. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .menu-item {
  479. margin: unset !important;
  480. padding: 0 !important;
  481. text-align: start;
  482. font-size: 0.8rem;
  483. display: block;
  484. }
  485. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .menu-item a {
  486. color: #000;
  487. margin: 0 !important;
  488. }
  489. @media (max-width: 1100px) {
  490. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .menu-item a {
  491. color: #fff;
  492. margin: unset;
  493. margin-top: 0.25rem;
  494. }
  495. }
  496. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .menu-item a:hover {
  497. color: #9addf2;
  498. opacity: 1;
  499. }
  500. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-feature {
  501. width: 40%;
  502. display: block;
  503. text-align: left;
  504. color: #2c5d73;
  505. padding-right: 2rem;
  506. }
  507. @media (max-width: 1100px) {
  508. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-feature {
  509. display: none;
  510. }
  511. }
  512. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-feature .menu_feature_image {
  513. width: 100%;
  514. max-width: 350px;
  515. }
  516. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-feature .menu_title {
  517. margin-top: 1rem;
  518. font-weight: 600;
  519. font-size: 1rem;
  520. text-transform: capitalize;
  521. line-height: 1.4;
  522. }
  523. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-feature .menu_description {
  524. margin-top: 0.5rem;
  525. font-size: 0.8rem;
  526. line-height: 1.7;
  527. text-align: justify;
  528. }
  529. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-link-container {
  530. width: 60%;
  531. padding-left: 2rem;
  532. display: grid !important;
  533. grid-template-columns: repeat(2, 1fr);
  534. height: -moz-fit-content;
  535. height: fit-content;
  536. }
  537. @media (max-width: 1100px) {
  538. #navbar #uiu-departmental-nav nav .menu .sub-menu .container .sub-menu-link-container {
  539. margin-top: unset;
  540. width: 100% !important;
  541. padding-left: unset;
  542. display: block !important;
  543. }
  544. }
  545. #navbar #uiu-departmental-nav nav .menu .sub-menu.show-mega-menu {
  546. display: block !important;
  547. }
  548. @media (max-width: 1100px) {
  549. #navbar #uiu-departmental-nav.show .dep-name-res-icon {
  550. border-bottom: 1px solid #3b545e;
  551. }
  552. #navbar #uiu-departmental-nav.show .menu {
  553. display: block !important;
  554. background-color: rgb(19, 33, 39);
  555. height: calc(100vh - 88.719px);
  556. overflow-y: auto;
  557. margin: unset !important;
  558. }
  559. }
  560. #navbar.scroll .logo-close-menu .logo {
  561. height: 60px !important;
  562. }
  563. #navbar.scroll #uiu-global-nav ul.sub-menu {
  564. top: 47.5px !important;
  565. }
  566. #navbar.scroll #uiu-departmental-nav .menu .sub-menu {
  567. top: 93px;
  568. }
  569. #search-close {
  570. width: 100px;
  571. border-radius: 40px;
  572. background-color: #F68B1F;
  573. margin-top: 30px;
  574. margin-right: 30px;
  575. }
  576. .overlay-content {
  577. overflow: hidden;
  578. }
  579. .overlay-content label {
  580. display: inline-block;
  581. }
  582. .overlay-content h4 {
  583. display: inline-block;
  584. margin: 0px 20px;
  585. }
  586. .overlay-content div a {
  587. display: inline-block;
  588. text-decoration: underline;
  589. }
  590. .overlay-content div h6 {
  591. display: inline-block;
  592. }
  593. #top-search {
  594. width: 140px;
  595. border-radius: 0;
  596. height: 30px;
  597. }
  598. #search-bar {
  599. width: 60%;
  600. display: inline-block;
  601. }
  602. #search-button {
  603. width: 300px;
  604. display: inline-block;
  605. border-radius: 30px;
  606. margin-left: 20px;
  607. background: #485680;
  608. }
  609. #search-modal {
  610. overflow: hidden;
  611. }
  612. #search-button:hover {
  613. background-color: #F68B1F;
  614. }/*# sourceMappingURL=navbar-2.css.map */
  615. #banner {
  616. position: fixed;
  617. top: 0;
  618. height: 100vh;
  619. width: 100%;
  620. margin: 0px !important;
  621. padding: 0px !important;
  622. background-position: center;
  623. background-size: cover;
  624. }
  625. #search {
  626. height: 80px;
  627. display: flex;
  628. flex-direction: row;
  629. background: #160c0c;
  630. margin: 0 auto;
  631. }
  632. #search input {
  633. border-radius: 0px;
  634. border: none;
  635. margin: 10px 0px 10px 30px;
  636. max-width: 60%;
  637. height: 60px;
  638. /* background-color: #ColorThree; */
  639. }
  640. .white-bg {
  641. width: 100%;
  642. padding: 60px 0px;
  643. background: #fff;
  644. text-align: center;
  645. color: #160c0c;
  646. }
  647. .white-bg h1 {
  648. font-size: 100px;
  649. font-family: "DM Serif Text", serif;
  650. color: #160c0c;
  651. }
  652. .white-bg p {
  653. color: #160c0c;
  654. font-family: "Open Sans", sans-serif;
  655. font-size: 20px;
  656. }
  657. .white-bg #us-hero-text {
  658. padding-top: 30px;
  659. text-align: center;
  660. }
  661. .white-bg p {
  662. font-family: "Open Sans", sans-serif;
  663. font-size: 16px;
  664. line-height: 30px;
  665. text-align: center;
  666. color: #160c0c;
  667. width: 90%;
  668. margin: 0 auto;
  669. margin-top: 50px;
  670. margin-bottom: 30px;
  671. }
  672. .white-bg h2, .white-bg h1, .white-bg h3 {
  673. font-family: "DM Serif Text", serif;
  674. font-weight: bold;
  675. color: #160c0c;
  676. }
  677. .white-bg h2 .degree, .white-bg h1 .degree, .white-bg h3 .degree {
  678. font-weight: normal;
  679. font-size: 12px;
  680. }
  681. .white-bg h2 {
  682. font-family: "DM Serif Text", serif;
  683. font-size: 60px;
  684. margin: 0px;
  685. line-height: 90%;
  686. }
  687. .white-bg h3 {
  688. font-size: 25px;
  689. margin: 0px;
  690. padding: 0px;
  691. line-height: 80%;
  692. letter-spacing: 1px;
  693. }
  694. .white-bg h1 {
  695. font-size: 25px;
  696. margin: 0px;
  697. padding: 50px 5px 10px 5px;
  698. line-height: 130%;
  699. letter-spacing: 5px;
  700. }
  701. .white-bg h1 span {
  702. color: #F68B1F;
  703. font-family: "DM Serif Text", serif;
  704. font-weight: bold;
  705. }
  706. #us-imgs {
  707. width: 100%;
  708. min-height: 600px;
  709. padding-top: 40px;
  710. font: "DM Serif Text", serif;
  711. justify-content: space-around;
  712. gap: 30px;
  713. text-align: center;
  714. margin: 0px auto;
  715. }
  716. #us-imgs div {
  717. margin: 0px auto;
  718. }
  719. .img-container {
  720. position: relative;
  721. overflow: hidden;
  722. width: 100%;
  723. height: 100%;
  724. box-shadow: 4px 4px 4px #333;
  725. }
  726. .img-container .small {
  727. width: 300px;
  728. height: 300px;
  729. }
  730. #us-imgs img {
  731. filter: grayscale(20%);
  732. height: 100%;
  733. -o-object-fit: cover;
  734. object-fit: cover;
  735. -o-object-position: center;
  736. object-position: center;
  737. transition-duration: 1s;
  738. }
  739. #us-imgs img:hover {
  740. scale: 1.2;
  741. filter: contrast(120%) grayscale(0%);
  742. }
  743. .img-container:hover .overlay {
  744. height: 200px;
  745. }
  746. #us-imgs > div {
  747. background: #fff;
  748. max-width: 600px;
  749. }
  750. #us-imgs > div > div {
  751. font-family: "Open Sans", sans-serif;
  752. font-size: 18px;
  753. line-height: 100%;
  754. text-align: left;
  755. }
  756. #us-imgs > div > div p {
  757. margin-top: 20px;
  758. font-family: "DM Serif Text", serif;
  759. font-weight: normal;
  760. font-size: 12px;
  761. letter-spacing: 2px;
  762. line-height: 110%;
  763. color: #fff;
  764. }
  765. #us-imgs > div > div h2 {
  766. margin-top: 10px;
  767. margin-bottom: 10px;
  768. font-family: "DM Serif Text", serif;
  769. text-transform: uppercase;
  770. color: #160c0c;
  771. font-size: 20px;
  772. text-align: left;
  773. }
  774. #us-imgs > div > div p {
  775. color: #000;
  776. font-size: 16px;
  777. font-weight: normal;
  778. font-family: "Open Sans", sans-serif;
  779. text-align: left;
  780. letter-spacing: normal;
  781. margin: 5px !important;
  782. padding: 0px !important;
  783. line-height: 1.4rem;
  784. }
  785. #us-imgs > div > div a {
  786. color: #F68B1F;
  787. font-weight: normal;
  788. text-transform: uppercase;
  789. font-size: 14px;
  790. text-align: left;
  791. margin-top: 20px;
  792. margin-bottom: 40px;
  793. margin-left: 5px;
  794. }
  795. #us-imgs > div > div a:hover {
  796. color: #F68B1F;
  797. }
  798. .img-cont {
  799. overflow: hidden;
  800. text-align: center;
  801. height: 300px;
  802. border-radius: 10px;
  803. }
  804. .img-cont img {
  805. width: 100%;
  806. height: 100%;
  807. -o-object-fit: cover;
  808. object-fit: cover;
  809. -o-object-position: center;
  810. object-position: center;
  811. }
  812. #research-pointers {
  813. margin: 60px 0px;
  814. padding: 50px 0px;
  815. border-top: 1px solid #000;
  816. border-bottom: 1px solid #000;
  817. }
  818. #research-pointers p {
  819. margin: 20px 0px;
  820. }
  821. #dept-notices {
  822. background-image: url("../img/campus_07.jpg");
  823. text-align: center;
  824. }
  825. #dept-notices h1 {
  826. font-family: "DM Serif Text", serif;
  827. letter-spacing: 3px;
  828. }
  829. #dept-notices p {
  830. font-size: 16px;
  831. }
  832. .mid-roll {
  833. min-height: 600px;
  834. width: 100%;
  835. background-size: cover;
  836. background-position: center;
  837. background-attachment: fixed;
  838. padding: 0;
  839. }
  840. .bg-tint {
  841. width: 100%;
  842. height: 100%;
  843. min-height: 600px;
  844. background-color: rgba(17, 2, 32, 0.8196078431);
  845. }
  846. .bg-tint .container {
  847. min-height: 800px;
  848. display: flex;
  849. flex-direction: column;
  850. justify-content: center;
  851. gap: 30px;
  852. margin: 0 auto;
  853. padding: 50px 30px 20px 30px;
  854. }
  855. .bg-tint .container h2 {
  856. font-family: "Open Sans", sans-serif;
  857. font-weight: normal;
  858. font-size: 30px;
  859. letter-spacing: 2px;
  860. margin-bottom: 50px;
  861. line-height: 100%;
  862. }
  863. .bg-tint .container p {
  864. margin: 0px auto;
  865. font-family: "Open Sans", sans-serif;
  866. font-size: 14px;
  867. font-weight: normal;
  868. letter-spacing: 2px;
  869. margin-bottom: 35px;
  870. color: #fff;
  871. }
  872. .bg-tint .container .img-cont {
  873. height: 350px;
  874. max-width: 400px;
  875. overflow: hidden;
  876. border: 2px solid #fff;
  877. margin-bottom: 30px;
  878. }
  879. .bg-tint .container .img-cont img {
  880. transition-duration: 0.5s;
  881. }
  882. .bg-tint .container .img-cont img:hover {
  883. scale: 1.1;
  884. }
  885. .news-big-img-holder {
  886. border-radius: 10px;
  887. height: 400px;
  888. overflow: hidden;
  889. width: auto;
  890. filter: brightness(40%);
  891. transition-duration: 0.6s;
  892. box-shadow: 3px 3px 15px rgba(51, 51, 51, 0.2549019608);
  893. }
  894. .news-big-img-holder img {
  895. height: 400px;
  896. width: 100%;
  897. }
  898. .news-big-img-holder:hover {
  899. filter: brightness(70%);
  900. }
  901. .news-big-img-text {
  902. text-align: left;
  903. left: 20px;
  904. position: absolute;
  905. bottom: 0;
  906. }
  907. .news-big-img-text h4 {
  908. color: #fff;
  909. font-size: 14px;
  910. margin: 0px !important;
  911. padding: 0px;
  912. z-index: 2;
  913. }
  914. .news-big-img-text h4 a {
  915. text-decoration: none;
  916. color: #fff;
  917. }
  918. .news-big-img-text h5 {
  919. font-size: 12px;
  920. margin: 0px;
  921. padding: 0px;
  922. }
  923. .news-big-img-text a p {
  924. font-size: 16px;
  925. color: #fff;
  926. text-align: left;
  927. margin: 10px 0px;
  928. padding: 0px;
  929. line-height: 18px;
  930. }
  931. .news-small-img {
  932. border-radius: 10px;
  933. padding: 10px;
  934. background-color: #fff;
  935. box-shadow: 3px 3px 15px rgba(51, 51, 51, 0.3882352941);
  936. margin-bottom: 20px;
  937. max-height: 400px;
  938. }
  939. .news-sm-img-holder {
  940. height: 260px;
  941. overflow: hidden;
  942. filter: brightness(70%);
  943. transition-duration: 0.6s;
  944. }
  945. .news-sm-img-holder img {
  946. height: 100%;
  947. width: 100%;
  948. -o-object-fit: cover;
  949. object-fit: cover;
  950. }
  951. .news-sm-img-holder:hover {
  952. filter: brightness(90%);
  953. }
  954. .news-sm-img-text {
  955. text-align: left;
  956. margin-left: 20px;
  957. }
  958. .news-sm-img-text h4 {
  959. color: #000;
  960. font-size: 14px;
  961. margin: 0px !important;
  962. padding: 0px;
  963. z-index: 10;
  964. }
  965. .news-sm-img-text h4 a {
  966. text-decoration: none;
  967. color: #000;
  968. }
  969. .news-sm-img-text h5 {
  970. color: #000;
  971. font-size: 12px;
  972. margin: 5px 0px;
  973. padding: 0px;
  974. }
  975. .news-sm-img-text a p {
  976. font-size: 16px;
  977. color: #000;
  978. text-align: left;
  979. margin: 10px 0px;
  980. padding: 0px;
  981. line-height: 18px;
  982. }
  983. #success {
  984. padding-bottom: 60px;
  985. }
  986. #success > .grid > div {
  987. background: #160c0c;
  988. border: 2px solid #2F4858;
  989. text-align: center;
  990. }
  991. #success > .grid > div img {
  992. height: 400px;
  993. width: auto;
  994. -o-object-fit: cover;
  995. object-fit: cover;
  996. }
  997. #success > .grid > div p {
  998. color: #fff;
  999. letter-spacing: 1px;
  1000. text-align: left;
  1001. font-weight: normal;
  1002. font-size: 16px;
  1003. min-height: 100px;
  1004. margin-top: 10px;
  1005. }
  1006. #success > .grid > div h2 {
  1007. font-family: "DM Serif Text", serif;
  1008. font-size: 40px;
  1009. color: #fff;
  1010. padding-top: 30px;
  1011. padding-bottom: 10px;
  1012. margin-bottom: 10px;
  1013. }
  1014. #events {
  1015. min-height: 800px;
  1016. text-align: center;
  1017. background-image: url("../img/campus_01.jpg");
  1018. }
  1019. #events .bg-tint {
  1020. min-height: 800px;
  1021. padding: 50px 0px;
  1022. background: rgba(81, 75, 88, 0.4784313725);
  1023. }
  1024. .event-holder {
  1025. border-radius: 20px;
  1026. min-height: 500px;
  1027. background: #fff;
  1028. }
  1029. .event-holder .event-date {
  1030. position: relative;
  1031. margin-left: 20px;
  1032. margin-top: -35px;
  1033. height: 70px;
  1034. width: 70px;
  1035. background-color: #0b1419;
  1036. display: flex;
  1037. flex-direction: column;
  1038. justify-content: center;
  1039. }
  1040. .event-holder .event-date h3 {
  1041. margin: 0px auto;
  1042. text-align: center;
  1043. color: #fff;
  1044. font-size: 20px;
  1045. line-height: 22px;
  1046. font-family: "DM Serif Text", serif;
  1047. font-weight: bolder;
  1048. }
  1049. .event-holder .event-details {
  1050. text-align: left;
  1051. margin: 10px;
  1052. }
  1053. .event-holder .event-details h2 {
  1054. color: #000;
  1055. font-size: 22px;
  1056. font-weight: bolder;
  1057. margin: 0px auto;
  1058. text-transform: uppercase;
  1059. }
  1060. .event-holder .event-details h3 {
  1061. color: rgba(0, 0, 0, 0.6039215686);
  1062. font-size: 16px;
  1063. margin: 10px 0px;
  1064. }
  1065. .event-img-holder {
  1066. height: 300px;
  1067. overflow: hidden;
  1068. background: #333;
  1069. }
  1070. .event-img-holder img {
  1071. height: 300px;
  1072. width: 100%;
  1073. -o-object-fit: cover;
  1074. object-fit: cover;
  1075. transition-duration: 0.6s;
  1076. }
  1077. .event-img-holder img:hover {
  1078. scale: 1.05;
  1079. }
  1080. #stats > div > div > div {
  1081. padding: 20px 0px;
  1082. text-align: center;
  1083. margin: 20px auto;
  1084. padding-right: 20px;
  1085. color: #fff;
  1086. border-right: 1px solid #fff;
  1087. }
  1088. #stats > div > div > div h1 {
  1089. color: #fff;
  1090. margin-bottom: 20px;
  1091. }
  1092. #stats > div > div > div:last-child {
  1093. border-right: none;
  1094. }
  1095. #admissions {
  1096. padding: 50px 0px 0px 0px !important;
  1097. }
  1098. #admissions img {
  1099. height: 400px;
  1100. -o-object-fit: cover;
  1101. object-fit: cover;
  1102. }
  1103. #admissions p {
  1104. font-family: "Open Sans", sans-serif;
  1105. font-size: 20px;
  1106. text-align: center;
  1107. color: #160c0c;
  1108. width: 90%;
  1109. margin: 0 auto;
  1110. margin-top: 50px;
  1111. margin-bottom: 30px;
  1112. }
  1113. #testimonial-text {
  1114. background: #2F4858;
  1115. height: 150px;
  1116. max-width: 450px;
  1117. text-align: center;
  1118. position: relative;
  1119. top: -75px;
  1120. margin: 0 auto;
  1121. padding-top: 10px;
  1122. box-shadow: 2px 2px 6px #333;
  1123. }
  1124. #testimonial-text blockquote {
  1125. padding: 5px 0px;
  1126. margin: 0px 20px;
  1127. color: white;
  1128. font-family: "Open Sans", sans-serif;
  1129. font-weight: normal;
  1130. font-size: 14px;
  1131. }
  1132. #stu_id {
  1133. padding: 10px 30px;
  1134. }
  1135. #stu_id h2 {
  1136. padding: 5px;
  1137. font-size: 20px;
  1138. color: #fff;
  1139. margin: 0px 0px;
  1140. font-weight: normal;
  1141. text-decoration: none;
  1142. text-align: right;
  1143. }
  1144. #stu_id h3 {
  1145. font-size: 18px;
  1146. color: white;
  1147. margin: 0px auto;
  1148. text-align: center;
  1149. font-weight: lighter;
  1150. text-align: right;
  1151. }
  1152. .research-block {
  1153. padding-block: 20px;
  1154. }
  1155. #research > div > div > div > div.research-img {
  1156. height: 300px;
  1157. width: 100%;
  1158. overflow: hidden;
  1159. border: 1px solid #F68B1F;
  1160. border-bottom: 10px solid #F68B1F;
  1161. }
  1162. #research > div > div > div > div.research-img > img {
  1163. transition-duration: 0.5s;
  1164. height: 300px;
  1165. width: 100%;
  1166. -o-object-fit: cover;
  1167. object-fit: cover;
  1168. -o-object-position: center;
  1169. object-position: center;
  1170. margin: 0px;
  1171. padding: 0px;
  1172. }
  1173. #research > div > div > div > div.research-img > img:hover {
  1174. scale: 1.2;
  1175. }
  1176. #research > div > div > div > div.research-text > h2 {
  1177. font-family: "DM Serif Text", serif;
  1178. font-size: 20px;
  1179. font-weight: normal;
  1180. color: #160c0c;
  1181. padding: 10px 5px;
  1182. margin: 10px 0px;
  1183. text-align: center;
  1184. }
  1185. .research-text {
  1186. text-align: left;
  1187. }
  1188. .research-text p {
  1189. text-align: left;
  1190. font-size: 18px;
  1191. margin: 5px 0px;
  1192. padding: 5px 5px;
  1193. }
  1194. .research-text a {
  1195. color: #333;
  1196. text-decoration: underline;
  1197. }
  1198. .research-text a:hover {
  1199. color: #2F4858;
  1200. }
  1201. .research-text h2 {
  1202. font-family: "Open Sans", sans-serif;
  1203. font-size: 18px;
  1204. color: #fff !important;
  1205. background: #160c0c;
  1206. }
  1207. #testimonial-block > h1 {
  1208. padding: 0px;
  1209. margin: 10px 0px;
  1210. font-size: 35px;
  1211. letter-spacing: 3px;
  1212. }
  1213. #testimonial-block > h1 > a {
  1214. font-family: "DM Serif Text", serif;
  1215. color: #fff;
  1216. padding: 0px;
  1217. }
  1218. #campus-banner {
  1219. height: 500px;
  1220. width: 100%;
  1221. background: url("../img/campus_02.jpg") no-repeat;
  1222. background-size: cover;
  1223. background-position: center;
  1224. }
  1225. #campus-life > h3 {
  1226. color: #160c0c;
  1227. font-size: 20px;
  1228. letter-spacing: 1px;
  1229. box-shadow: none;
  1230. font-family: "DM Serif Text", serif;
  1231. margin: 30px auto;
  1232. }
  1233. #campus-life {
  1234. padding-bottom: 30px !important;
  1235. min-height: 500px;
  1236. }
  1237. #us-imgs > div > div > h2 {
  1238. text-transform: uppercase;
  1239. font-family: "Open Sans", sans-serif;
  1240. font-size: 24px;
  1241. font-weight: 900;
  1242. padding: 10px 5px;
  1243. text-align: left;
  1244. color: #000;
  1245. text-shadow: none;
  1246. }
  1247. #socials h1 {
  1248. color: #160c0c;
  1249. margin: 0px auto;
  1250. text-align: center;
  1251. }
  1252. #socials ul {
  1253. margin-bottom: 0px;
  1254. }
  1255. #socials ul > li {
  1256. display: inline;
  1257. }
  1258. #socials ul > li > a > img {
  1259. width: 60px;
  1260. margin-right: 10px;
  1261. }
  1262. footer {
  1263. position: relative;
  1264. z-index: 30 !important;
  1265. }
  1266. #footer1 {
  1267. z-index: 10;
  1268. height: 400px;
  1269. background: url("../img/footer2.png") no-repeat;
  1270. background-size: cover;
  1271. background-position: top;
  1272. }
  1273. footer.container-fluid {
  1274. border-top: 10px solid #C85688;
  1275. overflow: hidden;
  1276. text-align: left;
  1277. margin: 0px;
  1278. padding: 0px !important;
  1279. background: #160c0c;
  1280. min-height: 350px;
  1281. }
  1282. footer.container-fluid h3 {
  1283. margin: 10px auto;
  1284. margin: 30px 0px;
  1285. font-family: "Open Sans", sans-serif;
  1286. font-size: 20px;
  1287. color: #fff;
  1288. font-weight: normal;
  1289. text-decoration: underline;
  1290. }
  1291. footer.container-fluid ul {
  1292. padding: 0px;
  1293. }
  1294. footer.container-fluid ul > li {
  1295. list-style: none;
  1296. margin: 0px;
  1297. padding: 0px;
  1298. line-height: 110%;
  1299. }
  1300. footer.container-fluid ul > li a {
  1301. text-decoration: none;
  1302. color: #fff;
  1303. font-size: 14px;
  1304. font-weight: normal;
  1305. font-family: "Open Sans", sans-serif;
  1306. }
  1307. footer.container-fluid ul > li a:hover {
  1308. color: #F68B1F;
  1309. text-decoration: underline;
  1310. }
  1311. #fine-print {
  1312. text-align: center;
  1313. margin: 10px auto;
  1314. height: 50px;
  1315. border-top: 1px solid #F68B1F;
  1316. }
  1317. #fine-print p {
  1318. font-size: 12px;
  1319. display: inline-flex;
  1320. }
  1321. #fine-print ul {
  1322. display: inline;
  1323. }
  1324. #fine-print ul > li {
  1325. display: inline;
  1326. padding: 10px;
  1327. font-size: 12px;
  1328. letter-spacing: 1px;
  1329. }
  1330. #menu-bars {
  1331. display: none;
  1332. margin: 0px auto;
  1333. padding-top: 13px;
  1334. font-size: 45px;
  1335. }
  1336. #myNav > div > div > a {
  1337. margin: 0 auto;
  1338. }
  1339. .accredition {
  1340. min-height: 100px;
  1341. }
  1342. .accredition #accredition-img {
  1343. height: 100px;
  1344. width: auto;
  1345. -o-object-fit: contain;
  1346. object-fit: contain;
  1347. margin: 50px 0px;
  1348. }
  1349. #accr h2 {
  1350. padding: 30px 0px 0px 0px;
  1351. font-size: 40px;
  1352. }
  1353. @media (max-width: 1100px) {
  1354. #first-nav > ul {
  1355. position: relative;
  1356. width: 100%;
  1357. left: 0px;
  1358. }
  1359. #first-nav > ul > img {
  1360. width: 350px;
  1361. -o-object-fit: contain;
  1362. object-fit: contain;
  1363. margin-right: auto;
  1364. transition-duration: 0.5s;
  1365. }
  1366. #first-nav > ul > li {
  1367. display: none;
  1368. }
  1369. #first-nav > ul > li:last-child {
  1370. display: inline-block;
  1371. margin-right: auto;
  1372. width: 40px;
  1373. }
  1374. #top-search {
  1375. display: none;
  1376. }
  1377. #menu-bars {
  1378. display: inline-block;
  1379. }
  1380. .banner-overlay {
  1381. margin: 0 auto;
  1382. }
  1383. .banner-overlay h1 {
  1384. text-align: center;
  1385. width: 300px !important;
  1386. font-size: 30px !important;
  1387. margin: 0px auto;
  1388. }
  1389. }
  1390. @media (max-width: 576px) {
  1391. #first-nav > ul > img {
  1392. width: 170px;
  1393. }
  1394. #search > button.filled {
  1395. display: none;
  1396. }
  1397. body > main > section:nth-child(2) > div > h1 {
  1398. font-size: 60px;
  1399. }
  1400. #video-text > h1 {
  1401. margin-top: 30%;
  1402. font-size: 50px;
  1403. }
  1404. #cta {
  1405. display: flex;
  1406. flex-direction: column;
  1407. }
  1408. #cta > button:nth-child(2) {
  1409. display: none;
  1410. }
  1411. #success > h1 {
  1412. font-size: 40px;
  1413. }
  1414. .event-details {
  1415. margin: 10px !important;
  1416. padding: 0px !important;
  1417. }
  1418. #events > div > div > div.event-content > h2 {
  1419. font-size: 12px;
  1420. }
  1421. #events > div > div > div.event-content > h2 {
  1422. font-size: 10px;
  1423. }
  1424. #events > div > div > div.event-content {
  1425. width: 100%;
  1426. }
  1427. #events > div > h1 {
  1428. font-size: 25px;
  1429. }
  1430. #campus-life > h1 {
  1431. font-size: 60px;
  1432. }
  1433. .white-bg h1 {
  1434. font-size: 40px !important;
  1435. }
  1436. .white-bg h2 {
  1437. font-size: 30px;
  1438. }
  1439. #second-nav {
  1440. display: none;
  1441. }
  1442. .banner-overlay {
  1443. margin: 0 auto;
  1444. }
  1445. .banner-overlay h1 {
  1446. text-align: center;
  1447. width: 300px !important;
  1448. font-size: 30px !important;
  1449. margin: 0px auto;
  1450. }
  1451. .banner-slider-button {
  1452. display: none;
  1453. }
  1454. }
  1455. .slider-single-div {
  1456. width: 100%;
  1457. height: 100%;
  1458. }
  1459. .banner-slider {
  1460. z-index: -6;
  1461. width: 100vw;
  1462. height: 100vh;
  1463. position: relative;
  1464. }
  1465. .banner-slider ul {
  1466. margin: 0;
  1467. padding: 0;
  1468. list-style: none;
  1469. }
  1470. .slide {
  1471. position: absolute;
  1472. inset: 0;
  1473. opacity: 0;
  1474. transition: 200ms opacity ease-in-out;
  1475. transition-delay: 600ms;
  1476. }
  1477. .slide img {
  1478. display: block;
  1479. width: 100%;
  1480. height: 100%;
  1481. -o-object-fit: cover;
  1482. object-fit: cover;
  1483. -o-object-position: center;
  1484. object-position: center;
  1485. }
  1486. .slide[data-active] {
  1487. opacity: 1;
  1488. z-index: 1;
  1489. transition-delay: 0ms;
  1490. }
  1491. .banner-slider-button {
  1492. position: absolute;
  1493. z-index: 3;
  1494. background: none;
  1495. border: none;
  1496. font-size: 8rem;
  1497. top: 50%;
  1498. transform: translateY(-50%);
  1499. color: rgba(255, 255, 255, 0.7058823529);
  1500. cursor: pointer;
  1501. border-radius: 0.25rem;
  1502. padding: 0 0.5rem;
  1503. outline: none;
  1504. }
  1505. .banner-slider-button:hover,
  1506. .banner-slider-button:focus {
  1507. color: white;
  1508. background-color: transparent;
  1509. border: none;
  1510. outline: none;
  1511. }
  1512. .banner-slider-button:focus {
  1513. border: none;
  1514. outline: none;
  1515. }
  1516. .banner-slider-button.prev {
  1517. left: 1rem;
  1518. }
  1519. .banner-slider-button.next {
  1520. right: 1rem;
  1521. }
  1522. button:focus {
  1523. border: none !important;
  1524. outline: none !important;
  1525. box-shadow: none !important;
  1526. }
  1527. .banner-overlay {
  1528. position: absolute;
  1529. top: 0;
  1530. z-index: 5;
  1531. height: 100vh;
  1532. width: 100vw;
  1533. background-color: rgba(0, 0, 0, 0.5607843137) !important;
  1534. display: flex;
  1535. flex-direction: column;
  1536. justify-content: center;
  1537. align-items: center;
  1538. }
  1539. .banner-overlay h1, .banner-overlay h2, .banner-overlay h3, .banner-overlay h4 {
  1540. text-align: center;
  1541. font-family: "Open Sans", sans-serif;
  1542. font-weight: 400 !important;
  1543. }
  1544. .banner-overlay h1 {
  1545. font-size: 50px !important;
  1546. margin-bottom: 100px !important;
  1547. }
  1548. @media screen and (max-width: 1100px) {
  1549. .banner-overlay h1 {
  1550. font-size: 40px !important;
  1551. }
  1552. }
  1553. .banner-overlay h3 {
  1554. font-size: 20px !important;
  1555. }
  1556. .banner-overlay h4 {
  1557. margin-top: 100px;
  1558. margin-bottom: 100px !important;
  1559. }
  1560. .program {
  1561. margin: 80px auto;
  1562. }
  1563. .program div {
  1564. border-radius: 10px;
  1565. margin: 40px auto;
  1566. }
  1567. .program div h2 {
  1568. letter-spacing: 3px;
  1569. font-size: 30px;
  1570. }
  1571. .program div p {
  1572. color: #464646;
  1573. }
  1574. .img-cont-2 {
  1575. overflow: hidden;
  1576. text-align: center;
  1577. height: 400px;
  1578. margin: 0px 50px;
  1579. border: none;
  1580. }
  1581. @media (max-width: 990px) {
  1582. .img-cont-2 {
  1583. margin: 40px 0px;
  1584. }
  1585. }
  1586. .img-cont-2 img {
  1587. width: 100%;
  1588. height: 100%;
  1589. -o-object-fit: cover;
  1590. object-fit: cover;
  1591. -o-object-position: center;
  1592. object-position: center;
  1593. transition-duration: 0.5s;
  1594. }
  1595. .img-cont-2 img:hover {
  1596. scale: 1.05;
  1597. }
  1598. .program-details p {
  1599. margin: 20px auto;
  1600. line-height: 24px;
  1601. font-size: 16px;
  1602. color: #000;
  1603. }
  1604. .program-details a {
  1605. font-size: 14px;
  1606. text-transform: uppercase;
  1607. color: #F68B1F;
  1608. }
  1609. .notice-main {
  1610. max-width: 1000px;
  1611. margin: 30px auto;
  1612. }
  1613. .notice-main button {
  1614. background-color: #F68B1F;
  1615. }
  1616. .notice-main button:hover {
  1617. background: #160c0c;
  1618. }
  1619. .notice-main a:hover {
  1620. text-decoration: none;
  1621. }
  1622. .notice-main a:hover h4 {
  1623. text-decoration: underline;
  1624. }
  1625. .notice-main .notice-container {
  1626. padding: 20px !important;
  1627. border: 1px solid rgba(255, 255, 255, 0.431372549);
  1628. position: relative;
  1629. width: 100%;
  1630. padding: 5px 20px;
  1631. display: flex;
  1632. flex-direction: row;
  1633. height: 150px;
  1634. overflow: hidden;
  1635. }
  1636. .notice-main .notice-container .event-date {
  1637. background: #F68B1F;
  1638. width: 80px;
  1639. display: inline-block;
  1640. margin: 0px 20px;
  1641. }
  1642. .notice-main .notice-container .event-date h3 {
  1643. font-weight: 200;
  1644. margin: 0px;
  1645. padding: 0px;
  1646. }
  1647. .notice-main .notice-container h6 {
  1648. text-align: left;
  1649. margin: 0px auto;
  1650. }
  1651. .notice-main .notice-container h4 {
  1652. text-align: left;
  1653. margin: 0px auto;
  1654. color: #F68B1F;
  1655. }
  1656. .notice-main .notice-container .subtitle {
  1657. left: 0px;
  1658. font-size: 12px;
  1659. text-align: left;
  1660. }
  1661. .notice-main .notice-container p {
  1662. font-size: 14px !important;
  1663. text-align: left;
  1664. padding: 0px;
  1665. margin: 0px;
  1666. }
  1667. .notice-main .notice-container:hover {
  1668. text-decoration: none;
  1669. }
  1670. @media (max-width: 600px) {
  1671. .notice-main {
  1672. max-width: 100%;
  1673. }
  1674. }
  1675. .profile-carousel {
  1676. text-align: center;
  1677. margin: 10px auto;
  1678. height: 350px;
  1679. width: 100%;
  1680. white-space: nowrap;
  1681. position: absolute;
  1682. left: 0;
  1683. transition: 1.5s;
  1684. }
  1685. .car-img-holder {
  1686. margin: 20px auto;
  1687. width: 250px;
  1688. height: 250px;
  1689. overflow: hidden;
  1690. border-radius: 10px;
  1691. }
  1692. .car-img-holder img {
  1693. width: 100%;
  1694. height: 100%;
  1695. -o-object-position: center;
  1696. object-position: center;
  1697. -o-object-fit: cover;
  1698. object-fit: cover;
  1699. }
  1700. .car-item {
  1701. margin: 10px 10px;
  1702. padding: 10px;
  1703. width: 320px;
  1704. display: inline-block;
  1705. border-radius: 10px;
  1706. box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.4823529412);
  1707. }
  1708. .car-item-holder .faculty-details {
  1709. min-height: 70px;
  1710. width: 300px;
  1711. overflow: hidden;
  1712. overflow-wrap: break-word;
  1713. }
  1714. .car-item-holder .faculty-details h2 {
  1715. position: relative;
  1716. margin: 20px 0px 0px 0px;
  1717. font-family: "Open Sans", sans-serif;
  1718. font-size: 18px;
  1719. margin: 10px 0px;
  1720. min-height: 30px;
  1721. color: #000;
  1722. overflow-wrap: break-word;
  1723. }
  1724. .car-item-holder .faculty-details h2 .degree {
  1725. font-weight: normal;
  1726. font-size: 12px;
  1727. }
  1728. .car-item-holder .faculty-details h4 {
  1729. font-family: "Open Sans", sans-serif;
  1730. font-size: 12px;
  1731. margin: 5px 0px;
  1732. color: #000;
  1733. overflow-wrap: break-word;
  1734. }
  1735. .car-item-holder .faculty-details h3 {
  1736. font-family: "Open Sans", sans-serif;
  1737. font-size: 12px;
  1738. letter-spacing: 1px;
  1739. color: #000;
  1740. overflow-wrap: break-word;
  1741. margin-bottom: 10px !important;
  1742. }
  1743. .car-item-holder .faculty-details button {
  1744. max-width: 250px !important;
  1745. margin: 10px auto;
  1746. margin-bottom: 0px;
  1747. }
  1748. .car-control {
  1749. width: 5px;
  1750. display: inline-block;
  1751. margin: 10px;
  1752. }
  1753. #prev-car {
  1754. transform: rotate(180deg);
  1755. }
  1756. .car {
  1757. position: relative;
  1758. min-height: 650px;
  1759. overflow: hidden;
  1760. }
  1761. .car-buttons {
  1762. width: 100%;
  1763. display: flex;
  1764. flex-direction: row;
  1765. justify-content: space-between;
  1766. position: absolute;
  1767. top: 20%;
  1768. transform: translateY(50%);
  1769. z-index: 1000;
  1770. }
  1771. .banner-overlay {
  1772. background-color: rgba(0, 0, 0, 0.2);
  1773. }
  1774. .student-stories h2 {
  1775. font-size: 18px !important;
  1776. text-transform: capitalize !important;
  1777. margin-bottom: 0 !important;
  1778. }
  1779. .student-stories h5 {
  1780. color: #f68b1f !important;
  1781. font-size: 14px !important;
  1782. padding: 0 5px;
  1783. margin-bottom: 20px;
  1784. }
  1785. #faculty-carousel .car-item {
  1786. padding: 0;
  1787. box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  1788. }
  1789. #faculty-carousel .car-img-holder {
  1790. width: auto;
  1791. height: 300px;
  1792. margin: 0;
  1793. margin-bottom: 20px;
  1794. border-bottom-left-radius: 0;
  1795. border-bottom-right-radius: 0;
  1796. }
  1797. #faculty-carousel .car-img-holder img {
  1798. border-radius: 0;
  1799. -o-object-position: top;
  1800. object-position: top;
  1801. }
  1802. #faculty-carousel .faculty-details {
  1803. padding: 0 10px 10px;
  1804. width: 100%;
  1805. }
  1806. #faculty-carousel .faculty-details h2 {
  1807. margin-bottom: 5px;
  1808. }
  1809. #faculty-carousel .faculty-details h3 {
  1810. letter-spacing: 0px;
  1811. font-weight: 700;
  1812. color: brown !important;
  1813. font-size: 14px !important;
  1814. }
  1815. #research-pointers {
  1816. border-bottom: none !important;
  1817. margin-bottom: -30px !important;
  1818. }/*# sourceMappingURL=style-cse.css.map */
  1819. /* The Overlay (background) */
  1820. .overlay {
  1821. /* Height & width depends on how you want to reveal the overlay (see JS below) */
  1822. height: 0%;
  1823. width: 100%;
  1824. position: fixed; /* Stay in place */
  1825. z-index: 1100; /* Sit on top */
  1826. left: 0;
  1827. top: 0;
  1828. background-color: rgb(0,0,0); /* Black fallback color */
  1829. background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  1830. overflow-x: hidden; /* Disable horizontal scroll */
  1831. transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  1832. }
  1833. /* Position the content inside the overlay */
  1834. .overlay-content {
  1835. position: relative;
  1836. height: 100%;
  1837. top: 25%; /* 25% from the top */
  1838. width: 100%; /* 100% width */
  1839. text-align: center; /* Centered text/links */
  1840. margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  1841. }
  1842. /* The navigation links inside the overlay */
  1843. .overlay a {
  1844. padding: 8px;
  1845. text-decoration: none;
  1846. font-size: 18px;
  1847. color: white;
  1848. display: block; /* Display block instead of inline */
  1849. transition: 0.3s; /* Transition effects on hover (color) */
  1850. }
  1851. .overlay h1 {
  1852. color: white;
  1853. font-size: 20px;
  1854. font-weight: lighter;
  1855. margin-bottom: 10px;
  1856. text-decoration: underline;
  1857. }
  1858. /* When you mouse over the navigation links, change their color */
  1859. .overlay a:hover, .overlay a:focus {
  1860. color: #f1f1f1;
  1861. }
  1862. /* Position the close button (top right corner) */
  1863. .overlay .closebtn {
  1864. position: absolute;
  1865. top: 20px;
  1866. right: 45px;
  1867. font-size: 60px;
  1868. }
  1869. /* custom by rousnay */
  1870. .banner-overlay h1,
  1871. .banner-overlay h3,
  1872. .banner-overlay h4 {
  1873. color: #edf0f3;
  1874. }
  1875. .container.full-width {
  1876. padding: 0!important;
  1877. }
  1878. header.entry-header {
  1879. display: none!important;
  1880. }
  1881. .static-banner .static-banner-overlay {
  1882. top: 0;
  1883. }
  1884. .desc-block p {
  1885. margin-left: 0!important;
  1886. }
  1887. .article-cover-image {
  1888. margin-bottom: 45px;
  1889. }
  1890. .article-cover-image img{
  1891. width: 100%;
  1892. }
  1893. .article {
  1894. margin-bottom: 45px;
  1895. }
  1896. hr {
  1897. height: 0;
  1898. border: 0;
  1899. border-top: 1px solid #1f2d38;
  1900. color: inherit;
  1901. }
  1902. body.archive aside#secondary{
  1903. display: none;
  1904. }
  1905. .no-post-found {
  1906. margin: auto;
  1907. }
  1908. .portfolio-item {
  1909. border-bottom: 1px solid #999;
  1910. }
  1911. .portfolio-title {
  1912. clear: none;
  1913. }
  1914. .portfolio-logo {
  1915. outline: 2px solid #ebebeb;
  1916. }
  1917. .profile-header-text h2 {
  1918. margin: 5px 0px 10px!important;
  1919. }
  1920. .profile-header-text .contact-dets {
  1921. margin-top: 0px !important;
  1922. margin-right: 10px !important;
  1923. }
  1924. .paper-details .paper-tags .tag {
  1925. margin: 2px;
  1926. display: inline-block;
  1927. }
  1928. .parent-grid {
  1929. display: flex;
  1930. gap: 30px;
  1931. flex-wrap: wrap;
  1932. margin-bottom: 60px;
  1933. }
  1934. .grid-sub-item {
  1935. width: 30% !important;
  1936. margin: 30px 0 0 10px !important;
  1937. }
  1938. #all-faculties .faculty-stub {
  1939. display: flex;
  1940. padding: 0 !important;
  1941. }
  1942. .archive #all-faculties .stub-img-holder{
  1943. border-radius: 0!important;
  1944. }
  1945. #all-faculties .faculty-link {
  1946. width: 65%;
  1947. padding: 0px 10px;
  1948. }
  1949. #all-faculties .faculty-link:hover {
  1950. background-color: rgba(241, 136, 0, 0.15);
  1951. text-decoration: none;
  1952. }
  1953. #all-faculties .archive-faculty-details {
  1954. height: unset!important;
  1955. padding: 0!important;
  1956. }
  1957. #all-events h3 {
  1958. height: unset !important;
  1959. }
  1960. @media screen and (max-width: 991px){
  1961. .parent-grid {
  1962. justify-content: space-around;
  1963. }
  1964. .grid-sub-item {
  1965. width: 40% !important;
  1966. }
  1967. }
  1968. @media screen and (max-width: 575px){
  1969. .grid-sub-item {
  1970. width: 90% !important;
  1971. margin-left: auto!important;
  1972. margin-right: auto!important;
  1973. }
  1974. }
  1975. /* Pickers Styling--------------------------------- */
  1976. .pickers{
  1977. position: fixed;
  1978. right: 0px;
  1979. z-index: 1000;
  1980. top: 300px;
  1981. width: 50px;
  1982. display: flex;
  1983. flex-direction: column;
  1984. justify-content: center;
  1985. }
  1986. /* home page */
  1987. #faculty-carousel .car-img-holder {
  1988. margin-bottom: 0!important;
  1989. }
  1990. #faculty-carousel .faculty-details {
  1991. padding-top: 20px!important;
  1992. }
  1993. #faculty-carousel .faculty-details:hover {
  1994. background-color: rgba(241, 136, 0, 0.15);
  1995. border-bottom-left-radius: 10px;
  1996. border-bottom-right-radius: 10px;
  1997. }
  1998. #faculty-carousel .faculty-details h3 {
  1999. white-space: pre-wrap!important;
  2000. }
  2001. #faculty-carousel a.faculty-name {
  2002. text-decoration: none;
  2003. }
  2004. .event-holder .event-date {
  2005. position: relative;
  2006. margin-left: 0px!important;
  2007. margin-top: -25px;
  2008. height: 50px;
  2009. width: fit-content;
  2010. padding: 0 20px;
  2011. /* border-top-right-radius: 5px;
  2012. border-bottom-right-radius: 5px; */
  2013. }
  2014. section#dept-notices h1,
  2015. section#events h1,
  2016. section#dept-notices .subtitle {
  2017. color: white;
  2018. }
  2019. .news-row {
  2020. display: flex;
  2021. flex-wrap: wrap;
  2022. gap: 25px;
  2023. justify-content: space-between;
  2024. }
  2025. .news-big-img {
  2026. width: calc(50% - 25px);
  2027. position: relative;
  2028. }
  2029. .news-small-img {
  2030. margin-bottom: 0!important;
  2031. max-height:unset!important;
  2032. width: calc(25% - 25px);
  2033. }
  2034. span.degree {
  2035. font-weight: normal;
  2036. font-size: 0.75em;
  2037. font-style: italic;
  2038. font-family: inherit;
  2039. }
  2040. #archive-hero {
  2041. padding: 2rem 0 4rem;
  2042. background: #f3f0ec;
  2043. }
  2044. #archive-hero .content {
  2045. display: flex;
  2046. align-items: start;
  2047. }
  2048. #archive-hero .content .left-content {
  2049. padding: 1rem;
  2050. padding-left: 0 !important;
  2051. flex: 1;
  2052. }
  2053. #archive-hero .content .left-content .main-title {
  2054. font-size: 2.2rem;
  2055. font-weight: 500;
  2056. color: #000000;
  2057. }
  2058. #archive-hero .content .left-content .short-details {
  2059. margin-top: 1.5rem;
  2060. font-size: 1.1rem;
  2061. font-weight: 400;
  2062. }
  2063. #archive-hero .content .left-content .links {
  2064. margin-top: 2rem;
  2065. display: flex;
  2066. gap: 1.8rem;
  2067. }
  2068. #archive-hero .content .left-content .links a {
  2069. height: 1.3rem;
  2070. }
  2071. #archive-hero .content .left-content .links a:hover {
  2072. transform: scale(1.1);
  2073. opacity: 1 !important;
  2074. }
  2075. #archive-hero .content .left-content .links a img {
  2076. height: 100%;
  2077. }
  2078. #archive-hero .content .right-content {
  2079. padding: 0 0 1rem 2rem !important;
  2080. flex: 1;
  2081. align-self: end;
  2082. }
  2083. #archive-hero .content .right-content img {
  2084. width: 100%;
  2085. }