Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
U
ui-styleguide
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
VA-Fighters
ui-styleguide
Commits
5b398dcf
Commit
5b398dcf
authored
5 years ago
by
xaralis
Browse files
Options
Downloads
Patches
Plain Diff
Fix css purging during prod build
parent
4f6cb4c5
Branches
Branches containing commit
Tags
Tags containing commit
No related merge requests found
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
gulpfile.js
+1
-2
1 addition, 2 deletions
gulpfile.js
source/dist/style.pkgd.css
+1
-1
1 addition, 1 deletion
source/dist/style.pkgd.css
with
2 additions
and
3 deletions
gulpfile.js
+
1
−
2
View file @
5b398dcf
...
...
@@ -27,9 +27,8 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
"
./source/**/*.mustache
"
,
"
./source/**/*.json
"
,
"
./source/**/*.js
"
,
"
./source/**/*.vue
"
,
"
./public/**/*.html
"
,
"
./public/**/*.js
"
,
"
./public/**/*.vue
"
,
],
defaultExtractor
:
(
content
)
=>
content
.
match
(
/
[
A-Za-z0-9-_:
/]
+/g
)
||
[],
});
...
...
This diff is collapsed.
Click to expand it.
source/dist/style.pkgd.css
+
1
−
1
View file @
5b398dcf
@import
url
(
https
:
//
fonts
.
googleapis
.
com
/
css2
?
family
=
Bebas
+
Neue
&
family
=
Roboto
+
Condensed
:
wght
@
300
;
400
;
700
&
family
=
Roboto
:ital
,
wght
@
0
,
300
;
0
,
400
;
0
,
500
;
0
,
700
;
1
,
300
;
1
,
400
&
display
=
swap
);
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html
{
line-height
:
1.15
;
-webkit-text-size-adjust
:
100%
}
body
{
margin
:
0
}
main
{
display
:
block
}
h1
{
font-size
:
2em
;
margin
:
.67em
0
}
hr
{
box-sizing
:
content-box
;
height
:
0
;
overflow
:
visible
}
pre
{
font-family
:
monospace
,
monospace
;
font-size
:
1em
}
a
{
background-color
:
transparent
}
abbr
[
title
]
{
border-bottom
:
none
;
text-decoration
:
underline
;
-webkit-text-decoration
:
underline
dotted
;
text-decoration
:
underline
dotted
}
b
,
strong
{
font-weight
:
bolder
}
code
,
kbd
,
samp
{
font-family
:
monospace
,
monospace
;
font-size
:
1em
}
small
{
font-size
:
80%
}
sub
,
sup
{
font-size
:
75%
;
line-height
:
0
;
position
:
relative
;
vertical-align
:
baseline
}
sub
{
bottom
:
-.25em
}
sup
{
top
:
-.5em
}
img
{
border-style
:
none
}
button
,
input
,
optgroup
,
select
,
textarea
{
font-family
:
inherit
;
font-size
:
100%
;
line-height
:
1.15
;
margin
:
0
}
button
,
input
{
overflow
:
visible
}
button
,
select
{
text-transform
:
none
}
[
type
=
button
],[
type
=
reset
],[
type
=
submit
],
button
{
-webkit-appearance
:
button
}
[
type
=
button
]
::-moz-focus-inner
,[
type
=
reset
]
::-moz-focus-inner
,[
type
=
submit
]
::-moz-focus-inner
,
button
::-moz-focus-inner
{
border-style
:
none
;
padding
:
0
}
[
type
=
button
]
:-moz-focusring
,[
type
=
reset
]
:-moz-focusring
,[
type
=
submit
]
:-moz-focusring
,
button
:-moz-focusring
{
outline
:
1px
dotted
ButtonText
}
fieldset
{
padding
:
.35em
.75em
.625em
}
legend
{
box-sizing
:
border-box
;
color
:
inherit
;
display
:
table
;
max-width
:
100%
;
padding
:
0
;
white-space
:
normal
}
progress
{
vertical-align
:
baseline
}
textarea
{
overflow
:
auto
}
[
type
=
checkbox
],[
type
=
radio
]
{
box-sizing
:
border-box
;
padding
:
0
}
[
type
=
number
]
::-webkit-inner-spin-button
,[
type
=
number
]
::-webkit-outer-spin-button
{
height
:
auto
}
[
type
=
search
]
{
-webkit-appearance
:
textfield
;
outline-offset
:
-2px
}
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
::-webkit-file-upload-button
{
-webkit-appearance
:
button
;
font
:
inherit
}
details
{
display
:
block
}
summary
{
display
:
list-item
}
template
{
display
:
none
}
[
hidden
]
{
display
:
none
}
blockquote
,
dd
,
dl
,
figure
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
hr
,
p
,
pre
{
margin
:
0
}
button
{
background-color
:
transparent
;
background-image
:
none
;
padding
:
0
}
button
:focus
{
outline
:
1px
dotted
;
outline
:
5px
auto
-
webkit-focus-ring-color
}
fieldset
{
margin
:
0
;
padding
:
0
}
ol
,
ul
{
list-style
:
none
;
margin
:
0
;
padding
:
0
}
html
{
font-family
:
system-ui
,
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Roboto
,
"Helvetica Neue"
,
Arial
,
"Noto Sans"
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
,
"Noto Color Emoji"
;
line-height
:
1.5
}
*,
::after
,
::before
{
box-sizing
:
border-box
;
border-width
:
0
;
border-style
:
solid
;
border-color
:
currentColor
}
hr
{
border-top-width
:
1px
}
img
{
border-style
:
solid
}
textarea
{
resize
:
vertical
}
input
::-moz-placeholder
,
textarea
::-moz-placeholder
{
color
:
#a0aec0
}
input
:-ms-input-placeholder
,
textarea
:-ms-input-placeholder
{
color
:
#a0aec0
}
input
::-ms-input-placeholder
,
textarea
::-ms-input-placeholder
{
color
:
#a0aec0
}
input
::placeholder
,
textarea
::placeholder
{
color
:
#a0aec0
}
[
role
=
button
],
button
{
cursor
:
pointer
}
table
{
border-collapse
:
collapse
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-size
:
inherit
;
font-weight
:
inherit
}
a
{
color
:
inherit
;
text-decoration
:
inherit
}
button
,
input
,
optgroup
,
select
,
textarea
{
padding
:
0
;
line-height
:
inherit
;
color
:
inherit
}
code
,
kbd
,
pre
,
samp
{
font-family
:
SFMono-Regular
,
Menlo
,
Monaco
,
Consolas
,
"Liberation Mono"
,
"Courier New"
,
monospace
}
audio
,
canvas
,
embed
,
iframe
,
img
,
object
,
svg
,
video
{
display
:
block
;
vertical-align
:
middle
}
img
,
video
{
max-width
:
100%
;
height
:
auto
}
.container
{
width
:
100%
;
margin-right
:
auto
;
margin-left
:
auto
;
padding-right
:
1rem
;
padding-left
:
1rem
}
@media
(
min-width
:
576px
){
.container
{
max-width
:
576px
}}
@media
(
min-width
:
768px
){
.container
{
max-width
:
768px
}}
@media
(
min-width
:
992px
){
.container
{
max-width
:
992px
}}
@media
(
min-width
:
1200px
){
.container
{
max-width
:
1200px
;
padding-right
:
2rem
;
padding-left
:
2rem
}}
@media
(
min-width
:
1366px
){
.container
{
max-width
:
1366px
}}
:root
{
--color-transparent
:
transparent
;
--color-black
:
#000000
;
--color-white
:
#ffffff
;
--color-grey-50
:
#f7f7f7
;
--color-grey-100
:
#f3f3f3
;
--color-grey-125
:
#f0f0f0
;
--color-grey-150
:
#00000012
;
--color-grey-200
:
#adadad
;
--color-grey-300
:
#4c4c4c
;
--color-grey-400
:
#343434
;
--color-grey-500
:
#303132
;
--color-grey-600
:
#262626
;
--color-grey-700
:
#202020
;
--color-grey-800
:
#1f1f1f
;
--color-red-100
:
#d6151b
;
--color-red-200
:
rgb
(
193
,
19
,
24
);
--color-green-100
:
#29bc51
;
--color-green-200
:
rgb
(
37
,
169
,
73
);
--color-green-300
:
rgb
(
34
,
154
,
66
);
--color-brands-facebook
:
#067ceb
;
--color-brands-twitter
:
#00c9ff
;
--color-brands-gmail
:
#ec230e
;
--color-brands-linkedin
:
#0066a9
;
--sm
:
576px
;
--md
:
768px
;
--lg
:
992px
;
--xl
:
1200px
;
--2xl
:
1366px
;
--font-alt
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
--font-body
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
--font-condensed
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
--text-2xs
:
.65rem
;
--text-xs
:
.75rem
;
--text-sm
:
.875rem
;
--text-base
:
1rem
;
--text-lg
:
1.125rem
;
--text-xl
:
1.3rem
;
--text-2xl
:
1.6rem
;
--text-3xl
:
1.875rem
;
--text-4xl
:
2.45rem
;
--text-5xl
:
3rem
;
--text-6xl
:
4rem
;
--text-7xl
:
5.6rem
;
--text-8xl
:
6.5rem
;
--font-light
:
300
;
--font-normal
:
400
;
--font-medium
:
500
;
--font-bold
:
700
;
--leading-3
:
.75rem
;
--leading-4
:
1rem
;
--leading-5
:
1.25rem
;
--leading-6
:
1.5rem
;
--leading-7
:
1.75rem
;
--leading-8
:
2rem
;
--leading-9
:
2.25rem
;
--leading-10
:
2.5rem
;
--leading-none
:
1
;
--leading-tight
:
1.25
;
--leading-snug
:
1.375
;
--leading-normal
:
1.5
;
--leading-relaxed
:
1.625
;
--leading-loose
:
2
;
--leading-negative
:
0.9
;
--tracking-tighter
:
-0.05em
;
--tracking-tight
:
-0.025em
;
--tracking-normal
:
0
;
--tracking-wide
:
0.025em
;
--tracking-wider
:
0.05em
;
--tracking-widest
:
0.1em
;
--bg-auto
:
auto
;
--bg-cover
:
cover
;
--bg-contain
:
contain
;
--border-0
:
0
;
--border-2
:
2px
;
--border-4
:
4px
;
--border-8
:
8px
;
--border
:
1px
;
--rounded-none
:
0
;
--rounded-sm
:
0.125rem
;
--rounded
:
0.25rem
;
--rounded-md
:
0.375rem
;
--rounded-lg
:
0.5rem
;
--rounded-full
:
9999px
;
--w-0
:
0
;
--w-1
:
0.25rem
;
--w-2
:
0.5rem
;
--w-3
:
0.75rem
;
--w-4
:
1rem
;
--w-5
:
1.25rem
;
--w-6
:
1.5rem
;
--w-8
:
2rem
;
--w-10
:
2.5rem
;
--w-12
:
3rem
;
--w-16
:
4rem
;
--w-20
:
5rem
;
--w-24
:
6rem
;
--w-28
:
7rem
;
--w-32
:
8rem
;
--w-36
:
9rem
;
--w-40
:
10rem
;
--w-44
:
11rem
;
--w-48
:
12rem
;
--w-52
:
13rem
;
--w-56
:
14rem
;
--w-64
:
16rem
;
--w-80
:
20rem
;
--w-auto
:
auto
;
--w-px
:
1px
;
--w-0-5
:
0.125rem
;
--w-1-2
:
50%
;
--w-1-3
:
33.333333%
;
--w-2-3
:
66.666667%
;
--w-1-4
:
25%
;
--w-2-4
:
50%
;
--w-3-4
:
75%
;
--w-1-5
:
20%
;
--w-2-5
:
40%
;
--w-3-5
:
60%
;
--w-4-5
:
80%
;
--w-1-6
:
16.666667%
;
--w-2-6
:
33.333333%
;
--w-3-6
:
50%
;
--w-4-6
:
66.666667%
;
--w-5-6
:
83.333333%
;
--w-1-12
:
8.333333%
;
--w-2-12
:
16.666667%
;
--w-3-12
:
25%
;
--w-4-12
:
33.333333%
;
--w-5-12
:
41.666667%
;
--w-6-12
:
50%
;
--w-7-12
:
58.333333%
;
--w-8-12
:
66.666667%
;
--w-9-12
:
75%
;
--w-10-12
:
83.333333%
;
--w-11-12
:
91.666667%
;
--w-full
:
100%
;
--w-screen
:
100vw
;
--h-0
:
0
;
--h-1
:
0.25rem
;
--h-2
:
0.5rem
;
--h-3
:
0.75rem
;
--h-4
:
1rem
;
--h-5
:
1.25rem
;
--h-6
:
1.5rem
;
--h-8
:
2rem
;
--h-10
:
2.5rem
;
--h-12
:
3rem
;
--h-16
:
4rem
;
--h-20
:
5rem
;
--h-24
:
6rem
;
--h-28
:
7rem
;
--h-32
:
8rem
;
--h-36
:
9rem
;
--h-40
:
10rem
;
--h-44
:
11rem
;
--h-48
:
12rem
;
--h-52
:
13rem
;
--h-56
:
14rem
;
--h-64
:
16rem
;
--h-80
:
20rem
;
--h-auto
:
auto
;
--h-px
:
1px
;
--h-0-5
:
0.125rem
;
--h-full
:
100%
;
--h-screen
:
100vh
;
--min-w-0
:
0
;
--min-w-full
:
100%
;
--min-h-0
:
0
;
--min-h-full
:
100%
;
--min-h-screen
:
100vh
;
--max-w-none
:
none
;
--max-w-xs
:
20rem
;
--max-w-sm
:
24rem
;
--max-w-md
:
28rem
;
--max-w-lg
:
32rem
;
--max-w-xl
:
36rem
;
--max-w-2xl
:
42rem
;
--max-w-3xl
:
48rem
;
--max-w-4xl
:
56rem
;
--max-w-5xl
:
64rem
;
--max-w-6xl
:
72rem
;
--max-w-full
:
100%
;
--max-w-screen-sm
:
576px
;
--max-w-screen-md
:
768px
;
--max-w-screen-lg
:
992px
;
--max-w-screen-xl
:
1200px
;
--max-w-screen-2xl
:
1366px
;
--max-w-xxs
:
16rem
;
--max-h-full
:
100%
;
--max-h-screen
:
100vh
;
--p-0
:
0
;
--p-1
:
0.25rem
;
--p-2
:
0.5rem
;
--p-3
:
0.75rem
;
--p-4
:
1rem
;
--p-5
:
1.25rem
;
--p-6
:
1.5rem
;
--p-8
:
2rem
;
--p-10
:
2.5rem
;
--p-12
:
3rem
;
--p-16
:
4rem
;
--p-20
:
5rem
;
--p-24
:
6rem
;
--p-28
:
7rem
;
--p-32
:
8rem
;
--p-36
:
9rem
;
--p-40
:
10rem
;
--p-44
:
11rem
;
--p-48
:
12rem
;
--p-52
:
13rem
;
--p-56
:
14rem
;
--p-64
:
16rem
;
--p-80
:
20rem
;
--p-px
:
1px
;
--p-0-5
:
0.125rem
;
--m-0
:
0
;
--m-1
:
0.25rem
;
--m-2
:
0.5rem
;
--m-3
:
0.75rem
;
--m-4
:
1rem
;
--m-5
:
1.25rem
;
--m-6
:
1.5rem
;
--m-8
:
2rem
;
--m-10
:
2.5rem
;
--m-12
:
3rem
;
--m-16
:
4rem
;
--m-20
:
5rem
;
--m-24
:
6rem
;
--m-28
:
7rem
;
--m-32
:
8rem
;
--m-36
:
9rem
;
--m-40
:
10rem
;
--m-44
:
11rem
;
--m-48
:
12rem
;
--m-52
:
13rem
;
--m-56
:
14rem
;
--m-64
:
16rem
;
--m-80
:
20rem
;
--m-auto
:
auto
;
--m-px
:
1px
;
--m-0-5
:
0.125rem
;
--m--1
:
-0.25rem
;
--m--2
:
-0.5rem
;
--m--3
:
-0.75rem
;
--m--4
:
-1rem
;
--m--5
:
-1.25rem
;
--m--6
:
-1.5rem
;
--m--8
:
-2rem
;
--m--10
:
-2.5rem
;
--m--12
:
-3rem
;
--m--16
:
-4rem
;
--m--20
:
-5rem
;
--m--24
:
-6rem
;
--m--28
:
-7rem
;
--m--32
:
-8rem
;
--m--36
:
-9rem
;
--m--40
:
-10rem
;
--m--44
:
-11rem
;
--m--48
:
-12rem
;
--m--52
:
-13rem
;
--m--56
:
-14rem
;
--m--64
:
-16rem
;
--m--80
:
-20rem
;
--m--px
:
-1px
;
--m--0-5
:
-0.125rem
;
--shadows-xs
:
0
0
0
1px
rgba
(
0
,
0
,
0
,
0.05
);
--shadows-sm
:
0
1px
2px
0
rgba
(
0
,
0
,
0
,
0.05
);
--shadows
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.1
),
0
1px
2px
0
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-md
:
0
4px
6px
-1px
rgba
(
0
,
0
,
0
,
0.1
),
0
2px
4px
-1px
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-lg
:
0
10px
15px
-3px
rgba
(
0
,
0
,
0
,
0.1
),
0
4px
6px
-2px
rgba
(
0
,
0
,
0
,
0.05
);
--shadows-xl
:
0
20px
25px
-5px
rgba
(
0
,
0
,
0
,
0.1
),
0
10px
10px
-5px
rgba
(
0
,
0
,
0
,
0.04
);
--shadows-2xl
:
0
25px
50px
-12px
rgba
(
0
,
0
,
0
,
0.25
);
--shadows-inner
:
inset
0
2px
4px
0
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-outline
:
0
0
0
3px
rgba
(
66
,
153
,
225
,
0.5
);
--shadows-none
:
none
;
--z-0
:
0
;
--z-10
:
10
;
--z-20
:
20
;
--z-30
:
30
;
--z-40
:
40
;
--z-50
:
50
;
--z-auto
:
auto
;
--opacity-0
:
0
;
--opacity-25
:
0.25
;
--opacity-50
:
0.5
;
--opacity-75
:
0.75
;
--opacity-85
:
0.85
;
--opacity-100
:
1
}
.avatar
{
display
:
inline-block
;
text-align
:
center
;
border-radius
:
9999px
}
.avatar
img
{
border-radius
:
9999px
;
display
:
block
;
width
:
100%
}
.avatar--xs
{
width
:
3rem
}
.avatar--sm
{
width
:
5rem
}
.avatar--md
{
width
:
6rem
}
.avatar--lg
{
width
:
7rem
}
.avatar--xl
{
width
:
9rem
}
.avatar--2xl
{
width
:
12rem
}
.avatar--bordered
img
{
--border-opacity
:
1
;
border-color
:
#fff
;
border-color
:
rgba
(
255
,
255
,
255
,
var
(
--border-opacity
));
border-width
:
8px
}
.btn
{
display
:
inline-block
;
text-align
:
center
;
font-weight
:
400
;
max-width
:
20rem
}
.btn
:hover
{
text-decoration
:
none
}
.btn.btn--hoveractive
:hover
.btn__body
,
.btn.btn--hoveractive
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--hoveractive
:hover
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#262626
;
border-color
:
rgba
(
38
,
38
,
38
,
var
(
--border-opacity
))}
.btn.btn--hoveractive.btn--fading
:hover
.btn__body
,
.btn.btn--hoveractive.btn--fading
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--hoveractive.btn--fading
:hover
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.btn__body
,
.btn__icon
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn__icon
{
border-left-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.btn__body
{
display
:
flex
;
height
:
100%
;
align-items
:
center
;
justify-content
:
center
;
padding
:
.75em
2em
}
.btn.btn--icon
.btn__body-wrap
{
display
:
flex
}
.btn.btn--icon
.btn__icon
{
border-left-width
:
1px
;
padding-left
:
1rem
;
padding-right
:
1rem
;
display
:
flex
;
align-items
:
center
}
.btn.btn--icon
.btn__icon
img
{
width
:
1rem
}
.btn.btn--icon.btn--hoveractive
:hover
.btn__icon
i
,
.btn.btn--icon.btn--hoveractive
:hover
.btn__icon
svg
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
fill
:
#fff
}
.btn.btn--inverted-icon
.btn__icon
{
order
:
-9999
;
border-right-width
:
1px
;
border-left-width
:
0
}
.btn__inline-icon
{
margin-right
:
.5rem
}
.btn.btn--black
.btn__body
,
.btn.btn--black
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--black
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#343434
;
border-color
:
rgba
(
52
,
52
,
52
,
var
(
--border-opacity
));
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
))}
.btn.btn--black.btn--hoveractive
:hover
.btn__body
,
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
i
,
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
svg
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
fill
:
#000
}
.btn.btn--grey-125
.btn__body
,
.btn.btn--grey-125
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--grey-125
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--grey-300
.btn__body
,
.btn.btn--grey-300
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#4c4c4c
;
background-color
:
rgba
(
76
,
76
,
76
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-300
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--grey-500
.btn__body
,
.btn.btn--grey-500
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#303132
;
background-color
:
rgba
(
48
,
49
,
50
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-500
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.btn.btn--grey-700
.btn__body
,
.btn.btn--grey-700
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-700
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#1f1f1f
;
border-color
:
rgba
(
31
,
31
,
31
,
var
(
--border-opacity
))}
.btn.btn--grey-800
.btn__body
,
.btn.btn--grey-800
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-800
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.btn.btn--green-100
.btn__body
,
.btn.btn--green-100
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--green-100
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#25a949
;
border-color
:
rgba
(
37
,
169
,
73
,
var
(
--border-opacity
))}
.btn.btn--red-100
.btn__body
,
.btn.btn--red-100
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--red-100
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#c11318
;
border-color
:
rgba
(
193
,
19
,
24
,
var
(
--border-opacity
))}
.btn.btn--white
.btn__body
,
.btn.btn--white
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--white
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.btn.btn--condensed
.btn__body
{
padding
:
.75em
1em
}
.btn.btn--fullwidth
{
width
:
100%
;
max-width
:
100%
}
.btn.btn--fullwidth
.btn__body-wrap
{
width
:
100%
;
max-width
:
100%
}
.btn.btn--fullwidth
.btn__body
{
flex
:
1
}
.btn.btn--autowidth
{
width
:
auto
}
.btn.btn--overlay
.btn__inline-icon
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.btn.btn--overlay.btn--overlay-white
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-white
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-white
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#d6151b
;
color
:
rgba
(
214
,
21
,
27
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#067ceb
;
color
:
rgba
(
6
,
124
,
235
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#067ceb
;
background-color
:
rgba
(
6
,
124
,
235
,
var
(
--bg-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.card__body
{
padding
:
2rem
}
.card--hoveractive
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.card--hoveractive
:hover
{
box-shadow
:
0
10px
13px
-6px
rgba
(
221
,
221
,
221
,
.43
),
0
21px
33px
3px
rgba
(
221
,
221
,
221
,
.37
),
0
8px
40px
7px
rgba
(
221
,
221
,
221
,
.35
)}
.card-headline
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
;
overflow-wrap
:
break-word
}
.card-body-text
{
font-weight
:
300
;
line-height
:
1.5
;
font-size
:
.875rem
;
overflow-wrap
:
break-word
}
.contact-line
i
{
margin-right
:
.5rem
}
.contact-line.contact-line--responsive
i
{
display
:
none
}
@media
(
min-width
:
992px
){
.contact-line.contact-line--responsive
i
{
display
:
inline-block
}}
.container--default
{
max-width
:
1200px
}
.container--wide
{
max-width
:
1430px
}
.container-padding--zero
{
margin-left
:
-1rem
;
margin-right
:
-1rem
}
@media
(
min-width
:
1200px
){
.container-padding--zero
{
margin-left
:
-2rem
;
margin-right
:
-2rem
}}
.content-block
figure
,
.figure
{
position
:
relative
}
.content-block
figure
img
,
.figure
img
{
width
:
100%
}
.content-block
figure
figcaption
,
.figure
figcaption
{
position
:
absolute
;
display
:
flex
;
align-items
:
flex-end
;
z-index
:
10
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
padding-left
:
1rem
;
padding-right
:
1rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-size
:
.875rem
;
line-height
:
1.25
}
.content-block
figure
figcaption
:before
,
.figure
figcaption
:before
{
position
:
absolute
;
display
:
block
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
pointer-events
:
none
;
opacity
:
1
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
content
:
""
;
z-index
:
-1
;
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
40%
,
rgba
(
0
,
0
,
0
,
.8
))}
@media
(
min-width
:
576px
){
.content-block
figure
figcaption
:before
,
.figure
figcaption
:before
{
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
60%
,
rgba
(
0
,
0
,
0
,
.8
))}}
.content-block
figure
:focus
figcaption
:before
,
.content-block
figure
:hover
figcaption
:before
,
.figure
:focus
figcaption
:before
,
.figure
:hover
figcaption
:before
{
opacity
:
0
}
.flag
{
display
:
inline-block
;
position
:
relative
;
padding-top
:
1.5rem
;
padding-bottom
:
1.5rem
;
padding-left
:
2rem
;
padding-right
:
1.5rem
;
margin-right
:
2.5rem
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.flag
:after
{
position
:
absolute
;
width
:
2.5rem
;
height
:
100%
;
content
:
""
;
left
:
100%
;
top
:
0
;
background
:
inherit
;
-webkit-clip-path
:
polygon
(
-2px
-1px
,
100%
-1px
,
60%
50%
,
100%
100.7%
,
-2px
100.7%
);
clip-path
:
polygon
(
-2px
-1px
,
100%
-1px
,
60%
50%
,
100%
100.7%
,
-2px
100.7%
)}
.content-block
.head-alt-xl
,
.head-alt-xl
{
font-size
:
5.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-lg
,
.head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-md
,
.head-alt-md
{
font-size
:
2.45rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-base
,
.head-alt-base
{
font-size
:
1.875rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-sm
,
.head-alt-sm
{
font-size
:
1.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-xs
,
.head-alt-xs
{
font-size
:
1.3rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-2xs
,
.head-alt-2xs
{
font-size
:
1.125rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-base
,
.head-base
{
font-size
:
1.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-sm
,
.head-sm
{
font-size
:
1.6rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-xs
,
.head-xs
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-2xs
,
.head-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-heavy-base
,
.head-heavy-base
{
font-size
:
1.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-sm
,
.head-heavy-sm
{
font-size
:
1.6rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-xs
,
.head-heavy-xs
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-2xs
,
.head-heavy-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-allcaps-2xs
,
.head-allcaps-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-3xs
,
.head-allcaps-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-4xs
,
.head-allcaps-4xs
{
font-size
:
.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-2xs
,
.head-allcaps-heavy-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-3xs
,
.head-allcaps-heavy-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-4xs
,
.head-allcaps-heavy-4xs
{
font-size
:
.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
hr
:not
(
.hr--unstyled
)
{
border-top-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
));
margin-top
:
1rem
;
margin-bottom
:
1rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
)
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
}
hr
:not
(
.hr--unstyled
)
.hr--big
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
).
hr--big
{
margin-top
:
4rem
;
margin-bottom
:
4rem
}
}
hr
:not
(
.hr--unstyled
)
.hr--condensed
{
margin-top
:
.5rem
;
margin-bottom
:
.5rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
).
hr--condensed
{
margin-top
:
1rem
;
margin-bottom
:
1rem
}
}
.content-block
ol
,
.ordered-list
{
padding-left
:
1rem
}
.content-block
ul
li
,
.unordered-list
li
{
position
:
relative
;
display
:
flex
;
align-items
:
center
}
.content-block
ul
li
:before
,
.unordered-list
li
:before
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
padding-right
:
.5rem
;
font-family
:
"Font Awesome 5 Pro"
;
content
:
"\f45c"
;
font-size
:
7px
;
font-weight
:
600
}
.content-block
ul
.text-sm
li
:before
,
.unordered-list.text-sm
li
:before
{
font-size
:
5px
}
.unordered-list--linked
li
:after
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
padding-left
:
.5rem
;
margin-left
:
auto
;
font-family
:
"Font Awesome 5 Pro"
;
content
:
"\f054"
;
font-size
:
10px
;
font-weight
:
300
}
.unordered-list--linked.text-sm
li
:after
{
font-size
:
8px
}
.content-block
ol
,
.ordered-list
{
list-style-type
:
decimal
}
.content-block
p
,
.para
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
1.5
}
.content-block
blockquote
,
.quote
{
font-style
:
italic
;
line-height
:
1.625
;
border-left-width
:
2px
;
--border-opacity
:
1
;
border-color
:
#000
;
border-color
:
rgba
(
0
,
0
,
0
,
var
(
--border-opacity
));
padding-left
:
1rem
;
padding-top
:
.5rem
;
padding-bottom
:
.5rem
;
margin-left
:
1.5rem
;
width
:
80%
;
max-width
:
60em
}
.social-icon
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
border-radius
:
.375rem
;
text-decoration
:
none
}
.social-icon
,
.social-icon
i
,
.social-icon
i
:before
,
.social-icon
:hover
{
text-decoration
:
none
}
.social-icon--4
{
width
:
1.5rem
;
height
:
1.5rem
;
line-height
:
1.5rem
}
.social-icon--5
{
width
:
2rem
;
height
:
2rem
;
line-height
:
2rem
}
.social-icon--6
{
width
:
3rem
;
height
:
3rem
;
line-height
:
3rem
}
.super-button
{
display
:
inline-flex
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-size
:
2.45rem
;
padding-top
:
2rem
;
padding-bottom
:
2rem
;
padding-left
:
1rem
;
padding-right
:
1rem
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.super-button
:hover
{
text-decoration
:
none
}
@media
(
min-width
:
768px
){
.super-button
{
padding-left
:
1.5rem
;
padding-right
:
1.5rem
}}
.super-button__body
{
flex-grow
:
1
}
.super-button__icon
{
margin-left
:
1rem
}
.content-block
table
td
,
.content-block
table
th
,
.content-block
table
thead
td
,
.table
td
,
.table
th
,
.table
thead
td
{
padding-left
:
1.5rem
;
padding-right
:
1.5rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
}
.content-block
table
th
,
.content-block
table
thead
td
,
.table
th
,
.table
thead
td
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.content-block
table
tr
:nth-child
(
even
)
td
,
.table--striped
tr
:nth-child
(
even
)
td
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
))}
.content-block
table
th
,
.content-block
table
thead
td
,
.table--bordered
th
,
.table--bordered
thead
td
{
border-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.content-block
table
td
,
.table--bordered
td
{
border-width
:
1px
;
border-color
:
#00000012
}
.table--condensed
td
,
.table--condensed
th
,
.table--condensed
thead
td
{
padding
:
.5rem
}
.article-card
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
}
.article-card-cover
{
position
:
relative
;
height
:
12rem
}
.article-card-cover
img
{
display
:
block
;
-o-object-fit
:
cover
;
object-fit
:
cover
;
width
:
100%
;
height
:
100%
}
.article-card-cover
:before
{
position
:
absolute
;
display
:
block
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
pointer-events
:
none
;
content
:
""
;
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
40%
,
rgba
(
0
,
0
,
0
,
.8
))}
.article-card-cover__details
{
position
:
absolute
;
left
:
0
;
bottom
:
0
;
padding
:
1rem
}
.article-card-sharing
{
margin-bottom
:
1rem
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
opacity
:
0
}
.article-card
:hover
.article-card-sharing
{
opacity
:
1
}
.article-card-meta
{
font-size
:
.875rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
--text-opacity
:
0.85
}
.article-card-meta__item
:not
(
:first-child
)
{
margin-left
:
.5rem
}
.article-card-meta__item
:not
(
:first-child
)
:before
{
content
:
""
;
padding-right
:
.5rem
;
border-left-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#fff
;
border-color
:
rgba
(
255
,
255
,
255
,
var
(
--border-opacity
));
--border-opacity
:
0.85
}
.article-card__body
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
padding
:
1rem
}
.article-card__category-button
{
margin-right
:
.25rem
;
margin-bottom
:
.25rem
}
.badge
{
display
:
flex
;
align-items
:
center
;
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
}
.badge
.badge__avatar
{
margin-right
:
1.5rem
;
flex-shrink
:
0
}
.badge
.badge__body
{
text-align
:
left
}
.badge
.badge__title
{
display
:
block
}
.badge
.badge__occupation
{
text-transform
:
uppercase
;
font-size
:
.875rem
;
max-width
:
24rem
;
margin-top
:
.25rem
;
margin-bottom
:
.25rem
}
.badge
.badge__link
{
font-size
:
.875rem
;
font-weight
:
300
;
display
:
block
;
width
:
100%
}
.badge
.badge__link
:not
(
:first-child
)
{
padding-top
:
.25rem
}
.badge.badge--condensed
.badge__avatar
{
margin-right
:
1rem
}
.badge.badge--condensed
.badge__occupation
{
text-transform
:
uppercase
;
font-size
:
.875rem
;
max-width
:
24rem
;
margin-top
:
0
;
margin-bottom
:
0
}
.banner
{
padding-left
:
1rem
;
padding-right
:
1rem
;
padding-top
:
2rem
;
padding-bottom
:
2rem
;
display
:
flex
;
flex-wrap
:
wrap
;
flex-direction
:
column
}
@media
(
min-width
:
992px
){
.banner
{
padding-left
:
2rem
;
padding-right
:
2rem
}}
.banner__icon
{
font-size
:
3rem
}
@media
(
min-width
:
768px
){
.banner__icon
{
font-size
:
4rem
}}
@media
(
min-width
:
992px
){
.banner__icon
{
font-size
:
9rem
}}
.banner__body
{
margin-top
:
auto
}
.banner__cta
{
margin-top
:
2rem
}
.calendar-table-row
{
border-bottom-width
:
1px
;
border-color
:
#00000012
}
.calendar-table-row
:first-of-type
{
border-top-width
:
1px
}
.calendar-table-row--standalone
{
border-left-width
:
1px
}
.calendar-table-row__col
{
height
:
100%
;
border-right-width
:
1px
;
border-color
:
#00000012
;
padding
:
.5rem
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
}
.calendar-table-row__col
:first-child
{
border-left-width
:
1px
}
@media
(
min-width
:
1200px
){
.calendar-table-row__col
:first-child
{
border-left-width
:
0
}}
.candidate-card__body
{
display
:
grid
;
grid-template-areas
:
"avatar bio"
"affiliation affiliation"
"social social"
}
.candidate-card__avatar
{
position
:
relative
;
width
:
6rem
;
padding-left
:
1rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
grid-area
:
avatar
}
.candidate-card__position
{
width
:
2rem
;
height
:
2rem
;
position
:
absolute
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-size
:
1rem
;
border-radius
:
9999px
;
font-weight
:
400
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
text-align
:
center
;
top
:
1rem
;
left
:
.5rem
;
line-height
:
2rem
}
.candidate-card__bio
{
padding
:
1rem
}
.candidate-card__affiliation
{
font-size
:
.875rem
;
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
));
display
:
flex
;
border-top-width
:
1px
;
border-bottom-width
:
1px
;
border-color
:
#00000012
}
.candidate-card__affiliation
>
div
{
padding-top
:
.5rem
;
padding-bottom
:
.5rem
;
padding-left
:
1rem
;
padding-right
:
1rem
;
display
:
flex
;
align-items
:
center
}
.candidate-card__affiliation
>
div
:not
(
:first-child
)
{
border-left-width
:
1px
;
border-color
:
#00000012
}
.candidate-card__affiliation
>
div
:last-child
{
flex
:
1
}
.candidate-card__affiliation
>
div
:first-child
{
width
:
6rem
;
justify-content
:
center
}
@media
(
min-width
:
768px
){
.candidate-card__affiliation
>
div
{
justify-content
:
center
}
.candidate-card__affiliation
>
div
:first-child
{
width
:
auto
;
text-align
:
left
}}
.candidate-card__bio
{
grid-area
:
bio
}
.candidate-card__affiliation
{
grid-area
:
affiliation
}
.candidate-card__social
{
padding
:
1rem
;
grid-area
:
social
}
@media
(
min-width
:
768px
){
.candidate-card__social
{
text-align
:
center
}}
@media
(
min-width
:
576px
){
.candidate-card
{
padding-top
:
3rem
}
.candidate-card__body
{
text-align
:
center
;
grid-template-areas
:
"avatar"
"bio"
"affiliation"
"social"
}
.candidate-card__bio
{
padding
:
1rem
}
.candidate-card__avatar
{
display
:
inline-block
;
position
:
relative
;
margin
:
auto
;
width
:
8rem
;
padding-top
:
0
;
padding-bottom
:
0
;
margin-top
:
-3rem
}
.candidate-card__position
{
width
:
2.5rem
;
height
:
2.5rem
;
font-size
:
1.3rem
;
top
:
1.75rem
;
left
:
-.5rem
;
line-height
:
2.5rem
}}
.candidate-table-row
{
position
:
relative
;
width
:
100%
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
display
:
grid
;
align-items
:
center
;
grid-template-areas
:
"position avatar name"
"position avatar bio"
"position avatar affiliation"
}
.candidate-table-row
:after
{
content
:
''
;
position
:
absolute
;
z-index
:
10
;
width
:
100%
;
height
:
100%
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
box-shadow
:
0
0
0
0
rgba
(
221
,
221
,
221
,
.43
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.37
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.35
)}
.candidate-table-row
:hover:after
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}
.candidate-table-row__position
{
padding-left
:
1rem
;
padding-right
:
1.5rem
;
grid-area
:
position
}
.candidate-table-row__avatar
{
width
:
4rem
;
grid-area
:
avatar
}
.candidate-table-row__name
{
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
name
}
.candidate-table-row__bio
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
padding-top
:
.25rem
;
padding-bottom
:
.25rem
;
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
bio
}
.candidate-table-row__affiliation
{
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-start
;
white-space
:
nowrap
;
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
affiliation
}
@media
(
min-width
:
768px
){
.candidate-table-row
{
padding-top
:
.25rem
;
padding-bottom
:
.25rem
;
grid-template-columns
:
auto
auto
auto
auto
1fr
;
grid-template-areas
:
"position avatar name bio affiliation"
}
.candidate-table-row__avatar
{
width
:
2.5rem
}
.candidate-table-row__name
{
padding-left
:
2rem
;
padding-right
:
2rem
}
.candidate-table-row__position
{
padding-left
:
4rem
}
.candidate-table-row__bio
{
border-left-width
:
1px
;
border-color
:
#00000012
;
padding-top
:
0
;
padding-bottom
:
0
;
padding-left
:
2rem
;
padding-right
:
2rem
}
.candidate-table-row__affiliation
{
padding-left
:
2rem
;
padding-right
:
4rem
}}
.content-block
h1
,
.content-block
h2
,
.content-block
h3
,
.content-block
h4
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
h5
,
.content-block
h6
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
h1
,
.content-block
h2
,
.content-block
h3
{
margin-bottom
:
.4em
}
.content-block
h1
:not
(
:first-child
),
.content-block
h2
:not
(
:first-child
),
.content-block
h3
:not
(
:first-child
)
{
margin-top
:
.95em
}
.content-block
h4
,
.content-block
h5
,
.content-block
h6
{
margin-bottom
:
.3em
}
.content-block
h4
:not
(
:first-child
),
.content-block
h5
:not
(
:first-child
),
.content-block
h6
:not
(
:first-child
)
{
margin-top
:
.95em
}
.content-block
h1
{
font-size
:
1.875rem
}
.content-block
h2
{
font-size
:
1.6rem
}
.content-block
h3
{
font-size
:
1.3rem
}
.content-block
h4
{
font-size
:
1.125rem
}
.content-block
h5
{
font-size
:
1rem
}
.content-block
h6
{
font-size
:
.875rem
}
.content-block
ol
,
.content-block
p
,
.content-block
ul
{
line-height
:
1.5
}
.content-block
p
:not
(
:last-child
)
{
margin-bottom
:
1em
}
.content-block
strong
{
font-weight
:
700
}
.content-block
small
{
font-size
:
.875rem
}
.content-block
blockquote
:not
(
:first-child
),
.content-block
figure
:not
(
:first-child
),
.content-block
iframe
:not
(
:first-child
),
.content-block
ol
:not
(
:first-child
),
.content-block
table
:not
(
:first-child
),
.content-block
ul
:not
(
:first-child
)
{
margin-top
:
1em
}
.content-block
blockquote
:not
(
:last-child
),
.content-block
figure
:not
(
:last-child
),
.content-block
iframe
:not
(
:last-child
),
.content-block
ol
:not
(
:last-child
),
.content-block
table
:not
(
:last-child
),
.content-block
ul
:not
(
:last-child
)
{
margin-bottom
:
1em
}
.flip-clock
{
text-align
:
center
;
perspective
:
600px
}
.flip-clock__piece
{
position
:
relative
;
display
:
inline-flex
;
justify-content
:
center
;
margin-left
:
.25rem
;
margin-right
:
.25rem
}
.flip-clock__slot
{
position
:
absolute
;
display
:
block
;
bottom
:
0
;
z-index
:
50
;
transform
:
translateY
(
55%
);
text-shadow
:
0
0
1.5rem
#000
}
.flip-card
{
display
:
block
;
position
:
relative
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
padding-bottom
:
.85em
}
.flip-card
:after
{
position
:
absolute
;
content
:
""
;
position
:
absolute
;
width
:
90%
;
height
:
108%
;
top
:
-4%
;
left
:
5%
;
z-index
:
-1
}
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
display
:
block
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
height
:
.85em
;
padding
:
.35em
.1em
.4em
;
backface-visibility
:
hidden
;
-webkit-backface-visibility
:
hidden
;
transform-style
:
preserve-3d
}
.flip-card
:after
,
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
border-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__top
{
border-bottom-width
:
0
}
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
width
:
1.9em
}
.flip-card__back-bottom
,
.flip-card__bottom
{
position
:
absolute
;
left
:
0
;
pointer-events
:
none
;
left
:
0
;
pointer-events
:
none
;
overflow
:
hidden
;
z-index
:
2
}
.flip-card__back-bottom
{
z-index
:
1
}
.flip-card__back-bottom
:after
,
.flip-card__bottom
:after
{
display
:
block
;
margin-top
:
-.85em
}
.flip-card__back-bottom
:after
,
.flip-card__back
:before
,
.flip-card__bottom
:after
{
content
:
attr
(
data-value
)}
.flip-card__back
{
position
:
absolute
;
top
:
0
;
height
:
100%
;
left
:
0
;
pointer-events
:
none
}
.flip-card__back
:before
{
position
:
relative
;
overflow
:
hidden
;
z-index
:
-1
}
.flip
.flip-card__back
:before
{
z-index
:
1
;
-webkit-animation
:
flipTop
.3s
cubic-bezier
(
.37
,
.01
,
.94
,
.35
);
animation
:
flipTop
.3s
cubic-bezier
(
.37
,
.01
,
.94
,
.35
);
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
transform-origin
:
center
bottom
}
.flip
.flip-card__bottom
{
transform-origin
:
center
top
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation
:
flipBottom
.6s
cubic-bezier
(
.15
,
.45
,
.28
,
1
);
animation
:
flipBottom
.6s
cubic-bezier
(
.15
,
.45
,
.28
,
1
)}
@keyframes
flipTop
{
0%
{
transform
:
rotateX
(
0
);
z-index
:
2
}
0%
,
99%
{
opacity
:
1
}
100%
{
transform
:
rotateX
(
-90deg
);
opacity
:
0
}}
@keyframes
flipBottom
{
0%
,
50%
{
z-index
:
-1
;
transform
:
rotateX
(
90deg
);
opacity
:
0
}
51%
{
opacity
:
1
}
100%
{
opacity
:
1
;
transform
:
rotateX
(
0
);
z-index
:
5
}}
.pagination
{
display
:
inline-block
;
margin-left
:
auto
;
margin-right
:
auto
}
.pagination-container
{
text-align
:
center
;
padding-top
:
4rem
;
padding-bottom
:
2rem
}
.switch
{
display
:
inline-flex
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
padding
:
.25rem
}
.switch__item
{
padding-top
:
1rem
;
padding-bottom
:
1rem
;
padding-left
:
2rem
;
padding-right
:
2rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
font-size
:
1.3rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
text-align
:
center
}
.switch__item
:hover
{
text-decoration
:
none
;
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
))}
.switch__item.switch__item--active
,
.switch__item.switch__item--active
:hover
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
))}
.candidate-card-list
{
display
:
grid
;
grid-auto-flow
:
row
;
grid-gap
:
0
;
gap
:
0
;
grid-row-gap
:
1rem
;
row-gap
:
1rem
}
.candidate-card-list__item-wrapper
{
padding-left
:
.5rem
;
padding-right
:
.5rem
;
border-right-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.candidate-table
{
position
:
relative
}
.candidate-table
.candidate-table-row
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
.candidate-table
.candidate-table-row
:nth-child
(
odd
)
{
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
))}
.candidate-table.candidate-table--fadeout
:after
{
content
:
""
;
background-image
:
linear-gradient
(
to
top
,
#fff
0
,
rgba
(
255
,
255
,
255
,
0
)
100%
);
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.footer__main
{
display
:
grid
;
grid-template-areas
:
"brand"
"social"
"main-links"
}
.footer__brand
{
grid-area
:
brand
}
.footer__social
{
grid-area
:
social
}
.footer__main-links
{
grid-area
:
main-links
}
@media
(
min-width
:
992px
){
.footer__main
{
grid-gap
:
1rem
;
gap
:
1rem
;
grid-template-areas
:
"brand main-links social"
;
grid-template-columns
:
25%
1fr
25%
}}
.footer-contacts
{
grid-gap
:
1rem
;
gap
:
1rem
;
grid-template-columns
:
repeat
(
1
,
minmax
(
0
,
1fr
))}
@media
(
min-width
:
992px
){
.footer-contacts
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}}
@media
(
min-width
:
1200px
){
.footer-contacts
{
grid-template-columns
:
1fr
1fr
1fr
auto
}}
.hero
{
padding-top
:
1rem
;
padding-bottom
:
1rem
}
@media
(
min-width
:
768px
){
.hero
{
padding-top
:
6rem
;
padding-bottom
:
6rem
}}
.hero--image
{
background
:
linear-gradient
(
rgba
(
0
,
0
,
0
,
.3
),
rgba
(
0
,
0
,
0
,
.3
)),
var
(
--image-url
);
position
:
relative
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
center
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.navbar
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
overflow
:
hidden
}
.navbar__content
{
display
:
grid
;
align-items
:
center
;
grid-template-areas
:
"brand menutoggle"
"main main"
"external external"
"actions actions"
;
grid-template-columns
:
2rem
1fr
}
.navbar__brand
{
grid-area
:
brand
}
.navbar__external
{
grid-area
:
external
}
.navbar__main
{
grid-area
:
main
}
.navbar__actions
{
grid-area
:
actions
}
.navbar__menutoggle
{
grid-area
:
menutoggle
}
.navbar__section--expandable
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
padding-left
:
2rem
;
padding-right
:
2rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
margin
:
0
-2rem
}
.navbar-menu__item
{
display
:
block
}
.navbar-menu__link
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
uppercase
;
line-height
:
2
}
.navbar-menu__submenu
.navbar-menu__link
{
font-size
:
1.125rem
;
--text-opacity
:
1
;
color
:
#adadad
;
color
:
rgba
(
173
,
173
,
173
,
var
(
--text-opacity
));
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
none
;
line-height
:
1.5
;
padding-left
:
1rem
}
.navbar-menu__link
,
.navbar-menu__link
:hover
{
text-decoration
:
none
}
.navbar-menu__submenu-toggle
{
display
:
flex
;
align-items
:
center
}
.navbar-menu__submenu-toggle
:after
{
margin-bottom
:
-.125rem
;
margin-left
:
auto
;
font-weight
:
300
;
font-size
:
.875rem
;
content
:
"\f078"
;
font-family
:
"Font Awesome 5 Pro"
}
@media
(
min-width
:
992px
){
.navbar
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.navbar__content
{
grid-template-areas
:
"brand external actions"
"brand main actions"
;
grid-template-columns
:
8rem
1fr
auto
}
.navbar__section--expandable
{
background-color
:
transparent
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
padding-bottom
:
0
;
margin
:
0
}
.navbar-menu__item
{
display
:
inline-block
}
.navbar-menu__item
:not
(
:first-child
)
{
margin-left
:
1rem
}
.navbar-menu__link
{
font-size
:
1.125rem
;
line-height
:
1.5
}
.navbar-menu__submenu-toggle
:after
{
margin-left
:
.5rem
}}
@media
(
min-width
:
1366px
){
.navbar-menu__item
:not
(
:first-child
)
{
margin-left
:
1.5rem
}
.navbar-menu__link
{
font-size
:
1.3rem
}}
.subnav
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
padding-top
:
.5rem
;
padding-bottom
:
.5rem
}
.candidate-detail__hero
{
z-index
:
-1
}
.candidate-detail__sidebar
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
@media
(
min-width
:
992px
){
.candidate-detail__sidebar
{
margin-top
:
-6rem
}}
.candidate-detail__avatar
{
margin-top
:
-9rem
}
@media
(
min-width
:
992px
){
.candidate-detail__avatar
{
margin-top
:
-11rem
}}
.space-y-2
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
.5rem
*
var
(
--space-y-reverse
))}
.space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-4
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
1rem
*
var
(
--space-y-reverse
))}
.space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-8
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
2rem
*
var
(
--space-y-reverse
))}
.space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-12
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
3rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
3rem
*
var
(
--space-y-reverse
))}
.space-y-16
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
4rem
*
var
(
--space-y-reverse
))}
.space-x-0
\
/
5
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.125rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.125rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.divide-x
>
:not
(
template
)~
:not
(
template
)
{
--divide-x-reverse
:
0
;
border-right-width
:
calc
(
1px
*
var
(
--divide-x-reverse
));
border-left-width
:
calc
(
1px
*
calc
(
1
-
var
(
--divide-x-reverse
)))}
.bg-black
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
))}
.bg-white
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
.bg-grey-50
{
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
))}
.bg-grey-100
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
))}
.bg-grey-125
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
))}
.bg-grey-150
{
background-color
:
#00000012
}
.bg-grey-200
{
--bg-opacity
:
1
;
background-color
:
#adadad
;
background-color
:
rgba
(
173
,
173
,
173
,
var
(
--bg-opacity
))}
.bg-grey-300
{
--bg-opacity
:
1
;
background-color
:
#4c4c4c
;
background-color
:
rgba
(
76
,
76
,
76
,
var
(
--bg-opacity
))}
.bg-grey-400
{
--bg-opacity
:
1
;
background-color
:
#343434
;
background-color
:
rgba
(
52
,
52
,
52
,
var
(
--bg-opacity
))}
.bg-grey-500
{
--bg-opacity
:
1
;
background-color
:
#303132
;
background-color
:
rgba
(
48
,
49
,
50
,
var
(
--bg-opacity
))}
.bg-grey-600
{
--bg-opacity
:
1
;
background-color
:
#262626
;
background-color
:
rgba
(
38
,
38
,
38
,
var
(
--bg-opacity
))}
.bg-grey-700
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
))}
.bg-grey-800
{
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
))}
.bg-red-100
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
))}
.bg-red-200
{
--bg-opacity
:
1
;
background-color
:
#c11318
;
background-color
:
rgba
(
193
,
19
,
24
,
var
(
--bg-opacity
))}
.bg-green-100
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
))}
.bg-green-200
{
--bg-opacity
:
1
;
background-color
:
#25a949
;
background-color
:
rgba
(
37
,
169
,
73
,
var
(
--bg-opacity
))}
.bg-green-300
{
--bg-opacity
:
1
;
background-color
:
#229a42
;
background-color
:
rgba
(
34
,
154
,
66
,
var
(
--bg-opacity
))}
.bg-brands-facebook
{
--bg-opacity
:
1
;
background-color
:
#067ceb
;
background-color
:
rgba
(
6
,
124
,
235
,
var
(
--bg-opacity
))}
.bg-brands-twitter
{
--bg-opacity
:
1
;
background-color
:
#00c9ff
;
background-color
:
rgba
(
0
,
201
,
255
,
var
(
--bg-opacity
))}
.bg-brands-gmail
{
--bg-opacity
:
1
;
background-color
:
#ec230e
;
background-color
:
rgba
(
236
,
35
,
14
,
var
(
--bg-opacity
))}
.bg-brands-linkedin
{
--bg-opacity
:
1
;
background-color
:
#0066a9
;
background-color
:
rgba
(
0
,
102
,
169
,
var
(
--bg-opacity
))}
.hover
\
:bg-black:hover
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
))}
.hover
\
:bg-grey-125:hover
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
))}
.border-grey-400
{
--border-opacity
:
1
;
border-color
:
#343434
;
border-color
:
rgba
(
52
,
52
,
52
,
var
(
--border-opacity
))}
.rounded
{
border-radius
:
.25rem
}
.border
{
border-width
:
1px
}
.border-t
{
border-top-width
:
1px
}
.block
{
display
:
block
}
.inline-block
{
display
:
inline-block
}
.inline
{
display
:
inline
}
.flex
{
display
:
flex
}
.inline-flex
{
display
:
inline-flex
}
.table
{
display
:
table
}
.grid
{
display
:
grid
}
.hidden
{
display
:
none
}
.flex-col
{
flex-direction
:
column
}
.items-start
{
align-items
:
flex-start
}
.items-center
{
align-items
:
center
}
.self-start
{
align-self
:
flex-start
}
.justify-end
{
justify-content
:
flex-end
}
.flex-grow
{
flex-grow
:
1
}
.order-1
{
order
:
1
}
.order-2
{
order
:
2
}
.order-3
{
order
:
3
}
.order-first
{
order
:
-9999
}
.font-alt
{
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
}
.font-body
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
}
.font-condensed
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
}
.font-light
{
font-weight
:
300
}
.font-medium
{
font-weight
:
500
}
.font-bold
{
font-weight
:
700
}
.h-32
{
height
:
8rem
}
.h-52
{
height
:
13rem
}
.h-full
{
height
:
100%
}
.text-xs
{
font-size
:
.75rem
}
.text-sm
{
font-size
:
.875rem
}
.text-base
{
font-size
:
1rem
}
.text-lg
{
font-size
:
1.125rem
}
.text-xl
{
font-size
:
1.3rem
}
.text-2xl
{
font-size
:
1.6rem
}
.text-3xl
{
font-size
:
1.875rem
}
.text-4xl
{
font-size
:
2.45rem
}
.text-5xl
{
font-size
:
3rem
}
.text-6xl
{
font-size
:
4rem
}
.text-7xl
{
font-size
:
5.6rem
}
.leading-snug
{
line-height
:
1.375
}
.leading-normal
{
line-height
:
1.5
}
.leading-loose
{
line-height
:
2
}
.m-auto
{
margin
:
auto
}
.my-4
{
margin-top
:
1rem
;
margin-bottom
:
1rem
}
.my-8
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
.mr-0
{
margin-right
:
0
}
.mr-1
{
margin-right
:
.25rem
}
.mt-2
{
margin-top
:
.5rem
}
.mr-2
{
margin-right
:
.5rem
}
.mb-2
{
margin-bottom
:
.5rem
}
.ml-2
{
margin-left
:
.5rem
}
.mt-4
{
margin-top
:
1rem
}
.mb-4
{
margin-bottom
:
1rem
}
.ml-4
{
margin-left
:
1rem
}
.mt-6
{
margin-top
:
1.5rem
}
.mb-6
{
margin-bottom
:
1.5rem
}
.mt-8
{
margin-top
:
2rem
}
.mb-8
{
margin-bottom
:
2rem
}
.mt-16
{
margin-top
:
4rem
}
.max-w-2xl
{
max-width
:
42rem
}
.max-w-5xl
{
max-width
:
64rem
}
.max-w-full
{
max-width
:
100%
}
.object-cover
{
-o-object-fit
:
cover
;
object-fit
:
cover
}
.overflow-hidden
{
overflow
:
hidden
}
.p-2
{
padding
:
.5rem
}
.p-4
{
padding
:
1rem
}
.py-3
{
padding-top
:
.75rem
;
padding-bottom
:
.75rem
}
.py-4
{
padding-top
:
1rem
;
padding-bottom
:
1rem
}
.px-4
{
padding-left
:
1rem
;
padding-right
:
1rem
}
.py-8
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.px-8
{
padding-left
:
2rem
;
padding-right
:
2rem
}
.py-12
{
padding-top
:
3rem
;
padding-bottom
:
3rem
}
.py-16
{
padding-top
:
4rem
;
padding-bottom
:
4rem
}
.pr-2
{
padding-right
:
.5rem
}
.pl-2
{
padding-left
:
.5rem
}
.pt-4
{
padding-top
:
1rem
}
.pr-4
{
padding-right
:
1rem
}
.pb-4
{
padding-bottom
:
1rem
}
.pl-4
{
padding-left
:
1rem
}
.pb-6
{
padding-bottom
:
1.5rem
}
.pt-8
{
padding-top
:
2rem
}
.pt-24
{
padding-top
:
6rem
}
.pb-24
{
padding-bottom
:
6rem
}
.static
{
position
:
static
}
.fixed
{
position
:
fixed
}
.absolute
{
position
:
absolute
}
.relative
{
position
:
relative
}
.resize
{
resize
:
both
}
.shadow
{
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.1
),
0
1px
2px
0
rgba
(
0
,
0
,
0
,
.06
)}
.text-center
{
text-align
:
center
}
.text-right
{
text-align
:
right
}
.text-white
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.text-grey-200
{
--text-opacity
:
1
;
color
:
#adadad
;
color
:
rgba
(
173
,
173
,
173
,
var
(
--text-opacity
))}
.text-red-100
{
--text-opacity
:
1
;
color
:
#d6151b
;
color
:
rgba
(
214
,
21
,
27
,
var
(
--text-opacity
))}
.text-brands-facebook
{
--text-opacity
:
1
;
color
:
#067ceb
;
color
:
rgba
(
6
,
124
,
235
,
var
(
--text-opacity
))}
.hover
\
:text-black:hover
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.hover
\
:text-white:hover
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.italic
{
font-style
:
italic
}
.uppercase
{
text-transform
:
uppercase
}
.capitalize
{
text-transform
:
capitalize
}
.visible
{
visibility
:
visible
}
.w-6
{
width
:
1.5rem
}
.w-8
{
width
:
2rem
}
.w-32
{
width
:
8rem
}
.w-80
{
width
:
20rem
}
.w-full
{
width
:
100%
}
.gap-2
{
grid-gap
:
.5rem
;
gap
:
.5rem
}
.gap-4
{
grid-gap
:
1rem
;
gap
:
1rem
}
.gap-8
{
grid-gap
:
2rem
;
gap
:
2rem
}
.col-gap-8
{
grid-column-gap
:
2rem
;
-moz-column-gap
:
2rem
;
column-gap
:
2rem
}
.row-gap-8
{
grid-row-gap
:
2rem
;
row-gap
:
2rem
}
.grid-cols-1
{
grid-template-columns
:
repeat
(
1
,
minmax
(
0
,
1fr
))}
.grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.grid-cols-12
{
grid-template-columns
:
repeat
(
12
,
minmax
(
0
,
1fr
))}
.col-span-2
{
grid-column
:
span
2
/
span
2
}
.col-span-3
{
grid-column
:
span
3
/
span
3
}
.col-span-4
{
grid-column
:
span
4
/
span
4
}
.col-span-8
{
grid-column
:
span
8
/
span
8
}
.transform
{
--transform-translate-x
:
0
;
--transform-translate-y
:
0
;
--transform-rotate
:
0
;
--transform-skew-x
:
0
;
--transform-skew-y
:
0
;
--transform-scale-x
:
1
;
--transform-scale-y
:
1
;
transform
:
translateX
(
var
(
--transform-translate-x
))
translateY
(
var
(
--transform-translate-y
))
rotate
(
var
(
--transform-rotate
))
skewX
(
var
(
--transform-skew-x
))
skewY
(
var
(
--transform-skew-y
))
scaleX
(
var
(
--transform-scale-x
))
scaleY
(
var
(
--transform-scale-y
))}
.transition
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
}
.duration-200
{
transition-duration
:
.2s
}
.hover
\
:line-white:hover
{
-webkit-text-decoration-color
:
#fff
;
text-decoration-color
:
#fff
}
.elevation-0
{
box-shadow
:
0
0
0
0
rgba
(
221
,
221
,
221
,
.43
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.37
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-1
{
box-shadow
:
0
2px
1px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
1px
1px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
3px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-2
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-3
{
box-shadow
:
0
3px
3px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
3px
4px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
8px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-4
{
box-shadow
:
0
2px
4px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
4px
5px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
10px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-5
{
box-shadow
:
0
3px
5px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
5px
8px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
14px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-6
{
box-shadow
:
0
3px
5px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
6px
10px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
18px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-7
{
box-shadow
:
0
4px
5px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
7px
10px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
2px
16px
1px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-8
{
box-shadow
:
0
5px
5px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
8px
10px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
3px
14px
2px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-9
{
box-shadow
:
0
5px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
9px
12px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
3px
16px
2px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-21
{
box-shadow
:
0
10px
13px
-6px
rgba
(
221
,
221
,
221
,
.43
),
0
21px
33px
3px
rgba
(
221
,
221
,
221
,
.37
),
0
8px
40px
7px
rgba
(
221
,
221
,
221
,
.35
)}
.hover
\
:elevation-10:hover
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}
.inline-block-nogap
{
font-size
:
0
}
:root
{
font-size
:
16px
}
body
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
1
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
font-size
:
1rem
}
a
:hover
{
text-decoration
:
underline
}
@media
(
min-width
:
576px
){
.sm
\
:avatar--lg
{
width
:
7rem
}
.btn.sm
\
:btn--autowidth
{
width
:
auto
}
.sm
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.content-block
.sm
\
:head-alt-lg
,
.sm
\
:head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.sm
\
:candidate-card-list__item-wrapper
{
padding-left
:
.5rem
;
padding-right
:
.5rem
;
border-right-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.sm
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.sm
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.sm
\
:space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.sm
\
:space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.sm
\
:flex-row
{
flex-direction
:
row
}
.sm
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}}
@media
(
min-width
:
768px
){
.btn.md
\
:btn--autowidth
{
width
:
auto
}
.md
\
:card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.md
\
:card__body
{
padding
:
2rem
}
.md
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.content-block
.md
\
:head-alt-xl
,
.md
\
:head-alt-xl
{
font-size
:
5.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-alt-lg
,
.md
\
:head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-alt-md
,
.md
\
:head-alt-md
{
font-size
:
2.45rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-allcaps-3xs
,
.md
\
:head-allcaps-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.md
\
:candidate-card-list__item-wrapper--border
{
border-right-width
:
1px
}
.md
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.md
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.md
\
:space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.md
\
:block
{
display
:
block
}
.md
\
:inline-block
{
display
:
inline-block
}
.md
\
:flex-row
{
flex-direction
:
row
}
.md
\
:items-center
{
align-items
:
center
}
.md
\
:text-3xl
{
font-size
:
1.875rem
}
.md
\
:text-7xl
{
font-size
:
5.6rem
}
.md
\
:mt-0
{
margin-top
:
0
}
.md
\
:mr-2
{
margin-right
:
.5rem
}
.md
\
:mb-4
{
margin-bottom
:
1rem
}
.md
\
:mt-8
{
margin-top
:
2rem
}
.md
\
:mt-16
{
margin-top
:
4rem
}
.md
\
:mt-24
{
margin-top
:
6rem
}
.md
\
:pt-0
{
padding-top
:
0
}
.md
\
:pt-8
{
padding-top
:
2rem
}
.md
\
:w-40
{
width
:
10rem
}
.md
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-6
{
grid-template-columns
:
repeat
(
6
,
minmax
(
0
,
1fr
))}
.md
\
:col-span-1
{
grid-column
:
span
1
/
span
1
}
.md
\
:col-span-2
{
grid-column
:
span
2
/
span
2
}
.md
\
:elevation-10
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}}
@media
(
min-width
:
992px
){
.lg
\
:avatar--3xl
{
width
:
14rem
}
.lg
\
:card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.lg
\
:card__body
{
padding
:
2rem
}
.lg
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.lg
\
:candidate-card-list__item-wrapper--border
{
border-right-width
:
1px
}
.lg
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.lg
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-0
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
0px
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
0px
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-y-2
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
.5rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-y-4
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
1rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-y-16
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
4rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-16
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
4rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:border-grey-300
{
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.lg
\
:border-t-0
{
border-top-width
:
0
}
.lg
\
:border-t
{
border-top-width
:
1px
}
.lg
\
:border-r
{
border-right-width
:
1px
}
.lg
\
:block
{
display
:
block
}
.lg
\
:inline-block
{
display
:
inline-block
}
.lg
\
:flex
{
display
:
flex
}
.lg
\
:grid
{
display
:
grid
}
.lg
\
:hidden
{
display
:
none
}
.lg
\
:flex-row
{
flex-direction
:
row
}
.lg
\
:flex-col
{
flex-direction
:
column
}
.lg
\
:items-end
{
align-items
:
flex-end
}
.lg
\
:items-center
{
align-items
:
center
}
.lg
\
:order-last
{
order
:
9999
}
.lg
\
:text-sm
{
font-size
:
.875rem
}
.lg
\
:text-4xl
{
font-size
:
2.45rem
}
.lg
\
:text-8xl
{
font-size
:
6.5rem
}
.lg
\
:leading-normal
{
line-height
:
1.5
}
.lg
\
:my-0
{
margin-top
:
0
;
margin-bottom
:
0
}
.lg
\
:my-16
{
margin-top
:
4rem
;
margin-bottom
:
4rem
}
.lg
\
:mt-0
{
margin-top
:
0
}
.lg
\
:mb-0
{
margin-bottom
:
0
}
.lg
\
:mt-4
{
margin-top
:
1rem
}
.lg
\
:mb-4
{
margin-bottom
:
1rem
}
.lg
\
:mt-8
{
margin-top
:
2rem
}
.lg
\
:p-8
{
padding
:
2rem
}
.lg
\
:py-0
{
padding-top
:
0
;
padding-bottom
:
0
}
.lg
\
:py-8
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.lg
\
:py-12
{
padding-top
:
3rem
;
padding-bottom
:
3rem
}
.lg
\
:py-16
{
padding-top
:
4rem
;
padding-bottom
:
4rem
}
.lg
\
:py-24
{
padding-top
:
6rem
;
padding-bottom
:
6rem
}
.lg
\
:px-24
{
padding-left
:
6rem
;
padding-right
:
6rem
}
.lg
\
:py-32
{
padding-top
:
8rem
;
padding-bottom
:
8rem
}
.lg
\
:pt-0
{
padding-top
:
0
}
.lg
\
:pb-2
{
padding-bottom
:
.5rem
}
.lg
\
:pr-8
{
padding-right
:
2rem
}
.lg
\
:pb-8
{
padding-bottom
:
2rem
}
.lg
\
:pb-16
{
padding-bottom
:
4rem
}
.lg
\
:pt-24
{
padding-top
:
6rem
}
.lg
\
:pb-24
{
padding-bottom
:
6rem
}
.lg
\
:pt-40
{
padding-top
:
10rem
}
.lg
\
:text-left
{
text-align
:
left
}
.lg
\
:text-center
{
text-align
:
center
}
.lg
\
:text-right
{
text-align
:
right
}
.lg
\
:w-1
\
/
3
{
width
:
33.333333%
}
.lg
\
:w-2
\
/
3
{
width
:
66.666667%
}
.lg
\
:w-1
\
/
4
{
width
:
25%
}
.lg
\
:w-2
\
/
4
{
width
:
50%
}
.lg
\
:w-2
\
/
5
{
width
:
40%
}
.lg
\
:w-3
\
/
5
{
width
:
60%
}
.lg
\
:w-full
{
width
:
100%
}
.lg
\
:gap-4
{
grid-gap
:
1rem
;
gap
:
1rem
}
.lg
\
:gap-8
{
grid-gap
:
2rem
;
gap
:
2rem
}
.lg
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-6
{
grid-template-columns
:
repeat
(
6
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-7
{
grid-template-columns
:
repeat
(
7
,
minmax
(
0
,
1fr
))}
.lg
\
:col-span-3
{
grid-column
:
span
3
/
span
3
}
.lg
\
:col-span-4
{
grid-column
:
span
4
/
span
4
}
.lg
\
:grid-rows-3
{
grid-template-rows
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-rows-5
{
grid-template-rows
:
repeat
(
5
,
minmax
(
0
,
1fr
))}
.lg
\
:row-span-1
{
grid-row
:
span
1
/
span
1
}
.lg
\
:row-span-2
{
grid-row
:
span
2
/
span
2
}
.lg
\
:row-span-3
{
grid-row
:
span
3
/
span
3
}
.lg
\
:row-span-4
{
grid-row
:
span
4
/
span
4
}
.lg
\
:row-span-5
{
grid-row
:
span
5
/
span
5
}
.lg
\
:elevation-10
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}}
@media
(
min-width
:
1200px
){
.xl
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.xl
\
:space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.xl
\
:space-x-16
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
4rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.xl
\
:flex-row
{
flex-direction
:
row
}
.xl
\
:text-base
{
font-size
:
1rem
}
.xl
\
:mt-0
{
margin-top
:
0
}
.xl
\
:text-right
{
text-align
:
right
}
.xl
\
:w-1
\
/
3
{
width
:
33.333333%
}
.xl
\
:w-2
\
/
3
{
width
:
66.666667%
}
.xl
\
:grid-cols-8
{
grid-template-columns
:
repeat
(
8
,
minmax
(
0
,
1fr
))}
.xl
\
:col-span-1
{
grid-column
:
span
1
/
span
1
}
.xl
\
:col-span-3
{
grid-column
:
span
3
/
span
3
}}
\ No newline at end of file
@import
url
(
https
:
//
fonts
.
googleapis
.
com
/
css2
?
family
=
Bebas
+
Neue
&
family
=
Roboto
+
Condensed
:
wght
@
300
;
400
;
700
&
family
=
Roboto
:ital
,
wght
@
0
,
300
;
0
,
400
;
0
,
500
;
0
,
700
;
1
,
300
;
1
,
400
&
display
=
swap
);
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html
{
line-height
:
1.15
;
-webkit-text-size-adjust
:
100%
}
body
{
margin
:
0
}
main
{
display
:
block
}
h1
{
font-size
:
2em
;
margin
:
.67em
0
}
hr
{
box-sizing
:
content-box
;
height
:
0
;
overflow
:
visible
}
a
{
background-color
:
transparent
}
b
,
strong
{
font-weight
:
bolder
}
small
{
font-size
:
80%
}
img
{
border-style
:
none
}
button
{
font-family
:
inherit
;
font-size
:
100%
;
line-height
:
1.15
;
margin
:
0
}
button
{
overflow
:
visible
}
button
{
text-transform
:
none
}
[
type
=
button
],[
type
=
reset
],[
type
=
submit
],
button
{
-webkit-appearance
:
button
}
[
type
=
button
]
::-moz-focus-inner
,[
type
=
reset
]
::-moz-focus-inner
,[
type
=
submit
]
::-moz-focus-inner
,
button
::-moz-focus-inner
{
border-style
:
none
;
padding
:
0
}
[
type
=
button
]
:-moz-focusring
,[
type
=
reset
]
:-moz-focusring
,[
type
=
submit
]
:-moz-focusring
,
button
:-moz-focusring
{
outline
:
1px
dotted
ButtonText
}
[
type
=
checkbox
],[
type
=
radio
]
{
box-sizing
:
border-box
;
padding
:
0
}
[
type
=
number
]
::-webkit-inner-spin-button
,[
type
=
number
]
::-webkit-outer-spin-button
{
height
:
auto
}
[
type
=
search
]
{
-webkit-appearance
:
textfield
;
outline-offset
:
-2px
}
[
type
=
search
]
::-webkit-search-decoration
{
-webkit-appearance
:
none
}
::-webkit-file-upload-button
{
-webkit-appearance
:
button
;
font
:
inherit
}
template
{
display
:
none
}
[
hidden
]
{
display
:
none
}
blockquote
,
figure
,
h1
,
h2
,
h3
,
h4
,
h5
,
hr
,
p
{
margin
:
0
}
button
{
background-color
:
transparent
;
background-image
:
none
;
padding
:
0
}
button
:focus
{
outline
:
1px
dotted
;
outline
:
5px
auto
-
webkit-focus-ring-color
}
ol
,
ul
{
list-style
:
none
;
margin
:
0
;
padding
:
0
}
html
{
font-family
:
system-ui
,
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Roboto
,
"Helvetica Neue"
,
Arial
,
"Noto Sans"
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
,
"Noto Color Emoji"
;
line-height
:
1.5
}
*,
::after
,
::before
{
box-sizing
:
border-box
;
border-width
:
0
;
border-style
:
solid
;
border-color
:
currentColor
}
hr
{
border-top-width
:
1px
}
img
{
border-style
:
solid
}
[
role
=
button
],
button
{
cursor
:
pointer
}
table
{
border-collapse
:
collapse
}
h1
,
h2
,
h3
,
h4
,
h5
{
font-size
:
inherit
;
font-weight
:
inherit
}
a
{
color
:
inherit
;
text-decoration
:
inherit
}
button
{
padding
:
0
;
line-height
:
inherit
;
color
:
inherit
}
iframe
,
img
,
svg
{
display
:
block
;
vertical-align
:
middle
}
img
{
max-width
:
100%
;
height
:
auto
}
.container
{
width
:
100%
;
margin-right
:
auto
;
margin-left
:
auto
;
padding-right
:
1rem
;
padding-left
:
1rem
}
@media
(
min-width
:
576px
){
.container
{
max-width
:
576px
}}
@media
(
min-width
:
768px
){
.container
{
max-width
:
768px
}}
@media
(
min-width
:
992px
){
.container
{
max-width
:
992px
}}
@media
(
min-width
:
1200px
){
.container
{
max-width
:
1200px
;
padding-right
:
2rem
;
padding-left
:
2rem
}}
@media
(
min-width
:
1366px
){
.container
{
max-width
:
1366px
}}
:root
{
--color-transparent
:
transparent
;
--color-black
:
#000000
;
--color-white
:
#ffffff
;
--color-grey-50
:
#f7f7f7
;
--color-grey-100
:
#f3f3f3
;
--color-grey-125
:
#f0f0f0
;
--color-grey-150
:
#00000012
;
--color-grey-200
:
#adadad
;
--color-grey-300
:
#4c4c4c
;
--color-grey-400
:
#343434
;
--color-grey-500
:
#303132
;
--color-grey-600
:
#262626
;
--color-grey-700
:
#202020
;
--color-grey-800
:
#1f1f1f
;
--color-red-100
:
#d6151b
;
--color-red-200
:
rgb
(
193
,
19
,
24
);
--color-green-100
:
#29bc51
;
--color-green-200
:
rgb
(
37
,
169
,
73
);
--color-green-300
:
rgb
(
34
,
154
,
66
);
--color-brands-facebook
:
#067ceb
;
--color-brands-twitter
:
#00c9ff
;
--color-brands-gmail
:
#ec230e
;
--color-brands-linkedin
:
#0066a9
;
--sm
:
576px
;
--md
:
768px
;
--lg
:
992px
;
--xl
:
1200px
;
--2xl
:
1366px
;
--font-alt
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
--font-body
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
--font-condensed
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
--text-2xs
:
.65rem
;
--text-xs
:
.75rem
;
--text-sm
:
.875rem
;
--text-base
:
1rem
;
--text-lg
:
1.125rem
;
--text-xl
:
1.3rem
;
--text-2xl
:
1.6rem
;
--text-3xl
:
1.875rem
;
--text-4xl
:
2.45rem
;
--text-5xl
:
3rem
;
--text-6xl
:
4rem
;
--text-7xl
:
5.6rem
;
--text-8xl
:
6.5rem
;
--font-light
:
300
;
--font-normal
:
400
;
--font-medium
:
500
;
--font-bold
:
700
;
--leading-3
:
.75rem
;
--leading-4
:
1rem
;
--leading-5
:
1.25rem
;
--leading-6
:
1.5rem
;
--leading-7
:
1.75rem
;
--leading-8
:
2rem
;
--leading-9
:
2.25rem
;
--leading-10
:
2.5rem
;
--leading-none
:
1
;
--leading-tight
:
1.25
;
--leading-snug
:
1.375
;
--leading-normal
:
1.5
;
--leading-relaxed
:
1.625
;
--leading-loose
:
2
;
--leading-negative
:
0.9
;
--tracking-tighter
:
-0.05em
;
--tracking-tight
:
-0.025em
;
--tracking-normal
:
0
;
--tracking-wide
:
0.025em
;
--tracking-wider
:
0.05em
;
--tracking-widest
:
0.1em
;
--bg-auto
:
auto
;
--bg-cover
:
cover
;
--bg-contain
:
contain
;
--border-0
:
0
;
--border-2
:
2px
;
--border-4
:
4px
;
--border-8
:
8px
;
--border
:
1px
;
--rounded-none
:
0
;
--rounded-sm
:
0.125rem
;
--rounded
:
0.25rem
;
--rounded-md
:
0.375rem
;
--rounded-lg
:
0.5rem
;
--rounded-full
:
9999px
;
--w-0
:
0
;
--w-1
:
0.25rem
;
--w-2
:
0.5rem
;
--w-3
:
0.75rem
;
--w-4
:
1rem
;
--w-5
:
1.25rem
;
--w-6
:
1.5rem
;
--w-8
:
2rem
;
--w-10
:
2.5rem
;
--w-12
:
3rem
;
--w-16
:
4rem
;
--w-20
:
5rem
;
--w-24
:
6rem
;
--w-28
:
7rem
;
--w-32
:
8rem
;
--w-36
:
9rem
;
--w-40
:
10rem
;
--w-44
:
11rem
;
--w-48
:
12rem
;
--w-52
:
13rem
;
--w-56
:
14rem
;
--w-64
:
16rem
;
--w-80
:
20rem
;
--w-auto
:
auto
;
--w-px
:
1px
;
--w-0-5
:
0.125rem
;
--w-1-2
:
50%
;
--w-1-3
:
33.333333%
;
--w-2-3
:
66.666667%
;
--w-1-4
:
25%
;
--w-2-4
:
50%
;
--w-3-4
:
75%
;
--w-1-5
:
20%
;
--w-2-5
:
40%
;
--w-3-5
:
60%
;
--w-4-5
:
80%
;
--w-1-6
:
16.666667%
;
--w-2-6
:
33.333333%
;
--w-3-6
:
50%
;
--w-4-6
:
66.666667%
;
--w-5-6
:
83.333333%
;
--w-1-12
:
8.333333%
;
--w-2-12
:
16.666667%
;
--w-3-12
:
25%
;
--w-4-12
:
33.333333%
;
--w-5-12
:
41.666667%
;
--w-6-12
:
50%
;
--w-7-12
:
58.333333%
;
--w-8-12
:
66.666667%
;
--w-9-12
:
75%
;
--w-10-12
:
83.333333%
;
--w-11-12
:
91.666667%
;
--w-full
:
100%
;
--w-screen
:
100vw
;
--h-0
:
0
;
--h-1
:
0.25rem
;
--h-2
:
0.5rem
;
--h-3
:
0.75rem
;
--h-4
:
1rem
;
--h-5
:
1.25rem
;
--h-6
:
1.5rem
;
--h-8
:
2rem
;
--h-10
:
2.5rem
;
--h-12
:
3rem
;
--h-16
:
4rem
;
--h-20
:
5rem
;
--h-24
:
6rem
;
--h-28
:
7rem
;
--h-32
:
8rem
;
--h-36
:
9rem
;
--h-40
:
10rem
;
--h-44
:
11rem
;
--h-48
:
12rem
;
--h-52
:
13rem
;
--h-56
:
14rem
;
--h-64
:
16rem
;
--h-80
:
20rem
;
--h-auto
:
auto
;
--h-px
:
1px
;
--h-0-5
:
0.125rem
;
--h-full
:
100%
;
--h-screen
:
100vh
;
--min-w-0
:
0
;
--min-w-full
:
100%
;
--min-h-0
:
0
;
--min-h-full
:
100%
;
--min-h-screen
:
100vh
;
--max-w-none
:
none
;
--max-w-xs
:
20rem
;
--max-w-sm
:
24rem
;
--max-w-md
:
28rem
;
--max-w-lg
:
32rem
;
--max-w-xl
:
36rem
;
--max-w-2xl
:
42rem
;
--max-w-3xl
:
48rem
;
--max-w-4xl
:
56rem
;
--max-w-5xl
:
64rem
;
--max-w-6xl
:
72rem
;
--max-w-full
:
100%
;
--max-w-screen-sm
:
576px
;
--max-w-screen-md
:
768px
;
--max-w-screen-lg
:
992px
;
--max-w-screen-xl
:
1200px
;
--max-w-screen-2xl
:
1366px
;
--max-w-xxs
:
16rem
;
--max-h-full
:
100%
;
--max-h-screen
:
100vh
;
--p-0
:
0
;
--p-1
:
0.25rem
;
--p-2
:
0.5rem
;
--p-3
:
0.75rem
;
--p-4
:
1rem
;
--p-5
:
1.25rem
;
--p-6
:
1.5rem
;
--p-8
:
2rem
;
--p-10
:
2.5rem
;
--p-12
:
3rem
;
--p-16
:
4rem
;
--p-20
:
5rem
;
--p-24
:
6rem
;
--p-28
:
7rem
;
--p-32
:
8rem
;
--p-36
:
9rem
;
--p-40
:
10rem
;
--p-44
:
11rem
;
--p-48
:
12rem
;
--p-52
:
13rem
;
--p-56
:
14rem
;
--p-64
:
16rem
;
--p-80
:
20rem
;
--p-px
:
1px
;
--p-0-5
:
0.125rem
;
--m-0
:
0
;
--m-1
:
0.25rem
;
--m-2
:
0.5rem
;
--m-3
:
0.75rem
;
--m-4
:
1rem
;
--m-5
:
1.25rem
;
--m-6
:
1.5rem
;
--m-8
:
2rem
;
--m-10
:
2.5rem
;
--m-12
:
3rem
;
--m-16
:
4rem
;
--m-20
:
5rem
;
--m-24
:
6rem
;
--m-28
:
7rem
;
--m-32
:
8rem
;
--m-36
:
9rem
;
--m-40
:
10rem
;
--m-44
:
11rem
;
--m-48
:
12rem
;
--m-52
:
13rem
;
--m-56
:
14rem
;
--m-64
:
16rem
;
--m-80
:
20rem
;
--m-auto
:
auto
;
--m-px
:
1px
;
--m-0-5
:
0.125rem
;
--m--1
:
-0.25rem
;
--m--2
:
-0.5rem
;
--m--3
:
-0.75rem
;
--m--4
:
-1rem
;
--m--5
:
-1.25rem
;
--m--6
:
-1.5rem
;
--m--8
:
-2rem
;
--m--10
:
-2.5rem
;
--m--12
:
-3rem
;
--m--16
:
-4rem
;
--m--20
:
-5rem
;
--m--24
:
-6rem
;
--m--28
:
-7rem
;
--m--32
:
-8rem
;
--m--36
:
-9rem
;
--m--40
:
-10rem
;
--m--44
:
-11rem
;
--m--48
:
-12rem
;
--m--52
:
-13rem
;
--m--56
:
-14rem
;
--m--64
:
-16rem
;
--m--80
:
-20rem
;
--m--px
:
-1px
;
--m--0-5
:
-0.125rem
;
--shadows-xs
:
0
0
0
1px
rgba
(
0
,
0
,
0
,
0.05
);
--shadows-sm
:
0
1px
2px
0
rgba
(
0
,
0
,
0
,
0.05
);
--shadows
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
0.1
),
0
1px
2px
0
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-md
:
0
4px
6px
-1px
rgba
(
0
,
0
,
0
,
0.1
),
0
2px
4px
-1px
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-lg
:
0
10px
15px
-3px
rgba
(
0
,
0
,
0
,
0.1
),
0
4px
6px
-2px
rgba
(
0
,
0
,
0
,
0.05
);
--shadows-xl
:
0
20px
25px
-5px
rgba
(
0
,
0
,
0
,
0.1
),
0
10px
10px
-5px
rgba
(
0
,
0
,
0
,
0.04
);
--shadows-2xl
:
0
25px
50px
-12px
rgba
(
0
,
0
,
0
,
0.25
);
--shadows-inner
:
inset
0
2px
4px
0
rgba
(
0
,
0
,
0
,
0.06
);
--shadows-outline
:
0
0
0
3px
rgba
(
66
,
153
,
225
,
0.5
);
--shadows-none
:
none
;
--z-0
:
0
;
--z-10
:
10
;
--z-20
:
20
;
--z-30
:
30
;
--z-40
:
40
;
--z-50
:
50
;
--z-auto
:
auto
;
--opacity-0
:
0
;
--opacity-25
:
0.25
;
--opacity-50
:
0.5
;
--opacity-75
:
0.75
;
--opacity-85
:
0.85
;
--opacity-100
:
1
}
.avatar
{
display
:
inline-block
;
text-align
:
center
;
border-radius
:
9999px
}
.avatar
img
{
border-radius
:
9999px
;
display
:
block
;
width
:
100%
}
.avatar--xs
{
width
:
3rem
}
.avatar--sm
{
width
:
5rem
}
.avatar--md
{
width
:
6rem
}
.avatar--lg
{
width
:
7rem
}
.avatar--xl
{
width
:
9rem
}
.avatar--2xl
{
width
:
12rem
}
.avatar--bordered
img
{
--border-opacity
:
1
;
border-color
:
#fff
;
border-color
:
rgba
(
255
,
255
,
255
,
var
(
--border-opacity
));
border-width
:
8px
}
.btn
{
display
:
inline-block
;
text-align
:
center
;
font-weight
:
400
;
max-width
:
20rem
}
.btn
:hover
{
text-decoration
:
none
}
.btn.btn--hoveractive
:hover
.btn__body
,
.btn.btn--hoveractive
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--hoveractive
:hover
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#262626
;
border-color
:
rgba
(
38
,
38
,
38
,
var
(
--border-opacity
))}
.btn.btn--hoveractive.btn--fading
:hover
.btn__body
,
.btn.btn--hoveractive.btn--fading
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--hoveractive.btn--fading
:hover
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.btn__body
,
.btn__icon
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn__icon
{
border-left-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.btn__body
{
display
:
flex
;
height
:
100%
;
align-items
:
center
;
justify-content
:
center
;
padding
:
.75em
2em
}
.btn.btn--icon
.btn__body-wrap
{
display
:
flex
}
.btn.btn--icon
.btn__icon
{
border-left-width
:
1px
;
padding-left
:
1rem
;
padding-right
:
1rem
;
display
:
flex
;
align-items
:
center
}
.btn.btn--icon
.btn__icon
img
{
width
:
1rem
}
.btn.btn--icon.btn--hoveractive
:hover
.btn__icon
i
,
.btn.btn--icon.btn--hoveractive
:hover
.btn__icon
svg
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
fill
:
#fff
}
.btn.btn--inverted-icon
.btn__icon
{
order
:
-9999
;
border-right-width
:
1px
;
border-left-width
:
0
}
.btn__inline-icon
{
margin-right
:
.5rem
}
.btn.btn--black
.btn__body
,
.btn.btn--black
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--black
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#343434
;
border-color
:
rgba
(
52
,
52
,
52
,
var
(
--border-opacity
));
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
))}
.btn.btn--black.btn--hoveractive
:hover
.btn__body
,
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
i
,
.btn.btn--black.btn--hoveractive
:hover
.btn__icon
svg
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
fill
:
#000
}
.btn.btn--grey-125
.btn__body
,
.btn.btn--grey-125
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--grey-125
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--grey-300
.btn__body
,
.btn.btn--grey-300
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#4c4c4c
;
background-color
:
rgba
(
76
,
76
,
76
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-300
.btn__icon
{
border-color
:
#00000012
}
.btn.btn--grey-500
.btn__body
,
.btn.btn--grey-500
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#303132
;
background-color
:
rgba
(
48
,
49
,
50
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-500
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.btn.btn--grey-700
.btn__body
,
.btn.btn--grey-700
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-700
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#1f1f1f
;
border-color
:
rgba
(
31
,
31
,
31
,
var
(
--border-opacity
))}
.btn.btn--grey-800
.btn__body
,
.btn.btn--grey-800
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--grey-800
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.btn.btn--green-100
.btn__body
,
.btn.btn--green-100
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--green-100
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#25a949
;
border-color
:
rgba
(
37
,
169
,
73
,
var
(
--border-opacity
))}
.btn.btn--red-100
.btn__body
,
.btn.btn--red-100
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--red-100
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#c11318
;
border-color
:
rgba
(
193
,
19
,
24
,
var
(
--border-opacity
))}
.btn.btn--white
.btn__body
,
.btn.btn--white
.btn__icon
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--white
.btn__icon
{
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.btn.btn--condensed
.btn__body
{
padding
:
.75em
1em
}
.btn.btn--fullwidth
{
width
:
100%
;
max-width
:
100%
}
.btn.btn--fullwidth
.btn__body-wrap
{
width
:
100%
;
max-width
:
100%
}
.btn.btn--fullwidth
.btn__body
{
flex
:
1
}
.btn.btn--autowidth
{
width
:
auto
}
.btn.btn--overlay
.btn__inline-icon
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.btn.btn--overlay.btn--overlay-white
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-white
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-white
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#d6151b
;
color
:
rgba
(
214
,
21
,
27
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
))}
.btn.btn--overlay.btn--overlay-red-100
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#067ceb
;
color
:
rgba
(
6
,
124
,
235
,
var
(
--text-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
:hover
.btn__body
{
--bg-opacity
:
1
;
background-color
:
#067ceb
;
background-color
:
rgba
(
6
,
124
,
235
,
var
(
--bg-opacity
))}
.btn.btn--overlay.btn--overlay-brands-facebook
:hover
.btn__inline-icon
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.card__body
{
padding
:
2rem
}
.card--hoveractive
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.card--hoveractive
:hover
{
box-shadow
:
0
10px
13px
-6px
rgba
(
221
,
221
,
221
,
.43
),
0
21px
33px
3px
rgba
(
221
,
221
,
221
,
.37
),
0
8px
40px
7px
rgba
(
221
,
221
,
221
,
.35
)}
.card-headline
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
;
overflow-wrap
:
break-word
}
.card-body-text
{
font-weight
:
300
;
line-height
:
1.5
;
font-size
:
.875rem
;
overflow-wrap
:
break-word
}
.contact-line
i
{
margin-right
:
.5rem
}
.contact-line.contact-line--responsive
i
{
display
:
none
}
@media
(
min-width
:
992px
){
.contact-line.contact-line--responsive
i
{
display
:
inline-block
}}
.container--default
{
max-width
:
1200px
}
.container--wide
{
max-width
:
1430px
}
.container-padding--zero
{
margin-left
:
-1rem
;
margin-right
:
-1rem
}
@media
(
min-width
:
1200px
){
.container-padding--zero
{
margin-left
:
-2rem
;
margin-right
:
-2rem
}}
.content-block
figure
,
.figure
{
position
:
relative
}
.content-block
figure
img
,
.figure
img
{
width
:
100%
}
.content-block
figure
figcaption
,
.figure
figcaption
{
position
:
absolute
;
display
:
flex
;
align-items
:
flex-end
;
z-index
:
10
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
padding-left
:
1rem
;
padding-right
:
1rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-size
:
.875rem
;
line-height
:
1.25
}
.content-block
figure
figcaption
:before
,
.figure
figcaption
:before
{
position
:
absolute
;
display
:
block
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
pointer-events
:
none
;
opacity
:
1
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
content
:
""
;
z-index
:
-1
;
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
40%
,
rgba
(
0
,
0
,
0
,
.8
))}
@media
(
min-width
:
576px
){
.content-block
figure
figcaption
:before
,
.figure
figcaption
:before
{
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
60%
,
rgba
(
0
,
0
,
0
,
.8
))}}
.content-block
figure
:focus
figcaption
:before
,
.content-block
figure
:hover
figcaption
:before
,
.figure
:focus
figcaption
:before
,
.figure
:hover
figcaption
:before
{
opacity
:
0
}
.flag
{
display
:
inline-block
;
position
:
relative
;
padding-top
:
1.5rem
;
padding-bottom
:
1.5rem
;
padding-left
:
2rem
;
padding-right
:
1.5rem
;
margin-right
:
2.5rem
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.flag
:after
{
position
:
absolute
;
width
:
2.5rem
;
height
:
100%
;
content
:
""
;
left
:
100%
;
top
:
0
;
background
:
inherit
;
-webkit-clip-path
:
polygon
(
-2px
-1px
,
100%
-1px
,
60%
50%
,
100%
100.7%
,
-2px
100.7%
);
clip-path
:
polygon
(
-2px
-1px
,
100%
-1px
,
60%
50%
,
100%
100.7%
,
-2px
100.7%
)}
.content-block
.head-alt-xl
,
.head-alt-xl
{
font-size
:
5.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-lg
,
.head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-md
,
.head-alt-md
{
font-size
:
2.45rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-base
,
.head-alt-base
{
font-size
:
1.875rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-sm
,
.head-alt-sm
{
font-size
:
1.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-xs
,
.head-alt-xs
{
font-size
:
1.3rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-alt-2xs
,
.head-alt-2xs
{
font-size
:
1.125rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.head-base
,
.head-base
{
font-size
:
1.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-sm
,
.head-sm
{
font-size
:
1.6rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-xs
,
.head-xs
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-2xs
,
.head-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
500
;
line-height
:
1.25
}
.content-block
.head-heavy-base
,
.head-heavy-base
{
font-size
:
1.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-sm
,
.head-heavy-sm
{
font-size
:
1.6rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-xs
,
.head-heavy-xs
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-heavy-2xs
,
.head-heavy-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
.head-allcaps-2xs
,
.head-allcaps-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-3xs
,
.head-allcaps-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-4xs
,
.head-allcaps-4xs
{
font-size
:
.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-2xs
,
.head-allcaps-heavy-2xs
{
font-size
:
1.125rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-3xs
,
.head-allcaps-heavy-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
.head-allcaps-heavy-4xs
,
.head-allcaps-heavy-4xs
{
font-size
:
.875rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
text-transform
:
uppercase
;
line-height
:
1.25
}
hr
:not
(
.hr--unstyled
)
{
border-top-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
));
margin-top
:
1rem
;
margin-bottom
:
1rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
)
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
}
hr
:not
(
.hr--unstyled
)
.hr--big
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
).
hr--big
{
margin-top
:
4rem
;
margin-bottom
:
4rem
}
}
hr
:not
(
.hr--unstyled
)
.hr--condensed
{
margin-top
:
.5rem
;
margin-bottom
:
.5rem
}
@media
(
min-width
:
768px
){
hr
:
not
(.
hr--unstyled
).
hr--condensed
{
margin-top
:
1rem
;
margin-bottom
:
1rem
}
}
.content-block
ol
,
.ordered-list
{
padding-left
:
1rem
}
.content-block
ul
li
,
.unordered-list
li
{
position
:
relative
;
display
:
flex
;
align-items
:
center
}
.content-block
ul
li
:before
,
.unordered-list
li
:before
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
padding-right
:
.5rem
;
font-family
:
"Font Awesome 5 Pro"
;
content
:
"\f45c"
;
font-size
:
7px
;
font-weight
:
600
}
.content-block
ul
.text-sm
li
:before
,
.unordered-list.text-sm
li
:before
{
font-size
:
5px
}
.unordered-list--linked
li
:after
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
));
padding-left
:
.5rem
;
margin-left
:
auto
;
font-family
:
"Font Awesome 5 Pro"
;
content
:
"\f054"
;
font-size
:
10px
;
font-weight
:
300
}
.unordered-list--linked.text-sm
li
:after
{
font-size
:
8px
}
.content-block
ol
,
.ordered-list
{
list-style-type
:
decimal
}
.content-block
p
,
.para
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
1.5
}
.content-block
blockquote
,
.quote
{
font-style
:
italic
;
line-height
:
1.625
;
border-left-width
:
2px
;
--border-opacity
:
1
;
border-color
:
#000
;
border-color
:
rgba
(
0
,
0
,
0
,
var
(
--border-opacity
));
padding-left
:
1rem
;
padding-top
:
.5rem
;
padding-bottom
:
.5rem
;
margin-left
:
1.5rem
;
width
:
80%
;
max-width
:
60em
}
.social-icon
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
border-radius
:
.375rem
;
text-decoration
:
none
}
.social-icon
,
.social-icon
i
,
.social-icon
i
:before
,
.social-icon
:hover
{
text-decoration
:
none
}
.social-icon--4
{
width
:
1.5rem
;
height
:
1.5rem
;
line-height
:
1.5rem
}
.social-icon--5
{
width
:
2rem
;
height
:
2rem
;
line-height
:
2rem
}
.social-icon--6
{
width
:
3rem
;
height
:
3rem
;
line-height
:
3rem
}
.super-button
{
display
:
inline-flex
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-size
:
2.45rem
;
padding-top
:
2rem
;
padding-bottom
:
2rem
;
padding-left
:
1rem
;
padding-right
:
1rem
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
}
.super-button
:hover
{
text-decoration
:
none
}
@media
(
min-width
:
768px
){
.super-button
{
padding-left
:
1.5rem
;
padding-right
:
1.5rem
}}
.super-button__body
{
flex-grow
:
1
}
.super-button__icon
{
margin-left
:
1rem
}
.content-block
table
td
,
.content-block
table
th
,
.content-block
table
thead
td
,
.table
td
,
.table
th
,
.table
thead
td
{
padding-left
:
1.5rem
;
padding-right
:
1.5rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
}
.content-block
table
th
,
.content-block
table
thead
td
,
.table
th
,
.table
thead
td
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.content-block
table
tr
:nth-child
(
even
)
td
,
.table--striped
tr
:nth-child
(
even
)
td
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
))}
.content-block
table
th
,
.content-block
table
thead
td
,
.table--bordered
th
,
.table--bordered
thead
td
{
border-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#303132
;
border-color
:
rgba
(
48
,
49
,
50
,
var
(
--border-opacity
))}
.content-block
table
td
,
.table--bordered
td
{
border-width
:
1px
;
border-color
:
#00000012
}
.table--condensed
td
,
.table--condensed
th
,
.table--condensed
thead
td
{
padding
:
.5rem
}
.article-card
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
}
.article-card-cover
{
position
:
relative
;
height
:
12rem
}
.article-card-cover
img
{
display
:
block
;
-o-object-fit
:
cover
;
object-fit
:
cover
;
width
:
100%
;
height
:
100%
}
.article-card-cover
:before
{
position
:
absolute
;
display
:
block
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
pointer-events
:
none
;
content
:
""
;
background
:
linear-gradient
(
to
bottom
,
rgba
(
0
,
0
,
0
,
0
)
40%
,
rgba
(
0
,
0
,
0
,
.8
))}
.article-card-cover__details
{
position
:
absolute
;
left
:
0
;
bottom
:
0
;
padding
:
1rem
}
.article-card-sharing
{
margin-bottom
:
1rem
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
opacity
:
0
}
.article-card
:hover
.article-card-sharing
{
opacity
:
1
}
.article-card-meta
{
font-size
:
.875rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
--text-opacity
:
0.85
}
.article-card-meta__item
:not
(
:first-child
)
{
margin-left
:
.5rem
}
.article-card-meta__item
:not
(
:first-child
)
:before
{
content
:
""
;
padding-right
:
.5rem
;
border-left-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#fff
;
border-color
:
rgba
(
255
,
255
,
255
,
var
(
--border-opacity
));
--border-opacity
:
0.85
}
.article-card__body
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
padding
:
1rem
}
.article-card__category-button
{
margin-right
:
.25rem
;
margin-bottom
:
.25rem
}
.badge
{
display
:
flex
;
align-items
:
center
;
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
}
.badge
.badge__avatar
{
margin-right
:
1.5rem
;
flex-shrink
:
0
}
.badge
.badge__body
{
text-align
:
left
}
.badge
.badge__title
{
display
:
block
}
.badge
.badge__occupation
{
text-transform
:
uppercase
;
font-size
:
.875rem
;
max-width
:
24rem
;
margin-top
:
.25rem
;
margin-bottom
:
.25rem
}
.badge
.badge__link
{
font-size
:
.875rem
;
font-weight
:
300
;
display
:
block
;
width
:
100%
}
.badge
.badge__link
:not
(
:first-child
)
{
padding-top
:
.25rem
}
.badge.badge--condensed
.badge__avatar
{
margin-right
:
1rem
}
.badge.badge--condensed
.badge__occupation
{
text-transform
:
uppercase
;
font-size
:
.875rem
;
max-width
:
24rem
;
margin-top
:
0
;
margin-bottom
:
0
}
.banner
{
padding-left
:
1rem
;
padding-right
:
1rem
;
padding-top
:
2rem
;
padding-bottom
:
2rem
;
display
:
flex
;
flex-wrap
:
wrap
;
flex-direction
:
column
}
@media
(
min-width
:
992px
){
.banner
{
padding-left
:
2rem
;
padding-right
:
2rem
}}
.banner__icon
{
font-size
:
3rem
}
@media
(
min-width
:
768px
){
.banner__icon
{
font-size
:
4rem
}}
@media
(
min-width
:
992px
){
.banner__icon
{
font-size
:
9rem
}}
.banner__body
{
margin-top
:
auto
}
.banner__cta
{
margin-top
:
2rem
}
.calendar-table-row
{
border-bottom-width
:
1px
;
border-color
:
#00000012
}
.calendar-table-row
:first-of-type
{
border-top-width
:
1px
}
.calendar-table-row--standalone
{
border-left-width
:
1px
}
.calendar-table-row__col
{
height
:
100%
;
border-right-width
:
1px
;
border-color
:
#00000012
;
padding
:
.5rem
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
}
.calendar-table-row__col
:first-child
{
border-left-width
:
1px
}
@media
(
min-width
:
1200px
){
.calendar-table-row__col
:first-child
{
border-left-width
:
0
}}
.candidate-card__body
{
display
:
grid
;
grid-template-areas
:
"avatar bio"
"affiliation affiliation"
"social social"
}
.candidate-card__avatar
{
position
:
relative
;
width
:
6rem
;
padding-left
:
1rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
grid-area
:
avatar
}
.candidate-card__position
{
width
:
2rem
;
height
:
2rem
;
position
:
absolute
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-size
:
1rem
;
border-radius
:
9999px
;
font-weight
:
400
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
text-align
:
center
;
top
:
1rem
;
left
:
.5rem
;
line-height
:
2rem
}
.candidate-card__bio
{
padding
:
1rem
}
.candidate-card__affiliation
{
font-size
:
.875rem
;
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
));
display
:
flex
;
border-top-width
:
1px
;
border-bottom-width
:
1px
;
border-color
:
#00000012
}
.candidate-card__affiliation
>
div
{
padding-top
:
.5rem
;
padding-bottom
:
.5rem
;
padding-left
:
1rem
;
padding-right
:
1rem
;
display
:
flex
;
align-items
:
center
}
.candidate-card__affiliation
>
div
:not
(
:first-child
)
{
border-left-width
:
1px
;
border-color
:
#00000012
}
.candidate-card__affiliation
>
div
:last-child
{
flex
:
1
}
.candidate-card__affiliation
>
div
:first-child
{
width
:
6rem
;
justify-content
:
center
}
@media
(
min-width
:
768px
){
.candidate-card__affiliation
>
div
{
justify-content
:
center
}
.candidate-card__affiliation
>
div
:first-child
{
width
:
auto
;
text-align
:
left
}}
.candidate-card__bio
{
grid-area
:
bio
}
.candidate-card__affiliation
{
grid-area
:
affiliation
}
.candidate-card__social
{
padding
:
1rem
;
grid-area
:
social
}
@media
(
min-width
:
768px
){
.candidate-card__social
{
text-align
:
center
}}
@media
(
min-width
:
576px
){
.candidate-card
{
padding-top
:
3rem
}
.candidate-card__body
{
text-align
:
center
;
grid-template-areas
:
"avatar"
"bio"
"affiliation"
"social"
}
.candidate-card__bio
{
padding
:
1rem
}
.candidate-card__avatar
{
display
:
inline-block
;
position
:
relative
;
margin
:
auto
;
width
:
8rem
;
padding-top
:
0
;
padding-bottom
:
0
;
margin-top
:
-3rem
}
.candidate-card__position
{
width
:
2.5rem
;
height
:
2.5rem
;
font-size
:
1.3rem
;
top
:
1.75rem
;
left
:
-.5rem
;
line-height
:
2.5rem
}}
.candidate-table-row
{
position
:
relative
;
width
:
100%
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
display
:
grid
;
align-items
:
center
;
grid-template-areas
:
"position avatar name"
"position avatar bio"
"position avatar affiliation"
}
.candidate-table-row
:after
{
content
:
''
;
position
:
absolute
;
z-index
:
10
;
width
:
100%
;
height
:
100%
;
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
;
transition-duration
:
.2s
;
box-shadow
:
0
0
0
0
rgba
(
221
,
221
,
221
,
.43
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.37
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.35
)}
.candidate-table-row
:hover:after
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}
.candidate-table-row__position
{
padding-left
:
1rem
;
padding-right
:
1.5rem
;
grid-area
:
position
}
.candidate-table-row__avatar
{
width
:
4rem
;
grid-area
:
avatar
}
.candidate-table-row__name
{
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
name
}
.candidate-table-row__bio
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
padding-top
:
.25rem
;
padding-bottom
:
.25rem
;
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
bio
}
.candidate-table-row__affiliation
{
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-start
;
white-space
:
nowrap
;
padding-left
:
1.5rem
;
padding-right
:
1rem
;
grid-area
:
affiliation
}
@media
(
min-width
:
768px
){
.candidate-table-row
{
padding-top
:
.25rem
;
padding-bottom
:
.25rem
;
grid-template-columns
:
auto
auto
auto
auto
1fr
;
grid-template-areas
:
"position avatar name bio affiliation"
}
.candidate-table-row__avatar
{
width
:
2.5rem
}
.candidate-table-row__name
{
padding-left
:
2rem
;
padding-right
:
2rem
}
.candidate-table-row__position
{
padding-left
:
4rem
}
.candidate-table-row__bio
{
border-left-width
:
1px
;
border-color
:
#00000012
;
padding-top
:
0
;
padding-bottom
:
0
;
padding-left
:
2rem
;
padding-right
:
2rem
}
.candidate-table-row__affiliation
{
padding-left
:
2rem
;
padding-right
:
4rem
}}
.content-block
h1
,
.content-block
h2
,
.content-block
h3
,
.content-block
h4
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
700
;
line-height
:
1.25
}
.content-block
h5
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.content-block
h1
,
.content-block
h2
,
.content-block
h3
{
margin-bottom
:
.4em
}
.content-block
h1
:not
(
:first-child
),
.content-block
h2
:not
(
:first-child
),
.content-block
h3
:not
(
:first-child
)
{
margin-top
:
.95em
}
.content-block
h4
,
.content-block
h5
{
margin-bottom
:
.3em
}
.content-block
h4
:not
(
:first-child
),
.content-block
h5
:not
(
:first-child
)
{
margin-top
:
.95em
}
.content-block
h1
{
font-size
:
1.875rem
}
.content-block
h2
{
font-size
:
1.6rem
}
.content-block
h3
{
font-size
:
1.3rem
}
.content-block
h4
{
font-size
:
1.125rem
}
.content-block
h5
{
font-size
:
1rem
}
.content-block
ol
,
.content-block
p
,
.content-block
ul
{
line-height
:
1.5
}
.content-block
p
:not
(
:last-child
)
{
margin-bottom
:
1em
}
.content-block
strong
{
font-weight
:
700
}
.content-block
small
{
font-size
:
.875rem
}
.content-block
blockquote
:not
(
:first-child
),
.content-block
figure
:not
(
:first-child
),
.content-block
iframe
:not
(
:first-child
),
.content-block
ol
:not
(
:first-child
),
.content-block
table
:not
(
:first-child
),
.content-block
ul
:not
(
:first-child
)
{
margin-top
:
1em
}
.content-block
blockquote
:not
(
:last-child
),
.content-block
figure
:not
(
:last-child
),
.content-block
iframe
:not
(
:last-child
),
.content-block
ol
:not
(
:last-child
),
.content-block
table
:not
(
:last-child
),
.content-block
ul
:not
(
:last-child
)
{
margin-bottom
:
1em
}
.flip-clock
{
text-align
:
center
;
perspective
:
600px
}
.flip-clock__piece
{
position
:
relative
;
display
:
inline-flex
;
justify-content
:
center
;
margin-left
:
.25rem
;
margin-right
:
.25rem
}
.flip-clock__slot
{
position
:
absolute
;
display
:
block
;
bottom
:
0
;
z-index
:
50
;
transform
:
translateY
(
55%
);
text-shadow
:
0
0
1.5rem
#000
}
.flip-card
{
display
:
block
;
position
:
relative
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
padding-bottom
:
.85em
}
.flip-card
:after
{
position
:
absolute
;
content
:
""
;
position
:
absolute
;
width
:
90%
;
height
:
108%
;
top
:
-4%
;
left
:
5%
;
z-index
:
-1
}
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
display
:
block
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
height
:
.85em
;
padding
:
.35em
.1em
.4em
;
backface-visibility
:
hidden
;
-webkit-backface-visibility
:
hidden
;
transform-style
:
preserve-3d
}
.flip-card
:after
,
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
border-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__top
{
border-bottom-width
:
0
}
.flip-card__back-bottom
,
.flip-card__back
:after
,
.flip-card__back
:before
,
.flip-card__bottom
,
.flip-card__top
{
width
:
1.9em
}
.flip-card__back-bottom
,
.flip-card__bottom
{
position
:
absolute
;
left
:
0
;
pointer-events
:
none
;
left
:
0
;
pointer-events
:
none
;
overflow
:
hidden
;
z-index
:
2
}
.flip-card__back-bottom
{
z-index
:
1
}
.flip-card__back-bottom
:after
,
.flip-card__bottom
:after
{
display
:
block
;
margin-top
:
-.85em
}
.flip-card__back-bottom
:after
,
.flip-card__back
:before
,
.flip-card__bottom
:after
{
content
:
attr
(
data-value
)}
.flip-card__back
{
position
:
absolute
;
top
:
0
;
height
:
100%
;
left
:
0
;
pointer-events
:
none
}
.flip-card__back
:before
{
position
:
relative
;
overflow
:
hidden
;
z-index
:
-1
}
.flip
.flip-card__back
:before
{
z-index
:
1
;
-webkit-animation
:
flipTop
.3s
cubic-bezier
(
.37
,
.01
,
.94
,
.35
);
animation
:
flipTop
.3s
cubic-bezier
(
.37
,
.01
,
.94
,
.35
);
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
transform-origin
:
center
bottom
}
.flip
.flip-card__bottom
{
transform-origin
:
center
top
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation
:
flipBottom
.6s
cubic-bezier
(
.15
,
.45
,
.28
,
1
);
animation
:
flipBottom
.6s
cubic-bezier
(
.15
,
.45
,
.28
,
1
)}
@keyframes
flipTop
{
0%
{
transform
:
rotateX
(
0
);
z-index
:
2
}
0%
,
99%
{
opacity
:
1
}
100%
{
transform
:
rotateX
(
-90deg
);
opacity
:
0
}}
@keyframes
flipBottom
{
0%
,
50%
{
z-index
:
-1
;
transform
:
rotateX
(
90deg
);
opacity
:
0
}
51%
{
opacity
:
1
}
100%
{
opacity
:
1
;
transform
:
rotateX
(
0
);
z-index
:
5
}}
.pagination
{
display
:
inline-block
;
margin-left
:
auto
;
margin-right
:
auto
}
.pagination-container
{
text-align
:
center
;
padding-top
:
4rem
;
padding-bottom
:
2rem
}
.switch
{
display
:
inline-flex
;
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
padding
:
.25rem
}
.switch__item
{
padding-top
:
1rem
;
padding-bottom
:
1rem
;
padding-left
:
2rem
;
padding-right
:
2rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
font-size
:
1.3rem
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
text-align
:
center
}
.switch__item
:hover
{
text-decoration
:
none
;
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
))}
.switch__item.switch__item--active
,
.switch__item.switch__item--active
:hover
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
))}
.candidate-card-list
{
display
:
grid
;
grid-auto-flow
:
row
;
grid-gap
:
0
;
gap
:
0
;
grid-row-gap
:
1rem
;
row-gap
:
1rem
}
.candidate-card-list__item-wrapper
{
padding-left
:
.5rem
;
padding-right
:
.5rem
;
border-right-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.candidate-table
{
position
:
relative
}
.candidate-table
.candidate-table-row
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
.candidate-table
.candidate-table-row
:nth-child
(
odd
)
{
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
))}
.candidate-table.candidate-table--fadeout
:after
{
content
:
""
;
background-image
:
linear-gradient
(
to
top
,
#fff
0
,
rgba
(
255
,
255
,
255
,
0
)
100%
);
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.footer__main
{
display
:
grid
;
grid-template-areas
:
"brand"
"social"
"main-links"
}
.footer__brand
{
grid-area
:
brand
}
.footer__social
{
grid-area
:
social
}
.footer__main-links
{
grid-area
:
main-links
}
@media
(
min-width
:
992px
){
.footer__main
{
grid-gap
:
1rem
;
gap
:
1rem
;
grid-template-areas
:
"brand main-links social"
;
grid-template-columns
:
25%
1fr
25%
}}
.footer-contacts
{
grid-gap
:
1rem
;
gap
:
1rem
;
grid-template-columns
:
repeat
(
1
,
minmax
(
0
,
1fr
))}
@media
(
min-width
:
992px
){
.footer-contacts
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}}
@media
(
min-width
:
1200px
){
.footer-contacts
{
grid-template-columns
:
1fr
1fr
1fr
auto
}}
.hero
{
padding-top
:
1rem
;
padding-bottom
:
1rem
}
@media
(
min-width
:
768px
){
.hero
{
padding-top
:
6rem
;
padding-bottom
:
6rem
}}
.hero--image
{
background
:
linear-gradient
(
rgba
(
0
,
0
,
0
,
.3
),
rgba
(
0
,
0
,
0
,
.3
)),
var
(
--image-url
);
position
:
relative
;
background-size
:
cover
;
background-repeat
:
no-repeat
;
background-position
:
center
;
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.navbar
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
overflow
:
hidden
}
.navbar__content
{
display
:
grid
;
align-items
:
center
;
grid-template-areas
:
"brand menutoggle"
"main main"
"external external"
"actions actions"
;
grid-template-columns
:
2rem
1fr
}
.navbar__brand
{
grid-area
:
brand
}
.navbar__external
{
grid-area
:
external
}
.navbar__main
{
grid-area
:
main
}
.navbar__actions
{
grid-area
:
actions
}
.navbar__menutoggle
{
grid-area
:
menutoggle
}
.navbar__section--expandable
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
padding-left
:
2rem
;
padding-right
:
2rem
;
padding-top
:
1rem
;
padding-bottom
:
1rem
;
margin
:
0
-2rem
}
.navbar-menu__item
{
display
:
block
}
.navbar-menu__link
{
font-size
:
1.3rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
uppercase
;
line-height
:
2
}
.navbar-menu__submenu
.navbar-menu__link
{
font-size
:
1.125rem
;
--text-opacity
:
1
;
color
:
#adadad
;
color
:
rgba
(
173
,
173
,
173
,
var
(
--text-opacity
));
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
text-transform
:
none
;
line-height
:
1.5
;
padding-left
:
1rem
}
.navbar-menu__link
,
.navbar-menu__link
:hover
{
text-decoration
:
none
}
.navbar-menu__submenu-toggle
{
display
:
flex
;
align-items
:
center
}
.navbar-menu__submenu-toggle
:after
{
margin-bottom
:
-.125rem
;
margin-left
:
auto
;
font-weight
:
300
;
font-size
:
.875rem
;
content
:
"\f078"
;
font-family
:
"Font Awesome 5 Pro"
}
@media
(
min-width
:
992px
){
.navbar
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.navbar__content
{
grid-template-areas
:
"brand external actions"
"brand main actions"
;
grid-template-columns
:
8rem
1fr
auto
}
.navbar__section--expandable
{
background-color
:
transparent
;
padding-left
:
0
;
padding-right
:
0
;
padding-top
:
0
;
padding-bottom
:
0
;
margin
:
0
}
.navbar-menu__item
{
display
:
inline-block
}
.navbar-menu__item
:not
(
:first-child
)
{
margin-left
:
1rem
}
.navbar-menu__link
{
font-size
:
1.125rem
;
line-height
:
1.5
}
.navbar-menu__submenu-toggle
:after
{
margin-left
:
.5rem
}}
@media
(
min-width
:
1366px
){
.navbar-menu__item
:not
(
:first-child
)
{
margin-left
:
1.5rem
}
.navbar-menu__link
{
font-size
:
1.3rem
}}
.subnav
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
));
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
));
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
padding-top
:
.5rem
;
padding-bottom
:
.5rem
}
.candidate-detail__hero
{
z-index
:
-1
}
.candidate-detail__sidebar
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
@media
(
min-width
:
992px
){
.candidate-detail__sidebar
{
margin-top
:
-6rem
}}
.candidate-detail__avatar
{
margin-top
:
-9rem
}
@media
(
min-width
:
992px
){
.candidate-detail__avatar
{
margin-top
:
-11rem
}}
.space-y-2
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
.5rem
*
var
(
--space-y-reverse
))}
.space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-4
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
1rem
*
var
(
--space-y-reverse
))}
.space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-8
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
2rem
*
var
(
--space-y-reverse
))}
.space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.space-y-12
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
3rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
3rem
*
var
(
--space-y-reverse
))}
.space-y-16
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
4rem
*
var
(
--space-y-reverse
))}
.space-x-0
\
/
5
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.125rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.125rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.divide-x
>
:not
(
template
)~
:not
(
template
)
{
--divide-x-reverse
:
0
;
border-right-width
:
calc
(
1px
*
var
(
--divide-x-reverse
));
border-left-width
:
calc
(
1px
*
calc
(
1
-
var
(
--divide-x-reverse
)))}
.bg-black
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
))}
.bg-white
{
--bg-opacity
:
1
;
background-color
:
#fff
;
background-color
:
rgba
(
255
,
255
,
255
,
var
(
--bg-opacity
))}
.bg-grey-50
{
--bg-opacity
:
1
;
background-color
:
#f7f7f7
;
background-color
:
rgba
(
247
,
247
,
247
,
var
(
--bg-opacity
))}
.bg-grey-100
{
--bg-opacity
:
1
;
background-color
:
#f3f3f3
;
background-color
:
rgba
(
243
,
243
,
243
,
var
(
--bg-opacity
))}
.bg-grey-125
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
))}
.bg-grey-150
{
background-color
:
#00000012
}
.bg-grey-200
{
--bg-opacity
:
1
;
background-color
:
#adadad
;
background-color
:
rgba
(
173
,
173
,
173
,
var
(
--bg-opacity
))}
.bg-grey-300
{
--bg-opacity
:
1
;
background-color
:
#4c4c4c
;
background-color
:
rgba
(
76
,
76
,
76
,
var
(
--bg-opacity
))}
.bg-grey-400
{
--bg-opacity
:
1
;
background-color
:
#343434
;
background-color
:
rgba
(
52
,
52
,
52
,
var
(
--bg-opacity
))}
.bg-grey-500
{
--bg-opacity
:
1
;
background-color
:
#303132
;
background-color
:
rgba
(
48
,
49
,
50
,
var
(
--bg-opacity
))}
.bg-grey-600
{
--bg-opacity
:
1
;
background-color
:
#262626
;
background-color
:
rgba
(
38
,
38
,
38
,
var
(
--bg-opacity
))}
.bg-grey-700
{
--bg-opacity
:
1
;
background-color
:
#202020
;
background-color
:
rgba
(
32
,
32
,
32
,
var
(
--bg-opacity
))}
.bg-grey-800
{
--bg-opacity
:
1
;
background-color
:
#1f1f1f
;
background-color
:
rgba
(
31
,
31
,
31
,
var
(
--bg-opacity
))}
.bg-red-100
{
--bg-opacity
:
1
;
background-color
:
#d6151b
;
background-color
:
rgba
(
214
,
21
,
27
,
var
(
--bg-opacity
))}
.bg-red-200
{
--bg-opacity
:
1
;
background-color
:
#c11318
;
background-color
:
rgba
(
193
,
19
,
24
,
var
(
--bg-opacity
))}
.bg-green-100
{
--bg-opacity
:
1
;
background-color
:
#29bc51
;
background-color
:
rgba
(
41
,
188
,
81
,
var
(
--bg-opacity
))}
.bg-green-200
{
--bg-opacity
:
1
;
background-color
:
#25a949
;
background-color
:
rgba
(
37
,
169
,
73
,
var
(
--bg-opacity
))}
.bg-green-300
{
--bg-opacity
:
1
;
background-color
:
#229a42
;
background-color
:
rgba
(
34
,
154
,
66
,
var
(
--bg-opacity
))}
.bg-brands-facebook
{
--bg-opacity
:
1
;
background-color
:
#067ceb
;
background-color
:
rgba
(
6
,
124
,
235
,
var
(
--bg-opacity
))}
.bg-brands-twitter
{
--bg-opacity
:
1
;
background-color
:
#00c9ff
;
background-color
:
rgba
(
0
,
201
,
255
,
var
(
--bg-opacity
))}
.bg-brands-gmail
{
--bg-opacity
:
1
;
background-color
:
#ec230e
;
background-color
:
rgba
(
236
,
35
,
14
,
var
(
--bg-opacity
))}
.bg-brands-linkedin
{
--bg-opacity
:
1
;
background-color
:
#0066a9
;
background-color
:
rgba
(
0
,
102
,
169
,
var
(
--bg-opacity
))}
.hover
\
:bg-black:hover
{
--bg-opacity
:
1
;
background-color
:
#000
;
background-color
:
rgba
(
0
,
0
,
0
,
var
(
--bg-opacity
))}
.hover
\
:bg-grey-125:hover
{
--bg-opacity
:
1
;
background-color
:
#f0f0f0
;
background-color
:
rgba
(
240
,
240
,
240
,
var
(
--bg-opacity
))}
.border-grey-400
{
--border-opacity
:
1
;
border-color
:
#343434
;
border-color
:
rgba
(
52
,
52
,
52
,
var
(
--border-opacity
))}
.border-t
{
border-top-width
:
1px
}
.block
{
display
:
block
}
.flex
{
display
:
flex
}
.inline-flex
{
display
:
inline-flex
}
.table
{
display
:
table
}
.grid
{
display
:
grid
}
.hidden
{
display
:
none
}
.flex-col
{
flex-direction
:
column
}
.items-start
{
align-items
:
flex-start
}
.items-center
{
align-items
:
center
}
.self-start
{
align-self
:
flex-start
}
.justify-end
{
justify-content
:
flex-end
}
.flex-grow
{
flex-grow
:
1
}
.order-1
{
order
:
1
}
.order-2
{
order
:
2
}
.order-3
{
order
:
3
}
.order-first
{
order
:
-9999
}
.font-alt
{
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
}
.font-body
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
}
.font-condensed
{
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
}
.font-light
{
font-weight
:
300
}
.font-medium
{
font-weight
:
500
}
.font-bold
{
font-weight
:
700
}
.h-32
{
height
:
8rem
}
.h-52
{
height
:
13rem
}
.h-full
{
height
:
100%
}
.text-xs
{
font-size
:
.75rem
}
.text-sm
{
font-size
:
.875rem
}
.text-base
{
font-size
:
1rem
}
.text-lg
{
font-size
:
1.125rem
}
.text-xl
{
font-size
:
1.3rem
}
.text-2xl
{
font-size
:
1.6rem
}
.text-3xl
{
font-size
:
1.875rem
}
.text-4xl
{
font-size
:
2.45rem
}
.text-5xl
{
font-size
:
3rem
}
.text-6xl
{
font-size
:
4rem
}
.text-7xl
{
font-size
:
5.6rem
}
.leading-snug
{
line-height
:
1.375
}
.leading-normal
{
line-height
:
1.5
}
.leading-loose
{
line-height
:
2
}
.m-auto
{
margin
:
auto
}
.my-4
{
margin-top
:
1rem
;
margin-bottom
:
1rem
}
.my-8
{
margin-top
:
2rem
;
margin-bottom
:
2rem
}
.mr-0
{
margin-right
:
0
}
.mr-1
{
margin-right
:
.25rem
}
.mt-2
{
margin-top
:
.5rem
}
.mr-2
{
margin-right
:
.5rem
}
.mb-2
{
margin-bottom
:
.5rem
}
.ml-2
{
margin-left
:
.5rem
}
.mt-4
{
margin-top
:
1rem
}
.mb-4
{
margin-bottom
:
1rem
}
.ml-4
{
margin-left
:
1rem
}
.mt-6
{
margin-top
:
1.5rem
}
.mb-6
{
margin-bottom
:
1.5rem
}
.mt-8
{
margin-top
:
2rem
}
.mb-8
{
margin-bottom
:
2rem
}
.mt-16
{
margin-top
:
4rem
}
.max-w-2xl
{
max-width
:
42rem
}
.max-w-5xl
{
max-width
:
64rem
}
.max-w-full
{
max-width
:
100%
}
.object-cover
{
-o-object-fit
:
cover
;
object-fit
:
cover
}
.overflow-hidden
{
overflow
:
hidden
}
.p-2
{
padding
:
.5rem
}
.p-4
{
padding
:
1rem
}
.py-3
{
padding-top
:
.75rem
;
padding-bottom
:
.75rem
}
.py-4
{
padding-top
:
1rem
;
padding-bottom
:
1rem
}
.px-4
{
padding-left
:
1rem
;
padding-right
:
1rem
}
.py-8
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.px-8
{
padding-left
:
2rem
;
padding-right
:
2rem
}
.py-12
{
padding-top
:
3rem
;
padding-bottom
:
3rem
}
.py-16
{
padding-top
:
4rem
;
padding-bottom
:
4rem
}
.pr-2
{
padding-right
:
.5rem
}
.pl-2
{
padding-left
:
.5rem
}
.pt-4
{
padding-top
:
1rem
}
.pr-4
{
padding-right
:
1rem
}
.pb-4
{
padding-bottom
:
1rem
}
.pl-4
{
padding-left
:
1rem
}
.pb-6
{
padding-bottom
:
1.5rem
}
.pt-8
{
padding-top
:
2rem
}
.pt-24
{
padding-top
:
6rem
}
.pb-24
{
padding-bottom
:
6rem
}
.text-center
{
text-align
:
center
}
.text-right
{
text-align
:
right
}
.text-white
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.text-grey-200
{
--text-opacity
:
1
;
color
:
#adadad
;
color
:
rgba
(
173
,
173
,
173
,
var
(
--text-opacity
))}
.text-red-100
{
--text-opacity
:
1
;
color
:
#d6151b
;
color
:
rgba
(
214
,
21
,
27
,
var
(
--text-opacity
))}
.text-brands-facebook
{
--text-opacity
:
1
;
color
:
#067ceb
;
color
:
rgba
(
6
,
124
,
235
,
var
(
--text-opacity
))}
.hover
\
:text-black:hover
{
--text-opacity
:
1
;
color
:
#000
;
color
:
rgba
(
0
,
0
,
0
,
var
(
--text-opacity
))}
.hover
\
:text-white:hover
{
--text-opacity
:
1
;
color
:
#fff
;
color
:
rgba
(
255
,
255
,
255
,
var
(
--text-opacity
))}
.italic
{
font-style
:
italic
}
.uppercase
{
text-transform
:
uppercase
}
.w-6
{
width
:
1.5rem
}
.w-8
{
width
:
2rem
}
.w-32
{
width
:
8rem
}
.w-80
{
width
:
20rem
}
.w-full
{
width
:
100%
}
.gap-2
{
grid-gap
:
.5rem
;
gap
:
.5rem
}
.gap-4
{
grid-gap
:
1rem
;
gap
:
1rem
}
.gap-8
{
grid-gap
:
2rem
;
gap
:
2rem
}
.col-gap-8
{
grid-column-gap
:
2rem
;
-moz-column-gap
:
2rem
;
column-gap
:
2rem
}
.row-gap-8
{
grid-row-gap
:
2rem
;
row-gap
:
2rem
}
.grid-cols-1
{
grid-template-columns
:
repeat
(
1
,
minmax
(
0
,
1fr
))}
.grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.grid-cols-12
{
grid-template-columns
:
repeat
(
12
,
minmax
(
0
,
1fr
))}
.col-span-2
{
grid-column
:
span
2
/
span
2
}
.col-span-3
{
grid-column
:
span
3
/
span
3
}
.col-span-4
{
grid-column
:
span
4
/
span
4
}
.col-span-8
{
grid-column
:
span
8
/
span
8
}
.transition
{
transition-property
:
background-color
,
border-color
,
color
,
fill
,
stroke
,
opacity
,
box-shadow
,
transform
}
.duration-200
{
transition-duration
:
.2s
}
.hover
\
:line-white:hover
{
-webkit-text-decoration-color
:
#fff
;
text-decoration-color
:
#fff
}
.elevation-0
{
box-shadow
:
0
0
0
0
rgba
(
221
,
221
,
221
,
.43
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.37
),
0
0
0
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-1
{
box-shadow
:
0
2px
1px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
1px
1px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
3px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-2
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-3
{
box-shadow
:
0
3px
3px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
3px
4px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
8px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-4
{
box-shadow
:
0
2px
4px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
4px
5px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
10px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-5
{
box-shadow
:
0
3px
5px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
5px
8px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
14px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-6
{
box-shadow
:
0
3px
5px
-1px
rgba
(
221
,
221
,
221
,
.43
),
0
6px
10px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
18px
0
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-7
{
box-shadow
:
0
4px
5px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
7px
10px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
2px
16px
1px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-8
{
box-shadow
:
0
5px
5px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
8px
10px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
3px
14px
2px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-9
{
box-shadow
:
0
5px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
9px
12px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
3px
16px
2px
rgba
(
221
,
221
,
221
,
.35
)}
.elevation-21
{
box-shadow
:
0
10px
13px
-6px
rgba
(
221
,
221
,
221
,
.43
),
0
21px
33px
3px
rgba
(
221
,
221
,
221
,
.37
),
0
8px
40px
7px
rgba
(
221
,
221
,
221
,
.35
)}
.hover
\
:elevation-10:hover
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}
.inline-block-nogap
{
font-size
:
0
}
:root
{
font-size
:
16px
}
body
{
font-family
:
Roboto
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
1
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
font-size
:
1rem
}
a
:hover
{
text-decoration
:
underline
}
@media
(
min-width
:
576px
){
.sm
\
:avatar--lg
{
width
:
7rem
}
.btn.sm
\
:btn--autowidth
{
width
:
auto
}
.sm
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.content-block
.sm
\
:head-alt-lg
,
.sm
\
:head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.sm
\
:candidate-card-list__item-wrapper
{
padding-left
:
.5rem
;
padding-right
:
.5rem
;
border-right-width
:
1px
;
--border-opacity
:
1
;
border-color
:
#f3f3f3
;
border-color
:
rgba
(
243
,
243
,
243
,
var
(
--border-opacity
))}
.sm
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.sm
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.sm
\
:space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.sm
\
:space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.sm
\
:flex-row
{
flex-direction
:
row
}
.sm
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}}
@media
(
min-width
:
768px
){
.btn.md
\
:btn--autowidth
{
width
:
auto
}
.md
\
:card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.md
\
:card__body
{
padding
:
2rem
}
.md
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.content-block
.md
\
:head-alt-xl
,
.md
\
:head-alt-xl
{
font-size
:
5.6rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-alt-lg
,
.md
\
:head-alt-lg
{
font-size
:
4rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-alt-md
,
.md
\
:head-alt-md
{
font-size
:
2.45rem
;
font-family
:
Bebas
Neue
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
line-height
:
.9
}
.content-block
.md
\
:head-allcaps-3xs
,
.md
\
:head-allcaps-3xs
{
font-size
:
1rem
;
font-family
:
Roboto
Condensed
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
400
;
text-transform
:
uppercase
;
line-height
:
1.25
}
.md
\
:candidate-card-list__item-wrapper--border
{
border-right-width
:
1px
}
.md
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.md
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.md
\
:space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.md
\
:block
{
display
:
block
}
.md
\
:inline-block
{
display
:
inline-block
}
.md
\
:flex-row
{
flex-direction
:
row
}
.md
\
:items-center
{
align-items
:
center
}
.md
\
:text-3xl
{
font-size
:
1.875rem
}
.md
\
:text-7xl
{
font-size
:
5.6rem
}
.md
\
:mt-0
{
margin-top
:
0
}
.md
\
:mr-2
{
margin-right
:
.5rem
}
.md
\
:mb-4
{
margin-bottom
:
1rem
}
.md
\
:mt-8
{
margin-top
:
2rem
}
.md
\
:mt-16
{
margin-top
:
4rem
}
.md
\
:mt-24
{
margin-top
:
6rem
}
.md
\
:pt-0
{
padding-top
:
0
}
.md
\
:pt-8
{
padding-top
:
2rem
}
.md
\
:w-40
{
width
:
10rem
}
.md
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.md
\
:grid-cols-6
{
grid-template-columns
:
repeat
(
6
,
minmax
(
0
,
1fr
))}
.md
\
:col-span-1
{
grid-column
:
span
1
/
span
1
}
.md
\
:col-span-2
{
grid-column
:
span
2
/
span
2
}
.md
\
:elevation-10
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}}
@media
(
min-width
:
992px
){
.lg
\
:avatar--3xl
{
width
:
14rem
}
.lg
\
:card
{
box-shadow
:
0
3px
1px
-2px
rgba
(
221
,
221
,
221
,
.43
),
0
2px
2px
0
rgba
(
221
,
221
,
221
,
.37
),
0
1px
5px
0
rgba
(
221
,
221
,
221
,
.35
)}
.lg
\
:card__body
{
padding
:
2rem
}
.lg
\
:container-padding--auto
{
margin-left
:
0
;
margin-right
:
0
}
.lg
\
:candidate-card-list__item-wrapper--border
{
border-right-width
:
1px
}
.lg
\
:candidate-card-list__item-wrapper--noborder
{
border-width
:
0
}
.lg
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-0
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
0px
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
0px
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-y-2
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
.5rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-y-4
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
1rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-4
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
1rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
1rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-x-8
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
2rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
2rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:space-y-16
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
4rem
*
var
(
--space-y-reverse
))}
.lg
\
:space-x-16
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
4rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.lg
\
:border-grey-300
{
--border-opacity
:
1
;
border-color
:
#4c4c4c
;
border-color
:
rgba
(
76
,
76
,
76
,
var
(
--border-opacity
))}
.lg
\
:border-t-0
{
border-top-width
:
0
}
.lg
\
:border-t
{
border-top-width
:
1px
}
.lg
\
:border-r
{
border-right-width
:
1px
}
.lg
\
:block
{
display
:
block
}
.lg
\
:inline-block
{
display
:
inline-block
}
.lg
\
:flex
{
display
:
flex
}
.lg
\
:grid
{
display
:
grid
}
.lg
\
:hidden
{
display
:
none
}
.lg
\
:flex-row
{
flex-direction
:
row
}
.lg
\
:flex-col
{
flex-direction
:
column
}
.lg
\
:items-end
{
align-items
:
flex-end
}
.lg
\
:items-center
{
align-items
:
center
}
.lg
\
:order-last
{
order
:
9999
}
.lg
\
:text-sm
{
font-size
:
.875rem
}
.lg
\
:text-4xl
{
font-size
:
2.45rem
}
.lg
\
:text-8xl
{
font-size
:
6.5rem
}
.lg
\
:leading-normal
{
line-height
:
1.5
}
.lg
\
:my-0
{
margin-top
:
0
;
margin-bottom
:
0
}
.lg
\
:my-16
{
margin-top
:
4rem
;
margin-bottom
:
4rem
}
.lg
\
:mt-0
{
margin-top
:
0
}
.lg
\
:mb-0
{
margin-bottom
:
0
}
.lg
\
:mt-4
{
margin-top
:
1rem
}
.lg
\
:mb-4
{
margin-bottom
:
1rem
}
.lg
\
:mt-8
{
margin-top
:
2rem
}
.lg
\
:p-8
{
padding
:
2rem
}
.lg
\
:py-0
{
padding-top
:
0
;
padding-bottom
:
0
}
.lg
\
:py-8
{
padding-top
:
2rem
;
padding-bottom
:
2rem
}
.lg
\
:py-12
{
padding-top
:
3rem
;
padding-bottom
:
3rem
}
.lg
\
:py-16
{
padding-top
:
4rem
;
padding-bottom
:
4rem
}
.lg
\
:py-24
{
padding-top
:
6rem
;
padding-bottom
:
6rem
}
.lg
\
:px-24
{
padding-left
:
6rem
;
padding-right
:
6rem
}
.lg
\
:py-32
{
padding-top
:
8rem
;
padding-bottom
:
8rem
}
.lg
\
:pt-0
{
padding-top
:
0
}
.lg
\
:pb-2
{
padding-bottom
:
.5rem
}
.lg
\
:pr-8
{
padding-right
:
2rem
}
.lg
\
:pb-8
{
padding-bottom
:
2rem
}
.lg
\
:pb-16
{
padding-bottom
:
4rem
}
.lg
\
:pt-24
{
padding-top
:
6rem
}
.lg
\
:pb-24
{
padding-bottom
:
6rem
}
.lg
\
:pt-40
{
padding-top
:
10rem
}
.lg
\
:text-left
{
text-align
:
left
}
.lg
\
:text-center
{
text-align
:
center
}
.lg
\
:text-right
{
text-align
:
right
}
.lg
\
:w-1
\
/
3
{
width
:
33.333333%
}
.lg
\
:w-2
\
/
3
{
width
:
66.666667%
}
.lg
\
:w-1
\
/
4
{
width
:
25%
}
.lg
\
:w-2
\
/
4
{
width
:
50%
}
.lg
\
:w-2
\
/
5
{
width
:
40%
}
.lg
\
:w-3
\
/
5
{
width
:
60%
}
.lg
\
:w-full
{
width
:
100%
}
.lg
\
:gap-4
{
grid-gap
:
1rem
;
gap
:
1rem
}
.lg
\
:gap-8
{
grid-gap
:
2rem
;
gap
:
2rem
}
.lg
\
:grid-cols-2
{
grid-template-columns
:
repeat
(
2
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-3
{
grid-template-columns
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-4
{
grid-template-columns
:
repeat
(
4
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-6
{
grid-template-columns
:
repeat
(
6
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-cols-7
{
grid-template-columns
:
repeat
(
7
,
minmax
(
0
,
1fr
))}
.lg
\
:col-span-3
{
grid-column
:
span
3
/
span
3
}
.lg
\
:col-span-4
{
grid-column
:
span
4
/
span
4
}
.lg
\
:grid-rows-3
{
grid-template-rows
:
repeat
(
3
,
minmax
(
0
,
1fr
))}
.lg
\
:grid-rows-5
{
grid-template-rows
:
repeat
(
5
,
minmax
(
0
,
1fr
))}
.lg
\
:row-span-1
{
grid-row
:
span
1
/
span
1
}
.lg
\
:row-span-2
{
grid-row
:
span
2
/
span
2
}
.lg
\
:row-span-3
{
grid-row
:
span
3
/
span
3
}
.lg
\
:row-span-4
{
grid-row
:
span
4
/
span
4
}
.lg
\
:row-span-5
{
grid-row
:
span
5
/
span
5
}
.lg
\
:elevation-10
{
box-shadow
:
0
6px
6px
-3px
rgba
(
221
,
221
,
221
,
.43
),
0
10px
14px
1px
rgba
(
221
,
221
,
221
,
.37
),
0
4px
18px
3px
rgba
(
221
,
221
,
221
,
.35
)}}
@media
(
min-width
:
1200px
){
.xl
\
:space-y-0
>
:not
(
template
)~
:not
(
template
)
{
--space-y-reverse
:
0
;
margin-top
:
calc
(
0px
*
calc
(
1
-
var
(
--space-y-reverse
)));
margin-bottom
:
calc
(
0px
*
var
(
--space-y-reverse
))}
.xl
\
:space-x-2
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
.5rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
.5rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.xl
\
:space-x-16
>
:not
(
template
)~
:not
(
template
)
{
--space-x-reverse
:
0
;
margin-right
:
calc
(
4rem
*
var
(
--space-x-reverse
));
margin-left
:
calc
(
4rem
*
calc
(
1
-
var
(
--space-x-reverse
)))}
.xl
\
:flex-row
{
flex-direction
:
row
}
.xl
\
:text-base
{
font-size
:
1rem
}
.xl
\
:mt-0
{
margin-top
:
0
}
.xl
\
:text-right
{
text-align
:
right
}
.xl
\
:w-1
\
/
3
{
width
:
33.333333%
}
.xl
\
:w-2
\
/
3
{
width
:
66.666667%
}
.xl
\
:grid-cols-8
{
grid-template-columns
:
repeat
(
8
,
minmax
(
0
,
1fr
))}
.xl
\
:col-span-1
{
grid-column
:
span
1
/
span
1
}
.xl
\
:col-span-3
{
grid-column
:
span
3
/
span
3
}}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment
