html{ box-sizing: border-box; }
*,::after,::before{ box-sizing: inherit }
body { margin: 0; padding: 0; font-family: "Roboto"; background-color: #ffffff; color: #000000; }
.wrap { margin: 0 auto; padding: 0; max-width: 1160px; }

.flex { display: flex; } 
.cx { text-align: center; }
.lx { text-align: left; }
.rx { text-align: right; }
.fll { float: left; }
.flr { float: right; }
.clr { clear: both; height: 0; line-height: 0; margin: 0; padding: 0; }
.full { width: 100%; display: block; }
strong { font-weight: 900; }

.split-10 { width: 10%; }
.split-16 { width: 16.6666667%; }
.split-20 { width: 20%; }
.split-25 { width: 25%; }
.split-30 { width: 30%; }
.split-32 { width: 32%; }
.split-33 { width: 33.3333333%; }
.split-40 { width: 40%; }
.split-50 { width: 50%; }
.split-60 { width: 60%; }
.split-68 { width: 68%; }
.split-70 { width: 70%; }
.split-75 { width: 75%; }
.split-80 { width: 80%; }
.split-90 { width: 90%; }

.desktop-only { display: block; }
.mobile-only { display: none; }

.header { margin: 0 0 20px 0; padding: 0; font-weight: 300; border-bottom: 1px solid #f0f0f0; text-transform: uppercase; }
.header .logo { display: inline-block; margin: 0; padding: 10px 0; font-size: 2em; letter-spacing: -2px; }
.header .logo a { border: 0; user-select: none; cursor: pointer; text-decoration: none; color: #000000; }

.menu { margin: 0; padding: 0; }
.menu ul { margin: 0; padding: 0; }
.menu ul li { margin: 0; padding: 10px 0; list-style: none; display: inline-block; }
.menu ul li a { margin: 0; padding: 10px 20px; display: inline-block; color: #000000; border: 0; text-decoration: none; }
.menu a:last-child { padding-right: 0; }

/* SPEC */

.note { margin: 0; padding: 0; }
.note .heading { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #f0f0f0; }
.heading h1 { margin: 0; padding: 0; font-weight: 900; line-height: 100%; letter-spacing: -3px; font-size: 3.5em; color: #000000; }
.heading p { margin: 0; padding: 0; font-weight: 300; font-size: 2em; color: #000000; }
.note .note-info { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.90em; color: #c0c0c0; }
.note-info strong { color: #000000; font-weight: 900; padding: 0 10px; }
.note-info span { color: #000000; padding: 0 10px; }
.note-info span a { color: #000000; text-transform: uppercase; text-decoration: none; }
.note-info span a:hover { text-decoration: underline; }
.wrap-note { margin: 0 auto; padding: 0 20px; max-width: 760px; }
.note-content { margin: 0 0 20px 0; padding: 0; border-bottom: 1px solid #f0f0f0; }
.note-content p { margin: 0 0 20px 0; padding: 0; font-weight: 300; font-size: 1.5em; color: #000000; line-height: 1.5em; word-spacing: 3px; }
.note-content p a { color: #000000; transition: color 0.3s ease; }
.note-content p a:hover { color: #4169E1; }

.note-image { margin: 0 0 20px 0; padding: 0; padding-bottom: 40%; position: relative; overflow: hidden; border-radius: 10px; }
.note-image img { margin: 0; padding: 0; width: 100%; position: absolute; top: -25%; }
.note-image .copyright { margin: 0; padding: 3px 5px; display: inline-block; position: absolute; bottom: 20px; right: 20px; background-color: rgba(0,0,0,0.33); border-radius: 6px; color: #ffffff; font-size: 0.75em; }