/* category menu wrapper contains the actual OpenCart category #menu container. The wrapper is full width so having 
  a background colour will determine the overall appearance of the catalog menu  

The background colour can also be used to create a contrast 'border'*/

/* Set the margins top and bottom in the catalog #menu itself which will make the category_menu_wrapper 
deeper, or less deep, on the display */

/* COLOURS 
menu bar:       #424A56;
Theme buttons:  #424A56;

*/

/* $data['theme_modern_classic_intro_bg_colour']*/













/*:root {


  
} */



.search{

  /* background-color: var(--mc_search_bg) !important;*/
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(200, 200, 200, 0.1)), var(--mc_search_bg)!important;
  color: var(--mc_search_color);
  list-style-type: none;
  width: 400px !important;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  border-color: var(--mc_search_bg);
  border: 1px solid none;
  box-shadow: 2px 2px 5px 1px #eeeeee;
  border-radius: 0px !important;


}



.btn-primary{
  /* background-color: #424A56 !important; */
  background-color: var(--mc_btn_primary) !important;
}

.list-group{
  /*background-color: #424A56 !important;*/
  /*visibility:   hidden; */

}

/* .list-group is a bootstrap class, not  OpenCart

We apply it here so that the active buttons in the Category module displayed in product/category
*/
.list-group {
  /*  --bs-list-group-color: var(--bs-body-color); */ /* This is white text , you can change the default here */
  /*  --bs-list-group-bg: var(--bs-body-bg); */ /* This is white, you can change the default here */

  /* --bs-list-group-action-active-bg: #424A56;  dark grey matching the menu bar */

  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: var(--mc_btn_primary); /* active "button" dark grey matching the menu bar and #compare-total */
  --bs-list-group-active-border-color: var(--mc_btn_primary);

}
#button-cart {
  background-color: var(--mc_btn_primary);
}


#form-contact{
  margin-top: -50px;
}

/* adjust the contact up because of changes made */
#content{
  margin-top: 10px;
}

#compare-total{
  background-color: var(--mc_btn_primary);
}


.category_menu_wrapper {
  padding-top: 1px;
  /* background-color: #424A56;*/
  background-color: transparent;
  background-image: none;
  border-bottom: 1px #14617E;
  /* padding-bottom: -30px; */
  /* margin-top: 188px; */
  padding-top: 0px;
  padding-bottom: 0px;
  /* margin-bottom: -50px;*/

}

.no_menu_wrapper {
  /*  padding-top: 1px;
   background-color: green;
   background-image: none;
   border: none;
  margin-top: 184px;
   margin-bottom: -155px; 
   
   min-height: 80px; */



  visibility:hidden; /* it is just a spacer */

}

/* #menu  ( i.e. use these setting to override the default category menu settings in OpenCart.
  These settings do not apply to the navbar.
  The back-ground colour is required and must match the background colour of the menu wrapper.
use the background-image for a gradient colour
*/
#menu {

  /*  background-color: #424A56; */
  background-color: transparent;
  /* background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); */
  background-image: linear-gradient(to bottom, var(--mc_category_gradT), var(--mc_category_gradB));
  background-repeat: repeat-x;
  border: none;
  border-color: none;
  min-height: 60px;
  border-radius: 0px;
  font-size: 10pt;


}
/* The margin top and bottom here determines how deep the menu bar is, 
    by affecting the menu-wrapper
    If you don't change the colour, it will be the default opencart blue'
*/
#menu.navbar {

  margin-top: 3px;
  margin-bottom: 2px;
  padding-bottom:8px;


}


#menu .dropdown-menu {
  padding-bottom: 0;
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}
#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}

#menu.navbar > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-inner a {
  min-width: 160px;
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #333333;
  font-size: 12px;
}
#menu .see-all {
  display: block;
  margin-top: 0.5em;
  border-top: 1px solid #DDD;
  padding: 3px 90px;
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: transparent;
  background-image: transparent;
  background-repeat: repeat-x;
}
#menu #category {

  float: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
  text-shadow: none;


}
#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}
#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: none;
  padding: 8px 10px 0px 10px;
  min-height: 15px;
  background-color: transparent;
}
#menu .navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);

}

.nav-item a {
  color: #444444;

}

.nav-item   a:hover {
  color: #666666;
}

.product-thumb a {
  color: #444444;
}

.product-thumb   a:hover {
  color: #666666;
}

/* product page display */
.img-thumbnail{
  border-radius: 0px;

}


