@import url('https://fonts.googleapis.com/css?family=Poppins');
html body p span div {
    font-family: 'Poppins', sans-serif;
}

/* 
    Search for phrase below to start on custom styles.
    - CUSTOM STYLING FOR MY PET EVERYWHERE -
*/


/* LAYOUT STYLES FROM PURECSS.IO EXAMPLES */
/* Landing Page Layout - Marketing CSS */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    background-color: #ffffff;
    line-height: 1.4em;
    color: #313e4e;
    font-size: 17px;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    font-family: 'Poppins', sans-serif;
    color: #34495e;
    line-height: 1.3em;
}

a {
    color: #61aedd;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

/* Generic Styles */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.is-center,
.text-center {
    text-align: center;
}
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.m-0 { margin: 0 !important; }
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-5 { padding-top: 5px !important; }
.pt-10 { padding-top: 10px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-0 { padding-left: 0 !important; }
.pl-5 { padding-left: 5px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-15 { padding-left: 15px !important; }

.validation-summary-errors {
    letter-spacing: normal;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
 
.header {
    border-bottom: 1px solid #f4f4f4;
}

/* Container/Wrapper Styles */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 1.5em;
}

/* This is the class used for the footer */
.universal-footer {
}
.footer {
    background: #f4f4f4;
    bottom: 0;
    width: 100%;
}

    #footer .footer-link {
        overflow: hidden;
        display: flex;
        width: 100%;
        height: 100%;
        padding: 10px 6px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        border: 1px solid #efefef;
    }
    
    #footer .footer-link:hover {
        background-color: #efefef;
        text-decoration: none;
    }
    
    #footer .footer-link .fa-chevron-right {
        font-size: 1.7rem;
    }


/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
/*
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}
*/

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #47b475;
    color: #ffffff;
    padding: 0.75em 1em;
    width: auto;
    letter-spacing: 0;
    border-radius: 0;
    max-width: 100%;
    white-space: normal;
}
.pure-button-primary,
a.pure-button-primary {
    background: #47b475;
}
.pure-button-secondary,
a.pure-button-secondary {
    background-color: #61aedd;
}
.button-list-item {
    margin-bottom: 0.5rem;
}
.button-social {
    padding: 0.5em 1.5em;
}
.button-center {
    display: inline-block;
    margin: 0 auto;
}
.button-width-250 {
    width: 250px;
}

/*
 * -- WAGGY CUSTOM STYLES --
 * I want my pure-button elements to look a little different
 */
.primary {
    color: #47b475;
}
.secondary {
    color: #61aedd;
}

.bg-primary {
    background-color: #47b475;
}
.bg-secondary {
    background-color: #61aedd;
}
.bg-lightgray {
    background-color: #f4f4f4;
}

/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0em;
    text-align: center;
}
.home-menu {
    background: #ffffff;
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    padding: 0;
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #313e4e;
    transition: 0.5s;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #313e4e;
    text-decoration: underline;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background: #cce3fc;
}
.home-hero .pure-g {
    align-items: center;
}
.splash {
    margin: auto;
    text-align: center;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 165%;
    font-weight: bold;
    color: #313e4e;
    border: 0;
    margin: 15px 0 20px;
    padding: 0;
    border-radius: 5px;
    line-height: 1.2em;
    text-align: center;
}
.home-hero .splash-content .home-hero-button {
    text-align: center;
}

/* This is the subheading that appears on the blue section */
.splash-content .splash-subhead {
    margin: 10px 0;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.1em;
}
.splash-content p {
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.1rem;
}
.home-splash-img {
    max-height: 450px;
    display: block;
    margin: 0 auto;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    width: 100%;
}

/* We want to give the content area some more padding */
.content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1em 1em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: bold;
    letter-spacing: 0;
    margin: 1.5em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #313e4e;
}
    .content-subhead i {
        margin-right: 7px;
    }
.home-wrap h2.content-subhead {
    font-size: 1.2em;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
}

.home-wrap { }
.home-wrap .l-box p {
    max-width: 310px;
    margin-right: auto;
    margin-left: auto;
}

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
}

/* Product/Plan Selector */
.term-toggle-btn:after {
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 26px;
    position: absolute;
    right: 2px;
    top: 2px;
    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(1, 0.02, 0.1, 1);
    width: 26px;
}

