body{
  background: white;
  margin: 0px;
  padding: 0px;
}


@media only screen and (max-width: 1000px) {
  body {
    background-color: 84cace;
  }
}
@media only screen and (orientation: portrait) {
  div.navlist {
    display: none;
  }
}

a{
  text-decoration: none;
}

#mff {
    height: 8rem;
    position: absolute;
    top: 0px;
    left: 0px;
}
#eulogo{
  height: 12rem;
  position: absolute;
  top: 0px;
  right: 0px;
}
#nav {
    position: fixed;
    top: 250px;
    left: 50px;
    width: 50px;
    z-index: 99;
}
#nav ul {
    list-style-type: none;
    position: relative;
    padding: 3px;
    padding-left: 35%;
}
#nav ul li{
    position: relative;
    padding-bottom: 20px;
    padding-left: 35%;
    color: rgb(113,135,133);
}
#nav a{
    display: block;
    width: 8px;
    height: 8px;
    text-indent: -9999px;
    border-radius: 50%;
    border: 2px solid;
    border-color: #102A83;
    text-decoration: none;
}
#nav a:hover{
    border-radius: 50%;
    background-color: #102A83;
    text-decoration: none;
}
#nav a.active{
    border-radius: 50%;
    background-color: #FFEC00;
    border: 2px solid;
    border-color: #FFEC00;
    text-decoration: none;
}
.label {
    position: relative;
    top: -60%;
    left: -200%;
    width: 100%;
    text-align: right;
    font-size: 1em;
    color: rgb(113,135,133);
    display: none;
}
.linker a:hover{
  text-decoration: none;
}
.linker {
  text-decoration: none;
}
.section{
  height: 100vh;
  margin: 0px;
  padding: 0px;
}



@media only screen and (max-width: 1000px) {
  .section {
    height: 100vh;
  }
}
 

ul {
  list-style: none;
  padding-left: 0;
  
}

.container {
  height: 100vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  
}
.container2{
  height: 100vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  
}

@media (orientation: portrait) {
  .container{
    flex-direction: column-reverse;
  }
}


.darkcontentbck {
  background-color: #292929;
  padding-bottom: 2rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.lightcontentbck {
  background-color: #E0E0E0;
  padding-bottom: 2rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}



#logopic {
  max-width: 40rem;
  margin-right: 2rem;
}

#logo{
  max-width: 30rem;
}

#bulb {
  max-width: 40rem;


}
#topbar {
  position: absolute;
  bottom: 2rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 98vw;
  z-index: 1111;
}

@media (orientation: portrait) {
  #topbar{
    display: none;
  }
}
.category {
  background-color: #102A83;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  border: #FFEC00;
  border-style: solid;
  text-align: center;
}
.catname {
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  color: #FFEC00;
  margin: 0.1rem;
  
}
.catborder {
  align-self: center;
}
.catlink {
  text-decoration: none;
}


#lakas{
  max-width: 50rem;
  text-align: center;
  opacity: 1;
}
#lakasautomatika{
  background-color: #343434;
}

#varivill{
  background-image: url(../src/img/cross3.png);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  
  background-color: #ECECEC;
}
.keret{
cursor: pointer;
max-width: 14rem;
}

.submenu{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.itemsmain{
  border-style: solid;
  border-color: #102A83;
  transition: 1s;
}
.itemsmain2{
  border-style: solid;
  border-color: #102A83;
  transition: 1s;
}

.itemsmain:hover{
  background-color: #FFEC00;
        box-shadow:
                1px 1px #FFEC00,
                2px 2px #FFEC00,
                3px 3px #FFEC00;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);


}
.itemsmain2:hover{
  background-color: #FFEC00;
        box-shadow:
                1px 1px #FFEC00,
                2px 2px #FFEC00,
                3px 3px #FFEC00;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);


}

.items{
  border-style: solid;
  border-color: #102A83;
  background-color: #FFEC00;
  transition: 1s;
}


.itemsdark{
  border-style: solid;
  border-color: white;
  background-color: #102A83;
  transition: 1s;
}
.menuitems{
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  color: #102A83;
}

.menuitems2{
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  color: #102A83;
}

@media (orientation: portrait) {
  .menuitems{
    font-size: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.menuitemsdark{
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  color: white;
  
}


@media (orientation: portrait) {
  .menuitemsdark{
    font-size: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.items:hover{
  background-color: #f52b2b;
        box-shadow:
                1px 1px #f52b2bc7,
                2px 2px #f52b2bc7,
                3px 3px #f52b2bc7;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);


}


.itemsdark:hover{
  background-color: #f52b2b;
        box-shadow:
                1px 1px #f52b2bc7,
                2px 2px #f52b2bc7,
                3px 3px #f52b2bc7 ;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);


}

.linklogo{
  position: absolute;
  margin-top: 2rem;
  margin-left: 2rem;
  max-width: 5rem;
  z-index: 11;
}


.linklogo2{
  position: absolute;
  margin-top: 2rem;
  margin-left: 94%;
  max-width: 5rem;
  z-index: 11;
}

#bulber{
  max-width: 50rem;
  overflow: hidden;
  flex-shrink: 3;
  
}






.villanytitle{
  font-size: 3rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  color: #102A83;
}

@media (orientation: portrait) {
 .villanytitle{
    font-size: 5rem;
  }
}

.villanytitledark{
  font-size: 3rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  color: white;
  
}

@media (orientation: portrait) {
  .villanytitledark{
     font-size: 5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 60rem;
   }
 }
.villanydiscdark{
  font-size: 1.5rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  padding-bottom: 1rem;
  color: #FFEC00;
  max-width: 40rem;
  border-bottom: 5px solid #102A83;
  border-radius: 5px;
  
  
}


@media (orientation: portrait) {
  .villanydiscdark{
     font-size: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 60rem;

   }
 }
.villanydiscdarkdesc{
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  padding-top: 1rem;
  color: white;
  max-width: 40rem;
}

@media (orientation: portrait) {
  .villanydiscdarkdesc{
     font-size: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 60rem;

   }
 }

.villanydisc{
  font-size: 1.5rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
  padding-bottom: 1rem;
  color: #102A83;
  max-width: 40rem;
  border-bottom: 5px solid #FFEC00;
  border-radius: 5px;
}

@media (orientation: portrait) {
  .villanydisc{
     font-size: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 60rem;

   }
 }

.villanydiscdesc{
  font-size: 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 2.6rem;
  padding-right: 2.6rem;  
  padding-top: 1rem;
  color: #102A83;
  max-width: 40rem;
}

@media (orientation: portrait) {
  .villanydiscdesc{
     font-size: 2rem;
     padding-left: 1rem;
     padding-right: 1rem;
     max-width: 60rem;

   }
 }

#kazan{
  max-width: 50rem;
  max-height: 80rem;
  flex-shrink: 3;
}

#markol{
  max-width: 40rem;
  flex-shrink: 3;
}

#multicar{
  max-width: 50rem;
  flex-shrink: 3;
}

#epuletgepeszet{
  background-color: #ECECEC;
}

