html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
*, *::after, *::before{box-sizing:border-box;}
html{font-size:62.5%;}
body { 
font-size : 1.6rem; /* 1.6rem = 16px */
font-family : Georgia, "Times New Roman", Times, serif;
color : #f9e785;
text-shadow : 1px 0 1px #210003;
background-color : #820000;
} 
a { 
color: #faf7a5;
text-decoration: none;
text-shadow : 1px 1px 2px #210003;  /* Betu arnyekolasa */
}
a:hover {
  color: #fdc855;
  text-decoration: none;
} 
  /* -----------------------------
1. Navigáció automatikus elrejtése
---------------------------------- */ 
.auto-hide-header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 50px; /* felsomenu magasság mobilon */
background-image: url(https://zsozirisz.hu/kepek/zsoziriszmenuhatter1.jpg); /* felsomenu hatter */
/* Hardveres gyorsitás kényszerítése felsomenu */

  -webkit-transform: translateZ(0);
	transform: translateZ(0);
	will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.auto-hide-header::after {
clear: both;
content: "";
display: block;
}
.auto-hide-header.is-hidden {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media only screen and (min-width: 1200px) {
.auto-hide-header {
height: 60px; /* felsomenu magasság nagy gépen, eredeti: 80px */
}
}
.auto-hide-header .logo,         
.auto-hide-header .nav-trigger {   
/* Fejléc, logo automatikus elrejtése: nav-trigger */
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}
.auto-hide-header .logo {
left: 5%;
}
.auto-hide-header .logo a, .auto-hide-header .logo img {
display: block;
}
.auto-hide-header .nav-trigger {
/* Mobil MENU - függolegesen igazítja a tartalmat vonalmenu mobil */
display: table;
height: 100%;
padding: 0 1em;
font-size: 1.8rem; /* menu felirat betu méret */
color: #fde590;
right: 0;
border-left: 1px solid #fde590;  /* Menu baloldali választóvonal */
}
.auto-hide-header .nav-trigger span {
/* függolegesen igazítja a szüloelemet */
display: table-cell;
vertical-align: middle;
}
.auto-hide-header .nav-trigger em, .auto-hide-header .nav-trigger em::after, .auto-hide-header .nav-trigger em::before {
/* menu icon menuvonal*/
display: block;
position: relative;
height: 2px;
width: 32px; 
background-color: #fbc44f;
-webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.auto-hide-header .nav-trigger em {
/* alsómenu sorköz */
margin: 8px auto 14px;
transition: background-color .2s;
}
.auto-hide-header .nav-trigger em::before, .auto-hide-header .nav-trigger em::after {
position: absolute;
content: '';
left: 0;
-webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.auto-hide-header .nav-trigger em::before {
/* menu ikon felso sora */
-webkit-transform: translateY(-6px);
          transform: translateY(-6px);
}
.auto-hide-header .nav-trigger em::after {
  /* menu ikon alsó sora */
-webkit-transform: translateY(6px);
          transform: translateY(6px);
}
@media only screen and (min-width: 1200px) {
  .auto-hide-header .nav-trigger {
    display: none;
}
}
.auto-hide-header.nav-open .nav-trigger em {
   /* a menu ikonját X ikonra állítja */
  background-color: rgba(255, 255, 255, 0);
}
.auto-hide-header.nav-open .nav-trigger em::before {
  /* a felso sor elforgatása */
-webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.auto-hide-header.nav-open .nav-trigger em::after {
  /* alsó sor elforgatása */
-webkit-transform: rotate(45deg);
          transform: rotate(45deg);
		  
}

.primary-nav {
display: inline-block;
float: right;
height: 100%;
padding-right: 5%;
}
.primary-nav > ul {
position: absolute;
z-index: 2;
top: 50px;   /* eredeti: 60px */
left: 0;
width: 100%;
background-color: #700303; /* legordulo menuhatter szine */
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);	
}
.primary-nav > ul a {
/* mobil elsodleges navigációs link felsomenu */
display: block;
height: 45px;  /* eredeti: 50px */
line-height: 45px;  /* eredeti: 50px */
padding-left: 5%;
color: #f8ec90; /* legordulo és felsomenu betuszin */
font-size: 2.1rem;  /* betuméret felso menü   */
border-top: 1px solid #ffe95d;  /* felsomenu felso border  */
}
.primary-nav > ul a:hover, .primary-nav > ul a.active {
color: #fcba0a; /* legordulo és felsomenu valtoszin */
}
@media only screen and (min-width: 1200px) {
.primary-nav {
    /* tartalom függoleges igazítása nagy gépen */
    display: table;
}
.primary-nav > ul {
/* függolegesen igazítja a szüloelemet */
display: table-cell;
vertical-align: middle;
/* mobilstílus visszaállítása */
position: relative;
width: auto;
top: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}
.primary-nav > ul::after {
clear: both;
content: "";
display: block;
}
.primary-nav > ul li {
display: inline-block;
float: left;
margin-right: 1.5em;
}
.primary-nav > ul li:last-of-type {
 margin-right: 0;
}
.primary-nav > ul a {
height: auto;
line-height: normal;
padding: 0;
border: none;
}
}
.nav-open .primary-nav ul,
.primary-nav ul:target {
  display: block;
}
@media only screen and (min-width: 1200px) {
  .nav-open .primary-nav ul,
  .primary-nav ul:target {
    display: table-cell;
}
}

/* ------------------
2. ALSÓMENÜ navigáció 
--------------------- */
.secondary-nav {
position: relative;
z-index: 1;
clear: both;
width: 100%;
height: 45px; /* alsomenu magassag mobilon */
background-image: url(https://zsozirisz.hu/kepek/zsoziriszmenuhatter1.jpg);
/* Hardvergyorsítás kényszerítése */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s; 
}
.secondary-nav ul, .secondary-nav li, .secondary-nav a {
  height: 100%;
}
.secondary-nav ul {
text-align: center;
}
.secondary-nav li {
float : none;
}
/* ALSÓMENU  */
.secondary-nav a {
display: block;
color: #fea605;
text-shadow: 2px 2px 2px #250104;  /* Betu arnyekolasa */
font-size: 2.1rem;  /* alsomenu link szoveg mérete alsomenu mobilon, az eredeti nem ad értéket */
line-height: 44px; /* szoveg tavolsag az alsó-felso szélektol alsomenu, eredeti: 50px  */
padding: 0 1em;
}
@media only screen and (min-width: 600px) {
.secondary-nav a {
font-size: 2.5rem;  /* alsomenu link szoveg mérete alsomenu mobilon, az eredeti nem ad értéket */
}
}
@media only screen and (min-width: 1200px) {
.secondary-nav {
height: 50px;  /* alsomenu magassag nagy gépen, eredeti: 70px */
overflow: visible;
}
.secondary-nav li {
float : none;
flex-shrink : 1;
}
.secondary-nav a {
line-height: 50px;  /* eredet: 70px */
font-size: 2.6rem;	/* link szoveg mérete alsomenu nagy gépen, az eredeti nem ad értéket */
}
}

/* -------------------------------- 
3. Navigáció automatikus elrejtése
----------------------------------- */

.secondary-nav.fixed { 
/* mobil alsomenu mozgas tavolsag */
  position: fixed;
  top: 50px;  /* eredeti: 60px */
}
.secondary-nav.slide-up {
/* alsó-felso menü összecsukódás */
 -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}
@media only screen and (min-width:1200px) {
.secondary-nav.fixed {
top : 60px;
box-shadow : 0 -6px 0 #820000;
}
.secondary-nav.slide-up {
-webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
}

/* -------------------------------- 
Fejléckép méretek innen
-------------------------------- */ 
.hero {
/* mobil fuggoleges igazitas-fejlec folotti margo */
display : table;
width : 100%;
margin-top : 50px;
height : 100px;  /* fejléc magasság */
background : url(https://zsozirisz.hu/kepek/fejlec1.jpg) center center no-repeat; /* Mobil 320px-599px */
background-size : cover;
}
.hero .hero-content {
display : table-cell;
vertical-align : middle;
text-align : center;
}
@media only screen and (min-width:600px) {
.hero {
height : 150px;
background : url(https://zsozirisz.hu/kepek/fejlec2.jpg) center center no-repeat; /* Nagy mobil, Ipad 600px-767px */
}
}
@media only screen and (min-width:768px) {
.hero {
height : 200px;
background : url(https://zsozirisz.hu/kepek/fejlec3.jpg) center center no-repeat;  /* Ipad álló 768px-991px */
}
}
@media only screen and (min-width:992px) {
.hero {
height : 200px;
background : url(https://zsozirisz.hu/kepek/fejlec4.jpg) center center no-repeat; /* Ipad fekvo, tablet 992px-1199px */
margin-top : 50px;
}
}
@media only screen and (min-width:1200px) {
.hero {
height : 200px;
background : url(https://zsozirisz.hu/kepek/fejlec5.jpg) center center no-repeat;  /* Asztali gépek 1200px-tol */
margin-top : 60px;
}
}
/* -------------------------------- 
Fejléckép méretek eddig
-------------------------------- */

/* -------------- 
Kockamenü innen
----------------- */
.container {
width : 90%;
max-width : 1200px;
margin : 0 auto;
}
.container::after {
content : '';
display : table;
clear : both;
}
/* kockák */
#gallery-items li {
margin-bottom : 1.5em;
}
#gallery-items li img {
width : 100%;
display : block;
border-radius : 0.8em;  /* Szélek kerekítése a kockán */
}
#gallery-items img:hover {
opacity : 0.5;
}
@media only screen and (min-width:600px) {
#gallery-items li {
width : 49.3%;
float : left;
margin-bottom : 1.8em;
margin-right : 1.4%;
}
#gallery-items li:nth-child(2n) {
margin-right : 0%;
}
}
@media only screen and (min-width:768px) {
#gallery-items li {
width : 48%;
float : left;
margin-bottom : 2em;
margin-right : 4%;
}
#gallery-items li:nth-child(2n) {
margin-right : 0;
}
}
@media only screen and (min-width:992px) {
#gallery-items li {
width : 32%;
float : left;
margin-bottom : 1.7em;
margin-right : 2%;
}
#gallery-items li:nth-child(2n) {
margin-right : 2%;
}
#gallery-items li:nth-child(3n) {
margin-right : 0;
}
}
@media only screen and (min-width:1200px) {
#gallery-items li {
width : 26%;
float : left;
margin-bottom : 2.3em;
margin-right : 11%;
}
#gallery-items li:nth-child(2n) {
margin-right : 11%;
}
#gallery-items li:nth-child(3n) {
margin-right : 0;
}
}

