@font-face { font-family: 'bodycopy'; font-style: normal;font-weight: 300; src:url('/static/font/Rubik-Light.ttf') format('truetype')}
@font-face { font-family: 'bodycopy2'; font-style: normal;font-weight: 500; src:url('/static/font/Rubik-Regular.ttf') format('truetype')}
@font-face { font-family: 'title'; font-style: normal;font-weight: 500; src:url('/static/font/Rubik-Light.ttf') format('truetype')}
@font-face { font-family: 'bodycopy3'; font-style: normal;font-weight: 800; src:url('/static/font/Rubik-Bold.ttf') format('truetype')}
 
/* Normál állapot felülbírálása */
.form-control {
    border-color: gray; /* Bootstrap zöld szín */
}

/* Fókusz állapot felülbírálása (A Bootstrap árnyékot is cserélni kell!) */
.form-control:focus {
    border-color: red; /* Sötétebb zöld fókuszkor */
    box-shadow: 0 0 0 0; /* Lágy zöld Bootstrap-stílusú ragyogás */
    outline: 0; /* Biztosítja, hogy a böngésző gyári kerete ne zavarjon be */
}
/* 1. Normál állapot: Amikor csak ott van az oldalon */
input {
    border: 20px solid gray; /* 2 pixel vastag, folytonos, piros keret */
    border-radius: 4px;        /* Opcionális: lekerekítés */
    outline: none;             /* Kikapcsolja a böngésző alapértelmezett kék körvonalát */
}

/* 2. Fókusz állapot: Amikor a felhasználó belekattint, hogy gépeljen */
input:focus {
    border-color: #990000; !important    /* Belekattintva sötétebb piros lesz */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* Finom piros ragyogás a keret körül */
}

button:hover {
    color: #555555 !important; /* Ide írd a kívánt hover szövegszínt */
    /* Opcionális: ha a hover alatti háttérszínt is módosítanád */
    /* background-color: #222222 !important; */ 
}








body{font-family: 'bodycopy'; }

h1 {font-family: 'bodycopy';font-size: calc(1.2rem + 1.3vw);}

h2, h5 {font-family: 'bodycopy'; }   


h3 {font-family: 'bodycopy'; color: red; text-transform:uppercase;}
h4 {}
.h5, h5 {font-size: 1.0rem;}

hr {  background:red; opacity: 1; border-radius: 10px; max-width:400px}

p{font-family: 'bodycopy'; text-align: justify}
b{}
a, a:hover, a:active, a:focus {text-decoration: none; color: inherit;}


