Skip to content

Instantly share code, notes, and snippets.

@march213

march213/loremimpsum.css

Created May 22, 2018 20:54
Show Gist options
  • Save march213/dbb9989da46de2acc97695022b3fd18e to your computer and use it in GitHub Desktop.
Save march213/dbb9989da46de2acc97695022b3fd18e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loremimpsum.css
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
display: block
}
ul,ol,li {
list-style: none;
margin: 0;
padding: 0
}
audio,canvas,progress,video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
progress {
vertical-align: baseline
}
template,[hidden] {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,strong {
font-weight: inherit
}
b,strong {
font-weight: bolder
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
code,kbd,pre,samp {
font-family: monospace, monospace;
font-size: 1em
}
figure {
margin: 0;
padding: 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,input,select,textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,input {
overflow: visible
}
button,select {
text-transform: none
}
button,html [type="button"],[type="reset"],[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
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-cancel-button,[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
* {
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent
}
::selection {
color: #FFFFFF;
background: #FF6A67
}
::-moz-selection {
color: #FFFFFF;
background: #FF6A67
}
body {
background-color: #556271
}
.body-header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100vw
}
.body-footer {
position: relative;
padding: 5rem 0 3rem;
animation: slideUpDelay 600ms normal ease-out
}
@media only screen and (min-width: 40.063em) {
.body-footer {
padding:8rem 0 4rem
}
}
@media only screen and (min-width: 80.063em) {
.body-footer {
padding:10rem 0 5rem
}
}
.body-parallax {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 0
}
.body-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -1;
background: #556271;
transition: opacity 200ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.menu-is-open .body-overlay,.lang-is-open .body-overlay {
opacity: 0.95;
z-index: 5
}
*,*:before,*:after {
box-sizing: border-box
}
.g {
position: relative;
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
width: 100%;
margin: 0 auto;
max-width: 100vw;
padding: 0 0.5rem
}
@media only screen and (min-width: 20.063em) {
.g {
max-width:100vw;
padding: 0 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g {
max-width:100vw;
padding: 0 2rem
}
}
@media only screen and (min-width: 60.063em) {
.g {
max-width:1308px;
padding: 0 2rem
}
}
@media only screen and (min-width: 80.063em) {
.g {
max-width:1488px;
padding: 0 2rem
}
}
.gr {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
width: 100%
}
@media only screen {
.g0-xs {
position: relative;
flex: 0 1 auto;
width: 0%;
max-width: 0%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g0-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g0-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g0-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g0-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g0-xs-offset {
margin-left: 0% !important
}
.g1-xs {
position: relative;
flex: 0 1 auto;
width: 8.33333%;
max-width: 8.33333%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g1-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g1-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g1-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g1-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g1-xs-offset {
margin-left: 8.33333% !important
}
.g2-xs {
position: relative;
flex: 0 1 auto;
width: 16.66667%;
max-width: 16.66667%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g2-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g2-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g2-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g2-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g2-xs-offset {
margin-left: 16.66667% !important
}
.g3-xs {
position: relative;
flex: 0 1 auto;
width: 25%;
max-width: 25%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g3-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g3-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g3-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g3-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g3-xs-offset {
margin-left: 25% !important
}
.g4-xs {
position: relative;
flex: 0 1 auto;
width: 33.33333%;
max-width: 33.33333%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g4-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g4-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g4-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g4-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g4-xs-offset {
margin-left: 33.33333% !important
}
.g5-xs {
position: relative;
flex: 0 1 auto;
width: 41.66667%;
max-width: 41.66667%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g5-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g5-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g5-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g5-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g5-xs-offset {
margin-left: 41.66667% !important
}
.g6-xs {
position: relative;
flex: 0 1 auto;
width: 50%;
max-width: 50%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g6-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g6-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g6-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g6-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g6-xs-offset {
margin-left: 50% !important
}
.g7-xs {
position: relative;
flex: 0 1 auto;
width: 58.33333%;
max-width: 58.33333%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g7-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g7-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g7-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g7-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g7-xs-offset {
margin-left: 58.33333% !important
}
.g8-xs {
position: relative;
flex: 0 1 auto;
width: 66.66667%;
max-width: 66.66667%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g8-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g8-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g8-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g8-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g8-xs-offset {
margin-left: 66.66667% !important
}
.g9-xs {
position: relative;
flex: 0 1 auto;
width: 75%;
max-width: 75%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g9-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g9-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g9-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g9-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g9-xs-offset {
margin-left: 75% !important
}
.g10-xs {
position: relative;
flex: 0 1 auto;
width: 83.33333%;
max-width: 83.33333%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g10-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g10-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g10-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g10-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g10-xs-offset {
margin-left: 83.33333% !important
}
.g11-xs {
position: relative;
flex: 0 1 auto;
width: 91.66667%;
max-width: 91.66667%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g11-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g11-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g11-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g11-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g11-xs-offset {
margin-left: 91.66667% !important
}
.g12-xs {
position: relative;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem
}
}
@media only screen and (min-width: 20.063em) {
.g12-xs {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.g12-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g12-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 80.063em) {
.g12-xs {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen {
.g12-xs-offset {
margin-left: 100% !important
}
}
@media only screen and (min-width: 20.063em) {
.g0-sm {
position:relative;
flex: 0 1 auto;
width: 0%;
max-width: 0%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g0-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g0-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g0-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g0-sm-offset {
margin-left:0% !important
}
.g1-sm {
position: relative;
flex: 0 1 auto;
width: 8.33333%;
max-width: 8.33333%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g1-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g1-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g1-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g1-sm-offset {
margin-left:8.33333% !important
}
.g2-sm {
position: relative;
flex: 0 1 auto;
width: 16.66667%;
max-width: 16.66667%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g2-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g2-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g2-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g2-sm-offset {
margin-left:16.66667% !important
}
.g3-sm {
position: relative;
flex: 0 1 auto;
width: 25%;
max-width: 25%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g3-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g3-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g3-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g3-sm-offset {
margin-left:25% !important
}
.g4-sm {
position: relative;
flex: 0 1 auto;
width: 33.33333%;
max-width: 33.33333%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g4-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g4-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g4-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g4-sm-offset {
margin-left:33.33333% !important
}
.g5-sm {
position: relative;
flex: 0 1 auto;
width: 41.66667%;
max-width: 41.66667%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g5-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g5-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g5-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g5-sm-offset {
margin-left:41.66667% !important
}
.g6-sm {
position: relative;
flex: 0 1 auto;
width: 50%;
max-width: 50%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g6-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g6-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g6-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g6-sm-offset {
margin-left:50% !important
}
.g7-sm {
position: relative;
flex: 0 1 auto;
width: 58.33333%;
max-width: 58.33333%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g7-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g7-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g7-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g7-sm-offset {
margin-left:58.33333% !important
}
.g8-sm {
position: relative;
flex: 0 1 auto;
width: 66.66667%;
max-width: 66.66667%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g8-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g8-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g8-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g8-sm-offset {
margin-left:66.66667% !important
}
.g9-sm {
position: relative;
flex: 0 1 auto;
width: 75%;
max-width: 75%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g9-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g9-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g9-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g9-sm-offset {
margin-left:75% !important
}
.g10-sm {
position: relative;
flex: 0 1 auto;
width: 83.33333%;
max-width: 83.33333%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g10-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g10-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g10-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g10-sm-offset {
margin-left:83.33333% !important
}
.g11-sm {
position: relative;
flex: 0 1 auto;
width: 91.66667%;
max-width: 91.66667%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g11-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g11-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g11-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g11-sm-offset {
margin-left:91.66667% !important
}
.g12-sm {
position: relative;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
padding-left: 0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 40.063em) {
.g12-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 60.063em) {
.g12-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) and (min-width: 80.063em) {
.g12-sm {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 20.063em) {
.g12-sm-offset {
margin-left:100% !important
}
}
@media only screen and (min-width: 40.063em) {
.g0-md {
position:relative;
flex: 0 1 auto;
width: 0%;
max-width: 0%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g0-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g0-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g0-md-offset {
margin-left:0% !important
}
.g1-md {
position: relative;
flex: 0 1 auto;
width: 8.33333%;
max-width: 8.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g1-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g1-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g1-md-offset {
margin-left:8.33333% !important
}
.g2-md {
position: relative;
flex: 0 1 auto;
width: 16.66667%;
max-width: 16.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g2-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g2-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g2-md-offset {
margin-left:16.66667% !important
}
.g3-md {
position: relative;
flex: 0 1 auto;
width: 25%;
max-width: 25%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g3-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g3-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g3-md-offset {
margin-left:25% !important
}
.g4-md {
position: relative;
flex: 0 1 auto;
width: 33.33333%;
max-width: 33.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g4-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g4-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g4-md-offset {
margin-left:33.33333% !important
}
.g5-md {
position: relative;
flex: 0 1 auto;
width: 41.66667%;
max-width: 41.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g5-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g5-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g5-md-offset {
margin-left:41.66667% !important
}
.g6-md {
position: relative;
flex: 0 1 auto;
width: 50%;
max-width: 50%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g6-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g6-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g6-md-offset {
margin-left:50% !important
}
.g7-md {
position: relative;
flex: 0 1 auto;
width: 58.33333%;
max-width: 58.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g7-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g7-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g7-md-offset {
margin-left:58.33333% !important
}
.g8-md {
position: relative;
flex: 0 1 auto;
width: 66.66667%;
max-width: 66.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g8-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g8-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g8-md-offset {
margin-left:66.66667% !important
}
.g9-md {
position: relative;
flex: 0 1 auto;
width: 75%;
max-width: 75%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g9-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g9-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g9-md-offset {
margin-left:75% !important
}
.g10-md {
position: relative;
flex: 0 1 auto;
width: 83.33333%;
max-width: 83.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g10-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g10-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g10-md-offset {
margin-left:83.33333% !important
}
.g11-md {
position: relative;
flex: 0 1 auto;
width: 91.66667%;
max-width: 91.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g11-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g11-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g11-md-offset {
margin-left:91.66667% !important
}
.g12-md {
position: relative;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 60.063em) {
.g12-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) and (min-width: 80.063em) {
.g12-md {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 40.063em) {
.g12-md-offset {
margin-left:100% !important
}
}
@media only screen and (min-width: 60.063em) {
.g0-lg {
position:relative;
flex: 0 1 auto;
width: 0%;
max-width: 0%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g0-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g0-lg-offset {
margin-left:0% !important
}
.g1-lg {
position: relative;
flex: 0 1 auto;
width: 8.33333%;
max-width: 8.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g1-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g1-lg-offset {
margin-left:8.33333% !important
}
.g2-lg {
position: relative;
flex: 0 1 auto;
width: 16.66667%;
max-width: 16.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g2-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g2-lg-offset {
margin-left:16.66667% !important
}
.g3-lg {
position: relative;
flex: 0 1 auto;
width: 25%;
max-width: 25%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g3-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g3-lg-offset {
margin-left:25% !important
}
.g4-lg {
position: relative;
flex: 0 1 auto;
width: 33.33333%;
max-width: 33.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g4-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g4-lg-offset {
margin-left:33.33333% !important
}
.g5-lg {
position: relative;
flex: 0 1 auto;
width: 41.66667%;
max-width: 41.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g5-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g5-lg-offset {
margin-left:41.66667% !important
}
.g6-lg {
position: relative;
flex: 0 1 auto;
width: 50%;
max-width: 50%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g6-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g6-lg-offset {
margin-left:50% !important
}
.g7-lg {
position: relative;
flex: 0 1 auto;
width: 58.33333%;
max-width: 58.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g7-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g7-lg-offset {
margin-left:58.33333% !important
}
.g8-lg {
position: relative;
flex: 0 1 auto;
width: 66.66667%;
max-width: 66.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g8-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g8-lg-offset {
margin-left:66.66667% !important
}
.g9-lg {
position: relative;
flex: 0 1 auto;
width: 75%;
max-width: 75%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g9-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g9-lg-offset {
margin-left:75% !important
}
.g10-lg {
position: relative;
flex: 0 1 auto;
width: 83.33333%;
max-width: 83.33333%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g10-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g10-lg-offset {
margin-left:83.33333% !important
}
.g11-lg {
position: relative;
flex: 0 1 auto;
width: 91.66667%;
max-width: 91.66667%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g11-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g11-lg-offset {
margin-left:91.66667% !important
}
.g12-lg {
position: relative;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) and (min-width: 80.063em) {
.g12-lg {
padding-left:1rem;
padding-right: 1rem
}
}
@media only screen and (min-width: 60.063em) {
.g12-lg-offset {
margin-left:100% !important
}
}
@media only screen and (min-width: 80.063em) {
.g0-xl {
position:relative;
flex: 0 1 auto;
width: 0%;
max-width: 0%;
padding-left: 1rem;
padding-right: 1rem
}
.g0-xl-offset {
margin-left: 0% !important
}
.g1-xl {
position: relative;
flex: 0 1 auto;
width: 8.33333%;
max-width: 8.33333%;
padding-left: 1rem;
padding-right: 1rem
}
.g1-xl-offset {
margin-left: 8.33333% !important
}
.g2-xl {
position: relative;
flex: 0 1 auto;
width: 16.66667%;
max-width: 16.66667%;
padding-left: 1rem;
padding-right: 1rem
}
.g2-xl-offset {
margin-left: 16.66667% !important
}
.g3-xl {
position: relative;
flex: 0 1 auto;
width: 25%;
max-width: 25%;
padding-left: 1rem;
padding-right: 1rem
}
.g3-xl-offset {
margin-left: 25% !important
}
.g4-xl {
position: relative;
flex: 0 1 auto;
width: 33.33333%;
max-width: 33.33333%;
padding-left: 1rem;
padding-right: 1rem
}
.g4-xl-offset {
margin-left: 33.33333% !important
}
.g5-xl {
position: relative;
flex: 0 1 auto;
width: 41.66667%;
max-width: 41.66667%;
padding-left: 1rem;
padding-right: 1rem
}
.g5-xl-offset {
margin-left: 41.66667% !important
}
.g6-xl {
position: relative;
flex: 0 1 auto;
width: 50%;
max-width: 50%;
padding-left: 1rem;
padding-right: 1rem
}
.g6-xl-offset {
margin-left: 50% !important
}
.g7-xl {
position: relative;
flex: 0 1 auto;
width: 58.33333%;
max-width: 58.33333%;
padding-left: 1rem;
padding-right: 1rem
}
.g7-xl-offset {
margin-left: 58.33333% !important
}
.g8-xl {
position: relative;
flex: 0 1 auto;
width: 66.66667%;
max-width: 66.66667%;
padding-left: 1rem;
padding-right: 1rem
}
.g8-xl-offset {
margin-left: 66.66667% !important
}
.g9-xl {
position: relative;
flex: 0 1 auto;
width: 75%;
max-width: 75%;
padding-left: 1rem;
padding-right: 1rem
}
.g9-xl-offset {
margin-left: 75% !important
}
.g10-xl {
position: relative;
flex: 0 1 auto;
width: 83.33333%;
max-width: 83.33333%;
padding-left: 1rem;
padding-right: 1rem
}
.g10-xl-offset {
margin-left: 83.33333% !important
}
.g11-xl {
position: relative;
flex: 0 1 auto;
width: 91.66667%;
max-width: 91.66667%;
padding-left: 1rem;
padding-right: 1rem
}
.g11-xl-offset {
margin-left: 91.66667% !important
}
.g12-xl {
position: relative;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem
}
.g12-xl-offset {
margin-left: 100% !important
}
}
.show-md {
display: none
}
@media only screen and (min-width: 40.063em) {
.show-md {
display:inline-block
}
}
.page-header {
margin-top: 9em;
animation: slideUp 600ms normal ease-out
}
@media only screen and (min-width: 40.063em) {
.page-header {
margin-top:12em
}
}
@media only screen and (min-width: 60.063em) {
.page-header {
margin-top:15em
}
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translate3d(0, 4em, 0)
}
25% {
opacity: 0;
transform: translate3d(0, 4em, 0)
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0)
}
}
.page-alert {
display: none
}
@media only screen and (min-width: 1281px) {
.page-alert {
display:block;
margin-top: 4.25em
}
}
.page-alert__title {
margin-top: 2em;
margin-bottom: 1em
}
.page-alert__description {
margin: 0
}
.page-alert__button {
position: relative;
display: inline-block;
width: 100%;
margin-top: 1em;
padding: 1.25em 1em;
color: #FFFFFF;
border-radius: 0.375rem;
background-color: #FF6A67;
font-size: 14px;
font-size: 0.875em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase
}
.page-section {
animation: slideUpDelay 600ms normal ease-out
}
@keyframes slideUpDelay {
0% {
opacity: 0;
transform: translate3d(0, 4em, 0)
}
50% {
opacity: 0;
transform: translate3d(0, 4em, 0)
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0)
}
}
.page-section__header {
margin-top: 5em
}
@media only screen and (min-width: 40.063em) {
.page-section__header {
margin-top:6.75em
}
}
@media only screen and (min-width: 60.063em) {
.page-section__header {
margin-top:9.75em
}
}
.page-section__subtitle:after {
content: "";
display: inline-block;
vertical-align: middle;
width: 3em;
height: 0.1875em;
margin-left: 0.5em;
margin-right: 0.5em;
background: #FF6A67
}
.page-section__blockquote:first-letter,.page-section__blockquote::first-letter {
margin-left: -6px
}
@media only screen and (min-width: 40.063em) {
.page-section__blockquote:first-letter,.page-section__blockquote::first-letter {
margin-left:-8px
}
}
.page-section__icon {
display: none
}
@media only screen and (min-width: 40.063em) {
.page-section__icon {
display:block;
margin-top: 3.75em
}
}
@media only screen and (min-width: 80.063em) {
.page-section__icon {
margin-top:5.25em
}
}
.page-section__icon-quote:before,.page-section__icon-number:before {
content: "“";
position: absolute;
margin-top: 0.625rem;
margin-left: 0.625rem;
color: #FF6A67;
font-size: 34px;
font-size: 2.125em;
font-weight: 700;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1
}
.page-section__icon-number:before {
margin-top: 0.8375rem;
font-size: 14px;
font-size: 0.875em
}
.page-section__icon-quote:after,.page-section__icon-number:after {
content: "";
position: absolute;
display: inline-block;
vertical-align: middle;
width: 2.5em;
height: 2.5em;
border: 3px solid #FF6A67;
border-radius: 50%
}
[data-number="01"]:before {
content: "01"
}
[data-number="02"]:before {
content: "02"
}
[data-number="03"]:before {
content: "03"
}
[data-number="04"]:before {
content: "04"
}
[data-number="05"]:before {
content: "05"
}
[data-number="06"]:before {
content: "06"
}
[data-number="07"]:before {
content: "07"
}
[data-number="08"]:before {
content: "08"
}
[data-number="09"]:before {
content: "09"
}
[data-number="10"]:before {
content: "10"
}
.page-section__quote {
margin-top: 3em
}
@media only screen and (min-width: 40.063em) {
.page-section__quote {
margin-top:4.5em
}
}
@media only screen and (min-width: 80.063em) {
.page-section__quote {
margin-top:6em
}
}
.page-section__lorem {
position: relative;
display: inline;
quotes: "“" "”" "‘" "’";
margin: 0;
padding: 0;
border: none;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.25;
letter-spacing: 0;
background-image: linear-gradient(#687789 50%, #687789 50%);
background-repeat: repeat-x;
background-position: 0 12px;
background-size: 4px 4px
}
@media only screen and (min-width: 20.063em) {
.page-section__lorem {
font-size:19px;
font-size: 1.1875em;
background-position: 0 15px;
background-size: 6px 6px
}
}
@media only screen and (min-width: 40.063em) {
.page-section__lorem {
font-size:26px;
font-size: 1.625em;
background-position: 0 22px;
background-size: 8px 8px
}
}
.page-section__paragraph {
position: relative;
display: inline;
margin: 0;
padding: 0;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.25;
letter-spacing: 0
}
@media only screen and (min-width: 20.063em) {
.page-section__paragraph {
font-size:19px;
font-size: 1.1875em;
background-position: 0 15px;
background-size: 6px 6px
}
}
@media only screen and (min-width: 40.063em) {
.page-section__paragraph {
font-size:26px;
font-size: 1.625em;
background-position: 0 22px;
background-size: 8px 8px
}
}
.page-section__link {
display: inline-block;
margin: 0.5em 0 0;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.25;
letter-spacing: 0;
background-image: linear-gradient(#FF6A67 50%, #FF6A67 50%);
background-repeat: repeat-x;
background-position: 0 12px;
background-size: 4px 4px;
transition: all 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 20.063em) {
.page-section__link {
font-size:19px;
font-size: 1.1875em;
background-position: 0 15px;
background-size: 6px 6px
}
}
@media only screen and (min-width: 40.063em) {
.page-section__link {
font-size:26px;
font-size: 1.625em;
background-position: 0 22px;
background-size: 8px 8px
}
}
.page-section__link:hover {
background-position: 0 0;
background-size: 4px 12px
}
@media only screen and (min-width: 20.063em) {
.page-section__link:hover {
background-size:6px 24px
}
}
@media only screen and (min-width: 40.063em) {
.page-section__link:hover {
background-size:8px 32px
}
}
.page-section__block {
margin-top: 13.5rem;
z-index: 2
}
@media only screen and (min-width: 40.063em) {
.page-section__block {
margin-top:5rem
}
}
@media only screen and (min-width: 60.063em) {
.page-section__block {
margin-top:6rem
}
}
@media only screen and (min-width: 80.063em) {
.page-section__block {
margin-top:8rem
}
}
.page-section__image {
margin-top: 5rem;
z-index: 1
}
@media only screen and (min-width: 60.063em) {
.page-section__image {
margin-top:6rem
}
}
@media only screen and (min-width: 80.063em) {
.page-section__image {
margin-top:8rem
}
}
.page-section__image img {
position: absolute;
display: block;
width: calc(66.66667% - 1.5em);
margin-top: -12.5%;
margin-left: calc(33.33333%)
}
@media only screen and (min-width: 40.063em) {
.page-section__image img {
width:calc(66.66667% - 1em);
margin-top: -12.5%;
margin-left: calc(33.33333% - 1em)
}
}
.page-section__caption {
position: relative;
width: calc(33.33333% - 1em);
z-index: 1
}
.page-section__squiggle {
overflow: hidden;
position: relative;
width: 64px;
height: 32px
}
.page-section__squiggle-one,.page-section__squiggle-two {
position: absolute;
width: 64px;
height: 16px;
background: radial-gradient(12px, transparent, transparent 2px, #d3dbe4 2px, #d3dbe4 5px, transparent 5px);
background-size: 14px 32px
}
.page-section__squiggle-two {
top: 16px;
left: 7px;
background-position: 0px -16px
}
.page-section__generator {
margin-top: 1em
}
@media only screen and (min-width: 641px) {
.page-section__generator {
margin-top:3em
}
}
@media only screen and (min-width: 1281px) {
.page-section__generator {
margin-top:4.5em
}
}
.page-section__generator--top {
margin-top: 1em
}
@media only screen and (min-width: 641px) {
.page-section__generator--top {
margin-top:3.75em
}
}
@media only screen and (min-width: 1281px) {
.page-section__generator--top {
margin-top:5.25em
}
}
.page-generator__title {
padding: 1.5em 0
}
.page-generator__title--top {
padding: 1.5em 0 1.5em
}
@media only screen and (min-width: 641px) {
.page-generator__title--top {
padding:0.75em 0 1.5em
}
}
.page-generator__text {
position: relative;
padding: 1em 1.5em;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
background-color: #FFFFFF;
border-bottom: 3px solid #d3dbe4;
background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #F4F6F8 8px, #F4F6F8 16px);
background-size: 180px 180px
}
@media only screen and (min-width: 641px) {
.page-generator__text {
padding:1.5em 2.25em
}
}
@media only screen and (min-width: 961px) {
.page-generator__text {
padding:2.25em 3em
}
}
.page-generator__text--top {
padding: 0 1.5em 0.125em;
border-radius: 0;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border: none;
border-top: 3px solid #d3dbe4
}
@media only screen and (min-width: 641px) {
.page-generator__text--top {
padding:0.5em 2.25em
}
}
@media only screen and (min-width: 961px) {
.page-generator__text--top {
padding:0.5em 3em
}
}
.page-generator__actions {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 1em;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
background-color: #F4F6F8
}
@media only screen and (min-width: 641px) {
.page-generator__actions {
padding:1.5em 2.25em
}
}
@media only screen and (min-width: 961px) {
.page-generator__actions {
padding:1.5em 3em
}
}
.page-generator__actions--top {
border-radius: 0;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem
}
.page-generator__overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: repeating-linear-gradient(-45deg, transparent, transparent 8px, #687789 8px, #687789 16px);
background-size: 136px 136px;
animation: slideInFadeOut 1000ms linear
}
@keyframes slideInFadeOut {
0% {
background-position: 0% 0;
opacity: 1;
z-index: 2
}
40% {
background-position: 0% 0;
opacity: 1;
z-index: 2
}
99% {
z-index: 2
}
100% {
background-position: 100% 0;
opacity: 0;
z-index: -1
}
}
.page-generator__clipbox {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
background-color: #FFFFFF
}
.page-generator__clipbox.is-active {
animation: fadeOutClipbox 1200ms
}
@keyframes fadeOutClipbox {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.page-generator__lorem {
position: relative;
display: block;
quotes: "“" "”" "‘" "’";
margin: 0;
padding: 0;
border: none;
color: #687789;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.375;
letter-spacing: 0;
background-repeat: repeat-x;
background-position: 0 12px;
background-size: 4px 4px;
animation: fadeInLorem 1000ms linear
}
@media only screen and (min-width: 641px) {
.page-generator__lorem {
font-size:19px;
font-size: 1.1875em;
background-position: 0 15px;
background-size: 6px 6px
}
}
@media only screen and (min-width: 961px) {
.page-generator__lorem {
font-size:26px;
font-size: 1.625em;
background-position: 0 22px;
background-size: 8px 8px
}
}
@keyframes fadeInLorem {
0% {
opacity: 0;
transform: translateX(1.5em)
}
60% {
opacity: 0;
transform: translateX(1.5em)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
.page-generator__output p {
color: #687789;
animation: fadeInLorem 1000ms linear
}
.page-generator__options {
order: 2;
display: flex;
flex: 0 1 auto;
justify-content: space-between;
width: 100%
}
@media only screen and (min-width: 641px) {
.page-generator__options {
order:1;
width: auto;
display: block
}
}
.page-generator__input {
display: inline-block;
width: 4.25em;
padding: 0.875em 1em 0.75em;
outline: none;
border: none;
border: 3px solid #d3dbe4;
border-radius: 0.375em;
box-shadow: none;
background-color: #FFFFFF;
color: #687789;
font-size: 10px;
font-size: 0.625em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.075em;
text-transform: uppercase;
-webkit-appearance: none
}
@media only screen and (min-width: 641px) {
.page-generator__input {
margin-right:1em
}
}
@media only screen and (min-width: 40.063em) {
.page-generator__input {
font-size:14px;
font-size: 0.875em
}
}
.page-generator__select {
cursor: pointer;
display: inline-block;
width: 13em;
margin-right: 0.25em;
padding: 0.875em 1em 0.75em;
outline: none;
border: none;
border: 3px solid #d3dbe4;
border-radius: 0.375em;
box-shadow: none;
background-color: #FFFFFF;
background-image: url('data:image/svg+xml;utf8,<svg width="27px" height="6px" viewBox="0 0 12 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#d3dbe4" points="6 6 12 0 0 0"></polygon></svg>');
background-repeat: no-repeat;
background-position: center right;
color: #687789;
font-size: 10px;
font-size: 0.625em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.075em;
text-transform: uppercase;
-webkit-appearance: none
}
@media only screen and (min-width: 641px) {
.page-generator__select {
margin-right:1em
}
}
@media only screen and (min-width: 40.063em) {
.page-generator__select {
font-size:14px;
font-size: 0.875em;
background-image: url('data:image/svg+xml;utf8,<svg width="39px" height="9px" viewBox="0 0 15 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#d3dbe4" points="7 7 15 0 0 0"></polygon></svg>')
}
}
.page-generator__submit {
cursor: pointer;
display: inline-block;
padding: 1.0625em 1em 0.9375em;
outline: none;
border: none;
border-radius: 0.375em;
box-shadow: none;
background: repeating-linear-gradient(-45deg, #FF7D7A, #FF7D7A 8px, #FF6A67 8px, #FF6A67 16px);
color: #FFFFFF;
font-size: 10px;
font-size: 0.625em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.075em;
text-transform: uppercase;
-webkit-appearance: none;
transition: all 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 641px) {
.page-generator__submit {
width:135px;
font-size: 14px;
font-size: 0.875em
}
}
.page-generator__submit:focus {
outline: none
}
@media only screen and (min-width: 20.063em) and (min-height: 769px) {
.page-generator__submit:hover {
color:#FFFFFF;
background: #FF6A67;
background: repeating-linear-gradient(-45deg, #FF7D7A, #FF7D7A 8px, #FF6A67 8px, #FF6A67 16px);
background-size: 45.5px 45.5px;
animation: Gradient 1.5s infinite linear
}
}
@keyframes Gradient {
0% {
background-position: 0% 0
}
100% {
background-position: 100% 0
}
}
.page-generator__button {
flex: 0 1 auto;
order: 1;
cursor: pointer;
width: 100%;
margin-bottom: 1rem;
border: none;
border-radius: 0.375em;
padding: 1em 1em 0.875em;
background-color: #FF6A67;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.075em;
text-transform: uppercase;
-webkit-appearance: none
}
@media only screen and (min-width: 641px) {
.page-generator__button {
order:2;
width: auto;
margin-bottom: 0
}
}
.page-generator__button:focus {
outline: none
}
.page-generator__button-text,.page-generator__button-icon {
display: inline-block;
vertical-align: middle
}
.page-generator__button-text {
margin-right: 0.5rem
}
.page-list {
counter-reset: li;
margin-top: 3em
}
@media only screen and (min-width: 40.063em) {
.page-list {
margin-top:5.25em
}
}
.page-list__item {
margin-bottom: 3em
}
@media only screen and (min-width: 40.063em) {
.page-list__item {
margin-bottom:5.25em
}
}
.page-list__item:before {
counter-increment: li;
content: counter(li);
position: absolute;
display: none;
align-items: center;
justify-content: center;
margin-top: -0.5625em;
margin-left: -5em;
color: #FF6A67;
font-size: 14px;
font-size: 0.875em;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
width: 2.5em;
height: 2.5em;
border: 3px solid #FF6A67;
border-radius: 50%
}
@media only screen and (min-width: 60.063em) {
.page-list__item:before {
display:flex
}
}
.page-list__title {
display: inline-block;
border-bottom: 3px solid #FF6A67
}
.page-list__link {
color: #FF6A67;
font-size: 1rem;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.075em;
text-transform: uppercase
}
.icon-triangle {
position: relative;
display: inline-block;
vertical-align: middle;
top: -0.125em;
width: 0;
height: 0;
margin-left: 1em;
border-top: 0.5em solid #d3dbe4;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
transition: border-color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99),transform 200ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.lang-is-open .icon-triangle {
transform: rotate(90deg)
}
.icon-caret {
display: inline-block;
vertical-align: middle;
box-sizing: initial
}
.icon-caret:after {
content: "";
position: relative;
display: inline-block;
vertical-align: middle;
box-sizing: initial
}
.icon-caret:after {
background: transparent;
border-top: 1px solid #687789;
border-right: 1px solid #687789;
transform: rotate(45deg)
}
.icon-caret:after {
width: 5px;
height: 5px
}
@media only screen and (min-width: 20.063em) {
.icon-caret:after {
width:6px;
height: 6px
}
}
.icon-caret-sm:after {
width: 8px;
height: 8px
}
.icon-caret-md:after {
width: 10px;
height: 10px
}
.icon-caret-lg:after {
width: 12px;
height: 12px
}
.icon-caret-red:after {
border-top: 1px solid #FF6A67;
border-right: 1px solid #FF6A67
}
textarea {
color: #687789;
font-size: 16px;
font-size: 14;
font-weight: 400;
font-style: normal;
font-family: "Quarto A", "Quarto B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.625;
padding: 2em 0.5em 0
}
@media only screen and (min-width: 20.063em) {
textarea {
width:calc(100% - 2rem);
height: 45em;
border: none;
resize: none
}
}
textarea:focus {
outline: none
}
textarea::-webkit-input-placeholder {
color: #687789;
opacity: 1;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
textarea:focus::-webkit-input-placeholder {
opacity: 0.25
}
textarea:-ms-input-placeholder {
color: #687789;
opacity: 1;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
textarea:focus:-ms-input-placeholder {
opacity: 0.25
}
textarea::-moz-placeholder {
color: #687789;
opacity: 1;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
textarea:focus::-moz-placeholder {
opacity: 0.25
}
textarea:-moz-placeholder {
color: #687789;
opacity: 1;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
textarea:focus:-moz-placeholder {
opacity: 0.25
}
.cl-black {
color: #556271
}
.bd-black {
border-color: #556271
}
.bg-black {
background-color: #556271
}
.cl-white {
color: #FFFFFF
}
.bd-white {
border-color: #FFFFFF
}
.bg-white {
background-color: #FFFFFF
}
.cl-red {
color: #C64C56
}
.bd-red {
border-color: #C64C56
}
.bg-red {
background-color: #C64C56
}
.cl-orange {
color: #FF6A67
}
.bd-orange {
border-color: #FF6A67
}
.bg-orange {
background-color: #FF6A67
}
.cl-green {
color: #C6F659
}
.bd-green {
border-color: #C6F659
}
.bg-green {
background-color: #C6F659
}
.cl-blue {
color: #46CEC5
}
.bd-blue {
border-color: #46CEC5
}
.bg-blue {
background-color: #46CEC5
}
.cl-gray-1 {
color: #687789
}
.bd-gray-1 {
border-color: #687789
}
.bg-gray-1 {
background-color: #687789
}
.cl-gray-2 {
color: #d3dbe4
}
.bd-gray-2 {
border-color: #d3dbe4
}
.bg-gray-2 {
background-color: #d3dbe4
}
.footer__logo {
float: right;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
width: 5em;
height: 5em;
border: 2px solid #FFFFFF;
border-radius: 50%;
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 700;
font-style: normal;
line-height: 1.1875;
letter-spacing: 0.075em;
text-transform: uppercase;
text-decoration: none;
transition: all 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.footer__logo:hover {
color: #FF6A67;
border-color: #FF6A67
}
.footer__logo span {
display: block
}
.footer__logo span:first-child:after {
content: "";
display: inline-block;
margin-right: 1em
}
.footer__logo span:last-child:before {
content: "—"
}
.footer__list-item {
margin-bottom: 0.5rem
}
.footer__list-social,.footer__list-network {
float: left;
margin-right: 0.625em
}
@media only screen and (min-width: 20.063em) {
.footer__list-social,.footer__list-network {
margin-right:0.75em
}
}
@media only screen and (min-width: 40.063em) {
.footer__list-social,.footer__list-network {
margin-right:1em
}
}
@media only screen and (min-width: 40.063em) {
.footer__list-social .icon-social {
width:1.25em;
height: 1.25em
}
}
.footer__list-network {
margin-bottom: 0.5em
}
.footer__list-network:last-child {
margin-bottom: 0
}
@media only screen and (min-width: 40.063em) {
.footer__list-social .icon-social--google {
width:2em
}
}
.footer__list-link {
position: relative;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
line-height: 1.1875;
letter-spacing: 0.075em;
text-transform: uppercase;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.footer__list-link:hover {
color:#FF6A67
}
}
.footer__list-link .icon-social__fill {
fill: #FFFFFF;
transition: fill 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.footer__list-link:hover .icon-social__fill {
fill:#FF6A67
}
}
.bd-1 {
border-width: 1px 1px 1px 1px;
border-style: solid
}
.bdt-1 {
border-top-width: 1px;
border-top-style: solid
}
.bdl-1 {
border-left-width: 1px;
border-left-style: solid
}
.bdr-1 {
border-right-width: 1px;
border-right-style: solid
}
.bdb-1 {
border-bottom-width: 1px;
border-bottom-style: solid
}
.bd-2 {
border-width: 2px 2px 2px 2px;
border-style: solid
}
.bdt-2 {
border-top-width: 2px;
border-top-style: solid
}
.bdl-2 {
border-left-width: 2px;
border-left-style: solid
}
.bdr-2 {
border-right-width: 2px;
border-right-style: solid
}
.bdb-2 {
border-bottom-width: 2px;
border-bottom-style: solid
}
.bd-3 {
border-width: 3px 3px 3px 3px;
border-style: solid
}
.bdt-3 {
border-top-width: 3px;
border-top-style: solid
}
.bdl-3 {
border-left-width: 3px;
border-left-style: solid
}
.bdr-3 {
border-right-width: 3px;
border-right-style: solid
}
.bdb-3 {
border-bottom-width: 3px;
border-bottom-style: solid
}
.bd-4 {
border-width: 4px 4px 4px 4px;
border-style: solid
}
.bdt-4 {
border-top-width: 4px;
border-top-style: solid
}
.bdl-4 {
border-left-width: 4px;
border-left-style: solid
}
.bdr-4 {
border-right-width: 4px;
border-right-style: solid
}
.bdb-4 {
border-bottom-width: 4px;
border-bottom-style: solid
}
.m0 {
margin: 0
}
.mv0 {
margin-top: 0;
margin-bottom: 0
}
.mh0 {
margin-left: 0;
margin-right: 0
}
.mt0 {
margin-top: 0
}
.ml0 {
margin-left: 0
}
.mr0 {
margin-right: 0
}
.mb0 {
margin-bottom: 0
}
.p0 {
padding: 0
}
.pv0 {
padding-top: 0;
padding-bottom: 0
}
.ph0 {
padding-left: 0;
padding-right: 0
}
.pt0 {
padding-top: 0
}
.pl0 {
padding-left: 0
}
.pr0 {
padding-right: 0
}
.pb0 {
padding-bottom: 0
}
.m4 {
margin: 0.25em
}
.mv4 {
margin-top: 0.25em;
margin-bottom: 0.25em
}
.mh4 {
margin-left: 0.25em;
margin-right: 0.25em
}
.mt4 {
margin-top: 0.25em
}
.ml4 {
margin-left: 0.25em
}
.mr4 {
margin-right: 0.25em
}
.mb4 {
margin-bottom: 0.25em
}
.p4 {
padding: 0.25em
}
.pv4 {
padding-top: 0.25em;
padding-bottom: 0.25em
}
.ph4 {
padding-left: 0.25em;
padding-right: 0.25em
}
.pt4 {
padding-top: 0.25em
}
.pl4 {
padding-left: 0.25em
}
.pr4 {
padding-right: 0.25em
}
.pb4 {
padding-bottom: 0.25em
}
.m8 {
margin: 0.5em
}
.mv8 {
margin-top: 0.5em;
margin-bottom: 0.5em
}
.mh8 {
margin-left: 0.5em;
margin-right: 0.5em
}
.mt8 {
margin-top: 0.5em
}
.ml8 {
margin-left: 0.5em
}
.mr8 {
margin-right: 0.5em
}
.mb8 {
margin-bottom: 0.5em
}
.p8 {
padding: 0.5em
}
.pv8 {
padding-top: 0.5em;
padding-bottom: 0.5em
}
.ph8 {
padding-left: 0.5em;
padding-right: 0.5em
}
.pt8 {
padding-top: 0.5em
}
.pl8 {
padding-left: 0.5em
}
.pr8 {
padding-right: 0.5em
}
.pb8 {
padding-bottom: 0.5em
}
.m12 {
margin: 0.75em
}
.mv12 {
margin-top: 0.75em;
margin-bottom: 0.75em
}
.mh12 {
margin-left: 0.75em;
margin-right: 0.75em
}
.mt12 {
margin-top: 0.75em
}
.ml12 {
margin-left: 0.75em
}
.mr12 {
margin-right: 0.75em
}
.mb12 {
margin-bottom: 0.75em
}
.p12 {
padding: 0.75em
}
.pv12 {
padding-top: 0.75em;
padding-bottom: 0.75em
}
.ph12 {
padding-left: 0.75em;
padding-right: 0.75em
}
.pt12 {
padding-top: 0.75em
}
.pl12 {
padding-left: 0.75em
}
.pr12 {
padding-right: 0.75em
}
.pb12 {
padding-bottom: 0.75em
}
.m16 {
margin: 1em
}
.mv16 {
margin-top: 1em;
margin-bottom: 1em
}
.mh16 {
margin-left: 1em;
margin-right: 1em
}
.mt16 {
margin-top: 1em
}
.ml16 {
margin-left: 1em
}
.mr16 {
margin-right: 1em
}
.mb16 {
margin-bottom: 1em
}
.p16 {
padding: 1em
}
.pv16 {
padding-top: 1em;
padding-bottom: 1em
}
.ph16 {
padding-left: 1em;
padding-right: 1em
}
.pt16 {
padding-top: 1em
}
.pl16 {
padding-left: 1em
}
.pr16 {
padding-right: 1em
}
.pb16 {
padding-bottom: 1em
}
.m24 {
margin: 1.5em
}
.mv24 {
margin-top: 1.5em;
margin-bottom: 1.5em
}
.mh24 {
margin-left: 1.5em;
margin-right: 1.5em
}
.mt24 {
margin-top: 1.5em
}
.ml24 {
margin-left: 1.5em
}
.mr24 {
margin-right: 1.5em
}
.mb24 {
margin-bottom: 1.5em
}
.p24 {
padding: 1.5em
}
.pv24 {
padding-top: 1.5em;
padding-bottom: 1.5em
}
.ph24 {
padding-left: 1.5em;
padding-right: 1.5em
}
.pt24 {
padding-top: 1.5em
}
.pl24 {
padding-left: 1.5em
}
.pr24 {
padding-right: 1.5em
}
.pb24 {
padding-bottom: 1.5em
}
.m32 {
margin: 2em
}
.mv32 {
margin-top: 2em;
margin-bottom: 2em
}
.mh32 {
margin-left: 2em;
margin-right: 2em
}
.mt32 {
margin-top: 2em
}
.ml32 {
margin-left: 2em
}
.mr32 {
margin-right: 2em
}
.mb32 {
margin-bottom: 2em
}
.p32 {
padding: 2em
}
.pv32 {
padding-top: 2em;
padding-bottom: 2em
}
.ph32 {
padding-left: 2em;
padding-right: 2em
}
.pt32 {
padding-top: 2em
}
.pl32 {
padding-left: 2em
}
.pr32 {
padding-right: 2em
}
.pb32 {
padding-bottom: 2em
}
.m48 {
margin: 3em
}
.mv48 {
margin-top: 3em;
margin-bottom: 3em
}
.mh48 {
margin-left: 3em;
margin-right: 3em
}
.mt48 {
margin-top: 3em
}
.ml48 {
margin-left: 3em
}
.mr48 {
margin-right: 3em
}
.mb48 {
margin-bottom: 3em
}
.p48 {
padding: 3em
}
.pv48 {
padding-top: 3em;
padding-bottom: 3em
}
.ph48 {
padding-left: 3em;
padding-right: 3em
}
.pt48 {
padding-top: 3em
}
.pl48 {
padding-left: 3em
}
.pr48 {
padding-right: 3em
}
.pb48 {
padding-bottom: 3em
}
.m64 {
margin: 4em
}
.mv64 {
margin-top: 4em;
margin-bottom: 4em
}
.mh64 {
margin-left: 4em;
margin-right: 4em
}
.mt64 {
margin-top: 4em
}
.ml64 {
margin-left: 4em
}
.mr64 {
margin-right: 4em
}
.mb64 {
margin-bottom: 4em
}
.p64 {
padding: 4em
}
.pv64 {
padding-top: 4em;
padding-bottom: 4em
}
.ph64 {
padding-left: 4em;
padding-right: 4em
}
.pt64 {
padding-top: 4em
}
.pl64 {
padding-left: 4em
}
.pr64 {
padding-right: 4em
}
.pb64 {
padding-bottom: 4em
}
.m72 {
margin: 4.5em
}
.mv72 {
margin-top: 4.5em;
margin-bottom: 4.5em
}
.mh72 {
margin-left: 4.5em;
margin-right: 4.5em
}
.mt72 {
margin-top: 4.5em
}
.ml72 {
margin-left: 4.5em
}
.mr72 {
margin-right: 4.5em
}
.mb72 {
margin-bottom: 4.5em
}
.p72 {
padding: 4.5em
}
.pv72 {
padding-top: 4.5em;
padding-bottom: 4.5em
}
.ph72 {
padding-left: 4.5em;
padding-right: 4.5em
}
.pt72 {
padding-top: 4.5em
}
.pl72 {
padding-left: 4.5em
}
.pr72 {
padding-right: 4.5em
}
.pb72 {
padding-bottom: 4.5em
}
.m84 {
margin: 5.25em
}
.mv84 {
margin-top: 5.25em;
margin-bottom: 5.25em
}
.mh84 {
margin-left: 5.25em;
margin-right: 5.25em
}
.mt84 {
margin-top: 5.25em
}
.ml84 {
margin-left: 5.25em
}
.mr84 {
margin-right: 5.25em
}
.mb84 {
margin-bottom: 5.25em
}
.p84 {
padding: 5.25em
}
.pv84 {
padding-top: 5.25em;
padding-bottom: 5.25em
}
.ph84 {
padding-left: 5.25em;
padding-right: 5.25em
}
.pt84 {
padding-top: 5.25em
}
.pl84 {
padding-left: 5.25em
}
.pr84 {
padding-right: 5.25em
}
.pb84 {
padding-bottom: 5.25em
}
.m96 {
margin: 6em
}
.mv96 {
margin-top: 6em;
margin-bottom: 6em
}
.mh96 {
margin-left: 6em;
margin-right: 6em
}
.mt96 {
margin-top: 6em
}
.ml96 {
margin-left: 6em
}
.mr96 {
margin-right: 6em
}
.mb96 {
margin-bottom: 6em
}
.p96 {
padding: 6em
}
.pv96 {
padding-top: 6em;
padding-bottom: 6em
}
.ph96 {
padding-left: 6em;
padding-right: 6em
}
.pt96 {
padding-top: 6em
}
.pl96 {
padding-left: 6em
}
.pr96 {
padding-right: 6em
}
.pb96 {
padding-bottom: 6em
}
.m108 {
margin: 6.75em
}
.mv108 {
margin-top: 6.75em;
margin-bottom: 6.75em
}
.mh108 {
margin-left: 6.75em;
margin-right: 6.75em
}
.mt108 {
margin-top: 6.75em
}
.ml108 {
margin-left: 6.75em
}
.mr108 {
margin-right: 6.75em
}
.mb108 {
margin-bottom: 6.75em
}
.p108 {
padding: 6.75em
}
.pv108 {
padding-top: 6.75em;
padding-bottom: 6.75em
}
.ph108 {
padding-left: 6.75em;
padding-right: 6.75em
}
.pt108 {
padding-top: 6.75em
}
.pl108 {
padding-left: 6.75em
}
.pr108 {
padding-right: 6.75em
}
.pb108 {
padding-bottom: 6.75em
}
.m120 {
margin: 7.5em
}
.mv120 {
margin-top: 7.5em;
margin-bottom: 7.5em
}
.mh120 {
margin-left: 7.5em;
margin-right: 7.5em
}
.mt120 {
margin-top: 7.5em
}
.ml120 {
margin-left: 7.5em
}
.mr120 {
margin-right: 7.5em
}
.mb120 {
margin-bottom: 7.5em
}
.p120 {
padding: 7.5em
}
.pv120 {
padding-top: 7.5em;
padding-bottom: 7.5em
}
.ph120 {
padding-left: 7.5em;
padding-right: 7.5em
}
.pt120 {
padding-top: 7.5em
}
.pl120 {
padding-left: 7.5em
}
.pr120 {
padding-right: 7.5em
}
.pb120 {
padding-bottom: 7.5em
}
.m132 {
margin: 8.25em
}
.mv132 {
margin-top: 8.25em;
margin-bottom: 8.25em
}
.mh132 {
margin-left: 8.25em;
margin-right: 8.25em
}
.mt132 {
margin-top: 8.25em
}
.ml132 {
margin-left: 8.25em
}
.mr132 {
margin-right: 8.25em
}
.mb132 {
margin-bottom: 8.25em
}
.p132 {
padding: 8.25em
}
.pv132 {
padding-top: 8.25em;
padding-bottom: 8.25em
}
.ph132 {
padding-left: 8.25em;
padding-right: 8.25em
}
.pt132 {
padding-top: 8.25em
}
.pl132 {
padding-left: 8.25em
}
.pr132 {
padding-right: 8.25em
}
.pb132 {
padding-bottom: 8.25em
}
.m144 {
margin: 9em
}
.mv144 {
margin-top: 9em;
margin-bottom: 9em
}
.mh144 {
margin-left: 9em;
margin-right: 9em
}
.mt144 {
margin-top: 9em
}
.ml144 {
margin-left: 9em
}
.mr144 {
margin-right: 9em
}
.mb144 {
margin-bottom: 9em
}
.p144 {
padding: 9em
}
.pv144 {
padding-top: 9em;
padding-bottom: 9em
}
.ph144 {
padding-left: 9em;
padding-right: 9em
}
.pt144 {
padding-top: 9em
}
.pl144 {
padding-left: 9em
}
.pr144 {
padding-right: 9em
}
.pb144 {
padding-bottom: 9em
}
.m156 {
margin: 9.75em
}
.mv156 {
margin-top: 9.75em;
margin-bottom: 9.75em
}
.mh156 {
margin-left: 9.75em;
margin-right: 9.75em
}
.mt156 {
margin-top: 9.75em
}
.ml156 {
margin-left: 9.75em
}
.mr156 {
margin-right: 9.75em
}
.mb156 {
margin-bottom: 9.75em
}
.p156 {
padding: 9.75em
}
.pv156 {
padding-top: 9.75em;
padding-bottom: 9.75em
}
.ph156 {
padding-left: 9.75em;
padding-right: 9.75em
}
.pt156 {
padding-top: 9.75em
}
.pl156 {
padding-left: 9.75em
}
.pr156 {
padding-right: 9.75em
}
.pb156 {
padding-bottom: 9.75em
}
.m168 {
margin: 10.5em
}
.mv168 {
margin-top: 10.5em;
margin-bottom: 10.5em
}
.mh168 {
margin-left: 10.5em;
margin-right: 10.5em
}
.mt168 {
margin-top: 10.5em
}
.ml168 {
margin-left: 10.5em
}
.mr168 {
margin-right: 10.5em
}
.mb168 {
margin-bottom: 10.5em
}
.p168 {
padding: 10.5em
}
.pv168 {
padding-top: 10.5em;
padding-bottom: 10.5em
}
.ph168 {
padding-left: 10.5em;
padding-right: 10.5em
}
.pt168 {
padding-top: 10.5em
}
.pl168 {
padding-left: 10.5em
}
.pr168 {
padding-right: 10.5em
}
.pb168 {
padding-bottom: 10.5em
}
.m180 {
margin: 11.25em
}
.mv180 {
margin-top: 11.25em;
margin-bottom: 11.25em
}
.mh180 {
margin-left: 11.25em;
margin-right: 11.25em
}
.mt180 {
margin-top: 11.25em
}
.ml180 {
margin-left: 11.25em
}
.mr180 {
margin-right: 11.25em
}
.mb180 {
margin-bottom: 11.25em
}
.p180 {
padding: 11.25em
}
.pv180 {
padding-top: 11.25em;
padding-bottom: 11.25em
}
.ph180 {
padding-left: 11.25em;
padding-right: 11.25em
}
.pt180 {
padding-top: 11.25em
}
.pl180 {
padding-left: 11.25em
}
.pr180 {
padding-right: 11.25em
}
.pb180 {
padding-bottom: 11.25em
}
.m192 {
margin: 12em
}
.mv192 {
margin-top: 12em;
margin-bottom: 12em
}
.mh192 {
margin-left: 12em;
margin-right: 12em
}
.mt192 {
margin-top: 12em
}
.ml192 {
margin-left: 12em
}
.mr192 {
margin-right: 12em
}
.mb192 {
margin-bottom: 12em
}
.p192 {
padding: 12em
}
.pv192 {
padding-top: 12em;
padding-bottom: 12em
}
.ph192 {
padding-left: 12em;
padding-right: 12em
}
.pt192 {
padding-top: 12em
}
.pl192 {
padding-left: 12em
}
.pr192 {
padding-right: 12em
}
.pb192 {
padding-bottom: 12em
}
.parallax {
left: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 0
}
.parallax-group {
position: relative;
display: block;
height: 100vh;
width: 33.33333%;
border-right: 1px solid #687789
}
@media only screen and (min-width: 40.063em) {
.parallax-group {
width:25%
}
}
.parallax-group:nth-child(1) {
border-left: 1px solid #687789;
animation: expand 200ms normal ease-out
}
.parallax-group:nth-child(2) {
animation: expand 400ms normal ease-out
}
.parallax-group:nth-child(3) {
animation: expand 600ms normal ease-out
}
.parallax-group:nth-child(4) {
display: none;
animation: expand 800ms normal ease-out
}
@media only screen and (min-width: 40.063em) {
.parallax-group:nth-child(4) {
display:block
}
}
@keyframes expand {
0% {
height: 0
}
25% {
height: 0
}
100% {
height: 100vh
}
}
.parallax-item {
position: absolute;
display: block;
width: 1em;
height: 1em;
right: -0.78125em;
margin-bottom: 1em
}
.parallax-item--left {
left: -0.78125em
}
.parallax-item--o,.parallax-item--x {
width: 1.5em;
height: 1.5em
}
.parallax-item--o {
border: 0.375em solid #687789;
border-radius: 50%;
background: #556271
}
.parallax-item--x:before,.parallax-item--x:after {
position: absolute;
display: block;
content: "";
width: 1.5em;
height: 0.375em;
background: #687789
}
.parallax-item--x:before {
transform: rotate(45deg)
}
.parallax-item--x:after {
transform: rotate(-45deg)
}
.parallax-group--far-left .parallax-item:nth-child(1) {
top: 48em
}
.parallax-group--far-left .parallax-item:nth-child(2) {
display: none;
top: 48em
}
.parallax-group--far-left .parallax-item:nth-child(3) {
top: 96em
}
.parallax-group--far-left .parallax-item:nth-child(4) {
top: 75em
}
.parallax-group--far-left .parallax-item:nth-child(5) {
top: 120em
}
.parallax-group--far-left .parallax-item:nth-child(6) {
display: none
}
.parallax-group--mid-left .parallax-item:nth-child(1) {
top: 27.5em
}
.parallax-group--mid-left .parallax-item:nth-child(2) {
top: 108em
}
.parallax-group--mid-left .parallax-item:nth-child(3) {
display: none
}
.parallax-group--mid-right .parallax-item:nth-child(1) {
top: -0.75em
}
.parallax-group--mid-right .parallax-item:nth-child(2) {
top: 60em
}
.parallax-group--mid-right .parallax-item:nth-child(3) {
top: 145.5em
}
.parallax-group--far-right .parallax-item:nth-child(1) {
top: 20em
}
.parallax-group--far-right .parallax-item:nth-child(2) {
top: 96em
}
.parallax-group--far-right .parallax-item:nth-child(3) {
display: none
}
h1,h2,h3,h4,h5,h6 {
margin: 0
}
a {
color: inherit;
text-decoration: none
}
.f1 {
font-size: 25px;
font-size: 1.5625em;
font-weight: 700;
font-style: normal;
font-family: "Quarto A", "Quarto B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.125;
letter-spacing: 0.025em
}
@media only screen and (min-width: 641px) {
.f1 {
font-size:47px;
font-size: 2.9375em
}
}
.f2 {
font-size: 34px;
font-size: 2.125em;
font-weight: 700;
font-style: normal;
font-family: "Quarto A", "Quarto B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.25;
letter-spacing: 0.025em
}
.f3 {
font-size: 19px;
font-size: 1.1875em;
font-weight: 400;
font-style: normal;
font-family: "Quarto A", "Quarto B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.5;
letter-spacing: 0.025em
}
.f4 {
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.5
}
@media only screen and (min-width: 40.063em) {
.f4 {
font-size:19px;
font-size: 1.1875em;
line-height: 1.5
}
}
.f5 {
font-size: 12px;
font-size: 0.75em;
font-weight: 700;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.075em;
text-transform: uppercase
}
@media only screen and (min-width: 40.063em) {
.f5 {
font-size:14px;
font-size: 0.875em
}
}
.f6 {
font-size: 12px;
font-size: 0.75em;
font-weight: 400;
font-style: normal;
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.28571;
letter-spacing: 0.025em;
text-transform: uppercase
}
@media only screen and (min-width: 40.063em) {
.f6 {
font-size:14px;
font-size: 0.875em
}
}
p {
margin-top: 1.5em;
margin-bottom: 1.5em;
color: #FFFFFF;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: normal;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.5
}
@media only screen and (min-width: 641px) {
p {
font-size:19px;
font-size: 1.1875em
}
}
blockquote {
margin-left: -0.75rem;
margin-right: 0;
padding-left: 1.375em;
border-left: 0.375em solid #687789;
color: #d3dbe4;
font-size: 14px;
font-size: 0.875em;
font-weight: 400;
font-style: italic;
font-family: "Mercury SSm A", "Mercury SSm B", Georgia, Times, "Times New Roman", "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", serif;
line-height: 1.5
}
@media only screen and (min-width: 40.063em) {
blockquote {
margin-left:-1rem;
font-size: 19px;
font-size: 1.1875em;
line-height: 1.5
}
}
blockquote em {
font-weight: 700
}
p a {
border-bottom: 1px solid #d3dbe4;
transition: all 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
p a:hover {
color: #FF6A67;
border-color: #FF6A67
}
.menu-is-open,.lang-is-open {
overflow-y: hidden
}
.menu-desktop {
display: flex;
flex: 0 1 auto;
justify-content: space-between;
padding-top: 3em
}
@media only screen and (min-width: 40.063em) {
.menu-desktop {
padding-top:4.5em
}
}
.menu-desktop__list {
display: flex;
flex: 0 1 auto
}
@media only screen and (min-width: 40.063em) {
.menu-desktop__list {
width:75%
}
}
.menu-desktop__item {
position: relative;
flex: 0 1 auto;
overflow: hidden;
padding-left: 0.5rem;
padding-right: 0.5rem
}
@media only screen and (min-width: 20.063em) {
.menu-desktop__item {
padding-left:0.75rem;
padding-right: 0.75rem
}
}
@media only screen and (min-width: 40.063em) {
.menu-desktop__item {
width:33.33333%;
padding-left: 1em;
padding-right: 1em
}
}
@media only screen and (min-width: 80.063em) {
.menu-desktop__item {
width:33.33333%
}
}
.menu-desktop__item--links {
display: none
}
@media only screen and (min-width: 40.063em) {
.menu-desktop__item--links {
display:block
}
}
.menu-desktop__item--langs {
display: none;
width: initial
}
@media only screen and (min-width: 40.063em) {
.menu-desktop__item--langs {
display:block
}
}
.lang-is-open .menu-desktop__item--langs {
z-index: 6
}
.menu-desktop__item-item {
margin: 0 0 0.375em
}
.menu-desktop__logo,.menu-desktop__link {
position: relative;
cursor: pointer;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.menu-desktop__item:nth-child(1) .menu-desktop__logo {
animation: fadeIn 600ms normal ease-out
}
@keyframes fadeIn {
0% {
opacity: 0
}
25% {
opacity: 0
}
100% {
opacity: 1
}
}
.menu-desktop__item:nth-child(2) .menu-desktop__link {
animation: fadeIn 800ms normal ease-out
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.menu-desktop__logo:hover,.menu-desktop__link:hover {
color:#FF6A67
}
.menu-desktop__logo:hover .icon-triangle,.menu-desktop__link:hover .icon-triangle {
border-top-color: #FF6A67
}
}
.menu-is-open .menu-desktop__logo {
z-index: 10
}
.lang-is-open .menu-desktop__item--langs .menu-desktop__link {
color: #FF6A67
}
.lang-is-open .menu-desktop__item--langs .menu-desktop__link .icon-triangle {
border-top-color: #FF6A67
}
.menu-button {
position: relative;
flex: 0 1 auto;
width: 4.5em;
height: 1.5em;
padding-left: 1rem;
padding-right: 1rem;
outline: none;
border: none;
border-radius: 0;
background: transparent;
-webkit-appearance: none;
box-shadow: none;
cursor: pointer;
animation: fadeIn 1000ms normal ease-out
}
@media only screen and (min-width: 40.063em) {
.menu-button {
display:none
}
}
.menu-button:focus {
outline: none
}
.menu-is-open .menu-button {
z-index: 6
}
.menu-button__bar {
position: absolute;
display: block;
height: 3px;
padding: 0;
background: #d3dbe4;
transition: all 200ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.menu-button:hover .menu-button__bar {
background:#FF6A67
}
}
.menu-button__bar:nth-child(1) {
top: 0.125em;
width: 2.5em
}
.menu-button__bar:nth-child(2) {
top: 0.625em;
width: 2em;
right: 1em
}
.menu-is-open .menu-button__bar:nth-child(1) {
width: 1.5em;
transform: translate3d(1em, 0.25em, 0) rotate(45deg);
background: #FF6A67
}
.menu-is-open .menu-button__bar:nth-child(2) {
width: 1.5em;
transform: translate3d(0, -0.25em, 0) rotate(-45deg);
background: #FF6A67
}
.menu-desktop__lang {
max-height: 0;
overflow: hidden
}
.lang-is-open .menu-desktop__lang {
max-height: 100em
}
.menu-desktop__lang-item {
padding: 1em 0 0
}
.menu-desktop__lang-link {
cursor: pointer;
transition: color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.menu-desktop__lang-link:hover {
color:#FF6A67
}
}
.menu-social__list {
animation: fadeIn 1000ms normal ease-out
}
@media only screen and (min-width: 80.063em) {
.menu-social__list {
position:fixed;
display: block;
right: 2em;
z-index: 10
}
}
@media only screen and (min-width: 1441px) {
.menu-social__list {
right:calc(50vw - 712px)
}
}
.menu-social__item {
float: left;
margin-right: 0.5em
}
@media only screen and (min-width: 20.063em) {
.menu-social__item {
margin-right:0.75em
}
}
@media only screen and (min-width: 40.063em) {
.menu-social__item {
margin-right:1em
}
}
@media only screen and (min-width: 40.063em) {
.menu-social__link .icon-social {
width:1.25em;
height: 1.25em
}
}
.menu-social__item:nth-child(1) .icon-social {
animation: scaleIn 1600ms normal ease-out
}
.menu-social__item:nth-child(2) .icon-social {
animation: scaleIn 1800ms normal ease-out
}
.menu-social__item:nth-child(3) .icon-social {
animation: scaleIn 2000ms normal ease-out
}
@keyframes scaleIn {
0% {
transform: scale(1)
}
75% {
transform: scale(1)
}
80% {
transform: scale(3)
}
100% {
transform: scale(1)
}
}
@media only screen and (min-width: 40.063em) {
.menu-social__link .icon-social--google {
width:2em
}
}
.menu-social__link .icon-social__fill {
fill: #d3dbe4;
transition: fill 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
@media only screen and (min-width: 80.063em) and (min-height: 769px) {
.menu-social__link:hover .icon-social__fill {
fill:#FF6A67
}
}
@media only screen and (min-width: 40.063em) {
.menu-mobile {
display:none
}
}
.menu-mobile__list {
position: relative;
padding: 1.5em;
z-index: 10
}
.body-alert {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0.5em;
padding: 1.25em 1.5em 1.5em;
background-color: #FFFFFF;
box-shadow: 0 0 1em rgba(34,34,34,0.25);
border-radius: 0.25em;
z-index: 100;
animation: alertSlideUp 1.5s
}
@media only screen and (min-width: 40.063em) {
.body-alert {
display:block;
margin: 0.75em;
width: 400px
}
}
@keyframes alertSlideUp {
0% {
transform: translate3d(0, 2em, 0);
opacity: 0
}
75% {
transform: translate3d(0, 2em, 0);
opacity: 0
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.body-alert__title {
display: inline-block;
color: #FF6A67;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.075em;
line-height: 1
}
.body-alert__close {
display: inline-block;
cursor: pointer;
float: right;
outline: none;
margin: 0;
padding: 0;
background-color: transparent;
border: none;
color: #d3dbe4;
font-size: 1.5rem;
line-height: 0.625;
transition: color 200ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.body-alert__close:hover {
color: #556271
}
.body-alert__description {
color: #556271;
font-size: 1rem;
margin: 0.75rem 0 1.25rem
}
.body-alert__button {
display: block;
width: 100%;
color: #FFFFFF;
font-size: 0.75rem;
padding: 0.75rem;
border-radius: 0.25em;
background-color: #FF6A67;
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.075em;
transition: background-color 400ms cubic-bezier(0.16, 0.68, 0.43, 0.99)
}
.body-alert__button:hover {
background-color: #556271
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment