/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	4.0.94
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-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.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
/*
h1,
h2,
h3,
h4,
h5,
h6,
*/
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /* This is causing the fonts not to load properly
    font: inherit;
    */
    vertical-align: baseline;
    line-height:1.4!important;
}

h1,
h2,
h3,
h4,
h5,
h6{
    border:0!important;
    line-height:1.4!important;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
    line-height:1.4!important;
}



blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

p {
    margin: 0!important;
}

div{
    white-space: normal!important;
}

/*
 * Reduce font size on mobile devices.
 */

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

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    /*
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    */
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        line-height:1.4!important;
    }
}
/*
 * Remove violet border color on click of links
 */


 *:focus {
     outline-width: 0px !important;
 }

a {
    text-decoration: none !important;
    color:#387ed1 ;
}

a:empty {
    width: 0 !important;
}

.wcpv-sold-by-loop a{
    color:rgba(0, 0, 0, .6);
}

 ol,
 ul {
     margin: 0;
     padding: 0;
 }

 em {font-style: italic;}

.site-main {
    margin-bottom: 0;
}

/**
* Overall background color
*/
.site-content {
    padding-top: 60px;
    min-height: 600px;
}



/*

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    margin: 0;
}

h5{
    font-size: 1.2em;
    font-weight:600;
}

h6 {
    font-size: 1em;
    font-weight: 600;
}
*/

p {
    margin: 0 0 .5em;
}



.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {

    margin-bottom: 0;

}


/*Increase the full page width*/
.col-full {
    max-width: 100%;
    /*Width of the content area*/
}




/*This is to make the password fields in my-account/edit-account page not have any padding*/
fieldset{
    padding:0;
    background-color: #fff;
}

.input-text,
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea {

    padding: .5em;
    background-color:white;
    color: #555555;
    border: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: none;
    border:1px solid #e7e7e7 ;
    /*remove outline from all inputs*/

}

textarea#comment {
    background-color: white!important;
    margin-bottom: .5em;
}

.input-text:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
textarea:focus {
    background-color: white;
    border:1px solid #2196F3!important;
    /*adds blue box on click on input*/

}

input.search-field {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    min-height: 45px;
}

input.search-field:focus {
    background-color: white;
    border: 2px solid #aaa !important;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

input[type="email"]:focus{
outline:none !important;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget a.button {
    background-color: #2196F3;
    color: white;
    border-radius: .3em;
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce-Button:hover{
    background-color: #156db6;
    color: white;
    border-radius: .3em;
}

select {
    color: #555555;
    font-family: "Source Sans Pro",
    "HelveticaNeue-Light",
    "Helvetica Neue Light",
    "Helvetica Neue",
    Helvetica,
    Arial,
    "Lucida Grande",
    sans-serif;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    font-weight: 400;
    font-size: 90%;
}

.container {
    width: 100%;
}

form {

    margin-bottom: 0px !important;

}


/**
* Media Upload formatting
*/
.media-menu-item {
    background-color: white;
    color: #1d2327;
}

/**
* This is added to the homepage manually. Click the text tab.
*/
.qsqr-home-page-container{
    padding-left:5%;
    padding-right:5%;
}
.qsqr-content-main{
    padding:2%;
}

.qsqr-content-main .woocommerce-ordering {
    display: none;
}

.qsqr-container {
    display: flex;
    flex-direction: row;
    min-height: 600px;
    width: 100%;
}

.qsqr-container-column {
    display: flex;
    flex-direction: column;
}

.qsqr-container-row {
    display: flex;
    flex-direction: row;
}

.qsqr-left-sidebar {
    width: 25%;

}

.qsqr-content {
    width: 100%;

}

.qsqr-right-sidebar {
    width: 25%;
    padding: 1%;

}

.qsqr-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-align: center;
}
.qsqr-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 42px;
    text-align: center;
    padding-left:15px;
    padding-right:15px;
    border-radius: .3em;
}

.qsqr-btn-bg-orange {
    background-color: orange;
}

.qsqr-btn-tx-white {
    color: white;
}


.qsqr-text-align {
    text-align: center;
}

.qsqr-flex-display-flex {
    display: flex;

}

.qsqr-flex-direction-row {
    flex-direction: row;
}

.qsqr-flex-direction-column {
    flex-direction: column;
}

.qsqr-flex-align-items-center {
    align-items: center;
}

.qsqr-flex-justify-content-start {
    justify-content: start;
}

.qsqr-flex-justify-content-center {
    justify-content: center;
}

.qsqr-flex-justify-content-space-between {
    justify-content: space-between;
}

.qsqr-flex-justify-content-space-around {
    justify-content: space-around;
}

.qsqr-flex-justify-content-space-between {
    justify-content: space-between;
}

.qsqr-flex-wrap-wrap {
    flex-wrap: wrap;
}


.qsqr-bg-red {
    background-color: #FF5050;
}

.qsqr-bg-green {
    background-color: green;
}

.qsqr-bg-blue {
    background-color: blue;
}

.qsqr-bg-sky-blue {
    background-color: #E6E6FA;
}

.qsqr-text-white {
    color: white;
}

.qsqr-text-red {
    color:#FF4500;
}

.qsqr-text-green {
    color: #4CAF50;
}

.qsqr-info-blue {
    color: rgb(30, 126, 239) !important;
}

.qsqr-width-full {
    width: 100%!important;
}

.qsqr-width-3col {
    width: 30%;
}

.qsqr-height-3col {
    min-height: 200px;
}

.qsqr-width-4col {
    width: 23%;
}

.qsqr-margin-min {
    margin: 1%;
}

.qsqr-margin-top-medium {
    margin-top: 2%;
}

.qsqr-margin-top-5 {
    margin-top: 5px;
}

.qsqr-padding-min {
    padding: 1%;
}

.qsqr-padding-top-min {
    padding-top: 1%;
}

.qsqr-padding-bottom-min {
    padding-bottom: 1%;
}

.qsqr-border-grey {
    border-color: #ddd;
}

.qsqr-border-top-grey {
    border-top: 1px solid #eee;
}

.qsqr-heading-small {
    color: #3a3a3a;
    font-size: 1em;
}

/*************************HEADER NAV MENU: BEGIN****************/
#header-nav-container {
    width: 100%;
    height: 65px;
}

#header-nav-logo {
    width: 150px;
}

#header-nav-logo a {
    padding: 0;
}

nav.header-nav {
    height: 65px;

}

nav.header-nav ul {
    list-style: none;
    margin: 0%;
    padding: 0;
    width: 100%
}

nav.header-nav li {
    float: left;
    width: 100%;
    height: 65px;
    position: relative;
    text-align: center;
    z-index: 2;
    /*IMP: without this the drop down list will be hidden below the div below the menu*/
}

nav.header-nav ul.header-nav-ul-sub li {
    height: 50px;
    background-color: brown;
}

nav.header-nav li.header-nav-li-logo {
    width: 10%;
    /*This distributes the width of each of the columns*/
}

nav.header-nav li.header-nav-li-address {
    width: 20%;
    /*This distributes the width of each of the columns*/
}

nav.header-nav li.header-nav-li-search {
    width: 40%;
    /*This distributes the width of each of the columns*/
}

nav.header-nav li.header-nav-li-account {
    width: 15%;
    /*This distributes the width of each of the columns*/
}

nav.header-nav li.header-nav-li-cart {
    width: 15%;
    /*This distributes the width of each of the columns*/
}

nav.header-nav li a {
    width: 100%;
    height: 100%;
    display: block;
    color: rgb(231, 82, 82);
    text-decoration: none;
}

nav.header-nav ul li a {
    padding-top: 1.618em;
}

nav.header-nav ul li ul li a {
    padding-top: .8em;
}

nav.header-nav li a:hover {
    color: lightseagreen;
    background-color: rgba(235, 235, 231, 0.1);
}

nav.header-nav ul.header-nav-ul-sub {
    display: none;
    position: absolute;
}

hr {
    margin: 0px;
}




/*************************HEADER NAV MENU: END****************/

.woocommerce-active .site-header .site-search {

    width: 100%;
    float: none;
    margin-right: 0;
    clear: none;

}



.qsqr-header-container {
    width: 100%;
}



.qsqr-header-block1,
.qsqr-header-block2,
.qsqr-header-block3,
.qsqr-header-block4 {
    border-width: 1px;
    box-sizing: border-box;
}

