@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,700;1,400&family=Alegreya:ital,wght@0,400;0,700;1,400&display=swap');
body {
	font-family:'Alegreya', serif;
	font-size: 1.4em;
	margin:0;
	padding:0;
}
a:link {
	color:blue;
	text-decoration:none;
	border-bottom:1px solid rgba(0, 0, 255, 0.3);
}
a:visited {
	color:rgb(128, 0, 126);
	border-bottom: 1px solid rgba(128, 0, 126, 0.3);
}
a:hover {
	color:red;
	border-bottom:1px solid rgba(255, 0, 0, 0.3);
}
h1, h2, h3, h4, h5 {
	font-family:'Alegreya Sans', sans-serif;
	font-weight:normal;
}
h3 {
	font-weight: bold;
	font-size:1.1em;
}
p + h2, ol + h2 {
	margin-top:2em;
}
h2 + p, h2 + ol, h2 + ul {
	margin-top:-0.4em
}
p + h3 {
	//margin-bottom:0;
}
h3 + p {
	margin-top:-1em;
}

.logo {
	text-align:center;
}
.logo a {
	border:none;
	text-indent:-10000px;
	background:url(../img/reverse-logo.svg) no-repeat;
	display:inline-block;
	width: 97px;
	height:50px;
}
.navbar {
	font-family:'Alegreya Sans', sans-serif;
	text-align:center;
	display:flex;
	justify-content:center;
}
.navbar ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
}
.navbar a {
	padding:7px 15px;
	border:none;
}
.navbar a:link,
.navbar a:visited {
	color:#000;
}
.navbar a:hover {
	background:rgba(0, 0, 0, 0.05);
}

.content-container {
	max-width:740px;
	margin:0 auto 0;
	padding:0 20px 0;
}
.main-message {
	position:relative;
}
.main-message h1 {
	font-size:3em;
	text-align:center;
}
.footer {
	font-family:'Alegreya Sans', sans-serif;
	font-size:0.8em;
	margin-top:4em;
	border-top:1px solid rgba(0,0,0,0.1);
}

.floor {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:3em 25px 1em;
}
.floor-content {
	max-width:740px;
}
.bl-padding {
	padding:1.5em 25px;
}
.bl-margin {
	margin:0 25px;
}
.bl-big {
	font-size:2em;
	line-height: 1.2em;
}
p.bl-big {
	font-size:1.7em;
}
.bl-radius {
	border-radius:0.5em;
}

.block-wrap {
	//justify-content:space-between;
	align-items:flex-start;
}
.block3 {
	//flex-grow:1;
	width:25%;
	margin: 0 2%;
	text-align:center;
}
.block-wrap h3::before {
	display:block;
	margin:0 0 1em;
	text-align:center;
}
.block-wrap div:nth-child(1) h3::before {
	content:url(../img/indexill/ico-count-3.png);
}
.block-wrap div:nth-child(2) h3::before {
	content:url(../img/indexill/ico-help-2.png);
}
.block-wrap div:nth-child(3) h3::before {
	content:url(../img/indexill/ico-knowledge-2.png);
}

