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

* {
  margin: 0;
}
 

html { width: 100%;}

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 {
  margin: auto;
  width: 100%;
}

.rolam1 {
  width: 90vw;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.kepek, .leir {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.kepek {
  width: 50%;
  display: inline-block;
  height: fit-content;
  margin: auto;
}

.kepek figure {
  position: relative;
  display: inline-block;
}

.kepek figure:first-child {
  height: 30vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.kepek figure:last-child {
  margin: -5vw auto;
  z-index: 2;
  width: 70%;
}

.kepek figure:first-child img:first-child {
  z-index: 3;
}

.kepek figure:first-child img:last-child {
  z-index: 1;
}

.kepek figure:last-child img {
  z-index: 2;
  width: 100%;
  height: 100%;
}

.kepek figure img {
  /* max-width: 100%; */
  height: 100%;
  object-fit: contain;
  margin: 8px;
  /* box-shadow: white 0px 0px 27px 5px; */
  position: relative;
}

.leir {
  display: inline-block;
  position: relative;
  font-size: clamp(1.2rem, 4vw, 1rem);
  hyphens: auto;
  line-height: 1.5em;
  padding: 26px;
  background-color: #b3a792;
  border-radius: 70px;
  color: white;
  margin: auto 0;
  text-align: center;
  font-family: serif;
  height: fit-content;
}

.leir p {
  margin: 10px 0;
}

.leir p:nth-child(4) {
  text-align: left;
  font-size: .9em;
  line-height: normal;
  font-style: italic;
}

.hl {
  width: 50%;
  height: 4px;
  background-color: #888375;
  margin: 0 auto;
}

.rolam3 {
  text-align: center;
  width: 100%;
}

.rolam3 > div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.rolam3 > p {
  background-color: #99815e;
  font-size: 3em;
  padding: 20px;
  text-align: center;
  font-family: serif;
  font-weight: bold;
  color: white;
}

.rolam3 figure {
  display: inline-block;
  padding: 20px;
  margin: auto;
}

.rolam3 figure img {
  /* height: 50%; */
  /* width: 100%; */
}

.rolam3 label {
  display: block;
  width: 100%;
}

.elvalaszto2 {
  fill: #CEB38C;
  margin: 20px 0;
}

.elvalaszto2 svg {
  height:49px;
  width: 100%;
}

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

}

@media only screen and (min-width : 360px) and (max-width : 720px) {
  .kepek, .leir {flex: unset;font-size: .9em;}
  .kepek figure:nth-child(2) {margin: 0 auto;width: 60vw;}
  .kepek figure:first-child {height: 60vw;}
  .kepek {width: 100%;}
  .rolam3 > p {font-size: 2em;}
  .rolam3 figure img {width: 80%;}
}

@media only screen and (min-width : 720px) and (max-width : 860px) {
  .kepek, .leir {flex: unset;font-size: 1em;}
  .kepek figure:nth-child(2) {margin: 0 auto;width: 60vw;}
  .kepek figure:first-child {height: 50vw;}
  .kepek {width: 100%;}
}

@media only screen and (min-width : 860px) and (max-width : 1024px) {
  .wrapper {}
  .rolam1 {height: unset;padding: unset;width: 95%;}
  .kepek {/* height: unset; */width: 100%;/* text-align: center; *//* margin: 20px 0 0 0; *//* display: block; */margin: 0 auto;}
  .kepek figure:nth-child(1) {/* top: unset; */height: 50vw;}
  .kepek figure:nth-child(2) {margin: 54vw auto 0;}
  .kepek figure img {margin: 8px 0;}
  .kepek figure:last-child img {margin: 0;}
  .elvalasztoup, .elvalasztodown, .elvalaszto2 {width: unset;}
  .leir {margin: auto 0;display: block;width: 95%;position: relative;float: none;}
  .rolam3 {}
  .rolam3 > p {font-size: 2.5em;}
  .rolam3 > div {display: inline-block;}
  .rolam3 > div:nth-child(2) {margin: 10px 0;}
  .rolam3 > div:last-child {/* width: 90%; */margin: unset;}
  .rolam3 > div img {/* width: 100%; *//* height:unset; */}
  .impr {/* width: 100%; */}
  .copir {}
}