.qsqr-header-block1 {
    width: 20%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

.qsqr-header-block2 {
    width: 50%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

.qsqr-header-block3 {
    width: 15%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

.qsqr-header-block4 {
    width: 15%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

@media screen and (max-width: 750px) {
    .qsqr-header-block1 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-header-block2 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-header-block3 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-header-block4 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

/* 3 column structure */

.qsqr-3column-container {
    width: 100%;
    overflow: hidden;
    /*without this the child divs will go out of this div.*/
}



.qsqr-3column-block1,
.qsqr-3column-block2,
.qsqr-3column-block3 {
    border-width: 1px;
    box-sizing: border-box;
}

.qsqr-3column-block1 {
    width: 33.3%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

.qsqr-3column-block2 {
    width: 33.3%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;
}

.qsqr-3column-block3 {
    width: 33.3%;
    position: relative;
    padding: 1%;
    float: left;
    border: 1px solid red;

}


@media screen and (max-width: 750px) {
    .qsqr-3column-block1 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-3column-block2 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-3column-block3 {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

.qsqr-clear {
    clear: both;
}



/* START: 3 column structure using table for equal heights of cells */

.qsqr-3column-table {
    /* Make the container element behave like a table */
    display: table;
    /* Set full-width to expand the whole page */
    width: 100%;
    /* Make the cells have spaces in between*/
    border-collapse: separate;
    border-spacing: 10px;
    border: 1px solid #eff0f1;
}

.qsqr-3column-row {
    display: table-row;
}

.qsqr-3column-cell1,
.qsqr-3column-cell2,
.qsqr-3column-cell3 {
    display: table-cell;
    /* Make elements inside the container behave like table cells */
    width: 33.3%;
    padding: 1%;
    /*
    The margin property is not applicable to display:table-cell elements.
    Consider using the border-spacing and border property instead.*/

    border: 1px solid #eff0f1;

}

@media only screen and (max-width: 750px) {
    .qsqr-3column-cell1 {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 750px) {
    .qsqr-3column-cell2 {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 750px) {
    .qsqr-3column-cell3 {
        display: block;
        width: 100%;
    }
}

/* END: 3 column structure using table for equal heights of cells */

.qsqr-color-red {
    background: #FF5050;

}

.qsqr-color-blue {
    background: rgb(30, 136, 229);

}

.qsqr-color-green {
    background: green;

}

.qsqr-color-grey {
    background: grey;

}

.qsqr-color-lightgrey {
    background: #eff0f1;

}

.qsqr-bg-color-white {
    background-color: white;

}

.qsqr-text-color-blue {
    color: rgb(30, 136, 229);

}

.qsqr-put-on-top {
    z-index: 2000;
}








.rz-um-register-form {

    max-width: 400px;
    margin-left: auto !important;
    /*This places the div in the center based on the max-width value*/
    margin-right: auto !important;
    text-align: center;
}

.rz-um-register-form span {
    /*This is to center the text*/
    display: block;
    text-align: center;
}

.rz-um-register-form h1 {
    text-align: center;
    font-size: 2.3em;
    font-weight: 400;
    padding: 0px;
    padding-top: .4em;
    margin: 0px;
}

.right-sidebar .qsqr-content-area {

    margin-right: 4.347826087%;

}

.qsqr-content-area,
.widget-area {

    margin-bottom: 2.617924em;

}

html,
body {
    min-height: 100%;
}

qsqr-um-link-alt a {

    line-height: 22px;
    color: #0073b1 !important;

}



body,
button,
input,
textarea {
    font-family: sans-serif;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    font-weight: 400;

}

body,
button{

    color: #555555;

}

input,
textarea{
    color:rgb(0,0,0,.6)
}

textarea {
    height: 100px;

}


.qsqr-default-color {
    color: #555555;
}


.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {

    text-decoration: none;
    padding-top: .5em;
    padding-bottom: .5em;
    display: block;

}

.site-footer{
    padding:2%;
}

.site-footer a:not(.button) {

    color: #bbc0c4;

}



.site-footer .-title a {
    color: #bbc0c4;
    text-decoration: none;
}

.right-sidebar .qsqr-content-area {

    margin-right: 0%;

}


.qsqr-add-section h2 {
    color: #6ec1e4;
}

/*############ START: COLUMN STRUCTURES :START ############*/

.qsqr-add-section {
    border: 3px dashed grey;
    background-color: #eff0f1;
    text-align: center;
    margin-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    color: #6ec1e4;
}

.qsqr-column-container {
    width: 100%;
    overflow: hidden;
    /*without this the child divs will go out of this div.*/
}

.qsqr-one-column-equal-block {
    width: 98%;
    height: 50px;
    float: left;
    margin: 1%;
}

.qsqr-two-column-equal-block {
    width: 48%;
    height: 50px;
    float: left;
    margin: 1%;
}

.qsqr-three-column-equal-block {
    width: 31.3%;
    height: 50px;
    float: left;
    margin: 1%;
}



/* END: COLUMN STRUCTURES :END*/


/*############ START: COLUMN STRUCTURES :START ############*/




@media screen and (max-width: 750px) {
    .qsqr-two-column-firstCol {
        float: none;
        margin-right: 0;
        width: auto;
    }
}

@media screen and (max-width: 750px) {
    .qsqr-two-column-secondCol {
        float: none;
        margin-right: 0;
        width: auto;
    }
}


/* END: COLUMN STRUCTURES :END*/


/*############ START: FULL WIDTH Custom Templates :START ############*/

/*
*This style is to make the preview page full-width
* Steps:
* 1. Template Name: qsqr-preview-post-template
*    Remove the sidebar(do_action( 'storefront_sidebar' )) from template. This will remove the sidebar
*    but the sidebar space will still be occupied. To remove the empty space, do the following.
* 2. page-template-qsqr-preview-post-template is nothing but page-template-<template name>
* 3. This will have to be done for each custom template that we want to make full width.
*/
.page-template-qsqr-preview-post-template .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-qsqr-preview-post-template .site {
    margin: 0px;
}

/* END: FULL WIDTH Custom Templates :END*/


.qsqr-sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.qsqr-shadow {
    box-shadow: 1px 1px 8px grey;

}
.qsqr-slide {
    margin-top: 2% !important;
    margin-left: 3% !important;
    margin-right: 3% !important;

}
.qsqr-gallery {
    margin-top: 2% !important;
    margin-right: 3% !important;

}
.qsqr-games {
    margin-top: 2% !important;
    margin-right: 3% !important;

}

.qsqr-slide-view{
    overflow:hidden;
    background-color: white;
    position:relative;/*This is needed to make content like section, containers obey overflow hidden mentioned above*/
}
.qsqr-gallery-view{
    overflow:hidden;
    background-color: white;
    position:relative;/*This is needed to make content like section, containers obey overflow hidden mentioned above*/
}
.qsqr-games-view{
    overflow:hidden;
    background-color: white;
    position:relative;/*This is needed to make content like section, containers obey overflow hidden mentioned above*/
}
.qsqr-sticky+.qsqr-header-compose-container {
    padding-top: 0px;
}

.qsqr-compose-editor-header-row1 {

    background: white;
    color: #f1f1f1;
}

.qsqr-compose-editor-header-row2 {

    background-color: #DCDCDC;
    overflow: auto;
    /*This is make the height of this DIV same as that of the contents*/
}

.qsqr-compose-editor-menu-container {
    width: 100%;
}

.qsqr-compose-editor-menu-items {
    float: left;
}




.qsqr-first-page-container{
    padding-left:5%;
    padding-right:5%;
    padding-top:2%;
}

.qsqr-sticky-header-spacer {
    min-height: 130px;
}

.qsqr-compose-editor-menu-section {
    float: left;
    width: 80%;
    padding: .5em;
}

.qsqr-compose-editor-button-section {
    float: left;
    width: 20%;
    padding: .5em;
}


.qsqr-cursor-pointer {
    cursor: pointer;
}
.qsqr-cursor-pointer:hover {
    opacity: .8;
}

.qsqr-button {
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.qsqr-button-green:hover {
    background-color: #4CAF50;
}

.qsqr-button-green:active {
    background-color: #4CAF50;
}

.qsqr-button-green {
    background-color: #4CAF50;
    color: white!important;
    border-radius: .3em;
    white-space: nowrap;
}

.qsqr-button-light-red {
    /*F2473F*/
    background-color: #FF5050;
    color: white !important;
    border-radius: .3em;
    white-space: nowrap;
}
.qsqr-button-red {
    /*F2473F*/
    background-color: #FF5050;
    color: white !important;
    border-radius: .3em;
    white-space: nowrap;
}


.qsqr-button-sky-blue {
    /*F2473F*/
    background-color: #2196F3;
    color: white !important;
    border-radius: .3em;
    white-space: nowrap;
}

.qsqr-button-grey-bg {
    /*F2473F*/
    background-color: #aaa;
    color: white !important;
    border-radius: .3em;
    white-space: nowrap;
}

.qsqr-button-orange {
    background-color: #FF9900;
    color: white !important;
    width: 100%;
    border-radius: .3em;
}

.qsqr-button-search {
    background-color: orange;
    color: white !important;
    width: 100%;
}

.qsqr-button-blue {
    background-color: #008CBA;
    color: white !important;
    width: 100%;
    border-radius: .3em;
}

.qsqr-hover-blue:hover {
    background-color: #008CBA;
    color: white;
}

.qsqr-hover-grey:hover {
    background-color: #e7e7e7;
    color: black;
}

.qsqr-border-grey {
    border: 1px solid grey;
}



.qsqr-listing-header-container {
    justify-content: space-between;
}



.qsqr-divider-item {
    border: none;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.12);

}

.qsqr-left-margin {
    margin-left: .5em;
}

.qsqr-top-margin-1 {
    margin-top: 1%;
}

.qsqr-bottom-margin-1 {
    margin-bottom: 1%;
}

.site-header {
    border-bottom-color: none;
}

.qsqr-left-border {
    border-left: 2px dotted red;
}

.divider {

    display: inline-block;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    margin-left: 8px;
    margin-right: 8px;


    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;

}


.sidenav {
    z-index: -100;
    overflow-x: auto;
    height: 100%;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block;
}

.sidenav a:hover {
    color: #064579;
}

.main {
    margin-left: 140px;
    /* Same width as the sidebar + left position in px */
    font-size: 28px;
    /* Increased text to enable scrolling */
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.qsqr-col-full {

    max-width: 80em;
    padding-top: 0%;
    padding-left: 2%;
    padding-right: 2%;

}

.qsqr-selector {
    border-style: dashed;
    border-width: 2px;
    border-color: blue;
}


/*
.qsqr-selector {
    outline-color:red;
    outline-style: dashed;
}
*/

.qsqr-val:hover,
.qsqr-border-type-val:hover,
.qsqr-border-width-val:hover {
    background-color: #ddd;
    cursor: pointer;
}

/***
* This is needed to tranform the multi column structure into 
* single columns if the screen size is below 750 px
*/
@media(min-width:750px) {
    .qsqr-multi-column-container {
        display: flex;
    }
}

/**
* Making the page full width
*/
.col-full {
    padding: 0;
}

/**
* When we add margin-top to the first section element, then it pushes the entire page down.
* That's because the editor content holder is pushed down. For that the below is needed.
* https://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down
*/
/*
.qsqr-editor-content-holder {
    overflow: auto;
}
*/

.qsqr-editor-compose-page {
    overflow: hidden;
}

.qsqr-property-container {

    overflow: auto;
    /*
    height:400px;*/
    margin-right: 0px;
}

/*
html {
    overflow-y: hidden;
}

.qsqr-editor-sidebar-container{
    margin-right:0px;
}

*/

.qsqr-dropdown-selection:hover {
    background-color: rgb(33, 150, 243);
    color: white;
    font-weight: 500;
    cursor:pointer;
}


/**
STOREFRONT Header Changes
1. Making the header sticky
2. Making the header thin
*/

@media screen and (min-width: 767px) {

    /*resizing the logo image */
    #masthead .custom-logo-link img {
        width: auto;
        height: 45px;
    }

    /*adjusting default margins and paddings*/
    #masthead .site-header-cart .cart-contents {
        padding: 1em 0;
    }

    #masthead .main-navigation ul.menu>li>a,
    .main-navigation ul.nav-menu>li>a {
        padding: 1em 1em;
    }

    #masthead .site-branding {
        margin-bottom: 1em;
    }

    /*positioning the cart-menu */
    #masthead .site-header-cart {
        /*
        width: 14% !important;
        position: fixed !important;
        */
        top: 0;
        right: 12%;
        padding: 0;
    }
}

/*applying the position fixed on the masterhead */
#masthead {
    position: fixed;
    top: 0;
    width: 100%;
    /*
    background-color:#fbfbfb;
    box-shadow: 0 0 .5em rgba(0, 0, 0, 0.7);
    */
}

button.menu-toggle:hover {
    background-color:#fbfbfb;
}

.masthead-container {
    display: flex;
    height: 60px;
    margin-left: 1%;
    margin-right:1%;
}

.masthead-underline{
    height:5px;
}

/*removing the site search*/
#masthead .site-search {
    /*display: none;*/
    margin: 0px;
    min-width:240px;
}

/*

.site-content {
    margin-top: 65px;
}
*/

/*****************/


.woocommerce-active .site-header .site-branding {
    margin: 0px;
}





.woocommerce-active .site-header .site-search {
    width: 100%;

}

.main-navigation ul li a {
    white-space: nowrap;
}

.main-navigation ul.nav-menu>li.menu-item-has-children>a::after {
    margin-left: .5em;
    /*remove space between header page link and dropdown caret*/
}






.secondary-navigation ul.menu ul.sub-menu a {
    display: flex;
    justify-content: start;
    align-items: center;

}
.secondary-navigation .menu {

    font-size: 1em;
    width: 100%;
    float: none;
    display: flex;
    justify-content: end;
    align-items: center;

}

.secondary-navigation ul li {

    position: relative;
    display: inline-block;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}





#masthead .site-branding {

    margin-bottom: 0px;

}

.site-branding{
    display:flex!important;
    align-items: center !important;
}

.custom-logo-link,
.site-branding,
.site-header-cart,
.site-logo-anchor,
.site-logo-link,
.site-search {

    margin-bottom: 0px;

}

.storefront-breadcrumb {
    display: none;
}


/*make the sidebar right by reversing the display orientation*/
.site-content .col-full {
    display: flex;
    flex-direction: row-reverse;
}

@media screen and (max-width: 767px) {
    .site-content .col-full {
        display: flex;
        flex-direction: column;
    }
}





.qsqr-company-branding img {
    height: 54px;
    width: auto;
}

.col-full {

    margin: 0;
    padding: 0;

}


.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {

    width: 100%;
    float: none;
    margin-right: 0;

}


.main-navigation ul.menu ul li a,
.main-navigation ul.nav-menu ul li a,
.secondary-navigation .menu ul li a {

    padding: .875em 1.41575em;
    font-weight: 400;
    font-size: 1em;

}


.menu-secondary-container{
    width:100%;
    display:flex;
    justify-content: end;
    align-items: center;
}



/********************************************************
 * 
 * SINGLE PRODUCT PAGE Changes
 * Template: content-single-product.php
 * 
 ********************************************************/

/**
 * @removedhook woocommerce_show_product_images in functions.php
 * This leaves empty space on the left side of the page.
 * To remove that we need the below changes.
 */
.single-product div.product .summary {

    width: 100%;
    float: none;
    margin: 0;

}

/**
 * This is to make the review form take full screen
 */

.woocommerce-tabs .panel {

    width: 100%;
    float: none;
    margin: 0;

}

/**
 * WP Sticky Sidebar is used to make the sidebar sticky.
 * The class theiaStickySidebar is added by this plugin.
 * If we put the below code, then a scrollbar will also added to the sidebar.
 */
/*
.theiaStickySidebar {
    overflow-y: scroll;
    height: 600px;
}
*/

/* Hide scrollbar for Chrome, Safari and Opera */
/*
.theiaStickySidebar::-webkit-scrollbar {
    display: none;
}
*/

/* Hide scrollbar for IE and Edge */
/*
.theiaStickySidebar {
    -ms-overflow-style: none;
}
*/


/*
* Hide review tabs name from the single product page
*/

.woocommerce-tabs ul.tabs {
    display: none;

}


/*
* Remove all extra space from the content and widget areas
*/
.right-sidebar .content-area {
    float: none;
    margin: 0%;
    width: 100%;

}

.right-sidebar .widget-area {
    width:30%;
    float: none;
    margin: 0;
    padding-left: 5%;
    padding-right: 5%;
}



/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 767px to 1024px
*/

@media (min-width: 767px) and (max-width: 1024px) {


    .right-sidebar .widget-area {
        width:30%;
        float: none;
        margin: 0;
        padding-left: 1%;
        padding-right: 1%;
    }
    



}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 767px to 1024px
*/

@media (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) {


    .right-sidebar .widget-area {
        width:30%;
        float: none;
        margin: 0;
        padding-left: 1%;
        padding-right: 1%;
    }
    


}

.qsqr-widget-area .widget-area,
.qsqr-single-widget-book-area .widget-area {
    width: 100%;
    float: none;
    margin: 0;
    padding-left: 1%;
    padding-right: 1%;
}

/** Begin: Sidebar Formatting*/
.qsqr-widget-area,
.qsqr-single-widget-book-area {
    padding-right: 1%;
    padding-left: 1%

}
/** End: Sidebar Formatting*/

.storefront-product-pagination{
    display:none;
}



.single-product div.product .woocommerce-product-rating {
    margin: 0;
}

.single-product div.product p.price {
    display: none;
}

/*Remove space from top and bottomr of the review/comment section*/
.woocommerce-tabs {

    padding-top: 0em;
    padding-bottom: 0em;

}


/**
 * Course Lesson Widget
 */
.qsqr-widget-list {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 3%;
    display:flex;
    justify-content:start;
    align-items:center;
    font-size: 1em;
}

.qsqr-widget-list:hover {
    color: #555555;
}

.commentlist{
    font-size: small;
}

select {

    width:20%;
    height:50px;

}


.woocommerce-MyAccount-content{
    width:100%;
}









/***
*
* //////////////BEGIN : HOME PAGE DISPLAY////////////////
*
**/
/*
ul.products li.product {
    margin-bottom: 3%;
}
*/

ul.products li.product img {
    /*
    height: 150px !important;
    */
    width: auto;
    max-width: 100%;
    max-height: 100%;
    /*
    display: inline-block;
    */
    /* Instead of display: block; */
    margin: 0 auto;
    vertical-align: middle;
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {



}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {



}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 767px to 1024px
*/

@media (min-width: 767px) and (max-width: 1024px) {





}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 767px to 1024px
*/

@media (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) {




}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {


}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {



}



/***
*
* //////////////END : HOME PAGE DISPLAY////////////////
*
**/




/***
*
* //////////////BEGIN : RESPOSIVE HEADER DISPLAY////////////////
*
**/

#qsqr-menu-toggle{
    display:none;
}

.qsqr-slide-menu{
    display:none;
    position:fixed;
    background-color: white;
    height:100vh;
    top:0px;
    overflow-y:auto;
    z-index:9999;
}

.qsqr-gallery-menu{
    display:none;
    position:fixed;
    background-color: white;
    height:100vh;
    top:0px;
    overflow-y:auto;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.7);
    z-index:9999;
}
.qsqr-games-menu{
    display:none;
    position:fixed;
    background-color: white;
    height:100vh;
    top:0px;
    overflow-y:auto;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.7);
    z-index:9999;
}

#qsqr-secondary-slide-menu {
    width: 50%;
    right:0px;
}
#qsqr-sidebar-slide-menu {
    width: 60%;
    left:0px;
    background-color: #f7f7f7;
}

