/*
Theme Name: Zen Pet Care
Theme URI: https://www.valice.com/
Author: Valice
Author URI: https://www.valice.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Template: whitespace
Text Domain: zen-pet-care
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Whitespace is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
    font-family: 'Roboto', sans-serif;
    color: #50494e;
}

a,
a:visited {
    color: #5eb098;
}

a:hover {
    color: #99a511;
}

a.button,
.button,
.wp-block-button .wp-block-button__link  {
    background: #fff;
    color: rgba(0,0,0,.64);
    border: 1px solid rgba(33,33,33,.64);
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 0;
}

a.button:hover,
.button:hover,
.wp-block-button .wp-block-button__link:hover {
    background: #bfbabe;
}

a.button.green {
    background-color: #99a511;
    color: #fff;
    border: none;
}

a.button.green:hover {
    background: #5eb098;
}

/* Site Header */

.site-header {
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-around;
}

.site-header .site-branding img {
    max-width: 300px;
    height: auto;
    margin: 10px;
}

.site-header .site-title a {
    background-image: url(images/logo.png);
    width: 400px;
    max-width: 100%;
    height: 130px;
    background-position: center;
    background-size: contain;
    display: block;
    color: transparent;
    background-repeat: no-repeat;
}

/* Navigation */

.site-header .main-navigation {
    text-align: center;
    margin-bottom: 10px;
}

.site-header .main-navigation {
    max-width: 900px;
    margin: 10px 80px 10px 80px;
}

.site-header .main-navigation ul {
    justify-content: space-between;
    font-size: 18px;
}

.site-header .main-navigation li.menu-item.home-icon a,
.site-header .main-navigation li.menu-item.home-icon a:hover,
.site-header .main-navigation li.menu-item ul.sub-menu li a,
.site-header .main-navigation li.menu-item ul.sub-menu li a:hover {
    border: none;
}

.site-header .main-navigation ul li {
    margin: 0 10px;
}

.site-header .main-navigation ul li a {
    border-bottom: 1px solid transparent;
    color: #50494e;
}

.site-header .main-navigation ul li a:hover {
    border-bottom: 1px solid #99a511;
    color: #99a511;
}

.site-header .main-navigation ul.sub-menu {
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
    background: #f5f6f6;
    text-transform: none;
    font-size: 18px;
}

.site-header .main-navigation ul.sub-menu li a {
    padding: 10px;
    line-height: 1;
}

.pre-header ul {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    margin: 0;
}

.pre-header ul li {
    list-style-type: none;
    margin: 0 10px;
}

.pre-header ul li a {
    text-decoration: none;
}

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

    .site-header .main-navigation li.menu-item.home-icon {
        display: none;
    }

    .site-branding .site-title {
        margin: 0;
        padding: 0;
    }

    .site-header {
        flex-direction: column;
        align-items: center;
    }

    .menu-toggle {
        display: block;
    }

    .main-navigation ul {
        display: none;
    }

    button.menu-toggle {
        color: transparent;
        margin: 0 auto;
        border: none;
        background-color: transparent;
    }

    button.menu-toggle:before {
        content: "\f349";
        font-family: 'dashicons';
        color: #99a511;
        display: block;
    }

    .site-header .main-navigation {
        text-align: left;
        padding: 0 20px;
    }

    .site-header p.site-title {
        margin: 0 auto;
    }
}

/* Footer */

.site-footer {
    margin: 0;
    padding: 0;
}

.site-footer .footer-top {
    background-color: #bfbabe;
    padding: 60px 10px;
}

.site-footer .footer-top .widget-area {
    display: flex;
    justify-content: space-evenly;
    text-align: left;
    flex-wrap: wrap;
}

.site-footer .footer-top .widget-area .widget {
    width: 250px;
    margin: 10px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
}

.site-footer ul li.menu-item {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
}

.site-footer .footer-top a {
    color: #333;
}

.site-footer .footer-top h2.widget-title {
    font-size: 18px;
}

.site-footer h2.site-title {
    font-family: 'Amatic SC', cursive;
    letter-spacing: 1.5px;
    font-weight: 300;
}
.site-footer .tagline {
    font-family: 'Amatic SC', cursive;
    font-size: 50px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #fff;
    line-height: .7;
}

