.loading-opacity {
    opacity: 0.5;
}
#filtration-buttons {
    display: inline-block;
	color: black;
}
#filtration-buttons .btn {
    border-color: #708cb9;
	border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    margin-right: 5px;
	margin-bottom: 5px;
	padding: 0px 3px 0px 3px;
    cursor: pointer;
    text-align: center;
	font-size: 14px;
	color: black;
	box-shadow: inset 2px 2px 2px hsl(0, 0%, 80%), 2px 2px 2px hsl(0, 0%, 50%);
}
#filtration-buttons .btn:hover {
    background-color: #b8c6dc;
	color: black;
}
#filtration-buttons .btn-success {
    background-color: #708cb9;
	color: white;
	box-shadow: inset -2px -2px 2px hsl(0, 0%, 80%), inset 2px 2px 2px hsl(0, 0%, 30%);
}
.one-button-container {
   width:125px;
   position: relative;
}
.two-button-container {
   width:250px;
   position: relative;
   overflow: hidden;
}
.search-one-button-container {
   width:125px;
   height:155px;
   position: relative;
   overflow: hidden;
}
.one-two-button-container-text {
   float:left;
   font-size:16px;
   text-align:center;
   color:black;
   margin-bottom:5px;
}
.two-button-container-text {
   width:240px;
   margin-right:25px;
}
.one-button-container-text {
   width:125px;
   margin-left:-5px;
   margin-right:15px;
}
.filter-button-divider {
   width:5px;
   height:50px;
   margin-right:10px;
   margin-top:5px;
   background-color:hsl(200, 40%, 75%);
   float:left;
   border-radius:1px;
   box-shadow: inset 1px 1px 2px  hsl(0, 0%, 50%), 0.5px 0.5px 1px hsl(200, 30%, 70%), inset -0.5px -0.5px 1px hsl(200, 90%, 97%);
}
.filter-buttons-dropdown-options {
   float: left;
   cursor:pointer;
   padding: 0px 3px 0px 3px;
   border-radius: 5px;
   width:100px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:14px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   color:black;
   background:hsl(200, 52%, 95%);
   box-shadow: -2px -2px 2px hsl(194, 100%, 98%), 2px 2px 2px  hsl(0, 0%, 50%), inset 0 0 0 transparent, inset  0 0 0 transparent;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
}
.filter-buttons-dropdown-options:hover {
   cursor:pointer;
}
.filter-buttons-dropdown-options:active {
   transition: 0.5s;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
}
.filter-buttons-dropdown-options-clicked {
   float: left;
   cursor:pointer;
   padding: 0px 3px 0px 3px;
   border-radius: 5px;
   width:100px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:14px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   transition: 0.5s;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
   position: relative;
   overflow: hidden;
}
.filter-buttons-main-options {
   float: left;
   cursor:pointer;
   padding: 0px 3px 0px 3px;
   border-radius: 5px;
   width:115px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:16px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   color:black;
   background:hsl(200, 52%, 95%);
   box-shadow: -2px -2px 2px hsl(194, 100%, 98%), 2px 2px 2px  hsl(0, 0%, 50%), inset 0 0 0 transparent, inset  0 0 0 transparent;
   transition: 0.5s;
   position: relative;
   overflow: hidden;
}
.filter-buttons-main-options:active {
   transition: 0.5s;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
}
.filter-buttons-main-options-clicked {
   float: left;
   cursor:pointer;
   padding: 0px 3px 0px 3px;
   border-radius: 5px;
   width:115px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:16px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   transition: 0.5s;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
   position: relative;
   overflow: hidden;
}
.single-container-extras {
   float: left;
   margin-left:-125px;
   margin-top:28px;
}
.filter-buttons-main-container {
   cursor:pointer;
   max-width:1210px;
   padding: 5px 0px 0px 10px;
   border-radius: 5px;
   margin-left:5px;
   margin-right:15px;
   margin-bottom:15px;
   background:hsl(200, 47%, 90%);
   box-shadow: inset 3px 3px 6px hsl(200, 47%, 95%), 2px 2px 2px  hsl(0, 0%, 50%), -1px -1px 2px hsl(195, 30%, 85%);
   display: flex;
   flex-wrap: wrap;
}
.search-button {
   width:115px;
   height:115px;
   position:absolute;
   cursor:pointer;
   border-radius:5px;
   padding-top: 85px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:16px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   text-align:center;
   color:black;
   background:hsl(200, 52%, 95%);
   box-shadow: inset 3px 3px 3px hsl(200, 52%, 98%), 3px 3px 3px hsl(200, 15%, 60%), -1px -1px 2px  hsl(200, 44%, 85%), inset 0 0 0 transparent, inset  0 0 0 transparent, 0 0 0 transparent;
   transition: 0.5s;
   white-space: pre-wrap;
   line-height: 18px;
   position: relative;
   overflow: hidden;
}
.search-button:active {
   width:1190px;
   height:115px;
   position:absolute;
   cursor:pointer;
   border-radius: 5px;
   margin-bottom:10px;
   font-size:16px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: inset 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
   white-space: pre-wrap;
   line-height: 18px;
   transition: 0.5s;
}
.search-button-clicked {
   width:115px;
   height:115px;
   cursor:pointer;
   border-radius: 5px;
   padding-top: 85px;
   margin-right:10px;
   margin-bottom:10px;
   font-size:16px;
   font-family: Helvetica, sans-serif;
   text-align:center;
   color:black;
   background:hsl(200, 50%, 93%);
   box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
   transition: 0.5s;
   white-space: pre-wrap;
   line-height: 18px;
}
.filter-buttons-sub-container {
   cursor:pointer;
   padding: 10px 0px 0px 10px;
   border-radius: 5px;
   margin-bottom:15px;
   margin-left:-125px;
   display: flex;
   flex-wrap: wrap;
   max-width:99%;
   background:hsl(200, 47%, 90%);
   box-shadow: inset 3px 3px 6px hsl(200, 47%, 95%), 2px 2px 2px  hsl(0, 0%, 50%), -1px -1px 2px hsl(195, 30%, 85%);
}
.search-buttons-sub-container {
   padding: 10px 0px 0px 10px;
   border-radius: 5px;
   margin-bottom:15px;
   margin-left:-400px;
   display: flex;
   flex-wrap: wrap;
   max-width:99%;
   background:hsl(200, 47%, 90%);
   box-shadow: inset 3px 3px 6px hsl(200, 47%, 95%), 2px 2px 2px  hsl(0, 0%, 50%), -1px -1px 2px hsl(195, 30%, 85%);
}
.filter-buttons-dropdown {
  display: inline-block;
  float:left;
}
.filter-buttons-dropdown-content {
  display: none;
  position: absolute;
  margin-top: 143px;
  z-index: 1;
}
.filter-buttons-dropdown:hover .filter-buttons-dropdown-content {
  display: block;
}
.filter-buttons-main-options::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(236, 244, 249, 0), rgba(255, 255, 255, 0.75) 50%, rgba(236, 244, 249, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.filter-buttons-main-options:hover::after, .filter-buttons-main-options:focus::after {
  animation: filter-button-sheen 1.5s forwards;
}
@keyframes filter-button-sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}
.filter-buttons-dropdown-options::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(236, 244, 249, 0), rgba(255,255,255,0.75) 50%, rgba(236, 244, 249, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.filter-buttons-dropdown-options:hover::after, .filter-buttons-dropdown-options:focus::after {
  animation: filter-button-sheen 1.5s forwards;
}
@keyframes filter-button-sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}
.search-button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(236, 244, 249, 0), rgba(255,255,255,0.75) 50%, rgba(236, 244, 249, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.search-button:hover::after, .search-button:focus::after {
  animation: search-button-sheen 1.5s forwards;
}
@keyframes search-button-sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}
.searchBox2 {
  position: relative;
  border: none;
  outline: none;
  background:none;
  padding: 0px;
  margin-bottom:5px;
  margin-left: 10px;
  float: left;
  width: 300px;
  height:50px;
  margin-right: -10px;
  border-radius: 5px;
}
.searchInput {
  border: none;
  outline: none;
  float: left;
  width: 330px;
  height:50px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 20px;
  cursor:cursor;
  border-radius: 5px;
  font-size:16px;
  font-family: Helvetica, sans-serif;
  text-align:left;
  color:black;
  background:hsl(200, 50%, 93%);
  box-shadow: inset 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%), 7px 7px 0px hsl(200, 47%, 90%);
  line-height: 18px;
  transition: 1.5s;
  z-index: 99;
}
.searchButton {
  border: none;
  outline: none;
  width:50px;
  height:50px;
  position:relative;
  cursor:pointer;
  border-radius:5px;
  margin-right:10px;
  margin-bottom:10px;
  font-size:16px;
  font-family: Helvetica, sans-serif;
  text-align:center;
  color:black;
  background:hsl(200, 52%, 95%);
  box-shadow: inset 3px 3px 3px hsl(200, 52%, 98%), 3px 3px 3px hsl(200, 15%, 60%), -1px -1px 2px  hsl(200, 44%, 85%), inset 0 0 0 transparent, inset  0 0 0 transparent, 0 0 0 transparent;
  transition: 1.5s;
  white-space: pre-wrap;
  line-height: 18px;
  overflow: hidden;
}
.searchButton:hover {
   background:hsl(200, 50%, 93%);
  box-shadow: inset 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, inset 3px 3px 6px  hsl(200, 15%, 60%), inset -3px -3px 6px hsl(200, 50%, 97%), 1px 1px 2px  hsl(200, 44%, 85%);
  transition: 0.5s;
}
.search-symbol {
   background-color:hsl(200, 15%, 60%);
   border-radius: 50%;
   display: block;
   margin-top:-75px;
   margin-left:20px;
   width:50px;
   height:50px;
}
.search-symbol2 {
   background-color:hsl(200, 50%, 95%);
   border-radius: 50%;
   display: block;
   margin-top:-45px;
   margin-left:25px;
   width:40px;
   height:40px;
}
.search-symbol-handle {
   background-color:hsl(200, 15%, 60%);
   border-radius: 5px;
   display: block;
   margin-left:70px;
   margin-top:-10px;
   width:5px;
   height:40px;
   transform: rotate(-45deg);
}
.searchButton::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(236, 244, 249, 0), rgba(255,255,255,0.5) 50%, rgba(236, 244, 249, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.searchButton:hover::after, .searchButton:focus::after {
  animation: searchButton-sheen 1.5s forwards;
}
@keyframes searchButton-sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}