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

.logo {
  box-sizing: border-box;
  height: auto;
  width: 120px;
  position: absolute;
  left: 60px;
  padding-top: 12px;
}

.home {
  position: relative;
}

.menuszoveg {
  font-family: "Roboto Condensed", Arial, Tahoma, Geneva, Verdana, sans-serif;
  text-transform: none;
  position: relative;
  left: 140px;
}

@media screen and (max-width: 1000px) {
  .menuszoveg {
    position: unset;
  }
}

header {
  width: 60%;
  position: absolute;
  top: 0;
  left: 20%;
  z-index: 1;
  background-color: rgb(0, 0, 0);
}

@media screen and (max-width: 1500px) {
  header {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}

html {
  font-family: "Roboto Condensed", Arial, Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 300px;
  margin-left: 0;
  margin-right: 0;
  background-image: url(images/skyline.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

br.clear {
  clear: both
}

body {
  margin: 0;
  background-color: #393e49;
  background-image: url(images/skyline.jpg);
}

.header-img {
  box-sizing: border-box;
  width: 100%;
  left: 20%;
  height: 230px;
  background-size: relative;
  text-align: center;
  margin-top: -330px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  box-shadow: inset 0 0 0 2000px rgba(13, 15, 34, 0.5);
}

.header-img {
  width: 60%;
  position: relative;
}

@media screen and (max-width: 1500px) {
  .header-img {
    width: 100%;
    position: unset;
  }
}

h4 {
  margin-left: 30px;
  margin-right: 30px;
}

h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.6rem;
  text-shadow: 2px 2px 2px #000000;
  color: white;
  padding-top: 100px;
}

h2 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.3rem;
  color: white;
  text-shadow: 2px 2px 2px #000000;
  padding-top: 0px;
}

h3 {
  margin-top: 1px;
  font-family: "Roboto Condensed", sans-serif;
  padding: 1px;
  font-size: 1.5rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.5rem;
  color: rgb(199, 0, 0);
  text-shadow: 2px 2px 2px #000000;
  padding-top: 0px;
}

h7 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.0rem;
  color: rgb(0, 0, 0);
  text-shadow: 1px 1px 1px #ffffff;
  padding-top: 20px;
  background-color: #DDD;
  letter-spacing: 0.08em;
  border: 2px solid #000000;

}

div#balhasab {
  width: 40%;
  background: rgb(155, 147, 35);
  padding: 20px;
  margin: 20px 40px;
  position: absolute;


}

div#jobbhasab {
  width: 40%;
  background: #ddd;
  padding: 20px;
  margin: 20px 20px;
  position: relative;
  left: 50%;

}

div.clear {
  clear: both
}

.letoltesek {
  text-decoration: underline;
  color: blue;
}







div.szervizszam {

  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.3rem;
  color: rgb(122, 27, 27);
  text-shadow: 1px 1px 1px #413f3f;
  padding: 15px;
  background-color: rgb(226, 226, 226);
  letter-spacing: 0.08em;
  text-align: center;
  border: none;


}

p {
  margin-left: 30px;
}

.kivansag {
  border: 1px solid rgb(53, 53, 53);
  color: black;
  padding: 5px 5px !important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 30px;
}

.kivansag:hover {
  background-color: #e2d34f;
}

#first-margin-top {
  margin-top: 80px;
}

.mobile_number {
  display: block;
  float: left;
  text-align: right;
  padding-left: 0px;
  padding-right: 20px;
  color: #b99a61;
  text-transform: uppercase;
}

.mobile_number2 {
  position: relative;
  left: 20px;
}

.emailend {
  color: #e4d8c4;
  font-size: 1.2rem;
  position: relative;
  left: 10px;
}

.nospace {
  list-style: none;
  white-space: normal;
  text-align: center;
}

.topnav {
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  text-transform: none;
}

.topnav a {
  float: left;
  display: block;
  color: #c9b89a;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.active {
  color: white;
}

.topnav .icon {
  display: none;
}

.moreinfo {
  border: 1px solid rgb(53, 53, 53);
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 30px;
  margin-right: 30px;
}

.moreinfo:hover {
  background-color: #afabaa;
}

a {
  color: #242933;
  text-decoration: none;
  font-family: "Cabin", sans-serif;
}

.one_third {
  display: inline-flex;
  margin: 0 0 0 0;
  list-style: none;
  width: 40%;
  padding: 20px;
}