#qsqr-sidebar-slide-menu .widget-area{
    width:100% !important;
    background-color: rgb(241, 237, 245);
}

.qsqr-widget-area,
.qsqr-single-widget-book-area {
    width:30%;
}

/**
* Needed to show the primary hamburger menu
*/
#qsqr-primary-slide-menu {
    width: 60%;
    left: 0px;
    background-color: #eee;
}
.qsqr-primary-slide-menu-container {
    display:block;

}

.qsqr-slide-menu-content a div {
    padding-left: 20px !important;
    padding-top: 5px !important;
    padding-right: 2px !important;
    padding-bottom: 5px !important;
    margin-top: 5px;
    color: #555555;
}

.qsqr-slide-menu-content a div:hover ,
.qsqr-slide-menu-content a div:active {
    background-color: #24a0ed;
    color: white;
}



.ham-title{
    color:#2196F3 !important;
}

#qsqr-primary-slide-menu .widget-area {
    width: 100% !important;
    background-color: rgb(241, 237, 245);
}

@media (min-width: 481px) and (max-width: 767px) {


    .qsqr-widget-area,
    .qsqr-single-widget-book-area {
        display: none;
    }


}

@media (min-width: 320px) and (max-width: 480px) {


 

    .qsqr-widget-area,
    .qsqr-single-widget-book-area {
        display: none;
    }



}

