.product @import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic"); * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Exo 2', sans-serif; font-weight: 400; font-size: 14px; width: 100%; /*min-width: 1040px;*/
background: #e7e6e5; } body.page { background-color: #d0d0d0; } body.modal-open { padding-right: 17px; } header, section, footer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content:
center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } div { -webkit-box-sizing: border-box; box-sizing: border-box; } .wrap {max-width: 1000px;width: 100%;padding:
0 20px;}
.catalog__wrap {background: #fff;padding: 30px 20px 50px 20px !important;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: start;-webkit-justify-content:
flex-start;-ms-flex-pack: start;justify-content: center;} .product {max-width: 215px;width: 100%;-webkit-box-shadow: 0 0 15px #6c6c6c;box-shadow: 0 0 15px #6c6c6c;margin: 30px 10px 0 10px;} .product:not(:nth-child(4n)) {/* margin-right: 33px; */} .product__img { width:
100%; } .product__name { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-height: 70px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content:
flex-start; -ms-flex-pack: start; justify-content: flex-start; font-size: 18px; font-weight: 700; padding: 10px 10px 0 10px; } .product__about { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify;
-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding: 20px 10px 0 10px; } .product__about--price { font-weight:
700; font-size: 28px; } .product__about--weight { color: #8a8a8a; font-size: 16px; } .product__desc { text-align: left; padding: 10px; min-height: 0px; } .product__btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display:
flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background-color: #ee1e17; height: 45px;
font-size: 20px; color: #fff; } .product__btn:hover { cursor: pointer; }
.footer__wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items:
center; -ms-flex-align: center; align-items: center; height: 90px; background-color: #010101; } .footer__box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;
-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .footer__text { font-size: 16px; color: #fff; } .footer__link { color: #ff6762; -webkit-text-decoration-color: #ff6762; text-decoration-color: #ff6762; } .footer__developer
{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; text-align: right; } .footer__developer--logo { margin: 0 0 0 15px; }
.main-page { background: url(../img/bg_main.png) top center no-repeat;  min-height: 680px; } .main-page__wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
} .main-page__box { padding: 0 40px 0 0; } .main-page__box:last-child { width: 410px; padding: 0; } .main-page__desc { margin: 70px 0 0 0; font-size: 18px; color: #262626; text-align: justify; } .main-page__contacts { margin: 0 0 0 25px; } .main-page__phone
{ display: inline-block; color: #e9160e; font-size: 36px; font-weight: 700; text-decoration: none; margin: 15px 0 5px 0; } .main-page__adress { font-size: 19px; text-decoration: underline; -webkit-text-decoration-color: #e9160e; text-decoration-color:
#e9160e; } .mp-menu { padding: 0; margin: 0; list-style: none; } .mp-menu__item:not(:last-child) { margin: 0 0 20px 0; } .mp-menu__link { font-size: 30px; text-decoration: none; border-bottom: 2px solid #e9160e; color: #000; } .mp-menu__link:hover { color:
#e9160e; }
.header__wrap { background-color: #f7f7f7; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:
center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100px; } .header__logo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center;
-ms-flex-align: center; align-items: center; } .header__logo-icon { margin: 0 10px 0 0; } .header__logo-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;
-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .header__adress { display: inline-block; width: 280px; text-align: center; font-size: 13px; padding: 5px 0; background: #e9160e; color: #fff; margin: 10px 0 0 0; } .header__phone
{ font-size: 38px; font-weight: 700; color: #e9160e; } .header__phone--gray { color: #484848; } .header__times { font-size: 16px; text-align: right; }
.modal__box { padding: 0; } .modal__success {position: relative;max-width: 500px;width: 100%;margin: 20px;max-height: 200px;} .modal__close { position: absolute; top: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center;
-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 39px; height: 39px; background-color: #d80000; } .modal__close:hover
{ cursor: pointer; } .modal__success-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center;
-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 250px; } .modal__success-content--text { text-align: center; font-size: 36px; } .modal__cart { width: 960px; background: #fff; } .cart-content { display: -webkit-box;
display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 20px 0 0 20px; } .cart-content__title { font-size: 28px; margin: 0 0 10px 0; } .cart-content__calc { position: relative; /*right: 17px;*/    top: 10px;  display: -webkit-box; display: -webkit-flex; display:
-ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 15px 0
0 auto; width: 110px; height: 36px; background-color: #9a9a9a; color: #ffffff; } .cart-content__calc:hover { cursor: pointer; } .cart-table { width: 650px; max-height: 400px; overflow-y: scroll; border-bottom: 1px solid #ddd; } .cart-table__item { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border: 1px solid #ddd; border-top: 0; padding: 0 5px;
} .cart-table__item:first-child { border-top: 4px solid #ee1e17; } .cart-table__photo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction:
column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .cart-table__photo--img { width: 85px; } .cart-table__info { padding: 15px; display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content:
center; -ms-flex-pack: center; justify-content: center; border-right: 1px solid #ddd; } .cart-table__info--name { font-size: 18px; font-weight: 700; margin: 0 0 8px 0; } .cart-table__counts { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;
display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content:
center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right: 1px solid #ddd; min-width: 95px; } .cart-table__counts-input { width: 50px; height: 30px; text-align: center; } .cart-table__delete-link
{ color: #d80000; text-decoration: underline; margin: 5px 0 0 0; } .cart-table__price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction:
column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items:
center; text-align: center; min-width: 95px; font-size: 16px; } .total { background-color: #ededed; min-height: 550px; margin: 19px 0 0 0; padding: 30px 15px; width: 100%; } .total__price { color: #404040; font-size: 26px; text-align: center; } .total__price--red
{ color: #ee1e17; font-size: 30px; } .total__form { margin: 15px 0 0 0; } .total__form-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction:
column; -ms-flex-direction: column; flex-direction: column; } .total__form-box:not(:last-child) { margin: 0 0 10px 0; } .total__form-label { color: #1d1d1d; margin: 0 0 4px 0; } .total__input { border: 1px solid rgba(124, 124, 124, 0.56); height: 25px;
} .total__select { border: 1px solid rgba(124, 124, 124, 0.56); height: 25px; } .total__time { width: 80px; } .total__date { width: 120px; } .total__form-datetime { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .total__form-datetime--delimetr
{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: 
center; align-items: center; padding: 0 5px; } .total__form-btn { width: 100%; height: 49px; background-color: #ee1e17; border: 0; color: #fff; font-size: 19px; margin: 25px 0 0 0; } .total__form-btn:hover { cursor: pointer; }
.navigation__wrap { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:
center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #010101; padding: 0; } .menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .menu__link { display: -webkit-box;
display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 16px; color: #fff; text-decoration: none; padding: 20px; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; } .menu__link:hover { background: #262626; } .cart { position:
absolute; top: 0; right: 20px; background-color: #e60e06; height: 70px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; z-index: 1; } .cart__icon { position: relative; display: -webkit-box; display: -webkit-flex;
display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width:
70px; background-color: #cd0c05; } .cart__icon:before { content: ""; display: block; position: absolute; bottom: 0; left: -16px; border-width: 0 16px 12px 0; border-style: solid; border-color: #700400 #700400 transparent transparent; background: transparent;
width: 0; } .cart__counts { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
-webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 15px; font-size: 18px; font-weight:
700; color: #fff; }
.category-name { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; color: #f70800; font-size: 18px; font-weight: 700; text-decoration: underline; padding: 20px 15px 0 15px; } .category-price { color: #8a8a8a; font-size:
16px; font-weight: 700; margin: 15px 15px 10px 15px; } .category-price--big { font-size: 24px; } .content__wrap { background: #fff; padding: 20px; } .content__text { font-size: 18px; } .content__text--red { color: #e9160e; }
.title-banner__wrap { position: relative; height: 230px; background: url(../img/rolls-banner.png); -webkit-background-size: cover; background-size: cover; } .title-banner__title { position: absolute; left: 0; bottom: -10px; color: #010101; font-size:
57px; font-weight: 700; margin: 0; text-transform: uppercase; }
.title-banner__wrap {position: relative;height: 230px;background: url(../img/rolls-banner.png);-webkit-background-size: cover;background-size: contain;} .title-banner__title { position: absolute; left: 0; bottom: -10px; color: #010101; font-size:
57px; font-weight: 700; margin: 0; text-transform: uppercase; }

.menu_recycle {display:table !important; position:absolute; bottom:0; width:100%; text-align:center;}
.product {position:relative; min-height:340px;}

@media screen and (max-width:576px){
	
	.product {position:relative; min-height:400px;}
	
}

@media screen and (max-width:375px){
	
	.product {position:relative; min-height:370px;}
	
}

@media screen and (max-width:320px){
	
	.product {position:relative; min-height:350px;}
	
}



.popup {
	top: 5%;
	left: 0;
	right: 0;
	font-size: 14px;
	margin: auto;
	width: 85%;
	min-width: 350px;
	max-width: 390px;
	position: absolute;
	padding: 1px 1px;
	border: 1px solid #383838;
	background: #fefefe;
	z-index: 1000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-webkit-animation: fade .6s;
	-moz-animation: fade .6s;
	animation: fade .6s;
}
.popup img{
max-width: 550px;	
}
.close {
	top: 10px;
	right: 5px;
	width: 40px;
	height: 40px;
	position: absolute;
	border: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(252, 20, 0, 0.8);
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	cursor: pointer;
	outline: none;
}
.close:hover{
background-color: #000;	
}
.close::before {
	color: rgba(255, 255, 255, 0.9);
	content: "X";
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
#overlay{
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto;	
}

img.header__logo-icon--img {
    width: 60px;
}

/* скрываем чекбокс */
#menu__toggle {
  opacity: 0;
}
/* стилизуем кнопку */
.menu__btn {
  display: flex; /* используем flex для центрирования содержимого */
  align-items: center;  /* центрируем содержимое кнопки */
  justify-content: flex-end;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 99999999;
}
/* добавляем "гамбургер" */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  z-index: 99999999;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

/* контейнер меню */
.menu__box {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 100%;
  min-width: 100vw;
  margin: 0;
  list-style: none;
  /* text-align: center; */
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  z-index: 9999;
  padding: 20px;
}
/* элементы меню */
.menu__item {
  display: block;
  padding: 4px 0;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}
.menu__item:hover {
  background-color: #CFD8DC;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  transition-duration: .25s;
}
.menu__box {
  transition-duration: .25s;
}
/*.menu__item {
  transition-duration: .25s;
}*/

.hamburger-menu {
    position: absolute;
    display: none;
    top: 0;
    /* right: 0; */
    /* float: right; */
    /* width: 100%; */
}

@media (max-width: 850px) {
	.header__contacts, .menu {
		display: none;
	}
	
	.wrap.navigation__wrap {
		height: 0;
	}
	
	.hamburger-menu {
		display: block;
	}
	
	div#recycle.cart {
		bottom: 20px;
		top: unset;
		position: fixed!important;
	}

	.navigation__wrap {
		position: unset;
	}
	span.header__adress {
		font-size: 10px;
		width: 100%;
	}
	.header__wrap {
		height: 76px;
		background-color: #ffff;
		padding: 0;
	}
	img.header__logo-text--img {
		width: 190px;
	}
	.cont {
		color: #8B8B8B;
		font-size: 15px;
		margin: 20px 0;
	}
	.header__logo {
		padding-left: 20px;
	}

	h1.title-banner__title {
		padding-left: 20px;
		font-size: 30px;
		bottom: -5px;
	}

	div#contacts_addr {
		text-decoration: underline;
	}

	a#contacts_phone {
		color: #000;
		font-weight: bold;
		font-size: 27px;
		line-height: 44px;
	}

	a#contacts_phone span {
		vertical-align: 5px;
		padding-right: 9px;
		font-size: 16px;
	}

	ul.menu__box li.first-child {
		margin-top: 20px;
	}

	.wrap.title-banner__wrap {
		height: 150px;
	}
}

.wrap.content__wrap.cafe img {text-align: center;margin: 0 0 20px 0;}

.wrap.content__wrap.cafe {
    text-align: center;
}