@charset "UTF-8";

article { margin: 0 !important; }

article > div > div > img,
article > div > div > ol > li > a > img,
article > div > div > ol > li > span > img {
	display : block;
	width : 100%;
	height : auto;
	}
article > div > div > ol > li > span {
	display: block;
	position: relative;
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px rgba(212, 212, 212, 1);
}
	
article > div > div.plate {
	background-color : rgba(136, 34, 37, 1);
	color : rgba(255, 255, 255, 1);
	padding : 40px 0;
	}
	
article > div > div.plate > ul {
	display : flex;
    justify-content : center;
    flex-wrap : wrap;
    width : 100%;
    max-width : 1320px;
    margin : 0 auto;
    padding : 0;
    list-style : none;	
	}
	
article > div > div.plate > ul > li { text-align : center; }
article > div > div.plate > ul > li > div { text-transform : uppercase; }

article > div > div.plate > ul > li > div.accent { 
	margin : 20px 0 15px 0;
	white-space : nowrap; 
	}

article > div > div.info {
	position : relative;
	max-height : 550px;	
	background-color : rgba(246, 246, 246, 1);
    overflow : hidden;
    transition : all 0.25s ease;
	}

article > div > div.info.more,
article > div > div > ol > li > div.more { max-height : 2000px; }	
	
article > div > div.info:after {
	position : absolute;
	bottom : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : 40px;
	box-shadow: 0 -30px 15px rgba(246, 246, 246, 1);
	background-color : rgba(255, 255, 255, 1);	
	border-top : solid 1px rgba(212, 212, 212, 1);
	content : '';
	}
	
article > div > div.info > ul {
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	margin : 0 auto;
	padding : 0;
    list-style : none;
   	}
   	
article > div > div.info > ul > li { padding : 0 0 0 40px; }
   	
article > div > div.info > ul > li > strong { 
	text-transform : uppercase;
	white-space : nowrap; 
	}
	
article > div > div.info > ul > li > ul,
article > div > div > ol > li > div > ul {
	width : 100%;
	margin : 0;
	list-style : none;	
	}

article > div > div.info > ul > li > ul	{ padding : 0; }
article > div > div > ol > li > div > ul { padding : 0 0 20px 0; }
	
article > div > div.info > ul > li > ul > li,
article > div > div > ol > li > div > ul > li {
	position : relative;
	width : 100%;
	padding-left : 20px;
	padding-top : 10px;
	}
	
article > div > div.info > ul > li > ul > li::before,
article > div > div > ol > li > div > ul > li::before {
	display : block;
	position : absolute;
	top : 15px;
	left : 0;
	z-index : 10;	
	width : 5px;
	height : 5px;
	background-color : rgba(136, 34, 37, 1);
	border-radius : 50%;
    content : '';
   	}
   	
article > div > div > ol {
	display : flex;
	flex-wrap : wrap;
	margin : 0 auto;
	padding : 0;
    list-style : none;
    counter-reset : num;
   	}
   	
article > div > div > ol > li { position : relative; }
	
article > div > div > ol > li::before {
	display : block;
	position : absolute;
	top : 0;
	left : 0;
	z-index : 10;	
	width : 40px;
	height : 40px;
	background-color : rgba(136, 34, 37, 1);
	color : rgba(255, 255, 255, 1);
	border-radius : 50%;
    content : counter(num);
    counter-increment : num;
    font : normal 16px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
    text-align : center;
   	}
   	
article > div > div > ol > li > strong {
	display : inline-block;
	padding : 10px 0 0 0;
	min-height: 60px;
	}
	
article > div > div > ol > li > a {
	display : block;
	position : relative;
	margin-top : 20px;
	padding-top : 20px;
	border-top : solid 1px rgba(212, 212, 212, 1);
	}
	
article > div > div > ol > li > a::before,
article > div > div > ol > li > a::after {
	position: absolute;
    left : 0;
    right : 0;
    transition : all 0.25s ease;
	}
	
