/*body{
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(90deg, #fff 50%, #4a1010 50%);
}
input[type=checkbox] { display: none; }
img{ width: 100%; height: 100%; }
.book{ display: flex; }
#cover{ width: 250px; height: 400px; }
.flip-book{ width: 250px; height: 400px; position: relative; perspective: 1500px; }
.flip{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-origin: left; transform-style: preserve-3d; transform: rotateY(0deg); transition: .5s; color: #000; }
p{ font-size: 14px; line-height: 24px; }
.front{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; box-sizing: border-box; padding: 0 13px; box-shadow: inset 20px 0 50px rgba(0,0,0,0.5) 0 2px 5px rgba(0,0,0,.5); }
.back{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; transform: rotateY(180deg); backface-visibility: hidden; background: #000; }
.next-btn{ position: absolute; bottom: 13px; right: 13px; cursor: pointer; color: #000; }
.back-btn{ position: absolute; bottom: 13px; right: 13px; cursor: pointer; color: #fff; }
input[type=checkbox] ~ .flip-book .flip { transform: rotateY(-180deg); }*/


/* #FFC5A3	#BF9F8C	#A65F35	#FFD4BA	#FFDFCC */

/* text #662E0C */

.box { width:100%; }

	.top > h1 { text-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px; font-size: 48px; line-height:64px; color:#fff; text-align:center; padding: 80px 20px 40px; }
	.top-wrapper { background: #fff; width:100%; min-height:100vh; }
		.top { max-width:1380px; position:relative; margin:0 auto;}
			
	.top-wrapper { background: url('../images/top-back.jpg') no-repeat 50% 50% / cover; width:100%; min-height:100vh; }
		.top { max-width:992px; position:relative; margin:0 auto; display:grid; grid-template-columns: 1fr; gap: 32px; }
			.top-first { display:grid; grid-template-columns: 360px 600px; gap:32px; }
				.top-text { padding-top: 60px; }
					.breadcrumb { font-size:12px; font-weight:300; line-height:30px; color:#662E0C; font-family:Arial, sans-serif; display:table; padding-left:40px; position:relative; text-transform: uppercase; margin: 0 auto; letter-spacing: 2px; }
					.breadcrumb:before { content:''; position:absolute; left:0; top:0; width:30px; height:30px; background:url('../images/book-icon.svg') no-repeat 50% 50% / contain; }
					.top-text h1 { font-size: 28px; font-weight: 700; line-height: 42px; color: #662E0C; font-family: Arial, sans-serif; /* border-top: 1px dashed #A65F35; border-bottom: 1px dashed #A65F35; */ padding: 10px 20px; margin: 0px -20px 20px; background: #FFD4BA; text-align: center; display: table; /*background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgb(255, 197, 163) 15%,rgb(255, 197, 163) 85%,rgba(255,255,255,0) 100%);*/ width:100%; }
					.top-text p { font-size:16px; line-height:20px; color:#662E0C; font-family:Arial, sans-serif; padding-bottom: 10px; }
					.top-desc { border:1px solid #ffc5a3; padding:0 20px 20px; margin-top: 10px; background: rgba(255,255,255,0.75); box-shadow: 0 2px 4px rgba(102,46,12,.5); }
					.toplink { padding:0 56px; line-height:66px; background:#662E0C; color:#FFD4BA; font-size:24px; border-radius:40px; overflow:hidden; cursor:pointer; display:table; margin:20px auto; }
					.toplink:hover { opacity:0.8; }

				.top-middle { padding-top:10px; position:relative; }
					.review { position: absolute; width: 275px; overflow: hidden; border-radius: 70px; border: 1px solid #662E0C; }
					.review > p { font-size: 14px; line-height: 20px; border-radius: 70px; border: 3px solid #fff; background: #FFDFCC; color: #662E0C; padding: 10px 30px 10px 90px; font-family: Arial, sans-serif; }
					#review1 { top: 30px; left: calc(50% - 298px);}
					#review2 { top: 260px; right: calc(50% - 298px); }
					.review:before { position:absolute; content:''; top:9px; left:9px; }
					#review1:before { background: url('../images/review1.jpg') no-repeat 50% 50% / contain; width: 70px; height: 70px; border-radius: 50px; }
					#review2:before { background:url('../images/review2.jpg') no-repeat 50% 50% / contain; width: 70px; height: 70px; border-radius: 50px; }
					.top-middle > img { height: 600px; display: table; margin: 0 auto; }

			.top-second { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 64px; }
				.go-next { overflow:hidden; }
					.tag { background:rgba(255,255,255, .85); text-align:center; font-size:18px; line-height:22px; color:#662E0C; border:1px solid #662E0C; position:relative; top:-70px; width:calc(100% + 38px); left:-20px; padding: 6px 0; }
					.tag:before { content:''; background:url('../images/corner.svg') no-repeat; width: 21px; height: 12px; left: -1px; bottom: -13px; position: absolute; }
					.tag:after { content:''; background:url('../images/corner.svg') no-repeat; width: 21px; height: 12px; right: -1px; bottom: -13px; position: absolute; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; filter: fliph; }
					.top-second img { max-width:100%; box-shadow: 0 1px 4px rgba(0,0,0,.5); opacity:0.75; }
					.goblock { cursor: pointer; }
					.goblock:hover > img { opacity:1; }

	.goblock-w { position:relative; z-index:1; }
	.go1block-wrapper { background: url('/images/go-1.jpg') no-repeat 50% 50% / cover; width:100%; min-height:100vh; }
		.go1block { max-width:1800px; position:relative; margin:0 auto; }
			.go-text * { font-family:Arial, sans-serif; }
			.go1text { max-width:600px; padding:100px 20px 20px; }
				.go1text > p { font-size:24px; line-height:32px; padding-bottom:15px; }
					.go1text > p.no-man { color:#bdbdbd; }
					.go1text > p.one-man { color:#CE6627; }
					.go1text > p.two-man { color:#ffd586; }
					.go1text > p .no-man { color:#bdbdbd; }
					.next { border:1px solid #fff; border-radius:30px; line-height:50px;padding:0 60px 0 40px; color:#fff; opacity:0.75;display:table; cursor:pointer; margin-top:30px; position:relative; font-size:24px; }
					.next:before { content:'→'; position:absolute; right:24px; color:#fff; font-size:24px; line-height:46px; }
					.next:hover { opacity:1; background:rgba(255,255,255,.15); }
	.go2block-wrapper { background: url('/images/go-2.jpg') no-repeat 50% 50% / cover; width:100%; min-height:100vh; }
		.go2block { max-width:1800px; position:relative; margin:0 auto; display: grid; justify-items: end; }
			.go2text { max-width:600px; padding:220px 20px 20px; }
				.go2text > p { font-size: 26px; line-height: 38px; color: #bdbdbd; }
	.go3block-wrapper { clear:both; background: url('/images/go-3.jpg') no-repeat 50% 50% / cover; width:100%; min-height:100vh; }
		.go3block { max-width:1800px; position:relative; margin:0 auto; }
			.go3text { max-width:750px; padding:220px 20px 20px;; }
				.go3text > p { font-size: 26px; line-height: 38px; color: #bdbdbd; }
					.one-face { color:#ffd586; }
					.two-face { color:#CE6627; }
	.go4block-wrapper { background: url('/images/go-4.jpg') no-repeat 50% 50% / cover; width:100%; min-height:100vh; }
		.go4block { max-width:1800px; position:relative; margin:0 auto; display: grid; justify-items: end; }
			.go4text { max-width:600px; padding:200px 20px 20px; }
			.go4text > p { font-size:28px; line-height:36px; padding-bottom:15px; }
				.go4text > p.no-man { color:#bdbdbd; }
				.go4text > p.one-man { color:#FF7A2A; }
				.go4text > p.two-man { color:#ffd586; }
				.go4text > p .no-man { color:#bdbdbd; }
	
	.bottom-wrapper { clear:both; background: url('/images/book-rig.jpg') no-repeat 50% 50% / cover; /* radial-gradient(ellipse at center,  rgba(143,53,181,1) 0%,rgba(7,32,123,1) 99%); */ width:100%; min-height:100vh; padding-bottom:50px; position: relative; z-index: 1; }
		.bottom { max-width:960px; position:relative; margin:0 auto; padding-top: 42vh; }
			.bottom-text { Background: url('/images/autumn.jpg') no-repeat 50% 50% / cover rgba(0,0,0,.8); border-radius: 20px; padding: 20px; position:relative; overflow: hidden; border: 5px solid #000; }
			.bottom-text:before { content:''; position:absolute; left:0; top:0; width: calc(100% - 6px); height: calc(100% - 6px); background: rgba(0,0,0,.6); z-index: 1; border: 3px solid #fff; border-radius: 20px; }
				.bottom-text > p { text-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px; font-size: 38px; line-height: 48px; padding-bottom: 20px; text-align: center; color: #fff; position:relative; z-index:2; }
			.bottom-img { }
			.bottom-img > img { max-height:400px; display:table; margin:0 auto; }
			.bottom-link { /* background:url('/images/button.png') no-repeat; */ cursor:pointer; display:table; margin:40px auto 0; border-radius: 16px; }
			.bottom-link:hover { opacity:0.8; }
			.bottom-link > p { text-align:center; color:#fff; font-size: 32px; line-height: 72px; }
			.bottom-link { display: table; margin: 40px auto 0; border-radius: 16px; border: 3px solid rgb(0, 0, 0); background: url('/images/button-back.jpg') no-repeat 50% 50% / cover; }
				.bottom-link > a { padding: 20px 40px; border-radius: 16px; border: 3px solid rgb(255, 255, 255); background: rgba(0,0,0,.35); display: block; }
					.bottom-link > a > div { font-size: 42px; line-height:54px; color: #fff; border-bottom: 2px dashed #fff; padding-bottom:5px; margin-bottom:5px; text-shadow: 0 0px 10px rgb(0, 0, 0); }
					.bottom-link > a > p { color:#ffff00; font-size: 24px; line-height:24px; text-align:center; padding-top:5px; }
					.bottom-link > a > p span { font-size:14px; color:#f1f1f1; font-family: Arial, sans-serif; letter-spacing: 2px; }
			.litres-link { width:194px; height:32px; overflow:hidden; display:table; margin:40px auto 0; }
			.litres-link > a { display:block; background:url('/images/litres-logo.png') no-repeat 50% 0; height:32px; width:100%; }
			.litres-link > a:hover { background-position:50% 100% !important; }
	.border1-wrapper { width: 100%; height: 16px; overflow: hidden; background: url('/images/border2.png') no-repeat 50% 50% / cover; position: relative; z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
	.footer-wrapper { width:100%; background:#202020; min-height:300px; }
		.footer { max-width:960px; position:relative; margin:0 auto; padding:20px 0; }
			.foot-img { height:300px; }
				.foot-img > img { max-width:100%; height:100%; }

@media (max-width: 1100px) {
	.top-first { display: grid; grid-template-columns: 1fr; }
	.top-second { grid-template-columns: 1fr 1fr; gap: 0 64px; max-width: 560px; margin: 0 auto; }
	.goblock, .goblock > img { margin: 0 auto; display: table; }
	.top-desc { margin: 10px; }

	.goblock-w { min-height: inherit !important; }
	.goblock-w:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); }
	.go4block-wrapper:before { background:rgba(0,0,0,.75) !important; }
	.goblock-w * { z-index:3; }
	.goblock-w > div { display: grid; justify-items: start; }
	.goblock-w > div > div { max-width: inherit !important; padding: 50px 20px !important; }
}

@media (max-width: 780px) {
	.goblock-w > div > div > p { font-size: 16px !important; line-height: 24px !important; padding-bottom: 10px !important; }
	.next { margin:30px auto 0; }
	.bottom-wrapper { height:300px; min-height: inherit; }
	.bottom { padding-top: 40px; }
	.bottom-link > a { padding: 20px 25px; }
	.bottom-link > a > div { font-size: 28px; line-height: 36px; }
	.bottom-link > a > p { font-size: 16px; line-height: 22px; }
}

@media (max-width: 620px) {
	.review { top: auto !important; left: auto !important; right: auto !important; position:relative !important; margin: 0 10px 10px; }
	#review2 { float:right; }
	.top-middle > img { max-width: 100%; height: auto; }
	.top-second { gap: 0 40px; max-width: 320px; margin: 0 auto; }
	.goblock > img { max-width: 140px; }
	.tag { font-size:16px; line-height: 16px; top: -60px; }

}

@media (max-width: 320px) {
	.top-second { overflow:hidden; } 
}