@-webkit-keyframes flip-right-to-left {
	 0% {
		 -webkit-transform: rotateY(0);
		 transform: rotateY(0);
	 }
	 100% {
		 -webkit-transform: rotateY(-180deg);
		 transform: rotateY(-180deg);
	 }
 }
@keyframes flip-right-to-left {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
	100% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
}

@-webkit-keyframes flip-left-to-right {
	0% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	100% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
}
@keyframes flip-left-to-right {
	0% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	100% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}
}

.portrait {
    width: auto;
    height: 275px;
    border-radius: 10px;
    float: none; /* Размещение изображения слева */
    margin: 0 6px 3px 0; /* Отступы вокруг изображения */
}

.portrait2 {
    width: auto;
    height: 100px;
    border-radius: 10px;
    float: none; /* Размещение изображения слева */
    margin: 0 6px 3px 0; /* Отступы вокруг изображения */
}

.flip-left-to-right {
	-webkit-animation: flip-left-to-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	animation: flip-left-to-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.flip-right-to-left {
	-webkit-animation: flip-right-to-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	animation: flip-right-to-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
	font-family: TTLimesSlab;
	background-color: black;
	overflow: hidden;
}

body {
	background: url(images/1f73c2bda1.png) no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#pressLeft {
	float: left;
}

#pressRight {
	float: right;
}

#book_environment a {
	display: block;
	font-size: 36px;
	width: 140px;
	text-align: center;
}

a:active, a:visited, a:link {
	color: white;
	border: 2px solid white;
	transition: .5s;
	text-decoration: none;
}

a:hover {
	color: #0b0047;
	border: 2px solid #0b0047;
	background-color: white;
	transition: .5s;
}

#wrapper {
	width: 100%;
	height: 100%;
}

#book_environment {
	width: 1140px;
	height: 760px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transform: rotateX(5deg);
	transform: rotateX(5deg);
}

img.picture_preloader {
	position: absolute;
	width: 500px;
	height: 350px;
	left: 30px;
	top: 150px;
	z-index: 999;
}

#control {
	width: 100%;
	height: 60px;
}

#book {
	width: 570px;
	height: 700px;
	perspective: 2500px;
	transition: 1s;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}

.page_project {
	position: absolute;
	width: 570px;
	height: 700px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform-origin: center left;
	right: 0;
}

h1 {
	color: #0b0047;
	text-align: center;
	margin: 0px 0px 16px 0px;
}

.page_side_left, .page_side_right {
	position: absolute;
	width: 100%;
	backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	height: 700px;
	
}

.page_side_left {

	background-color: #fdfdfd;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC45MjQiLz48c3RvcCBzdG9wLWNvbG9yPSIjZDNkM2QzIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN2c2dnKSIgLz48L3N2Zz4=);
	background-image: -webkit-gradient(linear, 100% 0%, 0% 0%,color-stop(0.924, rgb(238, 238, 238)),color-stop(1, rgb(211, 211, 211)));
	background-image: -webkit-linear-gradient(right,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);
	background-image: linear-gradient(to left,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);
	background-image: -ms-linear-gradient(right,rgb(238, 238, 238) 92.4%,rgb(211, 211, 211) 100%);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
}

.page_side_right {
	transform-origin: center center;
	transform: rotateY(180deg);

	background-color: #fdfdfd;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZDNkM2QzIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjA4Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
	background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, color-stop(0, rgb(211, 211, 211)), color-stop(0.08, rgb(238, 238, 238)));
	background-image: -webkit-linear-gradient(right, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);
	background-image: linear-gradient(to left, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);
	background-image: -ms-linear-gradient(right, rgb(211, 211, 211) 0%, rgb(238, 238, 238) 8%);

}

.working_area {
	padding: 48px;
}

.page_side_left p.texts, .page_side_right p.texts  {
	font-size: 20px;
	color: #0b0047;
	text-align:justify;
	display: block;
	margin: 0;
}

p.markletter:first-letter {
	font-family: "Times New Roman", Times, serif;
	font-size: 120%;
	color: red;
}

p.poems {
	text-align: center;
	font-style: italic;
	font-size: 20px;
	color: #0b0047;
	display: block;
	margin: 0;
}

p.poemss {
	text-align: justify;
	font-style: italic;
	font-size: 20px;
	color: #0b0047;
	display: block;
	margin: 0;
}



.picture_articlee {
	width: 50%;
	height: auto;
}

.picture_book {
	width: calc(100% + 2px);
	height: auto;
	display: block;
	margin: 0 auto;
	margin-left: -2px;
	margin-top: -2px;
}

.area_menu-main {
	text-align: center;
	margin: 0;
	padding: 0;
}

.area_menu-main li {
	min-width: 140px;
	display:inline-block;

}

.area_menu-main li a {
	display: block;
	font-size: .9em;
	color: #eee;
	letter-spacing: 1px;
	text-decoration: none;
	font-size: 24px;
	padding: 7px;
}

.area_menu-main li > a:hover {
	color: #0b0047;
}

.page_side_left .working_area {
	display: flex;
	flex-direction: column;
	align-items: center;
  }

  .picture_articlee {
	display: block;
	margin: 0 auto; 
	width: 100%; 
	height: auto; 
  }
  
  .poems, .texts {
	text-align: center;
	font-size: 20px;
	color: #0b0047;
	display: block;
	margin: 0;
  }
  
  .picture_article {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
    transition: 1s; 
	border: 3px solid #00af64;
  }
  .picture_article:hover {
    filter: none;
  }
  
  h1 {
	text-align: center;
	margin-top: 0;
  }
  
  @media (min-width: 768px) {
	.page_side_left .working_area {
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
  
	.picture_article {
	  width: 48%;
	}
	
	.picture_article:nth-child(odd) {
	  order: -1;
	}
  }