/*
Theme Name: Baby Toys Store
Theme URI: https://www.buywpthemes.net/products/free-toy-store-wordpress-theme/
Author: Peccular
Author URI: https://www.buywpthemes.net/
Description: Arresting children’s attention is amongst the most complex things to achieve.  So baby toy shop owners looking for a website from where they can sell and display baby toys online and reach wider audience should have one look at our Baby Toys Store WordPress theme. It is crafted by our creative team after a lot of thought and brainstorming and the outcome is right here before you to see and visualize visitor’s experience. The theme has been crafted to have an excellent visual appeal as per demand of the niche. The good news is that while it looks awesome it is also a breeze to own. It is quick to download, install and easy to maintain yourself without knowing any coding skills. This powerful and versatile baby toys store WordPress theme will help you display and showcase toys online to serve your customers as well as improve your visibility. The design is not only captivating; it is a combination of functionality and responsiveness which are designed to enhance efficiency and returns for your business. It will optimize your conversion and productivity and thus baby toys store owner will be able to maximize profitability. If you own a baby toys store and want to create an online presence for it, all you have to do is download and install Baby Toys Store WordPress theme and install it. Once you’ve downloaded, it is ready to be shaped into something useful and striking. With rightly created spaces to place content, images of toys and Call-to-action button. The overall environment of Baby Toys Store WordPress theme is conducive and can retain clients’ attention for an extended duration, improving their chances of doing business with you! If you own a baby toys, store but are not sure about investing in designing a premium web store, then Baby Toys Store WordPress theme is the perfect solution for you. It neither require store owner to spend money nor have any coding skills to be able to maintain one’s own store. Baby Toys Store WordPress theme will give your store a catchy and complete presence that will create a great impression about your store to your visitor and offer all the important information that potential buyer generally seeks to make buying decision of to hold his/her interest. Things like product description, pricing, social media handles, baby toy stores’ contact details, buy button, and more!  
Version: 0.2.3
Tested up to: 5.8
Requires PHP: 5.6
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: baby-toys-store
Slug: ccc
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready, blog, grid-layout, portfolio, photography

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.
*/
.waves {
    position: absolute;
    width: 100%;
    height: 31vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
    bottom: 0;
}
.pl-0{padding-left:0;  }
.m-rl{margin-right: 0;margin-left: 0}
/******************************/
/*===== Banner Section =====*/
/****************************/

