/* ------------------------- [      botika RWD starting at w>334 (21em)      ] ------------------------- */


@media screen and (min-width: 25em) { /* ---------------------------------------- w>400 ---------------------------------------- */


.horipad {
	max-width: 58rem;
	padding: 0 1.5rem;
}
.ata0 main > .horipad {
	max-width: none;
	padding: 0;
}
.menutxt {
	position: absolute;
	line-height: 5rem;
	right: 4.5rem;
	display: block;
	font-size: .875rem;
	color: #DFDCDC;
}

.come-in {
  transform: translateY(100px);
  animation: come-in .8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: .6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}
@keyframes come-in {
  to { transform: translateY(0); }
}

.home > div > div {
	margin-bottom: 0;
}
.home > div > div > div, .home li {
	padding: .5rem;
}
.home > div > div:first-child > div/*, .home li:first-child*/ {
	padding-left: 0;
}
.home > div > div:last-child > div/*, .home li:last-child*/ {
	padding-right: 0;
}
.fh1, .fh2, .fh3, .fh4, .fh5, .fh6 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.fh1 > * { flex-basis: 100%; }
.fh2 > * { flex-basis: 50%; }
.fh3 > * { flex-basis: 33.33%; }
.fh4 > * { flex-basis: 25%; }
.fh5 > * { flex-basis: 20%; }
.fh6 > * { flex-basis: 16.66%; }

}

/* ------------------------------------------------------------------------------ mql=1 ------------------------------------------------------------------------------ */
@media screen and (min-width: 35em) { /* ---------------------------------------- w>560 ---------------------------------------- */

.aftersuper {
	transition: top .4s ease-out;
	top: -12rem;
}
.aftersuper.fixed {
/*	overflow: hidden;*/
	position: fixed;
	width: 100%;
	z-index: 10;
}

.loader {
	width: 100%;
}
.loader {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	vertical-align: top;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #EEE;
	border: 1px solid #CCC;
}
.loader .donut {
	transform: scale(2);
}
img.imgatze {
	width: auto;
}
	
footer .belocation {
	width: auto;
	order: 2;
}
footer .copy.right {
	order: 3;
}
.copy li a {
	font-size: .875rem;
}
.copy li:before, .copy li:after {
/*	font-size: 1em;*/
}

}

/* ------------------------------------------------------------------------------ mql=2 ------------------------------------------------------------------------------ */
@media screen and (min-width: 48em) { /* ---------------------------------------- w>768 ---------------------------------------- */

/* .menu {
  --underline-width: 0;
  --underline-offset-x: 0;

  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  height: 4px;
  width: var(--underline-width);
  transform: translateX(var(--underline-offset-x));
  background-color: var(--kolorea);
  transition: transform 0.3s, width 0.3s;
  border-radius: 4px;
}
.menulia {
	display: block;
	padding: .5rem 1rem;
	font-size: 2rem;
	text-decoration: none;
}  */
a.azpimarra, a .azpimarra {
	position: relative;
}
a.azpimarra:after, a .azpimarra:after {
	content: "";
	position: absolute;
	top: -.75rem;
	left: 50%;
	width: 0;
	height: 5px;
	border-radius: 5px;
	background: var(--kolorea);
	transition: ease-out .2s;
	z-index: 0;
}	
a.azpimarrazuri:after, a .azpimarrazuri:after {
	background: #FFF;
}	
.azpimarra:after, a.azpimarra:hover:after, a:hover .azpimarra:after, .nion .azpimarra:after {
	width: 100%;
	left: 0;
}

header {
	padding-bottom: 3rem;
}
.aftersuper.fixed {
	top: -13.75rem;
	box-shadow: 0 0 6px #666;
	background-color: #FFF;
/*  background-image: url('../irudi/atzewall.jpg');*/
}
.bodilun .aftersuper.fixed {
	box-shadow: 0 0 6px #666;
	background-color: #111;
}
.aftersuper.fixed .horipad {
/*	padding: 0;*/
}
.aftersuper {
/*	background-color: transparent;*/
}
.logodiv {
	margin: 0 auto 2rem;
	text-align: center;
}
.logo {
	font-size: 10vw;
}
.aftersuper.fixed .logodiv {
/*
	width: 22rem;
	padding-top: 0;
	margin-bottom: 0;
	padding: .0625rem 1rem .0625rem .5rem;
*/
}
nav {
	top: auto;
	bottom: auto;
	left: 0;
	display: block;
	position: relative;
	height: auto;
	border: none;
	z-index: auto;
	transition: top 0.25s ease-in-out;
	width: 100%;
	overflow-y: visible;
}
.showhidemenu {
	display: none;
}
.menu {
	display: flex;
	justify-content: center;
}
.menu li {
	top: 0;
/*	flex: 1 1 auto;*/
	opacity: 1;
	position: relative;
}
.menu li:last-child {
/*	border-right: 1px solid #FFF;*/
}
.menu > li {
	margin-left: 1px;
  color: #666;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: all .1s ease-out;
/*  transform: skew(-15deg);*/
}
.menu > li:hover, .menu > li.nion {
/*  background-position: bottom center;*/
}
.menu > li:hover a {
/*  color: var(--kolorea);*/
}
.menu > li.nion a {
  color: #111;
}
.menu > li.nion a {
	font-weight: 400;
}
.menu > li > a {
	color: #111;
	font-size: 1.125rem;
	line-height: 1;
	padding: 1rem;
	height:100%;
	/*  transform: skew(15deg);*/
}
.bodilun .menu > li a,
.bodilun .menu > li.nion a {
  color: #EEE;
}
.bodilun .menu > li.nion a {
  background-color: var(--bodilun-kolorea);
}
.menu > li > a#menu_1 > span span {
	color: var(--kolorea);
}
.menu li li > a {
	color: #FFF;
	display: block;
	font-size: .975rem;
	background-color: #333;
	border-bottom: 1px solid #111;
	transition: color .2s ease-out;
	padding: .625rem 1rem;
}
.menu li li > a:hover, .menu li li > a.nion {
	background-color: #00668E;
}
.menu li li > a {
	line-height: 1;
}
.navigation .s1menu {
	border-width: 0 1px;
	border-style: solid;
	border-color: #111;
	display: flex;
	justify-content: space-between;
}
aside .s1menu {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
aside .submenu .s1menu > li {
	width: 100%;
	margin-right: 2px;
	text-align: center;
}
aside .submenu ul li a {
	color: inherit;
	display: block;
	text-transform: uppercase;
	background-color: transparent;
	border-bottom: .5rem solid #CCC;
	transition: color .2s ease-out;
/*	padding: .5rem auto;*/
	text-align: center;
	border-color: #CCC;
}
aside .submenu ul li a.nion {
	font-weight: 600;
}
aside .submenu ul li a.nion, aside .submenu ul li a:hover {
	border-color: var(--kolorea);
	color: var(--kolorea);
}
aside .submenu ul li li a {
	padding: .5rem 0 .5rem 1rem;
}
.submenu .s1menu li a.nion {
	color: var(--kolorea);
	border-color: var(--kolorea);
}
nav.submenu {
	display: block;
}
.submenuicon .icon {
	padding: .125rem;
}
.nion .submenuicon .icon {
	background-color: var(--kolorea);
}

button svg, li svg, span > svg {
	fill: var(--kolorea);
}

.hizk li a:not(.nion):hover {
	color: var(--kolorea);
}
header .hizk {
	position: static;
	float: right;
	padding-top: 0;
	left: auto;
	right: 2rem;
}
header .hizk a {
	color: #333;
	width: 2.5rem;
	height: 2.375rem;
	text-align: center;
	line-height: 2.5;
	font-size: 1.0625rem;
	padding: 0;
	/*	padding: .25rem .6875rem .3125rem;*/
}
.bodilun header .hizk a {
	color: var(--text-color-dark);
}
header .hizketadark {
	position: static;
	padding-top: 0;
	padding-right: 3.625rem;
	left: auto;
/*	right: 2rem;*/
	justify-content: flex-end;
}
header .hizk li a.nion {
	background-color: transparent;
}
header .hizk li .nion span:after {
	background: var(--kolorea);
}
.group:after {
  content: none;
  display: table;
  clear: both;
}
footer .hizk {
	display: none;
}
footer div .horipad {
	padding-bottom: .5rem;
}
footer .becontact {
	display: flex;
}
footer .belocation a {
	padding: 0 .5rem;
}

}

