style.css

body, 
html {	
	margin: 0;
	font-family: 'Rubik', sans-serif;
	background: linear-gradient(200.86deg, #98AC46 22.27%, #788E29 77.73%);
	background-attachment: fixed;	
}

header {	
	width: 100%;
	height: 200px;
	top: 0;
	position: fixed;
	z-index: 3
}

header a {
	position: absolute;
	display: inline-block;
	text-decoration: none;
	margin-top: 5.5%;
	color: white;
}

header a:hover {
	text-decoration: underline;
}

.color-dark {
	color: #5B5B5B;
	transition-property: color;
	transition-duration: 2s;
}

.social {	
	display: flex;
	justify-content: center;
	align-items: center;	
}

.social img {
	margin-right: 10px;
}

.vk {
	left: 17%;
}

.inst {	
	left: 27%;
}

.tel {	
	right: 17%;
}

.mail {	
	right: 27%;
}

.button {
	width: 172px;
	height: 68px;
	color: #5B5B5B;
	background-color: white;
	font-family: 'Rubik', sans-serif;	
	border: none;
	border-radius: 300px;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.button-menu {
	position: absolute;
	display: inline-block;
	left: 5em;
	top: 4em;
}

.button-menu:focus,
.button-message:focus {
	color: #7B9A04;
	border-color: rgba(229, 103, 23, 0.8);
	box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
	outline: 0 none;
}

.button-message {
	position: absolute;
	display: inline-block;
	right: 5em;
	top: 4em;	
}

.button i {
	font-size: 1.5em;	
	top: 1em;
	bottom: 1em;
	padding-right: 10px;
}

.button span {
	line-height: 22px;
	font-size: 0.9em;
}

.main-page-content {
	display: flex;
	flex-direction: column;	
	align-items: center;	
	width: 100%;
	height: 100%;
}

.logo {
	position: relative;
	width: 230px;
	height: 230px;
	top: 4em;
}

.text {	
	position: relative;
	top: 8em;	
	font-family: 'Rubik', sans-serif;
}

.text p {	
	line-height: 46px;
	font-size: 1.9em;
	text-align: center;
	color: #F5F9E4;
}

.text div {
	display: flex;
	justify-content: space-around;
	margin-top: 2em;
}

.name-and-shop span {
	text-align: center;
	color: #FFFFFF;
	line-height: 25px;	
	font-size: 1.2em;
}

span .shop-amount {	
	color: #D8E99A;
	font-size: 1em;
}

.button-info {
	position: relative;
	top: 13em;
	width: 312px;
	height: 90px;
	background: #FFD600;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	border: none;
	line-height: 36px;
	font-size: 1.4em;
	text-align: center;
	cursor: pointer;
}

.mouse-icon {
	position: relative;	
	top: 24rem;
}

.background-nuts-bottom {
	position: fixed;	
	width: 100%;
	height: 25%;
	bottom: 0;
	background-image: url("pictures/nuts&spice_bottom.png");
	background-repeat: no-repeat;	
	background-position: bottom;
	background-size: cover;
	animation-duration: 0.5s;
	animation-timing-function: linear;  
	z-index: 0;
}

.background-nuts-fly {
	position: fixed;	
	width: 100%;
	height: 100%;
	background-image: url("pictures/nuts&spice_fly.png");
	background-repeat: no-repeat;	
	background-position: top;
	background-size: cover;
	z-index: 0;
}

.shop-page-content {
	flex-direction: column;
	display: flex;
	width: 100%;
	height: 100%;
	background-image: url("pictures/map.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.nut {
	position: absolute;
	z-index: 1;
}
.left-nut {
	top: 20%;
	left: 6%;
}

.center-bottom-nut {
	bottom: 5%;
	left: 45%;
}

.right-bottom-nut {
	right: 10%;
	bottom: 31%;
}

.right-top-nut {
	top: 8%;
	right: 26%;
}

.shop-name {
	position: absolute;	
	align-self: center;
	top: 4em;
}

.text-info-shops {
	z-index: 2;
	margin-left: 20em;
	margin-top: 25em;
}

.kirov-shop-amount {
	font-size: 2em; 
	color: white;
	letter-spacing: 0.5px;
}

.number7 {
	color: #FF0000;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.address-link {	
	text-decoration: none;
	color: #D8EC93;
	padding-bottom: 5px;
	border-bottom: 1px solid #D8EC93;
}

.fas.fa-map-marker-alt {
	margin-right: 10px;	
	color: #D8EC93;
}

.p-info {
	color: white;
	margin-top: 4em;
	line-height: 2em;
	letter-spacing: 1px;	
}

.button-estimate {
	position: relative;
	top: 3em;
	width: 312px;
	height: 90px;
	background: #FFD600;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	border: none;
	line-height: 36px;
	font-size: 1.4em;
	cursor: pointer;
}

.text-plans {
	padding-top: 6em;
	color: white;
	font-size: 0.9em;
	letter-spacing: 0.5px;
	line-height: 1.5em;
}

.info-page {
	flex-direction: column;
	display: flex;
	width: 100%;
	height: 100%;
	background-image: url("pictures/bg-section3.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.background-spices-top {
	position: absolute;
	top: 0;
	width: 100%;
	height: 30%;
	background-image: url("pictures/spices-top.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

.background-spices-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30%;
	background-image: url("pictures/spices-bottom.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
}

.shop-description {
	position: relative;
	text-align: center;
	margin-top: 15em;
	color: white;
	font-size: 1.5em;
	letter-spacing: 0.5px;
	line-height: 2em;
}

.info-blocks-section3 {
	display: flex;
	flex-direction: row;
	align-self: center;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 3em;
}

.info-block {	
	background-color: white;
	box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	text-align: center;
	line-height: 1.5em;
	font-size: 0.9em;
	width: 27em;
	margin: 3em;		
}

.info-block p {
	padding: 1em 2em;
}

.img-for-info-block {	
	display: inline-block;
	text-align: center;	
	width: 3em;
	height: 3em;		
	background-color: white;
	padding: 1em;
	margin-top: -3em;
	border-radius: 50%;
	border: 4px solid #3B424E;
}

.info-block-img {
	position: relative;
	text-align: center; 	
}

.more-about {
	background: #99AA30;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	border: none;
	color: white;
	padding: 1em 3em;
	font-size: 1.1em;
	cursor: pointer;
	margin-bottom: 2em;	
}

.franchising-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-image: url("pictures/bg-franchising.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.background-leaves {
	position: absolute;	
	height: 40%;
	width: 100%;	
	bottom: 0;
	background-image: url("pictures/leaf.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;	
}

.franchising-text {	
	align-self: center;
	color: white;
	text-align: center;
}

.franchising-text p {
	font-size: 1.4em;
	letter-spacing: 0.5px;
	line-height: 1.5em;
}

.button-detailed {	
	background: #EC1C24;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
	border-radius: 3px;
	border: none;
	color: white;
	padding: 1.5em 5em;
	cursor: pointer;
}

.menu-page {
	display: none;	
	position: fixed;
	flex-direction: column;	
	justify-content: center;
	height: 100%;
	width: 100%;
	background-image: url("pictures/bg-menu.png");
	background-repeat: no-repeat;
	background-size: cover;	
	z-index: 2;
}

.menu-page-active {
	display: flex;		
}

.section-disabled {
	display: none;
}

.menu-items {	
	align-self: center;		
}

.menu-item {
	text-align: center;
	padding: 3em 8em;   
}

.menu-item a {
	text-decoration: none;
	color: black;
}

.menu-item:last-of-type span {
	bottom: 1em;
}

.menu-item-gift img,
.menu-item-shop img {
	margin-top: 2.5em;
}

.copyright {
	position: absolute;
	align-self: center;
	bottom: 3em;
	color: #ACAEA8;
	justify-content: flex-end;
}

#fp-nav {
	z-index: 1;
}

#fp-nav ul li a span, 
.fp-slidesNav ul li a span{
	background: #fff;
}

#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {
	height: 22px;
	width: 22px;
	margin: -11px 0 0 -11px;
}


#fp-nav ul li:first-child a.active span::before {
	content: "1";	
	left: 7px;
	top: 2px;
}

#fp-nav ul li:nth-child(2) a.active span::before {
	content: "2";
	left: 6.5px;
	top: 1px;	
}

#fp-nav ul li:nth-child(3) a.active span::before {
	content: "3";	
	left: 6.5px;
	top: 1px;
}

#fp-nav ul li:last-child a.active span::before {
	content: "4";	
	left: 6px;
	top: 1px;
}

#fp-nav ul li:first-child a.active span::before,
#fp-nav ul li:nth-child(2) a.active span::before,
#fp-nav ul li:nth-child(3) a.active span::before,
#fp-nav ul li:last-child a.active span::before {
	position: relative;		
	color: black;
	font-weight: bold;
	font-size: 0.9em;
}

