Diligent web site
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

custom.css 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. /* #navigation ul li.active.portfolio .nav-active-mark
  2. {
  3. bottom: -20px;
  4. } */
  5. a:hover
  6. {
  7. text-decoration: none!important;
  8. }
  9. .h3
  10. {
  11. font-size: 36px;
  12. }
  13. .section-title h1
  14. {
  15. font: 72px 'bebas_neue', Helvetica, Arial, sans-serif;
  16. color: #1d1d1d;
  17. padding: 0;
  18. margin-bottom: -10px;
  19. }
  20. .red-background
  21. {
  22. background-color: #cd1e28
  23. }
  24. .white-background, .contact-social.linkedin .hex-area.white-background
  25. {
  26. background-color: #d7dbd8!important;
  27. }
  28. .gray-background, .contact-social.linkedin .outer-hex.gray-background
  29. {
  30. background-color: #9e9e9e !important;
  31. }
  32. .dark-blue-background ,.contact-social.linkedin .dark-blue-background.hex-area
  33. {
  34. background-color: #103576!important;
  35. }
  36. .light-blue-background, .contact-social.linkedin .light-blue-background.hex-area
  37. {
  38. background-color: #089bcf!important;
  39. }
  40. #gallery .contact-socials .contact-social-overlay .hex-area ,#portfolio-header .contact-socials .contact-social-overlay .hex-area {
  41. /*background-color: #d7dbd8!important;*/
  42. background-color: #cccccc!important;
  43. }
  44. #gallery .gallery-item-overlay .hex-area, #portfolio-header .gallery-item-overlay .hex-area{
  45. background-color: #d7dbd8!important;
  46. }
  47. #gallery .gallery-item-overlay .hex-area.no-partner
  48. {
  49. background-color: rgba(104,104,104)!important;
  50. position: relative;
  51. z-index: 999999999;
  52. }
  53. #gallery .hex_overlay
  54. {
  55. background-color: rgba(104,104,104)!important;
  56. position: relative;
  57. z-index: 99999999999;
  58. width: 100%;
  59. height: 100%;
  60. }
  61. #gallery .gallery-item-overlay .outer-hex , #portfolio-header .gallery-item-overlay .outer-hex {
  62. background-color: #9e9e9e;
  63. transition: background-color .35s;
  64. -webkit-transition: background-color .35s;
  65. }
  66. #gallery .flex-control-paging
  67. {
  68. display: none;
  69. }
  70. .white-color
  71. {
  72. color:#fff;
  73. }
  74. #gallery .gallery-item .socials {
  75. padding-top: 80px;
  76. }
  77. #gallery .gallery-item-overlay:hover .outer-hex, #portfolio-header .gallery-item-overlay:hover .outer-hex {
  78. background-color: rgba(153,60,149,0.7);
  79. }
  80. #intro {
  81. height: 540px;
  82. }
  83. #gallery .gallery-box
  84. {
  85. padding: 0px 100px;
  86. }
  87. #our_partners-section
  88. {
  89. position: relative;
  90. z-index: 1;
  91. padding-bottom: 55px;
  92. }
  93. #our_partners-wrap .our_partners-cont
  94. {
  95. position: absolute;
  96. width: 100%;
  97. height: 100%;
  98. left: 0;
  99. top: 0;
  100. opacity: .1;
  101. background-size: cover;
  102. background-color: #000;
  103. z-index: 4;
  104. }
  105. .gallery-cont
  106. {
  107. position: relative;
  108. z-index: 7;
  109. position: relative;
  110. opacity:1;
  111. }
  112. #gallery .contact-social .outer-hex, #portfolio-header .contact-social .outer-hex{
  113. background-color: #9e9e9e !important;
  114. }
  115. .services-wrap-cont
  116. {
  117. border-top: 5px solid #ddd;
  118. }
  119. .typewriter-span {
  120. font-size: 3.82rem;
  121. text-shadow: 0 0 2px #000;
  122. }
  123. .non-margin
  124. {
  125. margin: 0!important;
  126. }
  127. .about-item.highlight {
  128. background-color: #fff;
  129. }
  130. .about-item, .serevices-item {
  131. text-align: center;
  132. padding: 180px 5px;
  133. }
  134. #portfolio-header .hive .outer-hex:hover
  135. {
  136. background-color: rgba(153,60,149,0.7)!important;
  137. }
  138. #galery .gallery-item-overlay:hover .hex-area.no-partner
  139. {
  140. background-color: #d7dbd8!important;
  141. }
  142. #gallery .section-triangle-grey
  143. {
  144. /*background-color: #f6f6f6;*/
  145. display: none;
  146. }
  147. /* #about-section
  148. {
  149. padding-bottom: 240px;
  150. } */
  151. #gallery
  152. {
  153. position: relative;
  154. padding-bottom: 0px!important;
  155. }
  156. #our_partners-wrap::before{
  157. content: "";
  158. position: absolute;
  159. width: 0;
  160. height: 0;
  161. border-style: solid;
  162. border-width: 36px 63px 0px 63px;
  163. border-color: #f6f6f6 transparent transparent transparent;
  164. top: 0;
  165. left:50%;
  166. transform: translateX(-50%);
  167. z-index: 11;
  168. }
  169. #our_partners_title
  170. {
  171. font-size: 40px;
  172. }
  173. #our_partners-section:before
  174. {
  175. content: "";
  176. position: absolute;
  177. width: 0;
  178. height: 0;
  179. border-style: solid;
  180. border-width: 36px 63px 0px 63px;
  181. border-color: #f6f6f6 transparent transparent transparent;
  182. top: 0;
  183. left: 50%;
  184. transform: translateX(-50%);
  185. z-index: 11;
  186. opacity: 1;
  187. }
  188. .successfully
  189. {
  190. color:#00FF00;
  191. }
  192. .error
  193. {
  194. background-color: #FF0000;
  195. }
  196. /*careers page*/
  197. .careers-intro
  198. {
  199. min-height: 500px;
  200. padding-top: 30px;
  201. padding-bottom: 100px;
  202. display: flex;
  203. flex-direction: row;
  204. }
  205. .careers .section-title
  206. {
  207. position: relative;
  208. }
  209. .careers, .apply-form-cont
  210. {
  211. padding-top: 70px;
  212. padding-bottom: 80px;
  213. }
  214. .careers .one_half
  215. {
  216. float: left;
  217. }
  218. .position-cont
  219. {
  220. position: relative;
  221. width:100%;
  222. }
  223. .position
  224. {
  225. position: relative;
  226. width:100%;
  227. color: inherit;
  228. padding: 16px 35px;
  229. border: 4px solid #993c95;
  230. display: flex;
  231. flex-direction: column;
  232. justify-content: space-between;
  233. margin-bottom: 20px;
  234. color: #1d1d1d;
  235. -webkit-transition: background-color .35s, color .35s;
  236. transition: background-color .35s, color .35s;
  237. border-radius: 65px;
  238. cursor: pointer;
  239. }
  240. .position:hover
  241. {
  242. background-color: #993c95!important;
  243. color:#fff!important;
  244. }
  245. .position.active{
  246. background-color: #993c95!important;
  247. color:#fff!important;
  248. }
  249. .position-name
  250. {
  251. padding-top: 20px;
  252. }
  253. .position-name h4
  254. {
  255. position: relative;
  256. margin-right: 55px;
  257. }
  258. .chevron
  259. {
  260. position: absolute;
  261. top: 50%;
  262. right: 30px;
  263. transform: translateY(-50%);
  264. }
  265. .chevron__line1, .chevron__line2
  266. {
  267. stroke-width: 10;
  268. stroke-linecap: round;
  269. -webkit-transition: -webkit-transform 0.4s, stroke 0.4s;
  270. transition: transform 0.4s, stroke 0.4s;
  271. }
  272. .chevron__line1 {
  273. -webkit-transform-origin: 50px 50px;
  274. transform-origin: 50px 50px;
  275. }
  276. .chevron__line2 {
  277. -webkit-transform-origin: 50px 50px;
  278. transform-origin: 50px 50px;
  279. }
  280. .chevron--down, .chevron--up {
  281. display: block;
  282. }
  283. .chevron--down .chevron__container, .chevron--up .chevron__container {
  284. -webkit-transition: -webkit-transform 0.4s;
  285. transition: transform 0.4s;
  286. -webkit-transform: translateY(13px);
  287. transform: translateY(13px);
  288. }
  289. .chevron--down .chevron__line1, .chevron--up .chevron__line1 {
  290. stroke: #993c95;
  291. -webkit-transform: rotate(40deg);
  292. transform: rotate(40deg);
  293. }
  294. .chevron--down .chevron__line2, .chevron--up .chevron__line2 {
  295. stroke: #993c95;
  296. -webkit-transform: rotate(-40deg);
  297. transform: rotate(-40deg);
  298. }
  299. .chevron--up .chevron__container {
  300. -webkit-transform: translateY(-13px);
  301. transform: translateY(-13px);
  302. }
  303. .chevron--up .chevron__line1 {
  304. stroke: white;
  305. -webkit-transform: rotate(-40deg);
  306. transform: rotate(-40deg);
  307. }
  308. .chevron--up .chevron__line2 {
  309. stroke: white;
  310. -webkit-transform: rotate(40deg);
  311. transform: rotate(40deg);
  312. }
  313. .position:hover .chevron--down .chevron__line1, .position:hover .chevron--down .chevron__line2 {
  314. stroke: #fff;
  315. }
  316. .position-content {
  317. padding: 30px 0px;
  318. }
  319. .apply-cont
  320. {
  321. height: auto;
  322. width: 100%;
  323. text-align: center;
  324. margin-top: 50px;
  325. }
  326. .btn-apply
  327. {
  328. color: #fff;
  329. padding: 20px;
  330. border-radius: 45px;
  331. background-color: #993c95;
  332. border: none;
  333. font-size: 1.5rem;
  334. font-weight: bold;
  335. cursor: pointer;
  336. }
  337. .btn-apply:hover{
  338. opacity: .8;
  339. color: #fff;
  340. }
  341. /*end careers*/
  342. /*apply page*/
  343. .apply-title-cont
  344. {
  345. text-align: center;
  346. padding-bottom: 25px;
  347. }
  348. .aplly-title
  349. {
  350. margin-top: 30px;
  351. }
  352. .apply-form-cont .selectize-input input[type="text"]
  353. {
  354. display: none;
  355. }
  356. .apply-form-cont .selectize-control
  357. {
  358. position: relative;
  359. margin-bottom: 30px;
  360. border-bottom: 2px solid #993c95;
  361. cursor: pointer;
  362. }
  363. .apply-form-cont .selectize-control .item
  364. {
  365. padding: 13px 0px 12px 10px;
  366. background-color: #fff;
  367. border-bottom: 1px solid #993c95;
  368. }
  369. .apply-form-cont .selectize-control:hover:after{
  370. color: #993c95;
  371. }
  372. .apply-form-cont .selectize-control:after
  373. {
  374. content:"\25bc";
  375. position: absolute;
  376. right:0;
  377. top:11px;
  378. font-size: 20px;
  379. pointer-events: none;
  380. }
  381. .apply-form-cont .selectize-dropdown
  382. {
  383. position: absolute;
  384. }
  385. .apply-form-cont .selectize-dropdown-content .option
  386. {
  387. background-color: #fff;
  388. -webkit-transition: background-color 0.35s;
  389. transition: background-color 0.35s;
  390. padding: 7px 5px;
  391. padding-left: 10px;
  392. }
  393. .apply-form-cont .selectize-dropdown-content .option:hover{
  394. background-color: #993c95;
  395. color: #fff;
  396. }
  397. .apply-field:not(.resume-file)
  398. {
  399. width:100%;
  400. height:50px;
  401. margin-bottom: 30px;
  402. padding-left: 10px;
  403. border:none;
  404. border-bottom:2px solid #993c95;
  405. }
  406. input[type="file"].apply-field
  407. {
  408. opacity: 0;
  409. /* visibility: hidden; */
  410. position: relative;
  411. z-index: 3;
  412. cursor: pointer;
  413. }
  414. .resume-cont
  415. {
  416. display: block;
  417. position: relative;
  418. z-index: 1;
  419. }
  420. .resume-cont label
  421. {
  422. display: inline-block;
  423. margin-bottom: .5rem;
  424. position: absolute;
  425. font-size: 1.3rem;
  426. /* right: 85px; */
  427. left:50px;
  428. top: 5px;
  429. cursor: pointer;
  430. z-index: 1;
  431. pointer-events: none;
  432. }
  433. .apply-option
  434. {
  435. padding: 10px 0px;
  436. }
  437. .apply-option:hover
  438. {
  439. background-color: #993c95;
  440. }
  441. .apply-field::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  442. opacity: 1; /* Firefox */
  443. }
  444. select.apply-field
  445. {
  446. cursor: pointer;
  447. }
  448. .apply-field:not(.resume-file){
  449. display: block;
  450. }
  451. textarea.apply-field
  452. {
  453. resize: none;
  454. padding-top: 13px;
  455. height: 170px!important;
  456. }
  457. .apply-submit
  458. {
  459. float:right;
  460. display: block;
  461. width: 84px;
  462. height: 24px;
  463. color: #1d1d1d;
  464. border: none;
  465. font-size: 14px;
  466. font-weight: bold;
  467. float: right;
  468. cursor: pointer;
  469. margin-top: 20px;
  470. background-color: #993c95;
  471. transition: opacity 300ms;
  472. -webkit-transition: opacity 300ms;
  473. }
  474. .apply-submit:hover,.contact-form input#submit:hover
  475. {
  476. opacity: .8;
  477. }
  478. .contact-section
  479. {
  480. }
  481. .collapse
  482. {
  483. transition: display 300ms;
  484. -webkit-transition: display 300ms;
  485. }
  486. .resume-file
  487. {
  488. display: block;
  489. }
  490. .delete-file
  491. {
  492. position: relative;
  493. }
  494. .btn-delete-file
  495. {
  496. position: relative;
  497. float: right;
  498. height: 30px;
  499. width: 30px;
  500. cursor: pointer;
  501. z-index: 1;
  502. border: none;
  503. background-color: transparent;
  504. }
  505. .btn-delete-file svg{
  506. font-size: 20px;
  507. }
  508. .btn-delete-file svg path
  509. {
  510. transition: fill 300ms;
  511. -webkit-transition: fill 300ms;
  512. }
  513. .btn-delete-file:hover svg path{
  514. fill: #993c95;
  515. }
  516. .apply-submit:focus,.btn-delete-file:focus{
  517. border:none;
  518. outline: none;
  519. }
  520. .apply-msg-cont
  521. {
  522. margin-top: 50px;
  523. text-align: center;
  524. }
  525. .apply-msg
  526. {
  527. visibility: hidden;
  528. opacity: 0;
  529. color: #28a745;
  530. transition: visibility 0s linear 300ms, opacity 300ms;
  531. -webkit-transition: visibility 0s linear 300ms, opacity 300ms;
  532. font-size: 20px;
  533. }
  534. .apply-msg.active
  535. {
  536. visibility: visible;
  537. opacity: 1;
  538. }
  539. /*apply page end*/
  540. .slides > * {
  541. opacity :1!important;
  542. }
  543. .mobile-nav-toggle:hover{
  544. color: #993c95;
  545. }
  546. @media (max-width: 1024px){
  547. #gallery .gallery-box
  548. {
  549. padding: 0px 80px;
  550. }
  551. }
  552. @media (max-width: 768px){
  553. #gallery .gallery-box
  554. {
  555. padding: 0px 50px;
  556. }
  557. .careers-intro
  558. {
  559. flex-direction: column;
  560. }
  561. }
  562. @media (max-width: 480px){
  563. #gallery .gallery-box
  564. {
  565. padding:0px;
  566. }
  567. .chevron
  568. {
  569. right:20px;
  570. }
  571. .position-name h4
  572. {
  573. position: relative;
  574. margin-right: 55px;
  575. font-size: 1.2rem;
  576. }
  577. }
  578. .diligent-purple-background
  579. {
  580. background-color: #993c95 !important;
  581. }
  582. .diligent-purple-title
  583. {
  584. color: #993c95 !important;
  585. }