body {
  background-color:#fef8f8;
  background-image: url("web_decor/background.jpg");
  background-size: cover;
  background-attachment: fixed;
}

:root {
	--Transparent-Dark-Green: rgba(53,97,78,0.75);
	--Dark-Green: #4b725c;
	--Transparent-Light-Green: rgba(34,110,75,0.50);
	--Light-Green: #7c997c;
	--Yellow: #f7f1e0;
	--Transparent-Orange: rgba(238,216,155,0.75);
	--Red: #8c082a;
	--Beige: #eae7dd;
	--Transparent-Blue: rgba(183,219,232,0.75);
	--Blue: #a6daed;
	--Purple: #9996b7;
	--Brown: #837162;
	--Dark-Brown: #49463E;
	--corner-height: 348px;     /* Высота углового узора, соответственно высота шапки */
	--corner-width: 384px;      /* Ширина углового узора, соответственно высота шапки */
	--Phone-Corner-Size: 160px; /* Высота и ширина птицы для телефона */
	--SideMenu_Width: 280px;    /* Ширина бокового меню */
}


/* обычный шрифт */
@font-face {
  font-family: Geologica;
  src: url(fonts/Geologica.ttf);
}
/* шрифт главных заголовков */
@font-face {
  font-family: Balkara_Condensed;
  src: url(fonts/Balkara_Condensed.ttf);
}
/* шрифт заголовков */
@font-face {
  font-family: Plovdiv;
  src: url(fonts/Plovdiv.ttf);
}
@font-face {
  font-family: Plovdiv_bold;
  src: url(fonts/Plovdiv_bold.ttf);
}
/* шрифт меню */
@font-face {
  font-family: Lumos;
  src: url(fonts/Lumos.ttf);
}
@font-face {
  font-family: Montserrat;
  src: url(fonts/Montserrat_Alternates.ttf);
}
/* шрифт курсив */
@font-face {
	font-family: LeoHand;
	src: url(fonts/LeoHand.ttf);
}

/* шрифт письма */
@font-face {
	font-family: Hitch_Hike;
	src: url(fonts/hand_written/Hitch_Hike.ttf);
}
@font-face {
	font-family: Comforter;
	src: url(fonts/hand_written/Comforter.ttf);
}


