/* Montserrat */

@font-face {
    font-family: Montserrat;
    src: url(files/sys/fonts/Montserrat/Montserrat-Regular.ttf);
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    font-weight: 500;
    src: url(files/sys/fonts/Montserrat/Montserrat-Medium.ttf);
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    font-weight: 700;
    src: url(/files/sys/fonts/Montserrat/Montserrat-Bold.ttf);
    font-display: swap;
}



/* Futura */

@font-face {
    font-family: Futura;
    src: url(/files/sys/fonts/Futura/Futura-Medium.ttf);
    font-display: swap;
}

@font-face {
    font-family: Futura-condensed;
    src: url(/files/sys/fonts/Futura/Futura-Condensed.ttf);
    font-display: swap;
}



/* EB Garamond */

@font-face {
    font-family: 'EB Garamond';
    src: url(/files/sys/fonts/EBGaramond/EBGaramond.ttf);
    font-display: swap;
}



/* Oswald */

@font-face {
    font-family: 'Oswald';
    src: url(/files/sys/fonts/Oswald/Oswald.ttf);
    font-display: swap;
}



/* Glyphicons */

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot') format('embedded-opentype'), url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg') format('svg');
    font-display: swap;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.glyphicon-envelope:before {
    content: "\2709";
}

.glyphicon-earphone:before {
    content: "\e182";
}

.glyphicon-user:before{content:"\e008";}

/*
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}
*/



:root {
    font-size: 20px;
    --header-color: #fff !important;
    --color: #666;
    /* Alapértelmezett betűszín */
    color: var(--color);
}

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    font-size: 1rem;
    /*transition: all .75s;*/
    font-family: Arial;
}

body.bg {
    background-color: #253145;
    background: linear-gradient(90deg, #1F4F71 0%, #2D6B93 50%, #1F4F71 100%);
}

h1 {
    font-family: Montserrat;
    font-weight: 700;
    color: #383636;
    text-transform: uppercase;
    font-size: 4rem;
    text-align: center;
    margin-bottom: 3rem
}

a {
    color: inherit;
    text-decoration: none;
    transition: all .25s
}

a:not(.btn):hover {
    color: #ee564f;
    text-decoration: none
}

.hide-on-mobile {
    display: inline-block
}

.show-on-mobile,
.show-on-tablet {
    display: none
}

.btn-rx {
    color: #fff;
    text-transform: uppercase;
    font-family: Futura;
    font-weight: 700;
    font-size: 1.15rem;
    background-color: #ee564f;
    border-color: #ee564f;
    transition: all .25s
}

.btn-rx:not(.btn-sm) {
    padding: .85rem .75rem
}

.btn-rx.btn-sm {
    margin-left: 3rem
}

.btn-rx.aktiv,
.btn-rx:hover {
    color: #fff;
    transform: scale(1.1)
}

.clear {
    clear: both
}

.nav-link,
a {
    transition: all .25s;
    font-weight: 700;
    display: inline-block
}



/* Profil */
.profile {
    /*display: none;*/
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 1000;
}

.profile .dropdown-menu {
    font-size: 16px;
}

.login {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 16px;
}

.login h1, .login h2, .login h3 {
    text-align: center;
}

.login h1 {
    font-size: 2rem;
}

.login h2 {
    font-size: 1.5rem;
}

.login h3 {
    font-size: 1.25rem;
}








/* Cookie Bar */
#cookie-bar {
    background-color: rgba(0, 0, 0, .85);
    height: auto;
    color: #fff;
    padding: 10px 10px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%
}

#cookie-bar p {
    text-align: left;
    padding: 0 30px
}

#cookie-bar img {
    width: 300px;
    margin-bottom: 40px
}

#cookie-bar .cookie {
    line-height: 70px;
    padding-bottom: 30px;
    font-size: 58px;
    color: #fff
}

#cookie-bar .cookie-link {
    text-decoration: underline;
    display: inline-block;
    color: #3f9de7;
    font-weight: 700
}

#cookie-bar .cookie-link:hover {
    color: #bbdffb
}

#cookie-bar .accept {
    font-size: .85rem
}




/* Loader */
.loader_hatter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(0, 0, 0, .2)
}

.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

.loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ba55d3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite
}

.loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f0f;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes reverseSpin {
    0% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes reverseSpin {
    0% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}


/* Slick Slider */
.slick-slider {
    padding: 0 0;
    position: relative
}

.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    font-weight: 400;
    font-size: 5rem;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #464646
}

.slick-prev {
    left: -100px
}

.slick-next {
    right: -100px
}

.slick-slide {
    cursor: pointer
}

.slick-slide:focus {
    border: 0;
    outline: 0
}

.slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    display: block;
    width: 15px;
    height: 15px;
    cursor: pointer;
    color: transparent;
    outline: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .4);
    border: 0
}

.slick-dots li.slick-active button,
.slick-dots li:hover button {
    border: 2px solid rgba(255, 255, 255, 1)
}





/* Minden oldal */
#interaktiv-tartalom {
    height: 100vh;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
}

#interaktiv-felulet .kartya  {
    margin-top: -100px !important;
    position: relative;
}



/* Kezdőoldal, csomagok */
.csomagok {
    padding: 0 0 3% 0;
    height: 100%;
}

.csomagok-header {
    height: 10%;
    background-color: white;
    color: black;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    position: relative;
    font-weight: 700;
}

.csomagok-header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.csomag-keret {
    height: 30%;
    padding: 2.5% 0 0 0 ;
}

.csomag {
    width: calc(27vh * 2);
    min-width: 300px;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    
}

.csomagok.items-4 .csomag-keret {
    height: 45%;
    width: 49%;
    display: inline-block;
}

