/*************************************************************************************************************************

*** Alapok

*************************************************************************************************************************/

:root {

  --szin1: #1d1d1d; /* szürke */

  --szin2: #ce0000; /* piros */

  --szin3: #92804e; /* sárga átmenet */

  --szin4: #eeeeee; /* fehér */

  --szin5: #3b3b3b; /* fehér2 */

  --szin6: rgba(0,0,0, 0.8);



  --szin7: #fff; /* fehér2 */



  --szin8: #1e1e1e;

  --szin9: #646464;

  --szin10: #888888;

}



body {

  min-width: 320px;

  font-family: 'Roboto', sans-serif; 

}



/*************************************************************************************************************************

*** Felső menü

*************************************************************************************************************************/

.topmenu {

  background-color: #000!important; /*var(--szin7)!important;*/



  -webkit-box-shadow: 0px 0px 7px -1px #000000; 

  box-shadow: 0px 0px 7px -1px #000000;



  padding-top: 3px;

  padding-bottom: 3px;

}



.topmenu .navbar-brand img {

  margin-top:-6px;

}



.topmenu .nav-item {

  padding-right: 1.5rem;

  padding-left: 1.5rem;



}



.topmenu .nav-link {

  color: var(--szin1)!important;



  font-weight: 700;

}



.topmenu .cart {

  width:130px;

  float:right;

}

.topmenu .cart .nav-link {

  display:inline;

  font-weight: 700!important;

  color:#fff!important;

}

.topmenu .cart .icon {

  position:absolute;

}

.topmenu .cart .icon .counter {

  position: relative;

  top: -10px;

  right: 72px;

  background-color: var(--szin2);

  color: rgb(255, 255, 255);

  border-radius: 11px;

  visibility: visible;

  padding: 2px 4px;

  font-size: 8px;  

}



.topmenu input[name=mit] {

  width:calc(100% - 77px - 150px - 8px);

}



@media (max-width: 991px) {

  .topmenu {

    display:none;

  }

}



#main_nav:focus {

  outline:0;

  box-shadow:none;

}

#main_nav .navbar-toggler:focus {

  outline:0;

  box-shadow:none;

}



/*************************************************************************************************************************

*** Középső menü

*************************************************************************************************************************/

.middlemenu {

  /*background-color: var(--szin1)!important;*/



  padding:0px;

  margin:0px;



  margin-top:-40px;

  z-index:1000;


  max-height: 100vh;
  /*overflow: auto;*/



}



@media (max-width: 991px) {

  .middlemenu {

    background-color:#000;

  }

  .navbar-toggler span {

	  color:#fff;

	}

	.navbar-light .navbar-toggler-icon {

    	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

	}

}



.middlemenu .collapse {

  background-color:#000000;

}



.middlemenu .nav-item {

  padding-right: 1rem;

  padding-left: 1rem;



}



.middlemenu .nav-link {

  color: var(--szin4)!important;



  font-weight: 700;

}



.middlemenu .cart {

  

}

.middlemenu .cart .icon {

  position:absolute;

}

.middlemenu .cart .icon .counter {

  position: relative;

  top: -27px;

  right: -50px;

  background-color: red;

  color: rgb(255, 255, 255);

  border-radius: 11px;

  visibility: visible;

  padding: 2px 4px;

  font-size: 8px;  

}



/*************************************************************************************************************************

*** Slider

*************************************************************************************************************************/

.carousel .carousel-item {

  height: 45vh;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

}

/*.carousel-item .hatter {

    position: absolute;

    object-fit:cover;

    top: 0;

    left: 0;

    min-height: 50vh;

}*/

#c1 {

  position:absolute;

  top:10%;

  left:20%;

  z-index:9999;



  font-size:32px;

}

#c2 {

  position:absolute;

  top:18%;

  left:20%;

  z-index:9999;



  font-size:32px;

}

#c3 {

  position:absolute;

  top:20%;

  right:20%;

  z-index:9999;



  width:10%;

}

#c3 span {

  background: blue url('https://picsum.photos/id/1015/200/300');

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

  

  font-weight:900;

  font-size: 90px;

  line-height:1;



  

}



