@charset "utf-8";

@media (max-width: 1800px) {
    
    .home-jump-toons {
        display: none;
    }

}

@media (max-width: 1447px) {
    
    header.landing .header-top {
        display: none;
    }
    
    header.home {
        height: 100vh;
    }

    .slide-download-app .button-core.formobile {
        width: 120px;
        margin-bottom: 15px;
        padding: 12px 15px;
        font-size: 16px;
        margin-right: 10px;
    }
    
    .slide-download-app .button-core.formobile.last {
        margin-right: 0px;
    }
    
    .slide-download-app a.button-core.formobile:hover {
    	background-color: #EC008B;
    }
    
    .slide-download-app a.button-core.lightpink:hover {
    	color: #EC008B !important;
        background-color: #FEE4F2 !important;
    }
    
    header .banner-download-app {
    	display: none !important;
    }
    
    header .banner-download-callout {
    	display: none;
    }

    header .banner-swipe-callout {
        display: inline-block;
    }

    .app-intro-graphic {
        display: block;
    }

    .home-slide[data-index="1"] .home-banner-text {
        text-align: center;
        margin-top: 170px;
        font-size: 30px;
        line-height: 33px;
    }
    
    .home-slide[data-index="1"] .button-core {
        display: none;
    }
    
    .slide-download-app .appstorebtn {
        display: none !important;
    }
    
    .slide-download-app .button-core.formobile {
    	display: inline-block;
    }
    
    .home-banner-text .small {
        font-size: 18px;
        line-height: 25px;
        font-weight: 500;
    }
    
    .home-slide[data-index="1"] {
        margin: auto;
        left: 0px;
        right: 0px;
        transform: none;
        width: 335px;
    }
    
    header .home-slide-frame-inner {
        left: -374px;
    }
    
    header .home-banner-animation-new .home-banner-animation-logo {
        left: 50%;
        -ms-transform: translateX(-50%);
    	transform: translateX(-50%);
        right: 0px;
        margin: auto;
        padding: 0px;
        top: -1070px;
        width: 1200px;
        height: 1200px;
        transition: top 1.5s ease-in-out;
    }
    
    header .home-banner-animation-new .home-banner-animation-logo img {
        position: absolute;
        width: 100px;
        height: auto;
        bottom: 20px;
        left: 50%;
        -ms-transform: translateX(-50%);
    	transform: translateX(-50%);
    }
    
    header .home-banner-animation-new .home-banner-animation-logo.animatedown {
        top: -200px;
    }
    
    header .home-banner-screen .banner-intro-overlay {
        display: none;
    }
    
    header .home-banner-animation-new-bg {
        background-position: center 495px;
    }
    
    header .home-slide {
        padding-top: 115px;
    }
    
    .home-slide h2 {
        font-size: 22px;
        line-height: 28px;
        padding: 0px 20px 0px 20px;
    }
    
    header.home .header-top {
        display: none;
    }
    
    .home-slide .slide-title {
        height: 10px;
    }
    
    .home-slide .slide-img {
        height: 210px;
    }
    
    .home-slide[data-index="3"] .slide-img img {
        width: 230px;
    }
    
    .home-slide .slide-img img {
        width: 270px;
    }
    
    .home-slide .slide-text {
        padding-top: 12px;
        font-size: 16px;
        line-height: 20px;
    }
    
    header .banner-arrow-left {
        bottom: 80px;
    }
    
    header .banner-arrow-right {
        bottom: 80px;
    }

}

