/*
	@doc
	<name>border</name>
	<desc>Adds a border to the specified side(s). (all if none specified)</desc>
	<example>
		.myClass{
			@include border(#888, bottom, 2px, solid);
		}
	</example>
	<output>
		.myClass{
			border-bottom: #888 2px solid;
		}
	</output>
*/
/*
	@doc
	<name>box-shadow</name>
	<desc>Adds a box-shadow to the element (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include box-shadow(8px 8px 5px #777 false);
		}
	</example>
	<output>
		.myClass{
			-webkit-box-shadow: 8px 8px 4px #777;
			-moz-box-shadow: 8px 8px 4px #777;
			box-shadow: 8px 8px 4px #777;
		}
	</output>
*/
/*
	@doc
	<name>button-3D</name>
	<desc>Adds a cubic/3D effect to the element. Mostly for buttons, but could be used in other ways!</desc>
	<example>
		.myClass{
			@include button3D();
		}
	</example>
	<output>
		.myClass{

		}
	</output>
*/
/*
	@doc
	<name>filter</name>
	<desc>Adds a CSS filter (Cross-Browser Compatibility).</desc>
	<example>
		.myClass{
			@include(grayscale, 100%);
		}
	</example>
	<output>
		.myClass{
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: grayscale(100%);
		}
	</output>
*/
/*
	@doc
	<name>sprite</name>
	<desc>Styles a sprite..</desc>
	<example>
		.myButton{
			@include sprite(50px, 24px, 24px);
		}
	</example>
	<output>
		.myButton{
			background: url('../img/icons1.png') 0 50px no-repeat;
			height: 24px;
			width: 24px;
			display: inline-block;
		}
	</output>
*/
/*
	@doc
	<name>clearfix</name>
	<desc>Simple clearfix.</desc>
	<example>@include clearfix();</example>
	<output>
		.clearfix{
			content:"";
			display:table;
			clear:both;
		}
	</output>
*/
/*
	@doc
	<name>background-rollover</name>
	<desc>Changes the background if rolled over or hovered</desc>
	<example>
		#myDiv{
			@include background(example, rl, center top no-repeat gif);
		}
	</example>
	<output>
		#mySection{
			background: url(img/example-up.gif) center top no-repeat;
			&:hover {
				background: url(img/example-rl.gif) center top no-repeat;
			}
		}
	</output>
*/
/*
	@doc
	<name>background-slideEffect</name>
	<desc>Adds a slide effect to the background.</desc>
	<example>
		#myDiv{
			@include backgroundSlideEffect(example, 100px, .2s, #000);
		}
	</example>
	<output>
		#myDiv{
			position: relative;
			line-height: $distance;
			span{
				display: inline-block;
				position: relative;
				overflow: hidden;
				@include hideText;
				&:before, &:after{
					color: $color;
					position: absolute;
					top: 0;
					left:0;
					content: attr(data-content);
					@include background($image);
					@include transition(top, $speed);
				}
				&:after{
					top: $distance;
				}
			}
			&:hover{
				span{
					&:before{
						top: $distance * -1;
					}
					&:after{
						top: 0px;
					}
				}
			}
		}
	</output>
*/
/*
	@doc
	<name>display-show</name>
	<desc>Changes the display to show an element.</desc>
	<example>@include show(block);</example>
	<output>
		#myDiv{
			display:block;
		}
	</output>
*/
/*
	@doc
	<name>display-hide</name>
	<desc>Changes the display to hide an element.</desc>
	<example>@include hide()</example>
	<output>
		.myClass{
			display:none;
		}
	</output>
*/
/*
	@doc
	<name>noOverflow</name>
	<desc>Hides the overflow</desc>
	<example>@include noOverflow();</example>
	<output>
		#wrapper{
			overflow: hidden;
		}
	</output>
*/
/*
	@doc
	<name>z-index</name>
	<desc>Receives a section & optionnal additional value to set its index.</desc>
	<example>@include z-index(overall,55);</example>
	<output>
		.myTopElement{
			z-index:1155;
		}
	</output>
*/
/*
	@doc
	<name>stickyFooter</name>
	<desc>Makes the footer sticky.</desc>
	<example>@include stickyFooter(250px, 0px);</example>
	<output>{ ... };</output>
*/
/*
	@doc
	<name>contained-in mixins</name>
	<desc>Contained mixins</desc>
	<example>@include contained-in($selector);</example>
	<example>@include contained-in('.no-js');</example>
	<example>@include contained-in('#id', '.no-js', 'body');</example>
	<output>
		.no-js .class{
			@content;
		}
	</output>
*/
/*	@doc
	<name>prefixer</name>
	<desc>Adds browsers' different prefixes when needed. (doc. http://bourbon.io/docs/#prefixer)</desc>
	<example>@include prefixer(transform, rotate(5deg));</example>
	<output>
		.myElement{
			-webkit-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-ms-transform: rotate(5deg);
			--transform: rotate(5deg);
			transform: rotate(5deg);
		}
	</output>
*/
.article-full img {
  display: block;
}