#markolo{
  background-color: #ECECEC;
}

#informatika{
  background-color: #ECECEC;
}
#villanyszereles{
  background-color: #343434;
  
}

.menubutton{
  margin-top: 1rem;
  padding-left: 2.6rem;
  max-width: 18.2rem;
}

@media (orientation: portrait) {
  .menubutton{
    max-width: 40rem;
  }
}
#kosaras{
  background-color: #343434;
}

#infor{
  max-width: 40rem;
  max-height: 70rem;
}

.footerpage{
  display: flex;
  flex-direction: column;
  

  
}
ul {
  list-style: none;
  padding-left: 0;
  
}

#varivillcontactlogo{
  max-width: 25rem;
}

#ginopvv{
  max-width: 35rem;
}
footer {
  box-shadow: 0 -10px 30px 0 rgba(5, 35, 37, 0.16);
  background-color: white;
  line-height: 1.5;
}
li{
  font-family: 'Tomorrow', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  color: #163f41;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
.ft-title {
  font-family: 'Tomorrow', sans-serif;
  font-size: 3rem;
  font-weight: normal;
  text-transform: uppercase;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  color: #102A83;
}
.ft-main {
  padding: 1.25rem 1.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

}

.ft-main-item {
  padding: 1.25rem;
  min-width: 12.5rem /*200px*/;
}

.ft-legal {
  border-top: 1px #E5E5E5 solid; 
  padding: 0.9375rem 1.875rem;
  background-color: white;
  
}
.ft-legal-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.ft-legal-list li {
  margin: 0.125rem 0.625rem;
  white-space: nowrap;
  
}
.linker{
  align-self: flex-end;
}
.reference{
  max-height: 55px;
}

.ft-legal-list li:nth-last-child(5) {
  flex: 2;       
}



@media only screen and (max-width: 1000px) {
  #bulb {
    display: none;
  }
  #bulber {
    display: none;
  }
  #kazan {
    display: none;
  }
  #multicar {
    display: none;
  }
  #markol {
    display: none;
  }
  #lakas {
    display: none;
  }
  #infor {
    display: none;
  }
  .linklogo {
    display: none;
  }
  .linklogo2 {
    display: none;
  }

  .submenu{
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    margin-top: 12rem;
  }

  .itemsmain2{
    margin-top: 8rem;
    border-style: solid;
    border-width: 0.4rem;
  }
  .menuitems2{
    font-size: 4rem;
    font-family: 'Tomorrow', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 5;
    padding-right: 5rem;
    color: #102A83;
  }

  #logo{
    max-width: 40rem;
    overflow: hidden;
  }

  .container2{
    height: 100vh;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  #villanyszereles{
    background-color: #343434;
    background-image: url(../src/mixlight.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  #epuletgepeszet{
    background-color: #ECECEC;
    background-image: url(../src/mixlight2.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  #markolo{
    background-color: #ECECEC;
    background-image: url(../src/mixlight2.png);
    background-size: 92%;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  
  #informatika{
    background-color: #ECECEC;
    background-image: url(../src/mixlight2.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  #lakasautomatika{
    background-color: #343434;
    background-image: url(../src/mixlight.png);
    background-size: cover;
    background-repeat: no-repeat;
    }
  #kosaras{
    background-color: #343434;
    background-image: url(../src/mixlight.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  #varivill{
    background-image: url(../src/main4.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #ECECEC;
    background-position: top ;
  }
}