*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
} html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
} img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
max-width: 100%;
} input,
button,
textarea,
select {
font: inherit;
color: inherit;
background-color: transparent;
border: none; } ul,
ol {
list-style: none;
} html,
body {
height: 100%;
} h1, h2, h3, h4, h5, h6, p, a, li, span {
font-size: 1rem;
font-weight: normal;
margin: 0;
text-decoration: none;
color: inherit;
}
@font-face {
font-display: swap;
font-family: "Chop";
font-style: normal;
font-weight: 700;
src: url(https://www.changeonpurpose.de/wp-content/themes/chopinterim/assets/fonts/chop-bold.woff2) format("woff2");  }
:root {
--color-red: #fd4133;
--color-white: #ffffff;
}
html {
font-family: "Chop", Helvetica, sans-serif;
font-size: 16px;
background: var(--color-red);
color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 1024px) {
html {
font-size: 22px;
letter-spacing: -0.04rem;
}
}
header {
padding: 1.5rem;
max-width: 1536px;
margin: 0 auto;
}
main {
padding: 1.5rem;
max-width: 1536px;
margin: 0 auto;
min-height: 90vh;
}
@media screen and (min-width: 1024px) {
main {
padding-top: 10rem;
}
}
*::selection { background: var(--color-white);
color: var(--color-red);
}
h1 {
margin-bottom: 3rem;
}
h2 {
margin-top: 3rem;
font-size: 2rem;
line-height: 1;
}
h3 {
margin-top: 2rem;
font-size: 1.5rem;
}
.chop-big-text {
font-size: 4rem;
font-weight: 700;
letter-spacing: -0.15rem;
line-height: 83%;
}
header .chop-big-text {
font-size: 2rem;
}
header .trademark {
font-size: 0.35rem;
}
header .chop-big-text a {
font-size: inherit;
}
.trademark {
font-size: 0.7rem;
vertical-align: text-top;
display: inline-block;
padding-top: 0.2rem;
}
.home-mt-1 {
margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
.cta-section {
display: flex;
gap: 1rem;
}
}
form {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 3rem;
}
@media screen and (min-width: 1024px) {
form {
flex-direction: row;
gap: 1rem;
width: 66.66%;
margin-top: 0;
}
}
input {
border: 2px solid var(--color-white);
background: var(--color-red);
color: var(--color-white);
padding: 0.5rem;
display: block;
width: 100%;
border-radius: 0;
font-size: inherit;
}
input:focus {
outline: none;
}
input::placeholder {
color: var(--color-white);
}
label {
visibility: none;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
}
button {
background: var(--color-white);
color: var(--color-red);
display: block;
padding: 0.5rem;
width: 100%;
text-align: left;
cursor: pointer;
}
a.download-button {
background: var(--color-white);
color: var(--color-red);
display: block;
padding: 0.5rem;
width: 100%;
text-align: left;
text-decoration: none;
margin-top: 0.5rem;
}
@media screen and (min-width: 1024px) {
a.download-button {
width: 33.33%;
margin-top: 0;
display: flex;
align-items: center;
}
}
@media screen and (min-width: 1024px) {
.section-2 {
display: flex;
gap: 1rem;
}
.section-2 .chop-home-h2 {
width: 66.66%;
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.section-2 .chop-home-h2 h2 {
width: 50%;
}
.section-2 div.home-mt-1 {
width: 33.33%;
margin-top: 3rem;
}
}
.main-content {
margin-top: 3rem;
}
footer {
padding: 1.5rem;
max-width: 1536px;
margin: 0 auto;
}
footer .trademark {
font-size: 0.35rem;
vertical-align: text-top;
display: inline-block;
padding-top: 0.2rem;
}
.fax {
display: none;
}
.label-fax {
display: none;
}
.websitefield {
display: none;
}