/* Theme navbar settings */
navbar-classic .navbar-brand {
  color: #fff;

}

.navbar-classic .navbar-brand:hover, .navbar-classic .navbar-brand:focus {
  color: #fff;


}
.navbar-classic .navbar-nav .nav-link {
  color: rgba(92, 92, 92, 0.90);
  text-transform: uppercase;
  font-size: 10pt;
}
.navbar-classic .navbar-nav .nav-link:hover, .navbar-classic .navbar-nav .nav-link:focus {
  color: rgba(92, 92, 92, 0.75);
}
.navbar-classic .navbar-nav .nav-link.disabled {
  color: rgba(92, 92, 92, 0.25);
}
.navbar-classic .navbar-nav .show > .nav-link, .navbar-classic .navbar-nav .nav-link.active {
  color: #fff;

}
.navbar-classic .navbar-toggler {
  color: rgba(92, 92, 92, 0.55);
  border-color: rgba(92, 92, 92, 0.1);
}
.navbar-classic .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2892, 92, 92, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-classic .navbar-text {
  color: rgba(92, 92, 92, 0.55);
}
.navbar-classic .navbar-text a, .navbar-classic .navbar-text a:hover, .navbar-classic .navbar-text a:focus {
  color: #fff;
}

.btn-register{
  /* firefox fix */
  text-transform: uppercase;
  font-size: 10pt;
}

header{
  margin-bottom: 142px; /* 114? reset the header to the bottom of the navbar */

}
/* #classic refers to the header top menu (i.e. the navbar proper) */
#classic {
  /* background-color: var(--headbg) !important; */

  background-color: var(--headbg) !important;

  padding:5px 20px 5px 25px;
  color: var(--headfont);
  min-height: 80px;
  border-bottom: 1px solid #ededed;

  /*margin-bottom: 135px;*/
}

/* The OpenCart Footer doesn't look right.
  It needs a bit more padding at the bottom, and the containing div is off centre
*/

footer {

  padding-bottom: 21px;
  padding-left: 30px; /* this proves the point it is off centre but this doesn't solve the problem'*/
  background-color: #f7f8f9;
  border-color: #f7f8f9;



}

/* The theme doesn't use breadcrumbs or the alert div at this stage' */

.breadcrumb{
  visibility: hidden;
  /* display: none; */

}


#alert{
  display: none;
}

#common-maintenance h2{
  color: #229ac8;
  margin-top: 120px;

}

.intro_top {
  color: var(--introfont);
  background-color: var(--introbg);
  border-top: 1px solid #ededed;
  margin-top: -10px;
}

.intro_top_bg{

  color: var(--introfont);
  background:linear-gradient(0deg, rgba(68, 68, 68, 0.1), rgba(68, 68, 68, 0.1)), var(--introBgImg);
  /* background:linear-gradient(0deg, rgba(68, 68, 68, 0.3), rgba(68, 68, 68, 0.3)), var(--introBgImg);*/
  background-size: cover;
  /* background-image:  var(--introBgImg);*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 42px;
  /*  padding-top: 100px;
   padding-bottom: 100px;*/
  /* this helps preventing the image being downloadable, needed on firefox but not safari */
  pointer-events: none;
}

.intro_top_bg > .py-5 > h1 {
  color: var(--introfont);
}


.intro_top_grad > .py-5 > h1{
  color:var(--introfont);
}
.intro_top_grad{
  color: var(--introfont);
  /* background-color: red; */
  background-size: cover;
  background-image: linear-gradient(to bottom, var(--introgradT), var(--introgradB));
  margin-top: 85px;
}


/*contact form */

.mc-map{

  /* at this time, this requires a hard coded div */
  display: var(--mc_contact_map);
  background-color: graytext;
  margin-top: -50px;
  margin-bottom: 50px;
  height: 300px;
  overflow: hidden;
  /* this helps preventing the image being downloadable, needed on firefox but not safari */
  /* pointer-events: none; */
}

.mc_contact_top {
  color: var(--contact_font);
  background-color: var(--contactbg);
  border-top: 1px solid #ededed;
  margin-top: -15px;
}

.mc_contact_top_bg{

  color: var(--contactfont);
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--contactBgImg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: -15px;
  pointer-events: none;
}


.mc_contact_top > .py-5 > h1{
  color: var(--contact_font);

}


.mc_contact_top_grad{
  color: var(--contact_font);
  background-size: cover;
  background-image: linear-gradient(to bottom, var(--contactgradT), var(--contactgradB));
  margin-top: -15px;
}

