style.css 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663
  1. /* ########################################
  2. ########### davidwindham.com ##############
  3. ###########################################
  4. . . . . . .
  5. . . ...-..-| |-. .-. .-.-..-| .-.. ...-|
  6. ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'-
  7. 1 - Body
  8. 2 - Typography
  9. 3 - Header
  10. 4 - Navigation
  11. 5 - Layout
  12. 6 - Parts
  13. 7 - Footer
  14. 9 - Queries
  15. 10 - Fonts
  16. url - https://davidwindham.com
  17. git - https://github.com/windhamdavid/dw
  18. post - https://davidawindham.com/my-website
  19. /*########################################
  20. ################# BODY ###################
  21. #########################################*/
  22. body {
  23. margin: 0;
  24. padding: 0;
  25. min-height: 100%;
  26. -webkit-font-smoothing: antialiased;
  27. font-kerning: auto;
  28. color: #535763;
  29. background:#d3d3d3;
  30. transition: background-color 0.4s ease;
  31. font-family: sans-serif;
  32. text-rendering: optimizeLegibility;
  33. }
  34. #backgroundsvg {
  35. background-image: url('/img/background.svg');
  36. background-repeat: no-repeat;
  37. background-position: 0% 0%;
  38. background-size: cover;
  39. position: fixed;
  40. top: 0;
  41. width: 100vw;
  42. height: 100vw;
  43. z-index: -1;
  44. opacity: .75;
  45. }
  46. #backgroundsvg2 {
  47. background-image: url('/img/background2.svg');
  48. background-repeat: no-repeat;
  49. background-position: 0% 0%;
  50. background-size: cover;
  51. position: fixed;
  52. top: 0;
  53. width: 100vw;
  54. height: 100vw;
  55. z-index: -2;
  56. opacity: .75;
  57. }
  58. #backgroundsvg3 {
  59. background-image: url('/img/background3.svg');
  60. background-repeat: no-repeat;
  61. background-position: 0% 0%;
  62. background-size: cover;
  63. position: fixed;
  64. top: 0;
  65. width: 100vw;
  66. height: 100vw;
  67. z-index: -3;
  68. opacity: .75;
  69. }
  70. /*########################################
  71. ############## Waypoints #################
  72. #########################################*/
  73. .viewport {
  74. position: fixed;
  75. height: 100%;
  76. width: 100%;
  77. top: 0;
  78. left: 0;
  79. right: 0;
  80. bottom: 0;
  81. overflow: hidden;
  82. }
  83. .viewport-above {
  84. opacity: 0;
  85. }
  86. .viewport-inside {
  87. opacity: 1;
  88. }
  89. .viewport-below {
  90. opacity: 0;
  91. }
  92. .viewport-below>* {
  93. transform: translateY(100px);
  94. }
  95. .page-view {
  96. padding: 7rem 0;
  97. transition: opacity 0.5s ease;
  98. opacity: 0;
  99. position: relative;
  100. background: transparent !important;
  101. scroll-snap-align: start;
  102. min-height: 100vh;
  103. }
  104. .page-view>* {
  105. transition: all 0.5s ease;
  106. }
  107. .page-view:after {
  108. content: '';
  109. }
  110. .no-js .page-view {
  111. opacity: 1;
  112. }
  113. .background-color {
  114. position: relative;
  115. }
  116. .background-color.light {
  117. background-color: #d3d3d3;
  118. }
  119. .background-color.dark {
  120. background-color: #484C57;
  121. z-index: 0;
  122. }
  123. /* purgecss start ignore */
  124. [bg=dark-bg] {
  125. color: #9c9ea5;
  126. }
  127. [bg=dark-bg] h1,
  128. [bg=dark-bg] h2,
  129. [bg=dark-bg] h4,
  130. [bg=dark-bg] h5,
  131. [bg=dark-bg] h6,
  132. [bg=dark-bg] a {
  133. color: #e3e3e3 !important;
  134. }
  135. [bg=dark-bg] blockquote {
  136. color: #e3e3e3;
  137. }
  138. /* purgecss end ignore */
  139. /*########################################
  140. ################# TYPE ###################
  141. #########################################*/
  142. h1 {
  143. font-family: 'Playfair Display', serif;
  144. font-weight: 900;
  145. font-size: 2.5em;
  146. letter-spacing: .01em;
  147. }
  148. .header h1 {
  149. color: #e3e3e3;
  150. }
  151. h2 {
  152. font-family: 'Playfair Display', serif;
  153. font-weight: 900;
  154. font-size: 2.3em;
  155. letter-spacing: .01em;
  156. }
  157. h3 {
  158. font-family: 'Playfair Display', serif;
  159. font-weight: 700;
  160. font-size: 1.6em;
  161. }
  162. p {
  163. font-family: 'Montserrat', sans-serif;
  164. font-size: 1.123em;
  165. line-height: 1.2;
  166. }
  167. a {
  168. color: #67000a;
  169. text-decoration: none !important;
  170. }
  171. .right {
  172. text-align: right;
  173. }
  174. .lead {
  175. font-size: 1.4em;
  176. }
  177. h2.intro {
  178. font-family: 'Playfair Display', serif;
  179. font-weight: 900;
  180. font-size: 37px;
  181. letter-spacing: .01em;
  182. }
  183. h1.when {
  184. font-weight: 800;
  185. margin: 0;
  186. }
  187. h2.when {
  188. font-weight: 800;
  189. margin: 0;
  190. font-size: 28px;
  191. }
  192. h3.when {
  193. margin: 0;
  194. font-size: 28px;
  195. }
  196. h4.when {
  197. font-weight: 700;
  198. font-size: 17px;
  199. }
  200. h4.how {
  201. color: #535763 !important;
  202. }
  203. h5.how {
  204. color: #535763 !important;
  205. }
  206. h5.modal-title {
  207. color: #535763 !important;
  208. }
  209. h6.modal {
  210. color: #535763 !important;
  211. }
  212. .numbering {
  213. display: inline-block;
  214. margin-right: .5rem;
  215. font-size: 12px;
  216. vertical-align: super;
  217. }
  218. .services .service .numbering,
  219. .approach .service .numbering {
  220. height: 2rem;
  221. width: 2rem;
  222. line-height: 2rem;
  223. color: #777;
  224. border-radius: 3px;
  225. text-align: center;
  226. position: absolute;
  227. left: 0;
  228. top: 0;
  229. background: #999;
  230. background: #9993;
  231. font-size: 70%;
  232. }
  233. /*########################################
  234. ################# HEAD ###################
  235. #########################################*/
  236. #header {
  237. position: fixed;
  238. z-index: 98;
  239. margin: 0;
  240. padding: 0;
  241. left: 0;
  242. top: 0;
  243. right: 0;
  244. pointer-events: none;
  245. }
  246. #header .header-ui {
  247. margin: 0;
  248. padding: 0;
  249. display: -ms-flexbox;
  250. display: flex;
  251. -ms-flex-wrap: wrap;
  252. flex-wrap: wrap;
  253. -ms-align-items: center;
  254. align-items: center;
  255. justify-content: space-between;
  256. }
  257. #header .header-ui .brand--nav {
  258. margin: 0 auto 0 0;
  259. padding: 1rem;
  260. flex: 0 0 100%;
  261. width: 100%;
  262. max-width: 100%;
  263. display: -ms-flexbox;
  264. display: flex;
  265. -ms-flex-wrap: wrap;
  266. flex-wrap: wrap;
  267. -ms-align-items: center;
  268. align-items: center;
  269. justify-content: space-between;
  270. pointer-events: auto;
  271. will-change: width, padding, flex;
  272. }
  273. #header .header-ui .brand--nav h1 {
  274. font-size: 21px;
  275. margin-left: 30px;
  276. text-align: right;
  277. }
  278. @media (min-width: 576px) {
  279. #header .header-ui .brand--nav {
  280. flex: 0 0 50%;
  281. width: 50%;
  282. max-width: 50%;
  283. }
  284. #header .header-ui .brand--nav .brand {
  285. margin-right: 20px;
  286. }
  287. }
  288. @media (min-width: 768px) {
  289. #header {
  290. -webkit-transition: opacity .35s ease-in-out 0s;
  291. transition: opacity .35s ease-in-out 0s;
  292. }
  293. #header .header-ui .brand--nav,
  294. #header .header-ui .header--complementary {
  295. padding: 2rem;
  296. -webkit-transition: width .35s ease-in-out 0s, padding .35s ease-in-out 0s, flex .35s ease-in-out 0s, background .35s ease-in-out 0s;
  297. transition: width .35s ease-in-out 0s, padding .35s ease-in-out 0s, flex .35s ease-in-out 0s, background .35s ease-in-out 0s;
  298. }
  299. #header.shrink .header-ui .brand--nav,
  300. #header.shrink .header-ui .header--complementary {
  301. padding: 1rem;
  302. flex: 0 0 auto;
  303. }
  304. #header.on_menu .brand--nav {
  305. padding-right: 0;
  306. }
  307. #header.on_menu .brand--nav .hamburger {
  308. -webkit-transform: translateX(27px);
  309. transform: translateX(27px);
  310. }
  311. }
  312. @media (min-width: 992px) {
  313. #header .header-ui .brand--nav,
  314. #header.shrink .header-ui .brand--nav,
  315. #header.shrink .header-ui .header--complementary {
  316. padding: 1rem;
  317. flex: 0 0 auto;
  318. }
  319. #header.on_menu .brand--nav {
  320. padding-right: 0;
  321. }
  322. #header.on_menu .brand--nav .hamburger {
  323. -webkit-transform: translateX(27px);
  324. transform: translateX(27px);
  325. }
  326. }
  327. @media (min-width: 992px) {
  328. .dw-header h2,
  329. .works-header h2 {
  330. font-size: 2.4rem;
  331. }
  332. }
  333. .dw-header {
  334. min-height: 400px;
  335. }
  336. .dw-header h2 {
  337. max-width: 900px;
  338. }
  339. .dw-header .main {
  340. position: relative;
  341. z-index: 2;
  342. }
  343. #header {
  344. position: absolute;
  345. }
  346. #header .header-ui .brand--nav,
  347. #header .header-ui .header--complementary {
  348. padding: 1rem;
  349. }
  350. #header .header-ui .button.button-to-quote,
  351. #header .header-ui a {
  352. margin-left: 40px;
  353. }
  354. #header .header-ui a,
  355. #header .header-ui .button {
  356. position: relative;
  357. color: hsla(0, 0%, 100%, 0.5);
  358. border-color: hsla(0, 0%, 100%, 0.5);
  359. font-family: 'Inter', sans-serif;
  360. }
  361. #header .header-ui .brand img {
  362. width: 200px;
  363. }
  364. /* purgecss start ignore */
  365. .header-small {
  366. width: 100%;
  367. position: fixed;
  368. display: flex;
  369. padding: 0.5rem 1rem 1rem 1rem;
  370. z-index: 999;
  371. opacity: 0;
  372. top: -200px;
  373. left: 0;
  374. transition: opacity 0.4s ease, background-color 0.4s ease;
  375. }
  376. .header-small .header-small-menu {
  377. background-color: #484C57;
  378. position: absolute;
  379. box-shadow: 0 27px 53px 0 rgba(57, 57, 58, 0.24);
  380. z-index: 1;
  381. opacity: 0;
  382. visibility: hidden;
  383. padding: 20px 20px 40px 20px;
  384. top: 0;
  385. right: 0;
  386. }
  387. .header-small .header-small-menu h6 {
  388. font-weight: bold;
  389. color: #e3e3e3;
  390. margin: 40px 0 0 0;
  391. }
  392. .header-small .header-small-menu a,
  393. .header-small .header-small-menu h6 {
  394. padding: 6px 29px 8px 12px;
  395. }
  396. .header-small .header-small-menu a {
  397. font-size: 26px;
  398. line-height: 44px;
  399. letter-spacing: -0.43px;
  400. display: block;
  401. color: #e3e3e3;
  402. }
  403. .header-small .header-small-menu a:hover {
  404. opacity: 0.5;
  405. }
  406. .header-small .header-small-menu a.email {
  407. font-size: 1rem;
  408. line-height: 1.2;
  409. }
  410. .header-small.menu-open .header-small-menu {
  411. display: block;
  412. opacity: 1;
  413. visibility: visible;
  414. }
  415. .header-small.showing {
  416. opacity: 1;
  417. top: 0;
  418. }
  419. .header-small a {
  420. color: currentColor;
  421. }
  422. .header-small img {
  423. margin-left: 0px;
  424. width: 31px;
  425. transition: background-color 0.4s ease;
  426. }
  427. .header-small .light {
  428. display: none;
  429. }
  430. .header-small .dark {
  431. display: inline-block;
  432. }
  433. [bg=dark-bg] .header-small .light {
  434. display: inline-block;
  435. }
  436. [bg=dark-bg] .header-small .dark {
  437. display: none;
  438. }
  439. [bg=dark-bg] .hamburger-inner,
  440. [bg=dark-bg] .hamburger-inner:before,
  441. [bg=dark-bg] .hamburger-inner:after {
  442. background-color: #e3e3e3 !important;
  443. }
  444. /*########################################
  445. ################# NAVI ###################
  446. #########################################*/
  447. .hamburger {
  448. font: inherit;
  449. display: inline-block;
  450. overflow: visible;
  451. margin: 0;
  452. padding: 0;
  453. cursor: pointer;
  454. transition-timing-function: linear;
  455. transition-duration: 0.15s;
  456. transition-property: opacity, filter;
  457. text-transform: none;
  458. color: inherit;
  459. border: 0;
  460. background-color: transparent;
  461. align-self: flex-end;
  462. margin-left: auto;
  463. z-index: 6;
  464. }
  465. .hamburger:focus,
  466. .hamburger:active {
  467. outline-width: 0;
  468. }
  469. .hamburger.is-active {
  470. outline-width: 0;
  471. }
  472. .hamburger-box {
  473. width: 24px;
  474. height: 15px;
  475. display: inline-block;
  476. position: relative;
  477. }
  478. .hamburger-inner {
  479. display: block;
  480. top: 50%;
  481. margin-top: -0.5px;
  482. }
  483. .hamburger-inner,
  484. .hamburger-inner::before,
  485. .hamburger-inner::after {
  486. width: 24px;
  487. height: 2px;
  488. border-radius: 2px;
  489. position: absolute;
  490. transition-property: transform;
  491. transition-duration: 0.15s;
  492. transition-timing-function: ease;
  493. background-color: #535763;
  494. }
  495. .hamburger-inner::before,
  496. .hamburger-inner::after {
  497. content: "";
  498. display: block;
  499. }
  500. .hamburger-inner::before {
  501. top: -7px;
  502. }
  503. .hamburger-inner::after {
  504. bottom: -7px;
  505. width: 19px;
  506. }
  507. .hamburger-inner:before {
  508. top: 5px;
  509. }
  510. .hamburger-inner:after {
  511. top: 10px;
  512. }
  513. .hamburger:hover {
  514. opacity: 0.7;
  515. }
  516. .hamburger:focus,
  517. .hamburger:active {
  518. outline-width: 0;
  519. }
  520. .hamburger.is-active {
  521. outline-width: 0;
  522. }
  523. .hamburger.is-active:hover {
  524. opacity: 0.7;
  525. }
  526. .hamburger.is-active .hamburger-inner,
  527. .hamburger.is-active .hamburger-inner::before,
  528. .hamburger.is-active .hamburger-inner::after {
  529. background-color: #535763;
  530. }
  531. .hamburger-inner,
  532. .hamburger-inner::before,
  533. .hamburger-inner::after {
  534. background-color: #535763;
  535. }
  536. .hamburger.is-active .hamburger-inner {
  537. transform: translate3d(0, 10px, 0) rotate(45deg);
  538. background-color: #e3e3e3;
  539. }
  540. .hamburger.is-active .hamburger-inner:before {
  541. transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  542. opacity: 0;
  543. }
  544. .hamburger.is-active .hamburger-inner:after {
  545. transform: translate3d(0, -10px, 0) rotate(-90deg);
  546. background-color: #e3e3e3;
  547. }
  548. .hamburger-box {
  549. position: relative;
  550. display: inline-block;
  551. width: 20px;
  552. height: 20px;
  553. }
  554. .hamburger-inner {
  555. top: 50%;
  556. display: block;
  557. margin-top: -2px;
  558. }
  559. /* purgecss end ignore */
  560. /*########################################
  561. ################# LAYO ###################
  562. #########################################*/
  563. /***************************************************
  564. .hello {
  565. background-image: url('/img/hello.svg') !important;
  566. background-size:cover !important;
  567. background-position: 50% 50% !important;
  568. }
  569. .who {
  570. background-image: url('/img/who.svg') !important;
  571. background-size:cover !important;
  572. background-position: 50% 50% !important;
  573. }
  574. #dw-footer {
  575. background-image: url('/img/footer.svg');
  576. background-size:100% 100%;
  577. background-size:cover;
  578. background-repeat: no-repeat;
  579. background-position: top left, 50%, 50%;
  580. z-index:11;
  581. }
  582. ***************************************************/
  583. .lead {
  584. font-weight: 400;
  585. line-height: 1.5;
  586. }
  587. .hello,
  588. .page-header,
  589. .portfolio-header {
  590. position: relative;
  591. }
  592. .hello .container,
  593. .page-header .container,
  594. .portfolio-header .container {
  595. position: relative;
  596. }
  597. .hello {
  598. height: 100vh;
  599. min-height: 620px;
  600. }
  601. .capabilities ul {
  602. list-style: none;
  603. padding-left: 1rem;
  604. }
  605. .services,
  606. .approach {
  607. padding-bottom: 10rem;
  608. }
  609. .services .row,
  610. .approach .row {
  611. display: flex;
  612. }
  613. .services .numbering,
  614. .approach .numbering {
  615. color: #9c9ea5;
  616. }
  617. .services .service,
  618. .approach .service {
  619. padding-left: 4rem;
  620. padding-bottom: 1rem;
  621. border-radius: 4px;
  622. position: relative;
  623. transition: all 0.2s ease;
  624. cursor: pointer;
  625. }
  626. .services .service:hover,
  627. .approach .service:hover {
  628. transform: scale(1.1) translateX(1.6rem);
  629. }
  630. .services .service:hover .numbering,
  631. .approach .service:hover .numbering {
  632. background: #eee;
  633. color: #535763;
  634. }
  635. .services .service p,
  636. .approach .service p {
  637. color: #8a8a8a;
  638. }
  639. .services .service .numbering,
  640. .approach .service .numbering {
  641. height: 2rem;
  642. width: 2rem;
  643. line-height: 2rem;
  644. border-radius: 3px;
  645. text-align: center;
  646. position: absolute;
  647. left: 0;
  648. top: 0;
  649. background: #eee;
  650. background: rgba(255, 255, 255, 0.2);
  651. font-size: 70%;
  652. }
  653. .services .service p,
  654. .approach .service p {
  655. margin-top: 0 !important;
  656. margin-bottom: 2rem;
  657. }
  658. .services .service h4,
  659. .approach .service h4 {
  660. margin: 0;
  661. font-weight: 400;
  662. }
  663. .services .service i,
  664. .approach .service i {
  665. display: block;
  666. position: relative;
  667. margin: 20px 0;
  668. width: 22px;
  669. height: 22px;
  670. border-radius: 50%;
  671. border: 2px solid white;
  672. transition: all 0.2s ease;
  673. display: none;
  674. }
  675. .services .service:nth-child(1) i,
  676. .approach .service:nth-child(1) i {
  677. border-color: #50E3C2;
  678. color: #50E3C2;
  679. }
  680. .services .service:nth-child(2) i,
  681. .approach .service:nth-child(2) i {
  682. border-color: #8755FF;
  683. color: #8755FF;
  684. }
  685. .services .service:nth-child(3) i,
  686. .approach .service:nth-child(3) i {
  687. border-color: #01D5FF;
  688. color: #01D5FF;
  689. }
  690. .services .service:nth-child(4) i,
  691. .approach .service:nth-child(4) i {
  692. border-color: #BD10E0;
  693. color: #BD10E0;
  694. }
  695. .numbering {
  696. margin-bottom: 1rem;
  697. margin-right: 1rem;
  698. font-size: 1rem;
  699. }
  700. .numbering {
  701. display: inline-block;
  702. margin-right: .5rem;
  703. font-size: 12px;
  704. vertical-align: super;
  705. }
  706. ul.pricing {
  707. margin-left: 0px;
  708. padding: 0 0 0 25px;
  709. }
  710. .vendor-image {
  711. filter: grayscale(1);
  712. width: 100%;
  713. height:100px;
  714. }
  715. .vendor-image:hover {
  716. filter: grayscale(0);
  717. transition: 0.5s ease-in-out;
  718. }
  719. blockquote {
  720. padding: 0;
  721. position: relative;
  722. }
  723. .br-testimonial figcaption {
  724. padding-left: 70px;
  725. font-size: 13px;
  726. letter-spacing: .025em;
  727. }
  728. .br-testimonial figcaption cite {
  729. display: block;
  730. font-style: normal;
  731. font-weight: bold;
  732. }
  733. .br-testimonial blockquote {
  734. margin: 0 0 20px 0;
  735. }
  736. .br-testimonial figcaption {
  737. padding: 0;
  738. font-size: 1rem;
  739. }
  740. .has-highlight {
  741. position: relative;
  742. }
  743. .has-highlight:after {
  744. content: '';
  745. position: absolute;
  746. bottom: 0px;
  747. height: 20px;
  748. width: 102%;
  749. background: #d6f0ff;
  750. left: -3px;
  751. z-index: -1;
  752. }
  753. .testimonials-section {
  754. color: #9c9ea5;
  755. }
  756. .testimonials-section h1,
  757. .testimonials-section h2,
  758. .testimonials-section h4,
  759. .testimonials-section h5,
  760. .testimonials-section h6,
  761. .testimonials-section a {
  762. color: #e3e3e3 !important;
  763. }
  764. .testimonials-section blockquote {
  765. color: #e3e3e3;
  766. font-size: 1.5em;
  767. }
  768. .testimonials-section .br-testimonial {
  769. opacity: 0;
  770. visibility: hidden;
  771. position: relative;
  772. transition: opacity 0.4s ease;
  773. position: fixed;
  774. left: -5000px;
  775. }
  776. .testimonials-section .br-testimonial.showing {
  777. opacity: 1;
  778. visibility: visible;
  779. top: 0;
  780. position: relative;
  781. left: 0;
  782. }
  783. .testimonials-section .next-wrapper {
  784. text-align: right;
  785. padding-top: 2rem;
  786. padding-right: 2rem;
  787. }
  788. .testimonials-section .next-testimonial {
  789. display: inline-block;
  790. cursor: pointer;
  791. }
  792. .testimonials-section .next-testimonial:hover svg {
  793. opacity: 1;
  794. }
  795. .testimonials-section .next-testimonial:hover span {
  796. opacity: 1;
  797. }
  798. .testimonials-section .next-testimonial svg {
  799. max-width: 40px;
  800. max-height: 40px;
  801. opacity: 0.5;
  802. transition: opacity 0.2s ease;
  803. }
  804. .testimonials-section .next-testimonial span {
  805. display: block;
  806. font-size: 56%;
  807. padding-top: 17px;
  808. width: 53px;
  809. text-align: center;
  810. opacity: 0;
  811. transition: opacity 0.2s ease;
  812. }
  813. .testimonials-section .next-testimonial path {
  814. fill: #e3e3e3;
  815. }
  816. .testimonials-section .indicators {
  817. text-align: right;
  818. }
  819. .testimonials-section .indicators span {
  820. height: 14px;
  821. width: 14px;
  822. border-radius: 50%;
  823. background: rgba(255, 255, 255, 0.2);
  824. margin: 5px;
  825. display: inline-block;
  826. cursor: pointer;
  827. }
  828. .testimonials-section .indicators span:hover,
  829. .testimonials-section .indicators span.current {
  830. background: rgba(255, 255, 255, 0.7);
  831. }
  832. @media (max-width: 768px) {
  833. .testimonials-section .next-testimonial {
  834. display: none;
  835. }
  836. .testimonials-section .indicators {
  837. text-align: center;
  838. }
  839. }
  840. /*########################################
  841. ############## Calendar ##################
  842. #########################################*/
  843. #calendar a {
  844. color: #535763;
  845. }
  846. .fc-button-primary {}
  847. .fc-button-primary:disabled {
  848. color: #777;
  849. background-color: #e3e3e3;
  850. border-color: #777;
  851. }
  852. .fc-button-primary:not(:disabled):active,
  853. .fc-button-primary:not(:disabled).fc-button-active {
  854. color: #e3e3e3;
  855. background-color: #737373;
  856. border-color: #151e27;
  857. }
  858. .fc-toolbar h2 {
  859. font-size: 1.0em;
  860. margin: 0;
  861. text-align: right;
  862. }
  863. .fc-event {
  864. position: relative;
  865. display: block;
  866. font-size: 0.85em;
  867. line-height: 1.4;
  868. border-radius: 3px;
  869. }
  870. .fc-event-dot {
  871. display: none;
  872. }
  873. .fc-h-event .fc-event-main {
  874. color: #535763;
  875. }
  876. .fc-v-event .fc-event-main {
  877. color: #535763;
  878. }
  879. .fc .fc-list-event-dot {
  880. border-color: #535763;
  881. }
  882. .fc-daygrid-event-dot {
  883. display: none;
  884. }
  885. .fc-daygrid-dot-event .fc-event-title {
  886. font-weight: lighter;
  887. }
  888. .fc-theme-standard td,
  889. .fc-theme-standard th {
  890. border: 1px solid #bababa;
  891. }
  892. .fc-theme-standard .fc-scrollgrid {
  893. border: 1px solid #c6c6c6;
  894. }
  895. .fc-col-header-cell {
  896. background-color: rgba(0, 0, 0, 0.1);
  897. }
  898. .fc-button-primary {
  899. color: rgba(83, 87, 99, 1);
  900. background-color: #e3e3e3;
  901. border-color: #535763;
  902. }
  903. .fc-button-primary:disabled {
  904. color: #535763;
  905. background-color: #e3e3e3;
  906. border-color: #535763;
  907. }
  908. .fc .fc-button-primary:not(:disabled) {
  909. color: #535763;
  910. background-color: rgba(0, 0, 0, 0.1);
  911. border-color: rgba(0, 0, 0, 0.1);
  912. }
  913. .fc .fc-button-primary:not(:disabled):active,
  914. .fc .fc-button-primary:not(:disabled).fc-button-active {
  915. color: #e3e3e3;
  916. background-color: rgba(83, 87, 99, .5);
  917. border-color: rgba(83, 87, 99, .5);
  918. }
  919. .fc .fc-toolbar h2 {
  920. font-size: 1.1em;
  921. font-family: Inter;
  922. margin: 0;
  923. text-align: right;
  924. }
  925. .fc-event {
  926. position: relative;
  927. display: block;
  928. font-size: 0.85em;
  929. font-weight: lighter;
  930. line-height: 1.4;
  931. color: #535763a5 !important;
  932. border-radius: 3px;
  933. border: 1px solid rgba(83, 87, 99, .25);
  934. }
  935. .fc-event,
  936. .fc-event-dot {
  937. background-color: rgba(0, 0, 0, 0.1);
  938. color: #535763;
  939. }
  940. #calendar .fc-day-today {
  941. background-color: #53576310;
  942. }
  943. .fc-unthemed td.fc-today {
  944. background: #77777732;
  945. }
  946. /*########################################
  947. ################# FOOT ###################
  948. #########################################*/
  949. .dw-footer h1 {
  950. font-weight: 800;
  951. margin: 0;
  952. }
  953. .dw-footer h4,
  954. .dw-footer h5 {
  955. font-weight: 900;
  956. line-height: 1.2;
  957. font-family: 'Playfair Display', serif;
  958. }
  959. .dw-footer .lead {
  960. margin-top: 0 !important;
  961. margin-bottom: 4rem;
  962. }
  963. #dw-footer {
  964. background-color: #484c57;
  965. color: #dadada;
  966. }
  967. #dw-footer a:hover {
  968. color: #111;
  969. fill: #111;
  970. }
  971. #dw-footer .br-widget img {
  972. width: 150px;
  973. }
  974. #dw-footer {
  975. margin: 0;
  976. padding: 4rem 0 4rem;
  977. }
  978. #dw-footer .br-widget {
  979. margin: 4rem 0 0;
  980. padding: 0 0 0;
  981. }
  982. #dw-footer .br-widget:first-child {
  983. margin-top: 0;
  984. }
  985. #dw-footer .br-widget ul.footer-links {
  986. list-style-type: none;
  987. margin: 0;
  988. padding: 0;
  989. }
  990. #dw-footer .br-widget ul.footer-links li {
  991. list-style-type: none;
  992. margin: 0 0 .35rem;
  993. padding: 0 0 .35rem;
  994. }
  995. #dw-footer .br-widget ul.footer-social li {
  996. font-size: 28px;
  997. }
  998. #dw-footer .br-widget ul.footer-links li:last-child {
  999. margin-bottom: 0;
  1000. }
  1001. #dw-footer a {
  1002. position: relative;
  1003. }
  1004. #dw-footer a {
  1005. color: #dadada;
  1006. fill: #dadada;
  1007. }
  1008. #dw-footer a:hover {
  1009. color: #25c2a0;
  1010. fill: #25c2a0;
  1011. }
  1012. #dw-footer {
  1013. margin: 0;
  1014. padding: 4rem 0 4rem;
  1015. }
  1016. #dw-footer .br-widget {
  1017. margin: 4rem 0 0;
  1018. padding: 0 0 0;
  1019. }
  1020. #dw-footer .br-widget:first-child {
  1021. margin-top: 0;
  1022. }
  1023. #dw-footer .br-widget ul.footer-links {
  1024. list-style-type: none;
  1025. margin: 0;
  1026. padding: 0;
  1027. }
  1028. #dw-footer .br-widget ul.footer-links li {
  1029. list-style-type: none;
  1030. margin: 0 0 .35rem;
  1031. padding: 0 0 .35rem;
  1032. }
  1033. #dw-footer .br-widget ul.footer-links li:last-child {
  1034. margin-bottom: 0;
  1035. }
  1036. #dw-footer a:hover:before {
  1037. left: 0;
  1038. right: initial;
  1039. width: 100%;
  1040. }
  1041. #dw-footer .br-widget a:before {
  1042. content: '';
  1043. position: absolute;
  1044. bottom: 0;
  1045. right: 0;
  1046. height: 1px;
  1047. width: 0;
  1048. background: currentColor;
  1049. -webkit-transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  1050. transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  1051. }
  1052. #dw-footer .br-widget a:hover:before {
  1053. left: 0;
  1054. right: initial;
  1055. width: 100%;
  1056. }
  1057. #dw-footer .footer-end {
  1058. margin: 4rem 0 0;
  1059. padding: 0;
  1060. font-size: 13px;
  1061. letter-spacing: .05em;
  1062. opacity: .75;
  1063. }
  1064. #dw-footer .footer-end .footer-social {
  1065. font-size: 19px;
  1066. }
  1067. #dw-footer .footer-end .footer-social .list-inline-item:not(:last-child) {
  1068. margin-right: 0.1rem
  1069. }
  1070. #dw-footer .footer-social a.twitter:hover {
  1071. color: #1DA1F2;
  1072. fill: #1DA1F2;
  1073. }
  1074. #dw-footer .footer-social a.github:hover {
  1075. color: #000;
  1076. fill: #000;
  1077. }
  1078. #dw-footer .footer-social a.linkedin:hover {
  1079. color: #0077b5;
  1080. fill: #0077b5;
  1081. }
  1082. #dw-footer .footer-social a.spotify:hover {
  1083. color: #1DB954;
  1084. fill: #1DB954;
  1085. }
  1086. #dw-footer .footer-social a.reddit:hover {
  1087. color: #FF4500;
  1088. fill: #FF4500;
  1089. }
  1090. #dw-footer .footer-social a.facebook:hover {
  1091. color: #4267B2;
  1092. fill: #4267B2;
  1093. }
  1094. #dw-footer .footer-social a.stackoverflow:hover {
  1095. color: #F47F24;
  1096. fill: #F47F24;
  1097. }
  1098. @media (min-width: 768px) {
  1099. #dw-footer {
  1100. padding: 5rem 0 5rem;
  1101. }
  1102. }
  1103. @media (min-width: 992px) {
  1104. #dw-footer {
  1105. padding: 6rem 0 6rem;
  1106. }
  1107. }
  1108. /*########################################
  1109. ################# QUER ###################
  1110. #########################################*/
  1111. @media (max-width: 639px) {
  1112. h1 {
  1113. font-size: 27px;
  1114. }
  1115. .container {
  1116. }
  1117. .main {
  1118. }
  1119. }
  1120. @media (max-width: 767px) {}
  1121. @media (max-width: 1023px) {}
  1122. @media (max-width: 1279px) {}
  1123. /*########################################
  1124. ################# FONT ###################
  1125. #########################################*/
  1126. @font-face {
  1127. font-family: 'Inter';
  1128. font-style: normal;
  1129. font-weight: 400;
  1130. src: url("/fonts/Inter-Regular.woff2") format("woff2"),
  1131. url("/fonts/Inter-Regular.woff") format("woff");
  1132. font-display: swap;
  1133. }
  1134. @font-face {
  1135. font-family: 'Inter';
  1136. font-style: italic;
  1137. font-weight: 400;
  1138. src: url("/fonts/Inter-Italic.woff2") format("woff2"),
  1139. url("/fonts/Inter-Italic.woff") format("woff");
  1140. font-display: swap;
  1141. }
  1142. @font-face {
  1143. font-family: 'Inter';
  1144. font-style: normal;
  1145. font-weight: 500;
  1146. src: url("/fonts/Inter-Medium.woff2") format("woff2"),
  1147. url("/fonts/Inter-Medium.woff") format("woff");
  1148. font-display: swap;
  1149. }
  1150. @font-face {
  1151. font-family: 'Inter';
  1152. font-style: italic;
  1153. font-weight: 500;
  1154. src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"),
  1155. url("/fonts/Inter-MediumItalic.woff") format("woff");
  1156. font-display: swap;
  1157. }
  1158. @font-face {
  1159. font-family: 'Inter';
  1160. font-style: normal;
  1161. font-weight: 600;
  1162. src: url("/fonts/Inter-SemiBold.woff2") format("woff2"),
  1163. url("/fonts/Inter-SemiBold.woff") format("woff");
  1164. font-display: swap;
  1165. }
  1166. @font-face {
  1167. font-family: 'Inter';
  1168. font-style: italic;
  1169. font-weight: 600;
  1170. src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
  1171. url("/fonts/Inter-SemiBoldItalic.woff") format("woff");
  1172. font-display: swap;
  1173. }
  1174. @font-face {
  1175. font-family: 'Inter';
  1176. font-style: normal;
  1177. font-weight: 700;
  1178. src: url("/fonts/Inter-Bold.woff2") format("woff2"),
  1179. url("/fonts/Inter-Bold.woff") format("woff");
  1180. font-display: swap;
  1181. }
  1182. @font-face {
  1183. font-family: 'Inter';
  1184. font-style: italic;
  1185. font-weight: 700;
  1186. src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"),
  1187. url("/fonts/Inter-BoldItalic.woff") format("woff");
  1188. font-display: swap;
  1189. }
  1190. @font-face {
  1191. font-family: 'Inter';
  1192. font-style: normal;
  1193. font-weight: 800;
  1194. src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"),
  1195. url("/fonts/Inter-ExtraBold.woff") format("woff");
  1196. font-display: swap;
  1197. }
  1198. @font-face {
  1199. font-family: 'Inter';
  1200. font-style: italic;
  1201. font-weight: 800;
  1202. src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
  1203. url("/fonts/Inter-ExtraBoldItalic.woff") format("woff");
  1204. font-display: swap;
  1205. }
  1206. @font-face {
  1207. font-family: 'Inter';
  1208. font-style: normal;
  1209. font-weight: 900;
  1210. src: url("/fonts/Inter-Black.woff2") format("woff2"),
  1211. url("/fonts/Inter-Black.woff") format("woff");
  1212. font-display: swap;
  1213. }
  1214. @font-face {
  1215. font-family: 'Inter';
  1216. font-style: italic;
  1217. font-weight: 900;
  1218. src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"),
  1219. url("/fonts/Inter-BlackItalic.woff") format("woff");
  1220. font-display: swap;
  1221. }
  1222. @font-face {
  1223. font-family: 'Montserrat';
  1224. font-style: italic;
  1225. font-weight: 400;
  1226. src: url('/fonts/montserrat-v14-latin-italic.eot');
  1227. /* IE9 Compat Modes */
  1228. src: local('Montserrat Italic'), local('Montserrat-Italic'),
  1229. url('/fonts/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'),
  1230. /* IE6-IE8 */
  1231. url('/fonts/montserrat-v14-latin-italic.woff2') format('woff2'),
  1232. /* Super Modern Browsers */
  1233. url('/fonts/montserrat-v14-latin-italic.woff') format('woff'),
  1234. /* Modern Browsers */
  1235. url('/fonts/montserrat-v14-latin-italic.ttf') format('truetype'),
  1236. /* Safari, Android, iOS */
  1237. url('/fonts/montserrat-v14-latin-italic.svg#Montserrat') format('svg');
  1238. /* Legacy iOS */
  1239. font-display: swap;
  1240. }
  1241. @font-face {
  1242. font-family: 'Montserrat';
  1243. font-style: normal;
  1244. font-weight: 400;
  1245. src: url('/fonts/montserrat-v14-latin-regular.eot');
  1246. /* IE9 Compat Modes */
  1247. src: local('Montserrat Regular'), local('Montserrat-Regular'),
  1248. url('/fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
  1249. /* IE6-IE8 */
  1250. url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
  1251. /* Super Modern Browsers */
  1252. url('/fonts/montserrat-v14-latin-regular.woff') format('woff'),
  1253. /* Modern Browsers */
  1254. url('/fonts/montserrat-v14-latin-regular.ttf') format('truetype'),
  1255. /* Safari, Android, iOS */
  1256. url('/fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
  1257. /* Legacy iOS */
  1258. font-display: swap;
  1259. }
  1260. @font-face {
  1261. font-family: 'Montserrat';
  1262. font-style: normal;
  1263. font-weight: 500;
  1264. src: url('/fonts/montserrat-v14-latin-500.eot');
  1265. /* IE9 Compat Modes */
  1266. src: local('Montserrat Medium'), local('Montserrat-Medium'),
  1267. url('/fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'),
  1268. /* IE6-IE8 */
  1269. url('/fonts/montserrat-v14-latin-500.woff2') format('woff2'),
  1270. /* Super Modern Browsers */
  1271. url('/fonts/montserrat-v14-latin-500.woff') format('woff'),
  1272. /* Modern Browsers */
  1273. url('/fonts/montserrat-v14-latin-500.ttf') format('truetype'),
  1274. /* Safari, Android, iOS */
  1275. url('/fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg');
  1276. /* Legacy iOS */
  1277. font-display: swap;
  1278. }
  1279. @font-face {
  1280. font-family: 'Montserrat';
  1281. font-style: italic;
  1282. font-weight: 500;
  1283. src: url('/fonts/montserrat-v14-latin-500italic.eot');
  1284. /* IE9 Compat Modes */
  1285. src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  1286. url('/fonts/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'),
  1287. /* IE6-IE8 */
  1288. url('/fonts/montserrat-v14-latin-500italic.woff2') format('woff2'),
  1289. /* Super Modern Browsers */
  1290. url('/fonts/montserrat-v14-latin-500italic.woff') format('woff'),
  1291. /* Modern Browsers */
  1292. url('/fonts/montserrat-v14-latin-500italic.ttf') format('truetype'),
  1293. /* Safari, Android, iOS */
  1294. url('/fonts/montserrat-v14-latin-500italic.svg#Montserrat') format('svg');
  1295. /* Legacy iOS */
  1296. font-display: swap;
  1297. }
  1298. @font-face {
  1299. font-family: 'Montserrat';
  1300. font-style: normal;
  1301. font-weight: 900;
  1302. src: url('/fonts/montserrat-v14-latin-900.eot');
  1303. /* IE9 Compat Modes */
  1304. src: local('Montserrat Black'), local('Montserrat-Black'),
  1305. url('/fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'),
  1306. /* IE6-IE8 */
  1307. url('/fonts/montserrat-v14-latin-900.woff2') format('woff2'),
  1308. /* Super Modern Browsers */
  1309. url('/fonts/montserrat-v14-latin-900.woff') format('woff'),
  1310. /* Modern Browsers */
  1311. url('/fonts/montserrat-v14-latin-900.ttf') format('truetype'),
  1312. /* Safari, Android, iOS */
  1313. url('/fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg');
  1314. /* Legacy iOS */
  1315. font-display: swap;
  1316. }
  1317. @font-face {
  1318. font-family: 'Playfair Display';
  1319. font-style: normal;
  1320. font-weight: 400;
  1321. src: url('/fonts/playfair-display-v20-latin-regular.eot');
  1322. /* IE9 Compat Modes */
  1323. src: local(''),
  1324. url('/fonts/playfair-display-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
  1325. /* IE6-IE8 */
  1326. url('/fonts/playfair-display-v20-latin-regular.woff2') format('woff2'),
  1327. /* Super Modern Browsers */
  1328. url('/fonts/playfair-display-v20-latin-regular.woff') format('woff'),
  1329. /* Modern Browsers */
  1330. url('/fonts/playfair-display-v20-latin-regular.ttf') format('truetype'),
  1331. /* Safari, Android, iOS */
  1332. url('/fonts/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg');
  1333. /* Legacy iOS */
  1334. font-display: swap;
  1335. }
  1336. @font-face {
  1337. font-family: 'Playfair Display';
  1338. font-style: normal;
  1339. font-weight: 700;
  1340. src: url('/fonts/playfair-display-v20-latin-700.eot');
  1341. /* IE9 Compat Modes */
  1342. src: local(''),
  1343. url('/fonts/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'),
  1344. /* IE6-IE8 */
  1345. url('/fonts/playfair-display-v20-latin-700.woff2') format('woff2'),
  1346. /* Super Modern Browsers */
  1347. url('/fonts/playfair-display-v20-latin-700.woff') format('woff'),
  1348. /* Modern Browsers */
  1349. url('/fonts/playfair-display-v20-latin-700.ttf') format('truetype'),
  1350. /* Safari, Android, iOS */
  1351. url('/fonts/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg');
  1352. /* Legacy iOS */
  1353. font-display: swap;
  1354. }
  1355. @font-face {
  1356. font-family: 'Playfair Display';
  1357. font-style: normal;
  1358. font-weight: 900;
  1359. src: url('/fonts/playfair-display-v20-latin-900.eot');
  1360. /* IE9 Compat Modes */
  1361. src: local(''),
  1362. url('/fonts/playfair-display-v20-latin-900.eot?#iefix') format('embedded-opentype'),
  1363. /* IE6-IE8 */
  1364. url('/fonts/playfair-display-v20-latin-900.woff2') format('woff2'),
  1365. /* Super Modern Browsers */
  1366. url('/fonts/playfair-display-v20-latin-900.woff') format('woff'),
  1367. /* Modern Browsers */
  1368. url('/fonts/playfair-display-v20-latin-900.ttf') format('truetype'),
  1369. /* Safari, Android, iOS */
  1370. url('/fonts/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg');
  1371. /* Legacy iOS */
  1372. font-display: swap;
  1373. }
  1374. @font-face {
  1375. font-family: 'Playfair Display';
  1376. font-style: italic;
  1377. font-weight: 400;
  1378. src: url('/fonts/playfair-display-v20-latin-italic.eot');
  1379. /* IE9 Compat Modes */
  1380. src: local(''),
  1381. url('/fonts/playfair-display-v20-latin-italic.eot?#iefix') format('embedded-opentype'),
  1382. /* IE6-IE8 */
  1383. url('/fonts/playfair-display-v20-latin-italic.woff2') format('woff2'),
  1384. /* Super Modern Browsers */
  1385. url('/fonts/playfair-display-v20-latin-italic.woff') format('woff'),
  1386. /* Modern Browsers */
  1387. url('/fonts/playfair-display-v20-latin-italic.ttf') format('truetype'),
  1388. /* Safari, Android, iOS */
  1389. url('/fonts/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg');
  1390. /* Legacy iOS */
  1391. font-display: swap;
  1392. }
  1393. @font-face {
  1394. font-family: 'Playfair Display';
  1395. font-style: italic;
  1396. font-weight: 700;
  1397. src: url('/fonts/playfair-display-v20-latin-700italic.eot');
  1398. /* IE9 Compat Modes */
  1399. src: local(''),
  1400. url('/fonts/playfair-display-v20-latin-700italic.eot?#iefix') format('embedded-opentype'),
  1401. /* IE6-IE8 */
  1402. url('/fonts/playfair-display-v20-latin-700italic.woff2') format('woff2'),
  1403. /* Super Modern Browsers */
  1404. url('/fonts/playfair-display-v20-latin-700italic.woff') format('woff'),
  1405. /* Modern Browsers */
  1406. url('/fonts/playfair-display-v20-latin-700italic.ttf') format('truetype'),
  1407. /* Safari, Android, iOS */
  1408. url('/fonts/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg');
  1409. /* Legacy iOS */
  1410. font-display: swap;
  1411. }