.brick {
	display:flex;
}
.brick-content {
	max-width:740px;
	margin:3em auto 1em;
	display:flex;
	align-items:center;
	flex-basis:100%;
	position:relative;
}
.brick-text {
	width:60%;
	position:absolute;
	right:0;
}
.brick-text h2, .floor-content h2 {
	font-size:2.5em;
	font-weight:bold;
	line-height:1em;
	margin: 0 0 0.5em
}
.brick-pic {
}
.brick-pic img {
	max-width:100%;
}
.gray {
	background:#eaeff2;
	background:rgb(245, 246, 248);
}
.graygray {
	background:rgb(245, 246, 248);
}
.gold {
	background:gold;
}
#many-food .brick-content,
#rest .brick-content {
	flex-direction: row-reverse;
}
#many-food .brick-text,
#rest .brick-text {
	left:0;
}
#many-food .brick-text {
	margin-bottom:-4em;
}
#sport .brick-text {
	margin-top:-4em;
}
#any-food .brick-pic {
	width:38%;
}
#many-food .brick-pic {
	width:42%;
	width:53%;
}
#sport .brick-pic {
	width:64%;
	width:72%;
}
#rest .brick-pic {
	width:83%;
}
.psevdobutton {
	padding:10px 17px 12px;
	border-radius: 0.7em;
	background:linear-gradient(145deg, #66d370, #3f998e 85%);
	font-family:'Alegreya Sans', sans-serif;
	color:#fff;
	cursor:pointer;
}
.psevdobutton:hover {
	background:linear-gradient(145deg, #66d370, #3f998e 120%);
}
.modblock {
	position: fixed;
    top: 0px;
    right: 0;
    bottom: 0px;
    left: 0;
    background: rgba(64,69,72,0.97);
	background: rgba(245,246,248,0.97);
    display: none;
    z-index: 1000000;
    overflow: auto;
    padding: 20px
}
.modblock > div {
	width: 100%;
    max-width: 600px;
    background: white;
    margin: auto;
    padding: 25px 45px;
	border-radius:0.9em;
	position:relative;
	box-shadow: 0 5px 15px 0 rgba(204, 204, 204, 0.5);
}
.close {
	position:absolute;
	top:15px;
	right:17px;
	margin:0;
	cursor:pointer;
	width:25px;
	height:25px;
	background: url(../img/indexill/cross.png) no-repeat;
}
.close:hover {
	background: url(../img/indexill/cross.png) top right no-repeat;
}

.results {
	display:flex;
	margin:1em 0;
	overflow:hidden;
}
.lenta {
	display:flex;
	animation: nudge 55s linear infinite;
}
.results-item {
	margin: 0 0.5em;
}
.results-item img {
	border-radius:1em;
	width:270px;
}
@keyframes nudge {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
.results:hover .lenta {
	animation-play-state:paused;
}
.stop .lenta {
	animation-play-state:paused;
}
.stopbutton, .playbutton, .replaybutton {
	font-family: 'Alegreya Sans', sans-serif;
	width:40px;
	height:40px;
	border-radius:50%;
	cursor: pointer;
	position:relative;
}
.playbutton::before, .stopbutton::before, .replaybutton::before {
	content:"Смотреть";
	position:absolute;
	right:100%;
	margin:7px 0 0;
	padding-right:7px;
}
.stopbutton::before {
	content:"Стоп";
}
.playbutton::before {
	content:"Смотреть";
}
.replaybutton::before {
	content:"Повторить";
}
.stopbutton {
	background: url(../img/indexill/sign-stop.png) center center no-repeat, linear-gradient(145deg, #66d370, #3f998e 85%);
	display:none;
}
.playbutton {
	background: url(../img/indexill/sign-play.png) center center no-repeat, linear-gradient(145deg, #66d370, #3f998e 85%);
}
.replaybutton {
	background: url(../img/indexill/sign-replay.png) center center no-repeat, linear-gradient(145deg, #66d370, #3f998e 85%);
	display:none;
}
.control-block {
	display:flex;
	justify-content:flex-end;
	padding-right:50px;
}
.inline-ico {
	width: 2em;
	vertical-align:top;
	margin-top:0.6em;
	margin-left:0.2em;
}
video {
	width:100%;
}

.notes {
	//background:gold;
	margin:3em 0 2.5em;
	padding:1em 2em;
	border-radius:0.3em;
	border:2px solid gold;
}
.accent {
	font-family:'Alegreya Sans', sans-serif;
	color:#fff;
	background:#ffc74d;
	background:linear-gradient(145deg, #66d370, #3f998e 85%);
	text-align:center;
	margin-top:2.5em;
	padding:0.5em 0.8em;
	border-radius:6px;
}
.accent small {
	font-size:1.15em;
}
.button {
	background:gold;
	padding:0.3em 0.5em;
	border-radius:0.5em;
}
.countme {
	counter-reset: number 0;
}
.no {
	counter-increment: number;
	position:relative;
	display:flex;
	align-items:flex-start;
}
.no::before {
	content: " " counter(number);
	font-size:3em;
	font-weight:normal;
	position: absolute;
    top: -35px;
    left: -49px;
}
.offer {
	display:flex;
	flex-direction:row-reverse;
	flex-wrap: wrap;
	justify-content:center;
	align-items:center;
	max-width:1235px;
	//height:80vh;
	margin:1em auto 3em;
	padding:3.5em 0 3em;
	//border-radius:6px;
}
.offer-text {
	width: 500px;
}
.offer-text h1 {
	font-size:3.5em;
	/*font-weight:bold;*/
	line-height:1em;
	margin-top:-1em;
	/*background-image:linear-gradient(145deg, #66d370, #3f998e 75%);
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;*/
}
.offer-text p {
	//font-size:1.5em;
	margin:-1em 0 0;
	margin-bottom:0;
}
.offer-text span {
	color:#ff4d4d;
}
.offer-pic {
	width: 600px;
	margin-right:50px;
	position:relative;
}
.offer-pic img {
	max-width:100%;
	border-radius:15%;
	transform:rotate(-2deg);
}
.subscription, img.subscription {
	position: absolute;
	border-radius:0;
}
img.right-bottom-position {
	bottom:-40px;
	right:15%;
}
.left-top-position {
	left:15%;
	top:-40px;
}
.left-position {
	left:-0px;
	top:35%;
}
.left-position::before {
	content:url(../img/indexill/weight-before-vid.png);
}
.right-position {
	right:10px;
	top:55%;
}
.right-position::before {
	content:url(../img/indexill/weight-after-vid.png);
}

/*.video-block {
	position:relative; padding:0 60px; margin-bottom:1em; max-width:720px; transform:rotate(-1.5deg);
}*/
.video-block {
	position:relative;
	padding:0; 
	margin-bottom:1em; 
	max-width:720px;
}

.feedback {
	font-family:'Alegreya Sans', sans-serif;
	font-size:1em;
	border-radius:1em;
	padding:1em;
	background:#f7ffe0;
	background:linear-gradient(170deg, #f7ffe0, #d7edcf 20%);
	display:inline-block;
	max-width:80%;
	position:relative;
	vertical-align:top;
}
.feedback::after {
	content:url("../img/tail-l.png");
	position:absolute;
	bottom:-18px;
	left:20px;
}
.feedback:nth-child(2n) {
	margin-left:20%;
}
.feedback:nth-child(2n)::after {
	content:url("../img/tail.png");
	left:auto;
	right:20px;
}
.fact-s {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.fact {
	width:200px;
	margin: 0 30px 3em;
}
.fact-digit {
	font-size:5em;
	line-height:1.1em;
	display:block;
}
.fact-digit span {
	font-size:0.4em;
	display:inline-block;
	vertical-align:top;
	margin:0.7em 0 0;
	line-height:1em;
}

.feed p {
	padding:1.5em 2em 2em;
	background:#fff;
	box-shadow: 0 10px 15px 0 rgba(204, 204, 204, 0.5);
	border-radius: 1em;
}

.color-header {
	background-image:linear-gradient(145deg, #66d370, #3f998e 75%);
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
}

.main-head {
	max-width:740px;
	padding:0 25px;
	margin: 2em auto;
	display:flex;
	align-items:center;
}
.main-head h1 {
	font-size: 4.5em;
	line-height:1em;
	margin-bottom:0;
}
.main-head p {
	font-size:1.3em;
}


/* STORIES STYLE *****************************************/
.story {
	max-width:1200px;
	margin:auto;
}
.stories-block {
	display:flex;
	width:100%;
}
.stories {
	width:50%;
	height:95vh;
	border-radius: 0.5em 0 0 0.5em;
}
.stories + .stories {
	border-radius: 0 0.5em 0.5em 0;
}
.stories-story {
	position:absolute;
	width:30%;
	left:35%;
	background:rgba(255, 255, 255, 0.95);
	border-radius:0.5em;
}
.stories-story p {
	margin-left:35px;
	margin-right:35px;
}
.outside {
	text-align:center;
	font-weight:bold;
	font-size:2.5em;
	margin:1em 25px -0.5em;
}
#al-before {
	background:url(../img/index-stories/al-before.jpg) top center no-repeat;
	background-size:cover;
}
#al-after {
	background:url(../img/index-stories/al-after.jpg) top center no-repeat;
	background-size:cover;
}
#gl-before {
	background:url(../img/index-stories/gl-before.jpg) top center no-repeat;
	background-size:cover;
}
#gl-after {
	background:url(../img/index-stories/gl-after.jpg) top center no-repeat;
	background-size:cover;
}

	

@media screen and (max-width: 1250px){
	.content-container {
		margin:0 auto 0;
	}
	.insert {
		text-align:center;
		position:relative;
		width:60%;
		margin-left:auto;
		margin-right:auto;
	}
	.girl-4::before {
		transform: scale(1, 1);
	}
	.girl-4:hover::before {
		transform: scale(-1, 1);
		margin-left:-32px;
	}
}

@media screen and (max-width: 1150px){
	.offer-pic {
		width:500px;
	}
}

@media screen and (max-width: 1050px){
	.offer {
		flex-direction:column-reverse;
		//height:auto;
		padding:3em 0 0em;
	}
	.offer-pic {
		width:600px;
		margin:0;
	}
	.offer-text {
		margin:3em 0 0;
	}
	.offer-text h1 {
		margin-top:0;
	}
}

@media screen and (max-width: 991px){
	.content-container {
		max-width:none;
	}
	.main-message h1, .main-head h1 {
		font-size:2.5em;
	}
	.n {
		flex-direction:column;
		align-items:flex-start;
		max-width:550px;
	}
	.n::before {
		position:static;
		top:0;
		left:0;
	}
	.n::after {
		left:15px;
		top:-10px;
	}
	.no {
		flex-direction:column;
	}
	.no::before {
		position:static;
		top:0;
		left:0;
	}
	.brick {
		padding:0 25px;
	}
}
@media screen and (max-width: 767px) {
	.main-head {
		margin:2em auto 0;
	}
	.main-message h1, .main-head h1 {
		font-size:2em;
	}
	.main-message h2 {
		font-size:1.3em;
	}
	.main-message h3 {
		font-size:1em;
	}
	.main-message p, .main-message ul, .main-message ol {
		font-size:0.9em;
	}
	.what {
		width:90%;
	}
	.brick-text h2, .floor h2, .outside {
		font-size:2em;
	}
	.brick-text p, .floor p {
		font-size:0.85em;
	}
	.story {
		flex-direction:column-reverse;
	}
	.stories-story {
		position:static;
		width:auto;
	}
}
@media screen and (max-width: 650px) {

	.offer-text h1 {
		font-size:2em;
	}
	.offer-text p {
		font-size:0.9em;
	}
	.offer-pic {
		width:500px;
		width:auto;
		margin: 0 25px;
	}
	.brick-text h2, .floor h2, .outside {
		font-size:1.5em;
	}
	.video-block {
		padding: 50px 0 0;
	}
	.left-position {
		left:9%;
		top:0;
	}
	.left-position::before {
		content:url(../img/indexill/weight-before-top-vid.png);
	}
	.right-position {
		right:9%;
		top:0;
	}
	.right-position::before {
		content:url(../img/indexill/weight-after-top-vid.png);
	}
	.block-wrap {
		flex-wrap:wrap;
	}
	.block3 {
		width:auto;
	}
}
@media screen and (max-width: 544px) {
	.main-message h1, .main-head h1 {
		font-size:2em;
	}
	.main-message h2 {
		font-size:1.2em;
	}
	.main-message h3 {
		font-size:0.9em;
	}
	.main-message p {
		font-size:0.85em;
	}
	.main-head p {
		font-size:1.1em;
	}
	.bl-big {
		font-size:1.5em;
	}
	p.bl-big {
		font-size:1.1em;
		line-height:1.25em;
	}
	.notes {
		padding:0.5em 1em;
	}
	.offer-text {
		width: auto;
		margin: 3em 25px 0;
	}
	.brick-content {
		flex-wrap:wrap;
		//align-items:flex-end;
		justify-content:center;
	}
	#any-food .brick-content, #many-food .brick-content, #sport .brick-content, #rest .brick-content {
		background-position:top left;
	}
	.brick-text, #sport .brick-text, #many-food .brick-text {
		width:auto;
		position:static;
		margin-top:1em;
		margin-bottom: 0;
	}
	.modblock p {
		font-size:0.85em;
	}
}