/*! * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business) * Copyright 2013-2017 Start Bootstrap * 
 Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE) */
body { 
  padding-top: 54px;
}
@media (min-width: 992px) { 
  body { 
    padding-top: 56px;
  }
}
.carousel-item { 
  height: 65vh; 
  min-height: 300px; 
  background: no-repeat center center scroll; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
}
.portfolio-item { 
  margin-bottom: 30px;
}
/*!--table addin--*/ 
* { 
  box-sizing: border-box;
}
.myInput {
  background-image: url('/css/searchicon.png'); 
  background-position: 10px 10px; 
  background-repeat: no-repeat; 
  width: 100%; 
  font-size: 14px; 
  padding: 8px 15px 8px 30px; 
  border: 1px solid #ddd; 
  margin-top: 5px; 
  margin-bottom: 15px;
}
#myTable {
  border-collapse: collapse; 
  width: 100%; 
  border: 1px solid #ddd; 
  font-size: 14px;
}
#myTable th {
/*  text-align: left; */
  padding: 8px;
}
#myTable td {
/*  text-align: left; */
  padding: 8px;
}
#myTable tr {
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr.header:hover {
  background-color: #ddd;
}
#myTable tr:hover {
  background-color: #eee;
}

/* Style the tab */ 
.tab { 
  overflow: hidden; 
  border: 1px solid #ccc; 
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */ 
.tab button { 
  background-color: inherit; 
  float: left; 
  border: none; 
  outline: none; 
  cursor: pointer; 
  padding: 5px 16px; 
  transition: 0.3s; 
  font-size: 17px;
}

/* Change background color of buttons on hover */ 
.tab button:hover { 
  background-color: #ddd;
}

/* Create an active/current tablink class */ 
.tab button.active { 
  background-color: #ccc;
}

/* Style the tab content */ 
.tabcontent { 
  display: none; 
  padding: 6px 12px; 
  -webkit-animation: fadeEffect 1s; 
  animation: fadeEffect 1s;
}

/* Fade in tabs */ 
@-webkit-keyframes fadeEffect { 
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeEffect { 
  from {opacity: 0;} 
  to {opacity: 1;}
}
/*!-- tab addin -->*/ 

/*!--form--*/ 
.login-form {
  width: 250px;  
}
.row { 
  display: -ms-flexbox; /* IE10 */ 
  display: flex; 
  -ms-flex-wrap: wrap; /* IE10 */ 
  flex-wrap: wrap; 
  margin: 0 -16px;
}
.col-25 { 
  -ms-flex: 25%; /* IE10 */ 
  flex: 25%;
}
.col-50 { 
  -ms-flex: 50%; /* IE10 */ 
  flex: 50%;
}
.col-75 { 
  -ms-flex: 75%; /* IE10 */ 
  flex: 75%;
}
.col-25, .col-50, .col-75 { 
  padding: 0 16px;
}

input[type=text] { 
  width: 100%; 
  margin-bottom: 5px; 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 3px;
}

select { 
  width: 100%; 
  margin-bottom: 5px; 
  padding: 5px; 
  border: 1px solid #ccc; 
  border-radius: 3px;
}
label { 
  margin-bottom: 3px; 
  display: block;
}
.icon-container { 
  margin-bottom: 5px; 
  padding: 7px 0; 
  font-size: 14px;
}
.btn { 
  background-color: #4CAF50; 
  color: white; 
  margin: 5px 0px 15px 0px; 
  border: none;
}
.btn:hover { 
  background-color: #45a049;
}
a { 
  color: #fff;
}
a:hover { 
  color: #fff;
}
hr { 
  border: 1px solid lightgrey;
}
span.price { 
  float: right; 
  color: grey;
}
.button { 
  background-color: #4CAF50; 
  border: none; 
  color: white; 
  padding: 15px 32px; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  font-size: 16px; 
  margin: 4px 2px; 
  cursor: pointer;
}

.bg-smith {
  background-color: #4CAF50;
  color: #fff;
}

.text-smith {
  color: #4CAF50;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also 
change the direction - make the "cart" column go on top) */ 
@media (max-width: 800px) {
  .col-25 { margin-bottom: 20px;
  }
}

.pagination .page-link {
    color: #4CAF50;
}
.pagination .page-item.active .page-link {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: white;
}