.two_third {
  display: inline-flex;
  margin: 0 0 0 0;
  list-style: none;
  width: 20%;
  height: auto;
  padding: 10px;
}

.centerword1 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  margin-top: 10px;
}

#introblocks {
  position: relative;
  z-index: 1;
  margin-top: -100px;
  padding: 10px 0 0 0;
  padding-bottom: 20px;
  line-height: normal;
}

#introblocks>ul>li {
  text-align: center;
}

#introblocks article {
  display: block;
  position: relative;
  padding: 0;
  line-height: 130%;
  text-align: left;
}

#introblocks article * {
  margin: 0;
  padding-right: 20px;
}


#introblocks article .heading {
  margin-bottom: 10px;
}

#introblocks {
  width: 60%;
  position: relative;
  left: 20%;
}

#introblocks {
  color: #474747;
  background-color: #fcfbee;
}

#introblocks article i {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  overflow: hidden;
  line-height: 1;
  font-size: 65px;
  color: rgba(0, 0, 0, 0.3)
}

#introblocks article:hover .heading a,
#introblocks article:hover i {
  color: inherit;
}

#introblocks {
  margin: 0;
}

@media screen and (max-width: 1500px) {
  #introblocks {
    width: 100%;
    position: unset;
  }
}

.ajanlatkepek {
  height: auto;
  width: 50%;
  margin: 20%;
  padding: auto;
}

div.arak {

  color: red;
  padding-left: 8%;
  padding-bottom: 10px;
  font-size: 1.1rem;
  margin: 10px;
  width: 100%;

}

.nagykepek {
  width: 80%;
  height: auto;
}

.termekkep {
  width: 30%;
  height: auto;
  float: left;
  padding: 10px;

}

.kiskepek {
  width: auto;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px dotted black;
}

p.imgtext {
  color: red;
  padding: 100px 100px 10px 250px;
  float: right;
}

.kepek {
  width: 40%;
  height: auto;
}

@media screen and (max-width: 1000px) {
  #introblocks>ul>li img {
    width: 50%;
    position: relative;
  }
}

@media screen and (max-width: 600px) {
  #introblocks>ul>li img {
    width: 80%;
    position: relative;
  }
}


#footer {
  padding: 20px 20px;
  padding-bottom: 50px;
}

.overlay {
  width: 60%;
  position: relative;
  left: 20%;
}

@media screen and (max-width: 1500px) {
  .overlay {
    width: 100%;
    position: unset;
  }
}

.fl_left {
  float: left;
  color: rgb(185, 185, 185);
}

.heading {
  font-size: 1.1rem;
}

.overlay {
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(13, 15, 34, 0.5);
}

.heading-bottom1 {
  font-size: 1.2rem;
  color: #b99a61;
  padding-left: 40px;
}

.endinfo1 {
  padding-bottom: 10px;
  color: #b99a61;
  font-size: 1.2rem;
}

.endinfo2 {
  padding: 0;
  color: #c9b89a;
  font-weight: bold;
  font-size: 1rem;
}

.ending {
  list-style: none;
}

.profilkep {
  float: left;
  position: relative;
  left: 0;
  width: 60px;
}

@media screen and (min-width: 730px) {
  .profilkep {
    width: 60px;
  }
}

.copyright {
  background-color: black;
}

/* Style the form element with a border around it */
form {
  border: 1px solid #444444;
  position: relative;
}

#copydom {
  color: #b99a61;
}

@media screen and (max-width: 1000px) {
  .one_third {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 30px 0;
    padding: 10;
  }

  .centerword1 {
    text-align: center;
    position: relative;
    left: 15%;
  }

  .moreinfo1 {
    text-align: center;
  }

  #header {
    text-align: center;
  }

  #header {
    margin: 0 0 15px 0;
  }

  #introblocks .sectiontitle {
    max-width: 80%;
  }

  #introblocks>ul>li:last-child {
    margin-bottom: 0;
  }

  #introblocks {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}

@media screen and (min-width: 1500px) {
  .header-img {
    font-size: 1.3rem;
  }
}

/* When the screen is less than 1500 pixels wide, hide all links,
 except for the first one ("Home"). Show the link that contains 
 should open and close the topnav (.icon) */
@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript
 when the user clicks on the icon. This class makes the topnav look good
  on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    left: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}