@media only screen and (max-width: 1200px) {
  #block-mytheme-main-menu ul.menu{
  	gap: 20px;
  }
}

@media only screen and (max-width: 1100px){

	#block-mytheme-main-menu {
        display: none;
    }

    .mobile-menu-trigger {
        display: flex;
        width: 28px;
        height: 26px;
        top: 33px;
        right: 22px;
        position: absolute;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .mobile-menu-trigger span {
        height: 2px;
        background-color: #55b147;
        width: 100%;
        display: inline-block;
        margin: 3px 0;
        position: relative;
        transition: all 0.2s ease 0s;
    }

    .mobile-menu-trigger:hover span{
        background-color: #000;
    }

    .menu-open .mobile-menu-trigger span:nth-child(1) {
        transform: rotate(45deg);
        top: 5px;
    }

    .menu-open .mobile-menu-trigger span:nth-child(2) {
        display: none;
    }

    .menu-open .mobile-menu-trigger span:nth-child(3) {
        transform: rotate(-45deg);
        top: -3px;
    }

    .menu-open .mobile-menu-trigger {
        z-index: 301;
    }

    .menu-overlay {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        width: 0%;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        z-index: 300;
        text-indent: -10000px;
        overflow: hidden;
    }

    .menu-open .menu-overlay {
        width: 100%;
    }

    #block-mytheme-main-menu {
        position: fixed;
        top: 0;
        right: auto;
        left: 0;
        height: 100%;
        width: 0%;
        z-index: 301;
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .menu-open #block-mytheme-main-menu {
        width: 450px;
        overflow: auto;
        display: block;
    }

    #block-mytheme-main-menu ul.menu {
        display: block;
    }
    #block-mytheme-main-menu li.menu-item a {
        border-bottom: 1px solid #b7b7b72e;
        padding: 15px 20px;
        display: block;
        width: 100%;
    }

    #block-mytheme-main-menu li.menu-item a:hover{
        color: #000;
    }

    #block-mytheme-main-menu li.menu-item a:before {
        display: none;
    }

    .menu-open #block-mytheme-main-menu {
        width: 80%;
    }

    .menu-open .mobile-menu-trigger span{
        background-color: #fff;
    }
}

@media only screen and (max-width: 1000px) {
	.termek-teaser .views-row,
	.product-teaser .views-row,
	.field--name-fieldkesz-termek > div > div{
		width: 32%;
	}
}

@media only screen and (max-width: 768px) {

  h1{
  	font-size: 32px;
  }

  .field--name-field-gyogynovenyek,
  .field--name-field-lelohely{
  	padding-left: initial;
  }

  select{
  	width: 100%;
  }

  .page-type-frontpage #block-kapcsolat > h2, 
  .page-type-frontpage #block-mytheme-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,
	.field--name-field-kesz-termek > div > div{
		width: 48%;
	}
}

@media only screen and (max-width: 550px) {
  .field--name-field-galeria > div,
  .field--name-field-galeria > div,
  .field--name-field-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,
	.field--name-field-kesz-termek > div > div{
		width: 100%;
	}
}

@media only screen and (max-width: 350px) {
  .field--name-field-galeria > div,
  .field--name-field-galeria > div,
  .field--name-field-galeria > div{
  	width: initial;
  }
  .region-header {
      max-width: 80%;
  }
}