/*
Alapsz�n: #42ac9e; // sz�n
Sz�vegsz�n: #4a4a4a
Alsz�n: #a4a4a4
Alsz�n 2: #c8c8c8

*/


/* fonts */

@font-face {
	font-family: OpenSans-Bold;
	src: url('../fonts/OpenSans/OpenSans-Bold.ttf');
}
@font-face {
	font-family: OpenSans-SemiBold;
	src: url('../fonts/OpenSans/OpenSans-SemiBold.ttf');
}
@font-face {
	font-family: OpenSans-Regular;
	src: url('../fonts/OpenSans/OpenSans-Regular.ttf');
}
@font-face {
	font-family: CircularStdBold;
	src: url('../fonts/CircularStd/CircularStd-Bold.otf');
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/Custom/icomoon.eot?xjcsp8');
  src:  url('../fonts/Custom/icomoon.eot?xjcsp8#iefix') format('embedded-opentype'),
    url('../fonts/Custom/icomoon.ttf?xjcsp8') format('truetype'),
    url('../fonts/Custom/icomoon.woff?xjcsp8') format('woff'),
    url('../fonts/Custom/icomoon.svg?xjcsp8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-left:before {
  content: "\e900";
  color: #42ac9e;
}
.icon-arrow-right:before {
  content: "\e901";
  color: #42ac9e;
}
.icon-arrow-left {
	margin-right: 14px;
}
.icon-arrow-right {
	margin-left: 14px;
}

/* base */

.dialog-extra { margin: 0px auto; }

body {
	font-family: OpenSans-Bold;
	font-size: 14px;
	color: #4a4a4a;
	position: relative;
	
}

h1 {
	font-size: 4.8em;
}
h2 {
	font-size: 2.7em;
}
h4 {
	font-size: 1.3em;
}

hr {
    display: block;
    height: 2px;
    border: 0;
    border-top: 2px solid #42ac9e;
    margin: 1em 0;
    padding: 0; 
}

p {
	font-size: 1.2em;
	font-family: OpenSans-SemiBold;
	color: #a4a4a4;
}

/* own declerations */

.vertical-align {
	display: flex;
    align-items: center;
}
.float-right {
	float: right;
}

.highlighted {
	color: #42ac9e;
}
.inline-block {
	display: inline-block;
}

.min-height-100vh {
	min-height: 100vh;
	height: auto;
}
.min-width-250px {
	min-width: 250px;
}

.mar-b-40vh {
	margin-bottom: 40vh;
}
.mar-b-35vh {
	margin-bottom: 35vh;
}
.mar-b-30vh {
	margin-bottom: 30vh;
}
.mar-b-20vh {
	margin-bottom: 20vh;
}
.mar-b-150 {
	margin-bottom: 150px;
}
.mar-b-75 {
	margin-bottom: 75px;
}
.mar-b-50 {
	margin-bottom: 50px;
}
.mar-t-30 {
	margin-top: 30px;
}
.mar-lr-0 {
	margin-left: 0;
	margin-right: 0;
}


.pad-l-60 {
	padding-left: 60px;
}
.pad-l-20 {
	padding-left: 20px;
}
.pad-r-20 {
	padding-right: 20px;
}
.pad-lr-20 {
	padding-left: 20px;
	padding-right: 20px;
}
.pad-lr-0 {
	padding-left: 0;
	padding-right: 0;
}

.uppercase {
	text-transform: uppercase;
}


.button {
    background-color: #42ac9e;
    border: none;
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1em;
	
	cursor: pointer;

	
	border-radius: 10px;
	box-shadow: 11px 11px 11px 0px rgba(0,0,0,0.10);
	-webkit-box-shadow: 11px 11px 11px 0px rgba(0,0,0,0.10);
	
	-o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition: .2s
}
.button:hover {
	color: #fff;
    background-color: #51c2b3;
}
.button:focus {
	outline: 0;
}
.input-text {
	background-color: #ffffff;
    border: none;
	outline: none;
    color: #4a4a4a;
    padding: 13px 20px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
	
	font-family: OpenSans-SemiBold;
	
	-webkit-appearance: none;

	transition: border 0.3s ease-in-out;
	-webkit-transition: border 0.3s ease-in-out;
	border-radius: 10px;
	border: 2px #b6b6b6 solid;
}
.input-text:focus {
	border-color: #d4d4d4;
}
.input-text::placeholder {
	color: #c8c8c8;
	
	font-family: OpenSans-SemiBold;
}

.hr-small {
	display: inline-block;
    height: 2.5px;
	width: 95px;
    border-top: 2.5px solid #42ac9e;
	margin: 1.3em 0 1.1em 0;
}

.arrow {
	display: inline-block;
	width: 30px;
	height: 20px;
	margin: 0 5px 0 15px;
}
.arrow object, .arrow img {
	width: 100%;
	height: 17px;
}

.flex {
	display: flex;
}

/* Main css */

/* Social icons */


.social-icons {
	list-style-type: none;
	padding: 0;
	font-size: 30px;
}
#mobile-navigation-bar-container .social-icons {
	width: 100%;
}
.social-icons li {
    display: inline-block;
	margin: 0px;
}
.social-icons li .social-icon {
	cursor: pointer;
    color: #ffffff;
    text-decoration: none;
}
.social-icons li .social-icon img {
	display: inline-block;
}
.social-icons img, .social-icons object {
	pointer-events: none;
}



