html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

* {
    transition: all 0.3s;
}

video#video {
   /* display: none;*/  
    opacity: 0.00000001;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
}

.overlay {
   /* display: none; */
    opacity: 0.00000001;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;

}

.summary {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: none;
}

.summary .photo_container {
    height: 50%;
    box-sizing: border-box;
}

.summary .photo_container div {
    border: 2px solid #fff;
    display: inline-block;
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    transition: transform 0.3s;
    background-size: cover;
}

.summary .settlement,
.summary .repair_shop {
    padding: 20px;
    text-align: center;
}

.summary .show_on_map {
    text-decoration: none;
}

@keyframes photoFade {
    from {
        box-shadow: 0;
    }

    to {
        box-shadow: inset 0 0 0 500px #fff;
    }
}

.shutter {
  animation: photoFade .3s .3s alternate-reverse 1;
}

.shutter_container {
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
}
/* .summary div.front {
    transform: translate(-200%, -200%);
}

.summary div.back {
    transform: translate(200%, -200%);
}

.summary div.left {
    transform: translate(-200%, 200%);
}

.summary div.right {
    transform: translate(200%, 200%);
} */