@import url(“fonts.googleapis.com/css?family=Raleway&display=swap”); @import url(“fonts.googleapis.com/css?family=Josefin+Sans&display=swap”); html {
background: #fff; color: #fff; font-family: Raleway, sans-serif; font-size: 1rem; font-weight: 400; overflow: hidden;
} body, html {
height: 100%;
} h1 {
font-size: 2rem; font-weight: 600; line-height: 2rem;
} p {
word-spacing: 0.1rem;
} a {
color: #ff073a; text-decoration: none;
} a:hover {
color: #fff;
} .highlight-title {
color: #d53d1f; text-shadow: 0.2rem 0.2rem 0.2rem #d53d1f;
} .highlight-link {
box-shadow: inset 0 -0.125rem 0 #d53d1f; box-sizing: border-box; color: #ff073a; display: inline-block; padding: 0.125rem; transition: all 0.2s ease-in-out;
} .highlight-hover {
box-shadow: inset 0 -2rem 0 0 #d53d1f; color: #fff;
} .layout {
margin: 0.5rem; max-width: 75em; padding: 0.5rem;
} .layout .card {
background: linear-gradient(145deg, hsla(0, 0%, 45%, 0.15) 15%, #2b2d2f 80%); border-radius: 2rem; margin: 3rem 0; padding: 1rem 2rem;
} .layout .card .title {
text-align: center; position: relative;
} .layout .card .subtitle {
text-align: center;
} .layout .card .description {
text-align: justify;
}
preloader {
-ms-flex-align: center; align-items: center; background: #fff; display: -ms-flexbox; display: flex; height: 100%; -ms-flex-pack: center; justify-content: center; left: 0; margin: 0.5rem; padding: 0.5rem; position: absolute; right: 0; z-index: 999;
} preloader .load {
height: 6rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 6rem;
} preloader .load hr {
animation: a 2s ease infinite; border: 0; height: 40%; margin: 0; position: absolute; width: 40%;
} preloader .load :first-child {
animation-delay: -1.5s; background: #fff;
} preloader .load :nth-child(2) {
animation-delay: -1s; background: #d53d1f;
} preloader .load :nth-child(3) {
animation-delay: -0.5s; background: #fff;
} preloader .load :last-child {
background: #d53d1f;
} @keyframes a {
0%, to { transform: translate(0); } 25% { transform: translate(160%); } 50% { transform: translate(160%, 160%); } 75% { transform: translateY(160%); }
} .footer {
background: #fff; color: #081b2f; margin: 0.5rem; padding: 1rem; text-align: center;
} .footer a {
color: #d53d1f;
}
@keyframes b {
to { stroke-dasharray: 510; stroke-width: 0.5rem; }
} @keyframes c {
0% { stroke: #081b2f; stroke-dasharray: 510; stroke-width: 0.5rem; } to { stroke: #d53d1f; stroke-dasharray: 83; stroke-width: 0.5rem; }
} @keyframes d {
to { stroke: #000; }
} @keyframes e {
to { stroke: #b23121; }
} @keyframes f {
to { stroke: #007bb6; }
} @keyframes g {
to { stroke: #1da1f2; }
} .contact-icons {
display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center;
} .contact-icons .social-link {
position: relative; height: 3rem; line-height: 3rem; margin: 0.25rem; text-align: center; width: 3rem;
} .contact-icons .social-link .social {
font-size: 1.5rem;
} .contact-icons .social-link .social-svg {
fill: #ff073a;
} .contact-icons .social-hover {
cursor: pointer; animation: h 1s infinite alternate;
} .contact-icons .social-hover .social-svg {
fill: #fff;
} .contact-icons .black:hover .social-svg {
fill: #000;
} .contact-icons .linkedin:hover .social-svg {
fill: #007bb6;
} .contact-icons .twitter:hover .social-svg {
fill: #1da1f2;
} @media only screen and (min-width: 48em) {
.layout { margin: 0.5rem auto; padding: 2rem; } .layout .card .description, .layout .card .subtitle { font-size: 1.25rem; } .landing-title h1 { font-size: 3rem; } .landing-icons .social-link { width: 4rem; height: 4rem; line-height: 4rem; } .landing-icons .social-link .social { font-size: 2rem; } .contact-icons .social-link { width: 4rem; height: 4rem; line-height: 4rem; } .contact-icons .social-link .social { font-size: 2rem; }
} @media only screen and (min-width: 62em) {
.layout { padding: 3rem; } .layout .card { padding: 1rem 3rem; }
} @media only screen and (min-width: 75em) {
.layout { padding: 5rem; }
} @keyframes h {
0% { bottom: 0; } 50% { bottom: 0.5rem; } to { bottom: 0; }
}