/*
  Theme Name: Tattoo Designer
  Theme URI: https://www.theclassictemplates.com/products/free-tattoo-wordpress-theme
  Author: classictemplate
  Author URI: https://www.theclassictemplates.com/
  Description: Tattoo Designer is a cool website design for tattoo artists, tattoo studios, tattoo shops and other related designing professionals. It is a modern wordpress theme with a clean and professional interface that is ideal for the body arts business or organisation. With each and every business growing digitally, your business should also grow by having your own professional tattoo designing website where you can showcase your tattoos, designs, arts, portfolios and other services in a most effective way to attract more visitors and customers. It is a fully optimized, responsive and lightweight website theme that provides a great user experience to the visitors. The theme is best for Tattoo Studio, Body Art, Ink Design, Tattoo Artist, Tattoo Parlor, Piercing Shop, Tattoo Removal, Tattoo Gallery, Custom Tattoos, Tattoo Convention, Tattoo Events, Tattoo Equipment, Tattoo Supplies, Tattoo Portfolio, Tattoo Aftercare. It is also made user friendly so that you can create your personalized tattoo designing website on your own. With the customization features available with this theme, you can modify your website and create a professional tattoo website exactly the way you want. This theme uses the Bootstrap Framework that makes it SEO friendly that helps you attract more visitors by showing your website in the top results of search engines. Also it makes it a cross browser compatible website so that your visitors can browse through your website seamlessly across different browsers and devices.
  Version: 0.9.4
  Tested up to: 6.8
  Requires PHP: 5.6
  Requires at least: 5.0
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: tattoo-designer
  Tags: blog, e-commerce, photography, one-column, two-columns, three-columns, four-columns, grid-layout, left-sidebar, right-sidebar, custom-logo, post-formats, featured-images, full-width-template, custom-colors, editor-style, wide-blocks, custom-header, translation-ready, custom-background, custom-menu, sticky-post, threaded-comments, theme-options, rtl-language-support

  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.

  Tattoo Designer WordPress Theme has been created by classictemplate (theclassictemplates.com), 2021.
  Tattoo Designer WordPress Theme is released under the terms of GNU GPL
  */

  *{
    margin:0;
    padding:0;
    outline:none;
  }
  :root {
    --first-theme-color: #ffcb00;
    --second-theme-color: #112b3c;
  }
  body{
    margin:0;
    padding:0;
    font-size:15px;
    color: #8c8c8c;
    font-family: 'Poppins', sans-serif;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: 100%;
    height: 100%;
  }
  img{
    border:none;
    margin:0;
    padding:0;
    height:auto;
    max-width:100%;
  }
  a{
    color: #262626;
    text-decoration:none;
    word-wrap: break-word;
  }
  a:hover{
    color:#333;
    text-decoration:none;
  }
  ol,ul{
    margin:0;
    padding:0;
  }
  .wp-caption,
  .wp-caption-text,
  .sticky,
  .gallery-caption,
  .aligncenter{
    margin:0;
    padding:0;
    max-width:100% !important;
  }
  .sticky{
    background: #ededed;
  }
  .entry-content ol li,
  .entry-content ul li{
    margin-left:15px;
  }
  ul li ul,
  ul li ul li ul,
  ol li ol, ol li ol li ol{
    margin-left:10px;
  }
  h1,h2,h3,h4,h5,h6{
    color:#1b1b1b;
    line-height:1.1;
    font-weight:bold;
    word-wrap: break-word;
  }
  h1{
    font-size:32px;
  }
  h2{
    font-size:30px;
  }
  h3{
    font-size:24px;
  }
  h4{
    font-size:20px;
  }
  h5{
    font-size:18px;
  }
  h6{
    font-size:14px;
  }
  .clear{
    clear:both;
  }
  .alignnone{
    width:100% !important;
  }
  img.alignleft, .alignleft{
    float:left;
    margin:0 15px 0 0;
    padding:5px;
    border:1px solid #cccccc;
  }
  img.alignright, .alignright{
    float:right;
    margin:0 0 0 15px;
    padding:5px;
    border:1px solid #cccccc;
  }
  .left{
    float:left;
  }
  .right{
    float:right;
  }
  #comment-nav-above .nav-previous,
  #comment-nav-below .nav-previous{
    float:none !important;
    margin:10px 0;
  }
  ol.comment-list li{
    list-style:none;
    margin-bottom:5px;
  }
  input:focus{
    border:2px solid #000;
  }
  .row>*{
    padding-right: 0px !important;
  }
  /* Text meant only for screen readers. */
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }
  .screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
  }
  a:focus,input[type='submit']:focus,input[type='search']:focus,textarea:focus,input[type='name']:focus,input[type='email']:focus,.toggle-nav button:focus,a.close-button:focus,#commentform input#email:focus, #commentform input#url:focus,#commentform input#author:focus, #commentform textarea:focus, #commentform input#eazycfc_captcha:focus,.main-nav a:focus,.main-nav ul ul a:focus{
  	outline: -webkit-focus-ring-color auto 1px;
  }
  .textwidget p a,.entry-content a,.entry-summary a,ol.comment-list p a {
    text-decoration: underline;
  }

  /* = wide block css
  -------------------------------------- */
  /*.alignwide {
    margin-left  : -80px;
    margin-right : -80px;
  }
  .alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
  }
  .alignfull img {
    width: 100vw;
  }*/