.csomagok.items-4 .csomag-keret .csomag {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.csomag.inaktiv {
    opacity: 0.4;
}

#beszelj-ugy-mint-egy-amerikai {
    background: #0093DF;
    background: linear-gradient(90deg, #0093DF 0%, #1EC3D4 100%);
}

#beszelj-ugy-mint-egy-amerikai-2 {
    background: #7B5DCA;
    background: linear-gradient(90deg, #7B5DCA 0%, #B864A4 100%);
}

#max-out-advanced-phrasal-verbs-essentials {
    background: #0048D3;
    background: linear-gradient(90deg, #0048D3 0%, #20C6FC 100%);
}

#advanced-business-essentials {
    background: #7B5DCA;
    background: linear-gradient(90deg, #7B5DCA 0%, #B864A4 100%);
}

.csomag-felirat {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 67%;
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0 3%;
}

.csomag-kep {
    width: 33%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.csomag-kep img {
    width: 90%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    object-fit: contain;
}

/* .csomag-kep {
    width: 100%;
    height: 100%;
}

.csomag-kep img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} */



/* Csomag csoportok */
.csomag-banner {
    width: 100%;
    height: 25vh;
    margin-top: 1vh;
    margin-bottom: 4vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.csomag-banner img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.csomag-csoportok {
    padding: 0 0 5vh 0;
    position: absolute;
    height: calc(100% - 30vh);
    display: flex;
    flex-direction: column;
    -ms-flex-pack: center !important;
    justify-content: start !important;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    
}

.csomag-csoport-keret {
    height: calc((100vh - 5rem - 30vh) / 4);
    min-height: 100px;
    padding: .5rem 0;
}

.csomag-csoportok .csomag-csoport-keret:nth-of-type(1) {
    margin-bottom: 3rem;
}

.csomag-csoport-keret:last-of-type {
    margin-top: 3rem;
}

.csomag-csoport {
    width: calc(27vh * 2);
    min-width: 300px;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    cursor: pointer;
    color: white;
    font-size: 1.5rem;
    border-radius: 15px;
}

.csomag-csoport#osszes {
    background-color: #2E6D96;
    background: radial-gradient(#2E6D96 0%, #1D4A6C 100%);
}

.csomag-csoport#tudtam {
    background-color: #28C339;
    background: radial-gradient(#3FE257 0%, #28C339 100%);
}

.csomag-csoport#nemtudtam {
    background-color: #E52D42;
    background: radial-gradient(#F44563 0%, #E52D42 100%);
}

.csomag-csoport#vissza {
    background-color: #2E6D96;
    background: radial-gradient(#2E6D96 0%, #1D4A6C 100%);
}

.csomag-csoport-felirat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}

.csomag-csoport-ertek {
    font-size: 1rem;
}






.csomag-indulasok {
    padding: 0 0 5vh 0;
    position: absolute;
    height: calc(100% - 30vh);
    display: flex;
    flex-direction: column;
    -ms-flex-pack: center !important;
    justify-content: start !important;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
}

.csomag-indulas-keret {
    height: calc((100% - 5rem - 30vh) / 4);
    min-height: 100px;
    padding: .5rem 0;
}

.csomag-indulas-keret:first-of-type {
    margin-bottom: 1.5rem;
}

.csomag-indulas-keret:last-of-type {
    margin-top: 3rem;
}

.csomag-indulas:not(.btn) {
    width: calc(27vh * 2);
    min-width: 300px;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    cursor: pointer;
    color: white;
    font-size: 1.75rem;
    border-radius: 15px;
    background-color: #FDBC02;
    background: radial-gradient(#FDBC02 0%, #FDD303 100%);
}

.csomag-indulas-felirat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}





/* Interaktív felület */
#interaktiv-felulet {
    background-color: #253145;
    background: linear-gradient(90deg, #1F4F71 0%, #2D6B93 50%, #1F4F71 100%);
    color: white;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#interaktiv-felulet .container {
    height: 90%;
    position: relative;
}

.interaktiv-oldal {
    width: 100%;
    text-align: left;
    margin: 1rem 0;
    position: relative;
}

#kereses_mutat_gomb {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    background-color: white;
    color: #B4B4B4;
    min-width: 250px;
    text-align: left;
    padding: 0.25rem 1rem;
}

.kereses_kep {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
}

.felulet-bezar {
    transition: all .35s;
    position: fixed;
    top: 0.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.felulet-bezar:hover {
    transform: scale(1.1);
}

.progress {
    height: 12px;
    background-color: white;
    margin-top: 3rem;
}

.progress-bar {
    background-color: #808080;
    background-color: #33D248;
}

.csomag-jelzes {
    width: 100%;
    text-align: right;
    height: 100px;
    margin-bottom: 1rem;
}

.csomag-jelzes img {
    height: 100%;
    object-fit: contain;
}

.kartya {
    background-color: transparent;
    width: 80vh;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.flip-card {
    perspective: 1000px;
    width: 100%;
    height: 0;
    padding-top: 45%;
    cursor: pointer;
    position: relative;
}

.flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.flip-card-inner .card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: white;
    color: black;
    border-radius: 15px;
    position: relative;
    font-weight: 700;
    font-size: 1.5rem;
}

.flip-card-inner .card-img .card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

.flip-card-back {
    color: white;
    transform: rotateY(180deg);
}

.nyilak {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.nyil {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    width: 50px;
    text-align: center;
}

.nyil.vissza {
    left: -10%;
}

.nyil.elore {
    right: calc(-10% - 50px);
}

.help {
    transition: .4s all;
    opacity: 1;
    height: 65px;
    vertical-align: bottom;
    margin-top: 1rem;
    text-align: center;
}

.kez-ikon {
    height: 100%;
    display: block;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 35px;
    object-fit: contain;
}

.help .label {
    display: inline-block;
    vertical-align: bottom;
}

.kartya.tovabb .help {
    opacity: 0;
    display: none;
}

.vezerles {
    transition: 0.8s all;
    opacity: 0;
    display: none;
    text-align: center;
}

.kartya.tovabb .vezerles {
    opacity: 1;
    display: block;
}

.hang {
    width: 100%;
    text-align: center;
    margin: 2rem 0;
    height: 50px;
}

.hang-ikon {
    height: 100%;
    max-width: 40px;
    object-fit: contain;
    cursor: pointer;
    margin: 2rem auto 0.5rem auto;
}

.vezerlo_gombok {
    /*
    display: flex;
    -ms-flex-pack: distribute!important;
    justify-content: space-between!important;
    padding: 0 2rem;
    position: absolute;
    width: 50%;
    left: 50%;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%);
*/
    display: inline-block;
    -ms-flex-pack: distribute!important;
    position: fixed;
    width: 50%;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
}

.vezerles .opcio {
    /*width: 150px;*/
    text-align: center;
    font-weight: 700;
    position: absolute;
    bottom: 0;
}

.opcio.tudtam {
    right: 15%;
}

.opcio.nemtudtam {
    left: 15%;
}

.opcio img {
    width: 100px;
    cursor: pointer;
    border-radius: 50%;
}

.vezerles .vezerlo_felirat {
    margin: 0.75rem 0 0 0 ;
}

.opcio.nemtudtam img {
    background: radial-gradient(#F44A5B 0%, #E92B39 100%);
    border: 2px solid white;
}

.opcio.tudtam img {
    background: radial-gradient(#41E05C 0%, #2EC743 100%);
    border: 2px solid white;
}

.nemtudtam {
    color: #E9334A;
}

.tudtam {
    color: #38DA50;
}



#landscape_alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #253145;
    color: white;
    z-index: -1;
    font-size: 2rem;
    text-align: center;
    opacity: 0;
}

#landscape_alert .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    text-align: center;
    transform: translate(-50%, -50%);
}



/* Keresés */
#kereses_modul {
    position: fixed;
    top: 10px;
    left: 10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: white;
    z-index: 1000;
    border-radius: 15px;
    display: none;
    padding: 0.5rem 1rem;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
}

.kereses-bezar {
    transition: all .35s;
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
}

#kereses_modul h3 {
    text-align: center;
    
}

#kereses {
    box-shadow: 0 0 5px #808080;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
}

