/*

=============== INLINE =================

q					quote - цитаты маленькие
u					underline - что не должно бросаться в глаза
b					bold - должно при просмотре стр. быть видно (имена, книги)
em					для "Высшая Социология"
i					italic - 
strong			bold red - 
span				red - 
small, .small	smaller - 
.tech .checkit	tech notes - ПЕРЕВЕСТИ ВСЕ В КОММЕНТАРИИ!!!


=============== БЛОЧНЫЕ ===============


-------------- нечетный: left, четный: center

h1, h2			разделы
h3, h4			жирный текст названий книг
h5, h6			важные тексты (болд)


-------------- блоки оформлния

aside				smaller (notes)
blockquote		для цитат (добавляет кавычки, если ставить не в <p>)
.quote			---
.insert			более узкая вставка -10% по бокам


-------------- 
.epigraf			эпиграф
.aut				эпиграф, подпись наклонная справа

.p-margin		vert. paragraph margin for different stories
.p-1				interviewer question
.center 			center text
.centered 		center lyrics blocks

--------- для врапперов

.c-dark					темная цветовыя схема
.s-east					кириллическая компоновка текстов
.s-no-margin			без межпараграфных отступов
.sh-l						left shift for lists
.sh-l-10 20 25			left shift for lists

.hr10 .w10 (20, 50)	ширина линейки, %


*/


/*================== RESET ====================*/

/* html { } */

* { margin:0; padding:0;
	/*box-sizing: border-box;*/
	/*border: 1px solid #900;*/
}

div, img {
	display: block;
	position: relative;
}

ul, li {
	list-style: none;
	text-decoration: none;
}



/*==================== DEFAULT: LIGHT-WEST ==========*/

body {
	--color-00:#a0000a;	/* RED:				warning, hover				*/
	--color-01:#581808;	/* BROWN:			h1-h6 LT						*/
	--color-02:#95683b;	/* LT-BROWN:		hr, quote					*/
	--color-03:#b78147;	/* LT-LT-BROWN:	link							*/
	--color-04:#e8e7d4;	/* LT-BEZHE			back-LT 	old: #e5e1cC	*/
	--color-05:#261804;	/* BROWN:			back-DR						*/
	/* dark style */
	--color-06:#090503;	/* BROWN:			back-DR						*/
	--color-07:#cc9966;	/* YELL:				text, like c3				*/
	--color-08:rgb(70, 100, 40);

	position: relative;
	background-color: var(--color-04);
	color: var(--color-01);

	font-family: "helvetica_neu", Tahoma, Arial, SansSerif;
	line-height: 1.3;
	letter-spacing: 0.2px;
	font-size: 14pt;
	font-style: normal;
	/*quotes: "“" "”" "«" "»";*/
	quotes: "" "" "" "";

}

.wrapper {
	/*border: 1px solid #777;*/
	margin-left: calc(50% - 450px);
	margin-top: 12px;
	width: 900px;
	/*padding: 12px 0 8px 0;*/
	/*border-bottom: 3px solid var(--color-02);*/
}

hr {
	margin: 20px 0 16px 0;
	height: 6px;
	border-width: 0;
	border-radius: 3px;
	background: var(--color-02);
	opacity: 0.5;
}

.hr00 hr, .wrapper .w00 {
	opacity: 0;
}

.hr10 hr, .wrapper .w10 {
	margin-right: 45%;
	margin-left: 45%;
}

.hr20 hr, .wrapper .w20 {
	margin-right: 40%;
	margin-left: 40%;
}

.hr50 hr, .wrapper .w50 {
	margin-right: 25%;
	margin-left: 25%;
}

.hr100 hr, .wrapper .w100 {
	margin-right: 0;
	margin-left: 0;
}


a, a:link, a:visited, a:active {
	/*text-decoration: none;*/
	color: var(--color-03);
	transition: 0.2s ease-out;
}

a:hover {
	color: var(--color-00);
}




/*====== BLOCK styles =======*/

p{
	margin: 3pt 0 7pt 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: inherit;
	margin-bottom: 7px;
}

h1, h3, h5 {
	text-align: center;
}

h2, h4, h6 {
	text-align: left;
}

h1, h2 {
	font-size: 160%;
	margin-top: 6px;
	}

h3, h4 {
	font-size: 120%;
	margin-top: 3px;
}

h5, h6 {
	font-size: 100%;
	margin-top: 1px;
	line-height: 1.25;
	}

aside {
	font-size: 80%;
	line-height: 110%;
	margin: 7px 0 2px 0;
}

.s-no-margin p { margin: 0; } /* no paragraph margin for WEST */

.p-margin{						/* paragraph margin */
	margin-top: 30px;
}

.p-1{								/* interviewer question */
	/*font-weight: bold;*/
	color: var(--color-08);
}

.center{ text-align: center; }

.centered{
	display: inline-block;
	margin-left: 50%;
	transform: translateX(-50%);
	/*border: 2px solid gray; */
}


.epigraf { margin-left: calc(75% - 150px); margin-top: 10pt; }
.aut     { text-align: right; font-style: italic;  margin-top: 4pt; }


.insert  { margin: 6px 10%; }

blockquote, .quote {
	color: var(--color-02);
	/*font-style: italic;*/

	padding: 0pt 5pt 0pt 12pt;
	border-left: 7pt solid rgba(90,60,10,0.3);
	border-right: 7pt solid rgba(90,60,10,0.3);
}


/*====== left shift for lists */
	.sh-l    { margin-left: 12pt; }
	.sh-l-10 { margin-left: 10%; }
	.sh-l-20 { margin-left: 20%; }
	.sh-l-25 { margin-left: 25%; }

	.ti {text-indent: -21pt;}	/*==left shift for 1st line==*/
	.ti0 {text-indent: -22pt; margin-left: 22pt;} /*==compensate==*/


/*====== INLINE styles =======*/

small, .small {
	font-size: 80%;
	line-height: 1.15;
}

strong {
	color: var(--color-00);
	font-weight: 600;
}

span {
	color: var(--color-00);
}

b {
	font-weight: 600;
}

em {
	font-style: italic;				/*normal;*/
	color: var(--color-00);
}

.checkit {
	display: none;
	color: darkred;
	background-color: yellow;
}

q {					/* inline quotations*/
	color: var(--color-02);
	font-style: italic;
}

/* наборы цветов */


.c-dark {
	background-color: var(--color-05);
	color: #d09960;
}


/*============ стили оформления текста ===== EAST */

.s-east p {
	margin: 0;
	text-indent: 10pt;		/* 1st paragraph line left indent*/
}

.s-east h2, .s-east h4, .s-east h6 {
	padding-left: 14px;
}

.s-east h1, .s-east h2 {
	margin: 10pt 0 3pt 0;
}

.s-east h3, .s-east h4, .s-east h5, .s-east h6 {
	margin: 7pt 0 3pt 0;
}




/*============ MEDIA =============*/

video {
	max-width: 100%;
	height: auto;
}

.gallery-flex{
	display: flex;
	flex-direction: row;
	/*justify-content: space-between;*/
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

.gallery-flex a{
	margin: 8px 10px;
}




/*====== exclusive elements ======= */

.books img {			/*====icons on main page */
	display: inline;
	height: 17px;
}

#head-img {
	height: 90px;
	margin: 10px 0 6px 0;
}


.structure{
	display: none;
}

.tech{
	display: block;
	position: absolute;
	font-size: 9px;
	margin-left: 910px;
}