/*block css*/
.site-main .alignfull, .site-main .alignwide, .postsec-list .alignfull, .postsec-list .alignwide{
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px;
}
.site-main .alignfull img, .postsec-list .alignfull img{
  width: 100% !important
}
.site-main .alignnone, .site-main .aligncenter, .postsec-list .alignnone, .postsec-list .aligncenter{
  width: auto !important;
}
.site-main .alignleft, .postsec-list .alignleft{
  margin-right: 10px;
}
.site-main .wp-block-button a:hover, 
.site-main .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover,
.postsec-list .wp-block-button a:hover, 
.postsec-list .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover{
  background: #262626 !important;
  color: #fff !important;
}
.site-main .wp-block-button.is-style-squared a, .postsec-list .wp-block-button.is-style-squared a{
  border-radius: 0px !important;
}
.site-main .wp-block-button__link, .postsec-list .wp-block-button__link{
  background: var(--first-theme-color);
  color: #262626 !important;
  border-radius: 30px;
  margin-bottom: 10px;
  font-weight: 600;
}
.postsec-list .wp-block-button.is-style-outline a{
  background:none;
  color: #262626 !important;
}
.site-main .wp-block-button.is-style-outline a{
  background:  var(--first-theme-color);
  color: #000 !important;
  outline: none !important;
  border:none !important;
}
.site-main .wp-block-button__link{
  text-decoration: none;
}
.wc-block-cart__submit-button .wc-block-components-button__text{
  width: 100%;
}
.wc-block-cart__submit-container a{
  text-decoration: none;
}
.site-main img.alignleft, .site-main .alignleft, .site-main img.alignright, .site-main .alignright,
.postsec-list img.alignleft, .postsec-list .alignleft, .postsec-list img.alignright, .postsec-list .alignright{
  border:none;
}
div#sidebar .wp-block-search__label {
  width: 50%;
    padding: 8px 42px 8px 17px;
    font-size: 19px;
    border-radius: 44px;
    color: #000;
    background: var(--first-theme-color);
}
div#sidebar .wp-block-search__inside-wrapper {
    padding-top: 20px;
}
div#sidebar h2 {
    padding: 8px 42px 8px 17px;
    font-size: 19px;
    border-radius: 44px;
    color: #000;
    background: var(--first-theme-color);
}
div#sidebar h2:after {
    left: 17px;
    top: 35px;
    height: 3px;
    content: "";
    width: 40px;
    position: absolute;
}
  /* = pre loader css
  -------------------------------------- */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999;
  }
  #status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(images/status.gif);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
  }

/* = header css
-------------------------------------- */

.page-template-template-home-page .header.sticky-head,.sticky-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 2px 2px 10px 0px #2d2d2d;
  padding: 20px;
  background-color: #fff;
}
.admin-bar .sticky-head{
  top: 32px;
  background: #e0ae01;
}

  /* = top header css
  -------------------------------------- */
  h1.site-title{
    font-size: 35px;
    margin: 0;
    text-transform: uppercase;
  }
  h1.site-title a{
    color: #fff;
    font-weight: bold;
  }
  h1.site-title a:hover {
    text-decoration: unset;
  }
  span.site-description{
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }
  .listarticle h2 a:hover,#sidebar ul li a:hover{
    color: #262626;
  }
  .center-align{
    align-self: center;
  }
  .social-icons {
    text-align: right;
  }
  .social-icons i {
    color: #222;
    font-size: 20px;
  }
  .page-header {
    margin-bottom: 30px;
  }
  .page-header h1{
    color: #000;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: 'cinzel_decorativeblack';
    font-size: 40px;
  }
  .page-header span,.page-header span a {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  /* = header css
  -------------------------------------- */
  #header{
    position: static;
  }
  .page-template-template-home-page #header {
    background: transparent;
    position: absolute;
    width: 100%;
    z-index: 9999;
    padding: 0;
  }
  .woocommerce ul.products li.product .button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, #commentform input#submit, .woocommerce a.added_to_cart {
    background-color: var(--first-theme-color);
    color: #262626 !important;
    padding: 10px 25px;
    border-radius: 0;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
  }
  .woocommerce span.onsale{
     background-color: var(--first-theme-color);
  }
  .woocommerce ul.products li.product .button:hover,
  .woocommerce #respond input#submit.alt:hover,
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover,
  .woocommerce input.button.alt:hover,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  #commentform input#submit:hover,
  .woocommerce a.added_to_cart:hover {
    background: #262626 !important;
    color: #fff !important;
  }

  /* = menus css */
