/*
About: Add sptites in blocks attention on site
Author: Drews
Version: 1.0
*/

.attention{padding:20px 20px 10px 70px;margin:0 0 30px;clear:both; border-radius: 10px} 
.attention.green{border-left:3px solid #4cb749;background:rgba(76,183,73,.1);}
.attention.blue{border-left:3px solid #8BBCED;background:#E0EDF9;}
.attention.red{border-left:3px solid #df2227;background:rgba(223,34,39,.1);}
.attention.yellow{border-left:3px solid #f7c616;background:rgba(247,198,22,.1);}

.attention p {padding-left: 40px;}

.attention.green::after,
.attention.red::after,
.attention.yellow::after
{
	clear: both;
	content: '';
	position: absolute;
	left: 20px;
	top: calc(50% - 18px);
	width: 32px;
    height: 32px;
    background: url('img/attenSprite1.png') ;
    width: 32px; height: 32px;
}

.attention.green::after {background-position: -5px -5px;}
.attention.red::after {background-position: -47px -5px;}
.attention.yellow::after {background-position: -89px -5px;}

@media screen and (max-width: 479px) {
	.attention.green::after,
	.attention.red::after,
	.attention.yellow::after
	{
		top: 20px;
		left: calc(50% - 18px);	
	}

	.attention p {padding: 30px 0 0 10px;}
}