.article-card,
.article-card-sans {
  display: flex;
  height: 100%;
}
.article-card .card-content,
.article-card-sans .card-content {
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  transition: background-color 0.125s ease-out, border-color 0.125s ease-out, color 0.125s ease-out;
}
.article-card .card-title,
.article-card-sans .card-title {
  font-size: 1.125em;
  margin-top: 0.25em;
  margin-bottom: 0.667em;
}
.article-card .card-summary,
.article-card-sans .card-summary {
  font-size: 0.875em;
}
.article-card:hover .card-content,
.article-card-sans:hover .card-content {
  background-color: #ededed;
}

.article-card {
  flex-direction: column;
  height: 100%;
}
.article-card .card-hero {
  position: relative;
  overflow: hidden;
  border-color: #d4d4d4;
  border-width: 1px 1px 0 1px;
  border-style: solid;
}
.article-card .card-hero img {
  display: block;
}
.article-card .card-content {
  padding: 1.75em;
}
.article-card .card-date {
  color: #737373;
  font-size: 0.8125em;
  margin: 0;
}

.article-card-sans .card-date {
  background-color: #ededed;
  border-color: #d4d4d4;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  color: #ffffff;
  font-weight: 700;
  display: flex;
  padding: 1em;
  line-height: 1.12;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.article-card-sans .card-date .day {
  display: block;
  font-size: 1.375em;
}
.article-card-sans .card-date .month {
  font-size: 0.875em;
}
.article-card-sans .card-content {
  flex: 1 1 auto;
  padding: 1.25em 1.75em;
}

.share {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share .share-label {
  font-size: 1.125em;
  font-weight: 700;
}

.complement-box {
  background-color: #ededed;
  padding: 1.75em 1.5em;
  text-align: center;
  margin-bottom: 1.875em;
}
.complement-box .box-heading {
  font-size: 0.8125em;
  margin-bottom: 0.25em;
}
.complement-box .box-content {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.12;
}

.pager .pager__item {
  padding: 0;
}
.pager .pager__item:before {
  content: none;
}
.pager .button {
  border: 1px solid #d4d4d4;
  display: block;
  font-weight: 700;
  margin: 1.5em auto 0;
  max-width: 10em;
  padding: 1em;
  text-align: center;
}

.more-link {
  margin-top: 30px;
}
.more-link a {
  background-color: #ffffff;
  background-image: url("../../images/icons/chevron-thin-right.svg");
  background-repeat: no-repeat;
  background-position: center right 0.5em;
  border: 1px solid #d4d4d4;
  color: #000000;
  display: block;
  font-size: 0.875em;
  padding: 1em 1.5em;
  transition: background-color 0.125s ease-out, border-color 0.125s ease-out, color 0.125s ease-out;
}
.more-link a:hover {
  background-color: #ededed;
}

@media (min-width: 480px) {
  .article-card {
    flex-direction: row;
  }
  .article-card .card-content {
    flex: 1 1 61.803%;
  }
  .article-card .card-hero {
    flex: 1 1 38.197%;
    border-width: 1px 0 1px 1px;
  }
  .article-card .card-hero img {
    height: 110%;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
  .more-link {
    margin-top: 0;
    min-width: 14em;
    position: absolute;
    right: 0;
    top: -5.125em;
    width: calc(33.333% - 19px);
  }
}
@media (min-width: 720px) {
  .article-card {
    flex-direction: column;
  }
  .article-card .card-hero {
    flex: none;
    border-width: 1px 1px 0 1px;
  }
  .article-card .card-hero img {
    position: static;
    max-width: 100%;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
  }
  .article-card .card-content {
    flex: 1 1 auto;
  }
}