button:hover {outline: none;}
button:focus {outline: none;}
button {outline: none;}
button {transition: 0.3s;}

.button190 {min-width: 190px;}

/*<<<<<<<<<< MENU BUTTONS >>>>>>>>>>*/
.menubutton {
  font-size: 12pt;
  padding: 15px 0px;
  line-height: 20px;
  color: #9FC298;
}
.menubutton:hover {
  background-color: #FBE9E3;
  color: #172B4C;
}
.menubutton2 {
  font-size: 12pt;
  padding: 15px 0px;
  line-height: 20px;
  color: #9FC298;
}
.menubutton2:hover {
  background-color: #FBE9E3;
  color: #172B4C;
}
@media screen and (max-width: 1000px) {
  .menubutton2 {
    font-size: 12pt;
    padding: 10px 0px;
  }
}
/*<<<<<<<<<< BACK TO TOP >>>>>>>>>>*/
#backtotop {
  width:100%; 
  height: 40px; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  font-size: 12pt;
  color: #FFFFFF;
  background-color: rgb(0, 17, 34);
  border: none;
  border-bottom: solid 1px #1E90FF;
  transition: 0.3s;
}

#backtotop:hover {
  color: #001122;
  background-color: #1E90FF;
}
#bttBtn4 {
  color: #F0F9BB;
  background-color: #000000;
  position: fixed;
  right: 0px;
  bottom: 0px;
  display: none;
  z-index: 100;
  transition: 0.3s;
}
#bttBtn4:hover {
  color: #000000;
  background-color: #F0F9BB;
}
#bttBtn5 {
  color: #FBE9E3;
  background-color: #6F6F6E;
  position: fixed;
  right: 0px;
  bottom: 0px;
  display: none;
  z-index: 100;
  transition: 0.3s;
}
#bttBtn5:hover {
  color: #6F6F6E;
  background-color: #FBE9E3;
}

/*<<<<<<<<<<  HAMBURGER  >>>>>>>>>>*/
.mobilenavbtn {
  font-size: 30pt;
  font-weight: bold;
}
#mobilenavbtn {
  position: absolute;
  right: 15px;
  color: #FFFFFF;
  font-size: 30pt;
  padding: 0px;
  margin-top: -10px;
  margin-right: 15px;
}
@media screen and (max-width: 350px) {
  .mobilenavbutton {
    margin-top: -100px;
  }
}

