@media only screen and (max-width: 1024px) {
  
  .woocommerce-products-wizard .thumbnail>img {
    display: none;
  }
  
  .full-width-main-layout .container {
    width: 100% !important;
  }

}

.wp-block-button__link{
    border-radius: 0px !important;
    padding: 5px 10px !important; 
    font-size: 12px !important;
    text-decoration: none !important;
}

.woocommerce-products-wizard-form-item-description {
    padding-left: 20px;
    min-height: auto !important;
    overflow-y: auto;
}

.woocommerce-products-wizard .btn-primary {
    background-color: #2a2a2a;
    border-color: #2a2a2a;
}

.woocommerce-products-wizard .btn-primary:focus,
.woocommerce-products-wizard .btn-primary:hover {
    background-color: #4BA79D !important;
    border-color: #4BA79D !important;
    outline: none !important;
}

.woocommerce-products-wizard .btn-default.focus, .woocommerce-products-wizard .btn-default:focus {
    outline: none !important;
}

.open>.woocommerce-products-wizard .btn-primary.dropdown-toggle, 
.woocommerce-products-wizard .btn-primary.active, 
.woocommerce-products-wizard .btn-primary:active, 
.woocommerce-products-wizard .btn-primary:hover {
    background-color: #4BA79D;
    border-color: #4BA79D;
}


/***************************/
/* Quantity number box css */
/***************************/

/*.woocommerce .quantity input[type=number]{
    margin: 5px;
    width: 50px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.cu-pointer {
    cursor: pointer;
}
*/

/***********************************************/
/*  Patrick started his css media here =D      */
/* Remove it if happen to be not useful at all */
/***********************************************/

/*********************************************************************/
/* Global Variables : These css is set for all of the customization  */
/*********************************************************************/

/* Increase the font weight of the sidebar widget title */
.sidebar-box .widget-title{
  font-weight: 700 !important;
}

/* Add extra space after review cart section */
.woocommerce-cart-form{
  margin-bottom: 5%;
}

/* hide the extra plus and minus button  (the original but extra)*/
.woocommerce .quantity.buttons_added .minus, .woocommerce .quantity.buttons_added .plus{
  display: none;
}

/* Modify plus and minus style */
.qib-button:not(#qib_id){
  background-color: #F0EFEF !important;
  border-color: #F0EFEF !important;
  font-weight: 400;
}

/* disable inline-block for neat design and set leftside padding with 12px */
.qib-container:not(#qib_id) {
  display: block !important;
  margin-left: .5vw;
}

/* change the border color of the quantity */
.qib-container .quantity input.qty:not(#qib_id){
  border-color: #F0EFEF !important;
}

/* Sets all the letter spacing title of the product style */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  letter-spacing: 3px;
  font-family: Calibri;
}

/* Changing all the grid box mouse hover */
#SecureFacilities, #SmartHome, #Transport, #School, #Care, #Commercial, #Residential, #Industrial, #AboutUs{
  cursor: pointer;
}


/* setting the content of the marketing steam */
.vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
  height: 40vh;
  width: 35vw;
  background-color: rgba(0,0,0,0) !important;
  padding-left: 3%;
  font-family: Open Sans;
  font-size: 25px;
  font-weight: 600;
}

/* Setting the text color to be white */
.vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-grey.vc_btn3-style-flat:hover{
  color: white !important;
}

/* Changes the padding left and right to zero */
.vc_gitem_row .vc_gitem-col{
  padding-left: 0;
  padding-right: 0;
}

/* Align the text to left (default is on the center) */
.vc_general.vc_btn3{
  text-align: left;
}


/* Set the design align at the center of the container between "proceed to checkout" button and "Continue to Shop" */
.woocommerce-cart .wc-proceed-to-checkout{
  text-align:center;
}

/* Setting design for "---or---" section*/
.custom_line_design:after, .custom_line_design:before{
  background-color: #d3d3d3;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
  
}

/* Design the layout of the "--or--" */
.custom_line_design {
  overflow: hidden;
  color: #d3d3d3;
}

/* Setting the leftside of the line */
.custom_line_design:before {
  right:0.5em;
  margin-left: -50%;
}

