body {
	margin: 0;
	padding: 0;
	font-family: 'Nunito', 'Arial', sans-serif;
	overflow-x:hidden;
}

div, p, input, button, form, span, a, ul, li {
	box-sizing: border-box;
}

input:focus, select:focus {
	outline: 0;
    outline-offset: 0;
}

p {
	font-size: 14px;
	font-weight: normal; 
	line-height: 1.5em;
}

h2 {
	font-size: 40px;
}

h3 {
	font-size: 32px;
}

h4 {
	font-size: 18px;
}

a {
	text-decoration: none;
	color: #4E60FF;
}

::-webkit-scrollbar {
	width: 15px;
	background: black;
}


::-webkit-scrollbar-track {
	border: 3px solid gray;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(rgba(198, 252, 255, 1), rgba(100, 246, 255, 1), rgba(192, 251, 255, 1));
	border-radius: 15px;
	height: 25px;
}

.top-btn {
	position: fixed;
	top: 90%;
	left: 92%;
	font-size: 40px;
	color: #FFF;
	background-color: gray;
	opacity: 0.7;
	display: none;
	padding: 3px 6px;
	z-index: 3;
}

.container {
	width: 1170px;
	margin: 0 auto;
	display: flex;
}

.login {
	flex: 5.5;
}

.login__logo {
	padding-top: 20px;
}

.lable-login {
	font-size: 60px;
	margin-top: 128px;
	transition: all 1s ease;
}

.lable-login:hover {
	transform: translateX(40px);
}

.about-login {
	margin-top: 16px;
	width: 350px;
}

.login-form {
	display: block;
}

.lable-input {
	font-size: 12px;
	margin-bottom: 4px;
	color: #545563;
}

.data-input {
	width: 326px;
	padding: 12px;
	border: 1px solid #C7C8D2;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 20px;
	background-color: rgba(0,0,0,0);
}

.data-input::placeholder {
	color: #83859C;
	font-size: 14px;
}

.login-form__data-input {
	display: inline;
	background: url(img/eye.svg) no-repeat 294px;
}

.check-modificator {
	display: flex;
	margin-top: 8px;
}

.check-button {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #C7C8D2;
	border-radius: 4px;
	margin: 0;
	padding: 0;
}

.keep {
	margin-left: 12px;
	margin-top: 0;
	color: #2B2B43;
}

.data-input_modificator {
	margin-top: 40px;
	background-color: #4E60FF;
	text-align: center;
	color: #FFF;
	box-shadow: 0px 8px 20px rgba(78, 96, 255, 0.16);
	border-color: #4E60FF;
	transition: all 0.5s ease;
}

.data-input_modificator {
	opacity: 0;
}

.data-input_modificator:hover {
	transform: scale(1.05, 1.05);
	background-color: #3A4EFF;
}

.link-new-password {
	padding: 12px;
	margin-top: 16px;
}

.link-text {
	width: 318px;
	text-align: center;
	color: #4E60FF;
	opacity: 0;
}
	
.have-account {
	margin: 94px 0 40px 69px;
	color: #545563;
	opacity: 0;
}

.content {
	flex: 7;
}

/* content div  */
.content {
	position: absolute;
	width: 800px;
	left: 475px;
	background-color: #697BFF;
}

.product-and-reveiw {
	display: flex;
}

.chat {
	margin: 48px 27px 146px 95px;
	background-color: #FFF;
	border-radius: 14.3px;
	box-shadow: 0 0 80px rgba(49, 57, 120, 0.3);
}

.head-chat {
	padding: 14.3px;
	border-bottom: 0.89px solid #EDEEF2;
}

.rating-block {
	display: flex;
}

.rating {
	font: 11.63px bold;
}

.reveiw {
	display: flex;
}

.generally-reveiw {
	font: 17.89px SemiBold;
	color: #4E60FF;
	margin: 0 10.73px 14.31px 0;
}

.stars-5 {
	display: flex;
	padding: 0;
	margin: 0;
}

.stars-5__chat {
	margin-top: 1px;
}

.stars-n {
	width: 12.59px;
	height: 12.59px;
	margin: 0;
	padding: 0;
	padding-left: 0.89px;
}

.n-reveiws {
	font: 8.94px bold;
	color: #83859C;
	margin: 2px 36.07px 0 7.15px;
	display: flex;
}

