body {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}
  
h1, h2, h3, h4, h5, h6 {
    font-family: "EB Garamond", serif;
    font-weight: 700;
}

.bg-primary {
    background-color: #001F46 !important;
}

.bg-secondary {
    background-color: #BE0A28 !important;
}

.text-primary {
    color: #001F46 !important;
}

.text-secondary {
    color: #BE0A28 !important;
}

.btn-primary {
    background-color: #BE0A28 !important;
    border-color: #BE0A28 !important;
    border-radius: 30px;
    padding: 10px 30px;
    transition: all 100ms ease-out;
}

.btn-primary:hover,
.btn-primary:active {
    transform: scale(110%);
    transition: all 200ms ease-in;
}

input[type="checkbox"] {
    appearance: none;
}

.button-icon:after,
input[type="checkbox"]:not(checked),
input[type="checkbox"]:hover.button-icon:after,
input[type="checkbox"]:focus.button-icon:after,
input[type="checkbox"]:checked {
    position: relative;
    left: 240px;
    top: 3px;
    width: 20px;
    height: 20px;
}

.button-icon:after,
input[type="checkbox"]:not(checked) {
    content: url(../img/square-solid.png);
}

input[type="checkbox"]:hover.button-icon:after,
input[type="checkbox"]:focus.button-icon:after,
input[type="checkbox"]:checked {
    content: url(../img/square-check-solid.png);
}

.logo img {
    width: 100px;
    height: 100px;
}

.main {
    min-height: calc(100vh - 304px);
}

.progress { 
    height: 15px;
    background-color: #f2f2f2;
}

.progress-bar { 
    background-color: #BE0A28; 
    transition: width 1s ease-in-out;
}

.input-group-append {
    cursor: pointer;
  }

.form-question,
.form-info {
    font-family: "EB Garamond", serif;
    font-size: calc(1.375rem + 1.5vw);
    line-height: 1.2;
    font-weight: 700;
}

.form-control {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.form-label {
    font-size: .9rem;
    margin-bottom: 0 !important;
}

.form-check-label {
    font-size: 1.25rem;
}

.question,
#checking, 
#offer {
  display: none;
}

#continueButton {
    width: 300px;
}

.answer-box {
    width: 300px;
    border-radius: 1rem;
    cursor: pointer;
}

.answer-box:hover,
.answer-box:active {
    background-color: #BE0A28 !important;
}

input[type='radio'] {
    opacity: 0;
}

.form-check-input {
    opacity: 1 !important;
}

label span {
    position: relative;
    left: -6px;
    font-size: 1.135em;
    font-weight: 700;
}

.privacy {
    font-size: .75rem !important;
    font-weight: 700;
}

.footer {
    background-color: #222222;
}

.hinweis {
    max-width: 500px;
}

.footer a {
    color: #ffffff;
    text-decoration: none;
}

.footer a:hover,
.footer a:active,
.footer a:focus {
    color: #cccccc;
}

@media(min-width: 768px){
    .logo img {
        width: 200px;
        height: 200px;
    }
    #continueButton {
        width: 330px;
    }
    .answer-box {
        width: 330px;
        font-size: 1.125em;
    }
    .button-icon:after,
    input[type="checkbox"]:not(checked),
    input[type="checkbox"]:hover.button-icon:after,
    input[type="checkbox"]:focus.button-icon:after,
    input[type="checkbox"]:checked {
        left: 260px;
        top: 4px;
    }
    #form-box {
        width: 500px;
    }
}