@import url("https://fonts.googleapis.com/css?family=Roboto:regular,500,700,900&display=swap");


/* ОБНУЛЕНИЕ СТИЛЕЙ */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
li {
	list-style: none;
}
a,
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}
img {
	vertical-align: top;
}
html,
body {
	height: 100%;
}

body {
	line-height: 1.1;
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	background: url('../img/bg.jpg')center/100% 100% repeat-y fixed;
}
@media (max-width: 1025px) {
	body{
		background-attachment: scroll;
	}
}
body._lock{
	overflow: hidden;
}
.wrapper {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
/* ---------------------------- */

[class*="__container"] {
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px 20px;
}

.kolizey{
	padding: 70px 0;
}
.main{
	flex: 1 1 auto;
}
/*--------------------------*/

/* ------------------------ */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background-color: #980000;
	color: #9da0ff;
}
.header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	min-height: 70px;
}
.header__logo {
	background: url('../img/logo/colosseum.png') 0 0/cover no-repeat;
	position: relative; 
	z-index: 5;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
}

.header__title{
	position: relative; 
	z-index: 5;
	font-weight: 700;
	font-size: 32px;
	padding: 0px 13px 0 5px;
	display: flex;
	justify-content: center;
}

.header__name {
	color: rgba(255, 255, 255);
	text-align: center;
}
.menu-header {
	position: relative;
}
.menu-header__icon {
	display: none;
}

.menu-header__item {
	position: relative;
	background-color: rgb(255, 255, 255);
	border-radius: 5px;
}

.menu-header__item:not(:last-child){
	margin-bottom: 15px;
}

.menu-header__link{
	display: flex;
	align-items: center;
	padding: 8px 8px 8px 5px;
}

.menu-header__image{
	width: 30px;
	height: 30px;
}


