Nav apraksta

style.css 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764
  1. @import url(https://fonts.googleapis.com/css?family=Roboto);
  2. /* GLOBALS */
  3. body {
  4. margin: 0;
  5. font-family: Avenir, Helvetica, sans-serif;
  6. line-height: 1.5;
  7. }
  8. a, a:hover, a:focus, a:active {
  9. text-decoration: none;
  10. color: #fff;
  11. }
  12. .modal {
  13. overflow-y: auto;
  14. }
  15. /* HEADER */
  16. #main-header {
  17. min-height: 8rem;
  18. display: -webkit-box;
  19. display: -ms-flexbox;
  20. display: flex;
  21. -webkit-box-orient: horizontal;
  22. -webkit-box-direction: normal;
  23. -ms-flex-direction: row;
  24. flex-direction: row;
  25. -webkit-box-pack: justify;
  26. -ms-flex-pack: justify;
  27. justify-content: space-between;
  28. -webkit-box-align: center;
  29. -ms-flex-align: center;
  30. align-items: center;
  31. position: fixed;
  32. top: 0;
  33. left: 0;
  34. right: 0;
  35. z-index: 2;
  36. background: rgba(255, 255, 255, 0.7);
  37. -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  38. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  39. -webkit-backdrop-filter: blur(10px);
  40. backdrop-filter: blur(10px);
  41. }
  42. #logo {
  43. font-size: 1.7em;
  44. text-decoration: none;
  45. color: #606060;
  46. height: initial;
  47. padding: 0.3em 1em;
  48. text-align: center;
  49. display: -webkit-box;
  50. display: -ms-flexbox;
  51. display: flex;
  52. -webkit-box-orient: horizontal;
  53. -webkit-box-direction: normal;
  54. -ms-flex-direction: row;
  55. flex-direction: row;
  56. -webkit-box-pack: justify;
  57. -ms-flex-pack: justify;
  58. justify-content: space-between;
  59. -webkit-box-align: center;
  60. -ms-flex-align: center;
  61. align-items: center;
  62. width: 155px;
  63. }
  64. #logo:hover,
  65. #logo:active,
  66. #logo:focus {
  67. color: #333;
  68. }
  69. #account {
  70. padding: 0.3em 1em;
  71. }
  72. .nav-link {
  73. font-size: 1.2em;
  74. padding: calc(1em / 2) 1em;
  75. text-decoration: none;
  76. color: #333;
  77. position: relative;
  78. -webkit-transition: color 150ms ease-in-out;
  79. transition: color 150ms ease-in-out;
  80. }
  81. .nav-link:after {
  82. content: '';
  83. position: absolute;
  84. bottom: 0;
  85. height: 2px;
  86. left: 1em;
  87. right: 1em;
  88. background-color: #606060;
  89. -webkit-transform: scaleX(0);
  90. transform: scaleX(0);
  91. -webkit-transition: -webkit-transform 150ms ease-in-out;
  92. transition: -webkit-transform 150ms ease-in-out;
  93. transition: transform 150ms ease-in-out;
  94. transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  95. }
  96. .nav-link:hover::after,
  97. .nav-link:focus::after,
  98. .nav-link:active::after {
  99. -webkit-transform: scaleX(1);
  100. transform: scaleX(1);
  101. }
  102. .nav-link:hover,
  103. .nav-link:focus,
  104. .nav-link:active {
  105. color: #606060;
  106. }
  107. .sign-out {
  108. padding: 0.5em 1em;
  109. background-color: #217ce4;
  110. color: #fff;
  111. text-decoration: none;
  112. -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
  113. box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
  114. -webkit-transition-property: background-color, -webkit-box-shadow;
  115. transition-property: background-color, -webkit-box-shadow;
  116. transition-property: background-color, box-shadow;
  117. transition-property: background-color, box-shadow, -webkit-box-shadow;
  118. -webkit-transition-duration: 150ms;
  119. transition-duration: 150ms;
  120. -webkit-transition-timing-function: ease-in-out;
  121. transition-timing-function: ease-in-out;
  122. }
  123. .sign-out:hover,
  124. .sign-out:focus,
  125. .sign-out:active {
  126. background-color: #3d88df;
  127. -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
  128. box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
  129. }
  130. /* GOOGLE BUTTON */
  131. .google-button {
  132. height: 40px;
  133. border-width: 0;
  134. background: #fff;
  135. color: #737373;
  136. border-radius: none;
  137. white-space: nowrap;
  138. -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
  139. box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.05), -1px 1px 2px 1px rgba(0, 0, 0, 0.02);
  140. -webkit-transition-property: background-color, -webkit-box-shadow;
  141. transition-property: background-color, -webkit-box-shadow;
  142. transition-property: background-color, box-shadow;
  143. transition-property: background-color, box-shadow, -webkit-box-shadow;
  144. -webkit-transition-duration: 150ms;
  145. transition-duration: 150ms;
  146. -webkit-transition-timing-function: ease-in-out;
  147. transition-timing-function: ease-in-out;
  148. display: -webkit-box;
  149. display: -ms-flexbox;
  150. display: flex;
  151. -ms-flex-pack: distribute;
  152. justify-content: space-around;
  153. -webkit-box-align: center;
  154. -ms-flex-align: center;
  155. align-items: center;
  156. }
  157. .google-button:focus,
  158. .google-button:hover {
  159. -webkit-box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
  160. box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
  161. cursor: pointer;
  162. }
  163. .google-button:active {
  164. background-color: #e5e5e5;
  165. -webkit-box-shadow: none;
  166. box-shadow: none;
  167. -webkit-transition-duration: 10ms;
  168. transition-duration: 10ms;
  169. }
  170. .google-button__icon {
  171. margin: 5px;
  172. width: 18px;
  173. height: 18px;
  174. }
  175. .google-button__text {
  176. padding: 0 12px;
  177. font-size: 14px;
  178. font-family: 'Roboto', Arial, sans-serif;
  179. }
  180. /* (EXPERIENCES PAGE) MAIN SECTION */
  181. #experience-main {
  182. background-color: #606060;
  183. display: -webkit-box;
  184. display: -ms-flexbox;
  185. display: flex;
  186. -webkit-box-orient: vertical;
  187. -webkit-box-direction: normal;
  188. -ms-flex-direction: column;
  189. flex-direction: column;
  190. min-height: calc(90vh - 8rem - 10vh);
  191. padding: 3em 5em;
  192. }
  193. #experience-main h3 {
  194. color: #606060;
  195. }
  196. .experience-lead {
  197. color: #fff;
  198. font-size: 2em;
  199. margin: 0 0 2em 0;
  200. border-bottom: #fff;
  201. border-bottom-width: 3px;
  202. border-bottom-style: solid;
  203. }
  204. #experience-content {
  205. display: -ms-grid;
  206. display: grid;
  207. grid-gap: 2em;
  208. -ms-grid-columns: 1fr 1fr 1fr;
  209. grid-template-columns: 1fr 1fr 1fr;
  210. margin-bottom: 1em;
  211. }
  212. .grid-box {
  213. background-color: #fff;
  214. height: 15em;
  215. width: 15em;
  216. border-radius: 15px;
  217. -webkit-box-shadow: 1px 1px 3px 1px #333;
  218. box-shadow: 1px 1px 3px 1px #333;
  219. -ms-grid-column-align: center;
  220. justify-self: center;
  221. padding: 3em 2em;
  222. position: relative;
  223. -webkit-transition: -webkit-transform 150ms ease-in-out;
  224. transition: -webkit-transform 150ms ease-in-out;
  225. transition: transform 150ms ease-in-out;
  226. transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  227. cursor: pointer;
  228. }
  229. .grid-box .box-title {
  230. color: #333;
  231. font-size: 1.5em;
  232. margin-bottom: 2em;
  233. }
  234. .grid-box .box-dates {
  235. display: -webkit-box;
  236. display: -ms-flexbox;
  237. display: flex;
  238. -webkit-box-orient: vertical;
  239. -webkit-box-direction: normal;
  240. -ms-flex-direction: column;
  241. flex-direction: column;
  242. color: #606060;
  243. -webkit-box-pack: justify;
  244. -ms-flex-pack: justify;
  245. justify-content: space-between;
  246. }
  247. .grid-box .box-weeks {
  248. color: #606060;
  249. }
  250. .grid-box .box-edit {
  251. position: absolute;
  252. right: 0;
  253. bottom: 0;
  254. font-size: 1.5em;
  255. background-image: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#e4e1d7));
  256. background-image: linear-gradient(to bottom right, #fff, #e4e1d7);
  257. /*radial-gradient(circle 200px at bottom right, #fff, $background-color); */
  258. height: 2em;
  259. width: 2em;
  260. display: -webkit-box;
  261. display: -ms-flexbox;
  262. display: flex;
  263. -webkit-box-align: center;
  264. -ms-flex-align: center;
  265. align-items: center;
  266. -webkit-box-pack: center;
  267. -ms-flex-pack: center;
  268. justify-content: center;
  269. border-bottom-right-radius: 15px;
  270. }
  271. .grid-box .box-edit a {
  272. color: #217ce4;
  273. }
  274. .grid-box .box-weeks.warning {
  275. color: #c83631;
  276. font-size: 1.1em;
  277. }
  278. .grid-box#new-experience {
  279. display: -webkit-box;
  280. display: -ms-flexbox;
  281. display: flex;
  282. -webkit-box-orient: vertical;
  283. -webkit-box-direction: normal;
  284. -ms-flex-direction: column;
  285. flex-direction: column;
  286. -ms-flex-pack: distribute;
  287. justify-content: space-around;
  288. -webkit-box-align: center;
  289. -ms-flex-align: center;
  290. align-items: center;
  291. }
  292. .grid-box#new-experience span {
  293. color: #217ce4;
  294. font-size: 5em;
  295. }
  296. .grid-box#new-experience h4 {
  297. color: #606060;
  298. margin: 0;
  299. }
  300. .grid-box:hover {
  301. -webkit-transform: translateY(-5px);
  302. transform: translateY(-5px);
  303. }
  304. /* WELCOME SECTION */
  305. #welcome {
  306. margin-top: 8rem;
  307. min-height: 25rem;
  308. background: #333 url(../img/cytonn-photography-GJao3ZTX9gU-unsplash.jpeg) no-repeat top left;
  309. background-size: cover;
  310. position: relative;
  311. background-blend-mode: screen;
  312. border-bottom: 3px solid #f0c873;
  313. }
  314. #welcome-text {
  315. position: absolute;
  316. bottom: 2.6rem;
  317. left: 5vw;
  318. width: 30%;
  319. display: -webkit-box;
  320. display: -ms-flexbox;
  321. display: flex;
  322. -webkit-box-orient: vertical;
  323. -webkit-box-direction: normal;
  324. -ms-flex-direction: column;
  325. flex-direction: column;
  326. }
  327. #welcome-image {
  328. height: 75px;
  329. width: 75px;
  330. border-radius: 50%;
  331. margin-bottom: 15px;
  332. border: 2px solid #fff;
  333. -webkit-box-shadow: 1px 1px 10px 0px #222;
  334. box-shadow: 1px 1px 10px 0px #222;
  335. }
  336. #welcome-user {
  337. color: #fff;
  338. text-shadow: 1px 1px 5px #222;
  339. font-size: 3rem;
  340. margin: 0;
  341. }
  342. /* (LOGIN PAGE) MAIN SECTION */
  343. #home-main {
  344. background-color: #606060;
  345. display: -webkit-box;
  346. display: -ms-flexbox;
  347. display: flex;
  348. -webkit-box-orient: horizontal;
  349. -webkit-box-direction: normal;
  350. -ms-flex-direction: row;
  351. flex-direction: row;
  352. min-height: calc(80vh - 8rem - 10vh);
  353. padding: 2.5em 2em;
  354. color: #fff;
  355. }
  356. #home-main h3 {
  357. font-size: 1.7em;
  358. font-weight: 900;
  359. }
  360. #home-main p {
  361. font-size: 1.3em;
  362. }
  363. #main-sidebar {
  364. -webkit-box-flex: 1;
  365. -ms-flex: 1;
  366. flex: 1;
  367. padding-left: 2em;
  368. }
  369. #main-sidebar h3 {
  370. font-weight: 700;
  371. }
  372. #main-sidebar ul {
  373. margin: 0;
  374. padding-left: 1em;
  375. }
  376. #main-sidebar li {
  377. list-style: none;
  378. font-size: 1.3em;
  379. }
  380. #main-sidebar a {
  381. opacity: 0.7;
  382. text-decoration: none;
  383. }
  384. #main-sidebar a.active,
  385. #main-sidebar a:hover,
  386. #main-sidebar a:focus,
  387. #main-sidebar a:active {
  388. opacity: 1;
  389. }
  390. .main-content {
  391. -webkit-box-flex: 3;
  392. -ms-flex: 3;
  393. flex: 3;
  394. overflow: hidden;
  395. }
  396. .main-content-box {
  397. display: none;
  398. }
  399. .main-content-box.show {
  400. display: initial;
  401. }
  402. .main-content-box #team-images {
  403. display: -ms-grid;
  404. display: grid;
  405. -ms-grid-columns: (1fr)[2];
  406. grid-template-columns: repeat(2, 1fr);
  407. gap: 1em;
  408. justify-items: center;
  409. margin: 2em 0;
  410. }
  411. .main-content-box #team-images img {
  412. height: 100px;
  413. width: 100px;
  414. border-radius: 50%;
  415. border: 2px #fff solid;
  416. -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  417. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  418. }
  419. #contact-info {
  420. margin-left: 3.5rem;
  421. opacity: 0.8;
  422. }
  423. .login-hr {
  424. border-width: 4px;
  425. border-radius: 3px;
  426. }
  427. /* SHOWCASE */
  428. #showcase {
  429. margin-top: 8rem;
  430. min-height: calc(100vh - 8rem);
  431. background: #333 url(../img/andrew-neel-cckf4TsHAuw-unsplash.jpeg) no-repeat left top;
  432. background-size: cover;
  433. position: relative;
  434. background-blend-mode: screen;
  435. border-bottom: 3px #f0c873 solid;
  436. }
  437. #showcase-text {
  438. position: absolute;
  439. top: 10vh;
  440. right: 5vw;
  441. width: 40%;
  442. display: -webkit-box;
  443. display: -ms-flexbox;
  444. display: flex;
  445. -webkit-box-orient: vertical;
  446. -webkit-box-direction: normal;
  447. -ms-flex-direction: column;
  448. flex-direction: column;
  449. text-shadow: 1px 1px 5px #222;
  450. }
  451. #showcase-heading {
  452. font-size: 3em;
  453. color: #fff;
  454. width: 100%;
  455. margin-bottom: 0.25em;
  456. text-align: right;
  457. }
  458. #showcase-link {
  459. display: -webkit-box;
  460. display: -ms-flexbox;
  461. display: flex;
  462. -webkit-box-pack: end;
  463. -ms-flex-pack: end;
  464. justify-content: flex-end;
  465. }
  466. #showcase-link a {
  467. color: #fff;
  468. font-size: 1.8em;
  469. text-decoration: underline;
  470. cursor: pointer;
  471. }
  472. #showcase-link a:hover {
  473. text-decoration: none;
  474. }
  475. /* (EXPERIENCE PAGE) SHOWCASE SECTION */
  476. #view-experience-showcase {
  477. background-color: #606060;
  478. margin-top: 8rem;
  479. color: #fff;
  480. border-bottom: 3px solid #f0c873;
  481. }
  482. #view-experience-buttons {
  483. display: -webkit-box;
  484. display: -ms-flexbox;
  485. display: flex;
  486. -webkit-box-orient: horizontal;
  487. -webkit-box-direction: normal;
  488. -ms-flex-direction: row;
  489. flex-direction: row;
  490. -webkit-box-align: center;
  491. -ms-flex-align: center;
  492. align-items: center;
  493. -webkit-box-pack: justify;
  494. -ms-flex-pack: justify;
  495. justify-content: space-between;
  496. height: 100%;
  497. max-width: 18em;
  498. margin: 0 auto;
  499. }
  500. #experience-pen {
  501. color: #fff;
  502. background-color: #217ce4;
  503. border-radius: 15px;
  504. padding: 0.75em;
  505. font-size: 2em;
  506. display: -webkit-box;
  507. display: -ms-flexbox;
  508. display: flex;
  509. -webkit-box-align: center;
  510. -ms-flex-align: center;
  511. align-items: center;
  512. -webkit-box-pack: center;
  513. -ms-flex-pack: center;
  514. justify-content: center;
  515. -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  516. box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  517. cursor: pointer;
  518. -webkit-transition: -webkit-transform 150ms ease-in-out;
  519. transition: -webkit-transform 150ms ease-in-out;
  520. transition: transform 150ms ease-in-out;
  521. transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  522. }
  523. #experience-pen:hover,
  524. #experience-pen:focus,
  525. #experience-pen:active {
  526. -webkit-transform: translateY(-5px);
  527. transform: translateY(-5px);
  528. }
  529. #view-experience-tabs {
  530. font-size: 1.2em;
  531. margin: 1em 0;
  532. display: -webkit-box;
  533. display: -ms-flexbox;
  534. display: flex;
  535. -ms-flex-pack: distribute;
  536. justify-content: space-around;
  537. }
  538. #view-experience-tabs a {
  539. font-size: 1.2em;
  540. padding: 0 1em;
  541. text-decoration: none;
  542. position: relative;
  543. -webkit-transition: opacity 150ms ease-in-out;
  544. transition: opacity 150ms ease-in-out;
  545. opacity: 0.6;
  546. font-weight: bold;
  547. }
  548. #view-experience-tabs a:after {
  549. content: '';
  550. position: absolute;
  551. bottom: 0;
  552. height: 1px;
  553. left: 1em;
  554. right: 1em;
  555. background-color: #fff;
  556. -webkit-transform: scaleX(0);
  557. transform: scaleX(0);
  558. -webkit-transition: -webkit-transform 150ms ease-in-out;
  559. transition: -webkit-transform 150ms ease-in-out;
  560. transition: transform 150ms ease-in-out;
  561. transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  562. }
  563. #view-experience-tabs a:hover::after,
  564. #view-experience-tabs a:focus::after,
  565. #view-experience-tabs a:active::after,
  566. #view-experience-tabs a.active::after {
  567. -webkit-transform: scaleX(1);
  568. transform: scaleX(1);
  569. }
  570. #view-experience-tabs a.active,
  571. #view-experience-tabs a:hover,
  572. #view-experience-tabs a:focus,
  573. #view-experience-tabs a:active {
  574. opacity: 1;
  575. }
  576. /* (EXPERIENCE PAGE) MAIN SECTION */
  577. .main-content-box#calendar,
  578. .main-content-box#questionnaires,
  579. .main-content-box#moments,
  580. .main-content-box#milestones {
  581. min-height: calc(80vh - 8rem - 10vh);
  582. }
  583. #view-experience-content {
  584. background-color: #fff;
  585. min-height: calc(100vh - 8rem);
  586. display: -webkit-box;
  587. display: -ms-flexbox;
  588. display: flex;
  589. -webkit-box-pack: center;
  590. -ms-flex-pack: center;
  591. justify-content: center;
  592. -webkit-box-align: center;
  593. -ms-flex-align: center;
  594. align-items: center;
  595. }
  596. /* FOOTER */
  597. #main-footer {
  598. background: #2e2e2e;
  599. color: #fff;
  600. display: -webkit-box;
  601. display: -ms-flexbox;
  602. display: flex;
  603. -webkit-box-orient: vertical;
  604. -webkit-box-direction: normal;
  605. -ms-flex-direction: column;
  606. flex-direction: column;
  607. -webkit-box-align: center;
  608. -ms-flex-align: center;
  609. align-items: center;
  610. -webkit-box-pack: center;
  611. -ms-flex-pack: center;
  612. justify-content: center;
  613. min-height: 10vh;
  614. padding: 1.5em;
  615. border-top: 3px solid #f0c873;
  616. }
  617. #main-footer p {
  618. margin: 0;
  619. font-size: 1.2em;
  620. }
  621. #main-footer a {
  622. color: #aaa;
  623. text-decoration: none;
  624. }
  625. #main-footer a:hover,
  626. #main-footer a:active,
  627. #main-footer a:focus {
  628. color: #fff;
  629. text-decoration: underline;
  630. }
  631. /* MEDIA QUERIES */
  632. @media (max-width: 768px) {
  633. #showcase {
  634. display: -webkit-box;
  635. display: -ms-flexbox;
  636. display: flex;
  637. -webkit-box-pack: center;
  638. -ms-flex-pack: center;
  639. justify-content: center;
  640. -webkit-box-align: center;
  641. -ms-flex-align: center;
  642. align-items: center;
  643. }
  644. #showcase-text {
  645. position: initial;
  646. min-width: 70%;
  647. }
  648. #showcase-heading {
  649. text-align: center;
  650. }
  651. #showcase-link {
  652. -webkit-box-pack: center;
  653. -ms-flex-pack: center;
  654. justify-content: center;
  655. }
  656. #main-sidebar {
  657. display: none;
  658. }
  659. .main-content-box {
  660. display: initial;
  661. }
  662. #view-experience-buttons {
  663. margin: 1rem auto;
  664. }
  665. #experience-lead {
  666. text-align: center;
  667. }
  668. #experience-content {
  669. -ms-grid-columns: 1fr 1fr;
  670. grid-template-columns: 1fr 1fr;
  671. }
  672. }
  673. @media (max-width: 580px) {
  674. #experience-lead h2 {
  675. margin: 20px auto 10px auto;
  676. }
  677. #experience-content {
  678. -ms-grid-columns: 1fr;
  679. grid-template-columns: 1fr;
  680. }
  681. }
  682. @media (min-width: 1080px) {
  683. #experience-content {
  684. -ms-grid-columns: (1fr)[4];
  685. grid-template-columns: repeat(4, 1fr);
  686. }
  687. }
  688. /*# sourceMappingURL=style.css.map */