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.

1316 satır
19KB

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