h1 {
  font-family: Balkara_Condensed, 'Comic Sans MS';
  color:#384a62;
  text-align: center;
  font-size: 28pt;
  quotes:	&laquo	»
}
h2 {
	padding-left: 20px;
	padding-right: 20px;
    font-family:Plovdiv;
    font-size: 25pt;
	text-align: center;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color: var(--Dark-Brown);
	quotes:	&laquo	»
}
h2 b {
	font-family:Plovdiv_bold;
	quotes:	&laquo	»
}
h3 {
    font-family:Plovdiv;
    font-size: 25pt;
	text-align: center;
    letter-spacing:1.5px;
    color: var(--Dark-Brown);
	quotes:	&laquo	»
}
h3 b {
	font-family: Plovdiv_bold;
	quotes:	&laquo	»
}
p {
  font-family: Geologica;
  font-size: 18pt;
  text-indent: 50px; /* красная строка */
  hyphens: auto;  /* перенос слов через дефис */
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  text-align: justify;
  word-spacing: 4px;
  line-height: 35px;
  margin-left: 35px;
  margin-right: 20px;
  quotes:	&laquo	»
}
.basic li {
  font-family: Geologica;
  font-size: 18pt;
  word-spacing: 4px;
  margin-left: 0px;
  quotes:	&laquo	»
}
a:link {
  font-family: Montserrat;
  font-weight: bold;
  font-size: 18pt;
  color: #dc2577;
  quotes:	&laquo	»
}
a:visited {
  font-family: Montserrat;
  font-weight: bold;
  font-size: 18pt;
  color: #8c082a;
  quotes:	&laquo	» /* код русских кавычек */
}
a:link {
  color: var(--Red);
}
table {
	border: 3px solid var(--Dark-Green);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
th {
	background-color: var(--Light-Green);
	color: var(--Yellow);
	font-size: 13pt;
	padding: 5px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}



header { /* Это контейнер из 3-ёх блоков: птица, меню и заголовок страницы*/
	position: static;
	top: 0px;
	left: 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
}



/* блок с птицей */
header .left-corner-header {
	background-image:url("web_decor/left_corner_header.png");
	background-repeat: no-repeat;
	height: var(--corner-height);
	width: var(--corner-width);
	background-position: left top;
}
header .messenger {
	/*position:fixed;*/
	margin: 10px;
	z-index: 1; /* верхний слой видимости */
}
header .messenger_phone {
	display: none;
	z-index: 1; /* верхний слой видимости */
	
	&:hover a {
		background: none;
	}
}
header .messenger a{
  display: block;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s; /* Время эффекта */
 
  &:hover {  /* вид птицы при наведении мыши */
	background: none;
	transform: scale(1.2); /* Увеличиваем масштаб */
  }
}



/* блок с меню и заголовком страницы */
header .container-top {
	display: flex;
	flex-direction: column; /* Заголовок будет расположен под меню - в колонку */
	width: calc(100% - var(--corner-width));
}

/* блок меню */

/* главные пункты меню на шапке сайта */
header .topmenu {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top: 0px;
	padding-left: 0px;
	list-style-type: none;
	background-image:url("web_decor/header.png"); /*Повторяющийся элемент*/
}
header .topmenu > li, .home{
	float: left;
	display: block;
	margin-right: 5px;
	background: url("web_decor/header_menu.png");
	background-repeat: no-repeat;
	height: 105px;
	width: 248px;
	cursor: pointer;
}
header .topmenu li a, .topmenu li b, .home a{
  float: none;
  display: block;
  margin-top: 50px;
  margin-left: 11px;
  margin-right: 11px;
  font-family: Lumos;
  color: var(--Yellow);
  text-align: center;
  text-decoration: none;
  font-size: 19pt;
  font-weight: bold;
  text-transform:uppercase;
  text-shadow:3px 1px 2px rgba(0,0,0,0.75); /* Тень текста для объема */
  
	&:hover, &:active {  /* вид ссылок меню при наведении мыши */
		background: var(--Transparent-Blue);
		text-decoration:underline;
		border-radius:15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	}
}
/* вложенное меню */
header .topmenu ul {
  display: none;
  position: absolute;
  top: 90px;
  width: 248px;
  list-style-type: none;
  padding: 0px;  /* внутренние поля */
  background: var(--Transparent-Dark-Green); /* Выглядит полупрозрачным */
  border-radius:15px;
  -moz-border-radius:15px;
  -webkit-border-radius: 15px;
  z-index: 1; /* вложенное меню находится на 1 слое поверх всех элементов */
}
header .topmenu ul > li{
	float:none;  /* выстраивает вложенное меню вертикально */
	background: none;
	height: 3em;
	line-height: 2em;
}
header .topmenu ul > li a{ 
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 4px;  /* размеры голубого выделения при наведении мыши */
	padding-bottom:4px;
}
header .topmenu li > ul > li a{
	text-transform:none;
	font-weight:normal;
}
header .topmenu ul > li:last-of-type {
	margin-bottom: 15px;
}
header .topmenu li:active ul { /* , .topmenu li:hover ul вид всего выпадающего меню при наведении мыши */
	display: block;
}
header .topmenu li:hover ul { /* , .topmenu li:hover ul вид всего выпадающего меню при наведении мыши */
	display: block;
}


/*--------- Заголовки обычных страниц ---------*/
header .welcome-title-decor {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
header .welcome-title-decor-left {
	background: url("web_decor/main_devider_left.png");
	background-repeat: no-repeat;
	width: 150px;
	height: 103px;
}
header .welcome-title-decor-right {
	background: url("web_decor/main_devider_left.png");
	transform: scale(-1, 1);
	background-repeat: no-repeat;
	width: 150px;
	height: 100px;
}
header .welcome-title-decor-center {
	background: url("web_decor/main_devider_center.png");
	background-repeat: no-repeat;
	width: 608px;
	height: 100px;
}
header .welcome-title-decor-line {
	background: url("web_decor/main_devider_line.png");
	background-repeat: repeat;
	width: calc(50% - 608px / 2 - 150px);
	height: 100px;
}
header .welcome-title-text {
    padding-top: 10px;
	font-family: Balkara_Condensed;
    font-size: 30pt;
	text-indent: 0px;
    letter-spacing:5px;
	line-height: 1.2em;
	margin: 0px;
	text-align: center;
	color: var(--Blue);
    text-shadow:4px 4px 0px #a0957c;
	-webkit-text-stroke: 2px var(--Dark-Brown); /* Для браузеров, использующих движок WebKit (Google Chrome). */
	text-stroke: 2px var(--Dark-Brown); /* Те же значения для браузеров, которые не используют движок WebKit.*/
}
/*--------- Заголовки страниц со встроенным меню ---------*/
header .menu-title-decor-left {
	background: url("web_decor/mmain_devider_left.png");
	background-repeat: no-repeat;
	width: 244px;
	height: 119px;
}
header .menu-title-decor-right {
	background: url("web_decor/mmain_devider_left.png");
	transform: scale(-1, 1);
	background-repeat: no-repeat;
	width: 244px;
	height: 119px;
}
header .menu-title-decor-center {
	background: url("web_decor/mmain_devider_center.png");
	background-repeat: no-repeat;
	width: 632px;
	height: 119px;
}
header .menu-title-decor-line {
	background: url("web_decor/mmain_devider_line.png");
	background-repeat: repeat;
	width: calc(50% - 632px / 2 - 244px);
	height: 119px;
}
/*--------- Заголовки страниц историй ---------*/
header .story-title-decor-left {
	background: url("web_decor/story_devider_left.png");
	background-repeat: no-repeat;
	width: 151px;
	height: 97px;
}
header .story-title-decor-right {
	background: url("web_decor/story_devider_left.png");
	transform: scale(-1, 1);
	background-repeat: no-repeat;
	width: 151px;
	height: 97px;
}
header .story-title-decor-center {
	background: url("web_decor/story_devider_center.png");
	background-repeat: no-repeat;
	width: 611px;
	height: 97px;
}
header .story-title-decor-line {
	background: url("web_decor/story_devider_line.png");
	background-repeat: repeat;
	width: calc(50% - 611px / 2 - 157px);
	height: 97px;
}



.container-center { /* Блок основного текста и меню сбоку */
	display: flex;
	flex-direction: row;
	position: static;
	top: 0px;
	left: 0px;
}

/* Блок с боковым меню */
.left {
	width: 300px;
}

/* Блок с текстом */
main {
	position: relative;
	top: -60px;
	width: calc(100% - 300px); /* размер по ширине бокового меню */
	height: calc(100% - var(--corner-height)); /* размер по высоте углового узора */
}

main .article {
	position: relative;
	top: -210px;
	background-color: var(--Beige);
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	margin: 15px;
	z-index: 0; /*Слой должен находиться под узором стиля decor*/
}
main .article p:last-of-type {
	padding-bottom: 15px;
}
main .article h2 {
	padding-top:25px;
}
main .article h3 {
    padding-top:25px;
}
main .Hitch_Hike p {
  font-family: Hitch_Hike;
  font-size: 35pt;
  line-height: 50px;
  margin-top: -15px;
  margin-bottom: -25px;
}
main .Comforter p {
  font-family: Comforter;
  font-size: 35pt;
  line-height: 60px;
  margin-top: -10px;
  margin-bottom: -25px;
}
main .article img {
	display:block;
	border: 15px ridge var(--Brown);
}
main .article hr, .article_no_decor hr {
	margin: -50px auto 10px;
	height: 40px;
	border: none;
	border-bottom: 3px solid var(--Dark-Green);
	box-shadow: 0 20px 20px -20px #333;
	width: 70%; /* ширина расчитывается с учётом узора decor по углам */
}
main .article_chapter {
	text-align: left;
	font-family: LeoHand;
	font-size: 24pt;
	letter-spacing:2pt;
	line-height: 1.1em;
	color: var(--Dark-Brown);
}
main .article a:hover {
	color: var(--Red);
}
main .article_description {
	padding-bottom: 15px;
	padding-top: 15px;
	padding-left: 15px;
	font-family: Geologica;
	text-indent: 0.5em;
	text-align: justify;
	color: var(--Dark-Brown);
	border-left: 3px solid var(--Brown);
	border-bottom: 1px solid var(--Brown);
	border-bottom-left-radius: 25px;
	-moz-border-bottom-left-radius: 25px;
	-webkit-border-bottom-left-radius: 25px;
}
main .decor {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 1;
}
main .decor-left {
	background: url("web_decor/story_corner.png");
	background-repeat: no-repeat;
	width: 198px;
	height: 189px;
}
main .decor-right {
	background: url("web_decor/story_corner.png");
	transform: scale(-1, 1);
	background-repeat: no-repeat;
	width: 198px;
	height: 189px;
}



main .article_no_decor {
	border-top: 5px double var(--Brown);
	border-bottom: 5px double var(--Brown);
	border-radius: 80px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
}
main .article_no_decor h2 {
	padding-top:25px;
	text-decoration: overline;
	text-decoration-color: var(--Light-Green);
}
main .article_no_decor h3 {
	padding-top: 0px;
}


main .pick-topic {
	margin-top: 25px;
	border-top: 5px double var(--Brown);
	border-radius: 80px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
}
main .pick-topic h3 {
	text-decoration: overline;
	text-decoration-color: var(--Purple);
}
main .pick-topic table {
	border: 0px;
	width: 100%;
}
main .pick-topic > table tr {
	padding-top: 50px;
	border-bottom: 3px solid var(--Dark-Green);
}
main .pick-topic > table td {
	padding-left: 25px;
	padding-top: 25px;
	width: 90%;
	padding-bottom: 5px;
	text-align: left;
	align-items: left;
	border-bottom: 3px solid var(--Dark-Green);
	font-family: Geologica;
	color: var(--Dark-Brown);
	transition: 0.2s ease-in;
}
main .pick-topic > table a {
	color: var(--Dark-Brown);
	padding: 5px;
	text-shadow:3px 0px 2px rgba(124,124,124, 0.6);
	
	&:hover {
		color: var(--Red);
		background-color: var(--Beige);
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		text-shadow:3px 0px 2px rgba(124,124,124, 0.3);
	}
}
main .header {
	display:flex;
	flex-wrap: inline;
	align-items: center;
	justify-content: center;
}
main .header-button {
	display:flex;
	flex-wrap: inline;
	align-items: center;
	justify-content: center;
	margin: auto;
	color: var(--Red);
	background-color: var(--Beige);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	border: 2px outset var(--Brown);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;

	&:hover, &:active {
		background-color: var(--Yellow);
	}
}


/* альбом */
main .album-top { /* верх альбома */
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 48px;
}
main .album-bottom { /* низ альбом */
	display: flex;
	flex-direction: row;
	transform: scale(1, -1);
	width: 100%;
	height: 48px;
}
	/* содержание верха и низа альбома */
	main .album-center-topping {
		background: url("web_decor/album_top_center.png");
		background-repeat: no-repeat;
		width: 163px;
		height: 48px;
	}
	main .album-between-topping {
		background: url("web_decor/album_top_between.png");
		width: calc(50% - 163px / 2 - 88px );
		height: 48px;
	}
	main .album-left-topping {
		background: url("web_decor/album_corner.png");
		background-repeat: no-repeat;
		width: 88px;
		height: 48px;
	}
	main .album-right-topping {
		background: url("web_decor/album_corner.png");
		background-repeat: no-repeat;
		transform: scale(-1, 1);
		width: 88px;
		height: 48px;
	}
/* начиная отсюда, расписаны внутренности альбома */
main .album { 
	display: flex;
	flex-direction: row;
	width: 100%;
}
main .album-center { /* кольца альбома */
	background: url("web_decor/album_center.png");
	width: 163px;
	height: 970px;
	/* параметры для того, чтобы работала стрелка */
	display: flex;
	transform: scale(-1, 1);
	align-items: center;
	justify-content: center;
}
main .album-between { /* лист альбома */
	display: flex;
	flex-direction: column;
	background: #cac1ac;
	width: calc(50% - 163px / 2 - 88px );
	height: 970px;
	flex-wrap: inline;
	align-items: center;
	justify-content: center;
}
	/* вид картинок и трекста в альбоме */
	main .album-between > img {
		width: 90%;
		border: 15px double var(--Brown);
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		transition: 0.5s;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		transition-delay: 0s;
		-webkit-transition-delay: 0s;
		-moz-transition-delay: 0s;
		-o-transition-delay: 0s;
		z-index: 1;
		
		&:active, &:hover {  /* вид изображения при наведении мыши */
			transform: scale(2); /* Увеличиваем масштаб */
			transition-delay: 0.6s;
			-webkit-transition-delay: 0.6s;
			-moz-transition-delay: 0.6s;
			-o-transition-delay: 0.6s;
		}
	}
	main .album-between p {
		padding-top: 10px;
		line-height: 1em;
		margin-top: 0em;
		margin-bottom: 0.8em;
		margin-left: 0px;
		margin-right: 0px;
	}
	main .album_pricing { /* разграничение между описанием картинки и информации о цене */
		border-top: 5px solid var(--Brown);
		padding-top: 2em;
	}
main .album-left { /* края альбома */
	display: flex;
	background: url("web_decor/album_side_between.png");
	width: 88px;
	height: 970px;
	align-items: center;
	justify-content: center;
}
main .album-right { /* края альбома */
	display: flex;
	background: url("web_decor/album_side_between.png");
	transform: scale(-1, 1);
	width: 88px;
	height: 970px;
	align-items: center;
	justify-content: center;
}
	.album-arrow {
		background-color: var(--Transparent-Light-Green);
		width: 90px;
		height: 90px;
		border-radius: 50%;
		transform: scale(-1, 1);
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		transition: 0.5s;
		
		&:active, &:hover {  /* вид стрелок в альбоме при наведении мыши */
			transform: scale(-1, 1) translateX(5%); /* смещается в сторону */
		}
	}
#album_phone {
	display: none;
}

/* Блок с левым меню */
.left-menu {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style-type: none;
}
.left-menu ul{
	width: var(--SideMenu_Width);
	padding: 0px;
	margin: 0px;
}
.left-menu li{
	display: flex;
	justify-content: center; /* центрирование по горизонтали */
	background: var(--Transparent-Light-Green);
	padding-top: 10px;
	padding-bottom: 10px;
	width: var(--SideMenu_Width);
	border-bottom: 3px solid var(--Dark-Brown);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	box-sizing: border-box;
	-webkit-transition: 1s;
    -moz-transition: 1s;
	transition: 1s;
	
	&:hover {
		background-color: var(--Yellow);   /* вид ссылок меню при наведении мыши */
		transform: translateX(3%);
		text-decoration:underline;
		color: var(--Brown);
	}
	&:hover a { /*вид ссылок меню при наведении мыши */
		text-decoration:underline;
		background: none;
		color: var(--Brown);
	}
}
.left-menu li a{
	float: none;
	display: block;
	width: var(--SideMenu_Width);
	margin: 10px;
	color: var(--Yellow);
	text-align: center;
	text-decoration: none;
	font-size: 15pt;
	font-weight: bold;
	text-transform: none;
}
.left-menu ul > ul li {
	padding-top: 0px;
	padding-bottom: 0px;
	background: var(--Transparent-Dark-Green);
}
.left-menu ul > ul li a {
	font-size: 10pt;
}

/*Адаптация под ширину экрана */
.e-mail { /* кнопка "напиши мне", которая появляется в боковом меню */
    display: none;
	width: var(--SideMenu_Width);
	height: 100px;
	align-items: center;
	text-align: center;
	background: var(--Transparent-Blue);
	border-bottom: 3px solid var(--Purple);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	box-sizing: border-box;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
	transition: 0.5s;
	
	&:hover {
		background-color: var(--Yellow);
		transform: translateY(-2%);
	}
}
.e-mail > a {
	padding: 5px;
	font-size: 15pt;
	
	&:hover {
		background: none;
		color: #8c082a;
	}
}

.home_phone { /* кнопка "главная" на телефоне */
	display: none;
	width: 112px;
	height: 112px;
	
	&:hover a {
		background: none;
	}
}

.left-menu-toggle {
	display:none;
    position: fixed;
    left: 0px;
    top: calc(20px + var(--Phone-Corner-Size));
	height: 55px;
	width: 55px;
	margin-left: 3px;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    background-color: var(--Transparent-Orange);
	background-image: url(web_decor/menu_pick.png);
	background-repeat: no-repeat;
	align-items: center;
    cursor: pointer;
    z-index: 3;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
	
	&:hover {
		transform: translateX(8%);
	}
}
#left-menu-toggle:checked ~ .left-menu {
    left: 0px;
	-webkit-transition: .5s ease-out;
    -moz-transition: .5s ease-out;
	transition: .5s ease-out;
}
#left-menu-toggle:checked ~ .left-menu-toggle {
    background-image: url(web_decor/menu_pick2.png);
	background-color: var(--Light-Green);
	left: calc(5px + var(--SideMenu_Width));
	-webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

