
@media only screen and (max-width: 1200px) {
  #block-mytheme-main-menu ul.menu{
  	gap: 20px;
  }
}

@media only screen and (max-width: 1100px){

	/* HEADER */

	.menu_open #header-region > div{
		flex-direction: column;
	}

	.site-logo img{
		margin-right: 6px;
	}

	#block-mytheme-site-branding{
		flex-direction: column;
		gap: 10px;
	}

	#header-region > div{
		justify-content: center;
		display: block;
	}

	#toggle_icon{
		width: 100px;
	    background-image: url('cssimg/menu.svg');
	    padding: 15px;
	    display: block;
	    cursor: pointer;
	    background-repeat: no-repeat;
    	background-position: center;
    	background-size: 35px;
    	margin-bottom: 15px;
		position: absolute;
		top: 0;
		right: 0;
		height: 113px;
		background-color: initial;
	}

	#block-mytheme-main-menu{
		display: none;
	}

	@keyframes slideInFromLeft{
	  0% {
	    transform: translateX(-100%);
	  }
	  100% {
	    transform: translateX(0);
	  }
	}

	.menu_open #block-mytheme-main-menu{
		display: block;
		animation: 0.5s ease-out 0s 1 slideInFromLeft;
		text-align: center;
		width: 100%;
		padding: 0;
	}

	.menu_open #block-mytheme-main-menu ul.menu{
		flex-direction: column;
		margin: 50px 0 30px 0;
	}
}

@media only screen and (max-width: 1000px) {
	.termek-teaser > .views-row,
	.product-teaser > .views-row,
	.termek__kesz-termek > div > div{
		width: 32%;
	}
}

@media only screen and (max-width: 768px) {

  h1{
  	font-size: 32px;
  }

  .lelohelyek__gyogynovenyek,
  .lelohelyek__lelohely{
  	padding-left: initial;
  }

  select{
  	width: 100%;
  }

  .page-type-frontpage #block-kapcsolat > h2, 
  .page-type-frontpage #block-views-block-aktualisan-begyujtheto-teaser-block-1 > h2, 
  .fp-rolam .views-field-title{
  	margin-top: 50px;
  }

}

@media only screen and (max-width: 550px) {
	.termek-teaser > .views-row,
	.product-teaser > .views-row,
	.termek__kesz-termek > div > div{
		width: 48%;
	}
}

@media only screen and (max-width: 550px) {
  .termek__galeria > div,
  .product__galeria > div,
  .felhasznalas__galeria > div{
  	width: 48%;
  }
}

@media only screen and (max-width: 500px) {
  h1{
  	font-size: 28px;
  	line-height: 35px;
  }

  #toggle_icon{
  	width: 70px;
  	background-size: 25px;
  	height: 110px;
  }
}

@media only screen and (max-width: 450px) {
	.termek-teaser > .views-row,
	.product-teaser > .views-row,
	.termek__kesz-termek > div > div{
		width: 100%;
	}
}

@media only screen and (max-width: 350px) {
  .termek__galeria > div,
  .product__galeria > div,
  .felhasznalas__galeria > div{
  	width: initial;
  }
}