section.article_tips
{
	overflow: hidden;
	background: #f2f2f2;

	box-sizing: border-box;
	
	width: 100%;
}

section.article_tips h2
{
	color: #09172d;
}

section.article_tips .content
{
	padding: 0 calc(50vw - (976px / 2)) 62px;
	position: relative;

	width: 100%;
}

section.article_tips .content:after
{
	background: url(../../../images/slats-light-gray.png) center center repeat;

	position: absolute;
	 bottom: 0;
	 left: 0;
	 z-index: 1;

	height: 62px;
	width: calc(100% - 95px);

	content: "";
}

.tips
{
	position: relative;
	margin: 0 auto;
	display: flex;
	 flex-flow: row wrap;
	 justify-content: space-between;

	width: 100%;

	counter-reset: article_tips_iterator;
}

.tips:after
{
	flex: auto;

	max-width: 274px;
	width: 28%;

	content: "";
}

.tips .tip
{
	color: #484848;
	font: normal 400 16px/1.875 "Helvetica Neue", Helvetica, sans-serif;
	letter-spacing: 0.01em;

	border-top: solid 1px #e5e5e5;
	display: flex;
	 flex-direction: column;
	margin: 0;
	padding: 40px 0;
	position: relative;

	min-height: 330px;
	max-width: 274px;
	width: 28%;
}

.tips .tip:before
{
	color: #ececec;
	font: normal 700 280px/1 "Barlow Condensed", sans-serif;
	letter-spacing: -0.01em;
	speak: none;
	text-align: right;

	position: absolute;
	 top: 20px;
	 right: 0;
	 z-index: 0 !important;
	 
	width: 100%;

	counter-increment: article_tips_iterator;
	content: counter(article_tips_iterator, decimal-leading-zero);
}

.tips .tip > *
{
	display: block;
	z-index: 1;
}

.tips .tip .tip-title
{
	color: #09172d;
	font: normal 700 28px/32px "Barlow Condensed", sans-serif;
	letter-spacing: 0.01em;
    text-transform: initial;

	margin: 0 0 20px;
}

.tips .tip a
{
	color: #484848;
	font-weight: 600;
    text-transform: initial;

	border-bottom: #484848 solid 1px;
	position: relative;
}

@media only screen and (max-width: 1176px)
{
	section.article_tips .section_header,
	section.article_tips .tips
	{
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media only screen and (max-width: 767px)
{
	.tips
	{
		flex-direction: column;

		width: 100%;
	}

	.tips .header
	{
		padding-right: 30px;
		padding-left: 30px;

		width: 100%;
	}

	.tips .content
	{
		margin: 0;

		max-width: 100%;
		width: 100%;
	}

	.tips .tip
	{
		font-size: 15px;
		margin: 0 auto;

		min-height: 280px;
		max-width: none;
		width: 100%;
	}
	
	.tips .tip:before
	{
		font-size: 64vmin;
		line-height: 1;
	}
	
	section.article_tips .tips
	{
		padding-left: 30px;
		padding-right: 30px;
	}
}

.javascript-support section.article_tips.animated_tips .tip
{
	transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 1.25s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

@media only screen and (max-width: 767px)
{
	.javascript-support section.article_tips.animated_tips .tip
	{
		transform: none;
		transition: none;
	}
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(2)
{
	transition-delay: .2s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(3)
{
	transition-delay: .3s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(4)
{
	transition-delay: .4s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(5)
{
	transition-delay: .5s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(6)
{
	transition-delay: .6s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(7)
{
	transition-delay: .7s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(8)
{
	transition-delay: .8s;
}

.javascript-support section.article_tips.animated_tips:not(.transitioned) .tip:nth-of-type(9)
{
	transition-delay: .9s;
}

.javascript-support section.article_tips.animated_tips:not(.triggered) .tip
{
	opacity: 0;
	transform: translateY(100%);
}