/*<<<<<<<<<< HOME BUTTON STYLING >>>>>>>>>>*/
.homebutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #9FC298;
  border: 1px solid #9FC298;
  border-radius: 24px;
  min-width: 125px;
  transition: 0.3s;
}
.homebutt:hover {
  color: #6F6F6E; 
  background-color: #FBE9E3;
  border: 1px solid #9FC298;
}
.homebutt.active {
  color: #6F6F6E; 
  background-color: #F4C7BB;;
  border: 1px solid #9FC298;
}
.homebutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 24px;
  min-width: 125px;
  transition: 0.3s;
}
.homebutt2:hover {
  color: #000000; 
  background-color: #F59C00;
  border: 1px solid #F59C00;
}
.homebutt2.active {
  color: #FFFFFF; 
  background-color: #000000;
  border: 1px solid #000000;
}
.menubutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #9FC298;
  border: 1px solid #9FC298;
  transition: 0.3s;
}
.menubutt2:hover {
  color: #6F6F6E; 
  background-color: #FBE9E3;
  border: 1px solid #9FC298;
}
.menubutt2.active {
  color: #6F6F6E; 
  background-color: #F4C7BB;;
  border: 1px solid #9FC298;
}
.tablebutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #9FC298;
  border: 1px solid #9FC298;
  border-top: 1px solid #FBE9E3;
  border-radius: 0px;
  transition: 0.3s;
  width: 100%;
}
.tablebutt:hover {
  color: #6F6F6E; 
  background-color: #FBE9E3;
  border: 1px solid #9FC298;
}
.tablebutt.active {
  color: #9FC298; 
  background-color: #FBE9E3;;
  border: 1px solid #9FC298;
}
.tablebutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #9FC298;
  border: 1px solid #9FC298;
  /*border-top: 1px solid #FBE9E3;*/
  border-radius: 0px;
  transition: 0.3s;
  width: 100%;
}
.tablebutt2:hover {
  color: #6F6F6E; 
  background-color: #FBE9E3;
  border: 1px solid #9FC298;
}
.tablebutt2.active {
  color: #9FC298; 
  background-color: #FBE9E3;;
  border: 1px solid #9FC298;
}
.cookiebutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 5px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFFFF;
  background-color: #9FC298;
  border: 1px solid #9FC298;
  border-radius: 24px;
  transition: 0.3s;
}
.cookiebutt:hover {
  color: #6F6F6E; 
  background-color: #FBE9E3;
  border: 1px solid #9FC298;
}
.cookiebutt.active {
  color: #6F6F6E; 
  background-color: #F4C7BB;;
  border: 1px solid #9FC298;
}
/*ACCORDIAN BUTTONS*/
.butt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
  width:100%; 
  min-height:40px; 
  max-width:1000px; 
  background: linear-gradient(to bottom, rgba(255, 255, 128, 0.66), rgba(255, 255, 0, 0.66));
  cursor: pointer;
  font-size:18pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  color: #3B3B3B;
  font-weight:bold; 
  text-align: left;
  border-bottom: solid 1px #7f7f7f;
  transition: 0.3s;
}
.butt:hover {
  background-color: rgba(0, 0, 0, 0.75);
  background: linear-gradient(to top, #336A4E, #006A4E);
  color: yellow; 
}
.butt.active {
  background-color: rgba(0, 0, 0, 0.75);
  background: linear-gradient(to top, #336A4E, #006A4E);
  color: yellow; 
}

/*<<<<<<<<<< GROUP BUTTONS >>>>>>>>>>*/
.groupbutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px;
  width:100%; 
  min-height:40px; 
  width: 150px;
  max-width:1000px; 
  background-color: #EBEBEB;
  cursor: pointer;
  font-size:18pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  font-weight:bold; 
  text-align: center;
  transition: 0.3s;
}
.groupbutt:hover {
  background: linear-gradient(to bottom, #7F7F7F, #000000);
  color: yellow; 
}
.groupbutt.active {
  background: linear-gradient(to bottom, #7F7F7F, #000000);
  color: yellow; 
}
.groupbutt1 {
  width: 150px;
}
@media screen and (max-width: 768px) {
  .groupbutt1 {
    width: 100px;
  }
}
.groupbutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px;
  /*width:100%; */
  min-height:40px; 
  /*width: 150px;*/
  max-width:1000px;
  background-color: #EBEBEB;
  cursor: pointer;
  font-size:18pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  font-weight:bold; 
  text-align: center;
  border: initial;
  box-shadow: 1px 1px 2px #2E2E2E;
  transition: 0.3s;
}

/*HTABS BUTTONS*/
.homebuttv {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size:18pt; 
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Red Hat Display', sans-serif;
  text-align: center;
  color: #FFFF00;
  background-color: #2E2E2E;
  border: none;
  transition: 0.3s;
}
.homebuttv:hover {
  color: #2E2E2E; 
  background-color: #FFFF00;
}
.homebuttv.active {
  color: #2E2E2E; 
  background-color: #FFFF00;
}

/*FORWRD/BACK BUTTONS*/
.stepbutt {
  color:#F3F3EE;
  transition: 0.3s;
}
.stepbutt:hover {
  color:yellow;
  transition: 0.3s;
  }

/*INFO/DEMO BUTTONS*/
#infoIcon {
  padding: 5px 11px;
  transition: 0.3s;
  border-radius: 50%;
}
.infoicon {
  padding: 5px 11px;
  transition: 0.3s;
  border-radius: 50%;
  color: #FFFF00;
  border: solid 1px #FFFF00;
  margin-right: 10px;
  cursor: pointer;
  font-size: 14pt;
  bottom: -1px;
}
.infoicon:hover {
  background-color: #FFFF00;
  color: #001122;
}
.demoIcon {
  position: absolute;
  padding: 5px 11px;
  margin-left: 10px;
  transition: 0.3s;
  color: #FFFF00;
  border: none;
  cursor: pointer;
  font-size: 14pt;
  bottom: -19px;
}
.demoIcon:hover {
  background-color: #FFFF00;
  color: #001122;
}

/*<<<<<<<<<<  ADD TO CART / BASKET  >>>>>>>>>>*/
.addtocartbutton {
  background-color: #223A5E;
  color:  #FFFFFF;
  border: 1px solid #223A5E;
  border-radius: 0px;
  margin-left: 10px;
}
.addtocartbutton:hover {
  color: #223A5E;
  background-color:  #FFFFFF;
}
#basketButton {
  text-align: left;
  padding-left: 40px;
  z-index: 18;
  position: sticky;
  top: 50px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px;
}
.basketbuttons {
  font-size: 12pt;
  background-color: #223A5E;
  color: #FFFFFF;
  border: 1px solid #223A5E;
  padding: 10px;
  border-radius: 0px;
}
.basketbuttons:hover {
  color: #223A5E;
  background-color: #FFFFFF;
}
.basketbuttons2 {
  float: right;
  margin-right: 40px;
}
.basketbuttons3 {
  float: left;
  margin-left: 40px;
}
.basketbuttonslg {
  width: 300px;
  height: 50px;
}
.deletebutton {
  background-color: #FF0000;
  color:  #FFFFFF;
  border: 1px solid #FF0000;
  border-radius: 0px;
}
.deletebutton:hover {
  color: #FF0000;
  background-color:  #FFFFFF;
}

