a:link, a:active, a:visited {text-decoration: none;}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 

body {
  font-family: Verdana, Arial, Helvetica, sans-serif, Times New Roman, Garamond;
  font-size: 100%;
  background-color: #ffffff;
  /*-moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;*/
}

code, pre, abbr, kbd {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
} 

.wrapper {
  width: 100%;
  margin: auto;
}

.szolgpagecim {
  color: #000000;
  font-family: "Times New Roman", serif;
  font-size: 50px;
  font-weight: 600;
  margin: 20px;
  text-align: center;
}

.elvalaszto {
  height: 41px;
}

.elvalaszto > svg {
  fill: #CEB38C;
  height: 41px;
  width: 100%;
}

#eletmod {
  vertical-align: top;
  margin: 10px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

#eletmod > div {
  display: inline-block;
}

#eletmod > div:first-child {
  width: 30%;
  height: 30%;
}

#eletmod > div > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#eletmod > div:last-child {
  vertical-align: middle;
  width: 50%;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
}

#eletmod > div:last-child p:nth-child(1) {
  background-color: #CEB38C;
  margin: 1px 0px 0px 0px;
  padding: 25px;
  border-radius: 61px 61px 0px 61px;
  color: #FFFFFF;
  font-family: "Open Sans", Sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  width: 93%;
}

#eletmod > div:last-child p:nth-child(2) {
  text-align: center;
  color: #000000;
  font-style: italic;
  font-size: 1.2em;
}

#eletmod > div > p {
  font-family: "Open Sans", Sans-serif;
  margin: 27px 0;
  text-align: center;
  line-height: 30px;
  hyphens: auto;
}

#eletmod > div:last-child p:nth-child(6) {
    text-align: center;
    margin: 20px;
}

#eletmod > div:last-child p:nth-child(6) a {
  background-color: #847054;
  padding: 12px 70px 12px 70px;
  color: white;
  border-radius: 3px;
}

#vallakozasoknak {
  padding: 20px;
  background-image: url("../images/szolgaltatas-hatter.png");
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#vallakozasoknak > div {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

#vallakozasoknak > div:first-child {
  width: 55%;
  vertical-align: middle;
  font-size: 1.2em;
}

#vallakozasoknak > div:first-child p:nth-child(1) {
  background-color: #CEB38C;
  margin: 1px 0px 0px 0px;
  padding: 14px;
  border-radius: 61px 61px 61px 0px;
  color: #FFFFFF;
  font-family: "Open Sans", Sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  width: 100%;
  line-height: 50px;
}

#vallakozasoknak > div:first-child p:nth-child(2) {
  text-align: center;
  color: #000000;
  font-style: italic;
  font-size: 1.2em;
  margin: 27px 0;
}

#vallakozasoknak > div:first-child p {
  font-family: "Open Sans", Sans-serif;
  margin: 27px 0;
  text-align: center;
  line-height: 20px;
}

#vallakozasoknak > div:first-child p:nth-child(4) a {
  background-color: #847054;
  padding: 12px 70px 12px 70px;
  color: white;
  border-radius: 3px;
}

#vallakozasoknak > div:last-child {
  width: 30%;
}

#vallakozasoknak > div:last-child img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#egyeni {
  vertical-align: top;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#egyeni > div {
  display: inline-block;
  text-align: center;
}

#egyeni > div:first-child {
  width: 30%;
}

#egyeni > div:last-child p:nth-child(1) {
  background-color: #CEB38C;
  margin: 1px 0px 0px 0px;
  padding: 14px 14px 14px 14px;
  border-radius: 61px 61px 0px 61px;
  color: #FFFFFF;
  font-family: "Open Sans", Sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  width: 100%;
  line-height: 50px;
}

#egyeni > div:last-child p:nth-child(2) {
  text-align: center;
  color: #000000;
  font-style: italic;
  font-size: 1.2em;
}

#egyeni > div:last-child p {
  font-family: "Open Sans", Sans-serif;
  margin: 27px 0;
  text-align: center;
  line-height: 30px;
}

#egyeni > div:last-child p:nth-child(4) a {
  background-color: #847054;
  padding: 12px 70px 12px 70px;
  color: white;
  border-radius: 3px;
}

