/*for collapsible sections*/

.collapsible {
    background-color: #777;
    text-align: left;
    vertical-align:middle;
    margin:auto;
    outline: none;
    font-family:Verdana,sans-serif;
    font-size: 20px;
    color: white;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    border-style: solid;
    border-color:white;
    border-radius:25px;
    box-shadow: 0 8px #999;
}

.collapsible:hover {
    background-color: #555;
    font-size: 24px;
}

.collapsible span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.collapsible:after {
  content: '\00bb';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  vertical-align:middle;
}

.active:after {
  content: "\00ab";
}

.collapsible:hover span {
  padding-right: 25px;
}

.collapsible:hover span:after {
  opacity: 1;
  right: 0;
}


@media screen and (max-width:1100px) {
  .collapsible {
   font-size: 20px;
  }
}

@media screen and (min-width:1100px) {
  .collapsible {
   font-size: 24px;
   max-width:1100px;
  }
}

.content {
    position:relative;
    padding: 8px 9px;
    margin: 8px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    border-radius: 10px;
}

.date-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

fullMoonImage img {
    width:30px;
    height:30px;
    border: 1px solid #777;
}

/*logo link images for reporting to other weather sites*/
.logo img {
    width:10%;
    height:auto;
    background-color: #f2f2f2;
    padding: 18px 18px;
    border-style: solid;
    border-width: 2px;
    border-color: #777;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    margin: 5px;
}

.logo img:hover {
   background-color: #b3b3b3;
   box-shadow: 0 5px #555;
   transform: translateY(-4px);
}

.logo img:active {
   background-color: #b3b3b3;
   box-shadow: 0 5px #555;
   transform: translateY(4px);
}

@media screen and (max-width:1100px) {
  .logo img {
    width:15%;
    height:auto;
    background-color: #f2f2f2;
    padding: 9px 9px;
    border-style:solid;
    border-width:2px;
    border-color: #777;
    border-radius: 15px;
    box-shadow: 0 9px #999;
   }
}

@media screen and (max-width:1100px) {
  .onactive img {
    width: 100%;
    height: auto;
    padding: 9px 9px;
  }
}

/* end for collapsible sections*/