@charset "UTF-8";

section.about {
	position : relative;
	width : 100vw;
	background-image : url("../img/about.jpg"); 
	background-position : 50% 50%;
	background-repeat : no-repeat;
	background-size : cover;
	}
	
section.about > div { 
	position : relative;
	max-width : 1360px;
	margin : 0 auto;	
	}
	
section.about > div > h6 {
	position : relative;
	padding : 0 0 40px 0;
	margin : 0;
	text-align : center;
	}
	
section.about > div > h6::before {
	position : absolute;
	bottom : 12px;
	left : calc(50% - 20px);
	z-index : 10;
	width : 40px;
	height : 10px;
	background-color : rgba(225, 100, 40, 1);
	content : "";
	}

section.about > div,
section.about > div > h6,
section.about > div > blockquote { text-align : center; }

section.about > div > blockquote {
	border : solid 10px rgba(255, 255, 255, 1);
	background-color : rgba(109, 109, 109, 0.5);
	color : rgba(255, 255, 255, 1);
	}
	
section.about > div > a {
	display : inline-block;
	padding : 0 20px;
	background-color : rgba(224, 103, 39, 1);
	color : rgba(255, 255, 255, 1);
	font: normal 18px/50px "Bold", sans-serif;
	text-decoration : none;
	}
	
section.about > div > ul {
	display : flex;
    flex-wrap : wrap;
    justify-content : space-between;
	margin : 0;
	list-style : none;
	overflow : hidden;
	}
	
section.about > div > ul > li {
	position : relative;
	top : 100px;
	text-align : left;
	padding : 0 0 0 30px;
	font: normal 18px/28px "Regular", sans-serif;
	opacity : 0;
	transition : all 0.5s ease;
	}
	
section.about > div > ul > li.selected {
	top : 0;
	opacity : 1;
	}
	
section.about > div > ul > li::after {
	position : absolute;
	left : 30px;
	bottom : calc(100% + 5px);
	z-index : 10;
	content : "Более";
	}
	
section.about > div > ul > li::before {
	position : absolute;
	left : 0;
	top : 0;
	z-index : 10;
	height : 100%;
	width : 10px;
	background-color : rgba(224, 103, 39, 1);
	content : "";
	}
	
section.about > div > ul > li > span {
	position : absolute;
	left : 30px;
	top : calc(100% + 5px);
	z-index : 10;
	}
	
@media only screen and (min-width : 1441px) {
	section.about > div { padding : 60px; }
	section.about > div > h6 { font: normal 72px/72px "Headers", sans-serif; }
	
	section.about > div > blockquote { 
		padding : 30px 60px;
		margin : 60px 0;
		font: normal 24px/28px "Regular", sans-serif; 
		}
	
	section.about > div > ul { padding : 80px 60px; }
	section.about > div > ul > li > h5 { font: normal 80px/80px "Headers", sans-serif; }
	}
	
@media only screen and (min-width : 1281px) and (max-width : 1440px) {
	section.about > div { padding : 50px; }
	section.about > div > h6 { font: normal 63px/63px "Headers", sans-serif; }

	section.about > div > blockquote { 
		padding : 25px 50px;
		margin : 50px 0;
		font: normal 22px/26px "Regular", sans-serif;
		}
		
	section.about > div > ul { padding : 70px 50px; }
	section.about > div > ul > li > h5 { font: normal 70px/70px "Headers", sans-serif; }	
	}
	
@media only screen and (min-width : 961px) and (max-width : 1280px) {
	section.about > div { padding : 40px; }
	section.about > div > h6 { font: normal 54px/54px "Headers", sans-serif; }
	
	section.about > div > blockquote { 
		padding : 20px 40px;
		margin : 40px 0;
		font: normal 20px/24px "Regular", sans-serif;
		}
		
	section.about > div > ul { padding : 60px 40px; }
	section.about > div > ul > li > h5 { font: normal 60px/60px "Headers", sans-serif; }
	}
	
@media only screen and (min-width : 481px) and (max-width : 960px) {
	section.about > div { padding : 30px; }
	section.about > div > h6 { font: normal 45px/45px "Headers", sans-serif; }
	
	section.about > div > blockquote { 
		padding : 15px 30px;
		margin : 30px 0;
		font: normal 18px/22px "Regular", sans-serif;
		}
		
	section.about > div > ul { padding : 25px 0 0 0; }
	
	section.about > div > ul > li { 
		width : 100%; 
		margin : 50px 0;
		}
	
	section.about > div > ul > li > h5 { font: normal 50px/50px "Headers", sans-serif; }
	}
	
@media only screen and (max-width : 480px) {
	section.about > div { padding : 20px; }
	section.about > div > h6 { font: normal 36px/36px "Headers", sans-serif; }
	
	section.about > div > blockquote { 
		padding : 10px 20px;
		margin : 20px 0;
		font: normal 16px/20px "Regular", sans-serif;
		}
		
	section.about > div > ul { padding : 20px 0 0 0; }
	
	section.about > div > ul > li { 
		width : 100%; 
		margin : 40px 0;
		font: normal 16px/26px "Regular", sans-serif;
		}
	
	section.about > div > ul > li > h5 { font: normal 40px/40px "Headers", sans-serif; }
	}