.menu-page.fadeIn {
	animation-duration: 500ms;
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
	.logo {	
		width: 130px;
		height: 130px;
		top: 3em;
	}
	.text {	
		top: 6em;
	}
	.text p {	
		line-height: 36px;
		font-size: 1.4em;	
	}
	.name-and-shop span {
		line-height: 25px;	
		font-size: 1em;
	}
	.button {
		width: 120px;
		height: 40px;
		font-size: 0.7em;
	}
	.button-info {	
		top: 10em;
		width: 262px;
		height: 70px;	
		line-height: 36px;
		font-size: 1em;	
	}
	.mouse-icon {	
		top: 14em;
	}
	.text-info-shops {
		margin-left: 13em;
		margin-top: 10em;
	}
	.button-estimate {	
		top: 1.5em;		
		width: 262px;
		height: 70px;		
		font-size: 1em;		
	}	
	.shop-name {	
		top: 2.5em;
	}
	.kirov-shop-amount {
		font-size: 1.3em; 	
	}
	.p-info {		
		margin-top: 2em;
		line-height: 1.5em;
	}
	.text-plans {
		padding-top: 3em;	
	}
	.right-bottom-nut {
		display: none;
	}
	.center-bottom-nut {
		height: 25%;
		widows: 25%;
	}	
	.shop-description {	
		margin-top: 12em;	
		font-size: 1em;
		letter-spacing: 0.5px;
		line-height: 2em;
	}
	.info-block {			
		font-size: 0.8em;
		width: 22em;
		margin: 2em;		
	}

	.info-block-img {
		width: 40px;
		height: 40px;
	}
	.more-about {
		padding: 1em 2.5em;
		font-size: 1em;	
	}
	.franchising-text p {
		font-size: 1.2em;		
		line-height: 1.2em;
	}
	.button-detailed {		
		padding: 1.2em 4em;	
	}
	.menu-item {	
		padding: 2em 6em;   	
	}
	header a {	
		margin-top: 5.3%;
		font-size: 0.7em;	
	}
	.vk {
		left: 20%;
	}
	.inst {	
		left: 30%;
	}
	.tel {	
		right: 20%;
		margin-top: 5.5%;
	}
	.mail {	
		right: 30%;
		margin-top: 5.5%;
	}
	.social img {
		margin-right: 5px;
	}
}