.secondary-navigation ul.menu ul.sub-menu {
    display:none;
}

.storefront-handheld-footer-bar ul li.search .site-search {
    bottom: -10em;
}

.storefront-handheld-footer-bar ul{
    display: flex;
    align-items: center;
}

.storefront-handheld-footer-bar {

    border-top: 1px solid #eee;
    box-shadow: none;
    background-color: #fff;
}

/*
* Handheld menu changes
*/
.handheld-navigation ul {
    margin-top: 0 !important;
}

.handheld-navigation ul.menu li a {
    font-size: 1em;
    width: 60%;
}

.handheld-navigation ul.menu li .dropdown-toggle {
    padding: 1em 1em;
    width: 40%;
}


.storefront-hamburger-menu-active .shm-close {
    background-color: #2196F3;
    color:white;
}

.storefront-handheld-footer-bar{
    z-index: 0;
}

/**
* Hamburger Menu vertical list
* Storefront style.css has the logic inside media to have main-navigation ul show vertical list for mobile devices only.
* We have modified to have the handheld-menu to have a vertical list always.
*
**/
.storefront-hamburger-menu-active .main-navigation .handheld-navigation > ul li{
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: block
}
/*
* This will add the child menu item and push main menu items down
*/
.storefront-hamburger-menu-active .main-navigation .handheld-navigation ul li ul {
    position: relative;
    float: none;
}
/**
* This makes sure that the sub-menu does not slide off the screen when we hover off from the main-menu in hamburger menu
*/
.handheld-navigation ul ul {
    top: 0px !important;
    left: 0px !important;
    display: block !important;
    visibility: visible !important;
    box-shadow: 0px 0px 0px #bbb !important;
}

.woocommerce-active .site-header .main-navigation {
    display: flex;
    flex-direction: row-reverse;
}

/**
* 
* HAMBURGER MENU CHANGES
*/

/*
* setting max with of the overlay to 300px
*/
.storefront-hamburger-menu-active .main-navigation.toggled .handheld-navigation {
    width: 250px;
}

/*
* This is copied from storefront-hamburger-menu.php.
* This was inside a media (max-width: 767px). Removed the screen resolution.
* Without this the overlay was transparent
*/

@media screen {
    .menu-toggle {
        color: #eee;
    }

    .menu-toggle:hover {
        color: #eee;
    }

    .main-navigation div.menu,
    .main-navigation .handheld-navigation {
        background-color: rgb(55, 151, 230);
    }

.handheld-navigation ul.menu li a {
    color: white;
}

    .main-navigation ul li a,
    ul.menu li a,
    .storefront-hamburger-menu-active .shm-close {
        color: rgb(0,0,0,.7);
    }

}

/*
* Overriding the Hamburger Menu plugin style.css
* Removed the screen size harcodings
*
*/

.main-navigation div.menu{
    display:none!important;
}

.storefront-hamburger-menu-active .shm-close {
    display: none;
}

@media screen {
    .storefront-hamburger-menu-active .main-navigation ul li a {
        padding: .857em 1.387em;
    }

    .storefront-hamburger-menu-active .main-navigation .handheld-navigation,
    .storefront-hamburger-menu-active .main-navigation div.menu {
        position: fixed;
        top: 0;
        left: -80%;
        width: 80%;
        height: 100%;
        transition: left 0.2s;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: left 0.2s;
        -moz-transition: left 0.2s;
        -ms-transition: left 0.2s;
        -o-transition: left 0.2s;
        transition: left 0.2s;
        z-index: 9999;
        display: block !important;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .storefront-hamburger-menu-active .main-navigation .handheld-navigation>ul,
    .storefront-hamburger-menu-active .main-navigation div.menu>ul {
        margin-top: .53em;
    }

    .storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle:before {
        transform: translateY(-4px);
    }

    .storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle:after {
        transform: translateY(4px);
    }

    .storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle span:before {
        opacity: 1;
    }

    .storefront-hamburger-menu-active .main-navigation.toggled .handheld-navigation,
    .storefront-hamburger-menu-active .main-navigation.toggled div.menu {
        left: 0;
        box-shadow: 0 0 2em rgba(0, 0, 0, 0.7);
    }

    .storefront-hamburger-menu-active .shm-close {
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        overflow: hidden;
        font-weight: bold;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .storefront-hamburger-menu-active .shm-close:before {
        font-family: "FontAwesome";
        font-weight: 400;
        content: '\f00d';
        margin-right: 1em;
        display: inline-block;
        padding: .857em 0 .857em 1.387em;
    }

    .storefront-hamburger-menu-active .site-header-cart .cart-contents {
        right: 2.618em;
    }

    .storefront-hamburger-menu-active.admin-bar .main-navigation .handheld-navigation,
    .storefront-hamburger-menu-active.admin-bar .main-navigation div.menu {
        padding-top: 32px;
    }
}

.storefront-2-3.storefront-hamburger-menu-active .main-navigation .shm-close:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
}

@media screen {

    .storefront-hamburger-menu-active.admin-bar .main-navigation .handheld-navigation,
    .storefront-hamburger-menu-active.admin-bar .main-navigation div.menu {
        padding-top: 46px;
    }
}


/***
*
* //////////////END : RESPOSIVE HEADER DISPLAY////////////////
*
**/




/***
*
* //////////////START : PRODUCTS TILE DISPLAY ON MOBILE////////////////
*
**/

ul.products li.product a {
    color:#555555 !important;
}


@media screen and (min-width: 768px) {

    /*

    ul.products {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    ul.products li.product {
        width: 31.8% !important;
    }

    ul.products li.product:nth-child(3n+1) {
        margin-right: 2% !important;
        width: 31.8% !important;
    }

    ul.products li.product:nth-child(3n+2) {
        margin-right: 2% !important;
        width: 31.8% !important;
    }

    ul.products li.product:nth-child(3n+3) {
        margin: 0 !important;
        width: 31.8% !important;
    }
    */

    /**
    * The slide sidebar should show only one tile and not 3 as above
    */

    .qsqr-slide-sidebar ul.products {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .qsqr-slide-sidebar ul.products li.product {
        width: 100% !important;
    }

    .qsqr-slide-sidebar ul.products li.product:nth-child(3n+1) {
        margin-right: 2% !important;
        width: 100% !important;
    }

    .qsqr-slide-sidebar ul.products li.product:nth-child(3n+2) {
        margin-right: 2% !important;
        width: 100% !important;
    }

    .qsqr-slide-sidebar ul.products li.product:nth-child(3n+3) {
        /*
        margin: 0 !important;
        */
        width: 100% !important;
    }


}


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

    ul.products {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    ul.products li.product {
        flex-grow: 1;
        width: 47.8% !important;
    }

    ul.products li.product:nth-child(odd) {
        margin-right: 2% !important;
        width: 47.8% !important;
    }

    ul.products li.product:nth-child(even) {
        margin-left: 2% !important;
        width: 47.8% !important;
    }

    ul.products li.product:nth-last-child(1):nth-child(odd) {
        flex-grow: 0 !important;
        width: 47.8% !important;
        margin-right: 2% !important;
    }

}

/***
*
* //////////////END : PRODUCTS TILE DISPLAY ON MOBILE////////////////
*
**/


.heading-text{
    font-size: 1.2em;
    /*rgb(57, 181, 74);*/
    display:flex;
    justify-content: center;
    align-items: center;
    color:rgb(67, 69, 75);

    height:7vh;
}

.qsqr-editor-sidebar-container{
    padding:5%;
}

.qsqr-editor-sidebar-container-parent{
    min-height:80vh;
}


.qsqr-editor-toolbar-container{
    padding:5%;
    overflow: auto;
}

.qsqr-editor-toolbar-container-parent{
    min-height:80vh;
}

/**
* Front page formatting: Spacing between the placards
*
*/

.home.page-template-template-fullwidth .hentry .entry-content h2+.woocommerce{
    margin-top: 0;
}
.home.page-template-template-fullwidth .hentry .entry-content h2 {
    margin-top: 2%;
}

.home.page-template-template-fullwidth .hentry .entry-content h2+[class*="wp-block-woocommerce-"]{
    margin-top:0;
}


.woocommerce-message {
    margin: 0px !important;
    border-radius: 0px;
}


.qsqr-hint{
    font-size:.8em;
    color:#aaa;
    margin:0;
}

.qsqr-headings-0 {
    font-size: 1.6em;
    font-weight: 600;
}

.qsqr-headings-1 {
    font-size: 1.6em;
    font-weight: 600;
}

.qsqr-headings-2 {
    font-size: 1.3em;
    font-weight: 600;
}

.qsqr-headings-3 {
    font-size: 1.1em;
    font-weight: 600;
}

.qsqr-headings-4 {
    font-weight: 600;
}

.qsqr-text-color-0 {
    color:#555555;
}

.qsqr-text-color-1 {
    color:rgb(0, 0, 0, .5);
}

.qsqr-underline-1 {
    border-bottom: 3px solid #2196F3;
}
.qsqr-underline-2 {
    border-bottom:1px solid #eee;
}
.qsqr-padding-1{
    padding:1%;
}

.qsqr-padding-left-1 {
    padding-left: 1%;
}

.qsqr-margin-bottom-1{
    margin-bottom: 1%;
}

.qsqr-margin-bottom-2 {
    margin-bottom: 2%;
}

.qsqr-margin-bottom-5 {
    margin-bottom: 5%;
}

.qsqr-margin-left-1 {
    margin-left: 1%;
}
.qsqr-margin-left-3 {
    margin-left: 3%;
}

#respond {
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
}

#reviews #comments {
    padding-top:2%;
}

