:root {
    --main-elso-szin: #004071;
    /* Szürke */
    --main-masodik-szin: #f6921e;
    --main-harmadik-szin: #00b1ea;
    --main-betuszin: #000;
    --main-betuszin-vilagos: #ffffff;
    --main-betuszin-hover: #f6921e;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    height: 100%;
    line-height: 180%;
}

html {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    scroll-behavior: smooth;
    box-sizing: border-box;

}

.alapszel {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.cimsor{
    float: right;
    margin: 28px 0px 18px 0px ;
    width: 100%;
    position: relative;
}
.min200 {
    min-height: 240px;
}
.utikonsor {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.normalsor {
    clear: both;
}
.cimsor h1, .cimsor h2, .kcimsor h1, .kcimsor h2 {
    text-align: right;
    margin: 2px 0px;
    line-height: 150%;
}
.kcimsor {
    float: right;
    text-align: right;
    margin: 2px 0px;
    line-height: 150%;
}
.szovegbox {
    background: rgba(255, 255, 255, 1);
    padding: 8px 18px;
    text-align: left;
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.busz {
    min-height: 420px;
}
h1 {
    font-size: 26pt;
    font-weight: 300;
    margin: 0px;
    box-sizing: border-box;
}

h2  {
    font-size: 18pt;
    line-height: 180%;
    font-weight: 300;
    box-sizing: border-box;
}

h3 {
    font-size: 14pt;
    line-height: 180%;
    font-weight: 300;
    margin: 2px;
}

h4 {
    font-size: 12pt;
    font-weight: 300;
    margin: 2px;
}

h5 {
    font-size: 10pt;
}

a:link,
a:visited {
    text-decoration: none;
    color: var(--main-masodik-szin);
}
.fhiv a:link,
.fhiv a:visited {
    text-decoration: none;
    color: white;
}
ul {
    list-style-position: inside;
    list-style: none;
    margin-left: 4px;
}
.szovegbox ul {
    margin: 18px;
    display: table;
}

.labsor ul li, .szovegbox ul li {
    padding: 0px;
    text-indent: -2em;
    list-style-position: inside;
    display: table;
}

.labsor ul li::before, .szovegbox ul li::before {
    content: " ■  ";
    font-size: 20px;
    margin-right: 4px;
    color: var(--main-harmadik-szin);
}
.fejcimsor a {
    margin: 0px 16px;
    color: white;
    font-size: 10pt;
}

a:hover {
    color: var(--main-betuszin-hover);
}
.fhiv a:hover {
    color: var(--main-masodik-szin);
}

.fejcimsor {
    background-color: #000;
    padding: 12px;
}

.ikon, .utinfoikon {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    margin: -4px 8px 0px 8px;
    font-size: 28px;
    line-height: 0px;
    padding: 0px;
    color: var(--main-betuszin-vilagos);
    background-color: var(--main-elso-szin);
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    float: right;
}
.utinfoikon {
    width: 40px;
    height: 40px;
    margin: 0px 0px 0px 8px;
    font-size: 28px;
    background-color: var(--main-masodik-szin);
}
.utinfo, .utleiras {
    padding: 0px 18px;
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.utinfo {
    background-color: #c0c0c0;
    padding: 0px 18px;
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.utinfo h3, .utleiras h3{
    font-size: 20pt;
    text-align: left;
    margin-left: 0px;
}
.utinfo .la, .utleiras .la{
    margin-left: -8px;
    background-color: #ffffff;
    padding: 4px;
    border-radius: 100%;
}
.utinfosor {
    width: 100%;
    margin: 18px 0px;
}
.utinfosor div{
    width: 150px;
    font-size: 14pt;
    float: left;
}
.utinfosor p{
    margin-left: 150px;
    border-left: 1px solid gray;
    padding-left: 18px;
}
.utinfosor span{
    margin-right: 150px;
    font-size: 12pt;
}
.fejcimsor .ikon {
    width: 36px;
    height: 36px;
    font-size: 24px;
    margin: -6px 0px 0px 8px;
    color: var(--main-betuszin-vilagos);
    background-color: var(--main-elso-szin);
}

.ikon:hover {
    background-color: var(--main-masodik-szin);
}

.menusor {
    background-color: var(--main-elso-szin);
    height: 160px;
}

.logo {
    float: left;
    margin-top: -8px;
    z-index: 10000;
    position: absolute;
}

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-shrink:hover,
.hvr-shrink:focus,
.hvr-shrink:active {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.kezdomenu {
    border-radius: 100%;
    width: 180px;
    height: 180px;
    margin:  30px 12px;
    overflow: hidden;
    background-color: var(--main-elso-szin);
    color: white!important;
}

.kezdomenu img {
    min-width: 100%;
    max-height: 70%;
    position:relative;
}

.kezdomenu p {
    width: 60%;
    margin: auto 20%;
    line-height: 150%;
    font-size: 9pt;;
}
.akcios {
    background-color: var(--main-masodik-szin);
}
.ribbon {
    position: absolute;
    right: -5px; top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px; height: 75px; 
    text-align: right;
 }
 .ribbon span {
    font-size: 10px;
    color: #fff; 
    text-transform: uppercase; 
    text-align: center;
    font-weight: bold; line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg); /* Needed for Safari */
    width: 100px; display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
 }
 .ribbon span::before {
    content: '';
    position: absolute; 
    left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #79A70A;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
 }
 .ribbon span::after {
    content: '';
    position: absolute; 
    right: 0%; top: 100%;
    z-index: -1;
    border-right: 3px solid #79A70A;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
 }
 .red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}
.centerDivs {
    clear: both;
    display: block;
    text-align: center;
}
.malap {
    padding: 0px;
    display: inline-block;
}
.utmenu-hatteres {
    background-color: var(--main-elso-szin);
    width: 100%;
    height: 570px;
    margin-bottom: 300px;
    background-size: cover;
    margin-top: -18px;
}
.rovid {
    margin-bottom: 50px;
}
.utmenu-hatteres h1, .utmenu-hatteres h2, .utmenu-hatteres h3 {
    clear: both;
    font-size: 3vw;
    line-height: 150%;
    font-weight: 300;
    color: white;
    margin: 18px 18px 0px 18px;
    text-shadow: 2px 2px var(--main-betuszin);
    text-align: left;
}
.utmenu-hatteres h3 {
    font-size: 1.8vw;
    line-height: 150%;
    margin: 0px 18px 0px 18px;
}
.utmenu-hatteres img {
    margin: 18px;
}
.labsor h2  {
    font-size: 22pt;
    line-height: 180%;
    font-weight: 300;
    box-sizing: border-box;
}
.kezdo-oszz-utalap {
    clear: both;
    display: block;
    text-align: center;
    margin: 120px auto 12px auto;
}

.kezdoutalap {
    width: 324px;
    height: 570px;
    margin: 16px;
    padding: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    border: 0px solid black;
    position: relative;
    box-shadow: 0px 0px 0px #888888;
    transition: 0.3s;
}
.kezdoutalap:hover {
    box-shadow: 0px 0px 18px #888888;
}
.kutkep {
    width: 100%;
    height: 200px;
    overflow: hidden;
    text-align: center;
}
.kutkep img{
    min-width: 100%;
    min-height: 200px;
    display : block;
    margin : auto;
}
.kezdoutalap h3{
    color: var(--main-masodik-szin);
    text-shadow: none;
    font-size: 18pt;
    margin: 4px;
    text-align: center;
}
.kezdoutalap p{
    text-align: justify;
    color: var(--main-betuszin)!important;
}
.kezdoutalap button{
    border: none;
    font-size: 14pt;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    padding: 8px;
    border-radius: 3px;
}
.kiemeltsor, .labsor {
    background-color: var(--main-elso-szin);
    padding: 20px;
    color: white;
    margin: 20px 0px;
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.labsor h2 {
    margin: 0px;
}
.fokep {
    float: left;
}
.kiemeltsor .fokep {
margin-right: 20px;
margin-top: -50px;
}
.kfokep {
    width: 44%;
}
.lablogo {
    width: 200px;
    display: block;
    margin: 8px auto;
}
.elerhetoseg {
    width: 240px;
    padding: 16px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    /* border: 1px solid white; */
}
.elerhetosegk {
    width: 300px;
    padding: 16px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    border-left: 1px solid rgb(100, 100, 100);
    border-right: 1px solid rgb(100, 100, 100);
   /*  border: 1px solid white; */
}
.terkep {
    float: right;
    margin-right: 0px;
    margin-top: 0px;
}
.utkereso {
    border: 0px;
    width: 100%;
}
button.accordion {
    background-color: #f3f3f3;
    color: #444;
    cursor: pointer;
    padding: 18px 16px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 12pt;
    transition: 0.4s;
    margin: 8px 0px 0px 0px;
}

button.accordion h3 {
    font-family: 'Roboto', sans-serif;
    line-height: 100%;
    padding: 0px;
    margin: 0px;
}

button.accordion.active,
button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 10pt;
    color: #777;
    float: right;
    margin: -16px 5px 0px 5px;
}

button.accordion.active:after {
    content: "\2796";
}
div.panel {
    padding: 0px 40px 0px 0px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    width: 100%;
    display: block;
    text-align: left;
    box-sizing: border-box;
}

div.panel.show {
    opacity: 1;
    max-height: 100000px;
    padding: 0px 20px 0px 20px;
    box-sizing: border-box;
}
.vkek {
    background-color: #c3f0ff;
}