/* Navigation bar */
#mobile-navigation-bar-shadow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.90);
}

#mobile-navigation-bar-container {
	position: fixed;
	left: 0;
	right: 0;
	min-height: 100vh;
	height: auto;
	
	top: 0;
	z-index: 2;
}

#mobile-navigation-bar-container .left {
	min-height: 100vh;
	width: 70px;
	display: flex;
	justify-content: center;
    flex-direction: column;
	float: left;
	
	
	padding-left: 20px;
	padding-bottom: 40px;
	

}
#mobile-navigation-bar-container .right {
	min-height: 100vh;
	display: flex;
	justify-content: center;
    flex-direction: column;
	text-align: right;
	
	padding-top: 80px;
	padding-right: 20px;
	padding-bottom: 120px;
	font-size: 1.8em;
	line-height: 1.9em;
}
#mobile-navigation-bar-container .right a {
	color: #ffffff;
	text-decoration: none;
}
#mobile-navigation-bar-container .right a:focus {
	color: #ffffff;
}
#mobile-navigation-bar-container .right a:active {
	color: #ffffff;
}
#mobile-navigation-bar-container .right a:hover {
	color: #21a397;
}


#navigation-bar {
	height: 85px;
	
	position: absolute;
    right: 0;
    left: 0;
	
    z-index: 1030;
	
	padding-top: 45px;
}
#navigation-bar .title {
	height: 50px;
	float: left;
	font-family: CircularStdBold;
}
#navigation-bar .title span {
	font-size: 2.0em;
	color: #ffffff;
}
#navigation-bar .items {
	height: 50px;
	float: right;
}
#navigation-bar .items ul {
	height: 100%;
	margin-bottom: 0;
}
#navigation-bar .items ul li:not(.hamburger-holder) {
	display: inline-block;
	padding: 0 0 0 30px;
	
	font-size: 1.2em;
}