.typing-wrapper {

  height: 10vh;

  /*This part is important for centering*/

  display: flex;

  align-items: center;

  justify-content: center;

}



.typing-demo {

  width: 22ch;

  animation: typing 4s steps(22), blink .5s step-end infinite alternate;

  white-space: nowrap;

  overflow: hidden;

  border-right: 3px solid;

  font-family: monospace;

  font-size: 2em;

  color:#fff;

  text-shadow: 2px 2px #ff0000;

}

@keyframes typing {

  from {

    width: 0

  }

}

@keyframes blink {

  50% {

    border-color: transparent

  }

}



/*************************************************************************************************************************

*** Termékdoboz

*************************************************************************************************************************/

.termekdoboz {



}

.termekdoboz .termekhatter {

  background-size:contain;

  background-position: center center;

  background-repeat:no-repeat;

}

.termekdoboz .termekkep {

  height:350px;

  background-size:contain;

  background-position: center center;

  background-repeat:no-repeat;

 

}  

.termekdoboz .name {

  border-bottom: 2px solid var(--szin4);

  font-size:17px;

  font-weight:900;

  text-align: center;

  margin-bottom:10px;

  height:50px;

}

.termekdoboz:hover .name {

  border-bottom: 2px solid var(--szin2);

}

.termekdoboz .name .cut {

  /* név levágása 2-3 sorra */

}



.termekdoboz .intro {

  /* .... */

  display:none;

  

}

.termekdoboz .intro .cut {

  /* név levágása 2-3 sorra */

}



.termekdoboz .name .cut span {

  /* Cikkszám a név mellett */

  font-size:10px; color:#ccc;

}



.termekdoboz select[name='v1'] {

  border: 1px solid #8d8d8d;

  width:69%;

  float: left;

  font-size: 13px;

}

.termekdoboz .v1_desc {

  display:block;

  font-size:13px;

  font-weight:700;

}

.termekdoboz select[name='v2'] {

  border: 1px solid #8d8d8d;

  width:29%;

  float: right;

  font-size: 13px;

}

.termekdoboz .v2_desc {

  position: absolute;

  margin-top: -19px;

  margin-left: 6px;

  font-size:13px;

  font-weight:700;

}

.termekdoboz select[name='v3'] {

  border: 1px solid #8d8d8d;

  width:100%;

  float: right;

  font-size: 13px;

}

.termekdoboz .v3_desc {

  font-size:13px;

  font-weight:700;



}



.termekdoboz textarea[name='v4'] {

  border: 1px solid #8d8d8d;

  width:100%;

  float: right;

  font-size: 13px;

}

.termekdoboz .v4_desc {

  display:block;

  font-size:13px;

  font-weight:700;

}



.termekdoboz .mennyiseg {

  color: #404040;

  font-weight: 900;

  text-align: center;

}



.termekdoboz select[name='qty'] {

  border: 1px solid #8d8d8d;

  /*width:100%;*/

  display:inline-block;

  

  font-size: 13px;

}



.termekdoboz .ar {

  color: #404040;

  font-weight: 900;

  text-align: center;

}

.termekdoboz .ar .price {

  color:var(--szin2);

}

.termekdoboz .ar .currency {

  color:var(--szin2);

}

.termekdoboz .ar .vat {

  font-size: 10px;

  font-weight: normal;

}

.termekdoboz .ar .contentsize {

  

}



.termekdoboz .adatlap {

  border:0px;

  background-color:var(--szin5);

  color:#fff;

  font-size:15px;

  width:49%;

  float:left;

  height:30px;

}

.termekdoboz .adatlap img {

  float:left;

  width: 15px;

  margin-top: 4px;

}

.termekdoboz .kosarba {

  border:0px;

  background-color:var(--szin2);

  color:#fff;

  font-size:15px;

  width:49%;

  float:right;

  height:30px;

}

.termekdoboz .kosarba img {

  float:left;

  width: 22px;

}



.termekdoboz .delete {

  border:0px;

  background-color:var(--szin5);

  color:#fff;

  font-size:15px;

  width:49%;

  float:right;

  height:30px;

}