/* Setting the rightside of the line */
.custom_line_design:after{
  left:0.5em;
  margin-right: -50%;
}

/* Hides the word "DESCRIPTION" under the item description */
.woocommerce-tabs h2{
  display: none;
}

/* Hide away the purchase notification */
.woocommerce-notices-wrapper{
  display: none;
}

/* Setting single product display quantity field alignment to most left */
.summary.entry-summary>.cart>.qib-container:not(#qib_id){
  margin-left: 0px;
}

/* Setting the font-color for sidebar category */
.menu>.menu-item>a{
  /*color: #000000 !important;*/
  line-height: 30px;
  font-family: Open Sans;
}

/************************************CSS for the new product layout**************************/
/* remove the width set by container in product page */
/*.container{
  width: auto;
}*/

/* over srite the padding button*/
/*.woocommerce ul.products li.product .button{
  margin: auto 0;
}

/* Overwrite and balance the height of the product names */
.product-details.match-height-content {
    height: 50px !important;
}

/* Setting the side bar design for consistency */
.ve-cat-widget-div ul.ve-cat-widget-listing li a{
  line-height: 30px;
  font-size: 14px;
  font-family: Open Sans;
}

/* Remove the sidebar category line */
.ve-cat-widget-div ul.ve-cat-widget-listing li{
  border-bottom: none !important;
}


/* Setting the quantity alignment into center */
.woocommerce table.cart td.product-quantity:not(#qib_id) {
  display: flex;
  justify-content: center;
  padding-top: 3vh;
}

/* Modify the width of the quantity field */
.woocommerce table.cart td.product-quantity .qib-container:not(#qib_id){
  display: flex !important;
  margin-left: unset;
}

/* Hide away the word "Cart Total" under cart page */
.cart_totals>h2{
  display: none;
}

/* Setting both button alignment for cart button to full width */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  width: -webkit-fill-available;
}

/* Hide the last row of the table under cart page */
.actions{
  display: none !important;
}

/* Setting up the button background color and text color for search */
.woocommerce-product-search input[type="submit"], .woocommerce-product-search button{
  background-color: black !important;
  color: white !important;
  font-size: 12px;
}

/* Hide all the total value within woocommerce table */
.product-total{
  display: none;
}

/* Set related product quantity container margin to suite the desktop design */
div.cart-collaterals>.cross-sells>ul>li>.product-inner>.qib-container:not(#qib_id){
  margin-left: 3vw;
} 

/****************************************/
/* Global setting with media query size */
/****************************************/

/*****************************************************************/
/*            This is for phone sized layout.                    */
/*****************************************************************/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
  h1 {
    font-size: 30px;
  }

  h2{
    font-size: 18px;
  }

  h3{
    font-size: 16px;
  }
  p{
    font-size: 13px;
  }

  button{
    font-size:14px ;
  }

  /* Set the quantity field to full width for alignment purposes */
  .woocommerce .quantity input[type=number]{
    width: 100%;
  }
  
  /* Set mobile version button into full width */
  .woocommerce ul.products li.product .button{
    margin:0;
    width: 100%;
  }
  
  /* CSS on reducing the width of the product display */
  .woocommerce .products .product{
    width: 50%;
  }
    
  /* Setting different custom font for market stream button to suit the design */
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 10px !important;
    font-weight: 400;
  }
  
  /* Setting row to column in mobile version */
  .qib-container:not(#qib-id){
    width: 100%;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5%;
    height: 28px;
    margin-left: 0!important;
    border-style: solid;
    border-width: 1px 0;
    border-color: #F0EFEF;
  }
  
  /* setting both height for the plus and minus button on mobile */
  .qib-button:not(#qib_id){
    height: 28px !important;
    width: 40px !important;
  }
  
  /* Change the lenght of the quantity box in mobile version */
  .qib-container .quantity input.qty:not(#qib_id){
    width: 100% !important;
    height: 28px !important;
    border-style: none !important;
  }
  
  /* Setting up product title for mobile product page */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 12px !important;
  }
  
  /* Set the button to fullwidth in single product display */
  form.cart .qib-container + button[type='submit']:not(#qib_id){
    margin-left: 0 !important;
    width: -webkit-fill-available;
  }
  
    /* Setting bottom padding to seperate the dropdown list and the search bar */
  .dgwt-wcas-search-form{
    padding: 0 0 3% 0 !important;
  }
  
  /* Setting the size of the dropdown list field */
  .pcd-selector-box select.pcd-select{
    padding: 9px;
    margin: 5px 0 8px 0;
  }
  
  /* Changing the Search button style under the dropdown field */
  .block-content > button{
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    width: 100%;
  }
  
  /* Setting the field size to full width */
  .chosen-container{
    min-width: 100%;
  }
  
  /* Setting the reset search button link to the website */
  .woof_reset_search_form{
    width: 100%;
  }
  
  /* Hides away the side bar in mobile mod */
  body.content-left-sidebar #content-wrap #sidebar, .content-left-sidebar #sidebar{
    display: none;
  }
  
  /* Setting name for the product name */
  .product-details.match-height-content{
    height: 5vh !important;
  }
  
  /* Setting the width of the quantity header to suite the table design under cart page */
  tr>th.product-quantity{
    width: 150px;
    text-align: center;
  }
  
  /* Display breadcrumb in mobile*/
  header >div> .hidden-phone{
    display: block !important;
  }
  
}