/*<<<<<<<<<<  COOKIE BUTTONS  >>>>>>>>>>*/
#cookieButtonContainer {
position: fixed;
left: 0px;
z-index: 30;
background-color: rgba(0,0,0,0.75);
padding: 5px;
transition: all ease-in-out 2s 4s;
transform: scale(0);
transform-origin: left 300px;
height: 100%;
}
.cookiebuttons {
  display: inline-block;
}

/*<<<<<<<<<<  CHECK BOXES  >>>>>>>>>>*/
/* Create a custom checkbox */
.checkmark {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border: solid 1px #9FC298;
  margin-left: -20px;
  top: 7px;
}
/* On mouse-over, add a background color */
.cxbcontainer:hover input ~ .checkmark {
  background-color: #9FC298;
}
/* When the checkbox is checked, add a background */
.cxbcontainer input:checked ~ .checkmark {
  background-color: #9FC298;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: relative;
  display: none;
}
/* Show the checkmark when checked */
.cxbcontainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.cxbcontainer .checkmark:after {
  left: 9px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid #FBE9E3;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Create a custom checkbox */
.checkmark2 {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border: solid 1px #F59C00;
  margin-left: -20px;
  top: 7px;
}
/* On mouse-over, add a background color */
.cxbcontainer:hover input ~ .checkmark2 {
  background-color: #F59C00;
}
/* When the checkbox is checked, add a background */
.cxbcontainer input:checked ~ .checkmark2 {
  background-color: #F59C00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
  content: "";
  position: relative;
  display: none;
}
/* Show the checkmark when checked */
.cxbcontainer input:checked ~ .checkmark2:after {
  display: block;
}
/* Style the checkmark/indicator */
.cxbcontainer .checkmark2:after {
  left: 9px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*<<<<<<<<<<  ADMIN BUTTONS  >>>>>>>>>>*/
.updatebox {
  border: 1px solid #88B04B;
  color: #223A5E;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 14pt;
  text-align: center;
}
.updatebutton {
  background-color: #223A5E;
  color: #FFFFFF;
  padding: 10px;
  margin: 20px;
  border: 2px solid #223A5E;
  font-size: 14pt;
  padding: 3px 15px;
  width: 175px;
}
.updatebutton:hover {
  background-color: #FFFFFF;
  color: #223A5E;
  border: 2px solid #223A5E;
}
.labelbutton {
  background-color: #223A5E;
  color: #FFFFFF;
  padding: 10px;
  margin: 20px;
  border: 2px solid #223A5E;
  font-size: 14pt;
  padding: 3px 15px;
  width: 175px;
}
.labelbutton:hover {
  background-color: #FFFFFF;
  color: #223A5E;
  border: 2px solid #223A5E;
}
.iconstyle {
  color: #FFFFFF;
}