.or{color: #E86B1A;}
.bg-white{background:white}
.bg-lightgreen{background:#E6F4F4}
.bg-red{background:red;}
.text-red{color:red}

.gr{color: #009999;}
.j{text-align:justify;}
div.igg  a{position: relative; display: block; overflow:hidden;}
div.igg  p {padding:0;margin:0;opacity: 0; position: absolute; left: 0; right: 0; bottom:0;  background-color: rgba(0,153,153,0.8); text-align:center; padding: 20px;color:white;transition-delay: 300ms;transition: all 300ms ease;}
  
 
div.igg img {transition: all 500ms ease;} 
div.igg a:hover img{ transition: all 5s ease;transform: scale(1.2); } 


div.igg a:hover p { opacity: 1; transition: opacity 200ms ease;transition-delay: .1s}

div.iggm p { display:block;background-color: rgba(0,153,153,0.8); padding: 10px; color:white; margin-top:-5px ; }
div.iggm img { display:block;}
.idc{
height:600px; 
background: url('/static/images/bg.jpg') no-repeat ;
background-size:  cover; 
background-position: center center;
background-attachment: scroll;  

}
   @media screen and (min-width : 767px){
       .idc{ background-attachment: fixed  !important; ;  } 
       
  // h2 { padding: 30px 0px;  }       
       
    }
/*
@media all and (min-width:0px) and (max-width: 320px) {
  img{paddign:0;}
}

*/
.navbar-collapse, .collapse, .navbar-toggler, .navbar-nav, .me-auto{ transition: none;  }



/*BUTTONS*/
.btn{border-radius:0; font-weight: 600;}
.btn-primary{background:transparent; color:#009999; border:0}
         .btn-primary:hover, .btn-primary:active,.btn-primary:visited, .btn-primary:focus{background:transparent; color:black; border:0}

 .btn {
	border-radius: 0px;
	display: inline-block;
	font-weight: 400;
	padding: 10px 15px;
	overflow: hidden;
	position: relative;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color;
	transition-property: color;
	vertical-align: middle;
	border: 0;
	margin: auto;
	font-size: inherit;
}
.btn:before {
	bottom: 0;
	content: "";
	left: 0px;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: width;
	transition-property: width;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	width: 0;
	z-index: -1;
	display: inline-block;
}
.btn:hover {
	padding: 10px 15px;
}
.btn:hover:before {
	-webkit-transition-timing-function: cubic-bezier(.52,1.64,.37,.66);
	transition-timing-function: cubic-bezier(.52,1.64,.37,.66);
	width: calc(100% + 10px)
}
 .btn-secondary {          /*Eredeti gomb*/
	background-color: red;
	border: 2px solid white;
	color: white;
}
        .btn-secondary:before {             /*Hover gomb*/
        	display: inline-block;
        	background: white;
        	;
        }
        .btn-secondary:hover {
        	border: 2px solid #ceba85;
        	color: black
        }


 .btn-default {          /*Eredeti gomb*/
	background-color: red;
	border: 2px solid white;
	color: white;
}
          .btn-default:before {             /*Hover gomb*/
          	display: inline-block;
          	background: white;
          	;
          }
          .btn-default:hover {
          	border: 2px solid #ff0000;
          	color: gray
          }




/*MENU ANIMACIO*/
.circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  border: 5px solid #0198b3;
    border-top-color: rgb(1, 152, 179);
    border-right-color: rgb(1, 152, 179);
    border-bottom-color: rgb(1, 152, 179);
    border-left-color: rgb(1, 152, 179);
  -webkit-clip-path: polygon(0 0, 0 50%, 50% 50%, 150% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 0 50%, 50% 50%, 150% 0, 100% 100%, 0 100%);
  box-sizing: border-box;
  -webkit-transition: 1000ms cubic-bezier(.45,0,.14,1.03);
  -moz-transition: 1000ms cubic-bezier(.45,0,.14,1.03);
  -o-transition: 1000ms cubic-bezier(.45,0,.14,1.03);
  transition: 1000ms cubic-bezier(.45,0,.14,2);
}


	.header.header-scroll .button_menu { transform: translate(0,20%);}
		.button_menu_in { position:relative; display:inline-block; vertical-align:middle; width:60px; height:60px; margin-right:5px; }
			.button_menu .circle { width:100%; height:100%; border-color:#fff; box-sizing: border-box;}
			.button_menu:hover .circle { border-color:#fff; -webkit-clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%);clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%); }
			.menu-lines { position:absolute; width:20px; height:20px; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transition:all 300ms ease 0s; -moz-transition:all 300ms ease 0s; -o-transition:all 300ms ease 0s; transition:all 300ms ease 0s; opacity: 0;}
				.line { background-color: #fff; position:absolute; }
				.line1 { left:50%; top:0; width:1px; height:100%; }
				.line2 { top:50%; left:0; height:1px; width:100%; }
			.menu-boxes { position:absolute; width:20px; height:20px; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transition:all 300ms ease 0s; -moz-transition:all 300ms ease 0s; -o-transition:all 300ms ease 0s; transition:all 300ms ease 0s; }
				.m-box { position:relative; float:left; margin-right:5px; margin-bottom:5px; width:3px; height:3px; background-color:#fff;-webkit-transition:all 600ms ease 0s; -moz-transition:all 600ms ease 0s; -o-transition:all 600ms ease 0s; transition:all 600ms ease 0s; }
				.menu-boxes .m-box:nth-child(3n) { margin-right:0; }
		.menu-title {  position:relative; display:inline-block; color:#fff; font-weight:600; }

	.button_menu_active .menu-boxes { opacity:0; }
	.button_menu_active .menu-lines { transform:translate(-50%,-50%) rotate(405deg); }

.button-con {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;

  vertical-align: middle;
}

 @media screen and (max-width: 1200px) {.menu-title, .top_contact span {display: none!important;}}


 .button-con {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;

  vertical-align: middle;
}

	.top_contact { position:absolute;  top:50%; transform:translate(0,-50%); z-index: 1000;}

			.button-con { position:relative; display:inline-block; width:50px; height:50px;  vertical-align:middle; }
			.top_contact .circle2 { position:absolute; left:0; top:0; width:49px; height:49px; border-radius:50%; border:4px solid white; -webkit-clip-path: polygon(0 0, 0 50%, 50% 50%, 150% 0, 100% 100%, 0 100%);clip-path: polygon(0 50%, 0 50%, 50% 50%, 150% 0, 100% 100%, 0 100%); box-sizing: border-box; -webkit-transition:1000ms cubic-bezier(.45,0,.14,1.03); -moz-transition:1000ms cubic-bezier(.45,0,.14,1.03); -o-transition:1000ms cubic-bezier(.45,0,.14,1.03); transition:1000ms cubic-bezier(.45,0,.14,2);}
				.top_contact a:hover .circle2 { border-color:#fff; -webkit-clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%);clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%); }
      .button img { /*! position:absolute; */ /*! top:50%; */  /*! max-height:12px; */  /*! left: 50%; *//*! transform: translate(-50%,-50%); */}
			/*.article span { color:#000; }*/
			.article .slogan { color:#a0a0a0; }
			.article a { color:#000; font-weight: 600; }
			.article a span { color:#000; font-weight: 600; }
			.article .button img, .qr-col .button img { max-height: none; max-width: 12px;}
			.article .button:hover .circle, .qr-col .button:hover .circle, .header.header-scroll .button:hover .circle { border-color:#0198b3; }
			.button:hover .circle { border-color:#fff; -webkit-clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%);clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%); }


 .circle3 { border:4px solid red; }
     	.button:hover .circle3 { border-color:red; -webkit-clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%);clip-path:polygon(0 -100%, 150% 0, 50% 50%, 150% 0, 100% 100%, 0 100%); }

 #scroll-top svg{xxxtransition: width 2s; }
     #scroll-top svg:hover {xxxmargin-top:10px }
 /*ACCORDIOn TUDÁSTÁRBAN*/
 
 .accordion-body{}
.accordion-button:not(.collapsed) {
  color: #636363;//kinyitva tinta   1px red dotted;
 background-color: #fff;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009999' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(180deg);
}

.accordion-item {
  margin-bottom: 0px;
  background-color: #fff;
  border: 0px solid rgba(0, 0, 0, 0.125);
  border-bottom: 1px solid black;
}


.accordion-header {
  margin-bottom: 0;
  padding: 8px 0px;
}


.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1.2rem;
  color: black;//becsukva tinta
  text-align: left;
  background-color: white;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;

}


.accordion-button:focus {
  z-index: 3;
  border-color: red;
  outline: 0;
  box-shadow: none;
  
}

footer {font-size: 80%}
footer a:link {text-decoration: none; color: #fff;}
footer a:visited {color: #e6f4f4;}


div.cr  {
padding: 5px 0px 5px 0px;
font-size: 10pt;  
background-color: #636363;
color: #8f8f8f;
  a:link {text-decoration: none; color: #e6f4f4;}
a:visited {color: #e6f4f4;}
  
}


**********************


div.igg img {transition: all 500ms ease;} 
div.igg a:hover img{ transition: all 5s ease;transform: scale(1.2); } 


div.igg a:hover p { opacity: 1; transition: opacity 200ms ease;transition-delay: .1s}



/*CARDS INDEX OLDA, ROLUNk OLDAL*/
  .card {position: relative; transition: all .5s ease-in;}


.card__image {
  display: block;
  width: 100%;
  height: auto;
}

.card__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 100%;
  
  opacity: 0;
  visibility: none;
  transition: .5s ease;
  background-color: #099;
}

.card:hover .card__overlay {
  opacity: 1;
}

.overlay__text {
color:white;
position: relative;
  top: 30%;
  right: 10%;
text-align: center;
  width: 80%;
  left: 10%;
}


ul.list li{padding: 5px;}

/*SUPBPAGES */
.subpages_headerimage_height{height:520px}
     @media screen and (max-width : 980px){.subpages_headerimage_height{height:300px}}
     
     
.prod td{     
padding: 6px 10px;
border-bottom: 1px solid gray; }