/*************************/
/*      Below 1344 px    */
/*************************/
@media (max-width: 84em) {
}

/*****************************************/
/*      Below 1200 px  Ladscape tablets  */
/*****************************************/
@media (max-width: 76em) {
  .big-title {
    left: 40%;
  }

  .secondline {
    font-size: 7.2rem;
  }
}

/*******************************/
/*      Below 944 px  tablets  */
/*******************************/
@media (max-width: 59em) {
  html {
    font-size: 56.25%;
  }

  .big-title {
    left: 40%;
  }

  .secondline {
    font-size: 5.2rem;
  }
}

/* a menü helyes működéséhez szükséges */
@media only screen and (min-width: 44rem) {
  ul.main-nav {
    display: block !important;
  }
}

/**************************************/
/*      Below 704 px smaller tablets  */
/**************************************/
@media (max-width: 44em) {
  html {
    /* 8px/16px =0.5 = 50% */
    font-size: 50%;
  }

  .head-2 {
    margin-bottom: 4.8rem;
  }

  .normal-image {
    width: 75vw;
  }

  .big-title {
    left: 35%;
  }

  .secondline {
    font-size: 3.6rem;
  }

  /* --- INNEN KEZDŐDIK A JAVÍTÁS --- */

  /* 1. JAVÍTÁS (Magasság összeomlás ellen) 
      Ez ad magasságot a <nav>-nak azzal, hogy "megtisztítja" a float-ot. */
  nav .container::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Ez adja a viszonyítási pontot a menünek */
  nav {
    position: relative;
  }

  /* A logó megemelése */
  .nf-logo {
    position: relative;
    z-index: 1000;
  }

  /* Az ikon megemelése */
  .mobile-nav-icon {
    display: inline-block;
    position: relative;
    z-index: 1000;
  }

  /* A menü alapból rejtve */
  .main-nav {
    display: none;
  }

  /* A lenyíló menü pozicionálása */
  .js--main-nav {
    position: absolute;
    top: 100%; /* A 'nav' aljától 100%-ra (mivel a nav-nak már van magassága) */
    left: 0;
    width: 100%;
    background-color: rgba(230, 230, 230, 0.85); /* A helyes szín */
    z-index: 999; /* A logó (1000) mögé */
    float: none;
    margin: 0;
  }

  /* A menüpontok stílusa (marad) */
  .main-nav li {
    display: block;
    border: 0;
  }

  /* A linkek stílusa (marad) */
  .main-nav li a:link,
  .main-nav li a:visited {
    display: block;
    border: 0;
    padding: 10px 0;
  }

  /* 2. JAVÍTÁS (Lecsúszás ellen az aloldalakon) 
      Ez a szabály felülírja az asztali CSS margóját mobilon. */
  .sticky .main-nav {
    margin-top: 0;
  }

  /* Ezek a szabályok maradnak (eredetiek) */
  .sticky .main-nav li a:link,
  .sticky .main-nav li a:visited {
    padding: 10px 0;
  }

  .sticky .mobile-nav-icon {
    margin-top: 10px;
  }
  .sticky .mobile-nav-icon ion-icon {
    color: #555;
  }

  /* About me (marad) */
  .aboume-image {
    max-width: 200px;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
}

/**************************/
/* max height             */
/**************************/

@media (max-height: 36em) {
}