#navigation-bar .navitem, #navigation-bar  .navitem.active {
	-o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition: .2s
}
#navigation-bar  .navitem:focus, #navigation-bar  .navitem.active:focus {
	text-decoration: none;
	color: #42ac9e;
}
#navigation-bar  .navitem:hover, #navigation-bar  .navitem.active:hover {
	color: #42ac9e;
	
	text-decoration: none;
}
#navigation-bar  .navitem:active, #navigation-bar  .navitem.active:active{
	text-decoration: none;
	color: #42ac9e;
}
#navigation-bar  .navitem.active {
	color: #42ac9e;
}
#navigation-bar  .navitem {
	color: #c8c8c8;
}
#navigation-bar .items ul li.hamburger-holder {
	display: none;
	width: 25px;
	height: 25px;
	margin-right: 0px;
}
#navigation-bar .items .hamburger {
	width: 100%;
	height: 100%;
	
}
#navigation-bar .items .hamburger img {
	width: 100%;
	height: 100%;
	
	-o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s
}
#navigation-bar .items .hamburger:link.white img {
	content: url(../img/hamburger-white.svg);
}
#navigation-bar .items .hamburger:hover img {
	content: url(../img/hamburger-selected.svg);
}
#navigation-bar .items .hamburger:selected img {
	content: url(../img/hamburger.svg);
}

#navigation-bar .items .hamburger.close-ham img {
	padding-top: 3px;
	padding-bottom: 3px;
}
#navigation-bar .items .hamburger:link.close-ham img {
	content: url(../img/close.svg);
}

#navigation-bar .items .hamburger:hover.close-ham img {
	content: url(../img/close-selected.svg);
}

/* Content */
#csuccs .social-icons {
	display: block;
	position: absolute;
	bottom: 0;
	right: 25px;
}

#csuccs .slogen, #csuccs .info, #about-us, #menu, #subscribe, #optional-product, #contact-and-footer {
	-o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition: .2s;
	outline: none;
}
#csuccs:focus, #csuccs:focus, #about-us:focus, #menu:focus, #subscribe:focus, #optional-product:focus, #contact-and-footer:focus {
	
	outline: none;
}
#csuccs .bagel-image-wrapper {
	position: absolute;
	width: 60vw;
	height: 100%;
	max-width: 90vw;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 0;
	/*animation: pulseAnim 2s alternate infinite;
	-webkit-animation: pulseAnim 4s alternate infinite;*/
}

#csuccs .bagel-image-wrapper img {
	width: 80%;
	left: 0;
	top: 0;
	position: relative;
	transition: transform 0.2s linear;
}

@-webkit-keyframes movemask {
    0% { transform:rotate(0deg); }
    25% { transform:rotate(10deg); }
    75% { transform:rotate(-10deg); }
    100% { transform:rotate(0deg); }
}

@keyframes pulseAnim {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-40px);
	}
}

/*@keyframes pulseAnim {
	0%, 100% {
		clip-path: ellipse(41% 31% at 38% 38%);
		-webkit-clip-path: ellipse(41% 31% at 38% 38%);
	}
	50% {
		clip-path: ellipse(43% 35% at 38% 38%);
		-webkit-clip-path: ellipse(43% 35% at 38% 38%);
	}
}*/

#csuccs .slogen {
	margin-top: 20vh;
	min-height: 40vh;
    color: #4a4a4a;
	position: relative;
}
#csuccs .slogen h1 {
	line-height: 1.2em;
	letter-spacing: 0.05em;
}
#csuccs .slogen .vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#csuccs .slogen .anim-1, #csuccs .slogen .anim-2 {
	opacity: 0;
}
#csuccs .info {
	min-height: 40vh;
	position: relative;
}
#csuccs .info .social-icons li { display: inline-block; width: 32px; height: 40px; }
#csuccs .info .social-icons li span { display: block; width: 40px; height: 40px;}
#csuccs .info .social-icons .facebook { background: url('../img/fb.jpg') no-repeat; background-size: contain;}
#csuccs .info .social-icons .facebook:hover { background: url('../img/fb-hover.jpg') no-repeat; background-size: contain;}
#csuccs .info .social-icons .instagram { background: url('../img/insta.jpg') no-repeat; background-size: contain;}
#csuccs .info .social-icons .instagram:hover { background: url('../img/insta-hover.jpg') no-repeat; background-size: contain;}
#csuccs .info .social-icons .google-plus { background: url('../img/google.jpg') no-repeat; background-size: contain; background-position: 50%;}
#csuccs .info .social-icons .google-plus:hover { background: url('../img/google-hover.jpg') no-repeat; background-size: contain; background-position: 50%;}