/************************************************************************************/
/*   This is phone size layout(landscape) and some tablet layout(portrait)          */
/************************************************************************************/

@media only screen and (max-device-width: 900px) and (min-device-width: 481px){
  
  /* set product display width to 1/3 of the size for each product */
  .woocommerce .products .product{
    width: calc(100%/3);
  }
  
  /* Setting the height of the product name to avoid the name overlap with the button */
  .product-details.match-height-content{
    height: 45px !important;
  }
  
  /* Setting the left side margin for more spaces on mobile landscape mod */
  .qib-container:not(#qib_id) {
    margin-left: 2.5vw;
  }  
  
  /* Hides away from phone landscape mod */
  body.content-left-sidebar #content-wrap #sidebar, .content-left-sidebar #sidebar {
    display: none;
  }
  
  /* Set content to full width */
  body.has-sidebar .content-area{
    max-width: 100% !important;
  }
  
  /* Setting back the padding right og the whole product container to none */
  #primary, body.has-composer.post-type-archive-product #primary{
    padding-right: 0;
  }
  
  /******************************/
  /* Everything about cart page */
  /******************************/
  
  /* Setting the quantity alignment into center */
  .woocommerce table.cart td.product-quantity:not(#qib_id) {
    display: table-cell;
    /*justify-content: center;*/
    padding-top: 0;
  }
  
  /* Setting the word quantity alignemnt to center */
  tr>th.product-quantity{
    text-align:center;
  }
  
  /* Increase the width of the product name section in the table under cart page */
  tr>th.product-name, tr>td.product-name{
    width: 25%;
  }
  
  /* Incraese the width of the quantity field and quantity label in the table under cart page */
  tr>th.product-quantity, tr>th.product-quantity{
    width: 40%;
  }
  
  /***************************************************************************************************/
  /* This is the section where the image will be shown under tablet portrait version of the cart page*/
  /***************************************************************************************************/
  .woocommerce #content table.cart .product-thumbnail,
  .woocommerce table.cart .product-thumbnail,
  .woocommerce-page #content table.cart .product-thumbnail,
  .woocommerce-page table.cart .product-thumbnail {
    display: block !important;
    width: 200px;
  }
  .woocommerce #content table.cart .product-thumbnail img,
  .woocommerce table.cart .product-thumbnail img,
  .woocommerce-page #content table.cart .product-thumbnail img,
  .woocommerce-page table.cart .product-thumbnail img {
    max-width: 25% !important;
    float: none;
    display: table;
    margin: 0 auto;
  }
  
  /***************************************************************************************************/
  /* End of the section where the image will be shown under tablet portrait version of the cart page */
  /***************************************************************************************************/
  
  /* Display breadcrumb in mobile*/
  .hidden-phone{
    display: block !important;
  }
  
  /* Hides away the side bar in mobile and tablet mod */
  body.content-left-sidebar #content-wrap #sidebar, .content-left-sidebar #sidebar{
    display: none;
  }
  
  /* Set content to full width */
  body.has-sidebar .content-area{
    max-width: 100% !important;
  }
  
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 10px ;
  }
}

