@font-face {
    font-family: 'alata';
    src: url('/fonts/Alata-Regular.ttf');
}
.font-serif {font-family: serif}
.font-alata {font-family: 'Alata', sans-serif}

.card h2 {font-size: 25px}
h1, h2, h3 {font-family: serif}
* {margin:0;padding:0;}
body{box-sizing: border-box;background-color: #f9f8f4}
textarea{resize: vertical;}
.container-fluid {margin-top: 15px;padding:0 10%}

/* header */
header{
	backdrop-filter: blur(4px);
	background-color: #ffffffc7;
	box-shadow: -2px 0px 15px 3px rgb(0 0 0 / 25%);
    -webkit-box-shadow: -2px 0px 15px 3px rgb(0 0 0 / 25%);
    -moz-box-shadow: -2px 0px 15px 3px rgba(0,0,0,0.25);
	top:0;
	z-index: 100;
	position: fixed;
    width: 100%;
	display: grid;
	transition: 0.7s;
}
header ul{
	list-style:none;
	margin:auto;
}
header li{
	float:left;
	padding: 10px;
	font-size:20px;
	color:white;
	transition: 0.7s;
}
.header-sticky-color {color: black; transition: 0.7s;}
/*header sticky*/
header.header-sticky {background-color: #fffffff7;transition: 0.7s;}
.header-sticky li, .header-sticky .header-sticky-color{color:black !important}
.header-sticky .logo img{height: 50px; }
.header-sticky .cart-container { top: 14px; transition: 0.7s}
/*header sticky end*/
nav {
	display:flex;
	position: relative;
	text-align: center;
}

.menu {margin: auto;}
.menu span {vertical-align: super;}

.flag {width:40px; height:auto;cursor:pointer}
.vertical-top {vertical-align: top;}
.cart-container { display: inline-flex;padding:0 10px; cursor:pointer;position:absolute;right:0;top: 24px;transition: 0.7s}
.arrow {transform:rotate(90deg);margin-left:5px; }
.arrow span::after {content: "\203A";margin:0;padding:0}
.flags-container {position: fixed;right: 10px;
    top: 60px;
    padding-left: 6px; background-color: white;
	box-shadow: -1px 3px 4px -1px #00000029;
	-webkit-box-shadow: -1px 3px 4px -1px #00000029;

}
.flags-container img {display: block; margin:13px 12px 19px 11px;}



nav a{vertical-align: middle; }
a{text-decoration: none; }
a:hover{text-decoration:underline;}
nav a {color: black;transition: 0.3s}
nav a:hover {text-decoration: none;color: #840e0b}
.small-logo{padding:5px;}
.small-logo a img{height:45px;}
ul.border-anima li a {display:inline-block;}
ul.border-anima li a::after{
	display:block;
	content: '';
	border-bottom: solid 2px #840e0b;
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
	width: 100%;
	margin:auto;
}
ul.border-anima li a:hover:after { transform: scaleX(1); }
.header-ul-container{
    top: 0;
    height: auto;
	margin: auto;
	transform: translateX(-45px);
}

.logo {margin: auto 0; padding:5px 0}
.logo a{font-size: 20px; margin-left:10px}
.logo img{height: 60px; width: auto;transition: 0.7s}
.cart {display: flex; margin-right: 10px}

/*
header hamburger
*/
.hamburger-container{
	z-index:100000;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	display: none;
}
#ham-icon{
    display:block;
    top:9px;
    width: 30px;
    height: 36px;
    position: relative;
    margin-left:10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#ham-icon span{
    display: block;
     position: absolute;
     height: 2px;
     width: 100%;
     background: #7f7f7f;
     border-radius: 9px;
     opacity: 1;
     left: 0;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: .25s ease-in-out;
     -moz-transition: .25s ease-in-out;
     -o-transition: .25s ease-in-out;
     transition: .25s ease-in-out;
}
#ham-icon span:nth-child(1) {
  top: 0px;
}

#ham-icon span:nth-child(2),#ham-icon span:nth-child(3) {
  top: 7px;
}

#ham-icon span:nth-child(4) {top: 14px;}

#ham-icon.open span:nth-child(1) {
  top: 7px;
  width: 0%;
  left: 50%;
}

#ham-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#ham-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#ham-icon.open span:nth-child(4) {
  top: 7px;
  width: 0%;
  left: 50%;
}


/*
shop
*/

.parallax-container{
	background: url(/img/winery.jpg) no-repeat;
	min-height: 50vh;
	margin-top: 70px;
	width: 100vw;
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: flex;
  	justify-content: center;
}
.parallax-text {font-weight: 600; color:white; text-shadow: 0px 0px 4px #000000a8;}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.card-container {
  height: auto;
  margin: 5px;
  padding: 5px;
  text-align: center;
}
.form-select, input{width:auto}
.form-check-input:checked {background-color: #d5af5a; border-color: #ae8d43}
.form-select:focus {box-shadow: none}
.card-mt {margin-top: -15px;padding: 0 10px;}
.button { border: 2px solid #d5af5a; padding: 3px 20px; background-color: #ffffffe6;border-radius: 25px;
	color:black;font-size: 1.2rem;transition: all .3s;font-weight: 500;
}
.button:hover {text-decoration: none; background: #d5af5a; color: black}
.btn {padding: 2px 10px;}
/*product page*/
.prod-img-container {width: auto;}
.prod-img-container img{max-height: 90vh;}

.quantity-btn {background-color: white;
    padding: 0 8px 2px 8px;
    border: none;
	min-width: 30px;
	-webkit-box-shadow: 0px 0px 2px 1px #0000003d;
	box-shadow: 0px 0px 2px 1px #0000003d;
	margin: 0 3px;
}
.card-title {margin-bottom: 0;}
.p-one-row {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
/* orders header parts */
.order-line-container{width:75%;margin: auto;}
.order-part{width:25%;text-align: center;}
.circle {
	display: flex;
	border-radius: 50%;
    width: 36px;
    height: 36px;
    background: #0e8b81;
    color: white;
	margin:-18px auto 0 auto;
}

.circle span{margin: auto}
.box-shadow{
	-webkit-box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 16%);
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 16%);
}
.text-left{text-align: left !important}

/*
	orders
*/
.mini-img {
	max-width:60px;
	max-height: 110px;
}
.table {width: auto;}

.table-bg { background: #eaf0f2;}
.table-bg a {color: #006587; font-size: 110%;}

td {vertical-align: middle;}
li {padding: 5px}
.no-pointer {cursor: default !important}
.btn-turquoise { background: #0e8b81; color:white; border-radius: 20px; padding: 3px 20px; border:none;transition: all 0.3s}
.btn-turquoise:hover {background: #147a72; color:white; transition: all 0.3s; box-shadow: 0 0 10px 0px #0000004a;}


.cookie-consent{
	background-color: #000000f0;
	color:white;
	position: fixed;
	bottom:0;
	width:100%;
	padding: 10px;
	backdrop-filter: blur(4px);
}
.white-space-nowrap {white-space: nowrap;}
/*scale nincs használatban*/
.scale-animation{
	animation-duration: 0.5s;
	animation-name: scale;
}


/*egyéb*/
.top-margin {margin-top:115px !important}


@keyframes scale {
  0% {
	transform: scale(1)
  }
  40% {
   transform: scale(1.5)
  }
  100% {
	transform: scale(1)
  }
}

@media only screen and (max-width: 950px) {
	/*header*/
	nav {display: block;position: relative;height: auto;}
	nav ul {margin:0;z-index: 10;

		display: grid;
    	top:0;
		align-items:center;
        justify-content:center;
		text-align: center;
		display: grid;
	}
	.header-ul-container{
		background-color: #fffffff7;
    	backdrop-filter: blur(4px);
		height: 100vh;top:70px;position: absolute;
		box-shadow: 0px 18px 15px 3px rgb(0 0 0 / 25%);
		-webkit-box-shadow: 0px 18px 15px 3px rgb(0 0 0 / 25%);
		-moz-box-shadow: 0px 18 15px 3px rgb(0 0 0 / 25%);
		transition: all .3s;
		z-index:-10;
		transform: translateX(0);
		/*margin-left nélkül nem működik header show*/
		margin-left: -80%;

	}
	.header-sticky .header-ul-container {top:60px}
	.header-ul-container ul {margin-left:-30px; text-align:left}
	.small-logo{position: absolute;width: 100%;left: 0;}

	.header-ul-container li, .header-ul-container .header-sticky-color {color:black}

	.hamburger-container{display: block;}
	.ham-open .header-ul-container{
		animation-duration: 0.25s;
		animation-name: slidein;
		margin-left: 0%;
		padding-left: 0;
		animation-timing-function: ease;
	}
	/* header menu list*/
	.dropdown-menu {left: 110% !important; top: -25px !important;}
	/*product page*/
	.prod-bg {background-color: white !important}

	/*form*/
	.form-container {width: 100% !important; }
    @keyframes slidein {
	  0% {
	    margin-left: -80%;
		padding-left: 50%;
	  }
	  70% {
		  margin-left: 0%;
	  }
	  100% {
		padding-left: 0%;

	  }
	}

}