body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background-color: rgb(255, 239, 210);

  animation-name: bodyFadeIn;
    animation-duration: 0.5s;
    animation-delay: 0s;
}

@keyframes bodyFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 100;
    }
}


.toprow {
  display: flex;
  flex-direction: row;

    width: 100vw;
    background-color: rgb(255, 217, 179);
    margin: 0px;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    font-weight: bold;
    color: rgb(64, 64, 64);
}

.toprow p {
    width: 50vw;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px; 
  }


.topnav {
    overflow: hidden;
    background-color: rgb(255, 239, 210);
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 99; 
    margin-left: 0;
    margin-right: 0;
  }

#logo {
    max-width: 180px;
    width: 100%;
    height: auto; 

   
  }

.logo {

    display: inline-block;
    margin-left: 10%;
    max-width: 200px; 
  }

.nav-list {
  width: 100vw;
  position: relative;
}

.nav-list ul {
  position: absolute;
  right: 0;
  top:0;
    margin: 30px;
    width: 700px;
    display: inline;
    float:right; 
    margin-right: 10%;
  }

.topnav ul li {
    display: inline;
    padding-left: 50px;
  }

.topnav ul li a {
    text-decoration: none;
    font-size: 20px;
    color:rgb(132, 104, 80);
  }

.topnav ul li a:hover {
    text-decoration: underline;
    color: rgba(132, 104, 80, 0.8);
    transition: color 0.3s linear 0s;
  }

@media screen and (max-width: 995px) {
    .logo { margin-left: 3%;}
    /*.topnav ul {margin: 10px; margin-top: 20px; width: 700px;} */
  }


.topnav a {
    color: rgba(132, 104, 80, 0.8);
  }

.topnav a:hover {
    color: rgb(132, 104, 80);
  }

.topnav .icon {
    display: none;
  }




.clearfix {overflow: auto;} 

.fa {
	font-size: 25px;
	width: 30px;
	text-align: center;
	text-decoration: none;
	margin: 2px;
	padding: 2px;
  }
  .fa:hover {
	  opacity: 0.7;
  }
  .fa-facebook {
	background: rgb(132, 104, 80);
	color: white;
  }

#FirstFrame {
    height: 100vh;
    background: url("img/healthyline_logo.png");
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    margin: 0px auto;
    padding: 0px;

}


.felirat {
    position: absolute; 
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding: 0; 
    text-align: center;
    width: 50%;
  }

.felirat .imgmotto {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

#FirstFrame .tovabbgomb {
    text-decoration: none;
    color: whitesmoke;
    background-color: rgba(132, 104, 80, 0.8);
    font-size: 15px;

    border: 1px solid #555555;
    border-radius: 3px;
    padding: 6px 13px;
    text-align: center;
    margin: 0 auto;
}

#FirstFrame .tovabbgomb:hover {
  color:rgb(64, 64, 64);
}

.szoveg {
  margin: 0px auto;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: justify;
}

.covid {
  margin-top: 50px;
  margin-bottom: 60px;
  font-size: 16px;
  max-width: 950px;
  width: 95%;
  box-shadow: 10px 10px 10px rgba(132, 104, 80, 0.1);
  padding: 0;
}

.covid p {
  background-color:rgba(132, 104, 80, 0.1);
  padding: 10px 20px;
}


.arckep {
    max-width: 200px;
    width: 100%;
    height: auto;
    float: left;
    margin-right: 50px;
    margin-bottom: 0px;
  } 

h4 {
    padding-left: 0vw;
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 50px;
    margin-top: 0;
  }

.szoveg h2 {
    margin-top: 0;
  }

.kezelesar {
    float: right;
    padding-right: 0vw;
    font-weight: bold;
}
table td, th{ 
  width: 300px;
  padding-left:2vw;
}
div.keret h5{
  font-size: large;
  font-weight:bolder;
}
.kezelesleiras {
  padding-left: 2vw;
}
.kezapolas{font-weight: bold;}
.manikur{
  font-weight: bold;
  padding-top: 15px;
}
.man{
  padding-top: 15px;
}
#elerhetoseg {
    display: flex;
    flex-direction: row;
  }
.kapcsolat {
    flex: 55%; 
    padding: 0 1vw;
  }
  .kapcsolat h2{
    margin-bottom: 15px;
  }
.kapcsolat p {
  margin-bottom: 5px;
}
  .nyitvatartas {
    display: inline-grid;
    grid-template-columns: 110px 110px;
    grid-column-gap: 3%;
  }

h3 {
  font-size: large;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 0;
}

.terkep {
  flex: 45%;
  margin-top: 6vh;
  padding: 0 1vw;

} 

@media screen and (max-width: 1000px) { 
  .terkep iframe {max-width: 350px; width: 100%;}
}

