You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3 년 전
3 년 전
3 년 전
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346
  1. /*
  2. # @name: custom.css
  3. # @creation_date: 2021-10-25
  4. # @license: The MIT License <https://opensource.org/licenses/MIT>
  5. # @author: Simon Bowie <ad7588@coventry.ac.uk>
  6. # @purpose: Custom CSS to override Bootstrap 5 defaults
  7. # @acknowledgements:
  8. # Bootstrap 5.1.3: https://getbootstrap.com/
  9. */
  10. :root{
  11. --primary-color:#FFFFFF;
  12. --highlight-colour:#EB7F1D;
  13. --hover-link-colour:#EB7F1D;
  14. --light-highlight-colour:#F8D9AA;
  15. --bs-primary-rgb: 13,110,253;
  16. --bs-secondary-rgb: 108,117,125;
  17. --bs-success-rgb: 25,135,84;
  18. --bs-tool-rgb: 13,202,240;
  19. --bs-practice-rgb: 255,193,7;
  20. --bs-book-rgb: 150, 224, 167;
  21. --bs-danger-rgb: 220,53,69;
  22. --bs-light-rgb: 248,249,250;
  23. --bs-dark-rgb: 33,37,41;
  24. --bs-white-rgb: 255,255,255;
  25. --bs-black-rgb: 0,0,0;
  26. }
  27. @import "https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap";
  28. body {
  29. line-height: 1.2;
  30. font-family: Lato, sans-serif;
  31. -webkit-font-smoothing: antialiased;
  32. font-size: 15px;
  33. color: #000000
  34. }
  35. p {
  36. font-weight: 400;
  37. color: #000000;
  38. font-size: 15px;
  39. line-height: 1.8;
  40. font-family: Lato, sans-serif
  41. }
  42. ul {
  43. font-weight: 400;
  44. color: #000000;
  45. font-size: 15px;
  46. line-height: 1.8;
  47. font-family: Lato, sans-serif;
  48. }
  49. h1,
  50. h2,
  51. h3,
  52. h4,
  53. h5,
  54. h6 {
  55. color: #000;
  56. font-family: Lato, sans-serif;
  57. line-height: 1.2
  58. }
  59. .navbar {
  60. position: relative;
  61. display: -ms-flexbox;
  62. display: flex;
  63. -ms-flex-wrap: wrap;
  64. flex-wrap: wrap;
  65. -ms-flex-align: center;
  66. align-items: center;
  67. -ms-flex-pack: justify;
  68. justify-content: space-between;
  69. padding: 0.5rem 1rem;
  70. }
  71. h1,
  72. .h1 {
  73. font-size: 80px
  74. }
  75. @media(max-width:991px) {
  76. h1,
  77. .h1 {
  78. font-size: 65px
  79. }
  80. }
  81. h2,
  82. .h2 {
  83. font-size: 45px
  84. }
  85. @media(max-width:991px) {
  86. h2,
  87. .h2 {
  88. font-size: 35px
  89. }
  90. }
  91. h3,
  92. .h3 {
  93. font-size: 22px
  94. }
  95. h4,
  96. .h4 {
  97. font-size: 18px
  98. }
  99. h5,
  100. .h5 {
  101. font-size: 14px
  102. }
  103. h6,
  104. .h6 {
  105. font-size: 14px
  106. }
  107. .btn {
  108. font-size: 22px;
  109. font-family: Lato, sans-serif;
  110. text-transform: capitalize;
  111. padding: 16px 44px;
  112. border-radius: 5px;
  113. font-weight: 600;
  114. border: 0;
  115. position: relative;
  116. z-index: 1;
  117. transition: .2s ease
  118. }
  119. .btn:focus {
  120. outline: 0;
  121. box-shadow: none !important
  122. }
  123. .btn:active {
  124. box-shadow: none
  125. }
  126. .btn-sm {
  127. font-size: 15px;
  128. padding: 10px 30px
  129. }
  130. .btn-xs {
  131. padding: 5px 10px;
  132. font-size: 15px
  133. }
  134. .btn-transparent {
  135. background: transparent;
  136. color: var(--primary-color);
  137. font-weight: 700
  138. }
  139. .btn-transparent:active,
  140. .btn-transparent:hover {
  141. color: var(--primary-color)
  142. }
  143. body {
  144. background-color: #fff;
  145. overflow-x: hidden
  146. }
  147. ::selection {
  148. background: var(--highlight-colour);
  149. color: #fff
  150. }
  151. .preloader {
  152. position: fixed;
  153. top: 0;
  154. left: 0;
  155. right: 0;
  156. bottom: 0;
  157. background-color: #fff;
  158. z-index: 999999;
  159. display: flex;
  160. align-items: center;
  161. justify-content: center
  162. }
  163. .search-filter-sidebar {
  164. background-color: #efefef;
  165. padding: 5px;
  166. padding-top: 10px;
  167. border-radius: 0.25rem;
  168. }
  169. #searchResources {
  170. height: calc(1.5em + 0.5rem + 2px);
  171. padding: 0.25rem 0.5rem;
  172. font-size: .875rem;
  173. line-height: 1.5;
  174. border-radius: 0.2rem;
  175. border-bottom: 0px;
  176. }
  177. .filter-title {
  178. padding: 5px;
  179. font-weight: 600;
  180. }
  181. .filter-items {
  182. margin: 0;
  183. padding-left: 1.5rem;
  184. line-height: 1.5;
  185. font-size: 13px;
  186. }
  187. .accordion-body {
  188. padding: 0;
  189. }
  190. ol,
  191. ul {
  192. /*list-style-type: circle;*/
  193. margin: 1rem;
  194. }
  195. img {
  196. vertical-align: middle;
  197. border: 0
  198. }
  199. a,
  200. a:hover,
  201. a:focus {
  202. text-decoration: none
  203. }
  204. a,
  205. button,
  206. select {
  207. cursor: pointer;
  208. transition: .2s ease
  209. }
  210. a:focus,
  211. button:focus,
  212. select:focus {
  213. outline: 0
  214. }
  215. a.text-dark:hover {
  216. color: var(--hover-link-colour) !important
  217. }
  218. a:hover {
  219. color: var(--hover-link-colour)
  220. }
  221. .slick-slide {
  222. outline: 0
  223. }
  224. .section {
  225. padding-top: 80px;
  226. padding-bottom: 80px
  227. }
  228. .section-title {
  229. margin-bottom: 80px;
  230. font-family: Lato, sans-serif;
  231. /*font-weight: 700;*/
  232. background: linear-gradient(90deg, var(--highlight-colour), var(--light-highlight-colour)) no-repeat left 123%/98% 45%;
  233. }
  234. .bg-cover {
  235. background-size: cover;
  236. background-position: 50%;
  237. background-repeat: no-repeat
  238. }
  239. .overlay {
  240. position: relative
  241. }
  242. .overlay::before {
  243. position: absolute;
  244. content: '';
  245. height: 100%;
  246. width: 100%;
  247. top: 0;
  248. left: 0;
  249. background: #000;
  250. opacity: .5
  251. }
  252. .outline-0 {
  253. outline: 0 !important
  254. }
  255. .d-unset {
  256. display: unset !important
  257. }
  258. .bg-primary {
  259. background: var(--primary-color) !important
  260. }
  261. .bg-gray {
  262. background: #eaeaea !important
  263. }
  264. .text-primary {
  265. color: var(--primary-color) !important
  266. }
  267. .text-color {
  268. color: #000000
  269. }
  270. .text-dark {
  271. color: #000 !important
  272. }
  273. .text-light {
  274. color: #999 !important
  275. }
  276. .mb-10 {
  277. margin-bottom: 10px !important
  278. }
  279. .mb-20 {
  280. margin-bottom: 20px !important
  281. }
  282. .mb-30 {
  283. margin-bottom: 30px !important
  284. }
  285. .mb-40 {
  286. margin-bottom: 40px !important
  287. }
  288. .mb-50 {
  289. margin-bottom: 50px !important
  290. }
  291. .mb-60 {
  292. margin-bottom: 60px !important
  293. }
  294. .mb-70 {
  295. margin-bottom: 70px !important
  296. }
  297. .mb-80 {
  298. margin-bottom: 80px !important
  299. }
  300. .mb-90 {
  301. margin-bottom: 90px !important
  302. }
  303. .mb-100 {
  304. margin-bottom: 100px !important
  305. }
  306. .zindex-1 {
  307. z-index: 1
  308. }
  309. .rounded-lg {
  310. border-radius: 15px
  311. }
  312. .overflow-hidden {
  313. overflow: hidden
  314. }
  315. .font-primary {
  316. font-family: Lato, sans-serif !important
  317. }
  318. .font-secondary {
  319. font-family: Lato, serif !important
  320. }
  321. .font-secondary {
  322. font-family: Lato, sans-serif;
  323. /*font-weight: 700 !important;*/
  324. }
  325. .font-tertiary {
  326. font-family: Lato, sans-serif;
  327. font-style: italic;
  328. font-weight: 200;
  329. font-size: 14px;
  330. }
  331. .shadow {
  332. box-shadow: 0 18px 39.1px 6.9px rgba(224, 241, 255, .34) !important
  333. }
  334. .bg-dark {
  335. background-color: #222 !important
  336. }
  337. .icon {
  338. font-size: 45px
  339. }
  340. .icon-bg {
  341. height: 100px;
  342. width: 100px;
  343. line-height: 100px;
  344. text-align: center
  345. }
  346. .icon-light {
  347. color: var(--highlight-colour);
  348. }
  349. .slick-dots {
  350. text-align: center;
  351. padding-left: 0
  352. }
  353. .slick-dots li {
  354. display: inline-block;
  355. margin: 2px
  356. }
  357. .slick-dots li.slick-active button {
  358. background: rgba(0, 0, 0, .5);
  359. width: 25px
  360. }
  361. .slick-dots li button {
  362. height: 6px;
  363. width: 12px;
  364. background: rgba(0, 0, 0, .5);
  365. color: transparent;
  366. border-radius: 10px;
  367. overflow: hidden;
  368. transition: .2s ease;
  369. border: 0
  370. }
  371. .form-control {
  372. border: 0;
  373. border-radius: 0;
  374. border-bottom: 1px solid #c7c7c7;
  375. height: 60px
  376. }
  377. .form-control:focus {
  378. border-color: var(--primary-color);
  379. outline: 0;
  380. box-shadow: none !important
  381. }
  382. textarea.form-control {
  383. height: 120px
  384. }
  385. .card {
  386. border: 0;
  387. height: 100%
  388. }
  389. .card-header {
  390. border: 0
  391. }
  392. .card-footer {
  393. border: 0
  394. }
  395. .navigation {
  396. padding: 15px 130px;
  397. transition: .3s ease
  398. }
  399. .navigation.nav-bg {
  400. background-color: var(--primary-color);
  401. padding: 5px 5px
  402. }
  403. @media(max-width:991px) {
  404. .navigation.nav-bg {
  405. padding: 15px 20px
  406. }
  407. }
  408. @media(max-width:991px) {
  409. .navigation {
  410. padding: 20px;
  411. background: var(--primary-color)
  412. }
  413. }
  414. .navbar .nav-item .nav-link {
  415. font-family: Lato, sans-serif;
  416. font-weight: 700;
  417. text-transform: uppercase;
  418. padding: 15px
  419. }
  420. .navbar .nav-item.active .nav-link{
  421. color: #52f8f4;
  422. }
  423. .navbar-dark .navbar-nav .nav-link {
  424. color: #fff;
  425. }
  426. .hero-area {
  427. padding: 250px 0 200px;
  428. position: relative
  429. }
  430. @media(max-width:767px) {
  431. .hero-area {
  432. padding: 200px 0 150px;
  433. overflow: hidden
  434. }
  435. }
  436. .hero-area h1 {
  437. position: relative;
  438. z-index: 2
  439. }
  440. .layer {
  441. position: absolute;
  442. z-index: 1
  443. }
  444. #l1 {
  445. bottom: 0;
  446. left: 0
  447. }
  448. #l2 {
  449. top: 190px;
  450. left: -250px
  451. }
  452. #l3 {
  453. top: 200px;
  454. left: 40%
  455. }
  456. #l4 {
  457. top: 200px;
  458. right: 40%
  459. }
  460. #l5 {
  461. top: 100px;
  462. right: -150px
  463. }
  464. #l6 {
  465. bottom: -20px;
  466. left: 10%
  467. }
  468. #l7 {
  469. bottom: 100px;
  470. left: 20%
  471. }
  472. #l8 {
  473. bottom: 160px;
  474. right: 45%
  475. }
  476. #l9 {
  477. bottom: 100px;
  478. right: -10px
  479. }
  480. .layer-bg {
  481. position: absolute;
  482. bottom: 0;
  483. left: 0;
  484. z-index:-1;
  485. }
  486. .progress-wrapper {
  487. height: 130px;
  488. overflow: hidden
  489. }
  490. .wave {
  491. position: absolute;
  492. width: 100%;
  493. height: 100%
  494. }
  495. .wave::before,
  496. .wave::after {
  497. content: "";
  498. position: absolute;
  499. width: 800px;
  500. height: 800px;
  501. bottom: 0;
  502. left: 50%;
  503. background-color: rgba(255, 255, 255, .4);
  504. border-radius: 45%;
  505. transform: translateX(-50%) rotate(0);
  506. animation: rotate 6s linear infinite;
  507. z-index: 10
  508. }
  509. .wave::after {
  510. border-radius: 47%;
  511. background-color: rgba(255, 255, 255, .9);
  512. transform: translateX(-50%) rotate(0);
  513. animation: rotate 10s linear -5s infinite;
  514. z-index: 20
  515. }
  516. @keyframes rotate {
  517. 50% {
  518. transform: translateX(-50%) rotate(180deg)
  519. }
  520. 100% {
  521. transform: translateX(-50%) rotate(360deg)
  522. }
  523. }
  524. .edu-bg-image {
  525. position: absolute;
  526. left: 0;
  527. top: -300px;
  528. z-index: -1
  529. }
  530. .hover-bg-primary {
  531. transition: .3s ease
  532. }
  533. .hover-bg-primary:hover {
  534. background: var(--primary-color)
  535. }
  536. .hover-bg-primary:hover * {
  537. color: #fff
  538. }
  539. .active-bg-primary {
  540. transition: .3s ease;
  541. background: var(--light-highlight-colour)
  542. }
  543. .active-bg-primary * {
  544. color: #000000
  545. }
  546. .hover-shadow {
  547. transition: .2s ease
  548. }
  549. .hover-shadow:hover {
  550. box-shadow: 0 18px 40px 8px rgba(224, 241, 255, .54) !important
  551. }
  552. .hover-wrapper {
  553. overflow: hidden;
  554. padding: 25px;
  555. }
  556. .hover-wrapper img {
  557. transition: .3s ease;
  558. transform: scale(1.1)
  559. }
  560. .hover-wrapper:hover img {
  561. transform: scale(1)
  562. }
  563. .hover-wrapper:hover .hover-overlay {
  564. opacity: 1;
  565. visibility: visible
  566. }
  567. .hover-overlay {
  568. position: absolute;
  569. height: 100%;
  570. width: 100%;
  571. border-radius: inherit;
  572. top: 0;
  573. left: 0;
  574. background: rgba(0, 0, 0, .3);
  575. opacity: 0;
  576. visibility: hidden;
  577. transition: .3s ease
  578. }
  579. .hover-content {
  580. position: absolute;
  581. top: 50%;
  582. transform: translateY(-50%);
  583. left: 0;
  584. right: 0;
  585. text-align: center
  586. }
  587. .testimonial-content strong {
  588. color: #2bfdff;
  589. font-weight: 400
  590. }
  591. .testimonial-bg-shapes .container {
  592. position: relative;
  593. z-index: 1
  594. }
  595. .testimonial-bg-shapes .bg-map {
  596. position: absolute;
  597. left: 50%;
  598. top: 50%;
  599. transform: translate(-50%, -50%)
  600. }
  601. .testimonial-bg-shapes .bg-shape-1 {
  602. position: absolute;
  603. left: 100px;
  604. top: -50px
  605. }
  606. .testimonial-bg-shapes .bg-shape-2 {
  607. position: absolute;
  608. right: 150px;
  609. top: 50px
  610. }
  611. .testimonial-bg-shapes .bg-shape-3 {
  612. position: absolute;
  613. right: 50px;
  614. top: 200px
  615. }
  616. .testimonial-bg-shapes .bg-shape-4 {
  617. position: absolute;
  618. left: 100px;
  619. bottom: 200px
  620. }
  621. .testimonial-bg-shapes .bg-shape-5 {
  622. position: absolute;
  623. right: 200px;
  624. bottom: -50px
  625. }
  626. /*.footer-section {
  627. padding-top: 200px
  628. }*/
  629. .footer-section a {
  630. color: #fff;
  631. }
  632. .footer-bottom a {
  633. color: #999;
  634. text-decoration: underline;
  635. }
  636. .footer-section a:hover {
  637. color: #fff;
  638. text-decoration: underline;
  639. }
  640. .section-on-footer {
  641. margin-bottom: -250px
  642. }
  643. .shadow-down {
  644. position: relative
  645. }
  646. .shadow-down::before {
  647. position: absolute;
  648. content: "";
  649. box-shadow: 0 0 80.75px 14.25px rgba(224, 241, 255, .34);
  650. height: 100%;
  651. width: 100%;
  652. left: 0;
  653. top: 0;
  654. z-index: -1
  655. }
  656. .card-lg {
  657. flex-direction: row-reverse;
  658. align-items: center
  659. }
  660. @media(max-width:991px) {
  661. .card-lg {
  662. flex-direction: column
  663. }
  664. }
  665. blockquote {
  666. display: inline-block;
  667. padding: 10px 20px;
  668. background: #eaeaea;
  669. border-left: 2px solid var(--primary-color);
  670. font-style: italic;
  671. font-size: 22px
  672. }
  673. .content * {
  674. margin-bottom: 20px
  675. }
  676. .content strong {
  677. font-family: Lato,serif;
  678. color: #000;
  679. line-height: 1.5;
  680. }
  681. .content img {
  682. max-width: 100%;
  683. height: auto;
  684. margin: 0 auto 15px;
  685. display: block;
  686. text-align: center;
  687. }
  688. .page-title-alt {
  689. padding: 350px 0 70px
  690. }
  691. .border-thick {
  692. border: 10px solid
  693. }
  694. .drag-lg-top {
  695. margin-top: -230px
  696. }
  697. @media(max-width:991px) {
  698. .drag-lg-top {
  699. margin-top: 0
  700. }
  701. }
  702. .page-title-alt .container {
  703. position: relative;
  704. z-index: 1
  705. }
  706. .page-title-alt .bg-shape-1 {
  707. position: absolute;
  708. left: 0;
  709. top: 0;
  710. height: 100%
  711. }
  712. .page-title-alt .bg-shape-2 {
  713. position: absolute;
  714. left: 70px;
  715. top: 100px
  716. }
  717. .page-title-alt .bg-shape-3 {
  718. position: absolute;
  719. left: 30%;
  720. top: 50px;
  721. transform: rotate(180deg)
  722. }
  723. .page-title-alt .bg-shape-4 {
  724. position: absolute;
  725. left: 100px;
  726. bottom: 100px
  727. }
  728. .page-title-alt .bg-shape-5 {
  729. position: absolute;
  730. left: 40%;
  731. bottom: -25px
  732. }
  733. .page-title-alt .bg-shape-6 {
  734. position: absolute;
  735. bottom: 100px;
  736. right: -100px
  737. }
  738. .page-title {
  739. padding: 250px 0 150px
  740. }
  741. .page-title .container {
  742. position: relative;
  743. z-index: 1
  744. }
  745. .page-title .bg-shape-1 {
  746. position: absolute;
  747. left: 0;
  748. bottom: 0;
  749. width: 100%
  750. }
  751. .page-title .bg-shape-2 {
  752. position: absolute;
  753. left: -20px;
  754. top: -10px
  755. }
  756. .page-title .bg-shape-3 {
  757. position: absolute;
  758. left: 10%;
  759. top: 100px
  760. }
  761. .page-title .bg-shape-4 {
  762. position: absolute;
  763. left: 50%;
  764. top: -20px
  765. }
  766. .page-title .bg-shape-5 {
  767. position: absolute;
  768. left: 90px;
  769. bottom: -50px;
  770. transform: rotate(180deg)
  771. }
  772. .page-title .bg-shape-6 {
  773. position: absolute;
  774. right: 20%;
  775. bottom: -20px
  776. }
  777. .page-title .bg-shape-7 {
  778. position: absolute;
  779. right: -220px;
  780. bottom: -100px
  781. }
  782. .filter-controls li {
  783. cursor: pointer
  784. }
  785. .filter-controls li.active {
  786. font-weight: 700
  787. }
  788. .social-icons a{
  789. height: 100px;
  790. width: 100px;
  791. line-height: 102px;
  792. border-radius: 50%;
  793. display: block;
  794. box-shadow: 0 18px 39.1px 6.9px rgba(224,241,255,.34);
  795. color: #fff;
  796. background-color: var(--primary-color);
  797. font-size: 20px;
  798. text-align: center;
  799. }
  800. .project-meta{
  801. display: flex;
  802. align-items: center;
  803. }
  804. .project-meta i{
  805. height: 100px;
  806. min-width: 100px;
  807. line-height: 100px;
  808. background-color: #fff;
  809. color: var(--primary-color);
  810. border-radius: 50%;
  811. text-align: center;
  812. display: block;
  813. box-shadow: 0 18px 39.1px 6.9px rgba(224,241,255,.34);
  814. font-size: 30px;
  815. }
  816. .project-meta h4{
  817. font-weight: bold;
  818. font-size: 24px;
  819. }
  820. .project-meta p{
  821. margin-bottom: 0;
  822. }
  823. summary {
  824. color: #000;
  825. font-family: Lato, sans-serif;
  826. line-height: 1.2;
  827. font-size: 22px;
  828. font-weight: 500;
  829. }
  830. details {
  831. font-weight: 400;
  832. color: #000000;
  833. font-size: 15px;
  834. line-height: 1.8;
  835. font-family: Lato,sans-serif;
  836. margin-bottom: 20px;
  837. }
  838. .dropdown-item.active, .dropdown-item:active {
  839. background-color: var(--highlight-colour);
  840. }
  841. a {
  842. color: #0062F5;
  843. }
  844. blockquote a {
  845. color: #005CE6;
  846. }
  847. .font-secondary {
  848. font-family: Lato,sans-serif;
  849. font-weight: 400!important;
  850. }
  851. .title {
  852. font-size: 22px
  853. }
  854. .footer-title {
  855. font-size: 18px
  856. }
  857. .light-paragraph {
  858. font-family: Lato,sans-serif;
  859. font-weight: 200!important;
  860. }
  861. @media (max-width: 544px) {
  862. h1 {font-size:1.5rem;} /*1rem = 16px*/
  863. }
  864. h2 {
  865. background: linear-gradient(90deg, var(--highlight-colour), var(--light-highlight-colour)) no-repeat left 123%/98% 45%;
  866. }
  867. table{
  868. width:100%;
  869. margin-bottom:1rem;
  870. color:#212529
  871. }
  872. table td,.table th{
  873. padding:.75rem;
  874. vertical-align:top;
  875. border-top:1px solid #dee2e6
  876. }
  877. table thead th{
  878. text-align:center;
  879. vertical-align:bottom;
  880. border-bottom:2px solid #dee2e6
  881. }
  882. table tbody+tbody{
  883. border-top:2px solid #dee2e6
  884. }
  885. main > .container {
  886. padding: 60px 15px 0;
  887. }
  888. .carousel-control-next,
  889. .carousel-control-prev,
  890. .carousel-indicators {
  891. filter: invert(100%);
  892. }
  893. .bg-tool {
  894. --bs-bg-opacity: 1;
  895. background-color: rgba(var(--bs-tool-rgb),var(--bs-bg-opacity))!important;
  896. }
  897. .bg-practice {
  898. --bs-bg-opacity: 1;
  899. background-color: rgba(var(--bs-practice-rgb),var(--bs-bg-opacity))!important;
  900. }
  901. .bg-book {
  902. --bs-bg-opacity: 1;
  903. background-color: rgba(var(--bs-book-rgb),var(--bs-bg-opacity))!important;
  904. }
  905. .drop {
  906. position: relative;
  907. -webkit-user-select: none;
  908. -moz-user-select: none;
  909. -ms-user-select: none;
  910. user-select: none;
  911. }
  912. .drop.open {
  913. z-index: 100;
  914. }
  915. .drop.open .drop-screen {
  916. z-index: 100;
  917. display: block;
  918. }
  919. .drop.open .drop-options {
  920. z-index: 200;
  921. max-height: 200px;
  922. }
  923. .drop.open .drop-display {
  924. z-index: 200;
  925. border-color: #465;
  926. }
  927. .drop select {
  928. display: none;
  929. }
  930. .drop .drop-screen {
  931. position: fixed;
  932. width: 100%;
  933. height: 100%;
  934. background: #000;
  935. top: 0px;
  936. left: 0px;
  937. opacity: 0;
  938. display: none;
  939. z-index: 1;
  940. }
  941. .link {
  942. text-align: center;
  943. margin: 20px 0px;
  944. color:#8CACD7;
  945. }
  946. .drop .drop-display {
  947. position: relative;
  948. padding: 0px 20px 5px 5px;
  949. border: 4px solid #444;
  950. width: 100%;
  951. background: #FFF;
  952. z-index: 1;
  953. margin: 0px;
  954. font-size: 16px;
  955. min-height: 58px;
  956. }
  957. .drop .drop-display:hover:after {
  958. opacity: 0.75;
  959. }
  960. .drop .drop-display:after {
  961. font-family: 'Material Icons';
  962. content: "\e5c6";
  963. position: absolute;
  964. right: 10px;
  965. top: 12px;
  966. font-size: 24px;
  967. color: #444;
  968. }
  969. .drop .drop-display .item {
  970. position: relative;
  971. display: inline-block;
  972. border: 2px solid #333;
  973. margin: 5px 5px -4px 0px;
  974. padding: 0px 25px 0px 10px;
  975. overflow: hidden;
  976. height: 40px;
  977. line-height: 36px;
  978. }
  979. .drop .drop-display .item .btnclose {
  980. color: #444;
  981. position: absolute;
  982. font-size: 16px;
  983. right: 5px;
  984. top: 10px;
  985. cursor: pointer;
  986. }
  987. .drop .drop-display .item .btnclose:hover {
  988. opacity: 0.75;
  989. }
  990. .drop .drop-display .item.remove {
  991. -webkit-animation: removeSelected 0.2s, hide 1s infinite;
  992. animation: removeSelected 0.2s, hide 1s infinite;
  993. -webkit-animation-delay: 0s, 0.2s;
  994. animation-delay: 0s, 0.2s;
  995. }
  996. .drop .drop-display .item.add {
  997. -webkit-animation: addSelected 0.2s;
  998. animation: addSelected 0.2s;
  999. }
  1000. .drop .drop-display .item.hide {
  1001. display: none;
  1002. }
  1003. .drop .drop-options {
  1004. background: #444;
  1005. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  1006. position: absolute;
  1007. width: 100%;
  1008. max-height: 0px;
  1009. overflow-y: auto;
  1010. transition: all 0.25s linear;
  1011. z-index: 1;
  1012. }
  1013. .drop .drop-options a {
  1014. display: block;
  1015. height: 40px;
  1016. line-height: 40px;
  1017. padding: 0px 20px;
  1018. color: white;
  1019. position: relative;
  1020. max-height: 40px;
  1021. transition: all 1s;
  1022. overflow: hidden;
  1023. }
  1024. .drop .drop-options a:hover {
  1025. background: #465;
  1026. cursor: pointer;
  1027. }
  1028. .drop .drop-options a.remove {
  1029. -webkit-animation: removeOption 0.2s;
  1030. animation: removeOption 0.2s;
  1031. max-height: 0px;
  1032. }
  1033. .drop .drop-options a.add {
  1034. -webkit-animation: addOption 0.2s;
  1035. animation: addOption 0.2s;
  1036. }
  1037. .drop .drop-options a.hide {
  1038. display: none;
  1039. }
  1040. @-webkit-keyframes pop {
  1041. from {
  1042. -webkit-transform: scale(0);
  1043. transform: scale(0);
  1044. }
  1045. to {
  1046. -webkit-transform: scale(1);
  1047. transform: scale(1);
  1048. }
  1049. }
  1050. @keyframes pop {
  1051. from {
  1052. -webkit-transform: scale(0);
  1053. transform: scale(0);
  1054. }
  1055. to {
  1056. -webkit-transform: scale(1);
  1057. transform: scale(1);
  1058. }
  1059. }
  1060. @-webkit-keyframes removeOption {
  1061. from {
  1062. max-height: 40px;
  1063. }
  1064. to {
  1065. max-height: 0px;
  1066. }
  1067. }
  1068. @keyframes removeOption {
  1069. from {
  1070. max-height: 40px;
  1071. }
  1072. to {
  1073. max-height: 0px;
  1074. }
  1075. }
  1076. @-webkit-keyframes addOption {
  1077. from {
  1078. max-height: 0px;
  1079. }
  1080. to {
  1081. max-height: 40px;
  1082. }
  1083. }
  1084. @keyframes addOption {
  1085. from {
  1086. max-height: 0px;
  1087. }
  1088. to {
  1089. max-height: 40px;
  1090. }
  1091. }
  1092. @-webkit-keyframes removeSelected {
  1093. from {
  1094. -webkit-transform: scale(1);
  1095. transform: scale(1);
  1096. }
  1097. to {
  1098. -webkit-transform: scale(0);
  1099. transform: scale(0);
  1100. }
  1101. }
  1102. @keyframes removeSelected {
  1103. from {
  1104. -webkit-transform: scale(1);
  1105. transform: scale(1);
  1106. }
  1107. to {
  1108. -webkit-transform: scale(0);
  1109. transform: scale(0);
  1110. }
  1111. }
  1112. @-webkit-keyframes addSelected {
  1113. from {
  1114. -webkit-transform: scale(0);
  1115. transform: scale(0);
  1116. }
  1117. to {
  1118. -webkit-transform: scale(1);
  1119. transform: scale(1);
  1120. }
  1121. }
  1122. @keyframes addSelected {
  1123. from {
  1124. -webkit-transform: scale(0);
  1125. transform: scale(0);
  1126. }
  1127. to {
  1128. -webkit-transform: scale(1);
  1129. transform: scale(1);
  1130. }
  1131. }
  1132. @-webkit-keyframes hide {
  1133. from, to {
  1134. max-height: 0px;
  1135. max-width: 0px;
  1136. padding: 0px;
  1137. margin: 0px;
  1138. border-width: 0px;
  1139. }
  1140. }
  1141. @keyframes hide {
  1142. from, to {
  1143. max-height: 0px;
  1144. max-width: 0px;
  1145. padding: 0px;
  1146. margin: 0px;
  1147. border-width: 0px;
  1148. }
  1149. }