:root {
    --main: #1476BB;
    --second: #F7D708;
    --headline: 'Anton', sans-serif;
    --text: 'Kalam', cursive;
}

html#lp {
    font-size: 25px;
}
#b1 img{
    width: 100%;
    height: auto;
}
#bc h1,
#bc h2,
#bc h3 {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.2em;
    margin: unset;
    padding: unset;
}
.custom-logo{
    width: auto;
    height: 100px;
}
#bc p,
#bc input,
#bc textarea,
#bc li,
#bc div,
#bc ul {
    font-family: 'Kalam', cursive;
    margin: unset;
    padding: unset;
    line-height: 1.2em;
}

#bc .maxWidth {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 0 50px;

}

#bc header.maxWidth {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#bc .maxWidth .call p {
    font-family: sans-serif;
    color: var(--main);
}

#bc .maxWidth .call a {
    color: #F00;
    font-family: sans-serif;

}




#b1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

#b1 .left {
    width: 50%;
    display: inline-block;
}

#b1 .right {
    width: 49%;
    display: inline-block;
    text-align: center;
    max-width: 530px;
}

#b1 .right h1 {
    font-size: 3rem;
    padding: 0 0 10px 0;
}

#b1 p.top {
    font-size: 2rem;
    color: #F00;
}

#b1 ul {
    text-align: left;
    color: var(--main);
    display: inline-block;
    width: 350px;
}

#b1 ul li p {
    color: var(--main);
    margin-bottom: 10px;
}

#bkg {
    background-image: url('https://wilsonprintingusa.com/wp-content/uploads/2021/06/Confetti.jpg');
    background-position: right center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.1;
    background-repeat: no-repeat;
    background-size: 135% auto;
}

#b2 {
    background-color: var(--second);
    display: flex;
    align-items: center;
    padding: 50px 100px;
    border-radius: 40px;
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
}

#b2 .left h2 {
    font-size: 2rem;
    text-align: center;
}

#b2 .left h2.big {
    font-size: 2.75rem;
    color: #F00;
}

#b2 .left .btn {
    color: #FFF;
    background-color: var(--main);
    text-align: center;
    padding: 10px 25px;
}

#b2 .left {
    width: 400px;
    min-width: 300px;

}

#b2 .right {
    margin-left: 75px;
}

#b2 .right ul li {
    padding: 10px 0;
}

#b3 {
    padding: 100px 0;
    position: relative;
}

#b3 .left {
    background-color: var(--main);
    color: #FFF;
    border-radius: 40px;
    padding: 50px;
    width: 500px;
    position: relative;
}

#b3 .left h2 {
    text-align: center;
    margin-bottom: 25px;
}

#b3 .left ul {
    margin-left: 25px;
}

#b3 .left ul li {
    padding: 15px 0
}

#b3 .left .accent {
    width: 70%;
    height: 60%;
    position: absolute;
    left: -25px;
    bottom: -25px;
    z-index: -1;
    background-color: var(--second);
    border-radius: 40px;
}

#b3 .flex {
    justify-content: space-between;
    align-items: flex-end;
}

#b3 #map {
    width: 70%;
    height: 700px;
    position: absolute;
    right: 0;
    top: -150px;
    z-index: -2;
    background-image: url('https://wilsonprintingusa.com/wp-content/uploads/2021/06/map2.jpg');
    background-size: cover;
    background-position: center
}

#b3 .right {
    position: relative;
}

#b3 .right img {
    position: relative;
    z-index: 2;
}

#b3 .right .label {
    position: absolute;
    top: 60%;
    z-index: 1;
    width: 100%;
    left: -120px;
    background-color: #F00;
    color: #FFF;
    padding: 15px 25px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

}

#b3 .left .flex2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
}

#b3 .left .btn {
    color: var(--main);
    background-color: #FFF;
    padding: 15px 25px;
}

#b3 .left a {
    color: #FFF;
    font-family: var(--text);
}

#b4 {
    position: relative;
    padding-top: 100px;
    padding-bottom: 50px;
}

#b4 .bkg {
    background-color: var(--second);
    height: 60%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

#b4 .maxWidth {
    position: relative;
}

#b4 h2 {
    text-align: center;
    font-size: 1.8rem;
}

#b4 .right {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    background-color: #FFF;
    color: var(--main);
    padding: 50px;
    width: 400px;
    border-radius: 40px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

#b4 .btn {
    background-color: var(--main);
    color: #FFF;
    text-align: center;
    padding: 10px;
}

#b4 p {
    margin: 20px 0;
}

#b5 {
    background-color: #eee;
    position: relative;
    padding: 50px 0;
}

#b5 .bkg {
    width: 100%;
    background-color: var(--second);
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#b5 h2 span {
    font-family: var(--headline);
    color: #F00;
}

#b5 .maxWidth {
    position: relative;
    z-index: 2;
}

#b5 h2 {
    text-align: center;
    font-size: 2.5rem;
}

#b5 form {
    padding: 50px;
    border-radius: 40px;
    background-color: #FFF;
    max-width: 700px;
    width: 100%;
    margin: 25px auto 0;
}

#b5 form .row {
    display: flex;
    justify-content: space-between;

}

#b5 form .row span {
    width: 49%;
}

#b5 form input {
    line-height: 1em;
}

#b5 form input,
#b5 form textarea {
    width: 100%;
    padding: 5px 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    margin-top: 10px;

}

#b5 form textarea {
    height: 200px;
}

#b5 form input[type="submit"] {
    display: inline-block;
    width: auto;
    background-color: var(--main);
    color: #FFF;
    padding: 10px 25px;
    border: unset;
    line-height: 1em;
}

