.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: inherit;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

/*.active:after {
/*  content: "\2212";
}*/

.panel {
  padding: 0 5px;
  background-color: white;
  text-align: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.menuhighlight {
  background-color:#BEE077;
  }
  
.menuhighlight:hover {
  background-color:#81AA27;
  }
  
.menuregular {
  background-color:#f1f1f1;
  }
  
.menuregular:hover {
  background-color: #ccc;
  }
  
.clip-pathabout {
    height:300px;
    width:200px;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image:url(../images/me.png);
    background-position:left;
    background-size:cover;
}

.newsspecial {
background-color: #ffd247;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #ffd247;
  border-radius: 12px;
}

.newsspecial:hover {
background-color: black;
  color:white;
}

/* ============================test zone ========================================================= */
[speech-bubble]{
    --bbColor: #e89c33;
    --bbArrowSize: 1.5rem;
    --bbBorderRadius: 0.25rem;
    --bbPadding: 1rem;
    background: var(--bbColor);
    border-radius: var(--bbBorderRadius);
    padding: var(--bbPadding);
    position: relative;
    line-height:1.5;
  }
  
  [speech-bubble]::before{
    content: ''; 
    position: absolute;
    background: var(--bbColor);
  }
  
  /* bottom and top  */
  [speech-bubble][pbottom]::before{
    --width: calc(var(--bbArrowSize) / 2 * 3);
    height: var(--bbArrowSize);
    width: var(--width);
  }
  
  /* bottom */
  [speech-bubble][pbottom]::before{
    top: calc(100% - 2px);
  }
  [speech-bubble][pbottom][aright]::before{
    right: 4rem;
    clip-path: polygon(0 0, 55% 0, 0% 100%)
  }
  
  /* flip */
  [speech-bubble][pbottom][flip]::before{
    transform: scaleX(-1)
  }
  
  [speech-bubble]{ 
    filter: drop-shadow(0px 0px 0.2rem black);
    transition: transform 0.25s ease
  }
/* ============================ end of test zone ========================================================= */