@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Black.woff2') format('woff2'), url('fonts/Amalia-Black.woff') format('woff'), url('fonts/Amalia-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Bold.woff2') format('woff2'), url('fonts/Amalia-Bold.woff') format('woff'), url('fonts/Amalia-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Light.woff2') format('woff2'), url('fonts/Amalia-Light.woff') format('woff'), url('fonts/Amalia-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Regular.woff2') format('woff2'), url('fonts/Amalia-Regular.woff') format('woff'), url('fonts/Amalia-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Bold.woff2') format('woff2'), url('fonts/AmaliaCond-Bold.woff') format('woff'), url('fonts/AmaliaCond-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Light.woff2') format('woff2'), url('fonts/AmaliaCond-Light.woff') format('woff'), url('fonts/AmaliaCond-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Regular.woff2') format('woff2'), url('fonts/AmaliaCond-Regular.woff') format('woff'), url('fonts/AmaliaCond-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

html {
    height: 100%;
}

strong {font-weight: 700;}

body {
    color: #ffffff;
    font-family: 'Amalia', sans-serif;
    font-size: 16px;
    background: #F8F6F2;
    color: #2C2D32;
    letter-spacing: 2%;
}

h3 		{margin-bottom: 0px;}
/*HERO START*/
.hero {  background: url(images/hero.jpg);    background-position: center;    background-size: cover;    width: 100%;    background-repeat: no-repeat;}
.hero_ikon {    margin-top: 23px;    left: 0;    top: 27px;    z-index: 1500;    position: relative;    vertical-align: top;}
.lebego_ikon {    position: fixed;    top: 0;    width: 100%;    z-index: 5000;    visibility: hidden;}
.hero_szoveg {    font-size: 64px;    font-weight: 900;    line-height: 72px;    letter-spacing: 2%;    color: #ffffff;    z-index: 2000;    bottom: 65%;    position: relative;}
.hero_nyil {    text-align: right;    top: -50px;    right: 0%;    position: relative;    z-index: 1;}
.magassag {    height: 446px;}

/*HERO END*/


/* GOMB START */
.btn-primary {    background: #2B2D34;    border-radius: 5px;     color: #ffffff;    text-decoration: none;    cursor: pointer;    font-weight: 500;    border: none; padding-top: 10px; padding-bottom: 10px;}
.btn-primary:hover {    color: #2B2D33;    background: #E5D119;    border: none;}

.btn-secondary             {background: #FEE600;    border-radius: 5px;     color: #2B2D33;    text-decoration: none;    cursor: pointer; border: none;padding-top: 10px; padding-bottom: 10px;}
.btn-secondary:hover       {color: #2B2D33;    background: #FEE600;    border: none;}

.gomb {    background: #2B2D34;    border-radius: 0px;    width: 275px;    height: 45px;    color: #ffffff;    text-decoration: none;    cursor: pointer;    font-weight: 500;    border: none;}
.gomb:hover {    color: #2B2D33;    background: #E5D119;    border: none;}

.gomb2 {    width: 275px;    background: #FEE600;    color: #2B2D33;    height: 45px;    border: none;    border-radius: 0px;    transform: scaleY(1);    transition: 0.5s;    font-weight: 500;}
.gomb2:hover {    background: #E5D119;}
#tabmob_blokk3 {    }

/* GOMB END */

/* CIMEK START */

h2         {    font-size: 36px; }
.blokk_cim {    font-size: 32px;}
.cim2      {    color: #2C2D32 !important;    font-size: 26px; }
.cim3      {    font-size: 22px;  }
.cim4      {    font-size: 22px;    color: rgba(0, 0, 0, 1);      opacity: 0.8;    font-size: 15px;    letter-spacing: 1.6px;    line-height: 24px;    text-transform: uppercase;}
.cim5      {    color: #808185;      size: 16px;    text-transform: uppercase;}
.faq_cim   {    font-size: 22px;    font-weight: 400;    line-height: 24px; cursor: pointer;}
/* CIMEK END */

/* ABLAKOK & HATTEREK START */
.ablak1           {background: #ffffff; padding: 30px}
.ablak2           {background: #ffffff; color: #2C2D32; border-radius: 16px; -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);    padding: 22px;}
.ikon_hatter1     {background: url(images/ikon6.webp); background-size: 8%; background-repeat: no-repeat; background-position: top right;}
.ikon_hatter2     {background: url(images/ikon2.webp); background-size: 8%; background-repeat: no-repeat; background-position: top right;}
.ikon_hatter3     {background: url(images/ikon3.webp); background-size: 8%; background-repeat: no-repeat; background-position: top right;}
.ikon_hatter4     {background: url(images/ikon7.webp); background-size: 8%; background-repeat: no-repeat; background-position: top right;}
.ikon_hatter5     {background: url(images/ikon5.webp); background-size: 8%; background-repeat: no-repeat; background-position: top right;}
.mobil_app {
    background: #EAF7F2;
    padding: 25px;
    border-radius: 23px;
    z-index: 2050;
}
/* ABLAKOK END */

/* BLOKKOS SZENVEDES START */

/* PC START */
.blokk_gyujto {    width: 100%;    display: flex; cursor: pointer;}
.blokk_bal {    width: 47.5%;    border-radius: 23px;    padding-bottom: 32px;    padding-top: 35px;    padding-left: 32px;    padding-right: 32px;    background:  #FFF4BF;
    background-repeat: no-repeat;    background-position-y: 60px;    background-position-x: right;    background-size: 170px 130px;    z-index: 20;}
.blokk_jobb {    width: 47.5%;    border-radius: 23px;    padding-bottom: 32px;    padding-top: 35px;    padding-left: 32px;    padding-right: 32px;    background: #E5F0F2;
    background-repeat: no-repeat;    background-position-y: 65px;    background-position-x: right;    background-size: 170px 161px;    z-index: 20;}
.blokk_koz {    width: 5%;}
.jobb_tav {    width: 5%;}
.bal_tav {    width: 5%;}

.desktop_faq 		{    background: #FFF4BF; padding: 25px; border-radius: 23px; z-index: 2050;}
.desktop_form 		{    background: #E5F0F2; padding: 25px; border-radius: 23px; z-index: 2050;   }

.kattints {    cursor: pointer;    padding-bottom: 30px;}
.kattints2 {    cursor: pointer;    padding-bottom: 30px;}
/* PC END */

/* MOBIL&TABLET START */
.blokk_bal_mobil {    border-radius: 23px;    padding-bottom: 24px;    padding-top: 24px;    padding-left: 25px;    padding-right: 25px;    background: #FFF4BF;
    background-repeat: no-repeat;    background-position-y: 60px;    background-position-x: right;    background-size: 150px 88px;    text-align: left;}
.blokk_jobb_mobil {    border-radius: 23px;    padding-bottom: 24px;    padding-top: 24px;    padding-left: 25px;    padding-right: 25px;    background:  #E5F0F2;
    background-repeat: no-repeat;    background-position-y: 45px;    background-position-x: right;    background-size: 120px 114px;    text-align: left;}
.faq {      padding-top: 30px;}

.form {    }

.kilepo {    transform: scaleX(0);    cursor: pointer;}

.kilepteto {    position: relative;    top: -45;    right: -7%;    width: 100%;    text-align: right;}
/* MOBIL&TABLET END */
/* BLOKKOS SZENVEDES END */

.sorba {    display: flex;    justify-content: space-between;}
.sarga {    color: #FEE600 !important;}
.bold {    font-weight: 700;}
.kics_bold {    font-weight: 500;}
.kicsi_bold {    font-weight: 500;}
.kattinthat {    cursor: pointer;}
.tavtarto10 {    height: 10px;}
.tavtarto15 {    height: 15px;}
.tavtarto20 {    height: 20px;}
.tavtarto30 {    height: 30px;}
.tavtarto40 {    height: 40px;}
.tavtarto44 {    height: 44px;}
.tavtarto50 {    height: 50px;}
.tavtarto60 {    height: 60px;}
.tavtarto5 {    height: 5px;}
.tavtarto100 {    height: 100px;}
.tavtartojobb20 {    margin-right: 20px;}
.kozepre {    text-align: center;}
.balra {    text-align: left;}
.jobbra {    text-align: right !important;}
.tavozz {    margin-top: 30px;}
.fell {    vertical-align: top;}
.img-responsive {    max-width: 100%;}
.link {    text-decoration: underline !important;    background: none;    border: none; cursor: pointer; color:#2C2D32 }
.link:hover {    text-decoration: underline !important;}
.rejtve {    display: none;}
.halvany {    opacity: 0;}
.desktop {    display: show;}
.bottom1 {    background: rgba(47, 42, 73, 0.05);    font-size: 16px;    letter-spacing: 4%;    padding-top: 50px;    padding-bottom: 50px;}
.bottom2 {    padding-top: 85px;    padding-bottom: 60px;    font-size: 14px;    color: #2B2D33;    background: #FFFFFF;}
.bottom3 {    background: #F1F0EF;    padding-top: 22px;    padding-bottom: 22px;}
.copyright {    color: #808185;    vertical-align: middle;}
.copyright2 {    color: #808185;    margin-left: 27px;    vertical-align: middle;}
.copy_mobil {    color: #808185;    vertical-align: middle;}
.bottom_Link_box {    font-weight: 500;}
.bottom_link {    border: none;    background: none;    text-decoration: underline;    color: #2F2A49; cursor: pointer;}
.bottom_link:hover {    text-decoration: underline;}
.bottom_link2 {    color: #2B2D33;    background: none;    border: none;    text-decoration: none;    padding: 0px; cursor: pointer;}
.bottom_link2:hover {    text-decoration: underline;}
.balra_eltart {    margin-left: 20px;}
.gyik_kerdescont {    background: #ffffff;    border: solid 1px #ffffff;    text-align: left;    padding: 10px;    border-radius: 5px;    color: #000000;    margin-bottom: 10px;
        -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);    font-size: 16px;}
.gyik_kerdes {    color: #000000;    font-weight: 400;    background: #ffffff;    border: none;    display: flex;    justify-content: space-between;    font-size: 16px;}
.gyikvalasz {    color: #000000 !important;    padding-top: 20px;    padding-bottom: 20px;    font-size: 16px;}
.form_eltunsz {    display: none;}
.oba {    background: url(images/OBA.svg);    background-repeat: no-repeat;    background-size: contain;    width: 100%;    background-position-y: top;}
.form_form {    font-size: 16px !important;}


.ablak              {padding: 30px; background: #FFFFFF;}


/* SAJAT */
.kartya1             { padding: 30px; font-size: 22px; text-align: center;  }
.hatterkep1          {background-color: #282D33; color: #FFFFFF;}
.hatterkep2          {background-color: #B4ADA5; color: #000000;}
.hatterkep3          {background-color: #F1EDE6; color: #000000;}
.nagygomb             {width: 60%;}
.kerdes              {font-weight: 700; margin-top: 20px;}
.kerdes2             {font-weight: 700; margin-top: 20px; color: #000000;}
.topikon            {width: 150px;}
.kepikon            {width: 100%;}

.szamladoboz         {background: #FFFFFF; padding: 2px; text-align: center; height: 180px; border-radius: 20px 20px 0px 0px; font-size: 18px; }
.szamladoboz:hover   {background: #F1EDE6; cursor: pointer;}
.szamlaikon          {width: 40px;}
.szamladoboz_aktiv   {background: #B4ADA5!important;}
.szamladoboz_aktiv:hover  {background: #B4ADA5;}

.nyilas li {
  list-style-image: url("images/nyil2.png"); margin-bottom: 10px;
}

.balkep {max-width: 70%;}
.topikon2           {height: 80px;}

.lepes             {text-align: center; padding: 10px; border-radius: 10px;}
.lepeskep         {width: 100px;}

.card         {border-radius: 10px; border: none;}

.kisikon1 	{max-width: 60px;}

.ablak4 		{border: solid 1px #DDDDDD; border-radius: 10px;}
.ablak5 		{border: solid 1px #DDDDDD; border-radius: 10px;}
.mobilbentebb 	{padding: 15px; font-size: 18px;}
.ablakkep		{border-radius: 10px 0px 0px 10px;}
.ablakkep2		{border-radius: 0px 10px 10px 0px;}

/* Small devices (mobil, 576px and down) */
@media all and (min-width: 100px) and (max-width: 768px) {
	.ablak4 		{border: solid 1px #DDDDDD; border-radius: 10px;}
	.ablak5 		{border: solid 1px #DDDDDD; border-radius: 10px;}
	.ablakkep	{border-radius: 10px 10px 0px 0px;}
	.ablakkep2	{border-radius: 10px 10px 0px 0px;}
    .lepessor     {display: block;}
    .lepes     {display: block;width: 100%!important; font-size: 20px;}
    .lepeskep     {width: 70px;}
    .balkep {width: 100px; margin-top: 30px;}
    .szamladoboz    {background: #FFFFFF; padding: 7px; text-align: left;  border-radius: 3px; font-size: 14px; height: auto; margin-bottom: 2px;}
    .szamladoboz_aktiv   {background: #B4ADA5!important;}
    .szamlaikon          {width: 30px; text-align: left;float: left; display: inline;}
    .szamlacont2     {background: #B4ADA5; padding: 2px; border-radius: 3px 3px 0px 0px;}
    .nagygomb             {width: 100%;}
    .gomb {        width: 100%;        height: 40px;    }
    .gomb2 {        width: 100%;        height: 40px;    }
    .mobiltavtarto {        height: 30px;    }
    .mobiltavtarto10 {        height: 10px;    }
    .ikon_hatter1         {background-size: 30%;}
    .ikon_hatter2         {background-size: 30%;}
    .ikon_hatter3         {background-size: 30%;}
    .ikon_hatter4         {background-size: 30%;}
    .ikon_hatter5         {background-size: 30%;}
    .tablet {        display: none;    }
    .desktop {        display: none;    }
    .desktopestablet {        display: none;    }
    .kilepteto {        right: -15%;    }
    .blokk_cim {          font-size: 22px;    }
    .ablak1 {        padding-left: 22px;        padding-right: 22px;    }
    .kics_bold {        padding-bottom: 15px;    }
    .bottom2 {        padding-top: 40px;    }
    .bottom_Link_box {        margin-top: 30px;    }
    .kozepremobil {        text-align: center;    }
/*    h2 {        font-size: 22px;        line-height: 32px;    }
    h1 {        font-size: 26px;    }*/
    .mobil_tab_kozep    {        text-align: center;    }
    .cim2               {        line-height: 32px;    }
    .mobil_fel          {        position: block;        top: 0;    }
    .cim4               {        font-size: 15px;    }
    .feltetelek_torzs   {        font-size: 12px;    }
    .oba                {        background-position-y: top;    }
    .mobil_kozep        {        text-align: center;    }
    .topikon            {width: 100px;}
    .kartya1             { padding: 15px; font-size: 18px; text-align: center;  }
    .kepikon            {width: 40%;}
    .app_hatter         {background: #FFFFFF; padding: 30px;}
    .app_hatter2         {background: #FFFFFF; padding: 30px;}
    .mobilkozep         {text-align: center;}
    .topikon2           {width: 100px;}
}

/* TABLET (tablets, 576px and up) */
@media all and (min-width: 769px) and (max-width: 992px) {
    .hero_szoveg {        font-size: 32px;        line-height: 33px;        bottom: 40%;    }
    .hero {        background: url(images/tablet_hero.jpg);        background-position: center;        background-size: cover;        width: 100%;        background-repeat: no-repeat;   }
    .desktop {        display: none;    }
    .mobil {        display: none;    }
    .hero_nyil {        width: 80%;        right: -40%;    }
    .ikon_hatter1         {background-size: 20%;}
    .ikon_hatter2         {background-size: 20%;}
    .ikon_hatter3         {background-size: 20%;}
    .ikon_hatter4         {background-size: 20%;}
    .ikon_hatter5         {background-size: 20%;}
    .blokk_bal_mobil {        background: #FFF4BF;      }
    .blokk_jobb_mobil {        background: #E5F0F2; }
    .blokk_cim { font-size: 22px !important; }
    .ablak1 {        padding-left: 22px;       padding-right: 22px; }
    .mobil_tab_kozep {        text-align: center;    }
    .balra_tart_25 {        margin-left: 25px;    }
    .gomb {        height: 40px;    }
    .gomb2 {        height: 40px;    }
    .hatterkep1          {background: url('images/hatterkep1.jpg'); background-size: cover; background-position: center; color: #FFFFFF;}
    .app_hatter         {background: url(images/szelfi_hatter.jpg); background-size: cover; background-position: center; padding: 30px; color: #FFFFFF;}
    .app_hatter2         {background: url(images/szelfi_hatter2.jpg); background-size: cover; background-position: center; padding: 30px; color: #FFFFFF;}
}

/*PC*/
@media all and (min-width: 993px) and (max-width: 5000px) {
	.ablakkep {margin-right: -16px;}
	.ablakkep2 {margin-left: -16px;}
	.nagyobb 	{font-size: 20px;}
    .tablet {        display: none;    }
    .mobil {        display: none;    }
    .mobilestablet {        display: none;    }
    .bentebb {        padding: 0 25px;    }
    .balra_tart_25 {        margin-left: 25px;    }
    .hatterkep1          {background: url('images/hatterkep1.jpg'); background-size: cover; background-position: center; color: #FFFFFF;}
    .hatterkep2          {background: url('images/hatterkep2.jpg'); background-size: cover; background-position: center; }
    .hatterkep3          {background: url('images/hatterkep3.jpg'); background-size: cover; background-position: center; }
    .balrasito          {padding-left: 30px;}
    .app_hatter         {background: url(images/szelfi_hatter.jpg); background-size: cover; background-position: center; padding: 30px; color: #FFFFFF;}
    .app_hatter2         {background: url(images/szelfi_hatter2.jpg); background-size: cover; background-position: center; padding: 30px; color: #FFFFFF;}
}

@media all and (min-width: 993px) and (max-width: 1400px) {
    .szamladoboz         {height: 210px; }
}