styles.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119
  1. @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Libre+Franklin:wght@400;900&family=Special+Elite&display=swap');
  2. body{
  3. background-color: #d1d1c7;
  4. background-image: url("../img/billie-holiday.png");
  5. }
  6. .modal-content {
  7. background-color: #fffdf0;
  8. background-image: url("../img/billie-holiday.png");
  9. }
  10. .navbar .logo-image img {
  11. width: 250px;
  12. }
  13. .btn-solid-reg, .btn-solid-sm {
  14. text-shadow: none;
  15. box-shadow: 0px 1px 1px #fff, inset 0 0 5px rgba(0,0,0,.5);
  16. margin-bottom:10px;
  17. }
  18. .img-fluid {
  19. }
  20. .img-border {
  21. border: 5px solid rgba(11, 72, 110, .5);
  22. box-shadow: inset 0 0 5px rgba(0,0,0,.5), 1px 1px 1px #0b486e;
  23. }
  24. #practice {
  25. scroll-margin: 150px 0 0 0;
  26. }
  27. .legal-icons {
  28. font-size: 2rem;
  29. color:rgba(11, 72, 110, .7);
  30. text-shadow: 0px 1px 1px #fff, 0 0 1px #000;
  31. }
  32. .services {
  33. background-color: #ffffff93;
  34. border-radius: 5px;
  35. min-height: 490px;
  36. }
  37. .card-title {
  38. font-weight:900;
  39. }
  40. .testimonial {
  41. background: none;
  42. color:#e3e7d9;
  43. }
  44. #attorneys {
  45. scroll-margin: 150px 0 0 0;
  46. }
  47. #contact .fas, .fab {
  48. color:#0B486E;
  49. }
  50. .franklin {
  51. display: block;
  52. font-family: 'Libre Franklin', sans-serif;
  53. color:#0b486e;
  54. text-shadow: 0px 1px 1px #fff, 0 0 1px #000;
  55. -webkit-background-clip: text;
  56. background-clip: text;
  57. }
  58. .franklin_dk {
  59. display: block;
  60. font-family: 'Libre Franklin', sans-serif;
  61. color:#dde0dc;
  62. text-shadow: 0 -1px 1px rgb(0, 0, 0);
  63. -webkit-background-clip: text;
  64. background-clip: text;
  65. }
  66. .neutral_bg {
  67. background-color: #d1d1c7;
  68. }
  69. .neutral_txt {
  70. color:#d1d1c7;
  71. }
  72. .blue_dk_bg {
  73. background-color:#051c2b;
  74. }
  75. .blue_bg {
  76. background-color: #0b486e;
  77. }
  78. .red_bg {
  79. background-color: #6d0000;
  80. }
  81. .red_txt {
  82. color: #6d0000;
  83. }
  84. .red_dk_bg {
  85. background-color: #360000;
  86. }
  87. .bg-paper {
  88. background-color: #ffffff93;
  89. border-radius: 5px;
  90. }
  91. /*==================================================
  92. ###################### Base ########################
  93. ===================================================*/
  94. body,
  95. html {
  96. width: 100%;
  97. height: 100%;
  98. }
  99. body, p {
  100. }
  101. h1 {
  102. color: #222222;
  103. font-weight: 700;
  104. font-size: 2.5rem;
  105. line-height: 3.25rem;
  106. letter-spacing: -0.4px;
  107. }
  108. h2 {
  109. color: #222222;
  110. font-weight: 700;
  111. font-size: 2rem;
  112. line-height: 2.625rem;
  113. letter-spacing: -0.4px;
  114. }
  115. h3 {
  116. color: #222222;
  117. font-weight: 700;
  118. font-size: 1.75rem;
  119. line-height: 2.25rem;
  120. letter-spacing: -0.2px;
  121. }
  122. h4 {
  123. color: #222222;
  124. font-weight: 700;
  125. font-size: 1.5rem;
  126. line-height: 2rem;
  127. letter-spacing: -0.2px;
  128. }
  129. h5 {
  130. color: #222222;
  131. font-weight: 700;
  132. font-size: 1.25rem;
  133. line-height: 1.625rem;
  134. }
  135. h6 {
  136. color: #222222;
  137. font-weight: 700;
  138. font-size: 1rem;
  139. line-height: 1.375rem;
  140. }
  141. .p-large {
  142. font-size: 1.125rem;
  143. line-height: 1.75rem;
  144. }
  145. .p-small {
  146. font-size: 0.875rem;
  147. line-height: 1.5rem;
  148. }
  149. .testimonial-text {
  150. font-style: italic;
  151. }
  152. .testimonial-author {
  153. font-weight: 700;
  154. font-size: 1.25rem;
  155. line-height: 1.75rem;
  156. }
  157. .li-space-lg li {
  158. margin-bottom: 0.5rem;
  159. }
  160. a {
  161. color: #6D0000;
  162. text-decoration: underline;
  163. }
  164. a:hover {
  165. color: #5e6576;
  166. text-decoration: underline;
  167. }
  168. .no-line {
  169. text-decoration: none;
  170. }
  171. .no-line:hover {
  172. text-decoration: none;
  173. }
  174. .blue {
  175. color: #0B486E;
  176. }
  177. .bg-gray {
  178. background-color: #f9f9f9;
  179. }
  180. .section-title {
  181. display: inline-block;
  182. margin-bottom: 0.75rem;
  183. padding: 0.125rem 1.75rem;
  184. border-radius: 30px;
  185. background-color: #ffe7eb;
  186. color: #ff5574;
  187. font-weight: 600;
  188. font-size: 0.875rem;
  189. }
  190. .btn-solid-reg {
  191. display: inline-block;
  192. padding: 1.375rem 2.25rem 1.375rem 2.25rem;
  193. border-radius: 30px;
  194. background-color: rgb(11, 72, 110);
  195. color: #ffffff;
  196. font-weight: 600;
  197. line-height: 0;
  198. text-decoration: none;
  199. transition: all 0.2s;
  200. }
  201. .btn-solid-reg:hover {
  202. background-color: transparent;
  203. color: #0B486E; /* needs to stay here because of the color property of a tag */
  204. text-decoration: none;
  205. }
  206. .btn-solid-lg {
  207. display: inline-block;
  208. padding: 1.625rem 2.625rem 1.625rem 2.625rem;
  209. border: 1px solid #0976BA;
  210. border-radius: 30px;
  211. background-color: #0B486E;
  212. color: #ffffff;
  213. font-weight: 600;
  214. font-size: 22px;
  215. line-height: 0;
  216. text-decoration: none;
  217. transition: all 0.2s;
  218. }
  219. .btn-solid-lg:hover {
  220. background-color: transparent;
  221. color: #0976BA; /* needs to stay here because of the color property of a tag */
  222. text-decoration: none;
  223. }
  224. .btn-solid-sm {
  225. display: inline-block;
  226. padding: 1rem 1.5rem 1rem 1.5rem;
  227. border-radius: 30px;
  228. background-color: #ff5574;
  229. color: #ffffff;
  230. font-weight: 600;
  231. font-size: 22px;
  232. line-height: 0;
  233. text-decoration: none;
  234. transition: all 0.2s;
  235. }
  236. .btn-solid-sm:hover {
  237. background-color: transparent;
  238. color: #ff5574; /* needs to stay here because of the color property of a tag */
  239. text-decoration: none;
  240. }
  241. .btn-outline-reg {
  242. display: inline-block;
  243. padding: 1.375rem 2.25rem 1.375rem 2.25rem;
  244. border: 1px solid #5e6576;
  245. border-radius: 30px;
  246. background-color: transparent;
  247. color: #5e6576;
  248. font-weight: 600;
  249. font-size: 0.875rem;
  250. line-height: 0;
  251. text-decoration: none;
  252. transition: all 0.2s;
  253. }
  254. .btn-outline-reg:hover {
  255. background-color: #5e6576;
  256. color: #ffffff;
  257. text-decoration: none;
  258. }
  259. .btn-outline-lg {
  260. display: inline-block;
  261. padding: 1.625rem 2.625rem 1.625rem 2.625rem;
  262. border: 1px solid #5e6576;
  263. border-radius: 30px;
  264. background-color: transparent;
  265. color: #5e6576;
  266. font-weight: 600;
  267. font-size: 0.875rem;
  268. line-height: 0;
  269. text-decoration: none;
  270. transition: all 0.2s;
  271. }
  272. .btn-outline-lg:hover {
  273. background-color: #5e6576;
  274. color: #ffffff;
  275. text-decoration: none;
  276. }
  277. .btn-outline-sm {
  278. display: inline-block;
  279. padding: 1rem 1.5rem 1rem 1.5rem;
  280. border: 1px solid #5e6576;
  281. border-radius: 30px;
  282. background-color: transparent;
  283. color: #5e6576;
  284. font-weight: 600;
  285. font-size: 0.875rem;
  286. line-height: 0;
  287. text-decoration: none;
  288. transition: all 0.2s;
  289. }
  290. .btn-outline-sm:hover {
  291. background-color: #5e6576;
  292. color: #ffffff;
  293. text-decoration: none;
  294. }
  295. select {
  296. -webkit-appearance: none;
  297. -moz-appearance: none;
  298. -ms-appearance: none;
  299. -o-appearance: none;
  300. appearance: none;
  301. background-image: url('../images/down-arrow.png');
  302. background-position: 98% 50%;
  303. background-repeat: no-repeat;
  304. outline: none;
  305. }
  306. /*==================================================
  307. ################### Navigation #####################
  308. ===================================================*/
  309. .navbar {
  310. font-weight: 600;
  311. font-size: 22px;
  312. line-height: 0.875rem;
  313. box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
  314. background-color: #d1d1c7;
  315. background-image: url("../img/billie-holiday.png");
  316. }
  317. .navbar .navbar-brand {
  318. padding-top: 0.25rem;
  319. padding-bottom: 0.25rem;
  320. }
  321. .navbar .logo-text {
  322. color: #222222;
  323. font-weight: 700;
  324. font-size: 1.875rem;
  325. line-height: 1rem;
  326. text-decoration: none;
  327. }
  328. .offcanvas-collapse {
  329. position: fixed;
  330. text-align:center;
  331. top: 135px;
  332. bottom: 0;
  333. left: 100%;
  334. width: 100%;
  335. padding-right: 1rem;
  336. padding-left: 1rem;
  337. overflow-y: auto;
  338. visibility: hidden;
  339. background-color: #fffdf0;
  340. background-image: url("../img/billie-holiday.png");
  341. transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  342. transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  343. transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  344. }
  345. .offcanvas-collapse.open {
  346. visibility: visible;
  347. -webkit-transform: translateX(-100%);
  348. transform: translateX(-100%);
  349. }
  350. .navbar .navbar-nav {
  351. margin-top: 0.75rem;
  352. margin-bottom: 0.5rem;
  353. }
  354. .navbar .nav-item .nav-link {
  355. padding-top: 0.625rem;
  356. padding-bottom: 0.625rem;
  357. color: #0B486E;
  358. text-decoration: none;
  359. transition: all 0.2s ease;
  360. }
  361. .navbar .nav-item.dropdown.show .nav-link,
  362. .navbar .nav-item .nav-link:hover,
  363. .navbar .nav-item .nav-link.active {
  364. color: #6d0000;
  365. }
  366. .navbar .navbar-toggler {
  367. padding: 0;
  368. border: none;
  369. font-size: 1.25rem;
  370. }
  371. .navbar .btn-solid-sm {
  372. border-color: #6d0000;
  373. background-color: #6d0000;
  374. }
  375. .navbar .btn-solid-sm:hover {
  376. background-color: transparent;
  377. color: #6d0000;
  378. }
  379. /*==================================================
  380. ##################### Header #######################
  381. ===================================================*/
  382. .header {
  383. padding-top: 8rem;
  384. padding-bottom: 40px;
  385. text-align: center;
  386. }
  387. .header .h1-large {
  388. margin-bottom: 1.25rem;
  389. }
  390. .header .p-large {
  391. margin-bottom: 2.75rem;
  392. }
  393. .header .btn-solid-lg {
  394. display: block;
  395. margin-bottom: 1.75rem;
  396. }
  397. .header .quote {
  398. display: block;
  399. color: #222222;
  400. }
  401. .header .quote i {
  402. margin-right: 0.5rem;
  403. color: #222222;
  404. }
  405. .header .text-container {
  406. margin-bottom: 5rem;
  407. }
  408. /*==================================================
  409. ################### Practice #######################
  410. ===================================================*/
  411. .cards-1 {
  412. }
  413. .cards-1 .card {
  414. margin-bottom: 5rem;
  415. padding: 3rem 2rem;
  416. border: 1px solid #00000020;
  417. }
  418. .cards-1 .card-icon {
  419. width: 90px;
  420. height: 90px;
  421. text-align: center;
  422. background-size: 90px 90px;
  423. }
  424. .cards-1 .card-icon .fas,
  425. .cards-1 .card-icon .far {
  426. margin-right: 0.75rem;
  427. color: #0B486E;
  428. font-size: 2rem;
  429. line-height: 98px;
  430. }
  431. .cards-1 .card-body {
  432. padding: 0;
  433. }
  434. .cards-1 .card-title {
  435. margin-bottom: 1.125rem;
  436. }
  437. .cards-1 .card-body p {
  438. margin-bottom: 1.125rem;
  439. }
  440. .cards-1 .list-unstyled {
  441. margin-bottom: 0;
  442. }
  443. .cards-1 .list-unstyled .fas {
  444. font-size: 0.875rem;
  445. line-height: 1.625rem;
  446. }
  447. .cards-1 .list-unstyled .flex-grow-1 {
  448. margin-left: 0.5rem;
  449. }
  450. .basic-1 {
  451. }
  452. .basic-1 .image-container {
  453. margin-bottom: 4rem;
  454. }
  455. .basic-1 h2 {
  456. margin-bottom: 1.875rem;
  457. }
  458. .basic-1 h2 span {
  459. font-weight: 400;
  460. }
  461. .basic-1 p:last-of-type {
  462. margin-bottom: 2rem;
  463. }
  464. .basic-1 .btn-solid-reg {
  465. cursor: pointer;
  466. }
  467. /*==================================================
  468. ###################### Modal #######################
  469. ===================================================*/
  470. .modal-dialog {
  471. max-width: 1150px;
  472. margin-right: 1rem;
  473. margin-left: 1rem;
  474. pointer-events: all;
  475. }
  476. .modal-content {
  477. padding: 2.75rem 1.25rem;
  478. }
  479. .modal-content .btn-close {
  480. position: absolute;
  481. right: 10px;
  482. top: 10px;
  483. }
  484. .modal-content .image-container {
  485. margin-bottom: 3rem;
  486. }
  487. .modal-content img {
  488. border-radius: 6px;
  489. }
  490. .modal-content h3 {
  491. margin-bottom: 0.5rem;
  492. }
  493. .modal-content hr {
  494. width: 44px;
  495. margin-top: 0.125rem;
  496. margin-bottom: 1.25rem;
  497. margin-left: 0;
  498. height: 2px;
  499. border: none;
  500. background-color: #53575a;
  501. }
  502. .modal-content h4 {
  503. margin-top: 2rem;
  504. margin-bottom: 0.625rem;
  505. }
  506. .modal-content .list-unstyled {
  507. margin-bottom: 2rem;
  508. }
  509. .modal-content .list-unstyled .fas {
  510. font-size: 0.75rem;
  511. line-height: 1.75rem;
  512. }
  513. .modal-content .list-unstyled .flex-grow-1 {
  514. margin-left: 0.5rem;
  515. }
  516. .modal-content .btn-solid-reg {
  517. margin-right: 0.75rem;
  518. }
  519. .modal-content .btn-outline-reg {
  520. cursor: pointer;
  521. }
  522. /*==================================================
  523. #################### Slider #######################
  524. ===================================================*/
  525. .slider-1 {
  526. /*padding-top: 9.75rem;
  527. padding-bottom: 4.5rem;*/
  528. padding-top: 30px;
  529. padding-bottom: 30px;
  530. }
  531. .slider-1 .slider-container {
  532. position: relative;
  533. }
  534. .slider-1 .swiper-container {
  535. position: static;
  536. width: 86%;
  537. }
  538. .slider-1 .swiper-button-prev:focus,
  539. .slider-1 .swiper-button-next:focus {
  540. /* even if you can't see it chrome you can see it on mobile device */
  541. outline: none;
  542. }
  543. .slider-1 .swiper-button-prev {
  544. left: -12px;
  545. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
  546. background-size: 18px 28px;
  547. }
  548. .slider-1 .swiper-button-next {
  549. right: -12px;
  550. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
  551. background-size: 18px 28px;
  552. }
  553. .slider-1 .card {
  554. border: none;
  555. }
  556. .slider-1 .card-body {
  557. padding: 0;
  558. }
  559. .slider-1 .quotes {
  560. margin-bottom: 3rem;
  561. width: 64px;
  562. }
  563. .slider-1 .testimonial-text {
  564. font-size: 1.1rem;
  565. line-height: 2rem;
  566. }
  567. .slider-1 .testimonial-image {
  568. display: inline-block;
  569. width: 70px;
  570. margin-bottom: 0.875rem;
  571. border-radius: 50%;
  572. }
  573. .slider-1 .testimonial-author {
  574. margin-bottom: 0.125rem;
  575. color: #222222;
  576. font-weight: 700;
  577. font-size: 1.125rem;
  578. }
  579. /*==================================================
  580. #################### Cards #########################
  581. ===================================================*/
  582. .cards-2 {
  583. padding-top: 5rem;
  584. padding-bottom: 2.25em;
  585. }
  586. .cards-2 .h2-heading {
  587. margin-bottom: 3.75rem;
  588. text-align: center;
  589. }
  590. .cards-2 .h2-heading span {
  591. font-weight: 400;
  592. }
  593. .cards-2 .card {
  594. margin-bottom: 5rem;
  595. padding: 4rem 1rem;
  596. border: 1px solid #5e6576;
  597. border-radius: 20px;
  598. background-color: transparent;
  599. text-align: center;
  600. }
  601. .cards-2 .card-body {
  602. padding: 0;
  603. }
  604. .cards-2 .card-title {
  605. margin-bottom: 2rem;
  606. }
  607. .cards-2 .card-title .decoration-lines {
  608. width: 30px;
  609. margin-bottom: 0.25rem;
  610. }
  611. .cards-2 .card-title .decoration-lines.flipped {
  612. transform: scaleX(-1);
  613. }
  614. .cards-2 .card-title span {
  615. margin-right: 0.75rem;
  616. margin-left: 0.75rem;
  617. color: #222222;
  618. font-weight: 700;
  619. font-size: 1.5rem;
  620. line-height: 2rem;
  621. letter-spacing: -0.2px;
  622. }
  623. .cards-2 .card-body .list-unstyled {
  624. margin-bottom: 3rem;
  625. }
  626. .cards-2 .card-body .list-unstyled li {
  627. margin-bottom: 0.625rem;
  628. }
  629. .cards-2 .card-body .price {
  630. margin-bottom: 3rem;
  631. color: #222222;
  632. font-weight: 700;
  633. font-size: 3rem;
  634. line-height: 2rem;
  635. letter-spacing: -0.2px;
  636. }
  637. /*==================================================
  638. #################### Footer ########################
  639. ===================================================*/
  640. .footer {
  641. position: relative;
  642. padding-top: 5rem;
  643. padding-bottom: 0;
  644. text-align: center;
  645. border-bottom: 3px solid #6D0000;
  646. }
  647. .footer .courthouse {
  648. }
  649. .footer div[class*="col"] {
  650. /* selects all elements which have classes starting with col */
  651. /* needed so that the absolute positioned decoration stays behind */
  652. position: relative;
  653. }
  654. .footer h4 {
  655. margin-bottom: 2rem;
  656. }
  657. .footer .fa-stack {
  658. width: 2em;
  659. margin-bottom: 1.25rem;
  660. margin-right: 0.375rem;
  661. font-size: 1.5rem;
  662. }
  663. .footer .fa-stack .fa-stack-1x {
  664. color: #ffffff;
  665. transition: all 0.2s ease;
  666. }
  667. .footer .fa-stack .fa-stack-2x {
  668. color: #ffffff;
  669. transition: all 0.2s ease;
  670. }
  671. .footer .fa-stack:hover .fa-stack-1x {
  672. color: #6D0000;
  673. }
  674. .footer .fa-stack:hover .fa-stack-2x {
  675. color: #222222;
  676. }
  677. .copyright {
  678. background-color:#021C2B;
  679. padding: 2rem 0 16rem;
  680. border-top: 7px solid #6E0000;
  681. text-align: center;
  682. color: #D1D1C7;
  683. }
  684. .copyright a {
  685. text-decoration: none;
  686. color:#D1D1C7
  687. }
  688. .copyright .list-unstyled,
  689. .copyright .statement {
  690. opacity: 0.7;
  691. }
  692. .copyright .list-unstyled li {
  693. margin-bottom: 0.75rem;
  694. }
  695. /*==================================================
  696. #################### TOP #######################
  697. ===================================================*/
  698. #myBtn {
  699. position: fixed;
  700. z-index: 99;
  701. bottom: 20px;
  702. right: 20px;
  703. display: none;
  704. width: 52px;
  705. height: 52px;
  706. border: none;
  707. border-radius: 50%;
  708. outline: none;
  709. background-color: #44434a;
  710. cursor: pointer;
  711. }
  712. #myBtn:hover {
  713. background-color: #1d1d21;
  714. }
  715. #myBtn img {
  716. margin-bottom: 0.25rem;
  717. width: 18px;
  718. }
  719. /*==================================================
  720. #################### Queries #######################
  721. ===================================================*/
  722. .ex-header {
  723. padding-top: 12rem;
  724. padding-bottom: 5rem;
  725. }
  726. .ex-basic-1 .list-unstyled .fas {
  727. font-size: 0.375rem;
  728. line-height: 1.625rem;
  729. }
  730. .ex-basic-1 .list-unstyled .flex-grow-1 {
  731. margin-left: 0.5rem;
  732. }
  733. .ex-basic-1 .text-box {
  734. padding: 1.25rem 1.25rem 0.5rem 1.25rem;
  735. background-color: #f9f9f9;
  736. }
  737. .ex-cards-1 .card {
  738. border: none;
  739. background-color: transparent;
  740. }
  741. .ex-cards-1 .card .fa-stack {
  742. width: 2em;
  743. font-size: 1.125rem;
  744. }
  745. .ex-cards-1 .card .fa-stack-2x {
  746. color: #6168ff;
  747. }
  748. .ex-cards-1 .card .fa-stack-1x {
  749. width: 2em;
  750. color: #ffffff;
  751. font-weight: 700;
  752. line-height: 2.125rem;
  753. }
  754. .ex-cards-1 .card .list-unstyled .flex-grow-1 {
  755. margin-left: 2.25rem;
  756. }
  757. .ex-cards-1 .card .list-unstyled .flex-grow-1 h5 {
  758. margin-top: 0.125rem;
  759. margin-bottom: 0.5rem;
  760. }
  761. /*==================================================
  762. #################### Queries #######################
  763. ===================================================*/
  764. @media (max-width: 575.98px) {
  765. .navbar-brand {
  766. margin: 0 auto;
  767. }
  768. .navbar .logo-image img {
  769. width:200px;
  770. margin-left:30px;
  771. }
  772. }
  773. @media (min-width: 576px) {
  774. .navbar-brand {
  775. margin: 0 auto;
  776. }
  777. }
  778. @media (min-width: 768px) {
  779. .header {
  780. padding-top: 9rem;
  781. }
  782. .counter .counter-container {
  783. text-align: left;
  784. }
  785. .counter .counter-cell {
  786. display: inline-block;
  787. margin-right: 3rem;
  788. vertical-align: top;
  789. }
  790. .form-1 .list-unstyled li {
  791. display: inline-block;
  792. margin-right: 1rem;
  793. }
  794. .ex-basic-1 .text-box {
  795. padding: 1.75rem 2rem 0.875rem 2rem;
  796. }
  797. }
  798. @media (min-width: 992px) {
  799. .h2-heading {
  800. width: 35.25rem;
  801. margin-right: auto;
  802. margin-left: auto;
  803. }
  804. .p-heading {
  805. width: 46rem;
  806. margin-right: auto;
  807. margin-left: auto;
  808. }
  809. .navbar {
  810. padding-top: 1.75rem;
  811. box-shadow: none;
  812. transition: all 0.2s;
  813. background-color: #fffdf0;
  814. background-image: url("../img/billie-holiday.png");
  815. }
  816. .navbar.extra-page {
  817. padding-top: 0.5rem;
  818. }
  819. .navbar.top-nav-collapse {
  820. padding-top: 0.5rem;
  821. padding-bottom: 0.5rem;
  822. background-color: #fffdf0;
  823. background-image: url("../img/billie-holiday.png");
  824. box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
  825. }
  826. .offcanvas-collapse {
  827. position: static;
  828. top: auto;
  829. bottom: auto;
  830. left: auto;
  831. width: auto;
  832. padding-right: 0;
  833. padding-left: 0;
  834. overflow-y: visible;
  835. visibility: visible;
  836. }
  837. .offcanvas-collapse.open {
  838. -webkit-transform: none;
  839. transform: none;
  840. }
  841. .navbar .navbar-nav {
  842. margin-top: 0;
  843. margin-bottom: 0;
  844. }
  845. .navbar .nav-item .nav-link {
  846. padding-right: 0.75rem;
  847. padding-left: 0.75rem;
  848. }
  849. .navbar .dropdown-menu {
  850. padding-top: 0.75rem;
  851. padding-bottom: 0.75rem;
  852. box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.08);
  853. }
  854. .navbar .dropdown-divider {
  855. width: 90%;
  856. }
  857. .navbar .nav-item .btn-solid-sm {
  858. margin-top: 0;
  859. margin-left: 1rem;
  860. }
  861. .header {
  862. padding-top: 13rem;
  863. text-align: left;
  864. }
  865. .header .text-container {
  866. margin-bottom: 0;
  867. }
  868. .header .btn-solid-lg {
  869. margin-right: 1.5rem;
  870. margin-bottom: 0;
  871. }
  872. .header .btn-solid-lg,
  873. .header .quote {
  874. display: inline-block;
  875. }
  876. .cards-1 .card {
  877. display: inline-block;
  878. width: 298px;
  879. vertical-align: top;
  880. }
  881. .cards-1 .card:nth-of-type(3n+2) {
  882. margin-right: 1rem;
  883. margin-left: 1rem;
  884. }
  885. .basic-1 .image-container {
  886. margin-bottom: 0;
  887. }
  888. .basic-1 .text-container {
  889. margin-top: 1.25rem;
  890. }
  891. .basic-1 h2 {
  892. width: 23rem;
  893. }
  894. /* Details Modal */
  895. /* Stops body and navbar shift on modal open */
  896. body.modal-open {
  897. overflow-y: scroll !important;
  898. padding-right: 0 !important;
  899. }
  900. body.modal-open .navbar {
  901. padding-right: 0 !important;
  902. }
  903. .modal {
  904. padding-right: 0 !important;
  905. }
  906. .modal-dialog {
  907. margin-top: 120px;
  908. margin-right: auto;
  909. margin-left: auto;
  910. }
  911. .modal-content .image-container {
  912. margin-bottom: 0;
  913. }
  914. .counter .text-container {
  915. margin-bottom: 0;
  916. }
  917. .counter .counter-cell {
  918. display: inline-block;
  919. vertical-align: top;
  920. }
  921. .filter .button {
  922. margin-right: 0.25rem;
  923. margin-left: 0.25rem;
  924. }
  925. .filter .grid {
  926. max-width: 750px;
  927. }
  928. .filter .element-item {
  929. display: inline-block;
  930. width: 351px;
  931. margin-right: 0.625rem;
  932. margin-left: 0.625rem;
  933. vertical-align: top;
  934. }
  935. .slider-1 .swiper-container {
  936. width: 92%;
  937. }
  938. .slider-1 .swiper-button-prev {
  939. left: -16px;
  940. width: 22px;
  941. background-size: 22px 34px;
  942. }
  943. .slider-1 .swiper-button-next {
  944. right: -16px;
  945. width: 22px;
  946. background-size: 22px 34px;
  947. }
  948. .slider-1 .details {
  949. display: flex;
  950. align-items: flex-start;
  951. }
  952. .slider-1 .text {
  953. flex-direction: column;
  954. }
  955. .slider-1 .testimonial-author {
  956. margin-top: 0.625rem;
  957. }
  958. .slider-1 .testimonial-image {
  959. margin-right: 1.125rem;
  960. }
  961. .cards-2 .card {
  962. display: inline-block;
  963. width: 298px;
  964. vertical-align: top;
  965. }
  966. .cards-2 .card:nth-of-type(3n+2) {
  967. margin-right: 1rem;
  968. margin-left: 1rem;
  969. }
  970. .basic-2 .text-container {
  971. padding: 8rem;
  972. }
  973. .footer h4 {
  974. width: 46rem;
  975. margin-right: auto;
  976. margin-left: auto;
  977. }
  978. .copyright {
  979. text-align: left;
  980. }
  981. .copyright .list-unstyled li {
  982. display: inline-block;
  983. margin-right: 1rem;
  984. }
  985. .copyright .statement {
  986. text-align: right;
  987. }
  988. .ex-cards-1 .card {
  989. display: inline-block;
  990. width: 296px;
  991. vertical-align: top;
  992. }
  993. .ex-cards-1 .card:nth-of-type(3n+2) {
  994. margin-right: 1rem;
  995. margin-left: 1rem;
  996. }
  997. }
  998. @media (min-width: 1200px) {
  999. .container {
  1000. max-width: 1140px;
  1001. }
  1002. .header {
  1003. overflow: hidden;
  1004. }
  1005. .header .image-container {
  1006. position: relative;
  1007. }
  1008. .header .image-container img {
  1009. position: absolute;
  1010. top: 0px;
  1011. left: 0px;
  1012. width: 100%;
  1013. max-width: none;
  1014. }
  1015. .cards-1 .card {
  1016. width: 342px;
  1017. }
  1018. .cards-1 .card:nth-of-type(3n+2) {
  1019. margin-right: 2.5rem;
  1020. margin-left: 2.5rem;
  1021. }
  1022. .basic-1 .image-container {
  1023. margin-right: 3.5rem;
  1024. }
  1025. .basic-1 .text-container {
  1026. margin-top: 5rem;
  1027. margin-left: 2.75rem;
  1028. }
  1029. .modal-content {
  1030. padding-right: 2rem;
  1031. padding-left: 2rem;
  1032. }
  1033. .counter {
  1034. overflow: hidden;
  1035. padding-top: 9rem;
  1036. }
  1037. .counter .image-container {
  1038. position: relative;
  1039. }
  1040. .counter .image-container img {
  1041. position: absolute;
  1042. top: -60px;
  1043. left: 30px;
  1044. width: 900px;
  1045. max-width: none;
  1046. }
  1047. .filter .grid {
  1048. max-width: 1120px;
  1049. }
  1050. .slider-1 .swiper-button-prev {
  1051. left: -24px;
  1052. }
  1053. .slider-1 .swiper-button-next {
  1054. right: -24px;
  1055. }
  1056. .cards-2 .card {
  1057. width: 342px;
  1058. }
  1059. .cards-2 .card:nth-of-type(3n+2) {
  1060. margin-right: 2.5rem;
  1061. margin-left: 2.5rem;
  1062. }
  1063. .basic-2 .text-container {
  1064. padding: 8rem 12rem;
  1065. }
  1066. .form-1 form {
  1067. width: 860px;
  1068. margin-right: auto;
  1069. margin-left: auto;
  1070. }
  1071. .footer .decoration-circles {
  1072. left: 0;
  1073. }
  1074. .ex-cards-1 .card {
  1075. width: 336px;
  1076. }
  1077. .ex-cards-1 .card:nth-of-type(3n+2) {
  1078. margin-right: 2.875rem;
  1079. margin-left: 2.875rem;
  1080. }
  1081. }