/* background-colors @ Configuration/TypoScript/Base/page/cssInline/47536/10_xblogitem.ts */

.xBlogItem {
  margin-top: 0.9375rem;
}

.xBlogItem p.dateline {
	float: left;
	margin: 0;
	line-height: 1;
	position: relative;
	top: 0.3rem;  
}

.xBlogItem p.dateline span {
  padding-right:0.4rem;
}

.aspectratio {
  position: relative;
  height: 0;
  overflow: hidden;
}

.aspectratio .xBlogItem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.colQty .aspectratio {
  margin-bottom: 1.875rem;
}
.row.colQty {
  padding-left:0.49375rem;
  padding-right:0.49375rem;
}
.colQty > .columns {
  padding-left:0.49375rem;
  padding-right:0.49375rem;
}

.rectangle-01-01 {
  padding-bottom: 100%;
}
.rectangle-01-02 {
  padding-bottom: 200%;
}
.rectangle-02-01 {
  padding-bottom: 50%;
}
.rectangle-02-03 {
  padding-bottom: 150%;
}
.rectangle-03-02 {
  padding-bottom: 66.67%;
}
.rectangle-03-04 {
  padding-bottom: 133.33%;
}
.rectangle-04-03 {
  padding-bottom: 75%;
}
.rectangle-09-16 {
  padding-bottom: 177.78%;
}
.rectangle-16-09 {
  padding-bottom: 56.25%;
}

.xBlogItem p.inlineleft {
  display: inline;
  float: left;
  margin:0;
  padding-right: .25rem;
}

.row.colQty {
  /*margin-bottom:3.2rem;*/
}
.colQty-2 .xBlogItem h2 {
  font-size: 1.8rem;
}
.colQty-2 .xBlogItem h3 {
  font-size: 1.4rem;
}

.colQty-3 .xBlogItem h2 {
  font-size: 1.6rem;
}
.colQty-3 .xBlogItem h3 {
  font-size: 1.2rem;
}

.colQty-4 .xBlogItem h2 {
  font-size: 1.3rem;
}
.colQty-4 .xBlogItem h3 {
  font-size: 1rem;
}

.colQty-6 .xBlogItem h2 {
  font-size: 1.2rem;
}
.colQty-6 .xBlogItem h3 {
  font-size: 1rem;
}

@media only screen and (min-width: 64.0625em) {
  .colQty-5 > .columns,
  .colQty-5 > .col-sm-12 {
    width: 20%;
  }
  .colQty-7 > .columns,
  .colQty-7 > .col-sm-12 {
    width: 14%;
  }
  .colQty-8 > .columns,
  .colQty-8 > .col-sm-12 {
    width: 12.5%;
  }
}


/* GRID */

.xBlogItem {
  /*background-color:#DDD;*/
}
.xBlogItem.backgroundchange {
  overflow:hidden;
}
.xBlogItem .main.bottom {
  padding-top:0.9375rem;
}
.xBlogItem .marginal.right {
  padding-left:0;
}
.xBlogItem .marginal.left {
  padding-right:0;
}

.xBlogItem .staff.social {
  margin-bottom:1.25rem;
}

.xBlogItem .staff.social a {
  font-size:2rem;
  padding-right:0.2rem;
}

.xBlogItem .video-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.xBlogItem .video-embed > * {
  width: 100%;
  height: 100%;
  position: absolute;
}

.xBlogItem .video-embed iframe {
  height: 100%;
}

.xBlogItem .video-embed svg {
  width: 15%;
}

.xBlog .video-embed .xblog-play {
  background-color: #eaeaea;
  padding: 1rem .325rem 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.xBlogMain.backgroundchange .main.bottom,
.xBlogMain.backgroundchange .main.top,
.xBlogMain.backgroundchange .woGrid,
/* .xBlogItem is needed in context with EXT:slick */
.xBlogItem.backgroundchange .main.bottom,
.xBlogItem.backgroundchange .main.top,
.xBlogItem.backgroundchange.woGrid {
  padding-top:0.9375rem;
}
.xBlogMain.backgroundchange .main.bottom,
.xBlogMain.backgroundchange .main.top,
.xBlogMain.backgroundchange .woGrid,
/* .xBlogItem is needed in context with EXT:slick */
.xBlogItem.backgroundchange .main.bottom,
.xBlogItem.backgroundchange .main.top,
.xBlogItem.backgroundchange.woGrid {
  padding-left:0.9375rem;
  padding-right:0.9375rem;
}
.xBlogMain.backgroundchange .main.left,
/* .xBlogItem is needed in context with EXT:slick */
.xBlogItem.backgroundchange .main.left {
  padding-left:1.85rem;
}
/* GRID */