.single-product div.product .woocommerce-tabs {
    margin-top: 2%;
}

#reviews .commentlist li .avatar {
    width: 40px;
    height:40px;
    float: left;
    margin-right: 1%;
}

.comment_container{
    display:flex;
}

#reviews .commentlist li .comment_container .comment-text{
    margin-left:2%;
}

.related>h2:first-child,
.upsells>h2:first-child {
    font-weight: 600;
    margin-bottom: .2em;
}

.woocommerce-tabs .panel h2:first-of-type {
    font-weight: 600;
}

#review_form>h2:first-child{
font-weight: 600;
}


#review_form {
    padding: 2%;
    background-color:  #f5f5f5;
}


.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
    padding: .5em .6em;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px!important;
    margin-bottom: 10px;
    border-radius: 0;
    color: #fff;
    clear: both;
    border-left: .6180469716em solid rgba(0, 0, 0, .15);
}


/**
* BEGIN: Book Format
*/

.qsqr-single-content-book-main,
.qsqr-two-pane-content {
    background-color: white;
    margin-bottom: 0;
    padding-left:1%;
    padding-right:1%;
}



.qsqr-single-widget-book-area {
    padding: 2%;
}





/**
* END: Book Format
*/

/**
* START: Blog Format
*/
.qsqr-single-content-blog-main {
    background-color: white;
    margin-bottom: 0;
}

.qsqr-single-content-blog-main {
    margin-left: 10%;
    margin-right: 10%;

}

@media (max-width: 767px) {
.qsqr-single-content-blog-main,.qsqr-single-content-slide-main {
    margin:0;
    padding-left: 2%;
    padding-right: 2%;

}


}
/**
* END: Blog Format
*/

.qsqr-p-n-container{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.qsqr-slide-button-container {
    display: flex;
    justify-content: end;
    align-items: center;
}

.qsqr-product-button-row {
    display: flex;
}

.qsqr-product-button-row-color {
    background-color: #ddd;
}

.qsqr-button-row-items {
    flex-grow: 1;
    width: 33%
}

.qsqr-disable-links{
    pointer-events: none;
}

.qsqr-disabled-color {
    color:#bbb;
}

.qsqr-button-grey {
    color:grey;
}




.qsqr-flex-column{
    flex-direction: column;
}

.qsqr-flex-row {
    flex-direction: row;
}

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

    .qsqr-flex-row {
        flex-direction: column;
    }

}


.pl-padding,
.pl-margin {
   text-align:center;
}

.pl-size {
    padding-left: 10% !important;
}

#button-text-id-co,
#button-url-id-c {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

.justifycontent{
    padding-left:5%;
    padding:5%;
    text-align: center;
}

.qsqr-flex-row {
    display: flex;
    width: 100%;
}

.qsqr-flex-row-jc-sb {
    justify-content: space-between;
    margin-bottom: 2%;
}




.qsqr-row{
	display:flex;
	width:100%;
	height:50px;
	align-items:center;
}

.qsqr-row-1 {
    display: flex;
    width: 100%;
    height: 50px;
}

.qsqr-width-resize {
    width: 60%;
}
.qsqr-grey{
	background-color:#e7e7e7;
}
.qsqr-child{
	margin-right:1%;
}
.qsqr-link{
	cursor: pointer;
}


.qsqr-bold{
	color:#555555;
	font-weight:600;
}

.qsqr-red{
	background-color:#FF5050;
}
.qsqr-blue{
	background-color:#24a0ed;
}


.qsqr-tile{
	padding-left:3%;
	padding-right:3%;
	margin-top:2%;
}



button {
	color: white;
}

button[name="restore"] {
    background: inherit;
}

button[name="delete"] {
  background:inherit;
}

button[name="trash"] {
    background: inherit;
}

.qsqr-button-row{
	display:flex;
	justify-content:space-between;
}

.qsqr-two-pane-content {
    background-color: white;
    padding: 3%;
    margin-bottom: 0;
}
.content-area{
    background-color: white;
}


.qsqr-blog-title{
    background-color: #f8f8f8;
    min-height:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight: 600;
    font-size:2.5em;

}

.qsqr-log-in-avatar{
    border-radius:50%;
}


/**
* Make the description of the product tiles left aligned
*/
ul.products li.product {
    list-style: none;
    text-align: left;
}



cite,
dfn,
em,
i {
    font-style: normal;
}



/** ULTIMATE MEMBER BEGIN**/

input[type="password"].um-form-field,
input[type="text"].um-form-field {
    width:100%;
    background-color: #eee;
}

.um-login {
    max-width: 900px!important;
    width:100%;
}

.generic-logo{
    height:auto;
}

.logo-center{
    display:flex;
    justify-content: center;
    align-items: center;
}

.generic-bg-grey {
    background-color: rgb(250, 236, 236);
}


.generic-shadow-theme {
    box-shadow: 1px 1px 8px #cdcdcd;
}


.generic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:2%;
}
.generic-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:400px;
    padding-top:1%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    background-color: white;
}

.generic-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    width:100%;
    color:rgb(0, 0, 0, .5)
}
.generic-bottom-row-item{
    padding-top:2%;
    padding-bottom:2%;
    padding-left:1%;
    padding-right:1%;
    color:inherit;
    font-size:.9em;
}

.generic-bottom-row-item a {
    color: inherit;
}

.generic-bottom-row-item a:hover {
    color: #387ed1;
}

#um-submit-btn{
    width:100%;
    margin-top:2%;
    border-radius:5px;
    font-weight: 600!important;
    color:white;
}

.um-field-label{
    margin-top:5%;
}

.um-field-label label{
    color:#555555;
}

.generic-center span{
    color:#555555;
}

.um-field-block div{
    font-size:15px;
}

.um-field-error{
    background-color: #555555!important;
    min-height:30px;
    padding:2%;
    color:#eee;
    font-size:.9em;
}

.um-register{
    width:100%;
}

.generic-privacy-confirmation{
    color:rgb(0, 0, 0, .5);
    margin-top: 2%;
    font-size:.8em;
}



/**
*LOGIN PAGE
**/

.um-right{
    padding:3%;
background:#ccc;
border-radius:.3em;
font-weight: 600;
}


.um-right .um-button{
display:flex;
justify-content: center;
color:white;
}

.generic-container .um-left,.generic-container .um-left .um-button,.generic-container .um-right,.generic-container .um-right, .generic-container .um-col-alt-b{
width:100%;
margin-top:3%;}


