:root {
  --search-container_width: 17.5vw;
  --product_height: calc(100vh / 10);
}

#help {
  max-width: 70%;
  position: absolute;
  left: calc(50% + var(--search-container_width) / 2);
  top: calc(var(--nav-bar_height));
  transform: translate(-50%, 50%);

	font-variant: small-caps;
	font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 3.5);
  line-height: calc((var(--product_height) - var(--product_height) / 3) / 3);
  color: #333;
}

.product-container {
  width: 75%;
  height: 85%;

  position: absolute;
  left: calc(50% + var(--search-container_width) / 2);
  top: calc(50% + var(--nav-bar_height) / 2);
  transform: translate(-50%, -50%);

  overflow-x: hidden;
  overflow-y: auto;

  text-align: center;
}
.product-container > .product {
  display: inline-block;
  width: 80%;
  height: var(--product_height);
  margin: 0.75vh;

	overflow: hidden;

  border: 1px solid var(--secColor);
  border-radius: calc((0.5vh + 0.5vw) / 2);

  transition: all 0.2s;

  cursor: pointer;
}

.product-container > .product:first-of-type {
	margin-top: 2vh;
}

.product-container > .product:hover {
	width: calc(80% * 1.1);
}

.product > img, .product > #img {
  display: inline-block;
  max-width: calc(var(--product_height) * 0.9);
  max-height: calc(var(--product_height) * 0.9);
  margin-left: 0.5%;
  margin-right: 1%;

  position: relative;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);

  float: left;

	transition: inherit;
}

.product-container > .product:hover > img {
	max-width: calc(var(--product_height) * 0.9 * 1.1);
	max-height: calc(var(--product_height) * 0.9 * 1.1);
}

.product > #title {
  display: inline-block;
  width: calc(100% - var(--product_height) - 17.5%);

  text-align: left;
  font-size: calc(var(--product_height) / 4);
  color: #111;

  float: left;
}

.product > #price {
  display: inline-block;
  width: 15%;
  max-height: var(--product_height);
  margin-right: 1%;

  text-align: right;
  font-size: calc(var(--product_height) / 4);
  color: #111;

	position: relative;

  float: left;
}

.product > #descr {
  display: inline-block;
  width: calc(100% - var(--product_height) - 1.5%);
  height: calc(var(--product_height) - var(--product_height) / 3);

  text-align: left;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 4.5);
  line-height: calc((var(--product_height) - var(--product_height) / 3) / 4);
  color: #333;
  line-break: normal;

  overflow: hidden;

  float: left;
}

.product > #buttons {
  height: var(--product_height);

  position: absolute;
}
.product > #buttons > button {
  display: block;
  width: calc(var(--product_height) * 0.45);
  height: calc(var(--product_height) * 0.45);

  font-size: calc(var(--product_height) * 0.45 / 2);
  line-height: calc(var(--product_height) * 0.45);

  cursor: pointer;

  background: none;

  position: absolute;
  transform: translate(-100%, 0);

  border: calc((0.15vw + 0.15vh) / 2) solid;
  border-right: none;
  border-radius: calc(var(--product_height) * 0.045) 0  0 calc(var(--product_height) * 0.045);
}
.product > #buttons > #confirm {
  border-color: #27ae60;
  border-bottom-width: calc((0.25vw + 0.25vh) / 4);

  top: 0;

  color: #27ae60;
}
.product > #buttons > #cancel {
  border-color: var(--primColor);
  border-top-width: calc((0.25vw + 0.25vh) / 4);

  bottom: 0;

  color: var(--primColor);
}

#search-container {
  width: var(--search-container_width);
  height: calc(90vh - var(--nav-bar_height));

  position: fixed;
  left: 1%;
  top: calc(50% + var(--nav-bar_height) / 2);
  transform: translate(0, -50%);

  border: 1px solid var(--secColor);
  border-radius: calc((0.5vh + 0.5vw) / 2);
}

#search-container > div {
  width: 95%;
  margin-bottom: 5%;
  margin-left: 2.5%;

  border-bottom: 1px solid var(--secColor);
}

#search-container > #search-bar {
  height: 10%;
}

#search-bar > #search {
  width: 90%;
  height: 40%;

  font-size: calc((90vh - var(--nav-bar_height)) * 0.1 * 0.4 / 1.5);
  font-family: 'FontAwesome', 'Roboto', sans-serif;
  padding: 1%;

  border: none;
  border-radius: var(--border-radius);

  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background-color: var(--fieldColor);
}

#search-container > #tag-container {
  padding-bottom: 5%;
}

#tag-container > .tag {
  display: inline-block;
  margin: calc(var(--search-container_width)  * 0.95 * 0.9 * 0.01 / 2);
  padding: calc(var(--search-container_width) * 0.95 * 0.9 * 0.015);

  font-size: calc((90vh - var(--nav-bar_height)) * 0.1 * 0.4 / 1.5);
  color: var(--primColor);

  border-radius: var(--border-radius);
  border: 1px solid var(--primColor);

  cursor: pointer;

  background: white;

  transition: all 0.2s;
}

#tag-container > .tag:hover {
  transform: scale(1.025);
}

#tag-container > .tag.selected {
  background: var(--primColor);
  color: #fff;
  border: 1px solid var(--primColor);
}

#search-container > #options {
  height: 60%;
}

.sort_option {
  margin: auto;
  margin-left: 10%;
  width: 75%;

  font-size: calc((90vh - var(--nav-bar_height)) * 0.1 * 0.4 / 2);
  border-radius: 5px;
  border: 1px solid var(--primColor);

  color: #111;
}

.sort_option > option {
  font-size: calc((90vh - var(--nav-bar_height)) * 0.1 * 0.4 / 2);
}

#search-container > #options > input  {
  margin: auto;
  margin-left: 10%;
  width: 80%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background-color: #f85d4d;
  border-radius: 500px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background-color: #f85d4d;
  border-radius: 500px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background-color: #f85d4d;
  border-radius: 500px;
}

input[type=range]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  background-color: #34495e;
  border: none;
}
input[type=range]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background-color: #34495e;
  border: none;
}
input[type=range]::-ms-thumb {
  width: 15px;
  height: 15px;
  background-color: #34495e;
  border: none;
}

#search-container > #options > label > .value {

}