/*!
Theme Name: Healthy Books For Kids
Theme URI: https://them.es/starter
Author: SEO Quartz
Author URI: https://seoquartz.com
Description: This is a theme for kid books
Version: 3.5.3
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: healthybooks4kids
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */

/* From http://codex.wordpress.org/CSS */

* {
  font-family: "Schoolbell";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 22px
}
p, li
{
  font-family: "Schoolbell";
  font-optical-sizing: auto;
  font-style: normal;
}

dl, ol, ul {
    margin-bottom: 1rem;
    margin-top: 0;
    list-style-position: inside;
}
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
	max-width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.bypostauthor {
	font-weight: bold;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
.navbar-brand {
    color: #77ae14 !important;
    font-size: 3em !important;
}

.main-header .navbar-toggler {
    color: #77ae14;
    font-size: 22px;
    font-weight: 900;
    position: absolute;
    right: 10px;
	text-shadow: 1px 1px #fff;
	top:20px;
	z-index: 1050;
}
nav#header {
    padding: 0;
}

.woocommerce ul.products li.product a {
    text-decoration: none;
    text-align: center;
    color: #77ae14;
    font-size: 24px;
}

.navbar-nav li.menu-item {
    float: left;
    display: inline-block;
    max-width:350px;
    margin: 0 auto;
}

.navbar-nav .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}
.row.imset {
  position: relative;
}
.imset .mid {
  position: absolute;
  top: 0;
  left: 30%;
}
.imset .mid img {
  width: 100%;
  height: auto;
  clip-path: circle(59% at 50% 50%);
  
}
 .imset .left {
  background-color: rgb(237 237 237);
  padding: 30px 20px;
  position: absolute;
  top: 60px;
  left: 8%;
  z-index: 5;
}
.imset .right {
  position: absolute;
  right: 146px;
  top: 200px;
  z-index: 66;
}
.imset .right img {
  width: 100%;
  height: auto;
  border-radius: 100%;
}
.cloud {
   background: #e98014b5;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center; 
    animation: smoothBounce 2s infinite;   
}
.cloud span{ 
    animation: ripple 2s linear infinite;
}
 .curved-text span
{
	color: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    padding:20px;
    text-align: center;
    border: 2px solid #f5f4f4;
    box-shadow: 2px 2px 6px inset #fdfdfd;
    transition: .3s linear;
    font-size: 20px;
    font-weight: 900;
    1px 1px #fff;
}
 .curved-text span:hover {
transform: scale(1.1);
}



/* Home Page CSS */
.home  #main {margin-top:0;}
.main-header:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0;
    background-image: url("assets/imgs/header-bg_v1.png");
    background-position: bottom;
    background-repeat-y: no-repeat;
    transform: rotate(0deg);
    background-size: cover;
}
.secondary-color a {
    color: #77ae14;
}

.girlBook {
  padding: 100px 0 50px;
  background-position: center center;
  background-size: cover;
  background-repeat: repeat;
  background-color: #deeead;

}
.girl {
  position: relative;
}
.girl .center-menu {
    border: 2px solid rgb(54, 54, 54);
    border-radius: 50%;
    padding: 40px;
    width: 550px;
    height: auto;
    background: #fff;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    
}
.girl .center-menu img{max-height: 430px;}
.welcome-text {
  color:#77ae14;
}
.circ1,
.circ2,
.circ3,
.circ4 {
  text-decoration: none;
  color: #fff;
  width: 135px;
  height: 135px;
  border-radius: 100px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid rgb(0, 0, 0);
}
.circ1 {
    position: absolute;
    top: 8%;
    left: 25%;
    transition: 0.3s ease-in;
}
.circ1:hover {
  transform: scale(1.1);
  letter-spacing: 1.1px;
}
.circ2 {
    position: absolute;
    bottom: 5%;
    left: 24%;
    transition: 0.3s ease-in;
}
.circ2:hover {
  transform: scale(1.1);
  letter-spacing: 1.1px;
}
.circ3 {
  position: absolute;
  top: 8%;
  right: 25%;
  transition: 0.3s ease-in;
}
.circ3:hover {
  transform: scale(1.1);
  letter-spacing: 1.1px;
}
.circ4 {
  position: absolute;
  bottom: 5%;
  right: 24%;
  transition: 0.3s ease-in;
}
.circ4:hover {
  transform: scale(1.1);
  letter-spacing: 1.1px;
}
.allMenu a {
    text-decoration: none;
    color: #77ae14;
    font-size: 24px;
    text-align: center;
    font-weight: 800;
    letter-spacing: 1px;
}
.girl span {
  font-size: 27px;
}


#footer {position: relative; background-color: transparent; !important}
#footer:after { content: ""; position: absolute; width: 150%; height: 100px;top: -60px; left: -50%; background-image: url("assets/imgs/content-background-torn.png"); background-position: bottom; background-repeat-y: no-repeat; transform: rotate(180deg);}
#footer .container-fluid {	z-index: 99;position: relative;}
#footer #clouds{
	background: url('assets/imgs/cloud.svg');
    background-size: cover;
    background-position: center;
    height: 200px;
    margin: 0;
}

.cloud::before{
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  animation: inherit;
  animation-delay: 1s;
  position: absolute;
}