#csuccs .info .bottom {
	position: absolute;
	bottom: 10%;
}
#csuccs .info .detail-box {
	float: right;
	height: 208px;
	position: relative;
	overflow: hidden;
}
#csuccs .info p {
	margin-top: 10px;
}
#csuccs .info img {
	margin-top: 1.5px;
	width: 90%;
	float: left;
}
#csuccs .info button {
	display: block;
	margin-top: 30px;
	width: 80%;
	opacity: 0;
}
#csuccs .info .detail-box a:hover {
	text-decoration: none;
}
#csuccs .info .uppercase h4 {
	display: inline-block;
	float: right;
}
#csuccs .info .highlighted a {
	color: #42ac9e;
}
#csuccs .info .arrow-right {
	margin-top: 10px;
	margin-right: 15px;
	width: 28px;
	display: inline-block;
	float: right;
	-webkit-animation: bounce-right 2s ease-in-out infinite reverse;
}

@keyframes bounce-right {
	0%, 20% 50%, 80%, 100% { transform: translateX(0); }
	40% { transform: translateX(20%); }
}

#csuccs #nyitvatartas-swiper {
	width: 100%;
}

#csuccs #nyitvatartas-swiper .swiper-slide {
	padding: 0 15px;
}

#about-us {
	position: relative;
}
#about-us .detail-box:nth-child(1) {
	padding-right: 60px;
}
#about-us .detail-box:nth-child(2) {
	padding-left: 60px;
}
/* BOX ANIMATIONS*/
#about-us.start .text-box h2,
#about-us.start .text-box hr,
#about-us.start .text-box p,
#about-us.start .image-box {
	transform: translateY(0);
}
/* BOX ANIMATIONS END*/

#about-us .text-box h2{
	transition: transform 1s ease-in-out;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transform: translateY(25%);
	line-height: 1.25em;
}
#about-us .text-box hr {
	transition: transform 1s ease-in-out;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transform: translateY(200%);
}
#about-us .text-box p{
	transition: transform 1s ease-in-out;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transform: translateY(25%);
	line-height: 1.7em;
}
#about-us .text-box:nth-child(1) {
	padding-bottom: 20px;
}
#about-us .text-box:nth-child(2) {
	padding-top: 20px;
}
#about-us .image-box {
	transition: transform 1s ease-in-out;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transform: translateY(10%);
	width: 100%;
	height: 100%;
	mask-image: url(../img/about-us-box-shape.svg);
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-image: url(../img/about-us-box-shape.svg);
	-webkit-mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
}
#about-us .image-box img {
	width: 100%;
	height: auto;
}

#menu {
	padding-left: 13%;
	padding-right: 6.5%;
}
#menu h2 {
	margin-bottom: 40px;
}
.menu-box {
	
	width: 75%;
	height: auto;
	margin: 30px 0;
}
.menu-box .title {
	display: table;
	width: 100%;
	height: auto;
	margin-bottom: 5px;
	    line-height: 1em;
}
.menu-box .title h4 {
	display: table-cell;
	vertical-align: middle;

	float: left;
	margin: 0;
}
.menu-box .title p {
	display: table-cell;
	vertical-align: middle;
	
	min-width: 70px;
	text-align: right;
	margin: 0;
}