.mc_contact_top_grad > .py-5 > h1 {
  color: var(--contact_font);
}

/* .mc_contact_top_grad > p {
  color: var(--contact_font);
} */

.mc_contact_top_grad .btn {
  /*  width: 33.33%;*/
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: white; /*var(--bs-tertiary-bg);*/
  color: var(--bs-gray-600);
  border-color: black;  /*var(--bs-gray-600);*/
  line-height: 38px;
  text-align: center;
}
/*
.mc_contact_top_grad h1{
  color:white;
}
*/
footer {

  /* background-color: #303030;*/
  background-color: var(--footerbg) !important;
  color: var(--footerfont);
}

footer a {
  /* color: #ccc; */
  color: var(--link_a);
}
footer a:hover {
  color: var(--link_h);
}

#product-info, #information-information{
  margin-top: -50px;
}


/*********** @ media ***************/

@media only screen and (min-width: 1360px)  {
  #theme_logo  {
    display: block;
    width: 120px;
  }

  .category_menu_wrapper {
    margin-top: 140px;
    margin-bottom: -14px;
  }

  .no_menu_wrapper {
    margin-top: 196px;
  }

  .fixed-top{
    position:fixed;
  }

  /* #classic {
     border-bottom: none;
   } */

  header{
    margin-bottom: 114px;

  }

  .intro_top_grad {
    margin-top: -12px;
  }

  .intro_top_bg {
    margin-top: -12px;

  }

  .intro_top{
    margin-top: -12px;
  }

  .mc_contact_top{
    margin-top: -19px;
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-top: -19px;
    margin-bottom: -30px;
  }

  .mc_contact_top_bg{
    margin-top: -19px;
    margin-bottom: -30px;
  }

}

@media only screen and (min-width: 1280px) and (max-width: 1359px) {
  #theme_logo  {
    display: block;
    width: 100px;
  }

  .category_menu_wrapper {
    margin-top: 124px;
    margin-bottom: -130px;
  }

  .fixed-top{
    position:fixed;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  #common-maintenance h2{
    font-size: 36px;
    padding-top: 0px;
  }

  .intro_top_grad{
    margin-top: -8px;
    margin-bottom: -40px;
  }

  .intro_top{
    margin-top: -8px;
    margin-bottom: -40px;
  }

  .intro_top_bg{
    margin-top: -8px;
    margin-bottom: -40px;
  }

  header{
    margin-bottom: 85px;
  }

  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }
  .mc_contact_top_bg{
    margin-bottom: -30px;
  }

}

@media only screen and (min-width: 992px) and (max-width: 1279px){
  #theme_logo  {
    display: block;
    width: 100px;
  }

  .category_menu_wrapper {
    margin-top: 80px;
    margin-bottom: -84px;
  }

  .fixed-top{
    position:fixed;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  #common-maintenance h2{
    font-size: 30px;
    padding-top: 0px;
  }

  .intro_top_grad{
    margin-top: -10px;
  }

  .intro_top_bg{
    margin-top: -6px;
  }

  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }

  .mc_contact_top_bg{
    margin-bottom: -30px;
  }



  header{
    margin-bottom: 84px;
  }
}

@media only screen and (min-width: 960px) and (max-width: 991px) {
  #theme_logo  {
    display: block;
    width: 80px;
  }

  .category_menu_wrapper {
    margin-top: 152px;
    margin-bottom: -150px;
  }

  .fixed-top{
    position:fixed;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  #common-maintenance h2{
    font-size: 28px;
    padding-top: 0px;
  }

  #common-maintenance h2{
    font-size: 24px;
    padding-top: 0px;
  }

  .intro_top{
    margin-top: -10px;
    margin-bottom: -40px;
  }

  .intro_top_grad{
    margin-top: -10px;
    margin-bottom: -40px;
  }
  .intro_top_bg{
    margin-top: -10px;
    margin-bottom: -40px;
  }
  
  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }
  .mc_contact_top_bg{
    margin-bottom: -30px;
  }


  header{
    margin-bottom: 136px;
  }

  .search{
    width: 100% !important;
    padding: 0 0 0 0 !important;
    border: none;
    box-shadow: none;
    margin: 0px;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-color: transparent !important;
    background: transparent !important;
  }
}

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

  #theme_logo  {
    display: block;
    width: 75px;
  }

  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }

  #menu .dropdown-inner {
    flex-direction: row;
  }

  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -200px;
  }

  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -400px;
  }

  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 {
    left: -200px;
  }

  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -400px;
  }

  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -600px;
  }

  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }


  .fixed-top{
    position:absolute;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  #common-maintenance h2{
    font-size: 24px;
    padding-top: 0px;
  }

  .intro_top_grad{
    margin-top: 84px;
  }

  .category_menu_wrapper {
    margin-top: 214px;
    margin-bottom: -216px;
  }

  header{
    margin-bottom: 130px;
  }

  .intro_top{
    margin-top: -6px;
    margin-bottom: -40px;
  }

  .intro_top_grad{
    margin-top: -6px;
    margin-bottom: -40px;
  }
  .intro_top_bg{
    margin-top: -6px;
    margin-bottom: -40px;
  }

  
  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }

  .mc_contact_top_bg{
    margin-bottom: -30px;
  }


  .search{
    width: 100% !important;
    padding: 0 0 0 0 !important;
    border: none;
    box-shadow: none;
    margin: 0px;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-color: transparent !important;
    background: transparent !important;
  }
}

