@charset "UTF-8";

div#map {
	width : 100%;
    height : 450px;
    }
	
article > div > ul {
	width : 100%;
	margin : 0;
	list-style : none;
	display : flex;
	flex-wrap : wrap;
	}
	
article > div > ul > li > strong { 
	display : block; 
	font : 500 16px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	}
	
article > div > ul > li > strong:first-child {	
	padding : 0 0 20px 0;
	margin : 0 0 20px 0;
	border-bottom : solid 1px rgba(227, 227, 227, 1); 
	text-transform : uppercase;
	}
	
article > div > ul > li { position : relative; }
	
article > div > ul > li::before {
	position : absolute;
	top : 0;
	left : 0;
	z-index : 10;
    font : normal 30px/30px 'moscowhome', Arial, Tahoma, Verdana, sans-serif;
    background-color : rgba(255, 255, 255, 1);
	color : rgba(215, 215, 215, 1);
	}
	
article > div > ul > li:nth-child(1)::before { content : '\e947'; }
article > div > ul > li:nth-child(2)::before { content : '\e915'; }
article > div > ul > li:nth-child(3)::before { content : '\e92b'; }

@media only screen and (min-width : 1081px) {
	article > div > ul { 
		padding : 60px 60px 0 60px;
		justify-content : center;
		}

	article > div > ul > li { 
		width : 33%;
		padding : 0 50px;
		}
	}
	
@media only screen and (min-width : 721px) and (max-width : 1080px) {		
	article > div > ul { padding : 40px 40px 0 40px; }

	article > div > ul > li { 
		width : 45%; 
		margin : 20px 5% 20px 0;
		padding : 0 0 0 50px;
		}
	}
	
@media only screen and (max-width : 720px) {	
	article > div > ul { padding : 20px 20px 0 20px; }

	article > div > ul > li { 
		width : 100%; 
		margin : 20px 0;
		padding : 40px 0 0 0;
		}
	}