#kereses-gomb {
    border-radius: 10px;
}

#kereses-tartalom {
    padding: 10px 0;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

#kereses-tartalom .talalat {
    width: 100%;
    text-align: left;
    padding: 5px 10px;
    margin: 15px 0;
    border-radius: 10px;
    color: white;
    background: linear-gradient(90deg, #1F4F71 0%, #2D6B93 50%, #1F4F71 100%);
    cursor: pointer;
}

#kartya_modul {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #1F4F71 0%, #2D6B93 50%, #1F4F71 100%);
    z-index: 11000;
    border-radius: 0px;
    display: none;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    color: white;
}

#kartya_modul .kartya {
    padding-top: 3rem;
}

#kartya_modul .container {
    height: 95%;
    position: relative;
}




@media (orientation:portrait) {}

@media only screen and (max-width:1669px) {
    
}

@media only screen and (max-width:1439px) {
    .opcio img {
        width: 75px;
    }
    
    .hang {
        margin: 0.75rem 0 0rem 0;
    }

    #interaktiv-felulet .kartya {
        margin-top: 0%;
    }
    
}


@media only screen and (max-width:1355px) {
    .slick-slider {
        padding: 0 50px
    }

    .slick-prev {
        left: -50px
    }

    .slick-next {
        right: -50px
    }
}

@media only screen and (max-width:1279px) {
    :root {
        /*font-size: 16px*/
    }

    .slick-slider {
        padding: 0 80px
    }

    .slick-prev {
        left: 0
    }

    .slick-next {
        right: 0
    }
    
    .csomag-jelzes {
        margin-bottom: 1rem;
        height: 75px;
    }
    
    .hang {
        margin: 1rem 0;
    }
    
    .vezerlo_gombok img {
        width: 70px;
    }



    .csomagok-header {
        height: 10%;
        background-color: black;
        color: white;
    }

    .csomagok.valaszto .csomagok-header {
        background-color: white;
        color: black;
    }

    #kereses_mutat_gomb {
        min-width: 150px;
    }

    .kartya {
        margin-top: 0;
    }



    #interaktiv-felulet .kartya  {
        margin-top: -75px !important;
    }


    .profile {
        position: absolute;
    }
    

    
}





@media only screen and (max-width:991px) {
    .hide-on-tablet {
        display: none
    }

    .show-on-tablet {
        display: inline-block
    }

    .btn-rx.btn-sm {
        margin-left: 0
    }

    .vezerlo_gombok {
        width: 75%;
    }

    
    .progress-label {
        display: block;
        margin: 1rem 0;
    }

    #kereses_mutat_gomb {
        top: 0;
        margin: 1rem 0;
    }

    #interaktiv-felulet .kartya {
        margin-top: 0.5rem !important;
    }

    .nyil {
        top: 110%;
        transform: translate(0, 0);
    }
    
    .nyil.vissza {
        left: 0;
    }
    
    .nyil.elore {
        right: 0;
    }

    .opcio.tudtam {
        right: 10%;
    }
    
    .opcio.nemtudtam {
        left: 10%;
    }

    .csomagok.items-4 .csomag-keret {
        height: 21%;
        width: 100%;
        display: inline-block;
    }
}

