/* =========================================
   OCR MESH HERO
   ========================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

.ocr-mesh-effect {
    position: relative !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: 100vw !important;
    max-height: 100vh !important;

    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;

    padding: 0 !important;

    overflow: hidden !important;

    line-height: 0 !important;

    box-sizing: border-box !important;

    background: #000 !important;
}


/* =========================================
   KÉP / PICTURE
   ========================================= */

.ocr-mesh-effect picture {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;
}


.ocr-mesh-effect img {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: translate(-50%, -50%) !important;
}


/* =========================================
   CANVAS / MESH
   ========================================= */

.ocr-mesh-effect .ocr-mesh-canvas {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10 !important;

    pointer-events: none !important;

    display: block !important;
}


/* =========================================
   TABLET ÁLLÓ
   ========================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .ocr-mesh-effect {
        width: 100vw !important;
        height: 100dvh !important;

        max-width: 100vw !important;
        max-height: 100dvh !important;
    }

}


/* =========================================
   TELEFON ÁLLÓ
   ========================================= */

@media (max-width: 767px) {

    .ocr-mesh-effect {
        width: 100vw !important;
        height: 100dvh !important;

        max-width: 100vw !important;
        max-height: 100dvh !important;
    }

}


/* =========================================
   BOX MODEL
   ========================================= */

.ocr-mesh-effect,
.ocr-mesh-effect * {
    box-sizing: border-box !important;
}