#mySidenav {
  display: inline;
}
.main-nav ul {
  margin: 0;
  padding: 0;
}
.main-nav li {
  display: inline-block;
  position: relative;
}
.main-nav a {
  color: #000;
  padding: 10px 18px;
  font-size: 15px;
  display: block;
  font-weight: 600;
  text-transform: capitalize;
  position: relative;
}
.main-nav .menu-item-has-children > a::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: auto;
  right: auto;
  margin-left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
}
.main-nav .menu-item-has-children.current-menu-parent > a::after,
.main-nav .menu-item-has-children.current-menu-ancestor > a::after,
.main-nav .menu-item-has-children.current_page_parent > a::after {
  transform: translateY(-50%) rotate(0deg);
}
.main-nav a:hover {
  color: var(--first-theme-color);
}
.main-nav ul ul {
  position: absolute;
  background: #fff;
  min-width: 250px;
  z-index: 9999;
  top: 98%;
  line-height: 30px;
  opacity: 0;
}
.main-nav ul ul ul {
  left: 100%;
  top: 0%;
}
.main-nav ul ul a {
  color: #000;
  border: none;
  padding: 10px;
  margin-top: 5px;
}
.main-nav ul ul li {
  float: none;
  display: block;
  text-align: left;
  border-left: none;
  border-right: none !important;
  padding: 0;
  border-bottom: solid 1px #f1f1f1;
}
.main-nav li ul {
  border-top: 3px solid var(--first-theme-color);
  border: 1px solid #EEE;
  box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4);
}
.main-nav .menu > ul > li.highlight {
  background-color: #006ccc;
}
.main-nav .menu > ul > li.highlight:hover {
  background: transparent;
}
.main-nav .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
.main-nav .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
.main-nav .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu,
.main-nav .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menum,
.main-nav .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
  opacity: 1;
}
.main-nav ul li:hover > ul {
  opacity: 1;
}
.main-nav li.menu-item-has-children:hover > ul,
.main-nav li.menu-item-has-children:focus > ul,
.main-nav li.menu-item-has-children.focus > ul {
  opacity: 1;
}
.main-nav .sub-menu {
  opacity: 0;
  left: -9999px;
  z-index: 99999;
  width: 200px !important;
}
ul.sub-menu ul.sub-menu {
  left: 200px !important;
}
.main-nav .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
.main-nav .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
.main-nav .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu,
.main-nav .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menum,
.main-nav .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
  display: block;
  left: 0;
  margin-top: 0;
  opacity: 1;
  width: auto;
  min-width: 100%;
}
ul.sub-menu ul.sub-menu {
  left: -9999px;
}
  .toggle-nav,
  a.close-button {
    display: none;
  }
  #header{
    z-index: 999;
    height: auto;
    margin-bottom: 30px;
  }
  #header .text-white h1 a,  #header .text-white p a {
    position: relative;
    color: #000 !important;
    top: 6%;
    font-size: 32px;
    font-weight: bold;
    padding-left: 1em;
  }
  #header p.text-white {
      position: relative;
      color: #000 !important;
      padding-left: 2em;
  }
  #header img.custom-logo {
      position: absolute;
      left: 19%;
      top: 4%;
      width: 80px !important;
      height: 80px !important;
  }
  p.logo-title, p.logo-desc, h1.logo-title{
    text-align: center;
  }
  #slider .button-slider {
    color: var(--second-theme-color);
    background-color: var(--first-theme-color);
  }

  header#header a.contactus:hover{
    color: #fff !important;
    background: #000 !important;
  }
  .header-btn{
    margin-right: 10px;
  }
  /* = slider section css
  -------------------------------------- */