.site-footer .footer-copyright {
    font-size: 14px;
}

@media only screen and (max-width: 600px) {
    .site-footer .footer-top .widget-area {
        flex-direction: column;
    }
}

/* Page Layout */

.page {
    margin-bottom: 0;
}

.page-header,
.single-post .entry-header {
    text-align: center;
    padding: 20px 10px;
    background-color: #5eb098;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight:300;
}

h1.page-title {
    text-align: center;
    font-family: 'Amatic SC', cursive;
    font-weight: 100;
    font-size: 56px;
}

.blog .content-area {
    border-top: 5px solid #99a511;
}

article {
    padding-bottom: 40px;
}

.archive article,
.blog article {
    background: #f5f6f6;
}

.page-content,
.single-post .entry-content,
.single-post .entry-footer {
    background: #fff;
    padding: 40px;
    margin: 0 auto;
    max-width: 1050px;
}

.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container {
    line-height: 1;
}

.wp-block-cover-image .wp-block-cover__inner-container a,
.wp-block-cover .wp-block-cover__inner-container a {
    text-decoration: none;
}

.page-content .wp-block-cover, .wp-block-cover-image {
    margin: -40px -40px 40px -40px;
    width: auto;
}

.page-content .wp-block-column .wp-block-cover, .wp-block-cover-image {
    margin: 0;
}

h1.script,
h2.script {
    font-family: 'Amatic SC', cursive;
    font-size: 50px;
    color: #99a511;
    font-weight: normal;
}

/* Toggle */

.toggleable {
    margin-bottom: 30px;
}

.toggleable.service-menu {
    margin-bottom: 10px;
}

.toggleable .toggle-body {
    display: none;
    background: #f5f6f6;
    padding: 0 20px 20px 20px;
    font-size: 18px;
}

.toggleable.open .toggle-body {
    display: block;
}

.toggleable .toggle-handle {
    border-bottom: 1px solid #5eb098;
    font-size:  20px;
}

.toggleable .toggle-handle:before {
    content: "\f10f";
    font-family: 'dashicons';
    margin-right: 10px;
    vertical-align: middle;
}

.toggleable.open .toggle-handle:before {
    content: "\f14f";
    font-family: 'dashicons';
}
    
/* Blog */

