@charset "utf-8";
/* CSS Document */

body { background-color: #353535;}
        video { height: 100%; width: auto; transition: all .4s ease 0s; filter: brightness(120%); }
        #wrap {position: fixed; top:0; left: 0; object-fit: cover; object-position: center; width: 100vw; height: 100svh; display: flex;justify-content: center;align-items: center;}
        #focus { transition: all .4s ease 0s;
    width: 90px;
    height: 90px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px;
    background-image: url(../img/focus.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
        .intro #focus { opacity: 0;}
        
        
        #shot { transition: all .4s ease 0s; cursor: pointer;
    width: 90px;
    height: 90px;
    position: fixed;
    bottom:20px;
    left: 50%;
    margin: 0px 0 0 -45px;
}
        
        .intro #shot { opacity: 0;}
        
        #shot div { width: 40px; height: 40px; border-radius: 50%; position: absolute; top:50%; left: 50%; margin: -20px 0 0 -20px; background-color: rgba(255,255,255,.2); transform-origin: 50% 50%; transition: all .4s ease 0s;}
        
        #start { width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); text-align: center; display: none;}
        .intro #start { display: block;}
        #playButton { font-size: 4vw; display: inline-block; padding: 1em 2em; font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; color: #FFF; border:2px solid #FFF; border-radius: .3em; box-sizing: border-box; cursor: pointer;}
        
        h1 {font-family: 'Libre Baskerville', serif; font-weight: 400; margin: 0; margin-bottom: 2em; font-size: 7vw;  color: #FFF; display: inline-block;}

#close { width: 60px; height: 60px; position: fixed; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-size: 20px; background-position: center; background-repeat: no-repeat;  z-index: 5; }
.intro #close { display: none;}
         @media (orientation: landscape) {
            h1 { font-size: 3vw;}
            #playButton { font-size: 1vw;}
             video { height: auto; width: 100%; }
        }

.flash #flash { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: #FFF; }
.intro #flash { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.6); }