@media screen and (max-width: 800px) { 
  #elerhetoseg {flex-direction: column;}
}
@media screen and (max-width: 450px) { 
  .terkep iframe {max-width: 300px; width: 100%;}
}

.keret {
    border: 4px solid rgba(255, 217, 179, 0.8);
    box-shadow: 5px 5px 10px rgba(255, 217, 179, 0.7);
    border-radius: 5px;

    margin: 0 7vw;
    padding: 5vh 4vw;
    margin-bottom: 50px;
  }




hr {
    background-color: rgba(255, 217, 179, 1);
    height: 1px; border: 0;
  }

.footer {
    background-color: rgb(255, 217, 179);
    margin: 0;
    padding: 5px;
    text-align: center;
  }

.telszam {
    text-decoration: none;
    color: rgb(64, 64, 64);
  }

  @media screen and (max-width: 700px) {
    .felirat {top: 77%;}
  }

  @media screen and (max-width: 600px) {
    .felirat {top: 74%;}
    .felirat .imgmotto {margin-bottom: 30px;}
  }


@media screen and (max-width: 1050px) {
    #FirstFrame {background-size: 50%;}
    .felirat {width: 65%;}
  }

@media screen and (max-width: 550px) {
    #FirstFrame {background-size: 55%;}
    .felirat {width: 75%; top: 72%;}
    .felirat .imgmotto {margin-bottom: 40px;}

  }

  @media screen and (max-width: 450px) {
    #FirstFrame {background-size: 55%;}
    .felirat {width: 85%; top: 72%;}
    .felirat .imgmotto {margin-bottom: 40px;}
    #FirstFrame .tovabbgomb {font-size: 13px;}
  }




@media screen and (max-width: 1138px) {
    .topnav ul  {display: none;}
    #FirstFrame {background-size: 60%; /* background-attachment: fixed; */}
    .felirat {width: 70%;}
    .keret {padding: 5vh 2vw; margin: 0 3vw;}

    .topnav a.icon {
      float: right;
      display: inline; 
      margin-top: 2vh;
      padding-right: 5vh;
    }
    .fa-close {display: none;}
    .toprow p {font-size: 13px;}
    #bemutatkozas {padding-left: 4vw; padding-right: 4vw;}
  }


        /* The Close Button */
        .close {
          color: #4d331e;
          position: absolute;
          top: -35px;
          right: -25px;
          font-size: 35px;
          font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
          color:  #4d3319;
          text-decoration: none;
          cursor: pointer;
          text-shadow: 2px 2px 4px #000000;
        }

        .cursor {
          cursor: pointer;
        }
        

@media screen and (max-width: 1138px) {
    .topnav.responsive {/* position: fixed; */ overflow: visible;}
    .topnav.responsive .logo {display: inline-block;}

    .topnav.responsive ul {
      display: block; 
      float: none;
      width: 40%;
      top: 2vh;
      left: 18%;
      background-color: rgba(255, 217, 179, 0.5);
      padding-left: 2vw;
      padding-top: 2vh;
      padding-bottom: 2vh;
      margin: 0 auto;

      animation-name: respnavFadeIn;
      animation-duration: 0.9s;
      animation-delay: 0s;
    }
      @keyframes respnavFadeIn {
          from {
              opacity: 0;
          }
          to {
              opacity: 100;
          }
      }
    
    
    .topnav.responsive ul li {
      float: none;
      display: block;
      text-align: left;
      padding-left: 0vw;
    }
    .topnav.responsive ul li a {font-size: 17px; offset: 50px;}
    .topnav.responsive ul li a:hover {text-decoration:underline; }
    .topnav.responsive ul li:hover { background-color: rgba(255, 217, 179, 0.7);}
    .topnav.responsive a.icon {display: inline-block;}
  }





@media screen and (max-width: 700px) {
    .toprow p {font-size: 12px;}
    .arckep {max-width: 150px; width: 100%;}
    .topnav.responsive ul li a {font-size: 14.5px;}
    .szoveg p {font-size: 14px;}
    .keret p {font-size: 14px;}
    .keret .kezapolas{font-size: 17px;}
    .keret table tr td,th{font-size: 14px;}
    .keret .nyitvatartas div{font-size: 14px;}
    .footer p {font-size: 14px;}
    h2 {font-size: 17px;}
    h3{font-size: 15px;}
    h4 {font-size: 16px;}
    div.keret h5 {font-size: 13px;}
  }


@media screen and (max-width: 500px) {
    .arckep {max-width: 110px; width: 100%;}
    .toprow {flex-direction: column;}
    .toprow p {width: 100vw; margin: 2px;}
    #logo {max-width: 130px; width: 100%;}
  }