.blog .archive-content,
.archive .archive-content {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.post-type-archive-service .archive-content {
    flex-direction: column;
}

.blog .site-main article,
.archive .site-main article {
    width: 300px;
    margin: 20px;
}

.blog .site-main article .entry-header,
.archive .site-main article .entry-header,
.entry-footer {
    padding: 20px 20px 0 20px;
    text-align: center;
}

.image-header {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: right center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-header h1.page-title {
    padding: 40px;
    width: 500px;
    text-align: center;
    max-width: 100%;
    line-height: 1;
    color: #fff;
    text-shadow: 3px 8px 10px #000;
    font-size: 60px;
    font-weight: 700;;
}

.home .image-header {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: right center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.image-header .page-heading {
    background: #fff;
    padding: 40px;
    max-width: 600px;
    color: #5eb098;
    font-size: 20px;
    margin-left: 150px;
}

.image-header .page-heading p {
    margin-top: 0;
    padding-top: 0;
}

.image-header .page-heading h1 {
    font-family: 'Amatic SC', cursive;
    font-weight: 100; 
    font-size: 60px;
    margin: 0;
    padding: 0 0 0 5px;
    color: #99a511;
}

.logo-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo-bar > div {
    width: 250px;
    padding: 10px;
}

.blog .site-main article .entry-header,
.archive .site-main article .entry-header {
    line-height: 1;
}

article .entry-header a {
    text-decoration: none;
}

.blog .site-main article .entry-content,
.archive .site-main article .entry-content {
    text-align: center;
    padding: 0 20px;
}

.posts-navigation {
    clear: both;
    width: 100%;
}

.posts-navigation .nav-links {
    max-width: 1050px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.navigation.pagination {
    padding: 10px;
    text-align: center;
}

/* Forms */

.gform_wrapper table {
	border: 1px solid;
	margin: 20px auto;
}

.gform_wrapper table th {
	background:#f5f5f5;
	padding: 10px
}

.gform_wrapper table td {
	line-height:1;
	padding: 5px;
}

.gform_wrapper.abn_wrapper .gf_left_ten {
    width: 5% !important;
    display: inline-block;
    vertical-align: top;
    float: none;
}

.gform_wrapper.abn_wrapper .gf_right_ninety {
    width: 95%;
    display: inline-block;
    vertical-align: top;
    float: none;
}

body .gform_wrapper.abn_wrapper ul li.gfield.gf_left_ten  {
	margin-top:0 !important;
}

table.gsurvey-likert .gsurvey-likert-row-label {
    width: 200px;
    text-align: left;
    padding-left: 5px !important;
}

/* Home Page */

.home .image-header {
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background-position: left center;
}

.home .home-page-content {
    background: #fff;
}

.image-header-content {
    max-width: 600px;
    line-height: 1;
    margin: 0 10% 0 20px;
}

.image-header-content h1 {
    color: #fff;
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
    font-size: 60px;
    margin-bottom: 0;
    padding-bottom: 0;
    text-shadow: 3px 8px 10px #000;
}

.image-header-content h2 {
    margin-top: 0;
    padding-top: 0;
    text-shadow: 5px 5px 8px #fff;
}

.image-header-content a.button {
    background: #fff;
    color: #5eb098;
    padding: 10px 20px;
    font-size: 20px;
    border: none;
}

.image-header-content a.button:hover {
    border: none;
    background-color: #5eb098;
    color: #fff;
}

.services-section {
    max-width: 1060px;
    margin: 0 auto;
    padding: 60px 20px;
}

.overview-section h2,
.services-section h2,
.testimonials-section h2,
.articles-section h2 {
    font-family: 'Amatic SC', cursive;
    font-weight: 100;
    font-size: 60px;
    color: #5eb098;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: center;
    line-height: 1;
}

.about-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 100px 20px;
}

.overview-section {
    padding: 100px 0 150px 0;
    text-align: center;
}

.overview-section h2 {
    padding-bottom: 20px;
}

.overview-section-inner {
    display: flex;
    justify-content: center;
    text-align: left;
}

.overview-section .about-content {
    width: 50%;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.overview-section .about-content .about-content-inner {
    padding: 20px;
    max-width: 700px;
}

.overview-section .about-content a.button:hover {
    background: #5eb098;
}

.overview-section .about-image {
    width: 50%;
    background-size: cover;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    height: 600px;
}

.image-separator {
    background-attachment: fixed;
    height: 500px;
    background-size: cover;
    background-position: center;
}

.services-section {
    padding: 100px 0;
}

.services-section-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.services-section .service-block {
    width: 300px;
    margin: 20px 20px 0 20px;
    background: #99a511;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.services-section .service-block .service-image {
    height: 300px;
    background-size: cover;
}

.services-section .service-block .service-content {
    padding: 10px;
    color: #fff;
    text-align: center;
}

.services-section .service-block .service-content a.button {
    margin-top: 20px;
    display: block;
}

thead {
    font-weight: bold;
}

table.service-products-table tr td {
    width: 16.66%;
}

table.service-products-table tr td:first-child {
    width: 50%;
}

.testimonials-section {
    padding: 150px 10px;
}

.testimonial-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.testimonial-items .testimonial-item {
    width: 300px;
    height: 400px;
    margin: 20px;
    background: #50494e;
    box-shadow: 3px 3px 5px #ccc;
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.testimonial-items .testimonial-item h3 {
    line-height: 1;
    font-size: 26px;
    font-weight: 300;
}

.testimonial-items .testimonial-item h3 b {
    font-weight: 600;
}

.testimonial-items .testimonial-item .testimonial-author {
    display: block;
    font-style: italic;
    margin-top: 10px;
}

.articles-section {
    padding: 150px 0;
    background-color: #c1bdbf;
}

.articles-section h2 {
    color: #fff;
}

.articles-section .random-posts {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-wrap: wrap;
}

.articles-section article {
    background: #fff;
    box-shadow: 3px 3px 5px #ccc;
    width: 400px;
    margin: 20px;
}

.articles-section article .image-header,
article.post .image-header {
    height: 300px;
    background-position: center;
}

.articles-section article .entry-content,
.articles-section article .entry-header {
    padding: 0 20px;
    text-align: center;
}

.home-bottom-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 100px 0 60px 0;
}

.home-bottom-section .home-bottom-content {
    margin: 20px;
    box-shadow: 3px 3px 5px #f5f5f5;
    background: #bfbabe;
    text-align: center;
    width: 400px;
    padding: 20px;
}

.home-bottom-section .home-bottom-content a.button {
    margin-top: 20px;
}

.home-bottom-section .bottom-image {
    height: 300px;
    background-size: cover;
    background-position: center;
    margin: -20px -20px 40px -20px;
}

.fun-facts {
    margin: 60px auto;
    background: #5eb098;
    color: #fff;
    padding: 20px;
    max-width: 700px;
    box-shadow: 2px 2px 5px #ccc;
}

.fun-facts h2 {
    color: #fff;
    padding-bottom: 20px;
}

.count-number {
    font-size: 40px;
    margin-bottom: 0;
}

/* Services */

.service-item {
    display: flex;
    margin: 40px 10px;
}

.service-item:nth-child(even) {
    flex-direction: row-reverse;
}

.service-item > div {
    width: 50%;
    margin: 15px;
}

.service-products {
    display: flex;
    flex-wrap: wrap;
}

.service-product {
    width: 280px;
    margin: 20px;
    box-shadow: 3px 3px 5px #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #f5f5f5;
    padding: 0;
}

.service-product-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
}

.service-product .service-product-content {
    text-align: center;
    font-size: 18px;
    padding: 10px;
    font-size: 15px;
}

.service-product h3 {
    font-size: 18px;
    margin: 0;
    padding: 10px;
    text-align:center;
    border-bottom: 1px solid #5eb098;
}

.holidays {
    width: 200px;
    max-width: 100%;
}

@media only screen and (max-width:600px) {
    .service-item,
    .service-item:nth-child(even) {
        flex-direction: column;
    }

    .service-item > div {
        width: 90%;
        margin: 10px auto;
    }
}


/* Animation */

.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
  }
  
.js-scroll.scrolled {
    opacity: 1;
  }

  .scrolled.meal-plan.slide-in {
    -webkit-animation: slide-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  .scrolled.meal-plan.slide-in:nth-child(odd) {
	-webkit-animation: slide-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.50, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.50, 0.575, 0.565, 1.000) both;
}

.flip-in-ver-right {
	-webkit-animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scrolled.slide-in-left,
.no-scroll.slide-in-left {
    -webkit-animation: slide-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

.scrolled.slide-in-right,
.no-scroll.slide-in-right {
	-webkit-animation: slide-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scrolled.slide-in-bottom,
.no-scroll.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }

  @-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }

  @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

  @-webkit-keyframes flip-in-ver-right {
    0% {
      -webkit-transform: rotateY(-80deg);
              transform: rotateY(-80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }
  @keyframes flip-in-ver-right {
    0% {
      -webkit-transform: rotateY(-80deg);
              transform: rotateY(-80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }
  
  

@media only screen and (max-width: 1100px) {
    .home .image-header {
        height: 400px;
    }
}

@media only screen and (max-width: 815px) {
    .meal-plan,
    .meal-plan:nth-child(even) {
        flex-direction: column;
    }

    .meal-plan .meal-plan-content,
    .meal-plan .meal-plan-image {
        width: 100%;
    }

    .meal-plan .meal-plan-image {
        height: 300px;
    }

    .overview-section-inner {
        flex-direction: column-reverse;
    }

    .overview-section .about-image {
        width: 500px;
        max-width: 100%;
        height: 400px;
        margin: 0 auto 20px auto;
    }

    .overview-section .about-content {
        width: 100%;
    }
}

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

    .image-header-content {
        padding: 10px;
        margin: 10px;
    }

    .wp-block-columns.how-it-works {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .image-header .page-heading {
        margin-left: 0;
        padding: 20px;
    }

    .image-header {
        height: 400px;
    }
}