@media (max-width: 1401px) {

  .termekdoboz .adatlap {

    font-size:12px;

  }

  .termekdoboz .kosarba {

    font-size:12px;

  }

  .termekdoboz .delete {

    font-size:12px;

  }

}

@media (min-width: 991px) and (max-width: 1201px) {

  .termekdoboz .adatlap {

    font-size:9px;

  }

  .termekdoboz .kosarba {

    font-size:9px;

  }

  .termekdoboz .delete {

    font-size:9px;

  }

}



/*************************************************************************************************************************

*** pagination2

*************************************************************************************************************************/

.pagination2 {

  background-color: var(--szin4);

  margin: 0px;

  text-align: center;

  display: block;

  

  /*padding-top: 4px;

  padding-bottom: 4px;*/

  margin-bottom:15px;

}

.pagination2 .item {

  padding:5px 9px;

  

  font-size:13px;

  font-family: 'Roboto Condensed', sans-serif;

  font-weight:700;

}

.pagination2 .item a {

  color: var(--szin1);

  text-decoration: none;

}

.pagination2 .cur {

  background-color:var(--szin2);

  color: var(--szin4);

}

.pagination2 .next {

  float: right;

  margin-top: -4px;

}

.pagination2 .last {

  float: right;

  margin-top: -4px;

}

.pagination2 .prev {

  float: left;

  margin-top: -4px;

}

.pagination2 .first {

  float: left;

  margin-top: -4px;

}





.kategoriaszukito {

  font-size:12px;

  font-weight:700;

  margin-bottom:8px;

}

.kategoriaszukito select {

  padding:3px;

}

.kategoriaszukito .oldalankent {

  margin-left:8px;

}



.kategorianev {

  font-size:28px;

  font-weight:700;



  border-bottom: 4px solid var(--szin4);

}



/*************************************************************************************************************************

*** adatlap

*************************************************************************************************************************/

.adatlap {

  

}

.adatlap .termekhatter {

  width:100%;

  height:400px;

  background-size:contain;

  background-position: center center;

  background-repeat:no-repeat;



  cursor:pointer;

}

.adatlap .termekkep {

  width:100%;

  height:400px;

  background-size:contain;

  background-position: center center;

  background-repeat:no-repeat;

}  

.adatlap .name {

  border-bottom: 4px solid var(--szin4);

  font-size:20px;

  font-weight:900;

  padding-left:0px;

}

.adatlap .name .cut {

  /* név levágása 2-3 sorra */

}



.adatlap .intro {

  /* .... */

}

.adatlap .intro .cut {

  /* név levágása 2-3 sorra */

}



.adatlap .name .cut span {

  /* Cikkszám a név mellett */

  font-size:10px; color:#ccc;

}



.adatlap select[name='v1'] {

  border: 1px solid #8d8d8d;

  width:69%;

  float: left;

}

.adatlap .v1_desc {

  display:block;

  font-weight: 700;

}

.adatlap select[name='v2'] {

  border: 1px solid #8d8d8d;

  width:29%;

  float: right;

}

.adatlap .v2_desc {

  position: absolute;

  margin-top: -24px;

  margin-left: 8px;

  font-weight: 700;

}

.adatlap select[name='v3'] {

  border: 1px solid #8d8d8d;

  width: 100%;

  float: right;

}

.adatlap .v3_desc {

  font-weight: 700;

}



.adatlap textarea[name='v4'] {

  border: 1px solid #8d8d8d;

  width:100%;

  float: right;

  font-size: 13px;

}

.adatlap .v4_desc {

  clear:both;

  display:block;

  font-size:16px;

  font-weight:700;

  margin-top:5px;

}



.adatlap .ar {

  color: #404040;

  font-weight: 900;

  font-size:18px;

}

.adatlap .ar .price {

  color: var(--szin2);

}

.adatlap .ar .currency {

  color: var(--szin2);

}

.adatlap .ar .vat {

  font-size: 10px;

  font-weight: normal;

}

.adatlap .ar .contentsize {

  

}



/*************************************************************************************************************************

*** kosár

*************************************************************************************************************************/

.kosar {

  

}

