/* A flexible grid solution based on the Skeleton CSS framework 2.0.4 */

/* Skeleton outer row and column definition to create the overall 30:70 divide */

.SkeletonGrid_outer-row {
  margin-bottom: 20px;
}

/* Clear floats after the columns */
.SkeletonGrid_outer-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create two equal columns that floats next to each other */
.SkeletonGrid_outer-column-left-25 {
  float: left;
  width: 25%;
  padding: 10px;
  height: 200px; 
  /* Should be removed. Only for demonstration */
}
/* Create two equal columns that floats next to each other */
.SkeletonGrid_outer-column-right-75 {
  float: left;
  width: 75%;
  padding: 10px;
  height: 400px;
  /* Should be removed. Only for demonstration */
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .SkeletonGrid_outer-column-left, .SkeletonGrid_outer-column-right {
    width: 100%;
  }
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.SkeletonGrid_container {
  position: relative;
  width: 100%;
  max-width: 70.125rem;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.SkeletonGrid_row {
  margin-bottom: 50px;
}  

@media (max-width: 550px) {
  .SkeletonGrid_row {
    margin-bottom: 15px;
  }
}

.SkeletonGrid_column,
.SkeletonGrid_columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .SkeletonGrid_container {
    width: 100%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .SkeletonGrid_container {
    width: 100%; }
  .SkeletonGrid_column,
  .SkeletonGrid_columns {
    margin-left: 4%; }
  .SkeletonGrid_column:first-child,
  .SkeletonGrid_columns:first-child {
    margin-left: 0; }

  .SkeletonGrid_one.SkeletonGrid_column,
  .SkeletonGrid_one.SkeletonGrid_columns                    { width: 4.66666666667%; }
  .SkeletonGrid_two.SkeletonGrid_columns                    { width: 13.3333333333%; }
  .SkeletonGrid_three.SkeletonGrid_columns                  { width: 22%;            }
  .SkeletonGrid_four.SkeletonGrid_columns                   { width: 30.6666666667%; }
  .SkeletonGrid_five.SkeletonGrid_columns                   { width: 39.3333333333%; }
  .SkeletonGrid_six.SkeletonGrid_columns                    { width: 48%;            }
  .SkeletonGrid_seven.SkeletonGrid_columns                  { width: 56.6666666667%; }
  .SkeletonGrid_eight.SkeletonGrid_columns                  { width: 65.3333333333%; }
  .SkeletonGrid_nine.SkeletonGrid_columns                   { width: 74.0%;          }
  .SkeletonGrid_ten.SkeletonGrid_columns                    { width: 82.6666666667%; }
  .SkeletonGrid_eleven.SkeletonGrid_columns                 { width: 91.3333333333%; }
  .SkeletonGrid_twelve.SkeletonGrid_columns                 { width: 100%; margin-left: 0; }

  .SkeletonGrid_one-third.SkeletonGrid_column               { width: 30.6666666667%; }
  .SkeletonGrid_two-thirds.SkeletonGrid_column              { width: 65.3333333333%; }

  .SkeletonGrid_one-half.SkeletonGrid_column                { width: 48%; }

  /* Offsets */
  .SkeletonGrid_offset-by-one.SkeletonGrid_column,
  .SkeletonGrid_offset-by-one.SkeletonGrid_columns          { margin-left: 8.66666666667%; }
  .SkeletonGrid_offset-by-two.SkeletonGrid_column,
  .SkeletonGrid_offset-by-two.SkeletonGrid_columns          { margin-left: 17.3333333333%; }
  .SkeletonGrid_offset-by-three.SkeletonGrid_column,
  .SkeletonGrid_offset-by-three.SkeletonGrid_columns        { margin-left: 26%;            }
  .SkeletonGrid_offset-by-four.SkeletonGrid_column,
  .SkeletonGrid_offset-by-four.SkeletonGrid_columns         { margin-left: 34.6666666667%; }
  .SkeletonGrid_offset-by-five.SkeletonGrid_column,
  .SkeletonGrid_offset-by-five.SkeletonGrid_columns         { margin-left: 43.3333333333%; }
  .SkeletonGrid_offset-by-six.SkeletonGrid_column,
  .SkeletonGrid_offset-by-six.SkeletonGrid_columns          { margin-left: 52%;            }
  .SkeletonGrid_offset-by-seven.SkeletonGrid_column,
  .SkeletonGrid_offset-by-seven.SkeletonGrid_columns        { margin-left: 60.6666666667%; }
  .SkeletonGrid_offset-by-eight.SkeletonGrid_column,
  .SkeletonGrid_offset-by-eight.SkeletonGrid_columns        { margin-left: 69.3333333333%; }
  .SkeletonGrid_offset-by-nine.SkeletonGrid_column,
  .SkeletonGrid_offset-by-nine.SkeletonGrid_columns         { margin-left: 78.0%;          }
  .SkeletonGrid_offset-by-ten.SkeletonGrid_column,
  .SkeletonGrid_offset-by-ten.SkeletonGrid_columns          { margin-left: 86.6666666667%; }
  .SkeletonGrid_offset-by-eleven.SkeletonGrid_column,
  .SkeletonGrid_offset-by-eleven.SkeletonGrid_columns       { margin-left: 95.3333333333%; }

  .SkeletonGrid_offset-by-one-third.SkeletonGrid_column,
  .SkeletonGrid_offset-by-one-third.SkeletonGrid_columns    { margin-left: 34.6666666667%; }
  .SkeletonGrid_offset-by-two-thirds.SkeletonGrid_column,
  .SkeletonGrid_offset-by-two-thirds.SkeletonGrid_columns   { margin-left: 69.3333333333%; }

  .SkeletonGrid_offset-by-one-half.SkeletonGrid_column,
  .SkeletonGrid_offset-by-one-half.SkeletonGrid_columns     { margin-left: 52%; }

}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.SkeletonGrid_u-full-width {
  width: 100%;
  box-sizing: border-box; }
.SkeletonGrid_u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.SkeletonGrid_u-pull-right {
  float: right; }
.SkeletonGrid_u-pull-left {
  float: left; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.SkeletonGrid_container:after,
.SkeletonGrid_row:after,
.SkeletonGrid_u-cf {
  content: "";
  display: table;
  clear: both; }

.SkeletonGrid_item {
  border: solid 2px transparent;
  transition: all 0.5s;
}

.SkeletonGrid_item:hover {
  border: solid 2px #0033CC;
  z-index: 2;
}

.SkeletonGrid_item-link {
  text-decoration: none;
  color: inherit;
}

.SkeletonGrid_item-title {
  font-size: 1.0125rem;
  padding: 5px 5px 0 5px;
  font-weight: 600;
  height: 5.0125rem;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  margin-bottom: 0.5725rem;
}

.SkeletonGrid_item-date {
  font-size: 0.8725rem;
  padding: 0 5px 0 5px;
}

.SkeletonGrid_item-img {
  width: 100%;
  margin-bottom: 15px;
  padding: 0 5px 0 5px;
}

@media (max-width: 550px) {
  .SkeletonGrid_item-img {
    width: 100%;
    margin-bottom: 25px;
  }
  .SkeletonGrid_item-title {
    height: auto;
  }
}

.SkeletonGrid_OuterBox {
  height: 600px; 
  overflow-y: scroll;
}