@media screen and (min-width: 1201px) and (max-width: 1600px) {
	.logo {	
		width: 160px;
		height: 160px;
		top: 3.5em;
	}
	.text {	
		top: 6em;	
	}
	.text p {	
		line-height: 41px;
		font-size: 1.5em;	
	}
	.name-and-shop span {
		line-height: 25px;	
		font-size: 1.1em;
	}
	.button {
		width: 140px;
		height: 50px;
		font-size: 0.8em;
	}
	.button-info {	
		top: 9em;
		width: 277px;
		height: 75px;	
		line-height: 36px;
		font-size: 1.2em;	
	}
	.mouse-icon {	
		top: 14em;
	}
	.text-info-shops {
		margin-left: 15em;
		margin-top: 14em;
	}
	.button-estimate {	
		top: 2em;	
		width: 277px;
		height: 75px;
		font-size: 1.2em;
	}
	.shop-name {	
		top: 3em;
	}
	.kirov-shop-amount {
		font-size: 1.5em; 	
	}
	.p-info {		
		margin-top: 3em;
		line-height: 1.7em;			
	}
	.text-plans {
		padding-top: 4em;

	}
	.center-bottom-nut {
		height: 30%;
		widows: 30%;
	}	
	.shop-description {	
		margin-top: 13em;	
		font-size: 1.2em;
		letter-spacing: 0.5px;
		line-height: 2em;
	}
	.info-block {		
		font-size: 0.9em;
		width: 23em;
		margin: 2.5em;		
	}
	.more-about {	
		font-size: 1em;	
	}
	.franchising-text p {
		font-size: 1.3em;	
		line-height: 1.3em;
	}
	.button-detailed {		
		padding: 1.3em 4.5em;	
	}
	.menu-item {	
		padding: 2.5em 7em;   
	}
	header a {	
		font-size: 0.8em;
	}
}

@media screen and (width: 1366px) {
	header a {	
		margin-top: 5%;

	}
}

@media screen and (width: 1600px) {
	header a {	
		margin-top: 4.5%;

	}
}

@media screen and (width: 1920px) {
	header a {	
		margin-top: 4.7%;

	}
}

@media screen and (width: 2560px) {
	header a {	
		margin-top: 3.7%;

	}
}