.kosar .kosarfelirat {

  border-bottom: 4px solid var(--szin4);

  font-size:20px;

  font-weight:700;

}

.kosar .rendelesadatfelirat {

  border-bottom: 10px solid var(--szin4);

  font-size:20px;

  font-weight:700;

}

.kosar .adatmezok {

  padding-left:0px;

  padding-right:0px;

}



.kosar .adatmezok label {

  display:block;

  width:100%;

  font-size: 12px;

  font-weight: 900;

  margin-top:10px;

}



.kosar .adatmezok input {

  display:block;

  width:100%;



  font-size: 14px;

}

.kosar .adatmezok select {

  display:block;

  width:100%;

  padding:0px;

  padding-left:2px;

  font-size: 14px;



  height:27px;

}

.kosar .adatmezok textarea {

  display:block;

  width:100%;



  font-size: 14px;



  border: 1px solid rgb(118, 118, 118);

}



.kosar #sendorder {

  font-size: 18px;

  font-weight: 900;

  color: var(--szin1);

  background-color: var(--szin2);

  border:0px;



  padding:10px 30px;

}

.kosar #sendorder:hover {

  color: var(--szin10);

  background-color: var(--szin8);

}



/*************************************************************************************************************************

*** Selejtezni

*************************************************************************************************************************/

.hh1 {

  color: var(--szin1);

  font-size:32px;

  font-weight:900;



  border-bottom:1px solid var(--szin1);



  display: inline-block; /* mert a first-letter csak blokk elemekre működik */

}

.hh1::first-letter {

  color: var(--szin2);

}

.hh2 {

  color: var(--szin1);

  font-size:16px;

}





/*.topmenu .nav-link.active {



}

.topmenu .hoveractive {

  

}*/

/*

.topmenu .nav-link:hover::before {

  content: "";

  float: left;

  width: 8px;

  height: 31px;

  background-image: url('images/menu_kijelolo_bal.jpg');

  background-size: 100% 100%;



  margin-left: -25px;

  margin-top: -4px;

} 

.topmenu .nav-link:hover::after {

  content: "";

  float: right;

  width: 8px;

  height: 31px;

  background-image: url('images/menu_kijelolo_jobb.jpg');

  background-size: 100% 100%;



  margin-right: -25px;

  margin-top: -4px;

} 

*/





/*

.topmenu .navbar-brand {

  margin:0px;

  padding:0px;

  margin-top:-.5rem;

  margin-bottom:-.5rem;

}



@media (max-width: 575px) { .topmenu .navbar-brand { margin-left: -.75rem; } }

@media (max-width: 991px) { .topmenu .nav-item:first-of-type { margin-top:1rem; } }







.navbar_cover {

  position:absolute;

  top:0px;

  left:0px;

  height:56px;

  background-color: var(--szin1);

}

@media (max-width: 575px) { .navbar_cover { display: none; } }

@media (min-width: 576px) { .navbar_cover { width:calc((100% - 540px + 26px) /2); } }

@media (min-width: 768px) { .navbar_cover { width:calc((100% - 720px + 26px) /2); } }

@media (min-width: 992px) { .navbar_cover { width:calc((100% - 960px + 26px) /2); } }

@media (min-width: 1200px) { .navbar_cover { width:calc((100% - 1140px + 26px) /2); } }

@media (min-width: 1400px) { .navbar_cover { width:calc((100% - 1320px + 26px) /2); } }









.lablec {

  width:100%;

  background-image:url('images/lablec_hatter.webp');

  background-position:center center;

  background-size:cover;



  color: var(--szin4);

}

.lablec .logo {

  margin-top:30px;

}

.lablec .gyorsmenu {

  margin-top:30px;

}

.lablec .cimsor {

  border-bottom:1px solid var(--szin5);

  font-size:18px;

  padding-bottom:5px;

  margin-bottom:10px;

}

.lablec .gyorsmenu a {

  display:block;

  text-decoration:none;

  color: var(--szin4);

  padding-bottom:4px;

}

.lablec .gyorsmenu a:hover {

  color: var(--szin2);

}

.lablec .elerhetoseg {

  margin-top:30px;

}

*/