#menu .swiper-button-next,
#menu .swiper-container-rtl .swiper-button-prev,
#menu .swiper-button-prev, 
#menu .swiper-container-rtl .swiper-button-next{
    background-image: none;
}
#menu .swiper-button-next,
#menu .swiper-button-prev, 
#menu .swiper-container-rtl .swiper-button-prev,
#menu .swiper-container-rtl .swiper-button-next{
	display: inline-block;
    fill: #42ac9e;
	width: 40px;
	height: auto;
	outline: none;
	position: static;
    top: unset;
	margin-top: 10px;
	margin-left: 6px;
	margin-right: 6px;
	z-index: 20;
}
#menu .arrows {
	width: auto;
	text-align: right;
	padding-right: 20px;
	z-index: 20;
}

#menu-left-arrow, #menu-right-arrow {
	pointer-events: none;
}
#menu-left-arrow, #menu-left-arrow img, #menu-right-arrow, #menu-right-arrow img {
	width: 40px;
}


#subscribe h2 {
	margin-top: 4px;
}
#subscribe input[type=text]{
	width: 100%;
}
#subscribe input[type=submit] {
	width: 100%;
}


#optional-product {
	position: relative;
}
#optional-product .product-image {
	width: auto;
	max-width: 38vw;
    max-height: 100vh;
    height: auto;
	position: absolute;
	left: -50vw;
	top: 50%;
	transform: translateY(-50%);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

#optional-product .product-image.start {
	left: 0;
}

#optional-product .iszi-wrapper { height: 200px; }

#contact-and-footer {
	position: relative;
}
#contact-and-footer .footer-image {
	display: inline-block;
	width: 100%;
	height: 100%;
	max-width: 52vw;
	max-height: 90vh;
	right: 0;
	bottom: 75px;
	position: absolute;
	
	overflow: hidden;
}

#contact-and-footer .footer-image.start img {
	right: 0;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}
#contact-and-footer .footer-image img {
	display: inline-block;
	position: absolute;
	right: -65vw;
	height: 100%;
	object-fit: contain;
}

#contact-and-footer b {
	font-family: "OpenSans-Bold";
	color: #5d5d5d;
}

.green-shape {
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
	z-index: -1;
	pointer-events: none;
}
.green-shape.shape-1 {
	position: absolute;
	top: 0;
	right: 0px;
	width: 65vw;
	height: 65vw;
	overflow: hidden;
}
.green-shape.shape-1 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-1 object, .green-shape.shape-1 img {
	position: absolute;
	right: -55%;
	top: -15%;
	width: 100%;
	height: 100%;
}
.green-shape.shape-2 {
	position: absolute;
	top: 40%;
	left: 0;
	width: 30vw;
	height: 30vw;
	overflow: hidden;
}
.green-shape.shape-2 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-2 object, .green-shape.shape-2 img {
	position: absolute;
	left: -80%;
	top: 0;
	width: 100%;
	height: 100%;
}
.green-shape.shape-3 {
	position: absolute;
	top: 0;
	right: 0;
	width: 30vw;
	height: 100%;
	overflow: hidden;
}
.green-shape.shape-3 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-3 object, .green-shape.shape-3 img {
	position: absolute;
	right: -70%;
	top: -5%;
	width: 100%;
	height: 100%;
}
.green-shape.shape-4 {
	position: absolute;
	top: -12vw;
	left: 0;
	width: 55vw;
	max-width: 1300px;
	max-height: 1500px;
	height: 115vh;
	/*overflow: hidden;*/
}
.green-shape.shape-4 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-4 object, .green-shape.shape-4 img {
	position: absolute;
	left: -55%;
	top: 0;
	width: 100%;
	height: 100%;
}
.green-shape.shape-5 {
	position: absolute;
	top: -15vw;
	right: 0;
	width: 30vw;
	height: 40vw;
	overflow: hidden;
}
.green-shape.shape-5 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-5 object, .green-shape.shape-5 img {
	position: absolute;
	right: -50%;
	top: 0%;
	width: 100%;
	height: 100%;
}
.green-shape.shape-6 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 70vw;
	height: 70vw;
	overflow: hidden;
}
.green-shape.shape-6 div {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-animation: movemask 10s ease-in-out infinite;
}
.green-shape.shape-6 object, .green-shape.shape-6 img {
	position: absolute;
	left: -30%;
	bottom: -80%;
	width: 100%;
	height: 100%;
}