#egyeni > div:last-child {
  width: 55%;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
}

#egyeni > div:first-child img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#arak {
  width: 95%;
  /* margin: 18px 0; */
  display: flex;
  flex-direction: row;
  gap: 10px;
  /* justify-content: flex-start; */
  align-items: stretch;
  margin: 10px auto;
  height: auto;
}

#arak > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* align-items: stretch; */
  flex: 1;
  background-color: #f7f7f7;
}

.arak_ar {
  height: 110px;
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(180deg, #CEB38C 0%, #847054 100%);
}

#arak > div > p {
  margin: 10px;
  padding: 10px 0;
  height: 20px;
}

#arak > div li {
  margin: 30px 0 10px 0;
}

#arak > div:nth-child(1) > p:nth-child(1),
#arak > div:nth-child(2) > p:nth-child(1),
#arak > div:nth-child(3) > p:nth-child(1) {
  fill: #847054;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

#arak > div:nth-child(1) > p:nth-child(1) svg,
#arak > div:nth-child(2) > p:nth-child(1) svg,
#arak > div:nth-child(3) > p:nth-child(1) svg {
  width: 32px;
  height: 32px;
}

.arak_ar p {
  color: #ffffff;
  text-align: center;
  font-size: 2em;
  line-height: 1.3;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

#arak > div:nth-child(1) > p:nth-child(4) label,
#arak > div:nth-child(2) > p:nth-child(4) label,
#arak > div:nth-child(3) > p:nth-child(4) label {
  font-size: medium;
  display: block;
  margin: 10px 0 0 0;
}

#arak > div:nth-child(1) > p:nth-child(5),
#arak > div:nth-child(2) > p:nth-child(5),
#arak > div:nth-child(3) > p:nth-child(5) {
  font-size: smaller;
  font-style: italic;
  font-family: serif;
  text-align: center;
}

#arak > div:nth-child(1) > ul,
#arak > div:nth-child(2) > ul,
#arak > div:nth-child(3) > ul {
  list-style-type: none;
  margin: 0 18px;
  padding: 10px;
}

#arak > div:nth-child(1) > ul li:before,
#arak > div:nth-child(2) > ul li:before,
#arak > div:nth-child(3) > ul li:before {
  content: '✓';
  color:green;
  margin: 0 15px 0 0;
}

#arak > div:nth-child(1) > p:nth-child(2), 
#arak > div:nth-child(2) > p:nth-child(2),
#arak > div:nth-child(3) > p:nth-child(2){
  font-size: 1em;
  display: table-cell;
  margin: 0 auto;
  height: 80px;
  text-align: center;
  /* line-height: 1.5; */
  padding: 23px 0 0 0;
}

#arak > div:nth-child(1) > p:nth-child(3), 
#arak > div:nth-child(2) > p:nth-child(3),
#arak > div:nth-child(3) > p:nth-child(3){
  font-size: small;
  color: gray;
  text-align: center;
}

@media only screen and (max-width : 320px) {

}

@media only screen and (min-width : 321px) and (max-width : 375px) {
  .wrapper {width: 100%;}
  .szolgpagecim {font-size: 2em;}
  .elvalaszto > svg {/* width: unset; */}
  #eletmod {flex-direction: column;margin: 0;width: 100%;}
  #eletmod > div:first-child {width: 80%;height: 80%;}
  #eletmod > div:last-child {width: 100%;align-items: center;gap: 10px;}
  #eletmod > div:last-child p {margin: 0;width: 95%;text-align: justify;font-size: 1em;line-height: unset;}
  #eletmod > div:last-child p:nth-child(1) {font-size: 1.5em;padding: 20px;}
  #vallakozasoknak {flex-direction: column; width: 100%;}
  #vallakozasoknak > div:first-child {display: flex;flex-direction: column;width: 100%;hyphens: auto;gap: 10px;}
  #vallakozasoknak > div:first-child p {width: 95%;margin: 0;line-height: unset;text-align: justify;font-size: 1em;}
  #vallakozasoknak > div:first-child p:nth-child(1) {font-size: 1.5em;}
  #vallakozasoknak > div:first-child p:nth-child(4) {width: 100%;text-align: center;margin: 10px;}
  #vallakozasoknak > div:last-child {width: 80%; height: 80%;}
  #egyeni {flex-direction: column;}
  #egyeni > div:first-child {width: 80%;}
  #egyeni > div:last-child {width: 95%; gap: 10px;}
  #egyeni > div:last-child p {margin: 0;text-align: justify;hyphens: auto;line-height: unset;}
  #egyeni > div:last-child p:nth-child(1) {font-size: 1.5em;}
  #egyeni > div:last-child p:nth-child(4) {text-align: center;margin: 20px auto;width: 100%;}
  #arak {flex-direction: column;}
  #arak > div {}
}