@media only screen and (max-width:767px) and (orientation:landscape) {
    #landscape_alert {
        display: block;
        z-index: 1000;
        opacity: 1;
    }

    

    
}

@media only screen and (max-width:767px) {
    :root {
        font-size: 16px
    }
    
    body {
        overflow: hidden;
    }

    .slick-slider {
        padding: 0 70px
    }

    .hide-on-mobile {
        display: none
    }

    .show-on-mobile {
        display: inline-block
    }

    #cookie-bar {
        font-size: 0.8rem;
    }

    #cookie-bar .container button {
        margin-top: 1rem;
    }


    .csomagok {
        padding: 0;
    }
    
    
    

    #kartya_modul {
        min-height: 550px;
        padding-bottom: 70px;
    }

    #interaktiv-tartalom {
        min-height: 550px;
        height: calc(100vh - 70px);
    }
    
    #interaktiv-felulet {
        min-height: 550px;
        height: calc(100vh - 70px);
    }
    
    .csomag-jelzes {
        margin-bottom: 0rem;
    }
    
    .hang {
        margin: 2rem 0;
    }

    .csomag-indulas-keret {
        min-height: 100px;
    }

    .vezerles .opcio {
        bottom: 2rem;
    }

    .csomag-csoport, .csomag-indulas:not(.btn) {
        max-width: 300px;
    }

    .csomag-banner {
        height: 22vh;
        margin-top: 0vh;
        margin-bottom: 3vh;
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
    }

    .csomag-csoportok, .csomag-indulasok {
        height: calc(100% - 25vh - 70px - 15px);
        top: calc(25vh + 70px);
    }

    .csomag-csoport-keret, .csomag-indulas-keret {
        height: calc((100vh - 5rem - 25vh - 70px - 15px) / 4);
        min-height: 75px;
    }

    .csomag-csoportok .csomag-csoport-keret:nth-of-type(1) {
        margin-bottom: 1.5rem;
    }

    .csomag-csoport-keret:last-of-type, .csomag-indulas-keret:last-of-type {
        margin-top: 1.5rem;
    }

    

}

@media only screen and (max-width:575px) {
    

    .btn-rx:not(.btn-sm) {
        padding: .5rem .35rem
    }

    .slick-slider {
        padding: 0 45px
    }
    
    .felulet-bezar {
        top: 0.5rem;
    }
    
    .help {
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .kez-ikon {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .nyil {
        top: 110%;
        transform: translate(0, 0);
    }
    
    .nyil.vissza {
        left: 0;
    }
    
    .nyil.elore {
        right: 0;
    }


    .flip-card-inner .card-img {
        font-size: 1.25rem;
    }


    #kereses {
        width: 100%;
        margin-bottom: 1rem;
    }

    #kereses-gomb {
        width: 100%;
    }

    #kereses-tartalom .talalat {
        padding: 15px 10px;
        margin-bottom: 25px;
    }

    .vezerlo_gombok {
        width: 90%;
    }



    .csomagok-header-content {
        width: 100%;
        text-align: center;
        padding: 0 60px 0 60px;
        line-height: 1.25rem;
        font-size: 14px;
    }

}


@media only screen and (max-width:359px) {
    .interaktiv-oldal {
        margin: 1rem 0 0.5em 0;
    }
    
    .felulet-bezar {
        top: .5rem;
    }
    
    .progress {
        height: 8px;
    }
    
    .csomag-jelzes {
        margin-bottom: 2rem;
    }
    
    .hang {
        height: 40px;
        margin: 1rem 0 0.5rem 0;
    }
    
    .opcio img {
        width: 60px;
    }
    
    
    .csomag-csoport {
        font-size: 1.25rem;
        min-width: 250px;
    }
    
    .csomag-csoport-ertek {
        font-size: 0.8rem;
    }
    
    
    #interaktiv-tartalom {
        min-height: 450px;
        height: 90vh;
    }
    
    .csomag {
        min-width: 250px;
    }
    
    .csomag-indulas:not(.btn) {
        min-width: 250px;
    }
}