/* ==========================================
   MOZIGO PLAYER
========================================== */

:root{

    --mozigo-red:#c8102e;
    --mozigo-dark:#090909;
    --mozigo-white:#ffffff;

}


/* PLAY GOMB */

#myWatchOverlayBtn{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:99999;

    border:none;

    background:none;

    cursor:pointer;

    display:none;
    opacity:0;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transition:
    opacity .35s ease,
    transform .35s ease;

}

#myWatchOverlayBtn.show{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}


/* KATTINTÁS ANIMÁCIÓ */

#myWatchOverlayBtn.clicked{

    transform:translate(-50%,-50%) scale(.82);

    opacity:0;

}


/* PIROS KÖR */

#myWatchOverlayBtn .play-icon{

    width:120px;
    height:120px;

    border-radius:50%;

    background:radial-gradient(circle at 30% 30%,#ff6c83,var(--mozigo-red));

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 0 25px rgba(200,16,46,.55);

}


/* SZÖVEG */

#myWatchOverlayBtn .play-text{

    margin-top:20px;

    color:white;

    font-size:24px;

    font-weight:bold;

    white-space:nowrap;

}


/* HOVER */

#myWatchOverlayBtn:hover{

    transform:translate(-50%,-50%) scale(1.06);

}

/* ==========================================
   MOZIGO LOADING
========================================== */

#mozigoLoading{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.78);

    z-index:999998;

}

.mozigo-loading-box{

    text-align:center;

}

.mozigo-spinner{

    width:72px;
    height:72px;

    margin:0 auto 25px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid #c8102e;

    border-radius:50%;

    animation:mozigoSpin 1s linear infinite;

}

.mozigo-logo{

    color:white;

    font-size:38px;

    font-weight:700;

    letter-spacing:2px;

}

.mozigo-loading-text{

    margin-top:18px;

    color:#ddd;

    font-size:22px;

}

@keyframes mozigoSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

 /* ==========================================
   MOZIGO PREPARE OVERLAY
========================================== */

#mozigoPrepareOverlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.92);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:opacity .35s ease;

    z-index:999999;

}

/* Megjelenítés */

#mozigoPrepareOverlay.show{

    opacity:1;

    visibility:visible;

}

/* Forgó piros gyűrű */

.prepare-ring{

    width:74px;

    height:74px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.12);

    border-top:5px solid #c8102e;

    animation:mozigoPrepareSpin 1s linear infinite;

    margin-bottom:28px;

}

@keyframes mozigoPrepareSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* MOZIGO PLAYER */

.prepare-title{

    color:#ffffff;

    font-size:34px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:12px;

    text-transform:uppercase;

}

/* Felirat */

.prepare-text{

    color:#d9d9d9;

    font-size:22px;

    font-weight:500;

}

/* Mobil */

@media(max-width:768px){

.prepare-ring{

    width:58px;
    height:58px;

}

.prepare-title{

    font-size:24px;

}

.prepare-text{

    font-size:17px;

}

}