/* -------------
Kockamenü eddig
----------------- */ 

/* -----------------------------------
Tartalom- alapméret kis mobil 320px-
-------------------------------------- */
.main-content {
padding : 60px 5% 2em;
overflow : hidden;
}
.main-content.sub-nav-hero {
padding-top : 0;
}
.main-content.sub-nav-hero.secondary-nav-fixed {
margin-top : 50px;
}
.main-content p {
max-width : 1200px;
margin : 0 auto;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.8rem;
line-height : 1.7;
color : #f9e785;
text-align : justify;
}
.main-content a {
display : block;
text-align : center;
color : #fbdc72;
text-decoration : none;
font-size : 2rem;
line-height : 1.9;
letter-spacing : 0.05em;
text-transform : uppercase;
}
.main-content a:hover {
color : #fda323;
text-decoration : underline;
}
.zsozi {
float : left;
margin-right : 0.5em;
margin-bottom : 0;
margin-top : 0;
width : 130px;
}
.dolt {
font-family : Georgia, "Times New Roman", Times, serif;
font-style : italic;
}
.alairas {
display : block;
font-family : Georgia, "Times New Roman", Times, serif;
font-style : italic;
text-align : center;
font-size : 2rem;
line-height : 1.9;
}
.hirdetes {
display : block;
clear : both;
margin : auto;
text-align : center;
max-width:770px;
}
@media only screen and (min-width:600px) {
.main-content {
padding-top : 60px;
}
.main-content.sub-nav-hero.secondary-nav-fixed {
margin-top : 50px;
}
.main-content p {
font-size : 2rem;
line-height : 1.9;
}
.main-content a {
font-size : 2.2rem;
}
.zsozi {
width : 170px;
}
.alairas {
font-size : 2.1rem;
}
}
@media only screen and (min-width:768px) {
.main-content {
padding-top : 70px;
}
.main-content.sub-nav-hero.secondary-nav-fixed {
margin-top : 60px;
}
.main-content p {
font-size : 2.2rem;
line-height : 1.8;
}
.main-content a {
font-size : 2.5rem;
}
.zsozi {
width : 200px;
}
.alairas {
font-size : 2.4rem;
}
}
@media only screen and (min-width:992px) {
.main-content {
padding-top : 70px;
}
.main-content.sub-nav-hero.secondary-nav-fixed {
margin-top : 60px;
}
.main-content p {
font-size : 2.3rem;
line-height : 1.9;
}
.main-content a {
font-size : 2.5rem;
}
.zsozi {
width : 228px;
}
.alairas {
font-size : 2.5rem;
}
}
@media only screen and (min-width:1200px) {
.main-content {
padding-top : 70px;
}
.main-content.sub-nav-hero.secondary-nav-fixed {
margin-top : 70px;
}
.main-content p {
font-size : 2.1rem;
line-height : 2.1;
}
.main-content a {
font-size : 2.4rem;
}
.zsozi {
width : 228px;
}
.alairas {
font-size : 2.3rem;
}
}
.main-content.sub-nav :target::before, .main-content.sub-nav-hero :target::before {
display : block;
content : "";
margin-top : -50px;
height : 50px;
visibility : hidden;
}
@media only screen and (min-width:1200px) {
.main-content.sub-nav :target::before, .main-content.sub-nav-hero :target::before {
margin-top : -70px;
height : 70px;
}
}
/* -----------
Face, lábléc
----------------- */
.kozep{display:block;clear:both;margin:0 auto;text-align:center;}
.footer {
background : #700303;
font-family : Arial, Helvetica, sans-serif;
height : 100%;
margin-top : 1.7em;
padding : 0.5em;
font-size : 1.3rem;
line-height : 1.3;
border-top : 1px solid #f8ea9b;
text-align : center;
}
@media only screen and (min-width:768px) {
.footer {
padding : 1em;
font-size : 1.4rem;
line-height : 1.4;
}
}
@media only screen and (min-width:1200px) {
.footer {
padding : 1em 3.5em;
font-size : 1.7rem;
line-height : 2.3;
}
}
#button{display:inline-block;background:url(kepek/buti4.png);width:50px;height:50px;text-align:center;border-radius:4px;position:fixed;bottom:30px;right:10px;transition:background-color .3s,
opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000;}
#button::after{content:"";}
#button:hover{cursor:pointer;background:url(kepek/buti3.png);}
#button:active{background-color:#555;}
#button.show{opacity:1;visibility:visible;}
@media (min-width:500px){#button{margin:10px;}
}