/*#how-it-works-page-topbit {
#how-it-works-page {
    margin-bottom: 1em;
}
 * HOW IT WORKS PAGE

#how-it-works-page-topbit h1 {
    text-align: center;
}
#how-it-works-page {
    margin-top: 2rem;
}
#how-it-works-page .section {
    padding: 10px;
}

#how-it-works-page .section .section-text {
    padding: 50px;
}
#how-it-works-page .section .section-image {
    text-align: center;
}
#how-it-works-page .section .section-image img {
    max-width: 100%;
}
#how-it-works-page .btn {
    width: 300px;
}
*/


#hiw-banner {
    margin:0;
    padding: 15px;
    position: relative;
    background-color: #fafafa;
    text-align: center;
}
#hiw-banner:before {
    content: '';
    background: url('../img/hiw-left.png');
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top:0;
    width: 50vw;
    background-size: auto 100%;
    background-position: left;
    background-repeat: no-repeat;
}
#hiw-banner:after {
    content: '';
    background: url('../img/hiw-right.png');
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top:0;
    z-index: 0;
    width: 50vw;
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
#hiw-banner #banner-inner-row {
    height: 20vmin;
    position:relative;
    padding: 10px;
}
#hiw-banner #hiw-banner-content p {
    display: inline-block;
    color: var(--fs-danger);
    font-weight: bold;
    font-size: 1.3rem;
    padding-top: 20px;
    margin-bottom:0;
    position: relative;
}
#hiw-banner #hiw-banner-content p:before,
#hiw-banner #hiw-banner-content p:after {
    content: "";
    display: inline-block;
    border-top: 3px solid var(--fs-danger);
    top: calc(50% + 0.5rem);
    left: -60px;
    width: 30px;
    position: absolute;
}
#hiw-banner #hiw-banner-content p:before {
    left: initial;
    right: -60px;
    width: 30px;
}
#hiw-banner #hiw-banner-content h1 {
    color: var(--fs-main);
    font-weight: bold;
    font-size: 4.5rem;
    margin-top: 0;
    padding-top: 0;
}
#hiw-banner #hiw-banner-content {
    text-align: center;
    position:absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width:100%;
    transform: translateY(-50%) translateX(-50%);
    background: rgba(255,255,255,0.8);
}

#how-it-works-page h1 {
    text-align: center;
    margin: 1rem 0;
}

#how-it-works-page .section {
    margin-bottom: 1rem !important;
}

#how-it-works-page .section-text,
#how-it-works-page .section-image {
    margin-bottom: 1rem !important;
}

@media all and (max-width: 768px) {
    #how-it-works-page {
    text-align: center}
}


/*
 * Large devices (desktops, less than 1200px)
 */
@media (max-width: 1199.98px) {
    #hiw-banner #hiw-banner-content h1 {font-size: 2rem;}
}

@media (max-width: 1299.98px) {
    #hiw-banner:before {background-position: right;}
    #hiw-banner:after {background-position: left;}
}