.generic-container .um-col-alt-b .um-link-alt
{

    display:flex;
    justify-content: center;
}

.generic-container .um-field-label label{
    color:#555555
}

.generic-container .um-field-checkbox-option, .generic-container .generic-clause{
    color:#555555;
}

.generic-container .generic-sign{
    font-weight: 600;
    font-size:1.5em;
    color:#555555
}
/** ULTIMATE MEMBER END**/

/*
* Resize the logo height on the menu
*/
#masthead .custom-logo-link img {
    width: 135px;
    height: 45px;
}

@media screen and (max-width: 480px) {
    .generic-center {
        display: flex;
        justify-content: center;
        align-items: center;
        padding:3%;
        width:80%;
    }

    /*
    * Resize the logo height on the menu based on mobiles
    */
    #masthead .custom-logo-link img {
        width: 135px;
        height: 45px;
    }

    .qsqr-width-resize{
        width:100%;
    }



}



.storefront-hamburger-menu-active .shm-close{
    display:none;
}



.qsqr-account-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2%;
    min-height:100px;
    background-color: #f7f7f7;
}



/**
* MY ACCOUNT page-my-account START
* SETUP Page - The same changes apply to the setup page
* COMPOSE Page - The compose page has its own inline style
*/

.qsqr-account-meta-wrapper {
    width: 60%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.qsqr-account-pic {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-right: 2%;
}

.qsqr-account-meta {
    margin-top:2%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qsqr-account-content-wrapper {
    width: 100%;
    display: flex;
    margin-top: 15px;
    padding-right: 5%;
}

.qsqr-account-content {
    width: 100%;
    display: flex;
}
.qsqr-account-content .entry-content .woocommerce {
    width: 100%;
    display: flex;
}

.qsqr-account-content article,
.qsqr-account-content article .entry-content {
    width: 100%;
    display: flex;
}

.woocommerce-MyAccount-navigation {
    width: 30%;
    margin-right: 3%;
    padding-left:5%;
}

/*
h1 {
    color: white;
    font-size: 2.4rem;
}
*/

.woocommerce-MyAccount-navigation a {
    font-size: 1.2em;
    font-weight: 600;
}


.woocommerce-MyAccount-navigation a div {
    margin-bottom: 5%;
}

.woocommerce-MyAccount-content label {
    font-size: 1em;
    font-weight: 600;
    color: #777777;
    padding-bottom: .2em;
}

.woocommerce-billing-fields__field-wrapper p{
    margin-bottom: 2%!important;
}

.woocommerce-billing-fields__field-wrapper label,.woocommerce-billing-fields h3, .woocommerce-checkout h3{
    font-weight:600;
}

/*
This causes the sidebar in the single product page disappears
.site-content .col-full {
    display: block;
}
*/

.hentry .entry-content .woocommerce-MyAccount-navigation ul {
    border: none;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li {
    border: none;
}

@media (max-width: 767px) {
    .hentry .entry-content .woocommerce-MyAccount-navigation {
        display: none;
    }

    .woocommerce-MyAccount-content {
        width: 100%;
    }

}

@media (max-width: 767px) {
    .woocommerce-MyAccount-navigation {
        display: none;
    }

    .woocommerce-MyAccount-content {
        width: 100%;
    }

    .qsqr-account-content {
        width: 100%;
    }


    .qsqr-account-content-wrapper {
        width: 100%;
        display: flex;
        margin-top: 15px;
        padding-left: 5%;
        padding-right: 5%;
    }

}

/**
* My Account page-my-account END
*/




/**
* Overlay to be shown on Save, Publish and Preview
*/
.overlay {
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100000;
}


.overlay-content-holder{
    width:40%;
    height:30%;
    background-color: #eee;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 .5em rgba(0, 0, 0, 0.5);
    background-color: white;
    color:#555555;
    border-radius:10px;
}
.overlay-content-holder-help{
    width:40%;
    height:80%;
    background-color: #eee;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 .5em rgba(0, 0, 0, 0.5);
    background-color: white;
    color:#555555;
    border-radius:10px;
}

.overlay-content{
    width:100%;
}


@media (max-width: 767px) {
.overlay-content-holder {
    width: 80%;
    padding:5%;
}
}

.overlay-ok-button,
.overlay-yes-button,
.overlay-no-button,
.delete-block-yes,
.delete-block-no {
    width: 80px;
    padding:2%;
    display:flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    border-radius: .3em;
    color:white;
    /*margin-left:10px;*/
}

.overlay-ok-button,
.overlay-yes-button,
.delete-block-yes {
    background-color: #387ed1;
}


.overlay-no-button,
.delete-block-no {
    background-color: #ddd;
    color: rgb(0, 0, 0, .6);
}

.overlay-column {
    display: flex;
    flex-direction: column;
}
.overlay-button-row{
    display:flex;
    justify-content: end;
    align-content: center;
    height:40px;
    width:100%;
    
}
.overlay-congrats-heading{
    color: #387ed1;
    font-size:1.1em;
    font-weight:600;
}

.qsqr-red-button {
    width: 80px;
    height:40px;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: .3em;
    color: white;
    background-color: #FF5050;
    
}

.qsqr-orange-button {
    width: 80px;
    height: 40px;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: .3em;
    color: white;
    background-color: #FF9900;
}

.qsqr-green-button {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: .3em;
    color: white;
    background-color: #4CAF50;
}


.qsqr-book-first-page-table td,
.qsqr-book-first-page-table tr:nth-child(2n) td {
    padding:0;
    background-color:white;
}

.woocommerce-result-count,.orderby {
    display: none;
}

.qsqr-status-complete {
    border-radius: 50%;
    width:30px;
    height:30px;
    background-color: #4CAF50;
    margin: auto;
}

.qsqr-status-pending {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #eee;
    margin: auto;
}

.qsqr-status-wip {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #FF4500;
    margin: auto;
}

.qsqr-margin-auto {
    margin: auto;
}

.qsqr-button-not-clickable{
    pointer-events: none;
}

.qsqr-products-column {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 15%;
    padding-right: 15%;
}

@media screen and (max-width: 767px) {
    .qsqr-products-column {
        padding-left: 5%;
        padding-right: 5%;
    }

}

.storefront-sorting{
    margin-bottom:0;
}

.woocommerce-tabs .panel h2:first-of-type{
    margin-bottom:.5em;
}

ul.products li.product .star-rating {
    margin: 0;
}

li.cat-item{
    list-style: none;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
    margin-bottom:0;
    margin-top:2%;
}

.wcpv-sold-by-loop{
    margin:0;
}

.error404 .site-content .widget_product_search{
    background-color: rgb(0,0,0,0);
}

.qsqr-text-center{
    text-align:center;
}


@media screen and (max-width: 767px) {
    .widget-area{
        display: none;
    }

}

.qsqr-signin-button {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #2196F3 !important;
    white-space: nowrap;
    font-size: 1em !important;
    font-weight: 600!important;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    margin-top: 2%;
    margin-bottom: 2%;
    height:45px!important;
}

.qsqr-signup-button {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ddd;
    color: #555555 !important;
    white-space: nowrap;
    font-size: 1em !important;
    font-weight: 500;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    margin-left: 4%;
    padding: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    height:45px!important;

}


/**
* SITE HEADER Changes: START
*/

.site-header {

    padding-top: 0;
    padding-bottom: 0;
    height: 60px;
    border-bottom-color: #fff;
}

.site-header .col-full:first-child {
    flex: 0 0 270px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header .storefront-primary-navigation .col-full {
    flex: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.storefront-primary-navigation .site-search .widget_product_search input[type="search"],
.storefront-primary-navigation .site-search .widget_product_search input[type="text"] {
    padding: 0;
    padding-left: 2.5em;
    line-height: 1;
}

.site-header .col-full .site-branding {
    width: 100%;
    flex: 0 0 135px;
    padding: 0;
    margin: 0;
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
}


.site-header .col-full .qsqr-company-branding {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}





.main-navigation ul li a {
    color:#555555;
}

.main-navigation ul li a:hover {
    color: #387ed1;
    text-decoration: underline;
}

.main-navigation ul ul li {
    background-color: white;
}

.main-navigation ul ul li:hover {
    background-color: #fff
}


.main-navigation ul ul li a {
    font-size: 1em;
}

.main-navigation ul ul li a:hover {
    color: #387ed1;
    text-decoration: underline;
}




/**Secondary navigation */



.secondary-navigation .menu ul a {
    background: inherit;
    font-size: 1em;;
}



/**Needed for sign in button alignment */
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {

    width: 100%;
    float: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;

}


.storefront-primary-navigation {
    width:100%;
    padding-left: 2%;
    padding-right: 2%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.secondary-navigation-2 {
    flex: 0 0 180px;
    padding: 0;
    margin: 0;
    display: flex;

}

.site-header .storefront-primary-navigation .col-full .main-navigation {
    width: 250%;
}



button.menu-toggle {
    border: none;
}


.storefront-handheld-footer-bar ul li>a {

    background-color: inherit;
}

/**
* main menu sidebar
*/
.storefront-hamburger-menu-active .main-navigation .handheld-navigation {
    border: none;
    overflow-y: auto;
}



.primary-navigation ul ul {
    top: 50px;
    box-shadow: 1px 1px 8px #bbb;
}

/**
* Needed sidebar navigation to show child menu just below main menu as stack
*/
.handheld-navigation ul ul {
    top: 0px;
    box-shadow: 1px 1px 8px #bbb;
}




@media (max-width: 480px) {

    .site-header>.col-full {
        flex: 0 0 180px;
        padding: 0;
        margin: 0;
        display: flex;
    }
    .site-header .storefront-primary-navigation .col-full .main-navigation {
        width: 100%;
    }
    .woocommerce-active .site-header .main-navigation{
        justify-content: center;
    }

    .storefront-primary-navigation {
        width:70px;
        padding: 0;
        margin: 0;
        display: flex;
    }

    .secondary-navigation-2 {
        flex: 0 0 90px;
        padding: 0;
        margin: 0;
        display: flex;

    }


    .secondary-navigation ul.menu a.qsqr-signup-button{
        display: none;;
    }

}


/*
* Drop down menu color formatting
*
*/



.main-navigation ul.menu ul.sub-menu {
    top: 50px;
}

.secondary-navigation ul.menu ul.sub-menu {
    top: 40px;
}


.secondary-navigation ul.menu ul.sub-menu {
    width:100%;

}

.main-navigation ul.menu ul.sub-menu li,
.secondary-navigation ul.menu ul.sub-menu li {
    background-color: inherit;
}

.main-navigation ul.menu ul.sub-menu li a,
.secondary-navigation ul.menu ul.sub-menu li a {
    color: white;
    font-size: 1em;
    text-align: left;
}

.secondary-navigation ul.menu ul.sub-menu li a {
    font-size: 1em;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
}

/**
* Used for adding an up arrow to the primary menu dropdown
*/
/*
.main-navigation ul.sub-menu:after {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: 30px;
    width: 10px;
    height: 10px;
    background: rgb(55, 151, 230);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
*/


@media (max-width: 767px) {

    .secondary-navigation ul.menu ul.sub-menu {
        width: 200%;
        position: absolute;
    }

    .handheld-navigation .dropdown-toggle{
        color:white;
    }


}


/**
* SITE HEADER Changes: END
*/


.qsqr-fa-buttons-medium {
    font-size: 1.2em;
    cursor: pointer;
}

.qsqr-fa-buttons-large {
    font-size: 1.5em;
    cursor: pointer;
}

.qsqr-fa-buttons-xxlarge {
    font-size: 5em;
}

.qsqr-fa-buttons-xlarge {
    font-size: 3em;
}

.qsqr-fa-buttons-mlarge {
    font-size: 1.8em;
}

.qsqr-fa-avatar-color {
    color:rgb(0, 0, 0, .5)
}

.qsqr-profile-pic {
    cursor: pointer;

}

.qsqr-editor-fa-buttons{
    cursor:pointer;
}
.qsqr-editor-fa-header-buttons {
    cursor: pointer;
    color:#555555;
}

.qsqr-fa-processing{
    color:#d40000;
}

qsqr-text-center{
    text-align: center;
}


.qsqr-default-container {

    padding: .5em;
    color: #555555;
    background-color: #f7f7f7;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: none;
    outline: 0;
    min-height:40px;
    /*remove outline from all inputs*/

}

.form-buttons{
    margin-bottom:2%;
}

.qsqr-font-small{
    font-size:.9em;
}


.qsqr-text-align-center{
    text-align:center;
}

/**
* PRODUCT TILE STYLING - BEGIN
*/

/**
* Outline around tile on hover
*/

ul.products li.product{
    font-size: 1em;
}
.site-main ul.products.columns-3 li.product:hover {
    outline-color: #eee;
    outline-style: solid;
}

.site-main ul.products li.product a h2 {
    color:#555555;
    font-size:1em;
    font-weight:600;
}

/**
* When we hover over the tile the title should turn blue
*/
ul.products li.product a:hover h2{
	color:#387ed1;
}

ul.products li.product a:hover {
	color:#387ed1!important;
}

.site-main ul.products.columns-3 li.product:hover a h2 {
    color:#387ed1;
}

.qsqr-product-info-container {
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 3%;
}

.qsqr-product-info-container button[name="trash"],
.qsqr-product-info-container button[name="delete"],
.qsqr-product-info-container button[name="restore"] {
    padding-left: 0;
    margin-right: 5%;
    padding-top: 3%;
}

/**
* PRODUCT TILE STYLING - END
*/


.qsqr-footer-link-container{
    display:flex;
    justify-content:center;
}

.qsqr-footer-link-item{
    padding:1%;
}



@media screen and (max-width: 767px) {
    .content-area-slide {
        width: 100%;
        margin: 0%;
    }
}

@media screen and (min-width: 767px) {
    .content-area-slide {
        width: 65%;
        margin-left: 5%;
    }
}


.star-rating span::before,
.quantity .plus,
.quantity .minus,
p.stars a:hover::after,
p.stars a::after,
.star-rating span::before,
#payment .payment_methods li input[type="radio"]:first-child:checked+label::before {
    color: orange;
}


.qsqr-slide-menu-content .main-nav a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    margin-top: 5px;
    font-weight: 600;
    color:#555555!important;

}

.qsqr-slide-menu-content .main-nav .sub-menu a {
    font-weight: 400;

}

.qsqr-slide-menu-content a:hover,
.qsqr-slide-menu-content a:active {
    background-color: #24a0ed;
    color: white !important;
}

.search-field {
    border: 1px solid #ccc !important;
}

/**
* Company name availability - START
*/
#qsqr-search-company-name-input-id {
    width: 50%;
    padding: 5px 10px;
    margin: 12px 0;
    display: inline-block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-sizing: border-box;
    border:0px solid #fff;
}

#qsqr-check-company-button-id {
    width: 75px;
    padding: 12px 15px;
    margin: 12px 0;
    display: inline-block;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    text-align:center;

}

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

    #qsqr-search-company-name-input-id {
        width: 75%;
    }

}
/**
* Company name availability - END
*/
.fs-eight {
    font-size: .5em;
}