.bg-opacity {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #000;
  top: 0;
  right: 0;
  opacity: 0.7;
  border-top-left-radius: 35%;
}
  #slider{
    z-index: 1;
  }
  #slider .content{
    width: 100%;
    height: 720px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #slider .title-slider a{
    font-family: "Poppins";
    font-size: 50px;
    font-weight: 600;
    color: #fff;
  }
  #slider .title-slider a:hover, #service .services-box h3 a:hover{
    color: var(--first-theme-color);
  }
  #slider .button-slider{
    border-radius: 25px;
        transition: 0.3s;
  }
  #slider a.button-slider.redmor.btn:hover{
     color: var(--second-theme-color);
     background: #fff !important;
     letter-spacing: 1px;
  }

  #slider .overlayer {
      height: 100%;
      background-color: #000;
      opacity: 0.8;
      position: absolute;
      top: 15%;
      right: 0;
      border-radius: 110px 0 0 0;
  }
  .slider-content {
      position: absolute;
      top: 6%;
      left: 70%;
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%, -50%);
      opacity: 1;
      z-index: 99;
  }
  #slider img.slider-image-s {
      width: 24%;
      top: 55%;
      height: 52%;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
          box-shadow: 5px 10px 40px 5px rgb(0 0 0 / 50%);
  }
  @keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    10%, 20% {
      -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }
  #slider .owl-nav {
      background: none;
      position: absolute;
      left: 45%;
      bottom: 4px;
          display: block;
  }
  #slider button.owl-prev {
      position: relative;
      font-size: 38px;
      width: 74px;
      color: #000;
      margin-right: 16px;
      background: #fff;
      border: none;
      border-radius: 18px 0 0 0;
  }
  #slider button.owl-prev:hover{
    border: 1px solid #000;
    background: var(--first-theme-color);
    color: #fc0707;
  }
  #slider button.owl-next {
      position: relative;
      font-size: 38px;
      width: 74px;
      color: #000;
      background: var(--first-theme-color);
      border: none;
      border-radius: 0px 18px 0 0;
  }
  #slider button.owl-next:hover{
    border: 1px solid #000;
    background: #fff;
    color: #fc0707;
  }
  /* = Services css
  -------------------------------------- */

  #service .section-title{
    font-family: "Poppins";
  }
  #service .services-box{
    height: 420px;
    width: 100%;
    background-image: url('/image/services.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: 0.7s;
    overflow: hidden;
    box-shadow: rgb(0 0 0 / 75%) 15px -98px 65px -30px inset;
    border-top-right-radius: 36%;
  }
  #service .services-box img {
      width: 100%;
  }
  #service .services-box:hover{
     opacity: 0.8;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      background: #000;
   }
  #service .colume-row{
    transition: 0.7s;
    padding: 0 3px;
    margin: 13px 0px;
  }
  #service .services-box h3 a{
    text-align: left;
    margin: 0;
    transition: 0.5s;
        bottom: 2%;
      position: absolute;
      transition: 0.7s;
      left: 18px;
      color: #fff;
      font-size: 20px;
  }
  #service .services-box:hover h4{
    bottom: 30%;
  }
  #service .services-box:hover i.fa.fa-angle-double-right{
    bottom: 33%;
    right: 20%;
  }

  #service .services-box p{
    color: transparent;
  }
  #service .services-box:hover p{
    color: #fff;
  }
  #service .services-box i.fa.fa-angle-double-right {
      bottom: 5%;
      position: absolute;
      right: 24px;
      color: #fff;
      font-size: 30px;
      transition: 0.7s;
  }
  #service .services-box .content{
      width: 100%;
      height: auto;
      position: relative;
  }

  /* blog */

  #blog .section-title{
    font-family: 'cinzel_decorativebold';
  }
  #blog .blog-image{
    width: 100%;
    height: 356px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #blog .blog-content{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding: 35px 18px;
        background: #f6f6f6 !important;
  }
  #blog .blog-title{
  font-size: 22px;
  color: var(--second-theme-color);
  font-weight: 500 !important;
  font-family: "Poppins";
  margin-bottom: 18px;
  line-height: normal;
  }
  #blog .blog-description{
    font-size: 18px;
  color: #767879;
  font-weight: 400;
  font-family: "Poppins";
  }
  #blog .colume-row {
    padding: 0 35px;
    margin: 35px 0;
  }
  #blog .comment{
      margin-right: 50px;
  }
  #blog .blog-content a {
      color: #000 !important;
      text-decoration: none;
      border-radius: 24px;
      background-color: var(--first-theme-color);
      padding: 9px 21px;
      font-size: 18px;
      line-height: 65px;
      color: var(--second-theme-color);
      font-weight: 500 !important;
      transition: 0.3s;
  }
  #blog .blog-content a:hover{
    letter-spacing: 1px;
  }
  /* Footer */
  #footer h2{
    color: #fff;
  }
  #footer ul li a{
    color: #fff;
  }
  #footer .widget{
    color: #fff;
    margin-bottom: 40px;
  }
  #footer .menu-item{
    margin: 10px 0;
  }
  #footer aside{
    padding: 20px;
  }
  /* = Page lay out css
  -------------------------------------- */
  .postsec-list input.search-field,
  .postsec-list input.search-submit {
    padding: 15px 10px;
  }
  .contentsecwrap{
    padding:25px 0;
    clear: both;
  }
  .contentsecwrap p{
    margin-bottom:20px;
  }
  .listarticle h2 a{
    color: #262626;
  }
  .single_title{
    margin-bottom: 15px;
    font-size: 20px;
  }
  .post-thumb{
    margin:0 0 15px 0;
  }
  .nav-links .page-numbers{
    padding:10px 15px;
    color:var(--second-theme-color);
    background-color: var(--first-theme-color);
  }
  .nav-links{
    margin: 20px 0;
  }
  span.page-numbers.current, .nav-links .page-numbers:hover{
    background-color: var(--second-theme-color);
    color:#fff !important;
  }