@media (min-width: 700px) and (max-width: 767px) {
  #menu {
    border-radius: 4px;
  }

  #menu div.dropdown-inner > ul .list-unstyled {
    display: block;
  }

  #menu div.dropdown-menu {
    margin-left: 0 !important;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  #menu .dropdown-inner {
    display: block;
  }

  #menu .dropdown-inner a {
    width: 100%;
    color: #fff;
  }

  #menu .dropdown-menu a:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  #menu .dropdown-menu ul li a :hover {
    background: rgba(0, 0, 0, 0.1);
  }

  #menu .see-all {
    margin-top: 0;
    border: none;
    border-radius: 0;
    color: #fff;
  }

  #theme_logo  {
    display: block;
    width: 70px;
  }

  .fixed-top{
    position:absolute;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }


  .intro_top{
    margin-top: -6px;
    margin-bottom: -40px;
  }

  .intro_top_grad{
    margin-top: -6px;
    margin-bottom: -40px;
  }
  .intro_top_bg{
    margin-top: -6px;
    margin-bottom: -40px;
  }

  .category_menu_wrapper {
    margin-top: 130px;
    margin-bottom: -130px;
  }

  header{
    margin-bottom: 124px;
  }
  
  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }
  .mc_contact_top_bg{
    margin-bottom: -30px;
  }
  

  .search{
    width: 100% !important;
    padding: 0 0 0 0 !important;
    border: none;
    box-shadow: none;
    margin: 0px;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-color: transparent !important;
    background: transparent !important;
  }
}

@media only screen and (min-width: 640px) and (max-width: 699px) {
  #theme_logo  {
    display: block;
    width: 70px;
  }

  .category_menu_wrapper {
    margin-top: 130px;
    margin-bottom: -130px;
  }

  .fixed-top{
    position:absolute;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  .intro_top{
    margin-top: -12px;
    margin-bottom: -40px;
  }
  .intro_top_grad{
    margin-top: -12px;
    margin-bottom: -40px;
  }
  .intro_top_bg{
    margin-top: -12px;
    margin-bottom: -40px;
  }

  
  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }

  .mc_contact_top_bg{
    margin-bottom: -30px;
  }

  
  .category_menu_wrapper {
    margin-top: 130px;
    margin-bottom: -130px;
  }

  header{
    margin-bottom: 130px;
  }

  .search{
    width: 100% !important;
    padding: 0 0 0 0 !important;
    border: none;
    box-shadow: none;
    margin: 0px;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-color: transparent !important;
    background: transparent !important;
  }

}

@media (min-width: 500px) and (max-width: 639px){

  #theme_logo  {
    display: block;
    width: 70px;
  }

  #product-info, #information-information{
    margin-top: -40px;
  }

  .search{
    width: 100% !important;
    padding: 0 0 0 0 !important;
    border: none;
    box-shadow: none;
    margin: 0px;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-color: transparent !important;
  }

  header{
    margin-bottom: 126px;
  }

  .intro_top{
    margin-top: -8px;
    margin-bottom: -40px;
  }
  .intro_top_grad{
    margin-top: -8px;
    margin-bottom: -40px;
  }
  .intro_top_bg{
    margin-top: -8px;
    margin-bottom: -40px;
  }

  
  .mc_contact_top{
    margin-bottom: -30px;
  }

  .mc_contact_top_grad{
    margin-bottom: -30px;
  }

  .mc_contact_top_bg{
    margin-bottom: -30px;
  }


}