/*
Theme Name:     Lor Quiz 3.0
Description:    Lor Quiz 3.0
Author:         toolbox

*/

    body {
        font-family: Arial, sans-serif;
        background-color: #11100b;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100vh;
    }

    body.quiz{
        overflow: hidden;
    }
    
    .slide{
        display: none;
        position: relative;
        width: 600px;
        height: 865px;
    }

    .full-image img{
        width: 100%;
        height: auto;
    }
        
    .background-image, .intro-image{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 600px;
        height: 865px;                
    }
    
    .background-image img, .gift-area img{
        display: none;
    }
    
    .covered-area{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 301px;
        height: 434px;  
        overflow: hidden;
        opacity: 1;
        transition: opacity 3s ease;
    }
    
    .star{
        position: absolute;        
        top: 49.5%;
        left: 50%;
        transform: translate(-50%, -50%);        
        z-index: 4;      
        width: 134px;
        height: 124px;  
        overflow: hidden;        
    }
    
    .arxiki{
        font-size: 20px;
        color: #fff;
        position: absolute;
        bottom: 10px;
        right: 50px;
        text-decoration: none;
        z-index: 10;
    }
    
    .button{
        display: none;
        position: absolute;
        z-index: 8;
        width: 223px;
        height: 61px;
        bottom: 60px;        
        left: 38px;
        
    }   
    
    #start-quiz{
        display: block;
        width: 300px;        
        height: 80px;        
        bottom: 100px; 
        left: 150px;
    }
    
    .button#correct, .button#fake-correct{
        left: 338px; 
        
    }
    
    .gift-area{
        position: absolute;        
        z-index: 6;
        width: 400px;
        height: 200px;        
        bottom: 20px;
        left: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;        
    }
    
    .slide.active, .button.show, .background-image img.show, .gift-area img.show{
        display: block;                
    }    
    

    /* Overlay */
    .loading-overlay{
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background: rgba(0,0,0,0.7);

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

        z-index: 9999;

        opacity: 1;
        visibility: visible;

        transition: opacity 0.3s ease;
    }

    /* Hidden state */
    .loading-overlay.hide{
        opacity: 0;
        visibility: hidden;
    }

    /* Spinner */
    .loader{
        width: 70px;
        height: 70px;

        border: 6px solid rgba(255,255,255,0.2);
        border-top: 6px solid #ffffff;

        border-radius: 50%;

        animation: spin 1s linear infinite;
    }

    @keyframes spin{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    
    
    /*
    * Form Area
    */

    .jconfirm .jconfirm-holder{
        width: 50%;
        margin: 0 auto;
    }
    .jconfirm-box{text-align: center;}
    .jconfirm.jconfirm-light .jconfirm-box{
        background-color: #11100b !important; 
        border: 1px solid #d5b164;        
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;        
    }
    .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content, .jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll{ min-height: 20px;}
    .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{color: #d5b164 !important; background-color: transparent !important;}
    .jconfirm-title-c{display: none !important;}
    .jconfirm-content{font-family: Arial, sans-serif; font-weight: 400; color: #d5b164;}