.banner-section{
    position: relative;
    overflow: hidden;
    box-shadow: inset 0px -5px 6px #00000029;
}
.banner-section .image{position: relative;width: 68%;    text-align: center;}
.banner-section .image img{width: auto;}
.banner-section .contentbx{
    padding: 0px 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    display: flex;
    opacity: 1;
    z-index: 1;
}
.banner-section .content{
    position: absolute;
    padding: 35px 40px;
    width: 34%;
    text-align: center;
    background: #28AAE0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-mask-image: url(assets/images/shape1.png);
    mask-image: url(assets/images/shape1.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    overflow: hidden;
}
.banner-section .heading {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: relative;
    right: 0;
    z-index: 22;
    width: 100%;
    top: 0;
    background: #FFED02;
    left: 0;
    max-width: 100%;
    clip-path: polygon(100% 0, 97% 53%, 100% 100%, 13% 100%, 0 65%, 5% 0);
    filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));
}
.banner-section .heading h2{
    word-break: break-word;
    font-size: 30px;
    font-weight: 900 !important;
    position: relative;
    z-index: 1;
    color: #000000;
    padding: 0.9em 1em 0.8em 1em;
    line-height: 45px;
}
.banner-section .fold-svg {
    position: absolute;
    left: -7px;
    bottom: -7px;
}
.banner-section .slide-shape{position: relative;filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));}
.slide-shape:after {
    content: "";
    -webkit-mask-image: url(assets/images/union2.png);
    mask-image: url(assets/images/union2.png);
    background-color: #F89692;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    left: auto;
    z-index: 25;
    width: 100%;
    top: auto;
    background: #F89692;
    margin: 0 auto;
    height: 75px;
    bottom: -10px;
    right: -20px;
    max-width: 65%;
}
.banner-section .slide-shape:before {
    content: "";
    -webkit-mask-image: url(assets/images/union3.png);
    mask-image: url(assets/images/union3.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    left: 0;
    z-index: 25;
    width: 136px;
    top: -20px;
    background: #ffffff;
    height: 45px;
}
.banner-section .heading:before {
    content: "";
    -webkit-mask-image: url(assets/images/Union1.png);
    mask-image: url(assets/images/Union1.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    left: 40px;
    z-index: 25;
    width: 100%;
    top: 1px;
    background: #ffffff;
    margin: 0 auto;
    height: 100px;
    max-width: 89%;
}
.banner-section .line1 {
    width: 20%;
    height: 4px;
    position: absolute;
    overflow: hidden;
    background-color: #FFED02;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 0;
    bottom: -26px;
    left: 70px;
    filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));
}
.banner-section .line2{
    width: 72%;
    height: 4px;
    position: absolute;
    overflow: hidden;
    background-color: #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 0;
    bottom: -14px;
    right: 0;
    filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));
}
.banner-section .discount{position: relative;}
.banner-section .top-shape3 {
    position: relative;
    text-align: left;
    top: 45px;
    left: -44px;
}
.banner-section .discount h4{
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
    color: #ffffff;
    padding-top: 0.8em;
    text-align: left;
    filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));
}
.banner-section h5 {
    font-size: 233px;
    font-weight: 900;
    color: #fff;
    text-align: left;
    position: relative;
    line-height: 0.8;
    padding-left: 17%;
}
.banner-section h5 i.fa.fa-percent {
    position: absolute;
    left: 0;
    right: -112px;
    margin: 0 auto;
    text-align: center;
    font-size: 100px;
    transform: rotate(-10deg);
    top: -74px;
    color: #FFED02;
    z-index: -1;
    filter: drop-shadow(-1px -1px 4px rgba(50, 50, 0, 0.18));
}
.banner-section h5:after {
    content: "";
    width: 16px;
    position: absolute;
    top: 30px;
    right: 21px;
    left: 0;
    margin: 0 auto;
    text-align: center;
    height: 175.46px;
    background: #FFED02;
    filter: drop-shadow(1px 1px 4px rgba(50, 50, 0, 0.15));
    transform: rotate(27deg);
    border-top-left-radius: 10px;
    border-top-right-radius: 105px;
}
.banner-section h5 span { font-size: 62px;}
.banner-section .top-shape-heart2 { position: relative;}
.banner-section .top-shape-heart2 svg {
    position: absolute;
    right: -24px;
    top: -54px;
    z-index: -1;
    width: 40px;
}
.banner-section .shape-telegram {
    position: relative;
    bottom: 70px;
    z-index: -1;
}
.banner-section .shape-telegram svg { width: 100%;}
.banner-section .banbtn{text-align: right;margin: 25px 0 0 0;}
.banner-section .banbtn a{
    position: relative;
    overflow: hidden;
    font-size: 22px;
    font-weight: 600;
    background-image: linear-gradient(0deg, #ffc7c5 50%, #fff 51%);
    color: #000;
    text-decoration: none !important;
    padding: 8px 30px;
    border-radius: 50px;
}
.banner-section .banbtn a:hover{color: #28AAE0;}
.banner-section .top-shape-heart2{position: relative;right: 0;}

/*******end********/
.blog-area .blog-img{
    -webkit-mask-image: url(assets/images/blog_m.png);
    mask-image: url(assets/images/blog_m.png);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 100%;
    height: 100%;
}
.recentcomments a {
    display: inline-block !important;
    padding-left: 18px !important;
    margin: 0 !important;
}
.footer-area {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 1;
    padding:4em 0 0em 0;
    overflow: hidden;
    background: #000;
}

/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
@media (max-width: 1600px) {
   .banner-section .heading h2 {font-size: 20px;}
   .banner-section .discount h4 {font-size: 18px;}
   .banner-section h5 {  padding-left: 29%;font-size: 90px;}
   .banner-section .banbtn a {font-size: 18px;}
}

@media (max-width: 991px){
    .slide-shape:after,
    .banner-section .fold-svg{display: none;}
    .banner-section .content {width: 46%;}
    .banner-section .heading:before{display: none;}
    .banner-section h5{padding: 0;font-size: 63px;}
    .banner-section .heading h2 {font-size: 18px; }
    .banner-section .discount h4 { padding-top: 1.8em;}
    .banner-section .image{text-align: left ;}
}
@media (max-width: 900px){
    .banner-section .heading h2 {
        font-size: 16px;
    }
}
@media (max-width: 800px){
    .banner-section h5 {font-size: 45px;}
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}

@media (max-width: 767px) {
    .banner-section .image,
    .banner-section .image img{  width: 100% ;}
    .banner-section .contentbx{position: relative;}
    .banner-section .content{position: relative;width: 100% !important;}
    .banner-section h5 span {font-size: 34px;}
}