#computer-albums {display: flex;}
#phone-albums    {display: none;}

/* перемещение между страницами альбома в телефонном варианте */
main .album-phone-arrows {
		display: none;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
}

@media (max-width: 1700px) { /* вариант без углового узора */
  .e-mail {
    display: flex;
  }
  .left-corner-header {
	display: none;
  }
  header .welcome-title-decor {
	display: none;
  }
  header .welcome-title-text {
    padding: 10px;
  }
  header .container-top {
	  width: 100%;
  }
  main {
	top: 0px;
  }
}
@media (max-width: 1350px) { /* упрощённый вид меню */
	header .topmenu > li, .home{
		background: var(--Transparent-Light-Green);
		width: 200px;
		height: 40px;
		margin-top: 35px;
		border-top: 3px solid #37624f;
		border-bottom: 3px solid #347552;
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		box-sizing: border-box;
		
		&:hover, &:active { /* при наведении и нажатии */
		background: var(--Transparent-Blue);
		}
	}
	header .topmenu li a, .topmenu li b, .home a{
	  margin: 5px;
	  font-size: 17pt;
	}
	/* вложенное меню */
	header .topmenu ul {
	  position: relative;
	  margin-top: -115px;
	  width: 200px;  
	}
	header .topmenu ul li {
	  background: none;
	  border-top: 0px;
	  border-bottom: 0px;	  
	}
	
	main .article_table td > p{
		margin-left: 20px;
		margin-right: 25px;
	}
	
	main .album-center, main .album-between, main .album-left, main .album-right { /* кольца альбома */
		height: 1150px;
	}
	
	#album_phone {display: block;}
	#album_full {display: none;}
	
	main .album-between, main .album-between-topping {
		width: calc(100% - 163px - 88px );
	}
	main .album-arrow {
		background-color: var(--Light-Green);
	}
}