.btn-submit {
	color: #4E60FF;
	font: 12.52px bold;
	padding: 10.73px 14.31px;
	border: 1px solid #4E60FF;
	background-color: rgba(255, 255, 255, 0);
	border-radius: 7.15px;
	transition: all 0.4s ease;
}

.btn-submit:hover {
	transform: scale(1.1, 1.1);
	background-color: #E1FFFF;
}

.sort-menu {
	padding-top: 10.73px;

}

.sorted-select {
	margin-left: 82.33px;
	-webkit-appearance: none;
	appearance: none;
	padding-top: 0;
	padding: 7.15px 28.62px 7.15px 54.73px;
	border: 0.89px solid #C7C8D2;
	border-radius: 7.15px;
	font-size: 11.63px SemiBold;
	color: #2B2B43;
	background: url(img/selektTxt.svg) no-repeat 10.73px 9.5px, url(img/vector.svg) no-repeat 126.89px 5.7px;
	transition: all 0.4s ease;
}

.sorted-select:hover {
	transform: scale(1.1, 1.1);
	background-color: #E1FFFF;
}

.coment-one {
	margin: 22.35px 14.31px 14.31px 14.31px;
	display: flex;
	border-bottom: 0.89px solid #EDEEF2;
}

.photo-people {
	width: 32.19px;
	height: auto;
	border-radius: 50%;
}

.data-coment {
	margin-left: 10.73px;
	width: 241.46;
}

.name {
	margin: 0;
	padding: 0;
	font: 12.52px bold;
}

.coment-stars {
	display: flex;
	margin-top: 1.79px;
}

.stars-5:first-child {
	padding-left: 0;
}

.time-ago {
	margin: 0 0 0 7.15px;
	padding: 1px 0 0 0;
	font: 8.94px bold;
	color: #83859C;
}

.text-coment {
	font-size: 12.52px;
	color: #2B2B43;
}

.like-dislike {
	display: flex;
	margin: 3.58px 0 0 0;
	padding-top: 7.5px;
	padding-bottom: 7.5px;
}

.n-like {
	padding-top: 3.5px;
	padding-left: 7.15px;
	font: 10.73px SemiBold;
	color: #545563;
}

.like-dislike__dislike {
	margin-left: 19.27px;
}

.coment-one_modifikator {
	margin-bottom: 0;
	border: none;
}

.card {
	margin: 80px 71px 0 27px;
	border-radius: 12px;
	background-color: #FFF;
	width: 294px;
	height: 279px;
	transition: all 0.4s ease;
	box-shadow: -40px 70px 80px rgba(49, 57, 120, 0.3);
}

.card:hover {
	transform: scale(1.05, 1.05);
}

.food-photo {
	margin: 13.44px 13.44px 9.96px 13.44px;
	border-radius: 10px;
	transition: all 0.4s ease;
}

.food-photo:hover {
	transform: scale(1.02, 1.02);
}

.food-name {
	margin: 0;
	margin-left: 13.44px;
	font: 15.12px bold;
	color: #2B2B43;
}

.food-description {
	margin: 2.52px 13.44px 9.44px 13.44px;
	padding: 0;
	font: 10px regular;
	color: #83859C;
}

.plus-food {
	display: flex;
	margin-left: 13.44px;
	align-items: center;
	justify-content: space-between;
}

.price {
	font: 20.16px ExtraBold;
	color: 2B2B43;
}

.plus-wrapper {
	background-color: #F3F4FF;
	border-radius: 10.08px;
	margin-right: 13.44px;
	transition: all 0.4s ease;
}

.plus-wrapper:hover {
	transform: scale(1.1, 1.1);
	background-color: #E1FFFF;
}

.plus {
	display: flex;
	margin: 5.04px;
	padding: 0;
	width: 16.8px;
	height: 16.8px;
}

.second-product {
	padding: 13.55px;
	padding-bottom: 0;
	background-color: #FFF;
	border-radius: 12px;
	display: flex;
	width: 676px;
	position: relative;
	left: 65px;
	bottom: 220px;
	transition: all 0.4s ease;
	box-shadow: 0 0 80px rgba(49, 57, 120, 0.4);
}

.second-product:hover {
	transform: scale(1.05, 1.05);
}

