/*==========================================================
DDVIEW
VIEWER CSS
Version 2
==========================================================*/


/*==========================================================
1. PARAMETERS
==========================================================*/

:root{

    /* PHOTO */

    --photo-top:            30px;
    --photo-height:        400px;
    --photo-hover-height:  600px;

    /* CAPTION */

    --caption-top:         450px;

    /* CONTROLS */

    --controls-top:        500px;

    /* VIEWER */

    --viewer-top:          450px;
    --viewer-height:       230px;

}


/*==========================================================
2. PAGE
==========================================================*/

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#f6f4ef;

    font-family:Helvetica,Arial,sans-serif;

}

body{

    position:relative;

}


/*==========================================================
3. PHOTO
==========================================================*/

#photo{

    position:absolute;

    left:50%;
    top:var(--photo-top);

    transform:translateX(-50%);

    width:auto;
    height:var(--photo-height);

    border-radius:12px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    transition:height .35s ease;

    z-index:70;

}

#photo:hover{

    height:var(--photo-hover-height);

    z-index:100;

    cursor:zoom-in;

}


/*==========================================================
4. CAPTION
==========================================================*/

#caption{

    position:absolute;

    left:50%;
    top:var(--caption-top);

    transform:translateX(-50%);

    font-size:18px;

    color:#444;

    white-space:nowrap;

    z-index:60;

}


/*==========================================================
5. WHEEL NAME - not used anymore
==========================================================*/


/*==========================================================
6. PROGRESS - not used anymore
==========================================================*/

/*==========================================================
7. CONTROLS
==========================================================*/

#controls{

    position:absolute;

    left:50%;
    top:var(--controls-top);

    transform:translateX(-50%);

    display:flex;

    gap:120px;

    align-items:center;

    z-index:30;

}


/*==========================================================
8. VIEWER
==========================================================*/

#viewer{

    position:absolute;

    left:50%;
    top:var(--viewer-top);

    transform:translateX(-50%);

    height:var(--viewer-height);

    width:auto;

    opacity:.35;

    z-index:20;

}


/*==========================================================
9. REEL - not used anymore
==========================================================*/