/* SIZES */

/* Really big screen and portrait mode (for example 4k screens) */
@media all and (min-height: 1500px) and (min-width: 1200px) and (orientation:portrait) {
	#csuccs .slogen {
		margin-top: 600px;
		color: #4a4a4a;
		position: static;
		min-height: unset;
	}
	#csuccs .slogen .vertical-center {
		position: static;
		top: unset;
		transform: none;
	}
	#csuccs .info {
		margin-top: 400px;
		min-height: unset;
		position: static;
	}
	#csuccs .info .bottom {
		position: static;
		bottom: unset;
	}
	.min-height-100vh {
		min-height: auto;
		margin-bottom: 200px;
	}
}
@media all and (max-width: 1440px) {
	#csuccs .bagel-image-wrapper {
		width: 60vw;
	}

	#contact-and-footer .footer-image img { width: 100%; }
}

/* For iPad sized screens make some margins smaller */
@media all and (max-aspect-ratio: 3/4) {
	.mar-b-40vh {
		margin-bottom: 25vh;
	}
	.mar-b-30vh {
		margin-bottom: 20vh;
	}
	.green-shape.shape-4 {
		height: 90vh;
	}
}

/* For SM screens but too small heights give it a bit air to breathe */
@media all and (min-width: 768px) and (max-height: 650px) {
	#csuccs .slogen {
		margin-top: 160px;
		min-height: auto;
	}
	#csuccs .slogen .vertical-center {
		position: relative;
		top: none;
		transform: none;
	}
	#csuccs .info {
		margin-top: 60px;
		min-height: auto;
		height: auto;
	}
	#csuccs .info .bottom {
		position: static;
		bottom: none
	}
}

/* Shrink font size a bit if needed */
@media all and (min-width: 992px) and (max-width: 1600px) {
	h1 {
	font-size: 3.8em;
	}
	h2 {
		font-size: 2.4em;
	}
	h4 {
		font-size: 1.1em;
	}
}

/* Navigation bar hamburger */
@media all and (max-width: 1080px) {
	#navigation-bar .items ul li:not(.hamburger-holder) {display: none;}
	#navigation-bar .items ul li.hamburger-holder {
		display: block;
	}
}
@media all and (max-width: 1300px) {
	#navigation-bar .items ul li:not(.hamburger-holder) {
		padding: 0 0 0 12px;
		font-size: 1.15em;
	}
}

/* L */
@media all and (min-width: 1200px) {


}
/* M */
@media all and (min-width: 992px) and (max-width: 1199px) {
	
}
/* SM */
@media all and (min-width: 768px) and (max-width: 991px) {
	h1 {
		font-size: 3.0em;
	}
	h2 {
		font-size: 1.7em;
	}
	h4 {
		font-size: 1.1em;
	}
	p {
		font-size: 1.1em;
	}
	#navigation-bar .items ul li {
		font-size: 1.1em;
	}
	
	.input-text {
		font-size: 1em;
	}
	.button {
		font-size: 1em;
	}
	
	#navigation-bar .title span {
		font-size: 2.0em;
	}
	
	#about-us .detail-box:nth-child(1) {
		padding: 0 30px 0 0px;
	}
	#about-us .detail-box:nth-child(2) {
		padding: 0 0 0 30px;
	}
	
	#menu {
		padding-left: 9%;
		padding-right: 0%;
	}
	#menu h2 {
		margin-bottom: 20px;
	}
	#menu p {
		font-size: 1.0em;
	}
	.menu-box {
		margin: 20px 0;
	}
	.menu-box .title {
		margin-bottom: 3px;
	}
	
	.pad-lr-20 {
		padding-left: 10;
		padding-right: 10;
	}
	.pad-l-20 {
		padding-left: 10;
	}
	.pad-r-20 {
		padding-right: 10;
	}
}
/* XS */

