.main {
  padding:1%;
  display:grid;
  grid-column-gap:10px;
  grid-template-columns:40% 60%;
  grid-template-rows:1;
  align-items:start;
  justify-items:stretch;
}
.katgrid {
  padding-left:5%;
  padding-right:5%;
  display:grid;
  grid-column-gap:10px;
  grid-template-columns:25% 25% 25% 25%;
  grid-template-rows:100%;
  align-items:center;
  justify-items:stretch;
}
.slides {
  text-align: center;
}
.mainmobile {
  padding:1%;
}
.showmain {
  padding:5%;
}
.main1 {
  grid-column:1;
  grid-row:1;
}
.main2 {
  grid-column:2;
  grid-row:1;
}
.foot {
  padding:2%;
  background-color:#fff;
  display:grid;
  grid-column-gap:10px;
  grid-template-columns:50% 50%;
  grid-template-rows:1;
  align-items:start;
  justify-items:stretch;
}
.foot1 {
  padding:2%;
  grid-column:1;
  grid-row:1;
}
.foot2 {
  padding:2%;
  grid-column:2;
  grid-row:1;
}
.headcols {
  display:grid;
  grid-column-gap:10px;
  grid-template-columns:2.5% 12.5% 10% 10% 10% 10% 10% 10% 10% 15%;
  grid-template-rows:1;
  align-items:center;
  justify-items:start;
}
.articlegrid {
  padding:1%;
  display:grid;
  grid-column-gap:10px;
  grid-template-columns:15% 85%;
  grid-template-rows:1;
  align-items:start;
  justify-items:start;
}
.articleimg {
  grid-column:1;
  grid-row:1;
}
.articleinfo {
  grid-column:2;
  grid-row:1;
}
.container {
  padding-left:0.75%;
  padding-right:0.75%;
  padding-top:0.05%;
  padding-bottom:0.05%;
  margin:1%;
  border:rgb(110, 120, 132);
  border-radius:2px;
  background-color:#fff;
  box-shadow:3px 3px 5px rgba(0, 0, 0, 0.3);
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 25%;
  width: auto;
  padding: 16px;
  color: #444;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.05);
}
.header {
  background-color:#fff;
  border-bottom:1px solid rgba(0, 82, 98, 0.15);
}
ul {
  margin:0px;
  padding: 0px;
  list-style: none;
  width=100%
}
ul li {
  float:left;
  width: 25%;
  height: 40px;
  background-color:#fff;
  line-height: 40px;
  text-align: center;
  font-size:20px;
  font-weight: bold;
}
ul li a {
  display: block;
  border:1px solid rgba(0, 82, 98, 0.15);
}
ul li a:hover {
  background-color: rgba(0, 82, 98, 0.15);
}
ul li ul li {
  display: none;
  width: 100%;
}
ul li:hover ul li {
  display:block;
}
.news {
  background-color:#fff;
  border-bottom:1px solid rgba(0, 82, 98, 0.15);
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.headergrid {
  display:grid;
  justify-items:left;
  justify-content:start;
  grid-column-gap:5px;
  grid-template-columns:2.5% 12.5% 10% 10% 10% 10% 10% 10% 10% 15%;
  grid-template-rows:1;
  align-items:center;
}
.header1 {
  grid-column:1;
  grid-row:1;
  vertical-align:middle;
}
.header2 {
  grid-column:2;
  grid-row:1;
  vertical-align:middle;
}
.welcome {
  grid-column:1;
  grid-row:1;
}
.articles {
  grid-column:2;
  grid-row:1;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 0.25s;
}
a {
  color:#444;
  font-weight:bold;
  text-decoration:none;
}
body {
  font-family:"Open Sans";
  margin:0px;
  background-color:rgba(60, 142, 158, 0.15);
  color:#444;
}