/********************************************************************************************/
/*                           This is for ipad layout. (portrait)                            */
/********************************************************************************************/

@media only screen and (min-device-width : 900px) and (max-device-width : 1024px) and (orientation : portrait) {
  h1{
    font-size: 20px !important;
  }
  h2{
    font-size: 18px !important;
  }
  h3{
    font-size: 16px !important;
  }
  p{
    font-size: 12px;
    margin: 0px 0 14px !important;
  }
  
  /* some changes for the product page sidebar */
  .dgwt-wcas-search-wrapp, .dgwt-wcas-search-wrapp{
    min-width: 150px !important;
  }
  
  .dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier {
    max-width: 10px !important;
  }
  
  /* Change the size of the quantity text box area */
  .woocommerce .quantity input[type=number]{
    width: 35px;
  }
  
  /* Changes for the name of the products*/
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 10px !important;
    height: 30px;
  }
  
  /* Counter number size */
  #wpsm_counter_b_row_11499 .wpsm_counterbox .wpsm_number{
    font-size: 60px !important;
  }

  /* Change the display style to Ipad to column and customize the height of the field */
  .qib-container:not(#qib-id){
    width: 100%;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5%;
    height: 25px;
    margin-left: 0 !important;
    border-style: solid;
    border-width: 1px 0;
    border-color: #F0EFEF;
  }
  
  .qib-button:not(#qib_id){
    height: 25px !important;
    width: 45px !important;
  }
  
  /* Change the lenght of the quantity box */
  .qib-container .quantity input.qty:not(#qib_id){
    width: 100% !important;
    height: 25px !important;
    border-style: none !important;
  }
  
  /* Change the "ADD" button to fullwidth size */
  .woocommerce ul.products li.product .button{
    margin:0;
    width: 100%;
    height: 25px;
    font-size: 10px;
  }
  
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-grey.vc_btn3-style-flat{
    font-size: 16px !important;
    font-weight: 600;
  }
  
  .vc_btn3.vc_btn3-color-default, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 15px;
  }
  
  /* Setting font-size at the sidebar menu on tablet portrait mod */
  .menu-item-type-post_type>a{
    font-size: 13px;
  }
  
  /* Customize the "ADD" button under product page to be more responsive tablet portrait mod */
  .woocommerce .button {
    padding: 3px 12px !important;
    font-size: 75% !important;
  }
  
  /* Set the button to fullwidth in single product display */
  form.cart .qib-container + button[type='submit']:not(#qib_id){
    margin-left: 0 !important;
    width: -webkit-fill-available;
  }
  
  /*.wpsm_col-sm-6{
    width: 50% !important;
  }*/
  
  /* Setting the height of the add to cart button in portrait tablet mod */
  .add_to_cart_button:not(#qib_id):not(_){
    height: 25px !important;
    line-height: 20px !important;
  }
  
  /* Setting the font size title in tablet portrait mod */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 10px !important;
  }
  
  /* Setting the height of the search field and the font size of the "search for product" */
  .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,  .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    height: 30px !important;
    font-size: 12px !important;
  }
  
  /* Align the arrow of next to search button in the middle */
  .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:before{
    top: 8px !important;
  }
  
  /* Align and set the loading and close icon to be smaller size */
  .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader){
    background-size: auto 10px !important;
  }
  
  /* Set smaller size sidebar title in tablet portrait mod */
  #sidebar .widget-title{
    font-size: 14px !important;
  }
  
  /* Setting font-size for the "out of stock" label */
  body.wpex-window-loaded .outofstock-badge{
    font-size: 10px;
  }
  
  /* Overwrite and balance the height of the product names for portrait tablet */
  .product-details.match-height-content {
    height: 30px !important;
  }
  
  /* Set fontsize for tablet design */
  .ve-cat-widget-div ul.ve-cat-widget-listing li a{
    font-size: 12px !important;
  }
  
  /* Set fontsize for tablet design */
  .menu>.menu-item>a{
    font-size: 12px !important;
  }
  
  /* Setting the font-size for the search discription and the sidebar font-size in tablet mod */
  .woocommerce-product-search input[type="search"]{
    font-size: 12px !important;
  }
  
  /* Setting grid box font-size to responsive */
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 10px;
  }
  
}
/***********************************************************************************/
/*                     When Ipad in it's landscape version                         */
/***********************************************************************************/

