:root {

  --nav-background: rgba(0,0,0,0.8);
  --nav-text: #fff;
  --nav-hover-background: #dc2b19;
  --banner-height: 650px;

}



html {

  scroll-behavior: smooth;



}



body {

    font-size: 15px;

    background-color: #fff;

    /*background-image: url(hatter.jpg); 

    background-attachment: fixed;

    background-size: 100% 100%;*/

    

}



h3 {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 70%;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    letter-spacing: 5px;
    color:#333;
}

h3 span {
    border-left: solid 1px #ccc;
    height: 40px;
    width: 1px;
    display: block;
    margin:30px 50%;
    
}

h4 {
    width: 100%;
    padding: 40px 10px 40px 10px;
    margin: 0;
    font-size: 160%;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    color:#333;
}

h1 {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 300%;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    letter-spacing: 10px;
    color:#000;
}

h2 {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 100%;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    line-height: 25px;
    color:#333;
}

.csik_fekete {
    margin: 10px 0;
    padding: 10px 0 10px 20px;
    width: 100%;
    background-color: #333;
    color:#fff;
}

.keret {
    width: 100%;
    overflow: hidden;
    position:absolute;
    top:0;
    left: 0;
}



.slider {
 mask-image: url(keret.svg);
 mask-size: 1920px;
 mask-repeat: no-repeat;
 mask-position: top left;    
 -webkit-mask-image: url(keret.svg); /*Webkit*/
 -webkit-mask-position:top left;
 -webkit-mask-size: 1920px;
 -webkit-mask-repeat:no-repeat;
 z-index: 10;
 position: relative;

}



.banner_takaro {
  display: block;
  width: 1920px;
  height: 650px;
  background: url(keret2.svg);
  background-repeat:no-repeat;
  background-position: top left; 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19;
}



.tartalom {
    padding: 0;
    background-color: #fff;
    width: 70%;
    margin: 0 15%;
    min-height: 1px;

}


.googlemapsbox { }


.foglalobox {

    width: 100%;

    min-height: 1px;

    border-bottom: solid 5px red;

    padding-top: 40px;

    padding-bottom: 40px;

}



.foglalobox ul {

    padding: 0;

    margin: 0;

    list-style: none;  

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    justify-items: stretch;

    align-items: stretch;

    column-gap: 20px;

    row-gap: 20px;

}



.foglalobox ul li {

    

  border: solid 1px #ccc;

  text-align: center;

  box-sizing: border-box;

  padding: 0;

  overflow: hidden;

}



.foglalobox ul li.piros { background-color: red;}