/*post formate*/
.format-gallery .wp-block-gallery, .format-video figure{
  margin-bottom: 15px;
}
  /* label css
---------------------------------------------- */
label{
  margin-bottom: 0;
}
#footer .search-form label, #sidebar .search-form label{
  width: 100%;
}
aside.widget ul, .entry-summary li{
  list-style:none;
}
.listarticle .alignfull, .listarticle .alignwide{
  margin-left: 0;
  margin-right: 0;
}
#recentcomments li{
  background-image:none !important;
}
#recentcomments li a{
  padding-left:0px !important;
}
.textwidget select,table{
  width:100%;
}
nav.navigation.pagination {
    margin: 30px auto;
}
/*--------------------------------------------------------------
## Sidebar Style 
--------------------------------------------------------------*/
#sidebar input[type="text"],
#sidebar input[type="search"],
#footer input[type="search"]{
  border: solid 2px var(--first-theme-color);
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
}
#sidebar input[type="search"]{
  margin-bottom: 0px;
}
#sidebar input.search-submit,
#footer input.search-submit,
form.woocommerce-product-search button {
  padding: 10px;
  width: 100%;
  border:none;
  background: var(--first-theme-color);
  font-size: 15px;
  text-transform: uppercase;
  color: #262626;
}
input.search-submit{
  background-color: var(--first-theme-color);
  color: #262626;
  border:none;
  padding: 16px 20px !important;
}
.widget-area .widget::after,
.widget-area .widget::before {
    clear: both;
    content: "";
    display: table;
}
 .entry-title h2:before{
 content: "\f185";
    display: inline-block;
    font-family: FontAwesome;
    margin-right: 5px;
}
#sidebar ul {
    list-style: outside none none;
    padding: 0;
    margin: 0;
}
#sidebar ul ul {
    border-bottom:none;
    padding-bottom: 0;
}
#sidebar ul li {
  padding: 5px;
  padding-left: 30px;
  padding-top: 5px;
  position: relative;
}
#sidebar ul li::before {
  color: var(--first-theme-color);
  content: "\f192";
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 7px;
  left: 0;
  position: absolute;
  top: 6px;
  margin-left: 2px;
}
#sidebar .widget a,
#sidebar .widget a:visited {
    color: #8c8c8c;
}
#sidebar .widget a:hover,
#sidebar .widget a:active {
   color: var(--first-theme-color);
}
#sidebar .widget {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 2px #cfcfcf;
    border-bottom: 3px solid var(--first-theme-color);
    margin-bottom: 30px;
}
#sidebar .widget:hover{
    box-shadow: 0 0 20px #cfcfcf;
}
#sidebar .widget_nav_menu ul li{
  padding: 3px 15px 5px 13px;
}
#sidebar .widget_nav_menu ul li a{ 
  line-height: 2.5;
}
#sidebar .wp-block-search__button{
  background-color: var(--first-theme-color);
}
#sidebar .widget-title{
  padding: 8px 42px 8px 17px;
  font-size: 19px;
  border-radius: 44px;
  color: #000;
  background: var(--first-theme-color);
}
/*calendar widget*/
.widget_calendar {
    text-align: center;
}
.widget_calendar  h3{
  text-align: left;
}
.widget_calendar caption {
    background: var(--first-theme-color) none repeat scroll 0 0;
    color: #262626;
    padding: 5px;
}
.widget_calendar .pad {
    background: #eeeeee none repeat scroll 0 0;
}
.widget_calendar #today {
    background: var(--first-theme-color) none repeat scroll 0 0;
    color: #262626;
}
.widget .tagcloud a {
    border: 1px solid #dddddd;
    color: #001837;
    display: inline-block;
    font-size: 16px !important;
    line-height: 1.5;
    margin-bottom: 5px;
    padding: 5px 15px;
}
.widget .tagcloud a:hover {
    border: 1px solid var(--first-theme-color);
    color: var(--first-theme-color);
}
.widget_categories li > a,
.widget_archive li > a {
    display: inline-block;
    min-width: 85%;
}
.search-form .search-submit:focus {
    box-shadow: inherit;
    outline: none;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 1.5em 1.5em;
}
img {
    height: auto;
    max-width: 100%;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 5px;
  color:#252525;
}
#footer td, #footer th{
  color: #fff;
}
select {
    width: 100%;
    padding: 5px;
}
#footer .tagcloud a {
  border: solid 1px #fff;
  font-size: 12px !important;
  margin: 2px 0;
  display: inline-block;
  color: #fff !important;
  padding: 5px;
}
.tagcloud a:hover{
  background-color: var(--first-theme-color);
  border-color: var(--first-theme-color) !important;
  color: #262626 !important;
}
/*footer*/
.footer-widget {
  background: var(--second-theme-color) none repeat scroll 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.75);
  padding: 20px 0;
}
#footer ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#footer ul li {
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 3px 15px 3px 13px;
  position: relative;
  color: #fff;
}
#footer ul li::before {
  color: #fff;
  content: "\f105";
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 14px;
  left: 0;
  position: absolute;
  top: 3px;
}
#footer a .footer-widget-area {
  float: left;
  padding: 0 25px;
  width: 25%;
}
#footer a,
#footer p {
  color:#fff;
}
#footer a:hover {
  color:var(--first-theme-color);
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.postsec-list article.hentry {
    background: #ffffff none repeat scroll 0 0;
    box-shadow: 0 0 2px #cfcfcf;
    padding: 35px;
    position: relative;
    border-radius: 12px;
    margin-bottom: 30px;
}
.postsec-list article.hentry:hover{
    box-shadow: 0 0 20px #cfcfcf;
}
/*scroll to top*/
#button{
  background: var(--first-theme-color);
  color: #262626;
  cursor: pointer;
  width: fit-content;
  padding: 5px;
  padding-top: 22px;
  height: 60px;
  aspect-ratio: 1;
  text-align: center;
  position: fixed;
  border-radius: 50%;
  bottom: 60px;
  right: 20px;
  z-index: 9999;
  -moz-border-radius: 0;
  font-size: 15px;
  display: none;
}
  /* = Footer css
  ------------------------------------------- */
  #footer input.search-submit {
    background: var(--first-theme-color);
    color: #262626;
    border: none;
    padding: 10px;
    width: 100%;
  }
  #footer h3.widget-title {
      font-size: 25px;
      line-height: 26px;
      color: #fefefe;
      font-weight: 500 !important;
  }
  aside#text-3 {
      margin-top: 2em;
  }
  .ftr-4-box h3,.ftr-4-box h2{
  	font-size:25px;
  	color:#fff;
  	margin-bottom:25px;
  	border-bottom:1px solid #303030;
  	padding: 15px 0;
  }
  .ftr-4-box ul{
  	margin:0;
  	padding:0;
  	list-style:inside disc;
  }
  .ftr-4-box ul li {
  	display:block;
  	padding:6px 0;
  }
  .ftr-4-box ul li a,.ftr-4-box a {
  	color:#ffffff;
  }
  .ftr-4-box a:hover{
    color: var(--first-theme-color);
  }
  .ftr-4-box p{
  	margin-bottom:15px;
  }
  #footer select{
    height: auto;
  }
  .copywrap {
   border-top: 1px solid #ffffff6b;
    color: #262626;
    font-size: 18px;
    padding: 20px 0;
    background-color: var(--first-theme-color);
  }
  .copywrap a, .copywrap p{
    color: #262626 !important;
    text-decoration: none;
    font-weight: 500;
  }
  .copywrap a:hover {
      color: #262626;
  }
  #sidebar .search-form label, #footer .search-form label{
    width: 100%;
  }
  input.search-submit{
    background-color: var(--first-theme-color);
    color: var(--second-theme-color);
    border:none;
    padding: 16px 20px !important;
  }
  /*Clearing floats css*/
  .page-links {
    float: unset !important;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin:20px auto;
  }
  .page-links a, .page-links span{
    padding: 10px 15px;
    color: var(--second-theme-color);
    border:1px solid var(--second-theme-color);
  }
  .page-links .post-page-numbers.current, .page-links a:hover{
    background-color: var(--first-theme-color) !important;
    border:1px solid var(--first-theme-color);
    color:var(--second-theme-color);
  }