.fs-nine {
    font-size: .5625em;
}

.fs-ten {
    font-size: .625em;
}

.fs-eleven {
    font-size: .6875em;
}

.fs-twelve {
    font-size: .75em;
}

.fs-fourteen {
    font-size: .875em;
}

.fs-eighteen{
    font-size:1.125em;
}

.fs-twentyfour {
    font-size: 1.5em;
}

.fs-thirty {
    font-size: 1.875em;
}

.fs-thirtysix {
    font-size: 2.25em;
}

.fs-fortyeight {
    font-size: 3em;
}

.fs-sixty {
    font-size: 3.75em;
}

.fs-seventytwo {
    font-size: 4.5em;
}

.fs-ninetysix {
    font-size: 6em;
}

.home-products-container{
    padding-left:10px;
    padding-right:10px;
}

@media screen and (min-width: 768px) {
.home-products-container {
    padding-left: 10%;
    padding-right: 10%;
}
}



.qsqr-single-widget-book-area {
    border-right: 1px solid #f7f7f7;
}

.qsqr-single-widget-book-area a {
    color: #555555;
    padding: 1%;
    display: block;
}

/**
* This is adding extra space below the footer. So hiding it.
*/
.pswp{
    display:none;
}

.qsqr-post-image{
    display:flex;
    justify-content:center;
    align-items: end;
    text-align: center;
}


.qsqr-invalid-company-name{
    font-weight:600;
    font-size:1.1em;
}


.alm-tiles-center{
    display:flex;
    justify-content: center;
    align-items: center;
}


.alm-btn-wrap{
    display:none!important;
}


/**
* Remove the Edit Image button in media uploader
*/


.edit-attachment{
    display:none!important;
}

#qsqr-help-section-content-id{
    overflow: auto;
    height:80%;
    padding:2%;
}


.delete-post-button,.trash-post-button{
    padding-left:0px!important;
}


/**
* Without this the product tiles in the vendor product pages were getting created with very small width.
*
*/
.ajax-load-more-wrap{
    width:100%;
}


/**
* Media Library - Remove the delete permanantly button and the attachment details.
*
*/
.media-sidebar .details .edit-attachment {
    display: none;
}
.media-sidebar .details .delete-attachment {
    display: none;
}


.media-sidebar .attachment-details .setting {
    display: none;
}

.media-sidebar .attachment-details .description {
    display: none;
}


/**
*
**************************************************HEADER STYLES*****************************************************
********************* This should be the last items in the stylesheet. DONT Add anything after this ****************
*/




.main-navigation ul.menu ul.sub-menu,
.secondary-navigation ul.menu ul.sub-menu {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
        rgba(0, 0, 0, 0.23) 0px 3px 6px;
		border-radius:10px;
        color:#555555;
		background-color:white;

}
.main-navigation ul.menu ul.sub-menu li:first-child,
.secondary-navigation ul.menu ul.sub-menu li:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

}
.main-navigation ul.menu ul.sub-menu li:last-child,
.secondary-navigation ul.menu ul.sub-menu li:last-child{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

}
.main-navigation ul.menu ul.sub-menu li a,
.secondary-navigation ul.menu ul.sub-menu li a{
	border-top:1px solid #fafafa;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
        color:#555555;

}