.foglalobox ul li.piros h2, .foglalobox ul li.piros h3 {color:#fff;}

.foglalobox ul li.piros a:hover {background-color: #000;}



.foglalobox ul li.kek { background-color: #395c9a;}

.foglalobox ul li.kek h2, .foglalobox ul li.kek h3 {color:#fff;}

.foglalobox ul li.kek a:hover {background-color: #395c9a;}



.foglalobox ul li.alap_kek { background-color: #A8D0F0;}

.foglalobox ul li.alap_kek a:hover {background-color: #A8D0F0;}



.foglalobox ul li.alap_sarga { background-color: #FFF4AD;}

.foglalobox ul li.alap_sarga a:hover {background-color: #FFF4AD;}



.foglalobox ul li.alap_zold { background-color: #9DFBC7;}

.foglalobox ul li.alap_zold a:hover {background-color: #9DFBC7;}



.foglalobox ul li a { 

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    width: 100%;

    height: 100%;    

    padding: 30px;

    transition: 0.5s;

}



.foglalobox ul li a:hover {

    background-color: #e1e1e1;

    scale: 1.2;

}



.foglalobox ul li h2 {

    font-size: 170%;

    padding: 0 0 0 0;

    margin: 0;

    width: 100%;

    text-transform: uppercase;

    color:#395c9a;

    letter-spacing: -1px;

 

}



.foglalobox ul li h3 {

    font-size: 100%;

    padding:4px 0 0 0;

    letter-spacing: 0;   

    margin: 0;

    width: 100%;

    text-transform: uppercase;

}

/* időpontfoglaló naptár */



.foglalobox2 ul.naptar {
    padding: 0;
    margin: 0;
    list-style: none;  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: stretch;
    column-gap: 0px;
    row-gap: 0px;
    border-top: solid 5px #333;
    border-bottom: solid 10px #333;
  
}



.foglalobox2 ul.naptar li {

  

  text-align: center;

  box-sizing: border-box;

  padding: 0;

  width: 100%;

}



.foglalobox2 ul.naptar li:last-child {border:none;}



.foglalobox2 ul.naptar li .napok {

    width: 100%;

    display: block;

    padding: 10px;

    margin-bottom: 2px;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 90%;



}



.foglalobox2 ul.naptar li .napok span {

    font-size: 80%;

    border-top: solid 1px #ccc;

    width: 100%;

    display: block;

    margin-top: 5px;

    padding-top: 5px;

    text-transform:lowercase;

    

    

    

}



.foglalobox2 ul.naptar li .idopont {

    width: 100%;

    display: block;

    padding: 2px 0;

}



.foglalobox2 ul.naptar li .idopont:hover {

   /* background-color:  rgba(57,92,154,0.50);*/

    

}



.foglalobox2 ul.naptar li .idopont a {

    width: calc(100% -6px);

    height: 50px;

    display: block;

    padding: 0 10px;

    margin: 5px;

    line-height: 50px;

    text-align:center;

    color:#000;

   /* background-color:rgba(0,0,0,0.05);*/
    background-color: lightgreen;
    

    font-size: 110%;

    transition: 0.5s;

    cursor: pointer;

}



.foglalobox2 ul.naptar li .idopont a:hover.active {

    background-color:rgba(57,92,154,1);
    

    color:#fff;

 

    font-size: 150%;



}



.ipnbox {

    width: 100%;

    height:100%;    

    display: flex;

    justify-content: center;

    align-content: center;

    align-items: center;

}



.ipnincs {

    width: 60px;

    height: 60px;



    

}



.ipnincs img {

    width: 100%;

    height: 100%;

    float: left;

    

}



.navigacio {

    width: 100%;

   

    display: flex;

    justify-content:space-between;

    align-items: center;

    min-height: 50px;

    padding: 10px 0;

    font-size: 140%;

}



.navigacio .nav1 {

    text-align: center;

}



.navigacio .nav1 a {

    color:#666;

    transition: 0.5s;

    font-size: 160%;

    padding: 10px;



}



.navigacio .nav1 a:hover {

    color:#fff;

    background-color: #333;

}





.urlap {

    width: 70%;

    margin: 40px 15%;

    padding: 10px 20px;



}



.urlap h2 {

    letter-spacing: 4px;

    font-size: 170%;

    color: #395c9a;

} 



.urlap h3 {

    padding: 0;

    margin: 0;

    margin-bottom: 20px;

    padding-bottom: 20px;

}



.urlap input, textarea {

    border:none;

    border: solid 1px #ccc;



  

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    font-size: 110%;

    transition: 0.5s;

    scale:1;



}





.ffoglalas {

    width: 100%;

    margin-top: 10px;

}



.ffoglalas ul.inputbox2 {

    padding: 0;

    margin: 0;

    list-style: none;  

    display: grid;

    grid-template-columns: 1fr 1fr;

    justify-items: center;

    align-items: stretch;

    column-gap:10px;

    row-gap: 10px;



}



.ffoglalas ul.inputbox2 li {

    width: 100%;

    height: 100px;

    border: solid 1px #ccc;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 0;

    overflow: hidden;

}

.ffoglalas ul.inputbox2 li .ib2kep {

    width: 80px;

    height: 80px;

    float: left;

    padding:10px;

    border-right: solid 1px #ccc;

    margin-right: 10px;

    display: flex;

    align-items: center;

    

}



.ffoglalas ul.inputbox2 li .ib2kep img {

    width: 100%;

    height: auto;

    float: left;

}

.ffoglalas ul.inputbox2 li .ib2_idopont {

    font-size: 160%;

    width: 100%;

    color:#395c9a;

}

.ffoglalas ul.inputbox2 li .ib2_idopont .ib2_text {

    font-size: 60%;

    margin-top: 5px;

    color:#000;

}



.ffoglalas ul.inputbox2 li .ib2_idopont select {

    border: solid 1px #ccc;

    background-color: #fff;

    font-size: 70%;

    padding: 10px;

    color:#395c9a;

}





.ffoglalas ul.inputbox2 li input.ifm_kapcsolo {

    background-color: #333;

    width: 100%;

    height: 100%;

    border: none;

    color:#fff;

    text-align: center;

    font-size: 170%;

    transition: 0.5s;

    scale:1;

    cursor: pointer;

}



.ffoglalas ul.inputbox2 li input.ifm_kapcsolo:hover {

    background-color: #395c9a;    

    scale:1.2;

    

}



.urlap input:hover, input:focus, textarea:hover, textarea:focus {

    background-color: #f1f1f1;

    outline: none;

    scale:1;

    border: solid 1px #ccc;

    



}





.urlap button {

    border: none;

    padding: 10px;

    border-right: solid 1px #ccc;

    background-color: #fff;

    color:#333;

    text-transform: uppercase;

    transition: 0.5s;

    cursor: pointer;

    margin-top: 15px;

}



.urlap button:hover {

    background-color: #000;

    color:#fff;

}



.inputbox {

    width: 100%;

    display: flex;

    justify-content: center; 

    align-items: center;

    padding: 0;

    margin: 0;

}



.ipb_belso {

    width: 400px;

    border: solid 1px #ccc;

    padding: 20px 10px;

}



.ipb_belso h3 {

    font-size: 200%;

    padding: 0;

    margin: 0 0 20px 0;

    font-weight: bold;

    letter-spacing: 1;

    color:red;

    

}



.ipb_belso h4 {

    width: 100%;

    padding: 0;

    margin: 0;

    font-size: 100%;

    

    

}





.ipb_belso input {

    width: 80%;

    margin: 10px 10%;

    padding: 10px;

    border: solid 1px #ccc;

    font-size: 100%;

    

}



.menutakaro {

    width: 100%;

    min-height: 70px;

    background-color: #000;

    position:fixed;

    z-index: 3;

    top:0;

    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.6);



    

    

}







.f-tartalom {

    width: 70%;

    padding: 30px;

    margin: 20px 15% 0 15%;

    color:#e1e1e1;

    background-color: #333;

    position: relative;

    border:solid 1px #666;  

}



.l-tartalom {

    width: 100%;

    padding: 0 0 20px 0;

    margin: 20px 0;

    color:#333;

    border-bottom:solid 1px #e1e1e1; 

    line-height: 25px;

}



.l-tartalom p {

    margin: 20px 0;

    

}



.l-tartalom h2 {

    width: 100%;

    font-size: 120%;

    text-align: left;

    padding: 0;

    margin: 10px 0;

    font-weight: bold;

    text-transform: uppercase;

    border-bottom: solid 1px #ccc;

}



.l-tartalom h3 {

    width: 100%;

    font-size: 110%;

    text-align: left;

    padding: 0;

    margin: 20px 0;

    font-weight: bold;

     letter-spacing: 0;

}



.l-tartalom ul {

    padding: 0 40px;

    

}



.vonal {

    width: 100%;

    margin-top: 70px;

    border-bottom: solid 1px #666;

    position: absolute;

    margin-left: -15%;

    

}





.egyebbox {

    width: calc(100% - 60px);

    margin: 30px 30px 20px 30px;

    justify-content: center;

    align-content: center;

    display: flex;

    

}

.egyebbox a {

    border: solid 1px #666;

    padding: 10px 15px;

    color:#666;

    text-transform: uppercase;

    font-size: 80%;

}

.egyebbox a:hover {

    border: solid 1px #000;

    background-color: #000;

    color:#fff;

    

}



.uressor {

    width: 90%;

    margin: 0 5% 10px 5%;

    border-top:solid 1px #ccc;

    height: 1px;

 

    

}



/* sajat ikonok */

ik {display: block; width: 80px; margin: 0 0 10px 0;}

ik img {width:100%; height:auto;}



/* sajat ikonok eddig */



@media screen and (max-width: 1250px){ 
    h1 {font-size: 230%;}
    h1, h2, h3 {
        letter-spacing: 0 !important;
        line-height: normal !important;
        width: 100%;
        text-align: center;
        
    }
    
    .urlap {
        width: 100%;
        margin: 40px 0;
        padding: 10px 0;
    }

    .slider {mask:none;-webkit-mask:none; margin: 0px 0 20px 0;}
    .container {
        background-size: auto 700px !important;
        background-position: center;
        background-repeat: no-repeat; 
        height:300px !important;
        
    }
    .swiper-pagination {display: none;}
    .slider {max-height: 300px;}
    
    .lablec {
        padding: 0 10% !important;
        margin: 0 !important;
        width: 90%;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .lablec .felso {
        margin: 0 !important;
        width: 100% !important;
    }
    
.lablec .felso ul {
    display:block !important;
    
}
    
    .lablec .felso ul li {
        padding: 0;
        margin: 0;
        border: none !important;
        text-align: center !important;
        width: 100% !important;
        float: left;
        border-bottom: solid 1px #333 !important;
    }
    
    .lablec .felso ul li:last-child {border:none!important;}
    
    .lablec .felso ul li h3 {
        text-align: center !important;
        float: left;
        width: 100%;
         border: none !important;
        
    }
    
    .also {
        padding: 10px 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
.foglalobox2 ul.naptar {
    padding: 0;
    margin: 0;
    list-style: none;  
    display: grid;
    grid-template-columns: 1fr !important;
    justify-items: center;
    align-items: stretch;
    column-gap: 0px;
    row-gap: 0px;
    border-top: solid 5px #333;
    border-bottom: solid 10px #333;
  
}
    ul.naptar li {display: none !important;}
    ul.naptar li:first-child {display: block !important;}
    
    
    
    .also-bal {display:none !important;}
   
    .tartalom { top:0px; padding-top: 0;}

    .banner_takaro {display: none;}

    

    .foglalobox ul, 

    .ffoglalas ul.inputbox2 { grid-template-columns: 1fr; } /* idopontot lefoglalom */



    

.f-tartalom {

  width: 100%;

  margin: 20px 0 0 0;

    text-align: center;

    padding: 20px;



}

    

.uzenobox .ub1 {
  margin: 20px 0 !important;
}

.uzenobox .ub1 a {
  width: calc(100% - 4px) !important;
  font-size: 80%;
  padding: 10px;
  display: block;
  margin: 10px 2px 0 2px !important;
  color: #fff;
  background-color: #333;
  transition: 0.5s;
  text-transform: uppercase;
  float: none;
}

    

}

.socialbox {

    width: 100%; 

    padding: 0 0 6px 0;

    border-bottom: solid 1px #e1e1e1;

}



.socialbox ul {

    padding: 0;

    margin: 0;

    list-style: none;

    display: flex;

    justify-content: space-between;

}



.socialbox ul li {

    font-size: 80%;

    margin: 0;

    text-transform: uppercase;

     border: none;

    letter-spacing: 1px;

}



.socialbox ul .sjobb {

display: flex;

justify-content: flex-end;

}



.socialbox ul .sjobb li {

     border-right: solid 1px #ccc;

}

.socialbox ul li.sbal  {

    display: flex;

    align-items: center;





}







.socialbox ul li.ikon {

    font-size: 150%;

    margin: 0;

    padding: 0;

}



.socialbox ul li a { 

    color:#666;

    min-width: 40px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-content: center;

    align-items: center;

    overflow: hidden;

    transition: 0.5s;

    padding: 0 10px;



}



.socialbox ul li:last-child { border-right: none; }

.socialbox ul li a:hover {

    background-color: #333;

    color:#fff;

}

/* LÁBLÉC INDUL */

.lablec {

    margin-top: 40px;

    width: 100%;

    padding: 20px 15%;

    background-color: #000;

    color:#fff;

}



.lablec .felso {

    width: 60%;

    min-height: 1px;

    padding: 40px 0;

    margin: 0 20%;

    

}



.lablec .felso ul {

    padding: 0;

    margin: 0;

    list-style: none;  

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    justify-items:stretch;

    align-items: stretch;

    column-gap: 20px;

    row-gap: 20px;

}



.lablec .felso ul li {

    text-align: left;

    margin: 0;

    padding: 10px;

    border-right: solid 1px #333;

}



.lablec .felso ul li:last-child {

    border:none;

}



.lablec .felso ul li h3 {

    color:#ccc;

    font-size: 100%;

    width: 100%;

    text-align: left;

    margin-bottom: 20px;

    letter-spacing: 1px;

    padding: 0 0 20px 0;

    margin: 0;

    

    

}



.lablec .felso ul li a {

    font-size: 80%;

    color:#ccc;    

    padding: 5px 0;

    width: 100%;

    display: block;

    letter-spacing: 2px;

    transition: 0.5s;

}





.lablec .felso ul li a:hover {

    color:#fff;

    padding-left: 5px;

    

    

}



.lablec .also { 

    border-top: solid 1px #666;

    margin-top: 10px;

    padding-top: 10px;

    display: flex; 

    justify-content:space-between;

    align-content: center;

    align-items: center;



}



.lablec .also a {

    color:#869198;

    margin: 0;

    transition: 0.5s;

}



.lablec .also a:hover {

    color: #e1e1e1;

}



.also-bal {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    font-size: 150%;

    font-weight: bold;

    width: auto;

}



.logo-ikon {width:40px; height: auto; margin-right: 20px;}

.logo-ikon img { width: 100%; height: 100%;}

.logo-text { height: auto;}





.also-jobb {

    color:#869198;

    letter-spacing: 2px;

    font-size: 70%;

}



#go_to_top {

    width: 60px;

    height: 60px;

    display: none;

    justify-content: center;

    align-items: center;

  position: fixed;

  bottom: 85px;

  right: 11px;

  z-index: 99;

  border: solid 1px #e1e1e1;

  background-color: #fff;

  color: #666;

  cursor: pointer;

  border-radius:5px;

  font-size: 25px;

    

    transition: 0.5s;

}



#go_to_top:hover {

    background-color: #333;

    border: solid 1px #333;

    color:#fff;

}





.today > div {

	color: red;

	

}



.uzenobox {

    display: flex;

    justify-content: center;

    align-items: center;

    

}



.uzenobox .ub1 {  
    margin: 20px;
    padding: 20px;
    font-size: 130%;
    text-align: center;
    line-height: 25px;
    color:#000;
    /*background-color: red;*/
    background-color: lightgreen;
}



.uzenobox .ub1 a {
    width: calc(50% - 4px);
    font-size: 80%;
    padding: 10px;
    display: block;
    margin: 20px 2px 0 2px;
    color:#fff;
    background-color: #333;
    transition: 0.5s;
    text-transform: uppercase;
    float: left;

}



.uzenobox .ub1 a.ub1e {
    float: none;
    margin: 20px auto 0 auto;
}


.uzenobox .ub1 a:hover {
    background-color: #000;
}


.disabled {

	background-color: lightcoral !important;
    cursor:not-allowed !important;

}