.cloud:nth-child(1) {	
      --delay: 1.9s;
    }
    .cloud:nth-child(2) {
      --delay: 0.8s;
    }
    .cloud:nth-child(3) {
    	--delay: 2.5s;
    }
    .cloud:nth-child(4) {    	
      --delay: 0s;
    }
    .cloud:nth-child(5) {      
      --delay: 1.2s;
    }

    .cloud {
      animation-delay: var(--delay);
    }

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .3rem rgba(233, 128, 20, 62%);
  }
  100% {
    box-shadow: 0 0 0 2rem rgba(233, 128, 20, 0);
  }
}

@keyframes smoothBounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(-20px);
    animation-timing-function: ease-in-out;
  }
}

#navbar #menu-main{
    width: 100% !important;
    margin: auto;
    top: 20px !important;
    text-align: center !important;
    background: linear-gradient(270deg, #000000, #000000) !important;
    opacity: .9;
    height: 100vh;
}
.navbar-nav .nav-link {
    padding: 20px !important;
}
.navbar-nav .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 24px;
    color: #FFF;
}
.navbar-nav .nav-link:hover {    
    color:  #77ae14;
    letter-spacing: 2px;
}
.navbar-toggler {
   background-color: none !important;
    border: none !important;
}
.navbar-toggler i{
  font-size: 50px !important; 
    color: #fc7e14;
}
.inner-page #main {
    margin-top: 4.5rem;
    margin-bottom: 5rem;
}
.main-page #main {
    margin-top: -30px;
    margin-bottom: 0rem;
}
.page-template-page-nosidebar #main
{
	margin-bottom: 80px;
}
.post-title {
    font-size: 40px;
    font-weight: 600;
}

.post img, .post-thumbnail img {
    height: auto;
    max-width: 100%;
    width: -webkit-fill-available;
}
.single-books #main
{
	margin-bottom: 100px;
}
.btn.singleButton.btn-primary
{
	padding: 5px 30px !important;
	font-size: 20px;
   font-weight: 600;
}
.btn.singleButton.btn-primary:hover
{
	background-color: #fff;
	color: #0d6efd;
	border: 1px solid #fc7e14;
}
.card-body {
   
    padding: 10px;
}
.card-body p
{
	font-size: 16px;
	font-weight: 400;
	padding-top: 10px;
}

.archive #main
{
	margin-bottom: 80px !important;
}
header.page-header {
    margin-bottom: 30px;
    padding: 0 !important;
}
header.card-body
{
	padding: 10px 10px 0;
}
.card-body .card-title a
{
	color: #fc7e14;
}
.blog-post-wrp-sec .post-thumbnail img {
    width: auto;
    height: 400px;
}

.page-template-template-characters-list .post-thumbnail img {
    max-height: 350px;
    width: auto;
}

.bookPage .row
{
	row-gap: 30px !important;
}
.bookPage
{
	margin-bottom: 80px;
}
.bookPage .col-lg-2 {
        width: 20% !important;
    }
.bookPage .entry-title a
{
	font-size: 22px;
}
/*.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: left;
    margin-right: 20px;
}
.woocommerce div.product div.images img {
    display: block;
    width: 85%;
}*/
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: left;
    margin-right: 20px;
}
.woocommerce div.product div.images img {
    display: block;
    width: 90%;
}
@media screen and (max-width:1280px)
{
	.circ1 {
    left: 15%;
    }
  .circ2 {
    left: 17%;
    }
  .circ3 {
    right: 15%;
  }
  .circ4 {
    right: 17%;
  }

}
@media (max-width:1024px)
{
	.u-section-2 .u-group-1 
	{
    width: 500px !important;
   }
   .circ1 {
    left: 15%;
    }
  .circ2 {
    left: 16%;
    }
  .circ3 {
    right: 15%;
  }
  .circ4 {
    right: 16%;
  }
	
}
@media (max-width:980px)
{
	.u-section-2 .u-group-1 
	{
    width: 500px !important;
   }
   .circ1 {
    left: 6%;
    }
  .circ2 {
    left: 7%;
    }
  .circ3 {
    right: 5%;
  }
  .circ4 {
    right: 7%;
  }
	
}
@media (max-width:767px)
{
	.u-section-2 .u-group-1 { 
    margin: 0 !important;
	}
	.u-section-2 .u-shape-1 {
     width: 0px !important; 
    
}
.cloud
{
	width: 150px !important;
	margin: auto !important;
	flex-direction: column !important;
}
.circ1 {
    left: -11%;
    }
  .circ2 {
    left: -9%;
    }
  .circ3 {
    right: -3%;
  }
  .circ4 {
    right: -12%;
  }
  .circ5 {
    right: -2%;
  }
	.main-header:before {
    height: 120px;
  }
  .navbar-brand {
    font-size: 2.5em !important;
  }
}
@media screen and (max-width:576px)
{
	.navbar-brand {
    color:  #77ae14 !important;
    font-size: 2em !important;
}
#footer p
{
	font-size: 16px;
}
.u-section-2 .u-group-1 {
    min-height: 0px;
     width: 100% !important;
    height: auto;
    margin: -478px auto 60px 0;
    padding: 14px !important;
    }
    .circ1, .circ2, .circ3, .circ4, .circ5 
    {
      display: none;
    }
    .girl img {
  
    height: auto;
   
}
.navbar-brand {
    color: #77ae14 !important;
    font-size: 1.5em !important;
}
   .main-header:before {
    height: 100px;
  }
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {
    padding: .318em 1em;
}