/* The reson behind to have this design layout to fix the portrait version of the buttons and quantity */

@media only screen and (min-device-width : 900px) and (max-device-height : 1024px) and (orientation : landscape){
  
  /* Setting the height of the button in rfq (smart city, secure facilities and school system) to be aligned with the design */
  .woocommerce-products-wizard-form-item-quantity>.qib-container>.qib-button:not(#qib-id){
    height: 33px !important;
  }
  
  /* Setting the height of the plus and minus button on tablet landscape mod */
  .qib-button:not(#qib_id){
    height: 25px !important;
    width: 80px !important;
  }
  
  /* Setting the width of the input number field to full width */
  .woocommerce .quantity input[type=number]{
    width: 100%;
    height: 25px !important;
  }
  
  /* Set Ipad view for the quantity field (quantity +/-) and the add button to column view */
  .qib-container:not(#qib-id){
    width: 100%;
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 3%;
    margin-left: 0 !important;
    border-style: solid;
    border-width: 1px 0;
    border-color: #F0EFEF;
  }
  
  /* resizing the quantity of the number box under product page */
  .qib-container .quantity input.qty:not(#qib_id){
    width: 100% !important;
    border-style: none !important;
  }
  
  /* Change the "ADD" button to fullwidth size */
  .woocommerce ul.products li.product .button{
    margin:0;
    width: 100%;
  }
  
  /* Setting font-size at the sidebar menu on tablet landscape mod */
  .menu-item-type-post_type>a{
    font-size: 13px;
  }
  
  /* Customize the "ADD" button under product page to be more responsive in tablet landscape mod */
  .woocommerce .button {
    padding: 3px 12px !important;
    font-size: 75% !important;
  }
  
  /* Set the button to fullwidth in single product display */
  form.cart .qib-container + button[type='submit']:not(#qib_id){
    margin-left: 0 !important;
    width: -webkit-fill-available;
  }
  
  /* Setting the height of the add to cart button in landscape tablet mod */
  .add_to_cart_button:not(#qib_id):not(_){
    height: 25px !important;
    line-height: 20px !important;
  }
  
  /* Setting the font size title in tablet landscape mod */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 12px !important;
  }
  
  /* Setting the height of the search field and the font size of the "search for product" */
  .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,  .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    height: 30px !important;
    font-size: 12px !important;
  }
  
  /* Align the arrow of next to search button in the middle */
  .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:before{
    top: 8px !important;
  }
  
  /* Align and set the loading and close icon to be smaller size */
  .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader){
    background-size: auto 10px !important;
  }
  
  /* Set smaller size sidebar title in tablet landscape mod */
  #sidebar .widget-title{
    font-size: 15px !important;
  }
  
  /* Setting font-size for the "out of stock" label */
  body.wpex-window-loaded .outofstock-badge{
    font-size: 10px;
  }
  
  /* Set fontsize for tablet design */
  .ve-cat-widget-div ul.ve-cat-widget-listing li a{
    font-size: 12px !important;
  }
  
  /* Modify the width of the quantity field */
  .woocommerce table.cart td.product-quantity .qib-container:not(#qib_id){
    width: 60px !important;
  }
  
  
  /* Setting the height of the product name in tablet landscape */
  .product-details.match-height-content{
    height: 40px !important;
  }
  
  /* Set fontsize for tablet design */
  .menu>.menu-item>a{
    font-size: 12px !important;
  }
  
  /* Setting the font-size for the search discription and the sidebar font-size in tablet mod */
  .woocommerce-product-search input[type="search"]{
    font-size: 12px !important;
  }
  
  /* Setting grid responsive for tablet landscape */
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 16px;
  }
  
}

/* Some rules to set for device resolution more than 1024px */
@media only screen and (min-device-width : 1024px){
  .woocommerce table.cart td.product-quantity .qib-container:not(#qib_id){
    width: 50% !important;
  }
  
  .product-quantity{
    text-align: center;
  }
  
  .vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-default.vc_btn3-style-flat{
    font-size: 22px;
  }
}