Diligent web site
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

custom.css 12KB

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