.blogShort {
  border-bottom: 1px solid #ddd;
}

}

.add {
  padding: 10%;
  height: 300px;
}
.navbar-inverse{
  border: none;
  border-radius: 0;
}
.navigationmenu {
  display: flex;
  width: 100%;
  align-items: center;
}

.navbar.navbar-default {
  background-color: #055b5c;
  color: #fff
}

.navbar.navbar-default .active a {
  cursor: default;
  background-color: #08979D;
  color: #fff;
}

.nav-sidebar {
  width: 100%;
  padding: 8px 0;
  border-right: 1px solid #ddd;
}

.nav-sidebar a {
  color: #08979D;
  -webkit-transition: all 0.08s linear;
  -moz-transition: all 0.08s linear;
  -o-transition: all 0.08s linear;
  transition: all 0.08s linear;
}

.nav-sidebar .active a {
  cursor: default;
  background-color: #34ca78;
  color: #fff;
}

.nav-sidebar .active a:hover {
  background-color: #37D980;
}

.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.btn-blog {
  color: #ffffff;
  background-color: #37d980;
  border-color: #37d980;
  border-radius: 0;
  margin-bottom: 10px
}

.btn-blog:hover,
.btn-blog:focus,
.btn-blog:active,
.btn-blog.active,
.open .dropdown-toggle.btn-blog {
  color: white;
  background-color: #34ca78;
  border-color: #34ca78;
}

h3.default {
  color: #08979D;
}

h3.default a {
  color: #08979D;
  font-size: 3rem;
}

h2.default {
  color: #08979D;
}

.margin10 {
  margin-bottom: 10px;
  margin-right: 10px;
}

/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #6Ec6ca;
  padding: 20px 10px;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  padding-left: 5px;
  width: 100%;
}

/* Right column */
.rightcolumn {
  float: left;
  padding-left: 5%;
  width: 100%;
}

.rightcolumn iframe {
  width: 100%;
}

.pagination {
  display: flex;
  justify-content: center;
}

.topnavigation {
  display: flex;
  align-items: center;
  width: 100%;
}

.topnavigation .logo {
  display: flex;
}

#myNavbar ul {
  display: inline-block;
  font-size: 2rem;
}

#myNavbar ul li .active {
  padding: 0 10px;
}

.row .col-12 {
  margin: 15px 0;
}

h3.default {
  color: #08979D;
  padding-bottom: 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 2rem;
  line-height: 25px;
  border-radius: 4px;
}

.goclick .btn {
  color: white;
  background-color: #34ca78;
  border-color: #34ca78;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #08979D;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* HTML links not clickable on mobile, but are clickable on desktop. I have one solution. Try this */
.goclick {
  position: relative;
  z-index: 9;
}

.navbar-inverse .navbar-brand {
  padding-top: 15px;
}
.navbar{
  border-radius: 0;
}
@media screen and (max-width:768px) {
  .navbar-header {
    display: block;
    width: 100%;
    margin-left: 15px;
  }
  .navbar-brand a{
    font-size: 25px;
  }
  div#myNavbar {
    margin: 0;
}
  #myNavbar ul li .active {
    width: 100%;
  }
  
  .navigationmenu {
    display: flex;
    flex-direction: column;
    padding-left: 0;
  }
  #myNavbar ul {
    display: block;
    width: 100%;
  }
  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  @media screen and (max-width: 576px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
    .rightcolumn {
      padding-left: 0;
      text-align: center;
      width: 100%;
    }
    .navbar-header {
      width: 100%;
      display: block;
     margin: 0;
     
    }
    .navbar-brand a{
      font-size: 13px;
    }

  }