/* ------------------------------------------------------------------------------ mql=3 ------------------------------------------------------------------------------ */
@media screen and (min-width: 65em) { /* ---------------------------------------- w>1040 ---------------------------------------- */

.super {
	width: auto;
	height: auto;
	position: relative;
}
.horipad {
	padding: 0 2.5rem;
}
.aftersuper.fixed {
	top: 0;
}
.logodiv {
/*	max-width: 16rem;*/
}
.logodiv img {
	height: 12.5rem;
}
.logodiv a:hover img {
	opacity: .85;
}
.aftersuper.fixed .logodiv img {
	height: auto;
}
.aftersuper.fixed .logo {
	display: none;
}
.aftersuper.fixed .logodiv {
	padding-top: 0;
	margin-bottom: 0;
	padding: .0625rem 1rem .0625rem .5rem;
}
.gora {
	right: 2.5rem;
}
.aftersuper .horipad {
	/* display: flex;
	align-items: center; */
}
.aftersuper.fixed .horipad {
/*	padding: 0 2.5rem;*/
}

.navigation {
	width: 100%;
	/* margin-left: auto; */
}
.menu li {
	border-bottom: none;
}
.menu > li > a {
	font-size: .9375rem;
}

.mailandtelhizkordez {
	display: none;
}
.goicontact a {
	color: #c2eeff;
	padding: .675rem 1rem .25rem;
}
.goicontact a .icon.kol2 {
	color: #FFF;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.super {
/*
	background-color: #333;
	background-color: rgba(58,66,79,.7);
*/
}
.super .social {
	/* float: right; */
	margin: 0 3rem;
	display: inline-block;
}

.grid-sizer,
.grid-item { width: 32%; }
.gutter-sizer { width: 2%; }
.grid-item { margin-bottom: 1.5rem; }

footer > .horipad {
	border-bottom: 1px solid #DDD;
	flex-direction: row-reverse;
}
.bodilun footer > .horipad {
	border-color: #333;
}
.copy.left ul li:not(.copyright)::before {
	content: none;
}
.copy.left ul li:not(.copyright, :nth-child(4))::after {
	content: '|';
	font-size: .75rem;
	margin-left: .125rem;
}
.copy.left ul li:not(.copyright) {
	margin-right: .125rem;
}
.copy.left ul li a {
	font-size: .8125rem;
}
.copy.left ul li.copyright {
	padding-top: .1875rem;
	padding-left: 2rem;
}

}

/* ------------------------------------------------------------------------------ mql=4 ------------------------------------------------------------------------------ */
@media screen and (min-width: 90em) { /* ---------------------------------------- w>1440 ---------------------------------------- */

.horipad {
	/* padding: 0 3.5rem; */
}
.grid-sizer,
.grid-item { width: 23.5%; }
.gutter-sizer { width: 2%; }

.aftersuper .horipad {
	padding: 0;
}
.logo {
	font-size: 10rem;
}

.menu > li > a {
/*	font-size: 1.25rem;*/
}
.navigation {
/*	margin-left: 15rem;*/
}


}