/* Mobile Portrait View */
@media screen and (max-width: 600px) {
  .admin-bar .sticky-head{
    top: 0px
  }
}
  @media screen and (max-width: 767px) {
    .wpcf7 input[type="text"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea {
      width: 100%;
    }
    #slider .overlayer{
      border-radius: 0;
    }
    .page-header h1, header#header p{
      text-align: center;
    }
    header#header .lowerheader{
      text-align: center;
    } #header .header-logo {
      background: #fff;
    }
    #header {
      height: 100%;
    }
    .page-template-template-home-page .header{
      position: static !important;
      background: #262626 !important;
    }
    header#header i.fa.fa-envelope, header#header i.fa.fa-phone {
      font-size: 16px;
    }
    #header p.text-white {
        font-size: 12px !important;
        top: 0;
    }
    #header .text-white h1 a {
        top: 50%;
        font-size: 16px;
        padding-left: 107px;
    }
    header#header .social {
      padding-top: 8px;
      font-size: 16px;
      text-align: center;
      margin-bottom: 20px;
    }
    .social-icons, .header-logo .text-white{
      text-align: center;
    }
    .slider-box {
      right: 10%;
      left: 10%;
      text-align: center;
    }
    h1.site-title{
      font-size: 28px;
    }
    .header-svg1, .header-svg2, #slider img.slider-image-s{
      display: none;
    }
    .toggle-nav button{
      float: right;
      padding: 0 !important;
      margin-right: 19px;
    }
     #header img.custom-logo {
      left: 41%;
      top: 1%;
      width: 16%;
      animation: none;
    }
    #slider .owl-stage {
      height: 450px;
    }
    #slider .item {
      width: 100%;
      height: 530px;
    }
    #slider .content {
      height: 100%;
      }
    #slider .overlayer {
      width: 100%;
      opacity: 0.5;
      top: 0;
    }
    #slider .title-slider a{
      font-size: 25px;
      color: #fff;
    }
    #slider .slider-content {
      right: auto;
      left: 50%;
    }
    #slider .owl-carousel .owl-stage-outer {
      height: 534px;
    }
    #slider .owl-nav{
      left: 25%;
    }
    #slider button.owl-prev{
      font-size: 25px;
    }
    #slider button.owl-next{
      font-size: 25px;
    }
    #slider .redmor {
        font-size: 14px !important;
    }
    #footer{
      padding: 0;
    }
    #header img.custom-logo{
      position: static;
    }
    #header{
      position: static !important;
    }
    header#header p{
      font-size: 14px;
      padding-top: 5px;
    }
    #header p.text-white, #header .text-white h1 a, #header .text-white p a{
      padding-left: 0;
    }
    tr.wc-block-cart-items__row {
      gap: 0.4em;
    }
    td.wc-block-cart-item__total{
      padding-left: 0px !important;
    }
    li.wc-block-grid__product{
      max-width:100% !important;
      float:none;
    }
    #slider .title-slider a{
      font-size: 35px;
    }
    .bg-opacity{
      display: none;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px){
    #header .text-white h1 a {
      padding-left: 20px !important;
    }
    #header img.custom-logo {
      left: 22%;
    }
    header#header .header-btn,
    header#header .lowerheader{
      text-align: center;
    }
    .page-template-template-home-page .header.sticky-head,.admin-bar .header.sticky-head{
      top: 0 !important;
    }
    header#header p, header#header i.fa.fa-envelope, header#header i.fa.fa-phone{
      font-size: 12px;
    }
    header#header .social{
      padding-top: 0;
    }
    #header .text-white h1 a, #header .text-white p a{
      font-size: 20px;
      padding-left: 2em;
    }
    .header-svg1{
      left: -86px;
    }
    .header-svg2{
      left: -90px;
    }
    .slider-content{
      left: 65%;
    }
    #slider .title-slider{
      font-size: 34px;
    }
    #slider img.slider-image-s{
      height: 30%;
    }

  }
  @media screen and (min-width: 1000px) and (max-width: 1024px) {
    #header p.text-white{
      padding-left: 2em;
    }
    tr.wc-block-cart-items__row {
      gap: 1em;
    }
  }
  @media screen and (min-width: 920px) and (max-width: 1023px) {
    .phoneno{
      padding-left: 60px;
    }
  }  
  @media screen and (min-width: 768px) and (max-width: 1023px) {

    header#header .upperheader {
      padding: 0px !important;
    }
    .slider-box h3 {
      font-size: 25px;
    }
    .page-template-template-home-page .header{
      position: static !important;
      background: linear-gradient(0deg,#086ad9,#00bcd4 80%) no-repeat;
    }
    .slider-box {
      left: 10%;
      right: 35%;
    }
    .header-svg1{
    left: -269px;
    }
    .header-svg2{
    left: -269px;
    }
    #header img.custom-logo {
    left: 11%;
    }
    #header p.text-white{
      padding-left: 2em;
    }
    #header .text-white h1 a {
        font-size: 21px;
    }
    header#header i.fab {
        font-size: 15px;
        margin: 0;
    }
    tr.wc-block-cart-items__row {
      gap: 1em;
    }
    li.wc-block-grid__product{
      max-width: 48% !important;
      float: left;
      clear: both;
      margin: 0 1% 2.992em;
      flex: 1 0 48% !important;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 900px) {
    header#header .top-header .phoneno{
      position: relative;
      right: -79px;
    } 
  } 
  @media screen and (max-width: 1000px) {
    .main-nav ul ul, .main-nav .sub-menu{
      opacity: 1;
    }
    .main-nav .sub-menu{
        margin-left: 25px;
    }
    .main-nav li ul{
      border:none;
      box-shadow: none;
      border-top: none !important;
    }
    .main-nav .sub-menu li{
      border-bottom: none;
    }
    #mySidenav nav#site-navigation {
      background: transparent;
      text-align: left;
    }
    .toggle-nav button {
      font-weight: bold;
      background: #fff;
      border: none;
      color: #262626;
      border: 1px solid #000;
      font-size: 15px;
      padding: 16px !important;
      line-height: 1;
    }
    .main-nav a:hover{
      color: #fff !important;
    }
    .sidenav {
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 99999;
      left: 0;
      top: -110%;
      overflow-x: hidden;
      transition: 0.5s top ease-in-out;
      overflow-y: scroll;
      background: var(--first-theme-color);
      opacity: 0.9;
      visibility: hidden;
    }
    body.show-main-menu .sidenav {
      visibility: visible;
      top: 0;
      transition: 0.5s top ease-in-out;
    }
    .sidenav .close-button {
      font-size: 36px;
      display: block !important;
      color: var(--second-theme-color);
    }
    .sidenav #site-navigation {
      width: 100%;
    }
    .toggle-nav span {
      font-size: 30px;
      cursor: pointer;
      text-align: right;
    }
    .main-nav ul ul li,
    .menubar .nav ul li,
    .toggle-nav {
      display: block;
    }
    .toggle-nav{
      position: relative;
      display: inline-block;
    }
    .main-nav ul li a {
      padding: 8px;
      text-decoration: none;
      font-size: 15px;
      color: var(--second-theme-color) !important;
      display: block;
      float: none;
      margin: 5px 0;
      border-right: none;
    }
    .main-nav ul li ul li a:before {
      content: "\00BB \00a0";
    }
    .main-nav ul.sub-menu a:hover {
      padding-left: 20px !important;
    }
    .main-nav ul ul {
      position: static;
      width: 100%;
      background: transparent;
      border-top-width: 0px;
      border-bottom-width: 0px;
      box-shadow: none;
    }
    .main-nav ul ul a {
      border-bottom: none;
      padding-left: 40px;
    }
    .main-nav ul ul ul.sub-menu a {
      padding-left: 40px;
    }
    .main-nav li {
      padding: 0 15px;
      display: block;
      border-bottom: solid 1px #565656;
    }
    .main-header-box {
      padding-bottom: 15px;
    }
    .main-menu {
      padding: 0em;
      background: transparent;
    }
    .main-nav ul.sub-menu > li > a:before {
      content: unset;
    }
    .main-nav ul.sub-menu > li > a:hover:before {
      opacity: 0;
      left: 0px;
      width: 0px;
    }
    .main-nav li{
      margin-left: 0;
    }
    .breadcrumb a{
      margin-bottom: 10px;
    }
  }
@media screen and (max-width: 320px){
  .woocommerce ul.products li{
    width: 100% !important;
  }
}
@media screen and (min-width:1700px) and (max-width:1900px){
  .container{
    max-width: 1520px;
  }
}
@media screen and (min-width:1476px) and (max-width:1700px){
  #header img.custom-logo {
    left: 22%;
    top: 4%;
  }  
}
@media screen and (min-width:1300px) and (max-width:1475px){
  #header img.custom-logo {
   left: 26%;
  }  
}
@media screen and (min-width: 1024px) and (max-width: 1300px){
  header#header .row .header-logo {
    position: relative;
    left: -150px;
    img{
        left: 77%;
      }
    }
  }  
  @media screen and (min-width: 1208px) and (max-width: 1500px){
    header#header .row .header-logo {
      position: relative;
      left: -150px;
      img{
        left: 80%;
      }
    }  
  } 
@media screen and (min-width:1920px) {
  .container{
    max-width: 1620px;
  }
}
@media screen and (max-width:1023px) {
  header#header .row .header-logo img{
    left: unset;
  }
}