@media (max-width: 1070px) /*, (orientation: portrait)*/  { /* для узкого экрана на компьютере и для телефона, планшета в вертикальном положении */
	header {
		background-image: url("web_decor/header_phone.png");
		background-repeat: no-repeat;
	}
	h1 {
	  font-size: 20pt;
	}
	h2 {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 16pt;
		letter-spacing: 0.2em;
	}
	h3 {
		font-size: 16pt;
		letter-spacing:0.2em;
	}
	p {
	  font-size: 14pt;
	  text-indent: 25px; /* красная строка */
	  word-spacing: 2px;
	  line-height: 20px;
	  margin-left: 15px;
	  margin-right: 15px;
	}
	.basic li {
	  font-size: 14pt;
	}
	a:link {
	  font-size: 14pt;
	}
	a:visited {
	  font-size: 14pt;
	}
	
	/* блок с птицей */
	header .left-corner-header {
		display: block;
		background-image: none;
		height: var(--Phone-Corner-Size);
		width: var(--Phone-Corner-Size);
	}
	header .messenger, .home, .e-mail, #SideMenu_Decor { /* убираем большую птицу и кнопку главного меню, из бокового меню убираем кнопку для отправки письма */
		display: none;
	}
	header .messenger_phone, .home_phone { /* появляется маленькая птица, кнопка "главная" на телефоне, узор под заголвком возвращается */
		display: block;
	}
	
	/* блок верхнего меню */
	header .topmenu {
		background-image: none; /* убираем барашки сверху (убираем узоры за верхним меню) */
	}
	/* вложенное меню */
	header .topmenu ul {
	  background: var(--Dark-Green);
	}
	header .topmenu > li, .home{
		background: var(--Light-Green);
		margin-top: 10px;
		
		&:hover, &:active { /* при наведении и нажатии */
		background: var(--Blue);
		}
	}
	header .topmenu li a, .topmenu li b, .home a{
	  margin: 5px;
	  font-size: 17pt;
	}
	/* вложенное меню */
	header .topmenu ul {
	  position: relative;
	  margin-top: -115px;
	  width: 200px;  
	}
	header .topmenu ul li {
	  background: none;
	  border-top: 0px;
	  border-bottom: 0px;	  
	}
	
	header .welcome-title-text {
		padding-top: 5px;
		font-size: 20pt;
		letter-spacing:2px;
		line-height: 1.1em;
		text-shadow:2px 2px 0px #a0957c;
		-webkit-text-stroke: 1px var(--Dark-Brown); /* Для браузеров, использующих движок WebKit (Google Chrome). */
		text-stroke: 1px var(--Dark-Brown); /* Те же значения для браузеров, которые не используют движок WebKit.*/
	}
	
	/* Блок основного текста и меню сбоку */
	.container-center { 
		display: block;
	}
	
	main {
		position: relative;
		width: 100%; /* размер по ширине бокового меню */
	}
	main .article {
		top: -30px;
		margin: 0px;
	}
	main .article_chapter, .article_chapter a {
		font-size: 18pt;
		letter-spacing:0pt;
		line-height: 0.7em;
	}
	main .decor {
		align-items: center;
		justify-content: center;
	}
	main .decor-left {
		background: url("web_decor/story_corner_phone.png");
		background-repeat: no-repeat;
		width: 142px;
		height: 30px;
	}
	main .decor-right {
		background: url("web_decor/story_corner_phone.png");
		transform: scale(-1, 1);
		background-repeat: no-repeat;
		width: 142px;
		height: 30px;
	}
	
	/* Блок с левым меню */
	.left-menu-toggle {
		display:block;
	}
	.left-menu {
		position: fixed;
		top: 200px;
		left: calc(-1.1 * var(--SideMenu_Width) );
		-webkit-transition: left 0.3s;
		-moz-transition: left 0.3s;
		transition: left 0.3s;
		z-index: 3;
	}
	.left-menu li{
		background: var(--Light-Green);
	}
}
@media (max-width: 750px) { /* большинтво экранов телефона */
	.e-mail { /* в боковом меню вставляем кнопку для отправки письма */
		display: flex;
		background: var(--Light-Green);
		border-top: 3px solid var(--Dark-Brown);
		border-bottom: 3px solid var(--Dark-Brown);
		
		&:hover a {
			color: var(--Brown);
		}
	}
	.e-mail a {
		padding: 0px;
		color: var(--Beige);
		text-decoration: none;
		
		&:hover {
			color: var(--Brown);
		}
	}
	header .messenger_phone { /* маленькая птица исчезает из главного меню */
		display: none;
	}
	
	#computer-albums {display: none;}
	#phone-albums    {display: block;}
	
	main .pick-topic {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	main .pick-topic table tr {
		padding-top: 50px;
		border-bottom: 3px solid var(--Dark-Green);
	}
	main .pick-topic table td {
		padding-top: 40px;
	}
	main .album-top, main .album-left, main .album-center, main .album-right , main .album-bottom { /* Убираем рисунок альбома */
		display: none;
	}
	main .album-between { /* лист альбома */
		position: relative;
		display: flex;
		background: var(--Beige);
		flex-direction: column;
		width: 100%;
		height: 100%;
		padding: 25px;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}
	main .album-phone-arrows {
		display: flex;
	}
	main .album-arrow {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		transform: scale(-0.4, 0.4);
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		transition: 0.5s;
		z-index: 2;
		
		&:active, &:hover {  /* вид стрелок в альбоме при наведении мыши */
			transform: scale(-0.4, 0.4) translateX(5%); /* смещается в сторону */
		}
	}
}