@media all and (max-width: 767px) {
	h1 {
		font-size: 2.6em;
	}
	h2 {
		font-size: 1.9em;
	}
	h4 {
		font-size: 0.9em;
	}
	p {
		font-size: 0.9em;
	}
	#navigation-bar {
		padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	#navigation-bar .items ul li {
		font-size: 0.9em;
	}
	#navigation-bar .items .hamburger img {
		content: url(../img/hamburger-white.svg);
		fill: #ffffff;
	}
	.input-text {
		font-size: 0.9em;
	}
	.button {
		font-size: 0.9em;
	}
	
	.hr-small {
		height: 0px;
		width: 60px;
		border-top: 2px solid #42ac9e;
		border-bottom: 1px solid #42ac9e;
		border-radius: 2px;
		margin: 20px 0 10px 0;
	}

	body {
		padding-left: 15px;
		padding-right: 15px;
	}
	#csuccs {
		min-height: auto;
		
	}
	#csuccs .bagel-image-wrapper {
		width: auto;
		overflow: hidden;
		left: 0px;
		top: 0px;
	}
	#csuccs .bagel-image-wrapper img {
		width: 100vw;
	}

	@keyframes pulseAnim {
		0%, 100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-20px);
		}
	}

/*	@keyframes pulseAnim {
		0%, 100% {
			clip-path: ellipse(60% 55% at 50% 38%);
			-webkit-clip-path: ellipse(60% 55% at 50% 38%);
		}
		50% {
			clip-path: ellipse(63% 58% at 50% 38%);
			-webkit-clip-path: ellipse(63% 58% at 50% 38%);
		}
	}*/
	#csuccs .slogen {
		margin-top: 0;
		min-height: auto;
		height: 65vh;
		
	}
	#csuccs .slogen .vertical-center {
		position: absolute;
		top: unset;
		bottom: 0;
		transform: none;
	}
	#csuccs .slogen h1 {
		line-height: 1.2em;
		letter-spacing: 0.05em;
	}
	#csuccs .info {
		min-height: 100px;
		height: auto;
		margin-top: 50px;
		text-align: left;
	}
	#csuccs .info .bottom {
		bottom: unset;
		position: static;
	}
	#csuccs .info .detail-box {
		float: right;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		display: inline;
	}
	#csuccs .info button {
		margin-top: 10px;
	}
	#csuccs .info img {
		margin-top: 10px;
	}
	#csuccs .info h4 {
		font-family: "OpenSans-Bold";
		margin-bottom: 15px;
	}
	#csuccs .info p {
		margin-bottom: 15px;
	}
	#csuccs #nyitvatartas-swiper .swiper-slide {
		padding: 0;
	}
	#about-us .detail-box:nth-child(1) {
		padding-right: 0;
	}
	#about-us .detail-box:nth-child(2) {
		padding-left: 0;
	}
	#about-us .detail-box {
		padding-right: 0;
		padding-left: 0;
	}
	#about-us .detail-box {
		text-align: left;
	}
	#about-us .image-box:nth-child(2) {
	width: 100%;
	height: 60vw;
	mask-image: url(../img/about-us-box-shape-2.svg);
	mask-size: 100% 100%;
	-webkit-mask-image: url(../img/about-us-box-shape-2.svg);
	-webkit-mask-size: 100% 100%;
	
	overflow: hidden;
	}
	#about-us .image-box:nth-child(2) img {
		width: 100%;
		height: auto;
		transform: translateY(-15%);
	}
	
	#menu {
		padding-left: 15px;
		padding-right: 15px;
		margin-left: -15px;
		margin-right: -15px;

	}

	#menu-left-arrow, #menu-left-arrow img, #menu-right-arrow, #menu-right-arrow img {
		width: 25px;
	}
	
	#subscribe input[type=text]{
		margin-bottom: 20px;
	}
	#subscribe input[type=submit] {
		width: 200px;
	}
	
	#contact-and-footer .footer-image {
		max-width: 65vw;
		height: auto;
		right: -15px;
		top: -35%;
		
		overflow: hidden;
	}
	#contact-and-footer .footer-image.start img {
		right: 0px;
	}
	#contact-and-footer .footer-image img {
		display: inline-block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	.green-shape.shape-3 {
		position: absolute;
		right: 0;
		width: 60vw;
		overflow: hidden;
	}
	.green-shape.shape-3 object, .green-shape.shape-3 img {
		position: absolute;
		right: -60%;
		top: 0;
	}
	.green-shape.shape-6 {
		bottom: 0;
		left: 0;
		width: 80vw;
		height: 80vw;
		margin-left: -15px;
	}
	.green-shape.shape-6 object, .green-shape.shape-6 img {
		left: -35%;
		bottom: -20%;
	}
	.button { padding: 10px; }
	
	.pad-lr-20 {
		padding: 0;
	}
	.pad-l-20 {
		padding: 0;
	}
	.pad-r-20 {
		padding: 0;
	}
	.pad-l-60 {
		padding: 0;
	}
	.mar-b-150 {
		margin-bottom: 60px;
	}
	.mar-b-75 {
		margin-bottom: 15px;
	}
}