@media only screen
and (min-width: 376px) and (max-width : 414px) {
  .wrapper {width: 100%;}
  .szolgpagecim {font-size: 2em;}
  .elvalaszto > svg {width: unset;}
  #eletmod {flex-direction: column;margin: 0;}
  #eletmod > div:first-child {width: 80%;height: 80%;}
  #eletmod > div:last-child {width: 100%;align-items: center;gap: 10px;}
  #eletmod > div:last-child p {margin: 0;width: 95%;text-align: justify;}
  #eletmod > div:last-child p:nth-child(1) {font-size: 1.8em;padding: 20px;}
  #vallakozasoknak {flex-direction: column; width: 100%;}
  #vallakozasoknak > div:first-child {display: flex;flex-direction: column;width: 100%;hyphens: auto;gap: 10px;}
  #vallakozasoknak > div:first-child p {width: 95%; margin: 0; line-height: 1.4; text-align: justify;}
  #vallakozasoknak > div:first-child p:nth-child(1) {font-size: 1.8em;}
  #vallakozasoknak > div:first-child p:nth-child(4) {width: 100%;text-align: center;margin: 10px;}
  #vallakozasoknak > div:last-child {width: 80%; height: 80%;}
  #egyeni {flex-direction: column;}
  #egyeni > div:first-child {width: 80%;}
  #egyeni > div:last-child {width: 95%; gap: 10px;}
  #egyeni > div:last-child p {margin: 0;text-align: justify;hyphens: auto;}
  #egyeni > div:last-child p:nth-child(1) { font-size: 1.8em;}
  #egyeni > div:last-child p:nth-child(4) {text-align: center; margin: 20px;}
  #arak {flex-direction: column;}
  #arak > div {}
}

@media only screen and (min-width : 415px) and (max-width : 767px) {
  .wrapper { width: 100%;}
  .elvalaszto {/* width: 100%; */}
  .elvalaszto > svg {width: unset;}
  .szolgpagecim {margin: unset;text-align: right;padding: 20px;font-size: 2.5em;}
  #eletmod > div {display: block;}
  #eletmod > div > img {width:100%;height: 100%;}
  #eletmod > div:first-child {width: 100%;}
  #eletmod > div:last-child {width: 100%;}
  #eletmod > div:last-child p:nth-child(1) {width: unset;font-size: 1.2em;}
  #vallakozasoknak {padding: 10px;}
  #vallakozasoknak > div:first-child {display: block;width: unset;}
  #vallakozasoknak > div:last-child {width: unset;display: block;}
  #vallakozasoknak > div:last-child img {width: 100%; height: 100%;}
  #egyeni > div:first-child {display: block;width: unset;}
  #egyeni > div:last-child {display: block;width: unset;}
  #egyeni > div:first-child img {width: 100%;height: 100%;}
  #egyeni > div:last-child p:nth-child(1) {width: unset;font-size: 1.2em;padding: 10px;line-height: 30px;}
  #egyeni > div:last-child p:nth-child(2) {line-height: 20px; margin: 10px;}
  #egyeni > div:last-child p {margin: 20px 0; line-height: 20px;}
  #arak {margin: 0; width: unset; padding: 10px;}
  #arak > div {width: unset;height: unset;display: block;padding: 10px;}
  .arak_ar {}
  .arak_ar p {font-size: 1.5em;}
  #vallakozasoknak > div:first-child p:nth-child(1) {font-size: 1.2em;padding: 10px;width: 95%;line-height: 30px;}
  #egyeni {/* width: 100%; */}
  #arak > div li {margin: 20px 0 10px 0;}
  #arak > div:nth-child(1) > p:nth-child(2),
  #arak > div:nth-child(3) > p:nth-child(2) {display: block; height: unset;}
}