.photo-product {
	border-radius: 10px;
	transition: all 0.4s ease;
}

.photo-product:hover {
	transform: scale(1.04, 1.04);
}


.food-data {
	margin: 0 38.28px 0 16.93px;
}

.food-name_modificator {
	margin-top: 6.73px;
	margin-left: 0px;
}

.food-description_modificator {
	width: 270.9px;
	margin: 2.7px;
	margin-left: 0;
}

.price_modificator {
	display: flex;
	margin-top: 9.64px;
}

.plus-order {
	margin: 30.41px 0 20.32px 38.28px;
}

.plus-minus {
	display: flex;
	margin: 0 0 13.48px 20.06px;
}

.sumbol {
	background-color: #EDEEF2;
	border-radius: 6.77px;
}

.sumbol__img {
	display: block;
	width: 10.16px;
	height: 10.16px;
	padding: 0;
	margin: 3.39px;
	transition: all 0.8s ease;
}

.sumbol:hover {
	transform: scale(1.3, 1.3);
	background-color: #E1FFFF;
}

.n {
	display: flex;
	font: 10.16px bold;
	color: #2B2B43;
	margin: 0 5.08px;
	padding: 0;
}

.add {
	display: flex;
	align-items: center;
	border-radius: 6.77px;
	background-color: #F3F4FF;
	padding: 11.89px 13.55px;
	transition: all 0.4s ease;
}

.add:hover {
	transform: scale(1.1, 1.1);
	background-color: #E1FFFF;
}

.add-plus {
	width: 13.55px;
	height: 13.55px;
	padding: 0;
	margin-right: 6.77px;
}

.add-card {
	display: flex;
	margin-right: 3.55px;
	padding: 0;
}

.footer {
	position: relative;
	bottom: 150px;
	opacity: 0;
}

.foote-head {
	color: #FFF;
	text-align: center;
}

.footer-text {
	color: #FFF;
	text-align: center;
	margin-top: 16px;
	padding-bottom: 40px;
}

.radio-slider {
	cursor: pointer;
	display: flex;
	margin-left: 372px;
}

.slider {
	height: 8px;
	width: 8px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
}

.slider_modificator {
	margin-left: 8px;
}

@media screen and (max-width: 1200px) {
	.site, .content {
		background: #FF6A6A;
	}

	.container {
		width: 960px;
		display: block;
	}

	.lable-input {
		color: black;
	}

	.data-input::placeholder {
		color: black;
	}

	.data-input, .check-button {
		border-color: black;
	}

	.content {
		position: static;
		width: 100%;
	}

	.radio-slider {
		width: 100%;
		margin-left: 450px;
	}

}

@media screen and (max-width: 992px) {
	.container {
		width: 720px;
	}

	.chat {
		margin-left: 17px;
	}

	.second-product {
		left: 5px;
	}

	.radio-slider {
		margin-left: 330px;
	}
}

@media screen and (max-width: 768px) {
	.container {
		width: 540px;
	}

	.chat {
		position: relative;
		top: 80px;
	}

	.product-and-reveiw {
		display: block;
	}

	.card {
		position: relative;
		left: 0px;
	}

	.second-product {
		display: block;
		width: 35%;
		top: 55px;
		padding-bottom: 1px;
		left: 340px;
	}

	.plus-order {
		margin-left: 0;
	}

	.plus-minus {
		margin: 0 0 20px 55px;
	}

	.food-name_modificator {
		margin-left: 20px;
	}

	.food-description_modificator {
		width: 130px;
	}

	.radio-slider {
		margin-left: 242px;
	}

	.footer {
		margin-top: 250px;
	}
}

@media screen and (max-width: 576px) {
	.site {
		background: #FFF;
	}

	.container {
		width: 95%;
		background-color: #FFF;
	}

	.content {
		display: none;
	}

	.data-input {
		width: 100%;
	}

	.data-input::placeholder {
		color: #83859C;
		font-size: 14px;
	}

	.data-input, .check-button {
		border-color: #83859C;
	}

	.link-new-password, .have-account {
		margin-left: 0;
		padding-left: 0;
		text-align: center;
	}

	.link-text {
		width: auto;
	}

	.login-form__data-input {
		background: url(img/eye.svg) no-repeat 97%;
	}

}