/*!
Theme Name: Raspberry Pi BD
Theme URI: http://raspberrypibd.com
Author: Raspberry Pi BD
Author URI: https://raspberrypibd.com
Description: Store WordPress Theme
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: raspberrypibd
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.

raspberrypibd 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/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries
--------------------------------------------------------------*/
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

body {
    font-family: Rubik;
    margin: 0;
    color: #808080;
    line-height: 26px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    color: #333;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}


pre {
    background: #fafafa;
    padding: 20px
}

.input-text,
input[type=email],
input[type=password],
input[type=search],
input[type=text],
input[type=url],
textarea {
    width: 100%;
    border: 1px solid #dfdfdf;
    height: 50px;
    padding: 0 15px;
    border-radius: 10px;
    -webkit-transition: .3s linear;
    -o-transition: .3s linear;
    transition: .3s linear;
}

textarea {
    padding: 20px;
    height: 160px;
    border-radius: 10px
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    border-radius: 10px;
    height: 50px;
    padding: 0 50px;
    border: none;
}

label.inline,
input[type="checkbox"]+label {
    display: inline;
    font-weight: 400;
    margin-left: 0.5rem;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    top: 2px;
    display: inline-block;
    margin: 0;
    width: 19px;
    min-width: 19px;
    height: 19px;
    background: #fff;
    border-radius: 0;
    border-style: solid;
    border-width: 0.1rem;
    border-color: #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    content: '✔';
    position: absolute;
    display: inline-block;
    margin: -5px 0 0 2px;
    height: 1.75rem;
    width: 1.75rem;
}

select {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: none;
    background: #fafafa;
    /* remove the original arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    /* no standardized syntax available, no ie-friendly solution available */
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}

/*For IE*/
select::-ms-expand {
    display: none;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

table th {
    font-weight: 500;
}

th,
td {
    border: 0.1rem solid #ddd;
    line-height: 26px;
    margin: 0;
    overflow: visible;
    padding: 0.5em;
}

label {
    display: inline-block;
    margin-bottom: 10px;
}

a {
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

button:focus,
a:focus {
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
}

dl,
ol,
ul {
    padding-left: 18px;
}

dd {
    margin: 0 1rem 1rem;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

b,
strong {
    color: #333;
}

blockquote:not(:last-child) {
    margin-bottom: 20px;
}

blockquote {
    padding-left: 60px;
    position: relative;
}

blockquote:before {
    position: absolute;
    content: "\f10e";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 35px;
    top: 7px;
    left: 0;
}

blockquote>* {
    z-index: 1;
    position: relative;
    margin-bottom: 0;
}

blockquote p {
    font-size: 24px;
    color: #333;
    font-weight: 500;
    line-height: 35px;
}

blockquote cite {
    position: relative;
    display: inline-block;
    font-style: inherit;
    padding-top: 10px;
    margin-left: 15px;
}

blockquote cite:before {
    position: absolute;
    content: "/";
    bottom: 0;
    left: -15px;
}

*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.slick-slide {
    outline: none
}

button.mfp-arrow,
button.mfp-close {
    background: transparent !important;
}

:focus {
    outline: none;
}

.bg-gray {
    background: #fafafa;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/

.comment-navigation .nav-links {
    overflow: hidden;
    margin: 50px 0;
}

.comment-navigation .nav-links a,
.btn {
    padding: 10px 50px;
    border-radius: 2.5px;
    color: #fff;
    display: inline-block;
}

.btn:active,
.btn:hover {
    color: #fff;
}

.comment-navigation .nav-links .nav-previous {
    float: left;
}

.comment-navigation .nav-links .nav-next {
    float: right;
}

.post-navigation {
    padding: 30px;
    background: #fff;
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
}

.post-navigation .nav-previous {
    float: left;
}

.post-navigation .nav-next {
    float: right;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a,
.checkout-button,
.widget-woocommerce .single_add_to_cart_button {
    display: inline-block;
    padding: 10px 50px;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
}

/*--------------------------------------------------------------
## Button
--------------------------------------------------------------*/
.raspberrypibd-btn {
    display: inline-block;
    padding: 12px 50px;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
}

.raspberrypibd-btn:hover {
    color: #fff;
}

.raspberrypibd-btn i {
    margin-right: 20px;
}

.raspberrypibd-btn.shadow {
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 7px 10px 6px rgba(0, 0, 0, 0.08);
    box-shadow: 0 7px 10px 6px rgba(0, 0, 0, 0.08);
}

.raspberrypibd-play-btn>span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    border-radius: inherit;
    border-color: inherit;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.raspberrypibd-play-btn-txt {
    font-weight: 700;
    color: #000;
}

.raspberrypibd-play-btn-icon {
    border-radius: 50%;
    margin-top: -5%;
    margin-bottom: -5%;
    letter-spacing: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    width: 3.5em;
    height: 3.5em;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    margin-left: 0;
    margin-right: 20px;
    border: none;
    color: #fff;
}

.raspberrypibd-btn.bordered {
    background: #fff;
    border: 2px solid;
}

.raspberrypibd-btn.bordered:hover {
    color: #fff;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.top-header {
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
}

.top-header .ajax-search-form button {
    padding: 7px 40px;
    height: 45px;
    border-radius: 10px;
}

.site-header {
    padding: 15px 0;
}

/*Mega Menu*/
.departments-menu {
    position: absolute;
}

.departments-menu>ul {
    list-style: none;
}

.departments-menu ul a {
    display: block;
    color: #333;
    font-weight: 500;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.departments-menu>ul>li>a {
    padding: 10px 30px;
}

.departments-menu>ul>li>a:hover {
    background: #f3f3f3;
}

.departments-menu>ul {
    position: relative;
    top: 16px;
    padding: 15px 0;
    padding-left: 0;
    width: 270px;
    z-index: 2;
    margin-bottom: 0;
    visibility: hidden;
    display: none;
    opacity: 0;
    top: 100%;
    -webkit-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
    -webkit-transition: opacity .2s, visibility 0s .2s, -webkit-transform .2s;
    transition: opacity .2s, visibility 0s .2s, -webkit-transform .2s;
    -o-transition: opacity .2s, transform .2s, visibility 0s .2s;
    transition: opacity .2s, transform .2s, visibility 0s .2s;
    transition: opacity .2s, transform .2s, visibility 0s .2s, -webkit-transform .2s;
}

.departments-container.open .departments-menu>ul {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    visibility: visible;
    opacity: 1;
    display: block;
    -webkit-transform: translateY(16px);
    -ms-transform: translateY(16px);
    transform: translateY(16px);
}

.departments-menu-button {
    width: 270px;
}

.departments-menu-button i {
    margin-right: 15px;
}

.raspberrypibd-departments-mega-menu {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}

.departments-menu .raspberrypibd-mega-menu>a {
    position: relative;
}

.departments-menu .raspberrypibd-mega-menu>a:after {
    position: absolute;
    content: '>';
    right: 30px;
}

.departments-menu .raspberrypibd-mega-menu>ul {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 0;
    padding-left: 0;
    padding: 30px;
    padding-bottom: 0;
    width: 1030px;
    min-height: 360px;
    background: #fff;
    -webkit-box-shadow: 5px 1px 12px 0px rgba(0, 0, 0, .2);
    box-shadow: 5px 1px 12px 0px rgba(0, 0, 0, .2);
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    display: none;
}

li.raspberrypibd-mega-menu:hover ul {
    display: table-caption;
}

.departments-menu .raspberrypibd-mega-menu>ul>li {
    float: left;
    width: calc(100% / 4);
    padding: 0 15px;
    z-index: 1;
    margin-bottom: 30px;
}

.departments-menu .raspberrypibd-mega-menu>ul>li>a {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.departments-menu .raspberrypibd-mega-menu>ul>li>ul {
    padding-left: 0;
    margin-left: 0;
}

.departments-menu .raspberrypibd-mega-menu>ul>li>ul li a {
    font-weight: 400;
}

.departments-menu .raspberrypibd-mega-menu>ul>li>ul li ul {
    margin-left: 0;
}

/*Header to right side button account and cart */
.my-account-widget,
.shopping-cart-widget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    position: relative;
}

.my-account-widget i,
.shopping-cart-widget i {
    float: left;
    font-size: 36px;
    margin-top: 10px;
    margin-right: 10px;
}

.my-account-widget .my-account-button,
.shopping-cart-widget .shopping-cart-button {
    display: inline-block;
    cursor: pointer;
}

.my-account-widget .my-account-button h5,
.shopping-cart-widget .shopping-cart-button h5 {
    font-weight: 500;
    margin-bottom: 0;
    font-size: 18px;
}

.my-account-content {
    position: absolute;
    width: 280px;
    top: 57px;
    left: 0;
    background: #fff;
    -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
    -webkit-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    transform: translateY(-16px);
    -webkit-transition: opacity .2s, visibility 0s .2s, -webkit-transform .2s;
    transition: opacity .2s, visibility 0s .2s, -webkit-transform .2s;
    -o-transition: opacity .2s, transform .2s, visibility 0s .2s;
    transition: opacity .2s, transform .2s, visibility 0s .2s;
    transition: opacity .2s, transform .2s, visibility 0s .2s, -webkit-transform .2s;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
}

.my-account-widget.open .my-account-content {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(16px);
    -ms-transform: translateY(16px);
    transform: translateY(16px);
}

.my-account-content {
    padding: 20px 0;
}

.my-account-content img {
    border-radius: 6px;
}

.my-account-content .header-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 0 15px;
    padding-bottom: 15px;
}

.my-account-content .header-profile img {
    margin-right: 15px;
}

.my-account-content .header-profile-content {
    margin-top: auto;
}

.my-account-content .header-profile-content p {
    margin-bottom: 0;
    font-size: 14px;
}

.my-account-content ul {
    margin-top: 10px;
    margin-bottom: 0;
}

.my-account-content ul li a {
    font-size: 15px;
    padding: 5px 15px;
    display: block;
    font-weight: 500;
    color: #333;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.my-account-content ul li a:hover {
    background: #f3f3f3;
}

.my-account-content .header-profile-login {
    padding: 0 20px;
}

.my-account-content .header-profile-login h6 {
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.my-account-content .header-profile-login .login-remember {
    margin-bottom: 0;
}

.my-account-content .header-profile-login label {
    font-size: 14px;
}

/*Mega Mneu End*/
.off-canvas-menu-bar.fixed-top,
.site-header.fixed-top {
    background: #fff;
    -webkit-box-shadow: 0px 18px 40px -30px rgba(35, 38, 58, 0.21);
    box-shadow: 0px 18px 40px -30px rgba(35, 38, 58, 0.21);
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
}

body.admin-bar .fixed-top {
    top: 30px;
}

.custom-logo-link {
    display: inline-block;
}

.custom-logo-link img {
    width: 270px;
}

.navbar-logo-text {
    font-size: 22px;
    font-weight: bolder;
}

.primary-menu ul {
    padding-left: 0;
    margin-bottom: 0 !important;
}


.primary-menu ul li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

.primary-menu ul li:last-child {
    margin-right: 0px;
}

.primary-menu ul li a {
    font-size: 17px;
    color: #333;
    font-weight: 500;
}

.primary-menu ul li .children,
.primary-menu ul li .sub-menu {
    position: absolute;
    z-index: 9;
    border-radius: 0;
    border: none;
    background: #fff;
    -webkit-box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
    display: block;
    left: 0;
    opacity: 0;
    right: 0;
    top: 52px;
    padding-left: 0;
    visibility: hidden;
    min-width: 230px;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
    box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
    margin: 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.primary-menu ul li .children li .children,
.primary-menu ul li .sub-menu li .sub-menu {
    top: 0;
    left: 230px;
}

.primary-menu ul li .children:after,
.primary-menu ul li .sub-menu:after {
    position: absolute;
    content: '';
    left: 0;
    top: -41px;
    height: 40px;
    min-width: 230px;
}

.primary-menu ul li:hover>.children,
.primary-menu ul li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.primary-menu ul li .children li,
.primary-menu ul li .sub-menu li {
    margin-right: 0;
    text-align: left;
    display: block;
}

.primary-menu ul li .children li.current-menu-item>a,
.primary-menu ul li .sub-menu li.current-menu-item>a,
.primary-menu ul li.current-menu-item>a {
    color: #fff;
}

.primary-menu .menu-item-has-children {
    position: relative;
    margin-right: 30px;
}

.primary-menu ul li.menu-item-has-children:after {
    position: absolute;
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 15px;
    right: -17px;
    top: 1px;
}

.sub-menu .menu-item-has-children:after {
    display: none;
}

.primary-menu ul li .children li a,
.primary-menu ul li .sub-menu li a {
    padding: 15px 20px;
    display: block;
    font-size: 16px;
    font-weight: 400;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.primary-menu ul li .children li a:hover,
.primary-menu ul li .sub-menu li a:hover {
    color: #fff;
}

.header-btn a {
    padding: 10px 30px;
    display: inline-block;
    font-weight: 500;
    color: #333;
    border: 2px solid;
    border-radius: 10px;
}

.header-btn a:hover {
    color: #fff;
}

/*--------------------------------------------------------------
## Ajax Search
--------------------------------------------------------------*/

/* Fullscreen Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Dark overlay */
    display: none;
    z-index: 9999;
}

/* Search Box */
.search-box {
    margin-top: 20px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    position: relative;
}

/* Input Field */
.search-box input {
    width: 80%;
    padding: 10px;
    font-size: 16px;
}

.ajax-search-form {
    position: relative;
}

.ajax-search-form input[type="text"] {
    line-height: 20px;
    padding: 12px 30px;
    width: 100%;

}

.ajax-search-form button {
    position: absolute;
    right: 3px;
    top: 2.5px;
}


.modal-content .ajax-search-form button {
    padding: 3px 18px;
    right: 1px;
    top: 1px;
}

.ajax-search-results {
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0 4px 6px 0 rgba(32, 33, 36, 0.10);
    box-shadow: 0 4px 6px 0 rgba(32, 33, 36, 0.10);
    padding-bottom: 4px;
    position: absolute;
    background: #fff;
    z-index: 2;
}

.ajax-search-results li {
    line-height: 50px;
}

.ajax-search-results li img {
    width: 32px;
    margin-right: 15px;
    border-radius: 5px;
}

.ajax-search-results li a {
    color: #333;
    display: block;
    padding: 0 15px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.ajax-search-results li a:hover {
    background: #f1f1f1;
    padding: 0 20px;
}

/*--------------------------------------------------------------
# Off canvas menu mobile menu
--------------------------------------------------------------*/
.off-canvas-menu-bar {
    -webkit-box-shadow: 0px 18px 40px -30px rgba(35, 38, 58, 0.21);
    box-shadow: 0px 18px 40px -30px rgba(35, 38, 58, 0.21);
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
    padding: 10px 0;
    display: none;
    width: 100%;
}

.off-canvas-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    max-width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 999999;
}

.off-canvas-menu .navbar-logo {
    display: block;
    padding: 20px 20px;
    text-align: center;
}

.off-canvas-menu .navbar-logo img {
    max-width: 200px;
}

.off-canvas-menu-visible .off-canvas-menu {
    opacity: 1;
    visibility: visible;
}

.off-canvas-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.90);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}

.off-canvas-menu-visible .off-canvas-menu .menu-backdrop {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.off-canvas-menu .mobile-nav {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #ffffff;
    padding: 0px 0px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    border-radius: 0px;
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}

.off-canvas-menu-visible .off-canvas-menu .mobile-nav {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.7s ease 500ms;
    -o-transition: all 0.7s ease 500ms;
    transition: all 0.7s ease 500ms;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.off-canvas-menu .close-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    color: #202020;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.off-canvas-menu-visible .off-canvas-menu .close-btn {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.off-canvas-menu .close-btn:hover {
    opacity: 0.50;
}

.off-canvas-menu .navigation {
    position: relative;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-left: 0;
}

.off-canvas-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.off-canvas-menu .navigation li>ul>li:last-child {
    border-bottom: none;
}

.off-canvas-menu .navigation li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.off-canvas-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    text-transform: capitalize;
    color: #333;
}

.off-canvas-menu .navigation .dropdown-btn:hover span,
.off-canvas-menu .navigation li>a:hover {
    color: #fff;
}

.off-canvas-menu .navigation li.menu-item-has-children .dropdown-btn,
.off-canvas-menu .navigation li.page_item_has_children .dropdown-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #404040;
    cursor: pointer;
    z-index: 5;
}

.off-canvas-menu .navigation li.menu-item-has-children .dropdown-btn:after,
.off-canvas-menu .navigation li.page_item_has_children .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}

.off-canvas-menu .navigation li>ul,
.off-canvas-menu .navigation li>ul>li>ul {
    display: none;
}

.search-toggler,
.mobile-nav-toggler {
    position: relative;
    float: right;
    font-size: 40px;
    line-height: 50px;
    cursor: pointer;
}

.search-toggler {
    margin-right: 30px;
    font-size: 30px;
}

.mobile-nav .menu-cart {
    position: relative;
}

.mobile-nav .menu-cart>a {
    text-align: center;
    display: block;
    padding: 8px 0;
}

.mobile-nav .menu-cart-widget {
    top: 65px;
    width: 100%;
}

/*--------------------------------------------------------------
# breadcrumb
--------------------------------------------------------------*/

.breadcrumbs {
    text-align: center;
    background: #000;
    overflow: hidden;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.breadcrumbs h1 {
    font-size: 52px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #fff;
}


.product-breadcrumb ul,
.breadcrumbs ul {
    list-style: none;
    padding-left: 0;
    display: inline-block;
    margin: 0;
}

.product-breadcrumb ul li,
.breadcrumbs ul li {
    position: relative;
    float: left;
    margin-right: 25px;
    color: #ddd;
}

.product-breadcrumb ul li {
    color: #333;
}

.product-breadcrumb ul li:before,
.breadcrumbs ul li:before {
    position: absolute;
    content: '»';
    right: -17px;
    font-size: 18px;
}

.product-breadcrumb ul li:last-child,
.breadcrumbs ul li:last-child {
    margin-right: 0;
}

.product-breadcrumb ul li:last-child::before,
.breadcrumbs ul li:last-child::before {
    display: none;
}


.breadcrumb-content {
    background: #f5f5f5;
    text-align: center;
    padding: 80px 0;
}

.breadcrumb-content h1 {
    font-weight: 600;
    margin-bottom: 30px;
}

.breadcrumb-content .sub-heading {
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 30px;
}


.breadcrumb-content a {
    margin: 0 5px;
}

.breadcrumb-content ul {
    list-style: none;
    margin: 0 auto;
    display: inline-block;
    padding-left: 0;
}

.breadcrumb-content ul li {
    position: relative;
    float: left;
    margin-right: 25px;
}

.breadcrumb-content ul li:last-child {
    margin-right: 0;
}

.breadcrumb-content ul li:before {
    position: absolute;
    content: '»';
    top: -2px;
    right: -15px;
    font-size: 18px;
    font-style: italic;
}

.breadcrumb-content ul li:last-child::before {
    display: none;
}

.breadcrumb-content .raspberrypibd-product-search-form {
    border: 1px solid;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    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. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure.wp-block-gallery.alignfull {
    margin-bottom: 50px;
    margin-top: 50px;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    background: #fff;
    margin: 0 0 1.5em;
    padding: 30px 20px;
    margin-bottom: 50px;
    border-radius: 6px;
    overflow: hidden;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-weight: 500;
    position: relative;
    border-bottom: 2px solid #efefef;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.widget-area .widget-title:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 8px;
    height: 2px;
    width: 20%;
}

.widget-area .widget-title:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 3px;
    height: 2px;
    width: 30%;
}

.widget select {
    width: 100%;
}

.widget .nice-select.open {
    width: 100%;
}

.widget .nice-select.open .list {
    position: relative;
}

.widget ul,
.widget ol {
    list-style: none;
    padding-left: 0;
}

.search-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.search-form label {
    width: 70%;
    margin-bottom: 0;
    margin-right: 20px;
}

.search-form input {
    height: 48px;
}

.search-form input[type=submit] {
    width: 30%;
    padding: 0 15px;
}

.tagcloud a {
    color: #808080;
    border: 1px solid #efefef;
    font-size: 15px !important;
    padding: 5px 12px;
    border-radius: 3px;
    display: inline-block;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    margin-top: 6px;
    background: #efefef;
}

.tagcloud a:hover {
    color: #fff;
}

.widget>ul,
.widget>ol {
    margin: 0;
    padding: 0;
}

.widget ul li {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 17px;
}

.widget li:before {
    content: "\f111";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    top: 0;
    left: -17px;
    font-size: 7px;
    position: absolute;
    color: #ccc;
}

.widget li a {
    color: #808080;
}

.widget ul li .sub-menu {
    margin-left: 0;
}

.recent-themes-widget .recent-theme-item {
    padding: 15px;
    margin: 0 auto;
    background: #f1f1f187;
}

.recent-themes-widget .recent-theme-item img {
    margin-bottom: 20px;
}

.recent-themes-widget .recent-theme-item h6 {
    font-size: 14px;
    font-weight: 600;
}

.recent-themes-widget .recent-theme-item .permalink {
    color: #fff;
    font-size: 14px;
    padding: 5px 20px;
    display: inline-block;
    margin-top: 5px;
}

.widget-woocommerce {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 30px;
    padding: 30px;
}

.widget-woocommerce:last-child {
    margin-bottom: 0;
}

.widget-woocommerce-title {
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 25px;
    padding-bottom: 30px;
}

.sidebar-recent-post li {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    border-bottom: none !important;
    padding: 15px 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.sidebar-recent-post li:before {
    display: none;
}

.recent-post-thumb {
    width: 30%;
}


.recent-post-content {
    position: relative;
    width: 70%;
    margin-left: 15px;
}

.recent-post-content p a {
    color: #333;
}

.recent-post-content span {
    position: absolute;
    left: 0;
    font-size: 13px;
    line-height: 0;
}

.widget_recent_comments ul li:not(:last-child) {
    line-height: 26px;
    padding-bottom: 7px;
    margin-bottom: 7px;
}


.widget_rss ul li:not(:last-child) {
    line-height: 26px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.widget_rss ul li .rss-date {
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.section-padding {
    padding: 100px 0;
}

.wp-block-cover-text strong,
.wp-block-cover-image-text,
.wp-block-cover-text,
section.wp-block-cover-image h2 {
    color: #fff !important
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

.sticky .the_excerpt_content {
    border: 2px solid;
}

.hentry {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.updated:not(.published) {
    display: none;
}

.entry-content {
    padding: 30px;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.single-post .entry-meta {
    margin-bottom: 20px;
}

.single-post .entry-meta ul {
    margin-bottom: 0;
}

.entry-content p:last-child {
    margin-bottom: 0;
}

.single-post .post-share ul li a {
    background: #efefef;
    color: #333
}

.single-post .post-share ul li a:hover {
    color: #fff;
}

.wp-block-search {
    margin-bottom: 20px;
}

.wp-block-search .wp-block-search__input {
    width: auto;
}

.comment h1,
.comment h2,
.comment h3,
.comment h4,
.comment h5,
.comment h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin: 30px auto 30px;
}

.comment dl,
.entry-content dl {
    padding-left: 0;
}

.page-links {
    clear: both;
    padding-top: 20px;
}

.the_excerpt {
    background: #fff;
    margin-bottom: 50px;
}

.the_excerpt .post_thumbnail {
    position: relative;
}

.the_excerpt .excerpt-date {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 14px;
    border-radius: 30px;
    padding: 10px 30px;
}

.excerpt-readmore a {
    border-radius: 30px;
}

.entry-meta {
    font-size: 14px;
}

.entry-meta ul .list-inline-item:not(:last-child) {
    margin-right: 15px;
}

.entry-meta ul i {
    color: #ddd;
    margin-right: 5px;
}

.entry-meta ul li a {
    color: #333;
}

.the_excerpt .entry-meta p {
    margin-bottom: 0;
}

.post .entry-title {
    font-weight: 500;
    margin-bottom: 20px;
}

.post .entry-title a {
    color: #333;
}

.the_excerpt_content {
    padding: 40px;
}

.the_excerpt_content>p {
    margin-bottom: 20px;
}

.post .post_thumbnail,
.page .post_thumbnail {
    background: #fff;
    border-top-right-radius: 6px;
}

.wp-block-button__link {
    margin: 20px 0;
}

.wp-block-button.alignleft {
    margin-right: 20px;
    margin-bottom: 20px;
}

.wp-block-button.alignright {
    margin-left: 20px;
    margin-bottom: 20px;
}

.has-background-dim {
    margin-bottom: 20px;
}

.wp-block-button.alignleft .wp-block-button__link {
    margin: 0;
}

.wp-block-button.alignright .wp-block-button__link {
    margin: 0;
}

.pagination .nav-links {
    margin: 0 auto;
}

.pagination .nav-links .page-numbers {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 3px;
    background: #eaeaea;
    color: #333;
    margin: 0 5px 10px;
}

.pagination .nav-links .page-numbers:hover {
    color: #fff;
}

.pagination .nav-links .page-numbers.current {
    color: #fff;
}

.tags {
    margin-top: 30px;
    padding: 30px;
    background: #fff;
    overflow: hidden;
}

.tags>a {
    padding: 5px 15px;
    background: #efefef;
    border-radius: 50px;
    margin-right: 5px;
    display: inline-block;
    font-size: 14px;
    color: #333 !important;
}

.tags>a:hover {
    color: #fff !important;
    ;
}

.cat-links,
.tags-links {
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    display: block;
    margin-bottom: 10px;
}

.cat-links a,
.tags-links a {
    font-weight: normal;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
}

.type-post .post-share {
    float: right
}

.post-share ul {
    padding-left: 0;
    margin-bottom: 0;
}

.footer-social ul li a,
.post-share ul li a {
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background: #333;
    border-radius: 50%;
    font-size: 14px;
}

.related-posts {
    padding: 30px;
    background: #fff;
    margin-top: 50px;
}

.related-posts h4 {
    margin-bottom: 50px;
    font-weight: bold;
}

.single-related-post {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
}

.related-post-title {
    padding: 30px;
}

.related-post-title a {
    font-weight: 500;
    display: block;
    color: #333;
}

.related-post-title span {
    font-size: 12px;

}


/*--------------------------------------------------------------
## Newsletter Modal
--------------------------------------------------------------*/
#newsletterModal .modal-content {
    text-align: center;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

#newsletterModal .modal-content .modal-body {
    padding: 0;
}

#newsletterModal .modal-content .close {
    position: absolute;
    content: '';
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    opacity: 1;
    z-index: 222;
    background: #fff;
    border-radius: 50px;
}

#newsletterModal .modal-content .modal-text-content {
    padding: 40px;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

.comment-list {
    margin: 40px 0;
    list-style-type: none;
}

.comment-respond {
    padding-top: 50px;
}

.comments-area {
    padding: 30px;
    background: #fff;
    margin-top: 50px;
    display: inline-block;
    width: 100%;
}

.comments-area .comments-title {
    font-weight: 500;
}

.comment-list .row {
    margin-bottom: 40px;
}

.comment-list .children {
    list-style-type: none;
}

.comment-reply-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: 500;
    color: #333;
    display: block;
}

.logged-in-as {
    padding: 0 15px;
}

.comment-list .avatar {
    border-radius: 50%;
}

.comment-list .row p {
    margin-bottom: 0;
}

.comment-reply-link {
    float: right;
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 50px;
    display: inline-block;
}

.comment-reply-link:hover {
    color: #fff;
}

.commenter {
    margin-bottom: 10px;
}

.commenter a {
    font-weight: 500;
    text-transform: capitalize;
    color: #333;
}

.commenter span {
    float: right;
    font-size: 13px;
}

.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

.no-comments {
    padding: 0 10px;
    background: #FF0000;
    color: #fff;
}

/*Comment Form*/

.comment-form input[type=text] {
    height: 50px;
    padding: 0 20px;
    margin-bottom: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.comment-form textarea {
    height: 220px;
    padding: 20px;
    margin-bottom: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.comment-form .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.comment-form input[type=submit] {
    cursor: pointer;
    border: none;
    color: #fff;
    padding: 0 70px;
    border-radius: 50px;
}

.comment-form input[type=submit]:hover {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.comment-form-rating {
    margin-bottom: 20px;
}

.comment-form-cookies-consent {
    padding: 0 15px;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}

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

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

.gallery-columns-3 .gallery-item {
    max-width: 33.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-caption {
    display: block;
}


/*footer*/
.footer-widgets {
    padding: 100px 0 40px;
    background: #212121;
}

.footer-widget {
    margin-bottom: 50px;
}

.footer-widget .mc4wp-form input {
    width: 100%
}

.footer-widget .widget-title {
    margin-bottom: 20px;
    border-bottom: 0;
    padding-bottom: 0;
    color: #fff;
    font-weight: 500;
}

.footer-widget ul,
.footer-widget ol {
    list-style: none;
    padding-left: 0;
}

.footer-widget>ul,
.footer-widget>ol {
    margin: 0;
    padding: 0;
}

.footer-widget li {
    font-size: 15px;
    line-height: 35px;
    color: #808080;
}

.footer-widget li a {
    color: #9a9a9a;
}

.footer-widget .about-site-widget img {
    margin-bottom: 20px;
}

.footer-widget .about-site-widget p {
    color: #cfcfcf;
}

.footer-widget .widget-site-social a {
    margin-right: 15px;
}

.footer-social ul li {
    display: inline-block;
    margin-right: 10px;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.footer-widget.widget_calendar th,
.footer-widget.widget_calendar td {
    text-align: center;
    color: #9a9a9a,
}

.footer-widgets .col-xl-2.col-lg-4.col-md-3.col-sm-6 .footer-widget.widget_search input[type=search] {
    width: 100%;
}

.footer-widgets .col-xl-2.col-lg-4.col-md-3.col-sm-6 .footer-widget.widget_search input[type=submit] {
    display: none;
}

.footer-widgets .col-xl-2.col-lg-4.col-md-3.col-sm-6 .sub-menu {
    margin-left: 0.5em;
}

.copyright-bar {
    color: #fff;
    padding: 20px 0;
    background: #333;
}

.copyright-bar a,
.copyright-bar p {
    margin-bottom: 0;
    color: #ddd;
}

.copyright-bar ul li {
    margin-right: 20px !important;
}

.copyright-bar ul li:last-child {
    margin-right: 0 !important;
}

.copyright-bar p a {
    font-weight: bold;
}

.copyright-social-icons {
    text-align: right;
}

.currency-footer {
    text-align: right;
}

.currency-footer img {
    width: 50px;
    border-radius: 2px;
    margin-left: 5px;
}

/*404*/
.error-404 {
    padding: 120px 0;
    text-align: center;
}

.error-404 h1 {
    font-weight: bold;
    margin-bottom: 30px;
}

.error-404 a {
    margin-top: 50px;
}

.error-404 a:hover {
    color: #fff;
}

.mobile-bottom-nav {
    display: none;
}

/*backtotop*/

#backtotop {
    position: fixed;
    bottom: 80px;
    right: 30px;
    display: none;
}

#backtotop i {
    width: 50px;
    height: 50px;
    padding: 17px 15px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 50px;
    color: #fff;
}

#backtotop i:hover {
    cursor: pointer;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

#preloader {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: table;
    text-align: center;
}

.spinner {
    margin: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.spinner img {
    width: 220px;
}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 1201px WIDE
------------------------------------------*/

@media (max-width: 1200px) {
    .post-share {
        float: none;
        margin-top: 20px;
    }

    .single-related-post {
        margin-bottom: 30px;
    }

    .preview-btn li a {
        margin-bottom: 10px;
    }

    .pagination {
        display: block;
        margin-bottom: 100px;
    }
}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 993px WIDE
------------------------------------------*/

@media screen and (max-width: 992px) {
    .menu-item-has-children:after {
        display: none;
    }

    .off-canvas-menu-bar {
        display: block;
    }

    .site-header {
        padding: 30px 0 15px;
        display: none;
    }

    .top-header {
        display: none;
    }

    .preview-btn li a {
        width: 100% !important;
        padding: 7px 15px !important;
    }

    .custom-logo-link {
        width: 160px;
    }

    .my-account-widget,
    .shopping-cart-widget {
        display: block;
    }

    .shopping-cart-widget {
        text-align: right;
    }

    .shopping-cart-widget.open .widget_shopping_cart_content,
    .shopping-cart-button {
        text-align: left;
    }

    .my-account-widget i,
    .shopping-cart-widget i {
        float: none;
    }
}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 783px WIDE
------------------------------------------*/

@media screen and (max-width: 782px) {
    body.admin-bar .fixed-top {
        top: 45px;
    }
}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 769px WIDE
------------------------------------------*/

@media screen and (max-width: 768px) {
    body {
        padding-bottom: 60px;
        /* Adjust based on the height of the bottom nav */
    }
    .section-padding {
        padding: 30px 0;
    }

    .mobile-bottom-nav {
        display: block;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .nav-item {
        text-align: center;
        flex: 1;
        color: #333;
        font-size: 14px;
        text-decoration: none;
    }

    .nav-item i {
        display: block;
        font-size: 20px;
    }

    .navbar {
        padding: 15px;
    }

    .navbar-toggler {
        padding: 0;
    }

    .product-filter ul,
    .breadcrumbs ul {
        display: none;
    }

    .type-post .post-share {
        float: unset;
    }

    .post-navigation .nav-next {
        float: left;
        margin-top: 20px;
    }

    .navbar .menu-item>.active {
        color: #fff !important;
    }

    .navbar .menu-item {
        padding: 0;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
    }

    .navbar-nav {
        margin-top: 15px;
    }

    .breadcrumbs h1 {
        margin-bottom: 0;
        font-size: 18px;
    }

    .breadcrumbs {
        padding: 20px 0;
    }

    .testimonial-img img {
        margin-bottom: 85px;
    }

    .theme-preview-image {
        padding: 15px;
    }

    .the_excerpt_content {
        padding: 30px
    }

    .preview-btn li a {
        margin-bottom: 0;
    }

    .tags>a {
        margin-bottom: 10px;
    }

}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 601px WIDE
------------------------------------------*/

@media screen and (max-width: 600px) {
    body.admin-bar .fixed-top {
        top: 0;
    }

    .my-account-widget .my-account-button h5,
    .shopping-cart-widget .shopping-cart-button h5 {
        font-size: 16px;
    }

    .testimonial-img img {
        width: 120px;
    }

    .preview-btn li a {
        margin-bottom: 10px;
    }

    .copyright-bar p {
        margin-bottom: 20px;
    }

    .currency-footer,
    .copyright-bar p,
    .copyright-bar {
        text-align: center;
    }
}

/*----------------------------------------
IF SCREEN SIZE LESS THAN 415px WIDE
------------------------------------------*/

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

    .breadcrumbs ul li:last-child {
        margin-right: 0;
    }

    .copyright-bar {
        text-align: center;
    }

    .copyright-social-icons {
        text-align: center;
    }

    .copyright-bar p {
        margin-bottom: 10px;
    }
}