:root{
  --circle-navigation-radius:240px;
}




#billboard-slogan{ display:block; }

@media screen and (max-width: 630px)
{
  #billboard-slogan{ display:none; }
}

#circles
{
  width:100%;
  max-width:1024px;
  height:auto;
  flex-grow:1;

  display:flex;
  padding:80px 40px;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
}

.circle-navigation
{
  width:var(--circle-navigation-radius);
  height:var(--circle-navigation-radius);
  flex-grow:0;
  border-radius:50%;
  background-color:var(--light-color);
  margin:20px;
  overflow:hidden;
  position:relative;
  border:6px solid var(--color);
  display:flex;
  align-items: center;
  align-content: center;
  cursor: pointer;
  transition:0.5s;
  top:0px;
  transform:scale(1);

}

.circle-navigation:hover
{
  top:-5px;
  transition:0.25s;
  transform:scale(1.1);
}

.circle-navigation img
{
  position:relative;
  width:100%;
  height:auto;
  left:0px;
  top:2px;
  user-select: none;
}

.circle-navigation span
{
  display:block;
  position:absolute;
  width:100%;
  text-align: center;
  left:0px;
  top:52%;
  font-size:40px;
  color:#fff;
  font-weight:700;
  user-select: none;
  text-shadow:1px 1px 5px rgba(0,0,0,0.3);
}



@media screen and (max-width: 700px)
{
  :root{
    --circle-navigation-radius:200px;
  }

  .circle-navigation span
  {
    font-size:32px;
  }
}

@media screen and (max-width: 600px)
{
  :root
  {
    --circle-navigation-radius:180px;
  }

  .circle-navigation{ margin:10px; }


  .circle-navigation span
  {
    font-size:28px;
  }
}

@media screen and (max-width: 500px)
{
  #circles
  {
    padding:40px 20px;
  }
}



@media screen and (max-width: 450px)
{
  :root{
    --circle-navigation-radius:120px;
  }

  .circle-navigation span
  {
    font-size:18px;
  }
}

@media screen and (max-width: 375px)
{
  #circles
  {
    padding:20px 10px;
  }

}