Main Page/stylesheet.css

.mp-topbanner {

   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   padding: 1em !important;
   clear: both;

}

.mp-panel {

   margin-bottom: 0.4em;
   padding: 0.4em;
   background-color: #f8f9fa;
   border: 1px solid #ddd;

} .mp-panel h2 {

   margin: 0.1em;
   padding: 0.2em;
   background-color: #eee;
   border: 1px solid #ddd;
   font-family: Arial, sans-serif !important;
   font-size: 1.2em;
   font-weight: bold;
   color: #222;

} .mp-content {

   padding: 0.4em;
   clear: both;
   overflow: hidden;

} .mp-row {

   display: flex;
   flex-direction: row;

} .mp-row > .mp-panel:nth-child(1) {

   flex: 1 1 55%;
   margin-right: 0.4em;

} .mp-row > .mp-panel:nth-child(2) {

   flex: 1 1 45%;

} @media screen and (max-width: 1024px) {

   .mp-topbanner {
       flex-direction: column;
       align-items: center;
   }
   .mp-row {
       flex-direction: column;
   }
   .mp-row > .mp-panel:nth-child(1) {
       margin-right: 0;
   }

}

.mp-green {

   background-color: #f2fff9;
   border-color: #cef2e0;

} .mp-green h2 {

   background-color: #cef2e0;
    border-color: #a3bfb1;

} .mp-blue {

   background-color: #f2f8ff;
   border-color: #CEE0F2;

} .mp-blue h2 {

   background-color: #cedff2;
   border-color: #a3b0bf;

} .mp-purple {

   background-color: #FAF5FF;
   border-color: #E0CEF2;

} .mp-purple h2 {

   background-color: #e0cef2;
   border-color: #afa3bf;

} .mp-pink {

   background-color: #FFF5FA;
   border-color: #F2CEE0;

} .mp-pink h2 {

   background-color: #f2cee0;
   border-color: #bfa3b1;

}

.featarticleimg { margin: 1em 0.2em 0.2em 0em !important; }