@media (max-width: 980px) {

    .comment-form-wrapper input[name=comment] {
        width: 70%;
    }
    
    .slider .slider-item {
        width: 100%;
    }
    
    .profile-header {
        display: block;
    }
    
    .global-margins.theprofile .app-wrapper {
        margin-top: 0px;
    }
    
    .feed-part .feed-header {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .search-bar {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .reaction-button .reaction-count {
        padding: 7px 10px 7px 8px;
    }
    
    .reactions-actions .reaction-button {
        margin-right: 4px;
    }
    
    .reaction-button .reaction-icon {
        padding: 9px;
    }
        
    .reaction-button.love .reaction-icon .theicon {
        width: 14px;
        height: 14px;
        background-size: 14px 14px;
    }
    
    .reaction-button.comment .reaction-icon .theicon {
        width: 17px;
        height: 16px;
        background-size: 17px 16px;
    }
    
    .reaction-button.comment .reaction-icon {
        padding: 8px 7px;
    }
    
    .post-btn.follow .btn-icon .theicon {
        width: 13px;
        height: 15px;
        background-size: 13px 15px;
    }
    
    .reaction-bubbles li>.cnt {
        padding: 7px 9px 7px 11px;
    }
    
    .reaction-bubbles li>.txt {
        padding: 7px 12px 7px 9px;
    }
    
    .post-btn .btn-icon {
        padding: 8px 9px;
    }
    
    .post-wrapper .right-buttons .post-btn .btn-text {
        padding: 7px 8px;
    }
    
    .reactions-wrapper .right-buttons {
        padding: 10px 20px 10px 0px;
    }
    
    .slidemebar .post-wrapper:first-child {
        margin-left: 20px;
    }

    .ask-purrch .askpurrch-embed-window {
        min-width: auto;
        width: auto;
    }
    
    content .post-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    content .feed-right {
       display: none;
    }
    
    content .feed-left {
        width: auto;
    }
    
    .global-margins {
        width: auto;
        margin: 0px 20px;
    }
    
    .global-margins.thefeed {
        margin: 0px;
    }
    
    .profile-toggle-bar .global-margins {
        margin: 0px;
    }
    
    .notification-toggle-bar .global-margins {
        margin: 0px;
    }
    
    .profile-toggle-bar-slider ul li:first-child {
        padding-left: 20px;
    }
    
    .profile-toggle-bar-slider ul li:last-child {
        padding-right: 20px;
    }
    
    content .feed-left {
        padding: 0px 0px 20px 0px;
    }
    
    content .bodytext {
        max-width: inherit;
        width: auto;
    }
    
    content .bodytext img {
        max-width: 100%;
        width: auto;
    }

    content .bodytext h1 {
        font-size: 33px;
        line-height: 43px;
    }
    
    .ask-purrch .side-note-mobile {
        display: block;
    }
    
    .ask-purrch .ask-purrch-right {
        display: none;
    }
    
    .ask-purrch .ask-purrch-left {
        width: auto;
    }
}

@media (max-height: 840px) {
    
    header.home .padd {
        padding: 0px 0px 180px 0px;
        margin: 0px 30px 0px 30px;
    }

    header .home-banner-slider-track {
        margin-top: 50px;
    }
}

@media (max-width: 650px) {
    
    header .padd {
        text-align: center;
    }
    
    header .right-side {
        display: block;
        float: none;
        text-align: center;
        padding-top: 20px;
    }
    
    header .topic-toggle .shorter {
        display: block;
    }
    
    header .topic-toggle .longer {
        display: none;
    }
    
}


@media (max-width: 600px) {
    
    header .header-menu-toggle {
        width: 27px;
        height: 22px;
        background-size: 27px 22px;
    }
    
    .profile-selector-toggle.active {
    	width: 34px;
    	height: 34px;
    	background-size: 34px 34px;
    }
    
    .profile-selector-toggle .profile-bubble {
        width: 30px;
        height: 30px;
    }
    
    .profile-selector-toggle .profile-bubble img {
        width: 30px;
        height: 30px;
    }

    .profile-selector-toggle .user-notification-count {
        top: -4px;
        right: -4px;
        padding: 3px;
    }
    
    .profile-selector-toggle .user-notification-count span {
        font-size: 8px;
    }
    
    .onboarding.transitioned {
        padding-top: 220px;
    }
    
    .onboarding-footer {
        bottom: -1150px;
        clip-path: ellipse(240% 100% at 50% 100%);
        -webkit-clip-path: ellipse(240% 100% at 50% 100%);
    }
    
    .aninmated-toon.floof {
        bottom: 50px;
    }
    
    .control-group .input-dob {
        width: 100px !important;
    }
    
    .bubble-grid .bubble-grid-img img {
        width: 125px;
        height: 125px;
        border-width: 4px;
    }
    
    .bubble-grid .bubble-grid-title {
        font-size: 18px;
        line-height: 22px;
    }
        
    .onboarding .onboarding-header {
        max-width: none;
        margin: 0px auto 15px auto;
    }
    
    .onboarding {
        padding-top: 80px;
    }
    
    .header-back a {
        height: 30px;
    }

    .header-back img {
        padding: 0px;
    }
    
    header .logo img {
        width: 100px;
        height: auto;
    }
    
    .onboarding h1 {
        font-size: 26px;
        line-height: 30px;
    }
    
    .onboarding .onboarding-header p {
        font-size: 16px;
        line-height: 20px;
    }
    
    header .home-slide-nav {
	    display: block;
    }

    header.home .header-top {
        display: none;
    }

    header.home .header-top.activated {
        right: -70px;
    }
    
    header .banner-arrow-right {
        display: none;
    }
    
    header .banner-arrow-left {
        display: none;
    }
    
    .slide-download-app {
    	padding-top: 595px;
    }
    
    .home-slide h2 {
        font-size: 20px;
        line-height: 25px;
        padding: 0px 10px 0px 10px;
    }
    
    .feed-part .feed-headline {
        font-size: 18px;
        line-height: 24px;
    }
    
    .post-wrapper .post-featured-banner .banner-topics {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: -0.2px;
    }
    
    .post-wrapper .post-featured-banner .banner-headline {
        font-size: 18px;
        line-height: 24px;
    }
    
    .post-wrapper .post-featured-banner .banner-subhead {
    	font-size: 12px;
        line-height: 16px;
    }
    
    .feed-post-slider .post-wrapper {
        width: 250px;
    }
    
    .feed-post-slider .post-wrapper.spaces {
        width: 150px;
    }
    
    .feed-post-slider .post-wrapper.content-card {
        height: 180px;
        width: 130px;
    }
    .feed-post-slider .post-wrapper.content-card .card-media {
        width: 130px;
        height: 130px;
    }
    
    .feed-post-slider .post-wrapper.content-card .card-headline {
        font-size: 13px;
        line-height: 16px;
    }
    .feed-post-slider .post-wrapper.content-card .card-subheadline {
        font-size: 12px;
        line-height: 14px;
    }

}


@media (max-width: 500px) {

    .bubble-grid.pet-type-selector {
        margin: 40px auto 0px auto;
    }
    
    .profile-image-upload-wrapper .selector-button {
        padding: 14px 19%;
    }

    .bubble-grid li {
        width: 120px;
    }
    
    .bubble-grid li:nth-child(1), .bubble-grid li:nth-child(2) {
        width: 150px;
    }  
        
    .bubble-grid.pet-type-selector li .innerpadd {
        padding: 0px 10px;
        margin-bottom: 25px;
    }
    
    .bubble-grid .bubble-grid-img img {
        width: 100px;
        height: 100px;
    }
    
    .bubble-grid .bubble-grid-title {
        padding-top: 10px;
        font-weight: 500;
    }
    
    .control-group label.checkbox span {
        padding: 2px 0px;
    }
    
    header .home-slide-frame {
        margin-left: 50%;
        -ms-transform: translateX(-50%);
    	transform: translateX(-50%);
    }
    
    header .home-slide-frame-inner {
        left: 0px;
    }

    .mobilehide {
        display: none;
    }

    header .header-top .logo {
    	width: 150px;
    	height: 47px;
    	background-image: url('../img/website/purrch-logo-mobile-white.png');
    }

	header .head-title-area {
        padding: 0px 0px 200px 0px;
    }
    
     header .home-banner-screen {
        background-image: none;
    }

    .notification-list-label {
        width: 70%;
    }

    content .bodytext h1 {
        font-size: 26px;
        line-height: 35px;
    }
    
    content .bodytext p {
        font-size: 18px;
        line-height: 22px;
    }
    
    content .bodytext h2 {
        font-size: 20px;
        line-height: 24px;
    }
    
    .ask-purrch .pet-eat-search {
    	font-size: 20px;
    }
    
    .ask-purrch .pet-eat-search input:not([type='checkbox']), .pet-eat-search textarea, .pet-eat-search select {
        padding: 8px 12px 8px 12px;
        margin-bottom: 12px;
        font-size: 20px;
        min-width: 140px;
    }

    .ask-purrch .pet-eat-search .pet-eat-search-options {
        top: 45px;
    }
    
    .ask-purrch .pet-eat-vetmenu {
        font-size: 16px;
        line-height: 20px;
        padding: 20px 20px;
    }
    
    .pet-eat-response .answer-box {
        padding: 20px 20px;
    }
    
    .pet-eat-response .answer-box .inner {
        padding: 0px 0px;
    }
    
    .ask-purrch .pet-eat-response {
        font-size: 16px;
        line-height: 22px;
    }

    .ask-purrch .pet-eat-disclaimer {
        padding: 20px 0px 0px 0px;
    }
    
    .pet-eat-response .verified-by-headline {
        padding: 20px 0px 5px 0px;
    }
    
    .pet-eat-response .verified-by {
        padding: 0px 0px 0px 0px;
    }
    
    .pet-eat-response .verified-by .inner-scroll {
        overflow-x: auto;
        overflow-y: auto;
        cursor: inherit;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    
    .pet-eat-response .verified-by .verified-by-img {
        vertical-align: middle;
    	display: inline-block;
    	max-width: 24%;
    	vertical-align: top;
    }
    
    .pet-eat-response .verified-by .verified-by-details {
        padding-top: 0px;
        padding-left: 8px;
        max-width: 68%;
        text-align: left;
        display: inline-block;
    }
    
    .pet-eat-response .verified-by .verified-by-img img {
    	width: 60px;
    	max-width: 100%;
    	height: auto;
    }
    
    .pet-eat-response .verified-by ul {
        display: block;
    }
    
    .pet-eat-response .verified-by li {
        display: block;
        width: 100%;
        background-color: transparent;
        padding: 10px 0px;
        border-radius: 0px;
        border: 0px;
        margin-right: 0px;
        border-bottom: 1px solid #e3e3e3;
        text-align: left;
    }
    
    .pet-eat-response .verified-by li .innerpadd {
        padding: 0px 0px 0px 0px;
    }
    
    .ask-purrch .pet-eat-vetmenu {
        text-align: left;
    }
    
    .get-app img {
        width: 130px;
        height: auto;
    }
    
    header .padd {
        padding: 15px 0px;
    }
    
    footer .footernav ul li {
        display: block;
        text-align: center;
    }
    
    footer .footernav ul li a {
        display: block;
        padding: 15px 0px;
        background-color: #74BBD7;
        margin: 20px 0px;
    }
    
    .join-us-on-purrch a {
        padding: 8px 15px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    
    .button-core {
        color: #ffffff !important;
        text-align: center;
        display: block;
        padding: 15px 40px;
    }
    
    .profile-image-upload-wrapper .selector-button {
        padding: 14px 14%;
    }
    
    .bubble-grid li {
        width: 110px;
    }
    
    .bubble-grid li:nth-child(1), .bubble-grid li:nth-child(2) {
        width: 130px;
    }
    
    .bubble-grid .bubble-grid-img img {
        width: 80px;
        height: 80px;
    }
    
    .bubble-grid.pet-type-selector li .innerpadd {
        padding: 0px;
    }
    
}

@media (max-width: 370px) {
    
    .profile-image-upload-wrapper .selector-button {
        padding: 14px 10%;
    }
    
    .bubble-grid li {
        width: 100px;
    }

    .control-group .input-dob {
        width: 90px !important;
    }
    
    .control-group .input-dob.month {
        width: 110px !important;
    }
    
    .control-group .input-dob.day {
        width: 90px !important;
    }
}