.main-navigation ul.menu ul.sub-menu li:first-child a,
.secondary-navigation ul.menu ul.sub-menu li:first-child a{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
	border-top:1px solid #ddd;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;

}

.main-navigation ul.menu ul.sub-menu li:last-child a,
.secondary-navigation ul.menu ul.sub-menu li:last-child a{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;

}


.main-navigation ul.menu ul.sub-menu li:hover,
.secondary-navigation ul.menu ul.sub-menu li:hover {
    background-color: #eee
}


.main-navigation ul.menu ul.sub-menu li a:hover,
.secondary-navigation ul.menu ul.sub-menu li a:hover {
    color: #387ed1;
    text-decoration: none;
}


.secondary-navigation ul.menu a {

    width: 100%;/*Cannot have a smaller width as that will make the secondary drop down text to wrap*/
    display: flex;
    justify-content: center;
    align-items: center;
}


.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a, .secondary-navigation ul.menu ul li a {
	padding: .875em 1.41575em!important;
    font-weight: 400;
    font-size: 1em;
}

.secondary-navigation .menu a{
	padding:0;/**This is needed for making the login and signup buttons fit into the main menu bar height */
	height:50px;/**This is needed along with the padding else the secondary menu vanishes as soon as we transition from the secondary avatar to the menu list */
}

@media (min-width: 481px) and (max-width: 767px) {


	/**
	* Account dropdown formatting on smaller screens
	*/
	.secondary-navigation ul.menu ul.sub-menu {
		position: absolute;
		top: 40px;
		right: -10px;
		width: 130%;
	}

}


@media (min-width: 320px) and (max-width: 480px) {


	/**
	* Account dropdown formatting on smaller screens
	*/
	.secondary-navigation ul.menu ul.sub-menu {
		position:absolute;
		top:40px;
		right:-15px;
		width:250%;
	}

}



/**
*
**************************************************HEADER STYLES*****************************************************
********************* This should be the last items in the stylesheet. DONT Add anything after this ****************
*/



@media screen and (max-width: 767px) {
    .qsqr-section{
        min-height:200px!important;
    }
}


/**
*
* YOUTUBE VIDEOS
*/

.youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
  }
  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }
      
  .youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -o-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
  }
  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }
  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("media/youtube.png") no-repeat;
    cursor: pointer;
    background-size:contain;
    background-position: center center;
  }


  .ytp-button:not([aria-disabled="true"]):not([disabled]):not([aria-hidden="true"]) {
    cursor: pointer;
  }

  .ytp-large-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    margin-left: -34px;
    margin-top: -24px;
    -webkit-transition: opacity .25s cubic-bezier(0,0,.2,1);
    -o-transition: opacity .25s cubic-bezier(0,0,.2,1);
    transition: opacity .25s cubic-bezier(0,0,.2,1);
    z-index: 63;
  }



  .ytp-button {
    border: none;
    background-color: transparent;
    padding: 0;
    color: inherit;
    text-align: inherit;
    font-size: 100%;
    font-family: inherit;
    cursor: default;
    line-height: inherit;
  }


  qsqr-font-1-1em{
    font-size:1.1em;
  }
  qsqr-font-1-2em{
    font-size:1.2em;
  }
  qsqr-font-1-3em{
    font-size:1.3em;
  }
  qsqr-font-1-4em{
    font-size:1.4em;
  }
  qsqr-font-1-5em{
    font-size:1.5em;
  }
  qsqr-font-1-6em{
    font-size:1.6em;
  }
  qsqr-font-1-7em{
    font-size:1.7em;
  }
  qsqr-font-1-8em{
    font-size:1.8em;
  }
  qsqr-font-1-9em{
    font-size:1.9em;
  }


/**
*
* This is added to remove the white space that appears below the footer when there is less content on the page.
*/

/*
This fixes the footer at the bottom
.site-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
*/

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
    min-height: calc(100vh - 0/* height of header if applicable */);
}

.site-footer {
    flex-shrink: 0;
}

/**
* Home page of the companies
*/

.icon-with-text {
    display: flex;
    align-items: center;
    font-weight:600;
}
.icon {
width:25px;
margin-right: 10px;
font-size: 24px;
color: red; /* Set the color to red */
}



.site-footer {
    color: #575757;
    background-color:aliceblue;
}

.qsqr-menu-item {
color:#555555;
}






/*Tint MCE editor color*/
.mce-toolbar .mce-ico {
    color: #555555;
}

/*Make the color of the search magnifying glass symbol lighter*/
.widget_product_search form::before {
    color: #aaa!important;
  }


.qsqr-checkout-content-area{
    padding-left:10%;
    padding-right:10%;
}

/*
COLOR PICKER
*/

.wp-color-result-text{
    display: none!important;;
}


.sidebar {
    background-color:#E3F4FF;
}


.btn-primary, .btn-secondary {
    background-color: #2196F3;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

/* RSS Feeds Section Styles */
.rss-feeds-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: #ffffff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.rss-feeds-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.rss-feed-column {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rss-feed-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rss-feed-header {
    background: #2196F3;
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rss-feed-header i {
    font-size: 1.2rem;
}

.rss-feed-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.rss-feed-content {
    padding: 20px;
}

.rss-feed-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.rss-feed-item:hover {
    transform: translateY(-3px);
}

.rss-feed-item:last-child {
    margin-bottom: 0;
}

.rss-feed-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.rss-feed-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rss-feed-item:hover .rss-feed-image img {
    transform: scale(1.05);
}

.rss-feed-content-wrapper {
    padding: 15px;
    background: #ffffff;
}

.rss-feed-item h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #333333;
}

.rss-feed-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666666;
    margin-bottom: 12px;
}

.rss-feed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #666666;
}

.rss-feed-date {
    display: inline-block;
}

.rss-feed-read-more {
    color: #2196F3;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.rss-feed-read-more:hover {
    color: #156db6;
}

/* Responsive Design for RSS Feeds */
@media screen and (max-width: 1024px) {
    .rss-feeds-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .rss-feeds-container {
        grid-template-columns: 1fr;
    }
    
    .rss-feeds-section {
        padding: 20px 15px;
    }
    
    .rss-feed-header {
        padding: 12px 15px;
    }
    
    .rss-feed-content {
        padding: 15px;
    }
}

/* Loading State for RSS Feeds */
.rss-feed-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rss-feed-loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2196F3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Featured Content Section */
.featured-content-section {
    margin-bottom: 3rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.section-header {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    border-radius: 12px 12px 0 0;
}

.section-header i {
    font-size: 1.5rem;
    color: #2196F3;
    margin-right: 1rem;
}

.section-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Featured Grid */
.rss-feed-grid.featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2rem;
    margin: 0;
}

/* Category Grid */
.rss-feed-grid.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    margin: 0;
}

/* Feed Items */
.rss-feed-item {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rss-feed-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.rss-feed-image {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #f5f5f5;
}

.rss-feed-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.rss-feed-item:hover .rss-feed-image img {
    transform: scale(1.05);
}

.rss-feed-content-wrapper {
    padding: 1.5rem;
}

.rss-feed-item h3 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0 0 1rem;
    color: #1a1a1a;
}

.rss-feed-item h3 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 600;
}

.rss-feed-item h3 a:hover {
    color: #2196F3;
}

.rss-feed-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 1rem;
}

.rss-feed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #666666;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rss-feed-date {
    color: #666666;
}

.rss-feed-read-more {
    color: #2196F3;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: rgba(33, 150, 243, 0.1);
}

.rss-feed-read-more:hover {
    color: #1976D2;
    background: rgba(33, 150, 243, 0.15);
}

/* Categories Grid */
.categories-grid {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.category-section {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.category-section:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .rss-feed-grid.featured-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 1rem;
    }
    
    .rss-feed-grid.category-grid {
        padding: 1rem;
    }
    
    .section-header {
        padding: 1rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .rss-feed-content-wrapper {
        padding: 1rem;
    }
    
    .rss-feed-item h3 {
        font-size: 1rem;
    }
    
    .rss-feed-excerpt {
        font-size: 0.9rem;
    }
}

.rss-feed-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 1rem;
}

.rss-feed-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 8px;
}

.rss-feed-content p {
    margin-bottom: 1rem;
}

.rss-feed-content a {
    color: #2196F3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rss-feed-content a:hover {
    color: #1976D2;
    text-decoration: underline;
}

.rss-feed-content ul, 
.rss-feed-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.rss-feed-content li {
    margin-bottom: 0.5rem;
}

.rss-feed-content blockquote {
    border-left: 4px solid #2196F3;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: rgba(33, 150, 243, 0.05);
    font-style: italic;
}

.rss-feed-content pre {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.rss-feed-content code {
    font-family: monospace;
    background: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* Responsive adjustments for content */
@media (max-width: 768px) {
    .rss-feed-content {
        font-size: 0.9rem;
    }
    
    .rss-feed-content img {
        margin: 0.75rem 0;
    }
    
    .rss-feed-content p {
        margin-bottom: 0.75rem;
    }
}