.menu-header__body{
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.menu-header__list{
}
.menu-header__title {
	color: #000;
	font-size: 18px;
	font-weight: 700;
	padding: 0 0 0 10px;
}


/* ----------------------- */
@media (min-width: 767px) {
	.header__title{
		flex: 1 1 auto;
		/* margin: 0px 80px 0px 0px; */
		font-size: 32px;
	}
	.menu-header__body {
		position: fixed;
		top: 70px;
		right: 0;
		background-color: rgb(255, 255, 255);
		padding: 3px 0 10px 5px;
	}
	.menu-header__list {
		height: 88vh;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.menu-header__item{
		border-bottom: 1px solid #000;
		border-radius: 0;
	}
	/* -------------------------- */
	/* Размеры скроллбара */
	.menu-header__list::-webkit-scrollbar {
		width: 5px;
	}
	/* Ползунок скроллбара */
	.menu-header__list::-webkit-scrollbar-thumb {
		background: rgb(190, 190, 190);
	}
	/* ------------------------------- */
	.menu-header__title {
		/* flex: 1 1 auto; */
		/* visibility: hidden; */
		display: none;
		opacity: 0;
		transition-duration: .3s;
	}
	.menu-header__list{
		transition-duration: .3s;
	}
	.menu-header__list:hover .menu-header__title{
		/* visibility: visible; */
		opacity: 1;
		display: block;
		transition-duration: .3s;
	}

	.menu-header__item:hover{
		background-color: rgba(0, 0, 0, 0.158);
		transition: .2s;
	}
	.menu-header__item:not(:last-child){
		margin-bottom: 0px;
	}
	.card{
		padding-right: 55px;
	}
	.string{
		padding-right: 40px;
	}

} 
@media (max-width: 767px) {
	.header__title{
		font-size: 26px;
	}
	.menu-header__back{
		content: "";
		position: absolute;
		top: -50%;
		left: -25%;
		background-color: #0000004d;
		width: 150%;
		height: 200%;
		z-index: 5;
		border-radius: 10%;
	}
	.menu-header__back:active,
	.menu-header__icon:active{
		animation: .1s;
		transform: scale(.95);
	}

	.menu-header__list{
		display: flex;
		flex-direction: column;
	}
	.menu-header__icon {
		z-index: 5;
		display: block;
		position: relative;
		width: 30px;
		height: 20px;
		cursor: pointer;
	}
	.menu-header__icon span,
	.menu-header__icon::before,
	.menu-header__icon::after {
		left: 0;
		position: absolute;
		height: 10%;
		width: 100%;
		transition: all 0.3s ease 0s;
		background-color: #fff;
	}
	.menu-header__icon::before,
	.menu-header__icon::after {
		content: "";
	}
	.menu-header__icon::before {
		top: 0;
	}
	.menu-header__icon::after {
		bottom: 0;
	}
	.menu-header__icon span {
		top: 50%;
		transform: scale(1) translate(0px, -50%);
	}

	.menu-header__icon._active span {
		transform: scale(0) translate(0px, -50%);
	}
	.menu-header__icon._active::before {
		top: 50%;
		transform: rotate(-45deg) translate(1%, -50%);
	}
	.menu-header__icon._active::after {
		bottom: 50%;
		transform: rotate(45deg) translate(1%, 50%);
	}

	.menu-header__body {
		position: fixed;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		padding: 90px 30px 30px 30px;
		transition: top 0.3s ease 0s;
		overflow: auto;
	}
	.menu-header__body._active {
		top: 0;
	}

	.menu-header__body::before {
		content: "";
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		height: 70px;
		background-color: #980000;
		z-index: 2;
	}

	.menu-header__list > li {
		flex-wrap: wrap;
		margin: 0px 0px 25px 0px;
	}
	.menu-header__list > li:last-child {
		margin-bottom: 0;
	}
	.menu-header__list > li._active .menu-header__sub-list {
		display: block;
	}
	.menu-header__title {
		font-size: 24px;
	 }
}




/* -------Card-------- */
.card__container > *{
	padding-bottom: 20px;
}
.card__items {
	display: flex;
	flex-wrap: wrap;
	row-gap: 30px;
	margin: 0 -15px;
}
.card__item {
	display: flex;
	flex-direction: column;
	padding: 0 15px;
	flex: 1 1 calc(25% - 30px);
	min-width: 220px;
	position: relative;
}
.card__image{
}
/* -------image-menu-------- */
 .image-menu {
	position: relative;
	padding: 0px 0px 100% 0px;
}
.image-menu__picture {
	object-fit: contain;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
@media (max-width: 468px) {
	.image-menu{
		padding: 0px 0px 0px 0px;
		position: static;
	}
	.image-menu__picture{
		position: static;
		width: 150px;
	}
	.card__image{
		align-self: flex-start;
	}
}

/* -------------------------- */


.card__body{
	padding: 10px;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.05);
}
.card__body *:not(:last-child){
	margin: 0px 0px 10px 0px;
}
.card__header{
	flex: 1 1 auto;
}
.card__portion{

}
.card__title{
}

.card__subtitle{
}
.card__name {
	font-weight: 700;
	font-size: 24px;
	margin: 0px 0px 20px 0px;
	text-transform: uppercase;
}
.card__ingredient {
	font-size: 18px;
	margin: 0px 0px 20px 0px;
}
.card__normal {
	margin: 0px 0px 10px 0px;
}

.portion {
}
.portion__weight {
	color: #b9b9b9;
}

.portion__price {
	font-weight: 700;
}
.card__small {
    display: none;
}
/* -------------------- */

@media (min-width: 660px) {
	.card__item{
		max-width: 300px;
	}
}
@media (min-width: 468px) {
	.image-menu__picture{
		border-radius: 3px 3px 0 0px;
	}
	.card__body{
		border-radius: 0 0 3px 3px;
	}
}
@media (max-width: 468px) {
	.card__items{
		row-gap: 10px;
	}
	.card__item{
		flex-direction: row;
		flex: 1 1 auto;
	}
	.card__header{
		flex: 1 1 auto;
	}
	.card__name{
		font-size: 20px;
	}
	.card__ingredient{
		font-size: 14px;
		margin: 0px 0px 0px 0px;
	}
	.card__portion{
		font-size: 15px;
	}
	.card__item::after{
		content: "";
		position: absolute;
		height: 2px;
		width: 100%;
		top: 100%;
		left: 50%;
		background-color: #fff;
		transform: translate(-50%, 4px);
	}
}
@media (max-width: 350px){
	.card__items{
		margin: 0px 0px 0px 0px;
	}
	.card__item{
		padding: 0px 0px 10px 0px;
	}
	.image-menu__picture{
		width: 120px;
	}
	.card__item::after{
		content: "";
		transform: translate(-50%, 0px);
	}
}

/* ------Drinks------- */
.string {
	max-width: 750px;
	margin: 0 auto;
}
.drinks__hot {
	position: relative;
}
.drinks__title {
}

.drinks__subtitle {
}
.drinks__trademark{
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	padding: 10px 0;
	letter-spacing: 2px;
}
.drinks__hot::before{
	content: "";
	background: url('../img/logo/caffe.png') center/ cover no-repeat;
	position: absolute;
	padding: 50px 100px 0 0;
	top: 25px;
	left: 0;
	border-radius: 10px 10px 0 0;
}


/* -------Title------- */
.title {
	font-size: 30px;
	letter-spacing: 2px;
	font-weight: 700;
	text-align: center;
	padding: 40px 0 20px 0;
	text-transform: uppercase;
}
.subtitle {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 0 0 20px 0;
}
.title_small-padding{
	padding-bottom: 0px;
}
.title_no-subtitle{
	padding-bottom: 20px;
}
@media (max-width: 650px) {
	.header__title{
		font-size: 22px;
	}
	.title{
		font-size: 25px;
	}
	.subtitle{
		font-size: 15px;
	}
	.drinks__trademark{
		font-size: 18px;
	}
	.drinks__hot::before{
		padding: 35px 80px 0 0;
		top: 35px;
	}
}
@media (max-width: 450px) {
	.header__name{
		font-size: 18px;
	}
	.title{
		font-size: 20px;
	}
	.drinks__hot::before{
		padding: 35px 65px 0 0;
		top: 35px;
	}
}

/* ------List-------- */
.list {
	font-size: 20px;
	display: flex;
	width: 100%;
}
.list:not(:last-child) {
	padding-bottom: 2%;
}
.list__name {
	flex: 1 1 auto;
}
.list__ukr-name{
	font-size: 25px;
	font-weight: 700;
}
.list__sort{
	font-style: italic;
	padding: 0 10px 1% 0;
}
.list__other-name{
	color: rgb(76, 76, 168);

}
.list__body{
	display: flex;
	justify-content: flex-end;

}
.list__amount {
	padding: 0 12px 0 0px;
}
.list__price {
}
@media (max-width: 767px) {
	.list{
		font-size: 14px;
	}
	.list__amount{
		color: #b9b9b9;
	}
	.list__ukr-name{
		font-size: 16px;
		padding: 0px 10px 0px 0px;
	}
	.list__body{
		white-space: nowrap;
	}
}
@media (max-width: 767px) and (min-width: 550px) {
	.string{
		width: 550px;
	}
}
.hidden-null{
	visibility: hidden;
}
/* .list_green{
	color: rgba(0, 128, 0, 0.678);
} */





/* -------footer-------- */
.footer{
	padding: 20px 0;
	background-color: rgb(20, 20, 20);
	line-height: 1.3;
	display: flex;
	justify-content: center;
}
.footer__container {
	display: flex;
}
.footer__container > *:first-child{
	/* margin-bottom: 30px; */
}
/* ---------item------------ */
.footer__item{
	display: flex;
	flex-direction: column;
}
.footer__item > *:not(:last-child){
	margin-bottom: 30px;
}
/* ---------maps------------ */
.maps{
	margin: 0px 30px 0px 0px;
}


/* -------copyright-------- */
.copyright {
	font-size: 12px;
	opacity: 0.5;
}
.copyright__title {
}
.copyright__text {
}

/* ---------social---------- */
.social {
}
.social > * {
	display: inline-block;
}
.social__instagram {
	padding: 0px 10px 0px 0px;
}
.social__facebook {
}

/* -------address-------- */
.footer__address {
	padding: 0px 10px 0px 0px;
}
.address{
	display: flex;
	flex-direction: column;
	margin: 0px 0px 10px 0px;
}
.address__city {
}
.address__time {
}
.address__phone {
}


/* -------delivery-------- */
.footer__delivery {
}
.delivery {
	display: flex;
	flex-direction: column;
}
.delivery__title {
}
.delivery__text {
	margin: 0 0 10px 0;
}
.delivery__application {
	padding: 3px 0;
}
.delivery__application > *{
	display: inline-block;
}
.delivery__app-store {
}
.delivery__google-play {
}

@media (max-width: 1000px) {
	.maps{
		margin: 0px 0px 30px 0px;
	}
	.footer{
		display: flex;
		justify-content: center;
		text-align: center;
	}
	.footer__container{
		flex-direction: column;
	}
	.delivery__app-store {
		margin: 0px 10px 0px 0px;
	}
}
@media (max-width: 767px){
	.footer__item{
		font-size: 14px;
	}
}




.none{
	width: 50px;
}
.bg-kolizey{
	background: url('../img/colosseum.jpg') 25% 70%/ cover no-repeat fixed;
}
.kolizey__container{
}


.kolizey__title-choice{
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	padding: 40px 0px;
}
.kolizey__choice {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;

}
.kolizey__container{
	/* margin: 0 -15px 0 0; */
}
.kolizey__choice a{
	flex: 0 0 47%;
	padding: 200px 0 0 0;
	overflow: hidden;
	position: relative;
	max-width: 400px;
	border-radius: 5px;
	border: 1px solid rgb(190, 190, 190);
}

.kolizey__choice img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0%;
	opacity: .9;
}

.kolizey__address{
	position: absolute;
	top: 65%;
	left: 10%;
	color: rgb(255, 255, 255);
	font-weight: 700;
	font-size: 24px;
}

@media (max-width: 767px) {
	.kolizey__address{
		font-size: 18px;
		font-weight: 500;
		left: 5%;
	}
	.kolizey__title-choice{
		font-size: 22px;
		padding: 20px 0px;
	}

}
@media (max-width: 550px) {
	.kolizey__choice{
		flex-direction: column;
		align-items: center;
	}
	.kolizey__choice a{
		min-width: 90%;
	}
}


@media (min-width: 767px) {
	.kolizey__choice a:hover{
		transform: scale(1.03);
		transition: .3s;
		box-shadow: 0 0 10px 2px #fff;
	}
}





@media (max-width: 550px) {
	.maps{
		width: 100%;
	}
}


.error{
	text-align: center;
	padding: 150px 0px 0px 0px;
}
.error__title{
	font-size: 5vw;
	font-weight: 700;
	color: #fff;
}

.hostiq{
	position: absolute;
	left: 0;
	padding: 0px 10px;
}