.about_us {
  width: auto;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-left: 10%;
  margin-right: 10%;
}

h1 {
  color: #373737;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  width: 100%;

}

h1:first-letter { font-size: 1.2em; }

.news {
  width: auto;
  margin-left: 10%;
  margin-right: 10%;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-box-orient: horizontal;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
  -ms-box-pack: space-around;
  -ms-flex-pack: justify;
}

.news_item {
  width: 28%;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-box-orient: vertical;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-flow: column wrap;
  -webkit-box-orient: vertical;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
  -ms-box-pack: flex-start;
  -ms-flex-pack: justify;
  text-decoration: none;
}

.news_item>img {
  width: 100%;
  height: auto;
}

h2 {
  color:#0F0F0F;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
}

h2:first-letter {
  text-transform: uppercase;
}

.news_text {
  color: #0F0F0F;
  width: 100%;
  font-size: 14px;
  margin-bottom: 30px;
  text-align: justify;
}

/* the wrapper */
.teet {
    font-size:14px;
    line-height:18px;
    height: 90px;       /* 5x line height */
    width: 100%;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 72px;  /* 4x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 5 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 5 lines */
.hidedots2 {
    background: white;
    width: 150px;
    height: 90px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}
/*----------*/