@font-face {
    font-family:AktiveGroteskEx;
    src: url('/font/AktivGroteskEx_Trial_Bd.ttf') format('truetype');
}

@font-face {
    font-family: ProximaNovaSemiBold;
    src: url('/font/ProximaNova-Sbold.otf') format('opentype');
}

@font-face {
    font-family:ProximaNovaReg;
    src: url('/font/ProximaNova-Reg.otf') format('opentype');
}

@font-face {
    font-family: ProximaNovaLight;
    src: url('/font/ProximaNova-Light.otf') format('opentype');
}

@font-face {
    font-family:ProximaNovaBold;
    src: url('/font/ProximaNova-Bold.otf') format('opentype');
}

body {
    font-family: ProximaNovaSemiBold,sans-serif;
    background-color: #F2F2F2;
}

.header {
    font-family: AktivGrotesk-Medium,sans-serif;
    font-weight:700;
    letter-spacing:1px;
}

select {
    font-size: 20px;
    line-height: 28px;
    border: solid 1px rgb(206,212,218);
    border-radius: 8px;
    height: 34px;
    background: url(/img/br_down2.png) no-repeat right;
    -webkit-appearance: none;
    background-position: right 0px bottom 0px;
    background-size: auto 100%;
    padding-left: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    color: rgb(72,94,107);
    height:42px;
}

input[type='checkbox'] {
    accent-color: #8cb7c9 !important;
}

.form-check-input:checked {
    background-color: #8cb7c9 !important;
}

@media (max-width:767px) {
    h2 {
        font-size: 1.8rem;
    }

    body {
        font-size: 0.8rem;
    }

    .desktop-asset {
        display: none;
    }

    .mobile-asset {
        display: block;
    }

    .scrollerimg {
        max-width: 60px;
    }

    .squiggle {
        display: none;
    }

    #stage {
        margin-top: 10px;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 75px;
    }

    .scrolltitle {
        font-size: smaller;
    }

    .scrolldesc {
        font-size: small;
    }

    .plan-button label {
        margin-bottom: 30px;
    }

    .form-control::placeholder {
        font-size: 0.8rem;
    }

    .sizegrid {
        left: 50%;
        transform: translateX(-50%);
    }

    .btn-price {
        font-size: xx-small !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .btn-ghost-price {
        font-size: xx-small !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #puppyUpfrontButton {
        margin-left: -17px !important;
    }
}

