@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
*{
    font-family: 'Lato', sans-serif;
}
/*============================================================================================================================= */

  
/*=========================Chrome 375px=========*/
@media (max-width: 375px) {
  input[type="checkbox"]:checked ~ nav{
    width: 100%;
  }
  input[type="checkbox"]:checked ~ .fotarolo{
    opacity: 0.2;
  }
  .fotarolo .sivatag{
    padding-top:25px;
    text-align: center;
    justify-content:flex-start ;
  }
  .fotarolo .sivatag .sivatag_szoveg{
    font-size: 1.8em;
		font-weight: 700;
    letter-spacing: 3px;
  }

  .fotarolo .sivatag .mentalis{
    font-size: 1.1em;
    letter-spacing: 2px;
    margin-top: 0px;
  }
  .wrapper .btn .button3,
  .wrapper .btn .button4{
    width: 90%;
    font-size: 1em;
  }
  .nyil{
    font-size:2em;
    margin-top: 450px;
  }
  
  .amiben{
    font-size: 1.2em;
    text-shadow: 1px 1px 2px #000;
  }
  .fogaskerek{
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  .fogaskerek .fogaskerek_szoveg p{
    display: block;
    height: 300px;
    margin-top: 0px;
    font-size: 1em;
  }
  .fogaskerek .fkep{
    width: 100%;
    max-height: 250px;
    margin-top: -300px;
    opacity: .3;
  }
  .feltaro{
    height: 300px;
    padding: 10px;
  }
  .feltaro .feltaro_cim{
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 1em;
    text-shadow: none; 
  }
  .feltaro .feltaro_szoveg {
    font-weight: 500;
    font-size: .8em;
    margin-bottom: 0px;
    text-align: justify;
    line-height: 2em;
  }
  .container{
    flex-wrap: wrap;
  }
  .parduc .pszoveg{
    font-size: 1em;
  }

  
}
/*=========================Chrome 425px=========*/
@media (min-width: 376px) and (max-width: 425px) {
  input[type="checkbox"]:checked ~ nav{
    width: 100%;
  }
  input[type="checkbox"]:checked ~ nav{
    width: 100%;
  }
  input[type="checkbox"]:checked ~ .fotarolo{
    opacity: 0.4;
  }
  .sivatag{
    text-align: center;
    padding-top: 20px;
  }
  .sivatag_szoveg{
    text-align: center;
    margin-top: 80px;
    font-size: 2.2em;
		font-weight: 700;
		letter-spacing: 3px;
  }

  .mentalis{
    font-size: 1.4em;
    letter-spacing: 2px;
    margin-top: 0px;
  }
  .wrapper .btn .button3,
  .wrapper .btn .button4{
    width: 90%;
    font-size: 1em;
  }
  .nyil{
    font-size:2em;
    margin-top: 450px;
  }
  
  .amiben{
    font-size: 1.2em;
    text-shadow: 1px 1px 2px #000;
  }
  .fogaskerek{
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  .fogaskerek .fogaskerek_szoveg p{
    display: block;
    height: 300px;
    margin-top: 0px;
  }
  .fogaskerek .fkep{
    width: 100%;
    max-height: 250px;
    margin-top: -300px;
    opacity: .3;
  }
  .feltaro{
    height: 300px;
    padding: 10px;
  }
  .feltaro .feltaro_cim{
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 1em;
    text-shadow: none; 
  }
  .feltaro .feltaro_szoveg {
    font-weight: 500;
    font-size: .8em;
    margin-bottom: 0px;
    text-align: justify;
    line-height: 2em;
  }
  .container{
    flex-wrap: wrap;
  }
  .parduc .pszoveg{
    font-size: 1em;
  }
}
/*=========================Chrome 768px=========*/
@media (min-width: 476px) and  (max-width: 768px) {
  input[type="checkbox"]:checked ~ nav{
    width: 100%;
  }
  input[type="checkbox"]:checked ~ .fotarolo{
    opacity: 0.4;
  }

  .sivatag{
    padding-top: 0px;
  }
  .sivatag_szoveg{
    text-align: center;
    margin-top: 58px;
    font-size: 4em;
		font-weight: 700;
		letter-spacing: 6px;
  }

  .mentalis{
    font-size: 2em;
    letter-spacing: 6px;
    margin-top: 0px;
  }

  .btn .button3, .btn .button4{
    width: 50%;
    font-size: 1.5em;
  }
  .nyil{
    font-size:2em;
    margin-top: 400px;
    padding:10px 20px
  }

  .amiben{
    font-size: 1.5em;
    text-shadow: 1px 1px 2px #000;
  }
  .fogaskerek{
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  .fogaskerek .fogaskerek_szoveg p{
    display: block;
    width: 100%;
    height: 300px;
    font-size: 1em;
    margin-top: 0px;
    background: #ffffff;
  }
  .fogaskerek .fkep{
    width: 50%;
    height: 300px;
    margin-top: -300px;
    opacity: .3;
  }
  .feltaro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    padding: 10px;
  }
  .feltaro .feltaro_cim{
    font-weight: 400;
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 1em;
    text-shadow: none; 
  }
  .feltaro .feltaro_szoveg {
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 0px;
    text-align: justify;
    line-height: 2em;
  }
  .container{
    flex-wrap: wrap;
  }
  .parduc .pszoveg{
    font-size: 1em;
  }
}
/*=========================Chrome 1024px=========*/
@media (min-width: 769px) and  (max-width: 1024px) {
  input[type="checkbox"]:checked ~ nav{
    width: 28%;
  }
  body{
    background-repeat: no-repeat;
    background-image: url("../kepek/sivatag.jpg");
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  input[type="checkbox"]:checked ~ .fotarolo{
    opacity: 0.4;
  }
  .sivatag{
    padding-top: 0px;
  }

  .sivatag_szoveg{
    font-size: 4em;
    text-align: center;
    font-weight: 700;
    letter-spacing: 10px;
    margin-top: 58px;
  }
  .btn .button3{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  .btn .button4{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 70%;
  }

  .btn .button3, .btn .button4{
    width: 40%;
    font-size: 1.8em;
  }
  .nyil{
    font-size:2em;
    margin-top: 380px;
    padding:10px 20px
  }

  .amiben{
    font-size: 2em;
    text-shadow: 1px 1px 2px #000;
  }
  .fogaskerek{
    justify-content: center;
    align-items: center;
  }
  .fogaskerek .fogaskerek_szoveg p{
    display: block;
    width: 100%;
    height: 300px;
    font-size: 1em;
    margin-top: 0px;
    background: #ffffff;
  }
  .fogaskerek .fkep{
    width: 40%;
    height: 300px;
    opacity: .3;
  }
  .feltaro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    padding: 10px;
  }
  .feltaro .feltaro_cim{
    font-weight: 400;
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 1em;
    text-shadow: none; 
  }
  .feltaro .feltaro_szoveg {
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 0px;
    margin-top: 20px;
    text-align: justify;
    line-height: 2.5em;
  }
  .container{
    flex-wrap: wrap;
  }
  .parduc .pszoveg{
    font-size: 1em;
  }
}
/*=========================Chrome 1440px=========*/
@media (min-width: 1025px) and  (max-width: 1440px) {
  input[type="checkbox"]:checked ~ nav{
    width: 24.5%;
  }
  input[type="checkbox"]:checked ~ .fotarolo{
    opacity: 0.4;
  }
  .sivatag{
    padding-top: 0px;
  }

  .sivatag_szoveg{
    font-size: 4em;
    text-align: center;
    font-weight: 700;
    letter-spacing: 10px;
    margin-top: 58px;
  }
  .btn .button3{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  .btn .button4{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 70%;
  }

  .btn .button3, .btn .button4{
    width: 40%;
    font-size: 1.8em;
  }

  .nyil{
    font-size:2em;
    margin-top: 550px;
    padding:10px 20px
  }

  .amiben{
    font-size: 2em;
    text-shadow: 1px 1px 2px #000;
  }
  .fogaskerek{
    justify-content: center;
    align-items: center;
  }
  .fogaskerek .fogaskerek_szoveg p{
    display: block;
    width: 100%;
    height: 300px;
    font-size: 1.5em;
    margin-top: 0px;
    background: #ffffff;
  }
  .fogaskerek .fkep{
    width: 30%;
    height: 300px;
    opacity: .3;
  }
  .feltaro{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    padding: 10px;
  }
  .feltaro .feltaro_cim{
    font-weight: 400;
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 2em;
    text-shadow: none; 
  }
  .feltaro .feltaro_szoveg {
    font-weight: 300;
    font-size: 1.5em;
    margin-bottom: 0px;
    margin-top: 20px;
    text-align: justify;
    line-height: 2em;
  }
  .container{
    flex-wrap: wrap;
  }
  .parduc .pszoveg{
    font-size: 1.5em;
  }
}