article > div > div > ol > li > a::before {
    top: 20px;
    bottom: 0;
    z-index : 10; 
    background-color : rgba(0, 0, 0 ,0);
    content : ''; 
	}

article > div > div > ol > li > a::after {
    top : 50%;
    z-index : 20;
    color : rgba(255, 255, 255 ,1);
    opacity : 0;
    font : normal 20px/20px 'moscowhome', Arial, Tahoma, Verdana, sans-serif;
    text-align : center;
    content : '\e986';
    }
	
article > div > div > ol > li > a:hover::before { background-color : rgba(0, 0, 0 ,0.5); }
article > div > div > ol > li > a:hover::after { opacity : 1; }

article > div > div > ol > li > div {
	position : relative;
	max-height : 20px;
	padding-top : 20px;
	padding-bottom : 50px;
    overflow : hidden;
	transition : all 0.25s ease;
	}
	
article > div > div > ol > li > div:after {
	position : absolute;
	bottom : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : 40px;
	background-color : rgba(255, 255, 255, 1);	
	border-top : solid 1px rgba(212, 212, 212, 1);
	content : '';
	}

@media only screen and (min-width : 1081px) {
	article > div > div { margin : 0 60px 20px 60px; }
	article > div > div.plate { margin : 0 60px 60px 60px !important; }
		
	article > div > div.plate > ul > li { 
		width : 30%;
		margin : 0 1%;
		}

	article > div > div.plate-4 > ul > li { 
		width : 20%;
		margin : 0 1%;
	}
		
	article > div > div > ol > li {
		width : 30%;
		margin : 20px 1% 0 1%;
		padding-left : 60px;	
		}
	
	article > div > div.plate > ul > li > div.accent { font : 500 40px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div.plate > ul > li > div { font : 400 18px/22px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div.info { padding : 40px 40px 80px 40px; }
	article > div > div.info > ul > li { width : 50%; }	
	article > div > div.info > ul > li > strong { font : 500 18px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div > ol > li > strong { font : 500 18px/24px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	}
	
@media only screen and (min-width : 721px) and (max-width : 1080px) {
	article > div > div { margin : 0 40px 20px 40px; }
	article > div > div.plate { /*margin : 0 0 40px 0 !important;*/ }
		
	article > div > div.plate > ul > li { 
		width : 90%;
		margin : 0 5% 40px 5%;
		}
		
	article > div > div > ol > li {
		width : 46%;
		margin : 20px 2% 0 2%;
		padding-left : 60px;	
		}
	
	article > div > div.plate > ul > li:last-child { margin : 0 5% !important; }	
	article > div > div.plate > ul > li > div.accent { font : 500 40px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }	
	article > div > div.plate > ul > li > div { font : 400 18px/22px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }	
	article > div > div.info { padding : 20px 40px 80px 40px; }
	article > div > div.info > ul > li { width : 100%; }
	article > div > div.info > ul > li:last-child { margin-top : 20px; }	
	article > div > div.info > ul > li > strong { font : 500 16px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div > ol > li > strong { font : 500 16px/22px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	}
	
@media only screen and (max-width : 720px) {
	article > div > div { margin : 0 20px 10px 20px; }
	article > div > div.plate { /*margin : 0 0 20px 0 !important;*/ }
		
	article > div > div.plate > ul > li { 
		width : 90%;
		margin : 0 5% 40px 5%;
		}
		
	article > div > div > ol > li {
		width : 100%;
		margin : 20px 0 0 0;
		padding-top : 50px;
		}
	
	article > div > div.plate > ul > li:last-child { margin : 0 5% !important; }
	article > div > div.plate > ul > li > div.accent { font : 500 60px/60px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div.plate > ul > li > div { font : 400 16px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }	
	article > div > div.info { padding : 20px 20px 80px 20px; }
	article > div > div.info > ul > li { width : 100%; }
	article > div > div.info > ul > li:last-child { margin-top : 20px; }
	article > div > div.info > ul > li > strong { font : 500 14px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	article > div > div > ol > li > strong { font : 500 14px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif; }
	}