.knuff-section {
    padding: 25px !important;
}

.knuff-section p {
    margin-bottom: 20px;
    padding:0px;
}

.knuff-block-hero {
    margin-top:-200px;
}


.knuff-block {
    margin-top:-20px;
}

.knuff-title {
    text-align:center;
}
.knuff-title span {
    position:relative;
    top:-70px;
}

.flex { display:flex; }
.col { width : 100% }
.col-80 { width:80%; align-self: center; }
.col-60 { width:60%; align-self: center; }
.col-40 { width:40%; align-self: center; }
.col-20 { width:20%; align-self: center; }



.tight-c-20 {
    width:100%; padding: 0 20% 0 20%; align-items: center
}
.tight-c-10 {
    width:100%; padding: 0 10% 0 10%; align-items: center
}

.img100p {
    width:100%;
    padding:4px;
}

.v--wide {
    display:block;
}

.v--small {
    display:none;
}

.knuff-content {
    margin-top: -40px;
}


.knuff-btn {
    display: inline-block;
    background-color: #d55a20;
    color: white;
    padding: 4px 20px;
    border-radius: 50px;
    text-decoration: none;
    margin: 5px 0;
}

.knuff-btn:hover {
    background-color: #e07c0a;
    color: white;
    text-decoration: none;
}

.knuff-btn span {
    color: black;
    font-weight: bold;
}

.pt-mo-20 { padding-top: 0px; }
.pt-mo-40 { padding-top: 0px; }
.pt-mo-80 { padding-top: 0px; }

.pt-dt-20 { padding-top: 20px; }
.pt-dt-40 { padding-top: 40px; }
.pt-dt-80 { padding-top: 80px; }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Flexbox utilities */
.flex-center { display: flex; align-items: center; }
.flex-start { display: flex; align-items: flex-start; }
.flex-col-center { display: flex; flex-direction: column; justify-content: center; }

/* Margin utilities */
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.my-30 { margin: 30px 0; }

/* Text utilities */
.text-center { text-align: center; }
.text-small { font-size: 90%; }
.text-large { font-size: 110%; }

/* ==========================================================================
   Reusable Components
   ========================================================================== */

/* Numbered feature circle (orange) */
.knuff-num {
    background: #d55a20;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Feature item row */
.knuff-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.knuff-feature--center { align-items: center; }

/* Image caption */
.img-caption { text-align: center; font-style: italic; margin-top: 10px; }

/* Button row container */
.btn-row { text-align: center; margin-top: 30px; }
.btn-row-l { text-align: left; margin-top: 30px; }

@media (max-width: 767px) {

    .knuff-block {
        margin-top:-80px;
    }

    .knuff-section p {
        margin-top:10px;
        margin-bottom: 20px;
        padding:2px;
    }


    .pt-mo-20 { padding-top: 20px; }
    .pt-mo-40 { padding-top: 40px; }
    .pt-mp-80 { padding-top: 80px; }

    .pt-dt-20 { padding-top: 0px; }
    .pt-dt-40 { padding-top: 0px; }
    .pt-dt-80 { padding-top: 0px; }
}