1. /*------------------------------------*\
  2.   #FONTS
  3. \*------------------------------------*/
  4. @font-face {
  5.   font-family: "HK Grotesk Web";
  6.   font-weight: 200;
  7.   src:url("../fonts/hkgrotesk-light-webfont.woff2") format("woff2"), url("../fonts/hkgrotesk-light-webfont.woff") format("woff");
  8. }
  9.  
  10. @font-face
  11. {
  12.   font-family: "HK Grotesk Web";
  13.   font-weight: 400;
  14.   src:url("../fonts/hkgrotesk-regular-webfont.woff2") format("woff2"), url("../fonts/hkgrotesk-regular-webfont.woff") format("woff");
  15. }
  16.  
  17. @font-face
  18. {
  19.   font-family: "HK Grotesk Web";
  20.   font-weight: 600;
  21.   src:url("../fonts/hkgrotesk-medium-webfont.woff2") format("woff2"), url("../fonts/hkgrotesk-medium-webfont.woff") format("woff");
  22. }
  23.  
  24.  
  25. /*------------------------------------*\
  26.   #GENERIC
  27. \*------------------------------------*/
  28.  
  29. /*
  30.     Generic: Page
  31.     ---
  32.     Global page styles + universal box-sizing:
  33. */
  34.  
  35. html {
  36.     font-size: 16px;
  37.     line-height: 1.5;
  38.     font-family: "HK Grotesk Web", Helvetica, arial, sans-serif;
  39.     color: #111;
  40.     box-sizing: border-box;
  41.     -webkit-font-smoothing: antialiased;
  42.     -moz-osx-font-smoothing: grayscale;
  43. }
  44.  
  45. *,
  46. *:before,
  47. *:after {
  48.     box-sizing: inherit;
  49. }
  50.  
  51. /*
  52.  * Remove text-shadow in selection highlight:
  53.  * https://twitter.com/miketaylr/status/12228805301
  54.  *
  55.  * Customize the background color to match your design.
  56.  */
  57.  
  58. ::selection {
  59.     background: #5051DB;
  60.     color: white;
  61.     text-shadow: none;
  62. }
  63.  
  64. /*------------------------------------*\
  65.   #Elements
  66. \*------------------------------------*/
  67.  
  68. /*
  69.     Elements: Images
  70.     ---
  71.     Default markup for images to make them responsive
  72. */
  73.  
  74. img {
  75.     max-width: 100%;
  76.     vertical-align: top;
  77. }
  78.  
  79. /*
  80.     Elements: typography
  81.     ---
  82.     Default markup for typographic elements
  83. */
  84.  
  85. h1 {
  86.     font-size: 36px;
  87.     line-height: 48px;
  88.     margin: 0 0 24px;
  89. }
  90.  
  91. h2 {
  92.     font-size: 32px;
  93.     line-height: 40px;
  94.     margin: 0 0 24px;
  95. }
  96.  
  97. h3 {
  98.     font-size: 26px;
  99.     line-height: 32px;
  100.     margin: 0 0 24px;
  101. }
  102.  
  103. h4,
  104. h5,
  105. h6 {
  106.     font-size: 20px;
  107.     line-height: 24px;
  108.     margin: 0 0 24px;
  109. }
  110.  
  111. p,
  112. ol,
  113. ul,
  114. dl,
  115. table,
  116. address,
  117. figure {
  118.     margin: 0 0 24px;
  119. }
  120.  
  121. ul,
  122. ol {
  123.     padding-left: 24px;
  124. }
  125.  
  126. li ul,
  127. li ol {
  128.     margin-bottom: 0;
  129. }
  130.  
  131. blockquote {
  132.     font-style: normal;
  133.     font-size: 23px;
  134.     line-height: 32px;
  135.     margin: 0 0 24px;
  136. }
  137.  
  138. blockquote * {
  139.     font-size: inherit;
  140.     line-height: inherit;
  141. }
  142.  
  143. figcaption {
  144.     font-weight: 400;
  145.     font-size: 12px;
  146.     line-height: 16px;
  147.     margin-top: 8px;
  148.     color: #3C3C42;
  149. }
  150.  
  151. hr {
  152.     border: 0;
  153.     height: 1px;
  154.     background: LightGrey;
  155.     margin: 0 0 24px;
  156. }
  157.  
  158. a {
  159.     color: RoyalBlue;
  160.     color: #5051DB;
  161.     transition: all .1s ease-in-out;
  162. }
  163.  
  164. a:visited,
  165. a:active {
  166.     color: BlueViolet;
  167. }
  168.  
  169. a:hover,
  170. a:focus {
  171.     color: #3E3EA8;
  172. }
  173.  
  174. /*------------------------------------*\
  175.   #OBJECTS
  176. \*------------------------------------*/
  177.  
  178. /*
  179.     Objects: Row
  180.     ---
  181.     Creates a horizontal row that stretches the viewport and adds padding around children
  182. */
  183.  
  184. .o-row {
  185.     position: relative;
  186.     padding: 24px 24px 0;
  187.     display: flex;
  188.     flex-direction: column;
  189. }
  190.  
  191. /* size modifiers */
  192.  
  193. .o-row--lg {
  194.     padding: 48px 24px 24px;
  195. }
  196.  
  197. @media (min-width: 768px)
  198. {
  199.   html
  200.   {
  201.     font-size: 20px;
  202.     line-height: 1.6;
  203.   }
  204. }
  205.  
  206. /*
  207.     Objects: Container
  208.     ---
  209.     Creates a horizontal container that sets de global max-width
  210. */
  211.  
  212. .o-container {
  213.     margin-left: auto;
  214.     margin-right: auto;
  215.     max-width: 56.4em; /* 56.4 * 20px = 1128px */
  216. }
  217.  
  218. /*
  219.     Objects: Layout
  220.     ---
  221.     The layout object provides us with a column-style layout system. This object
  222.     contains the basic structural elements, but classes should be complemented
  223.     with width utilities
  224. */
  225.  
  226. .o-layout {
  227.     display: -webkit-flex;
  228.     display: -ms-flexbox;
  229.     display: flex;
  230.     flex-wrap: wrap;
  231. }
  232.  
  233.     .o-layout__item {
  234.         width: 100%;
  235.     }
  236.  
  237. /* gutter modifiers, these affect o-layout__item too */
  238.  
  239. .o-layout--gutter {
  240.     margin: 0 -12px;
  241. }
  242.  
  243. .o-layout--gutter > .o-layout__item {
  244.     padding: 0 12px;
  245. }
  246.  
  247. .o-layout--gutter-sm {
  248.     margin: 0 -6px;
  249. }
  250.  
  251. .o-layout--gutter-sm > .o-layout__item {
  252.     padding: 0 6px;
  253. }
  254.  
  255. .o-layout--gutter-lg {
  256.     margin: 0 -24px;
  257. }
  258.  
  259. .o-layout--gutter-lg > .o-layout__item {
  260.     padding: 0 24px;
  261. }
  262.  
  263. /* reverse horizontal row modifier */
  264.  
  265. .o-layout--row-reverse {
  266.     flex-direction: row-reverse;
  267. }
  268.  
  269. /* Horizontal alignment modifiers*/
  270.  
  271. .o-layout--justify-start {
  272.     justify-content: flex-start;
  273. }
  274.  
  275. .o-layout--justify-end {
  276.     justify-content: flex-end;
  277. }
  278.  
  279. .o-layout--justify-center {
  280.     justify-content: center;
  281. }
  282.  
  283. .o-layout--justify-space-around {
  284.     justify-content: space-around;
  285. }
  286.  
  287. .o-layout--justify-space-evenly {
  288.     justify-content: space-evenly;
  289. }
  290.  
  291. .o-layout--justify-space-between {
  292.     justify-content: space-between;
  293. }
  294.  
  295. /* Vertical alignment modifiers */
  296.  
  297. .o-layout--align-start {
  298.     align-items: flex-start;
  299. }
  300.  
  301. .o-layout--align-end {
  302.     align-items: flex-end;
  303. }
  304.  
  305. .o-layout--align-center {
  306.     align-items: center;
  307. }
  308.  
  309. .o-layout--align-baseline {
  310.     align-items: baseline;
  311. }
  312.  
  313. /* Vertical alignment modifiers that only work if there is one than one flex item */
  314.  
  315. .o-layout--align-content-start {
  316.     align-content: start;
  317. }
  318.  
  319. .o-layout--align-content-end {
  320.     align-content: end;
  321. }
  322.  
  323. .o-layout--align-content-center {
  324.     align-content: center;
  325. }
  326.  
  327. .o-layout--align-content-space-around {
  328.     align-content: space-around;
  329. }
  330.  
  331. .o-layout--align-content-space-between {
  332.     align-content: space-between;
  333. }
  334.  
  335. /*------------------------------------*\
  336.   #COMPONENTS
  337. \*------------------------------------*/
  338.  
  339. /*------------------------------------*\
  340.   #UTILITIES
  341. \*------------------------------------*/
  342.  
  343. /*
  344.     Utilities: max-width
  345.     ---
  346.     Utility classes to put specific max widths onto elements
  347. */
  348.  
  349. .u-max-width-xs {
  350.     max-width: 18em !important;
  351. }
  352.  
  353. .u-max-width-sm {
  354.     max-width: 36em !important;
  355. }
  356.  
  357. .u-max-width-md {
  358.     max-width: 42em !important;
  359. }
  360.  
  361. .u-max-width-lg {
  362.     max-width: 60em !important;
  363. }
  364.  
  365. .u-max-width-xl {
  366.     max-width: 75em !important;
  367. }
  368.  
  369. .u-max-width-none {
  370.     max-width: none !important;
  371. }
  372.  
  373. /*
  374.     Utility: Widths
  375.     ---
  376.     Utility classes to put specific widths onto elements
  377.     Will be mostly used on o-layout__item
  378. */
  379.  
  380. .u-width-auto {
  381.     width: auto !important;
  382. }
  383.  
  384. .u-1-of-2 {
  385.     width: 50% !important;
  386. }
  387.  
  388. .u-1-of-3 {
  389.     width: 33.3333333333% !important;
  390. }
  391.  
  392. .u-2-of-3 {
  393.     width: 66.6666666667% !important;
  394. }
  395.  
  396. .u-1-of-4 {
  397.     width: 25% !important;
  398. }
  399.  
  400. .u-3-of-4 {
  401.     width: 75% !important;
  402. }
  403.  
  404. .u-1-of-5 {
  405.     width: 20% !important;
  406. }
  407.  
  408. .u-2-of-5 {
  409.     width: 40% !important;
  410. }
  411.  
  412. .u-3-of-5 {
  413.     width: 60% !important;
  414. }
  415.  
  416. .u-4-of-5 {
  417.     width: 80% !important;
  418. }
  419.  
  420. .u-1-of-6 {
  421.     width: 16.6666666667% !important;
  422. }
  423.  
  424. .u-5-of-6 {
  425.     width: 83.3333333333% !important;
  426. }
  427.  
  428. @media (min-width: 576px) {
  429.     .u-1-of-2-bp1 {
  430.         width: 50% !important;
  431.     }
  432.     .u-1-of-3-bp1 {
  433.         width: 33.3333333333% !important;
  434.     }
  435.     .u-2-of-3-bp1 {
  436.         width: 66.6666666667% !important;
  437.     }
  438.     .u-1-of-4-bp1 {
  439.         width: 25% !important;
  440.     }
  441.     .u-3-of-4-bp1 {
  442.         width: 75% !important;
  443.     }
  444.     .u-1-of-5-bp1 {
  445.         width: 20% !important;
  446.     }
  447.     .u-2-of-5-bp1 {
  448.         width: 40% !important;
  449.     }
  450.     .u-3-of-5-bp1 {
  451.         width: 60% !important;
  452.     }
  453.     .u-4-of-5-bp1 {
  454.         width: 80% !important;
  455.     }
  456.     .u-1-of-6-bp1 {
  457.         width: 16.6666666667% !important;
  458.     }
  459.     .u-5-of-6-bp1 {
  460.         width: 83.3333333333% !important;
  461.     }
  462. }
  463.  
  464. @media (min-width: 768px) {
  465.     .u-1-of-2-bp2 {
  466.         width: 50% !important;
  467.     }
  468.     .u-1-of-3-bp2 {
  469.         width: 33.3333333333% !important;
  470.     }
  471.     .u-2-of-3-bp2 {
  472.         width: 66.6666666667% !important;
  473.     }
  474.     .u-1-of-4-bp2 {
  475.         width: 25% !important;
  476.     }
  477.     .u-3-of-4-bp2 {
  478.         width: 75% !important;
  479.     }
  480.     .u-1-of-5-bp2 {
  481.         width: 20% !important;
  482.     }
  483.     .u-2-of-5-bp2 {
  484.         width: 40% !important;
  485.     }
  486.     .u-3-of-5-bp2 {
  487.         width: 60% !important;
  488.     }
  489.     .u-4-of-5-bp2 {
  490.         width: 80% !important;
  491.     }
  492.     .u-1-of-6-bp2 {
  493.         width: 16.6666666667% !important;
  494.     }
  495.     .u-5-of-6-bp2 {
  496.         width: 83.3333333333% !important;
  497.     }
  498. }
  499.  
  500. @media (min-width: 992px) {
  501.     .u-1-of-2-bp3 {
  502.         width: 50% !important;
  503.     }
  504.     .u-1-of-3-bp3 {
  505.         width: 33.3333333333% !important;
  506.     }
  507.     .u-2-of-3-bp3 {
  508.         width: 66.6666666667% !important;
  509.     }
  510.     .u-1-of-4-bp3 {
  511.         width: 25% !important;
  512.     }
  513.     .u-3-of-4-bp3 {
  514.         width: 75% !important;
  515.     }
  516.     .u-1-of-5-bp3 {
  517.         width: 20% !important;
  518.     }
  519.     .u-2-of-5-bp3 {
  520.         width: 40% !important;
  521.     }
  522.     .u-3-of-5-bp3 {
  523.         width: 60% !important;
  524.     }
  525.     .u-4-of-5-bp3 {
  526.         width: 80% !important;
  527.     }
  528.     .u-1-of-6-bp3 {
  529.         width: 16.6666666667% !important;
  530.     }
  531.     .u-5-of-6-bp3 {
  532.         width: 83.3333333333% !important;
  533.     }
  534. }
  535.  
  536. @media (min-width: 1200px) {
  537.     .u-1-of-2-bp4 {
  538.         width: 50% !important;
  539.     }
  540.     .u-1-of-3-bp4 {
  541.         width: 33.3333333333% !important;
  542.     }
  543.     .u-2-of-3-bp4 {
  544.         width: 66.6666666667% !important;
  545.     }
  546.     .u-1-of-4-bp4 {
  547.         width: 25% !important;
  548.     }
  549.     .u-3-of-4-bp4 {
  550.         width: 75% !important;
  551.     }
  552.     .u-1-of-5-bp4 {
  553.         width: 20% !important;
  554.     }
  555.     .u-2-of-5-bp4 {
  556.         width: 40% !important;
  557.     }
  558.     .u-3-of-5-bp4 {
  559.         width: 60% !important;
  560.     }
  561.     .u-4-of-5-bp4 {
  562.         width: 80% !important;
  563.     }
  564.     .u-1-of-6-bp4 {
  565.         width: 16.6666666667% !important;
  566.     }
  567.     .u-5-of-6-bp4 {
  568.         width: 83.3333333333% !important;
  569.     }
  570. }
  571.  
  572. /*------------------------------------*\
  573.   #MEDIA
  574. \*------------------------------------*/
  575.  
  576. /*
  577.     Media Queries
  578.     ---
  579.     EXAMPLE Media Queries for Responsive Design.
  580.     These examples override the primary ('mobile first') styles.
  581.     USE THEM INLINE!
  582. */
  583.  
  584. /* Extra small devices (portrait phones, less than 576px)
  585.    No media query since this is the default in mobile first design
  586. */
  587.  
  588. /* Small devices (landscape phones, 576px and up)
  589. @media (min-width: 576px) {}
  590. */
  591.  
  592. /* Medium devices (tablets, 768px and up)
  593. @media (min-width: 768px) {}
  594. */
  595.  
  596. /* Large devices (landscape tablets, desktops, 992px and up)
  597. @media (min-width: 992px) {}
  598. */
  599.  
  600. /* Extra large devices (large desktops, 1200px and up)
  601. @media (min-width: 1200px) {}
  602. */
  603.  
  604. /*
  605.     Print styles.
  606.     ---
  607.     Inlined to avoid the additional HTTP request:
  608.     http://www.phpied.com/delay-loading-your-print-css/
  609. */
  610.  
  611. @media print {
  612.     *,
  613.     *:before,
  614.     *:after {
  615.         background: transparent !important;
  616.         color: #000 !important;
  617.         /* Black prints faster:
  618.                                    http://www.sanbeiji.com/archives/953 */
  619.         box-shadow: none !important;
  620.         text-shadow: none !important;
  621.     }
  622.     a,
  623.     a:visited {
  624.         text-decoration: underline;
  625.     }
  626.     a[href]:after {
  627.         content: " (" attr(href) ")";
  628.     }
  629.     abbr[title]:after {
  630.         content: " (" attr(title) ")";
  631.     }
  632.     /*
  633.      * Don't show links that are fragment identifiers,
  634.      * or use the `javascript:` pseudo protocol
  635.      */
  636.     a[href^="#"]:after,
  637.     a[href^="javascript:"]:after {
  638.         content: "";
  639.     }
  640.     pre {
  641.         white-space: pre-wrap !important;
  642.     }
  643.     pre,
  644.     blockquote {
  645.         border: 1px solid #999;
  646.         page-break-inside: avoid;
  647.     }
  648.     /*
  649.      * Printing Tables:
  650.      * http://css-discuss.incutio.com/wiki/Printing_Tables
  651.      */
  652.     thead {
  653.         display: table-header-group;
  654.     }
  655.     tr,
  656.     img {
  657.         page-break-inside: avoid;
  658.     }
  659.     p,
  660.     h2,
  661.     h3 {
  662.         orphans: 3;
  663.         widows: 3;
  664.     }
  665.     h2,
  666.     h3 {
  667.         page-break-after: avoid;
  668.     }
  669. }