.term-toggle-btn {
    background-color: rgb(143, 148, 155);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    font-family: Lato-Regular, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    height: 30px;
    line-height: 22.8571px;
    margin: 0px 10px;
    position: relative;
    text-align: center;
    text-size-adjust: 100%;
    user-select: none;
    vertical-align: middle;
    width: 80px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

    .term-toggle-btn.actvie {
        background-color: rgb(143, 148, 155);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        cursor: pointer;
        display: inline-block;
        font-family: Lato-Regular, Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-style: normal;
        height: 30px;
        line-height: 22.8571px;
        margin-bottom: 0px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0px;
        position: relative;
        text-align: center;
        text-size-adjust: 100%;
        user-select: none;
        vertical-align: middle;
        width: 80px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

.selector {
    text-align: center;
    padding: 15px;
}

.active > .term-toggle-btn::after {
    transform: translateX(-50px);
}
.product-plan {
    position: relative;
}
.best-value {
    background-color: #47b475;
    float: right;
    width: 85px;
    height: 85px;
    padding: 18px 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.2em;
    border-radius: 100%;
    position: absolute;
    top: -35px;
    right: -55px;
}
.price-wrap {
    overflow: hidden;
    clear: both;
}
.price-monthly {
    float: left;
    padding: 10px 15px;
    background-color: #61aedd;
    margin-bottom: 10px;
    border-radius: 2px;
    color: #ffffff;
}
    .price-dollar {
        display: inline-block;
        font-size: 2em;
        margin-right: -17px;
        line-height: 1em;
    }
    .price-period {
        display: inline-block;
    }
.price-total {
    clear: both;
    font-size: 18px;
}
.plan-detail {
    clear: both;
}

/* Checkout Page */
.checkout-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
}
.checkout-wrapper > .l-box {
    padding-top: 0;
    padding-bottom: 0;
}

.tooltip-wrapper {
    width: 100%
}

    .tooltip-wrapper *, .tooltip-wrapper label:not([for*="checkbox-"]):not([for*="radio-"]) {
        display: inline-block
    }

    .tooltip-wrapper .icon-info {
        position: relative;
        cursor: pointer;
        font-size: 0.7em;
    }

        .no-touch .tooltip-wrapper .icon-info:hover .tooltip, .tooltip-wrapper .icon-info.touch .tooltip {
            top: 25px;
            left: auto
        }

        .tooltip-wrapper .icon-info .tooltip {
            font-family: sans-serif !important;
            line-height: 1.4em;
            position: absolute;
            padding: 15px;
            background-color: #FFFFFF;
            text-align: left;
            z-index: 10;
            top: -9999px;
            left: -9999px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 0 2px 0 rgba(0,0,0,0.25)
        }

            .tooltip-wrapper .icon-info .tooltip:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                top: -10px;
                left: 75px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #333333
            }

            .tooltip-wrapper .icon-info .tooltip:after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                top: -10px;
                left: 75px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #FFFFFF
            }

#checkout .icon-info.payment .tooltip {
    width: 195px;
    left: -75px;
    font-size: 1rem;
}

    #checkout .icon-info.payment .tooltip:before, #checkout-container #checkout .icon-info.payment .tooltip:after {
        left: 75px;
    }



/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
    }

    .splash-head {
        font-size: 240%;
    }
    
    .home-hero .splash-head,
    .home-hero .splash-content .home-hero-button {
        text-align: right;
    }
    
    .home-splash-img {
        margin: 0;
    }

    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
    
    .price-wrap {
        clear: none;
    }
    
    #checkout .icon-info.payment .tooltip {
        width: 340px;
        font-size: 1.1rem;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 280%;
    }
}

/* END OF LAYOUT STYLES FROM PURECSS.IO EXAMPLES */


/* BEGINNING OF CUSTOM STYLING */

/* CUSTOM STYLING FOR MY PET EVERYWHERE */

/* Generic Styles */
a.link-primary,
a.link-primary:visited {
    text-decoration: none;
}
a.link-primary:hover,
a.link-primary:active,
a.link-primary:focus {
    text-decoration: underline;
    
}
a.color-primary {
    color: #1f8dd6;
}

.hidden-xs {
    display: none;
}
.display-xs {
    display: block;
}

/* Button Styles*/
.button-secondary-bg {
    background-color: #fdbf12;
    color: #313e4e;
}
.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}
/* End Button Styles */

/* Image Styles */
.img-responsive {
    max-width: 100%;
}
/* End Images Styles */

/* List Styles */
.list-unstyled {
    list-style: none;
    padding: 0;
}
/* End List Styles */


/* Added items for additional background styling */

/*
 * -- Mobile (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media screen and (min-width: 35.5em){
    .hidden-xs {
        display: block !important;
    }
    .display-xs {
        display: none !important;
    }
}
/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {
    .hidden-sm {
        display: block !important;
    }
    .display-sm {
        display: none !important;
    }
}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    
}

/* ENDING OF CUSTOM STYLING */
/*Ben*/
.pure-button-gold {
    background-color: #d6b837
}

.mobileOnly {
    display: none;
}

.desktopOnly {
    display: initial;
}
@media screen and (max-width: 35.5em) {
    
    .mobileOnly {
        display: initial;
    }

    .desktopOnly {
        display: none;
    }
    .checkoutContainer {
        padding-left: 0px;
        padding-right: 0px;
    }
}


.pure-button-hover, .pure-button:focus, .pure-button:hover {
    filter: none;
    background-image: none;

}