@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: Poppins-Regular;
  src: url(../fonts/poppins/Poppins-Regular.ttf); 
}
/* Remove the navbar's default margin-bottom and rounded borders */ 
	.topdown {
	  align-content: center;
	  width:80%;
	  font-size: 28px;
      font-weight: bold;
	  font-family: Poppins-Regular;
	  color: #1C5F00;
	}
	#headerpic {
	  border-radius: 20%;
	  padding: 10px;
	}
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    row.content {height: 500px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 40px;
      background-color: #e4eef7;
    }

	.floatingsideleft {
	  position: fixed;
	  top: 60px;
	  width: 32%;
	  overflow-y: scroll; 
	  height: calc(100vh - 70px);
	}

	.floatingsideright {
	  position: fixed;
	  top: 60px;
	  width: 40%;
	  overflow-y: scroll; 
	  height: calc(100vh - 70px);
	}
	.center-div {
	  font-family: Poppins-Regular;
	  top: 170px;
	}
	.floatingsideleftShop {
	  position: fixed;
	  top: 170px;
	  width: 22%;
	}

	.floatingsiderightShop {
	  position: fixed;
	  top: 170px;
	  width: 40%;
	  right: 10px;
	  overflow-y: scroll;
	  height: calc(100vh - 200px);
	}
	.floatingsiderightSh {
	  position: fixed;
	  top: 170px;
	  width: 32%;
	  right: 10px;
	  overflow-y: scroll;
	  height: calc(100vh - 200px);
	}
	.floatingsiderightShopKeypad {
	  position: fixed;
	  bottom: 0px;
	  width: 32%;
	  height: 196px;
	  right: 10px;
	  border-radius: 8px;
	}
	.center-divShop {
	  top: 170px;
	  width: 40%;
	}
	.center-divMarket {
	  position: relative;
	  right: 75px;
	  width: 27.5%; 
	}
	.buttonproduct2{
		width: 25%;
		border:1.5px solid #4D5E8C;
		padding: 5px;
		border-radius: 5px;
		align-items: center;
		background-color: #e6f2ff;
	    opacity: 0.9;
		cursor: pointer;
	}
	.buttonproductcons{
		min-width: 150px;
		width: 20%;
		border:1.5px solid #4D5E8C;
		padding: 5px;
		border-radius: 5px;
		align-items: center;
		background-color: #e6f2ff;
	    opacity: 0.9;
		cursor: pointer;
	}

	.buttonproduct:hover {
  	opacity:1;
	} 
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
	  position: fixed;
	  bottom: 0px;
	  width: 100%;
    }
	.prodsearch{
		align-items: center;
		width: 90%;
		height: 35px;
		border-radius: 5px;
		font-size: 18px;
	}
		.busselect1 {
		align:center;
	}
		.busselect2 {
		float:left; 
		width: 50%;
	}
		.busselect3 {
		float:left;
		width: 33%;
	}
		.topgap {
		top:200px; 
		}
	@media screen and (min-width: 1024px) { 
		.topgap {
		top:200px; 
		}
	}
	@media screen and (max-width: 1200px) {
	.topgap {
		top:0px; 
		}
	
	.showprice {
	  display: none;
	  font-size: 8px;
	}
	.topdown {
	  align-content: center;
	  width:80%;
	  font-size: 14px;
      font-weight: bold;
	}
	.buttonproduct2{
		width: 50%;	
		min-width: none;
	}
	.navbar-nav {
	  margin: 7.5px 0px !important;
	}
	.navbar-nav li {
	  float: left !important;
	}
}
	@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
   .topfixMarket {
		left: 0px;
		top: 130px;
		position: fixed;
		z-index:3;
		width: 100%;
	}
}
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 896px) {
	#apDivHeader {
	width:100%;
	height:auto;
	top: 0px;
}
	#displaytbl {
		width: 100%;
	}
	.topfix200 {
		left: 0px;
		top: 130px;
		position: fixed;
		z-index:3;
		width: 100%;
	}
	.busselect1 {
		width: 100%;
		display: block;
		float:none;
	}
		.busselect2 {
		width: 100%;
		display: block;
		float:none;
	}
		.busselect3 {
		width: 100%;
		display: block;
		float:none;
	}
	.showprice {
	   display:block;
	}
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;}
	.floatingsideleft {
	  position: static;
	  padding-top: 60px;
	  width:100%;
	}
	.buttonproduct2{
		width: 100%;	
	}
	.floatingsideright {
	  position: static;
	  top:inherit;
	  width:100%;
	}
	.center-div {
	  top: inherit;
	  width:100%;
	}
	.floatingsideleftShop {
	  top: 116px !important;
	  left: 0px;
	  position: fixed;
	  width:100%;
	  z-index: 5;
	}

	.floatingsiderightShop {
	  position: static;
	  top: inherit;
	  padding-top: 10px;
	  padding-bottom: 50px;
	  width: 100%;
	  right: auto;
	  overflow-x: hidden;
	  height: auto;
	}
	.floatingsiderightSh {
	  position: static;
	  top: inherit;
	  padding-top: 10px;
	  padding-bottom: 50px;
	  width: 100%;
	  right: auto;
	  overflow-x: hidden;
	  height: auto;
	}
	.center-divShop {
	  top: 180px;
	  width: 100%;
	  overflow-x: hidden;
	  height: 100%;
	}
	MMheaderpic {
		display: none;	
	}
	#MMheaderpic2 {
		display: none;	
	}
	MMheaderpic1 {
		 display: block;	
	}
	.center-divMarket {
	  top: 60px;
	  width: 100%;
	  padding-top: 0px;
	  padding-left: 0px;
	  right: 0px;
	}
	tophet{
		top: 200px;	
	}
}
@media screen and (max-width: 500px) {
	#headerpic {
	  border-radius: 40%;
	  padding: 8px;
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	  width: 90%;
	}
	.floatingsiderightShopKeypad {
	  display: none;
	}
}
		h3 {
	color: #0066CC;
	font-family: Poppins-Regular;
	border-bottom: 3px solid #0066CC;
	font-size: 17px;
	line-height: 27px;
	letter-spacing: 2px;
	margin-bottom: 17px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
}
		h4 {
	color: #0066CC;
	font-family: Poppins-Regular;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 8px;
	margin-bottom: 8px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 450;
}
		h5 {
	color: #0066CC;
	font-family: Poppins-Regular;
	border-bottom: 3px solid #0066CC;
	text-align: center;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: 10px;
	margin-bottom: 17px;
	text-transform: uppercase;
	font-weight: 600;
}
#apDivTopsearch_order {
	font-family: Poppins-Regular;
	position: static;
	width:auto;
	height:60px;
	z-index:3;
	border-radius: 6px;
	border: 2px solid #4D5E8C;
	background-image: linear-gradient(#98cef5,#91bceb);
	padding: 15px;
}
#apDivTopsearch_order2 {
	font-family: Poppins-Regular;
	position: static;
	width:auto;
	height:60px;
	z-index:3;
	border-radius: 6px;
	border: 2px solid #4D5E8C;
	background-image: linear-gradient(#98cef5,#91bceb);
	padding: 15px;
}
#overlay {
	font-family: Poppins-Regular;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99999;
    background-color: gray;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    display: none;
}
#overlay h2 {
    position: fixed;
    margin-left: 40%;
    top: 40%;
}
.pull-left{float:left!important;}
.pull-right{float:right!important;}

.loader {
  display: none;
  top: 40%;
  left: 40%;
  position: absolute;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #049B0C;
  border-bottom: 16px solid #049B0C;
  width: 140px;
  height: 140px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}