#b5 form .row span.wpcf7-not-valid-tip {
    width: 100%:
}

html #bc .wpcf7 form.invalid .wpcf7-response-output,
html #bc .wpcf7 form.unaccepted .wpcf7-response-output,
html #bc .wpcf7 form.sent .wpcf7-response-output {
    padding: 10px;
    display: block;
    margin-top: 25px;
}

#bc footer {
    background-color: #eee;
    text-align: center;
}

#bc .btn {
    cursor: pointer;
}

#bc .btn:hover {
    background-color: #333;
    color: #FFF;
}

#darkBack {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    display: none;
}

#darkBack.on {
    display: block;
}

#bc #eBook,
#bc #popSave {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000000;
    display: none;

}

#bc #eBook.on,
#bc #popSave.on {
    display: block;
}

#eBook .wrap,
#popSave .wrap {
    background-color: #FFF;
    padding: 50px;
    border-radius: 40px;
}

#popSave h2 {
    font-size: 5rem;
    text-align: center;
    color: var(--main);
}

#popSave h3 {
    font-size: 1.5rem;
    text-align: center;
    color: var(--main);
    margin-bottom: 20px;
}

#eBook form,
#popSave form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

#eBook form input,
#popSave form input {
    width: 100%;
    margin-top: 10px;
    background-color: #eee;
    border: 1px solid #333;
    padding: 5px 10px;
}

#eBook form input[type="submit"],
#popSave form input[type="submit"] {
    padding: 10px;
    background-color: var(--main);
    color: #FFF;
    border: unset;
}

#eBook form .row,
#popSave form .row {
    display: flex;
    justify-content: space-between;
}

#eBook form .row span,
#popSave form .row span {
    width: 49%;
}

#eBook form .row span.wpcf7-not-valid-tip,
#popSave form .row span.wpcf7-not-valid-tip {
    width: 100%;
}

#eBook img,
#popSave img {
    position: absolute;
    top: -140px;
    left: -180px;
    z-index: -1;
    height: 300px;
}


#eBook .wrap h2 {
    color: var(--main);
    text-align: center;
    font-size: 2.7em;
}

#eBook .wrap p {
    font-size: 1.5em;
    text-align: center;

}

#flip.on {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000000000;

}

#flip.on iframe {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1200px) {
    html#lp {
        font-size: 20px;
    }

    #b3 .right img {
        width: 300px;
    }

    #b3 .left {
        width: 440px;
    }

    #b4 img {
        width: 80%;
    }

    #b4 {
        padding-top: 50px;
    }
}

@media only screen and (max-width: 1000px) {

    #b1,
    #b2 {
        flex-direction: column;
    }

    #b2 .left {
        margin-bottom: 25px;
        width: 300px;
    }

    #b3 #map {
        width: 100%;
        left: 0;
        right: unset;
    }

    #b3 .flex {
        flex-direction: column-reverse;
        align-items: center;
    }

    #b3 .right {
        left: 100px;
    }

    #b3 .left {
        width: 90%;
        max-width: 700px;
    }

    #b4 .maxWidth {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #b4 .right {
        position: relative;
        right: unset;
        transform: unset;
        top: unset;
        width: 100%;
        margin-top: 25px;
    }

    #b4 h2 br {
        display: none;
    }

    #bkg {
        background-position: right top;
    }

    #b1 .right {
        width: 100%;
    }

    #b1 .left {
        width: 75%;
    }

    #b2 {
        padding: 50px 25px;
    }

    #b2 .right {
        margin-left: unset;
    }

    #b2 .right ul {
        margin-left: 25px;
    }
}

@media only screen and (max-width:500px) {
    #b3 .maxWidth {
        padding: 0;
    }

    #b3 .left {
        width: 100%;
        border-radius: unset;
    }

    #b3 .right img {
        width: 200px;
    }

    #b3 .right .label {
        z-index: 3;
        left: unset;
        text-align: center;
        width: auto;
    }

    #b3 .left .flex2 {
        flex-direction: column;

    }

    #b3 .left .btn {
        margin-bottom: 10px;
    }

    #b3 .left {
        padding: 50px 25px;
    }

    #b4 img {
        width: 100%;
    }

    #b4 .maxWidth {
        padding: 0 25px;
    }

    #b3 {
        padding: 100px 0 50px
    }

    #b5 .maxWidth {
        padding: 0;
    }

    #b5 h2 {
        font-size: 1.5rem;
    }

    #b4 .right {
        padding: 50px 25px;
    }

    #b5 form {
        border-radius: unset;
        padding: 50px 25px;
    }

    #bc header.maxWidth {
        padding: 0 25px;
    }

    #bc #eBook.on,
    #bc #popSave.on {
        width: 90%;
    }
}

@media only screen and (max-width:450px) {
    #bc header.maxWidth img {
        height: 50px;
        width: auto;
    }

    #b1 .right h1 {
        font-size: 2rem;
    }

    #b1 p.top {
        font-size: 1.5rem;
    }

    #b1 ul {
        width: 80%;
    }

    #b2 {
        border-radius: unset;
        width: 100%;
    }

    #bc .maxWidth .call p,
    #bc .maxWidth .call a {
        font-size: 16px;
    }

    #b3 .left .accent {
        display: none;
    }

    #b3 {
        padding: 100px 0 0;
    }

    #b4 {
        padding-bottom: unset;
    }

    #b4 .bkg {
        height: 100%;
    }

    #b5 {
        padding-bottom: 0;
    }

    #b3 .flex {
        overflow-x: hidden;
    }

    #b1 .left {
        width: 100%;
    }

    #b2 .left {
        min-width: 250px;
    }
}








































































/*END*/