@media only screen and (min-width : 768px) and (max-width : 1023px) {
  .wrapper {width: 100%;}
  .elvalaszto {/* width: 100%; */}
  .elvalaszto > svg {/* width: unset; */}
  .szolgpagecim {margin: unset;padding: 20px;font-size: 2.5em;}
  #eletmod > div {display: inline-block;}
  #eletmod > div > img {width: 100%;height: 100%;}
  #eletmod > div:first-child {width: 35%;}
  #eletmod > div:last-child {width: 60%;text-align: right;}
  #eletmod > div:last-child p:nth-child(1) {width: unset;font-size: 1.2em;line-height: 30px;padding: 20px;}
  #eletmod > div:last-child p:nth-child(2) {font-size: .9em;}
  #eletmod > div > p {font-size: .8em;line-height: 20px;}
  #vallakozasoknak {padding: 10px;}
  #vallakozasoknak > div:first-child {/* display: block; *//* width: unset; */}
  #vallakozasoknak > div:last-child {/* width: unset; *//* display: block; */width: 35%;}
  #vallakozasoknak > div:first-child p {line-height: 25px;font-size: .8em;}
  #vallakozasoknak > div:first-child p:nth-child(1) {font-size: 1.2em;padding: 20px;width: 95%;line-height: 30px;}
  #vallakozasoknak > div:first-child p:nth-child(2) {margin: 10px 0;font-size: 1.2em;}
  #vallakozasoknak > div:last-child img {width: 100%; height: 100%;}
  #egyeni > div:last-child p {line-height: 25px;font-size: .8em;}
  #egyeni > div:first-child {/* display: block; *//* width: unset; */width: 30%;}
  #egyeni > div:last-child {/* display: block; *//* width: unset; */}
  #egyeni > div:last-child p:nth-child(2) {margin: 10px 0;}
  #egyeni > div:first-child img {width: 100%;height: 100%;}
  #egyeni > div:last-child p:nth-child(1) {width: unset;font-size: 1.2em;padding: 20px;line-height: 20px;}
  #arak {padding: unset;}
  #arak > div {/* width: unset; */height: 700px;/* display: block; */padding: 10px;}
  .arak_ar {}
  .arak_ar p {font-size: 1.5em;}
  #egyeni {/* width: 100%; */text-align: center;}
  #arak > div li {margin: 10px 0 0 0;}
  #arak > div:nth-child(1) > p:nth-child(2), #arak > div:nth-child(2) > p:nth-child(2), #arak > div:nth-child(3) > p:nth-child(2) {display: block;width: unset;}
  #arak > div:nth-child(1) > ul,
  #arak > div:nth-child(2) > ul,
  #arak > div:nth-child(3) > ul {font-size: .9em;}
}

@media only screen and (min-width : 1024px) and (max-width : 1440px) {
  #eletmod > div:first-child {width: 40%;}
  #eletmod > div:last-child p:nth-child(1) {font-size: 2em;width: 90%;}
  #eletmod > div:last-child {width: 54%;font-size: 1em;}
  #vallakozasoknak > div:first-child {font-size:1em}
  #vallakozasoknak > div:first-child p:nth-child(1) {font-size: 2em;width: 90%;}
  #arak > div:nth-child(1) > p:nth-child(2), #arak > div:nth-child(2) > p:nth-child(2), #arak > div:nth-child(3) > p:nth-child(2) {display: block;width: unset;}
  #arak > div {height: 910px;}
  #egyeni > div:first-child {width: 40%;}
  #egyeni > div:last-child {font-size: 1em;}
  #egyeni > div:last-child p:nth-child(1) {font-size: 2em;width: 90%;}
  #vallakozasoknak > div:last-child {width: 40%;}
}