@media all and (max-width: 767px) and (orientation: landscape) {
	#csuccs .bagel-image img {
		max-width: unset;
		max-height: unset;
	}
}

/* Really small screens */
@media all and (max-width: 425px) {
	#navigation-bar { transform: translateZ(100px); }
	#mobile-navigation-bar-container .social-icons li { display: block; height: 40px; width: 40px; }
	#mobile-navigation-bar-container .social-icons li img { width: 100%; }

	#csuccs .bagel-image-wrapper { z-index: 0; max-width: 100vw; overflow: hidden; }
	#csuccs .bagel-image-wrapper img { width: 100%; object-fit: contain; }

	#optional-product { margin-right: -15px; margin-left: -15px; }
	#optional-product .product-image.start { left: -60%; max-height: 300px; max-width: 100%; }
	/*#mobile-navigation-bar-shadow { z-index: 1; transform: translateZ(100px); }
	#mobile-navigation-bar-container .left, #mobile-navigation-bar-container .right { z-index: 3; transform: translateZ(101px); }*/
}

/* Really small screens */
@media all and (max-width: 375px) {

}

/* Really small screens */
@media all and (max-width: 320px) {
	h1 {
		font-size: 2.2em;
	}
	#csuccs .slogen {
		height: 65vh;
	}
	#csuccs .info {
		height: 30vh;
	}

}



/* ie fix */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#csuccs .bagel-image {
		mask-image: none;
		-webkit-mask-image: none;
	}

	#about-us .image-box {
		mask-image: none;
		-webkit-mask-image: none;
		
	}
	#about-us .image-box img {
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
	}

	#contact-and-footer .footer-image {
		mask-image: none;
		-webkit-mask-image: none;
	}
	
	#mobile-navigation-bar-container .left, #mobile-navigation-bar-container .right {
		height: 100vh;
	}
	
	#csuccs .social-icons li {
		width: 30px;
	}
}

/* Moz fix for img-> content(...) bug */
@-moz-document url-prefix() {
	@media all and (max-width: 767px) {
		#csuccs .bagel-image img {
		display: inline-block;
		background: url(../img/bagel-mobile.png) no-repeat; /* <--- */
		width: 0; /* <--- */
		min-height: 320px; /* <--- */
		max-height: 40vh;
		padding: 0 50%; /* <--- */ 
		
		}
	}
}

/* Fix for flex things */
@-moz-document url-prefix() {
	#mobile-navigation-bar-container .left, #mobile-navigation-bar-container .right {
		flex: 1;
	}
}