/**
========================== root/includes/imageViewer.css ======================
MS Written stylesheet for mikesalon.com images
Note: This stylesheet is in root/includes/ and NOT in root/aussiePlaces/includes.
It is therefore not restricted to pages within aussiePlaces/.
It can be used for images from events/, themes/, journeys/ etc.
*/

body { background: black;}

/* PAGE HEADING */
div.heading {
    @media screen and (max-width: 1000px) { h1 { font-size: 2em;} }
    @media screen and (max-width: 700px) { h1 { font-size: 1.5em;} }
    h1 { 
        font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
        height: 100px; width: 100%; padding-left: 10px;
        background: linear-gradient(to right, #ff00ff, #00ffff);
        position: absolute; top: 0; left: 0px;
    }
    img {position:absolute; top: 10px; right: 10px; height: 100px; z-index: 999;}
}

@media screen and (min-width: 1000px) { h1 { font-size: 2.4em; color: yellow;} }
@media screen and (max-width: 1000px) { h1 { font-size: 2.1em; color: white;} }
@media screen and (max-width: 700px)  { h1 { font-size: 1.5em; color: yellow;} }

/* MAIN IMAGE */
div.full { position: absolute; top: 140px;}
/* Animation */
@keyframes expand {
    from { max-width: 400px;}
    to { max-width: 100%;}
}
div.full img { max-width: 100%; animation: expand 1s forwards;}

/* STYLING TO PRESERVE FULL IMAGE ASPECT RATIO */
img.fullscreen {
    position: fixed;
    top: 130px;            /* underneath the header */
    left: 0;               /* close to the left margin */
    width: 100vw;           /* full viewport width */
    height: 100vh;          /* full viewport height */
    object-fit: contain;    /* preserve aspect ratio */
    object-position: left top; /* stays in top left corner */
    margin: 0;
}
p.caption { position: fixed; bottom: 25px; left: 25px; background: black; color: yellow; opacity: 50%; cursor: pointer;}

/* NAVIGATION BUTTONS */
button.step {position: fixed; top: 50%; opacity: 50%;}
button.step:hover {opacity: 100%; background: yellow;}