body{
  font-family: "Roboto", sans-serif;
  margin:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  background:#eee;
  font-size:18px;
}
::selection{
  background:#000;
  color:#fff;
}
body h1{
  text-align:center;
  margin:20px 0 40px;
  padding:0;
}
body h2{
  width:100%;
  margin:0px auto 20px auto;
  max-width:1200px;
}
body .groups{
  width:100%;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill,minmax(calc(30% - 0px),1fr));
  grid-gap: 20px;
  align-items: start;
  align-items: stretch;
  margin:0 auto 40px auto;
  max-width:1200px;
}
.group{
  padding:20px;
  width:calc(100% - 40px);
  display:flex;
  flex-direction:column;
  align-items: center;
}
body section{
  width:100%;
  border:1px solid #185D96;
  border-radius:15px;
  background:#fff;
  box-shadow:2px 2px 5px rgba(24,93,150,.3);
/*      transition:background .4s cubic-bezier(0.44, 0, 0.56, 1);*/
}
body section:hover{
  background:#185D96;
  color:#fff;
}
body section h3{
  padding:0;
  margin:0 0 10px 0;
}
section a{
  color:#185D96;
}
body section:hover a{
  color:#fff;
}
body section:hover p{
  color:#fff;
}
@media only screen and (max-width: 1024px) {
  body .groups {
    grid-template-columns: repeat(auto-fill,minmax(calc(100% - 20px),1fr));
  }
}
.groups section .group div{
  width:100%;
  margin:20px 0 0 0;
  color:#121212;
}
.groups section div p{
  margin:0;
  padding:0;
  font-size:16px;
  text-align:right;
}
.inter section{
  background:#252326;
  color:#fff;
  border:1px solid #252326;
  box-shadow:none;
}
.inter section:hover{
  background:#cc0000;
  border:1px solid #cc0000;
}
.inter section a{
  color:#fff;
}
/*section.upian{
  background:#cc0000;
  color:#fff;
  border:1px solid #cc0000;
}
section.upian:hover{
  background:#cc0000;
  border:1px solid #cc0000;
}
section.upian a{
  color:#fff;
}*/
section .group div img{
  float:left;
  width:50px;
  border-radius:50%;
/*      border:1px solid white;*/
/*      box-shadow:2px 2px 8px rgba(255,255,255,1);*/
}