@media (min-width:768px) {
    h2 {
        font-size: 40px;
    }

    .desktop-asset {
        display: block;
    }

    .squiggle {
        display: block;
    }

    .form-control::placeholder {
        font-size: 1rem;
    }

    .sizegrid {
        padding-left: 25px;
    }

    .btn-price {
        font-size: x-small !important;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .btn-ghost-price {
        font-size: x-small !important;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (min-width:501px) and (max-width:768px) {
    .squiggle {
        display:none;
    }
}

@media (min-width:501px) {
    .desktop-asset {
        display: block;
    }

    .mobile-asset {
        display: none;
    }

    .scrollerimg {
        max-width: 75px;
    }

    #stage {
        margin-top: 20px;
    }

    .scrolltitle {
        font-size: inherit;
    }

    .scrolldesc {
        font-size: smaller;
    }

    .form-control::placeholder {
        font-size: 1rem;
    }

    .btn-price {
        font-size: x-small !important;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .btn-ghost-price {
        font-size: x-small !important;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

h2 {
    font-family: AktiveGroteskEx,sans-serif;
    font-weight:700;
    line-height: 48px;
    margin-bottom: 15px;
}

h3 {
    font-family:AktiveGroteskEx, sans-serif;
    line-height:24px;
    font-size:14px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:20px;
}

h4 {
    font-family:ProximaNovaReg, sans-serif;
    font-size:13px;
    font-weight:400;
    letter-spacing:1px;
    margin-bottom:20px;
}

h5 {
    font-family:AktiveGroteskEx, sans-serif;
    font-size:12px;
    text-transform:uppercase;
    color: rgb(197,197,197);
}

a {
    color: rgb(206,124,70);
    line-height: 28px;
    font-size: 16px;
    text-decoration: none;
}

.radiolabel {
    display:none;
}

    .radiolabel+label {
        font-family: ProximaNovaReg, sans-serif;
        font-size: 13px;
        font-weight:400;
        letter-spacing: 1px;
        margin-bottom: 20px;
        background-color: rgb(192,192,192);
        color: black;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 35px;
        padding-right: 35px;
    }

        .radiolabel:checked+label {
            background-color:rgb(140,183,201);
            color:white;
            font-weight:700;
        }


.form-control {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.form-control-dropdown {
    appearance: menulist-button;
    padding-top: 12px !important;
}

.form-control::placeholder {
    font-family:ProximaNovaReg;
    font-weight: 200;
    color: #a6a6a6;
}

.btn {
    transition-duration: 0.2s;
    font-family:AktiveGroteskEx;
    letter-spacing:1px;
    font-weight: 400;
    background-color: rgb(206,124,70);
    color: #fff;
    border: solid 1px #d06b3e;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 1.5rem;
    line-height: 1.5;
    font-size: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn-continue {
    padding-left: 80px;
    padding-right: 80px;
}

@media (min-width:501px) {
    .btn:hover {
        background-color: black;
        color: white;
    }

    .btn-price:hover {
        background-color: black !important;
        color: white;
    }
}

@media (max-width:500px) {
    .btn-price:hover {
        background-color: black !important;
        color: white;
    }

    .btn:hover {
        color: white;
    }
}

.btn2 {
    background-color: transparent;
    color: black;
    border: none;
    transition-duration: 0.2s;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 1.5rem;
    line-height: 1.5;
    font-size: 18px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width:501px) {
    .btn2:hover {
        background-color: black;
        color: white;
    }
}

@media (max-width:500px) {
    .btn2:hover {
        color: white;
    }
}

.alert {
    position: fixed;
    bottom: 50px;
    right: 20px;
    padding: 25px;
    color: rgb(96,96,96);
    border-radius: 5px;
}

.custom-checkbox {
    min-height: 30px;
    padding-left: 10px;
    padding-right: 15px;
    font-size: 20px;
    color: rgb(56,56,56);
    margin-top: 5px;
    margin-bottom: 5px;
}

.custom-control-label {
    letter-spacing: 1px;
    padding-left: 10px;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: #007bff;
    background-color: #007bff;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5);
}

.plan-button input {
    display: none;
}

.plan-button label {
    box-shadow: rgba(34, 34, 34, 0.1) 0 1px 5px 3px;
    background: #f7f7f7;
    display: flex;
    border-radius: 0.25rem;
    padding: 0.5rem;
    border: solid 4px transparent;
    opacity: 0.9;
    flex-direction: column;
}

    .plan-button label img {
        flex: 0 0 40%;
        max-width: 40%;
        height: auto;
    }

    .plan-button label .plan-details {
        flex: 1 1 auto;
    }

@media (min-width: 768px) {
    .plan-button label {
        display: block;
        height: 100%;
    }
}

.plan-button input:checked + label {
    background: #fff;
    border-color: #8cb7c9;
    opacity: 1;
}

.prog {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .prog {
        margin: 1rem 0 0 0;
    }
}

.prog li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    flex: 1 1 auto;
    height: 1px;
    width: 100%;
    border-radius: 0;
    border: solid 2px #E5D4D3;
}

@media (min-width: 768px) {
    .prog li {
        flex: 0 0 auto;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 0.4rem;
        position: relative;
        margin: 0 1rem;
    }

        .prog li::after {
            content: "";
            position: absolute;
            top: 50%;
            display: block;
            width: 2rem;
            left: 100%;
            height: 0;
            transform: translate(2px, -1px);
            border-top: solid 1px #E5D4D3;
            border-bottom: solid 1px #E5D4D3;
        }
}

@media (min-width: 992px) {
    .prog li {
        margin: 0 1.5rem;
    }

        .prog li::after {
            width: 3rem;
        }
}

@media (min-width: 1200px) {
    .prog li {
        margin: 0 1.75rem;
    }

        .prog li::after {
            width: 3.5rem;
        }
}

@media (min-width: 1400px) {
    .prog li {
        margin: 0 2rem;
    }

        .prog li::after {
            width: 4rem;
        }
}

.prog li:last-child::after {
    display: none;
}

.prog li.active {
    background: #D06B3E;
    border-color: #D06B3E;
}

.prog li.entered {
    background: #8cb7c9;
    border-color: #8cb7c9;
}

    .prog li.entered::after {
        border-color: #8cb7c9;
    }


.vcenterdiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hcenterdiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.backLink {
    color: black;
}

    .backLink:hover {
        color: #8CB7C9;
    }