* { margin: 0; padding: 0; }

html ::-webkit-scrollbar { width: 7px; }
html ::-webkit-scrollbar-track { background: #52575d; }
html ::-webkit-scrollbar-thumb { background: #ff5376; border: 1px solid #52575d; }
html ::-webkit-scrollbar-thumb:hover { background: #ff8a9b; }

body { font-family: "Barlow"; font-size: 13px; min-height: 300px; }

header { line-height: 2.5em; padding: 40px 10px 70px 10px; color: #505654; height: 96px; }
header h1 { letter-spacing: 0.08em; font-size: 2.5em; font-weight: 600; margin-bottom: 0.3em; }
header h2 { font-weight: 300; font-size: 1.2em; color: #ff5376; line-height: 1.2em; }

#main { line-height: 0px; position: relative; max-width: 900px; margin: 0 auto; padding: 1.5em 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; }
#main figure { margin: 0 0 1.5em 0; opacity: 1; -webkit-transition: opacity 1s ease-in 0.1s; -o-transition: opacity 1s ease-in 0.1s; transition: opacity 1s ease-in 0.1s; position: absolute; }
#main figure video { max-width: 100%; }
#main figure img { max-width: 100%; background: #efe4e3; opacity: 1; transition: opacity 1s  ease-in-out 0.1s, -webkit-filter 1s ease-in-out 0.1s; }
#main figure img.clicked { z-index: 2; position: absolute; width: auto; max-width: 500px; margin: -50% -50%; left: 0; }
#main figure.hidden { opacity: 0; height: 0px; margin: 0; line-height: 0; display: block; position: absolute; top: 0px; }
#main figure.hidden img { opacity: 0; -webkit-filter: blur(8px); max-height: 10px; }

#loading { width: 50px; height: 50px; margin: 10px auto; position: relative; }
#loading.hidden { display: none; }
#loading .track { border: 10px solid #52575d; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 100%; width: 50px; height: 50px; }
#loading .thumb { border: 6px solid #ff5376; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; border-color: #ff5376 transparent transparent transparent; width: 46px; height: 46px; position: absolute; top: 2px; left: 2px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@media only screen and (max-width: 764px) { header h1 { font-size: 2.2em; line-height: 1em; }
  header h2 { font-size: 1.1em; } }
@media only screen and (max-width: 570px) { header h1 { font-size: 2em; line-height: 1em; }
  header h2 { font-size: 1em; } }