body
{

}
h2{
  border-style:solid;
  padding: 3px;
  display:inline-block;
}
.tagDiv{
  display: flex;
  position:relative;
  flex-wrap: wrap;
  max-height: 20vh;
  overflow-y: hidden;
  transition: max-height 0.5s;
  padding-bottom: 6vh;
}
.linkImgDiv {
  text-align: center;
  position: relative;
  text-align: center;
  margin: 10px;
}
#tagOpener{
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: black;
    padding: 5px;
    color: white;
}
.tagRim {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1)30%, rgba(255,255,255,0) 100%); 
  transition-duration: 1s;
}

.tagH {

  padding-left: 5px;
  padding-right: 10px;
  border-style: solid;
  border-color: white;
  margin-bottom: 3px;
  margin-right: 3px;
}

  .tagH:hover {
    background-color: black;
    color: white;
    transition: color 0.3s, border-color 0.5s;
  }

.thumbInfo {
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.5);
  display: none;
  text-shadow: black 2px 2px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.3rem;
}

  .thumbInfo p {
    padding: 5px;
    word-break:break-word;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
  }



  .tagH a{ 
    #background-color: black;
   # color: white;
  }
  .taggedContent{
    display: flex;
    justify-content: flex-start;
  }
  .taggedCDiv{
    display: flex;
    position: relative;
    margin-top: 50px;


  }
  .taggedCDiv a:{
    background-color: white;
  }
  .taggedCDiv img{
    margin: 20px;
  }
.selectDate {
  margin-top: 50px;
  position: relative;
}
.selectDate-selected {
  background-color: brown;
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
.selectDate form{
  position: relative;
  align-content: baseline;
  display: flex;
  flex-wrap: wrap;
}
.selectDate div{
  margin-bottom: 1em;
  display: flex;
  flex-wrap: nowrap;
}
.go {
  background-color: black;
  color: white;
  font-size: 1.3rem;
  padding: 3px;
  border: solid;
  border-color:black;
  margin-right: 30px;
}
  .go:hover {
    background-color: white;
    color: black;
  }
.picker {
  background-color: black;
  color: white;
  font-size: 1.3rem;
  padding: 5px;
  border-style:none;
}
.picker-selected {
  background-color: brown;
  color: #ffffff;
 # padding: 8px 16px;
#  border: 1px solid transparent;
 # border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
label {
  #background-color: black;
  #color: white;
  padding: 3px;
  border-style: solid;
  font-size: 1.2rem;
}
label:hover{

}


.search input{
  font-size: 1.3rem;
  padding: 3px;
}
.clear{
  color:dimgrey;
padding: 3px;
 margin-left: 5px;
}
.clear:hover{
  color:black;
}

.grid {
  position: relative;
  margin-top:50px;
  margin-bottom: 5em;
  display: flex;
  flex-wrap: wrap;
  width: 90vw;
}

.item {
  text-align: center;
  position: relative;
  text-align: center;
  margin: 10px;
}
  .item:hover .thumbInfo {
    display: table;
   # transition: display 1.5s;
  }


.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (orientation: portrait) {
.selectDate div{
 width: 100%;
 justify-content: space-between;
flex-wrap: wrap;
}
.go{
  margin: 0;
  flex-grow: 1;
}
.picker, .search input{
  flex-grow: 1;
}
}