html { position: relative; display: block; background-color: rgba(35, 43, 47, 1); }
body { padding-bottom: 200px; color: rgba(255, 255, 255, .85); background-color: rgba(35, 43, 47, 1); }
body.overlay-open { overflow: hidden; }
body.overlay-open .overlay { display: inline-table; }
body.overlay-open nav .menu-icon { display: none; }
body.overlay-open nav .close-icon { display: block; }

/* Defaults */

::selection { text-shadow: none; background-color: rgba(255, 255, 255, .15); }

input, textarea, select, button, .button { width: 100%; box-sizing: border-box; outline: 0; }
input, textarea { color: rgba(92, 92, 96, 1); outline: 0; border: 0; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
input::placeholder, textarea::placeholder { color: rgba(92, 92, 96, .5); }
input:-moz-placeholder, textarea:-moz-placeholder { color: rgba(92, 92, 96, .5); }
input::-moz-placeholder, textarea::-moz-placeholder { color: rgba(92, 92, 96, .5); }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: rgba(92, 92, 96, .5); }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(92, 92, 96, .5); }

input:focus::placeholder, textarea:focus::placeholder { color: rgba(92, 92, 96, .25); }
input:-moz-placeholder:focus, textarea:-moz-placeholder:focus { color: rgba(92, 92, 96, .25); }
input::-moz-placeholder:focus, textarea::-moz-placeholder:focus { color: rgba(92, 92, 96, .25); }
input:-ms-input-placeholder:focus, textarea:-ms-input-placeholder:focus { color: rgba(92, 92, 96, .25); }
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color: rgba(92, 92, 96, .25); }

a { cursor: pointer !important; transition: color .35s; }
img { width: inherit; vertical-align: middle; }
button, .button { z-index: 1; cursor: pointer !important; }

.article header h1, .article header a, .article header a.link { color: white !important; }
.article header a.link::after { background-color: white !important; }
.article section h1 { color: white !important; }

/* Typography */

@font-face {
    font-family: "helveticabold";
    src: url("../fonts/helvetica-bold.ttf") format("truetype");
}

@font-face {
    font-family: "merriweatherlight";
    src: url("../fonts/merriweather-light.ttf") format("truetype");
}

@font-face {
    font-family: "merriweatherblack";
    src: url("../fonts/merriweather-black.ttf") format("truetype");
}

/* Initial */

body { font-family: 'merriweatherlight', serif; }
body, a, b, p, h1, h2, h3, h4, h5, h6, span, del, button, .button { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6, button, .button { font-family: "helveticabold", "Helvetica Neue Bold", "Helvetica Bold", Helvetica, Arial, sans-serif; }
h1 { font-family: 'merriweatherblack', serif; line-height: 125%; }
h2 { color: white; line-height: 135%; }
h3 { color: rgba(255, 255, 255, .5); line-height: 150%; }
p { line-height: 135%; }
h1 + p, h2 + p, h3 + p { margin-top: .35em; }

/* Overlay */

.overlay { display: none; position: fixed; z-index: 10; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .95); overflow-y: scroll; }
.overlay .container { display: table-cell; vertical-align: middle; text-align: center; }

/* Navigation */

nav { position: fixed; top: 0; left: 0; right: 0; height: 72px; margin-bottom: -72px; z-index: 10; box-shadow: 0 1px 5px rgba(0, 0, 0, 0), 0 1px 3px rgba(0, 0, 0, 0); }
nav .container, .overlay > .container:first-child { position: relative; height: 72px; margin: 0 auto; }
nav a:last-child { display: inline-block; position: relative; float: right; overflow: hidden; }
nav .identity a:last-child img { position: relative; left: -100%; opacity: .5; transition: left .25s ease; }
nav .identity a:last-child img.active { left: 0; }
nav .identity { float: left; width: auto; }
nav .identity img { float: left; width: auto !important; height: 36px; margin: 22px 0; }
nav .identity span {
    float: left;
    width: auto !important;
    height: 36px;
    margin: 22px 0;
}
nav .identity span.bold {
    font-weight: bold;
}
nav .identity > a { display: inline-block;  opacity: 1; transition: opacity .25s ease; }
nav .identity > a:hover { opacity: .75; }
nav .menu-icon { position: relative; float: right; width: auto !important; height: 26px; margin: 27px 0; }
nav .close-icon { display: none; position: relative; z-index: 100; float: right; width: auto !important; height: 26px; margin: 27px 4px; }

/* Menu */

#menu { width: 960px; height: auto; display: block; position: relative; margin: 0 auto; padding: 0; zoom: 1; }
#menu > li { float: left; height: 72px; margin-bottom: 3%; display: block; position: relative; cursor: pointer !important; overflow: hidden; }
#menu > li:hover { left: 0; }
#menu li:nth-of-type(odd) { width: 380px; margin-right: 200px; }
#menu li:nth-of-type(even) { width: 380px; }
#menu > li > a { position: relative; float: left; height: inherit; left: -24px; color: rgba(60, 60, 64, 1); display: inline-block; cursor: pointer; text-decoration: none; box-sizing: border-box; left: -24px; transition: left .5s ease, opacity .5s ease; opacity: .5; }
#menu > li:hover a { left: 0; opacity: 1; }
#menu > li a img { height: inherit; filter: brightness(0) invert(1); }
#menu .logo { display: block; }
#menu .icon { display: none; }

/* Links */

a, a:visited { position: relative; color: inherit; text-decoration: none; outline: none; }
a.link::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; box-sizing: border-box; background-color: rgba(255, 255, 255, 1); content: ''; opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(4px);
}
a.link:hover::after, a.link:focus::after { opacity: 1; transform: translateY(0px); }

/* Layout */

body, div, nav, section { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
header > .container, section > .container { margin: 4% auto; }
.container { position: relative; width: 90%; margin: 0 auto; padding: 0; text-align: center; }
.container:after { content: ''; display: block; clear: both; }
.container > img { width: 100%; }

/* Header */

header { display: inline-block; width: 100%; color: white; background-color: rgba(0, 0, 0, .15); background-size: auto; background-position: bottom center; background-repeat: repeat-x; background-blend-mode: multiply; }
header:first-of-type { padding-top: 80px; background-color: transparent; background-image: url('../img/bg_halftone.png'); }
header a { display: inline; opacity: .85; }
header > h1 { margin: 3% 0 1.5%; text-align: center; }
header > .container { position: relative; height: auto; transition: left 1s ease; }
header > .container > h1, section .container > h1 { margin-bottom: 2%; }
header p, header button, header .button { color: white; }

/* Section */

section { display: block; width: 100%; }
section .container { text-align: left; }
section + section .container, section .container + .container { margin-top: 0; }

/* Footer */

footer { display: inline-table; position: absolute; overflow: hidden; bottom: 0; left: 0; right: 0; width: 100%; box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, .15); background-image: url('../img/bg_halftone-reversed.png'); background-size: contain; background-position: top center; background-blend-mode: multiply; }
footer, footer .container, footer .promo { height: 220px; }

.promo { display: flex; margin: 0 auto; text-align: center; flex-direction: column; justify-content: center; align-items: center; }
.promo i { display: block; color: white; font-size: .8em; font-style: normal; line-height: 150%; width: 100%; }
.promo del { position: relative; text-decoration: none; }
.promo del::before { content: ' '; background-image: url('../images/interface/strikethrough.png'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 120%; height: 100%; position: absolute; left: -10%; top: 0; }
.promo del::after { content: ' '; background-image: url('../images/interface/patch.png'); background-repeat: no-repeat; background-position: left center; background-size: contain; position: absolute; width: 300%; height: 100%; top: 0; left: 115%; visibility: visible; }
.promo img { width: 160px; margin-top: 20px; }

/* Subpages */

body.article nav .identity a:last-child img { left: 0 !important; filter: brightness(100); opacity: .5; }
body.article header { background-size: auto; }
body.article header .container { margin: 0 auto; padding: 0; overflow: hidden; }
body.article header button, body.article header .button { background-color: rgba(255, 255, 255, .15) !important; }
body.article section h1, body.article section i { display: block; color: white; text-align: left; }
body.article section p > i { display: inline; }
body.article section img { display: block; width: auto; max-width: 100%; margin: 0 auto; }
body.article section img.framed { padding: 1%; box-sizing: border-box; background-color: rgba(0, 0, 0, .15); border: 1px solid rgba(0, 0, 0, .15); }
body.article section img.spaced { padding: 4% 10%; box-sizing: border-box; }
body.article section img.full { width: 100%; }
body.article section img.partial { max-width: 75%; }
body.article section img.half { max-width: 50%; }
body.article section img + i { opacity: .65; margin-top: 2%; }
body.article section p { margin-top: 4%; }
body.article section.overlay img { margin-top: 0 !important; } /* Patch */
body.article section h1 { margin-top: 8%; }

/* Components */

.label { border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgba(35, 35, 41, 1); padding: 0 0 5px; margin-bottom: 20px; transition: border-bottom-color .25s ease; }
.thumbnail { width: 100%; display: block; vertical-align: bottom; }
.layer { background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .25) 35%,  rgba(0, 0, 0, 0) 65%), linear-gradient(to top, rgba(0, 222, 255, .5) 0%, rgba(0, 222, 255, .2) 65%, rgba(0, 222, 255, 0) 100%); }

/* Items */

.item { display: inline-block; position: relative; float: left; width: 32%; margin-right: 2%; margin-bottom: 8%; opacity: 1; }
.item:nth-of-type(3n) { margin-right: 0; }
.item a { display: block; }
.item img { width: 100%; height: auto; }

/* Cards */

.card { padding: 1.25%; word-wrap: break-word; background-color: rgba(0, 0, 0, .15); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); cursor: pointer; }
.card:hover {
    //box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.24);
    box-shadow: 0px 4px 8px rgba(255,255,255,0.30), 0 4px 8px rgba(255,255,255,0.30);
}
.card a {
    height: 100%;
}
.card p { color: white; margin: 2% 0; font-size: .85em; line-height: 1.5em; text-align: left; overflow: hidden; }
.card p.title {    font-weight: bold;
    font-size: 24px;
    margin-top: 0px;}
.card blockquote { color: rgba(255, 255, 255, .5); display: block; width: 100%; padding-top: 3%; font-size: .65em; text-overflow: ellipsis; border-top: 1px dashed rgba(255, 255, 255, .15);
    bottom: 0px;
    position: absolute; 
    height: 34px;
}
.card blockquote p { font-size: inherit; margin-top: 0; }

/* Buttons */

button, .button { position: relative; min-height: 40px; line-height: 67%; padding: 2.5% 4%; font-size: 100%; color: white; text-align: center; text-transform: uppercase; display: block; cursor: pointer; border: none; border-radius: 5px; transition: opacity .15s; }
button[type="submit"], .button[type="submit"] { margin-top: 0; }
.button { display: table; line-height: 150%; }
button:disabled, .button:disabled { opacity: 0.35; -moz-opacity:0.35; -khtml-opacity: 0.35; filter: alpha(opacity=35); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; }
button, .button, button *, .button * { cursor: pointer !important; }
button a, .button p { display: table-cell; position: relative; vertical-align: middle; color: white !important; line-height: 67%; }
button p { display: inline-block; position: relative; vertical-align: middle; }
button img, .button img { display: inline-block; position: relative; height: 40px; margin-right: 10px; vertical-align: middle; }
.button > img + p { line-height: 20px; }
button.dropdown { width: 300px; height: 60px; padding: 0; overflow-y: hidden; }
button.dropdown a { height: 60px; color: white; text-align: left; line-height: 60px; display: block; padding: 0 10%; text-transform: none; box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, .15); background-color: rgba(255, 255, 255, 0); transition: background-color .25s ease; }
button.dropdown a:hover { background-color: rgba(255, 255, 255, .1); }
button.dropdown a:first-child { border-top: none; background-image: url(../img/arrow_down.png); background-repeat: no-repeat; background-position: right center; background-size: contain; }
button.dropdown a:first-child:hover { color: white; background-color: transparent; }
button.dropdown.open a:first-child { background-image: url(../img/arrow_up.png); }

.button.go p { padding-right: 20px; background-image: url(../img/arrow_next.png); background-repeat: no-repeat; background-position: right center; background-size: contain; }

button, .button { width: auto; margin: 0 auto; margin-top: 3%; padding: 2.5% 4%; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); cursor: pointer; }
button:hover, .button:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.24); }

/* Color */

a, a:visited, h1, a.link, a.link:visited, .ps, .skills.container > h2, .skills.container .item > div { color: rgba(241, 149, 65, 1); }
button, .button, a.link::after { background-color: rgba(241, 149, 65, 1); }

a, a:visited, h1, a.link, a.link:visited, .ps, .skills.container > h2, .skills.container .item > div { color: rgba(64, 215, 183, 1); }
button, .button, a.link::after { background-color: rgba(64, 215, 183, 1); }

/* Window Width < 480 */

@media only screen and (max-width: 479px) {
    
    body { font-size: 16px; padding-bottom: 160px; }
    h1 { font-size: 1.2em; text-shadow: none; }
    h2 { font-size: 1.1em; }
    h3, p, button { font-size: .9em; }
    
    button img, .button img { height: 24px; margin-right: 6px; }
    button.dropdown { width: 200px; height: 40px; }
    button.dropdown a { height: 40px; line-height: 40px; }

    nav { height: 60px; margin-bottom: -60px; }
    nav .identity img { height: 28px; margin: 16px 0; }
    nav .menu-icon { height: 20px; margin: 20px 0; }
    nav .close-icon { height: 20px; margin: 20px 3px; }
    
    header:first-of-type { padding-top: 60px; }
    header > h1 { margin: 6% 0 3% 0; }
    header p { display: inline; }
    header button, .header button { padding: 4%; }
    header > .container, section > .container { margin: 7% auto; }
    
    section + section .container { margin-top: 3%; }
    section .container > h1 { font-size: 1.5em; margin-bottom: 5%; }
    
    #menu { width: 200px; }
    #menu li { height: 36px; margin-bottom: 6px; }
    #menu li:last-child { margin-bottom: 0; }
    #menu li a { left: -12px; opacity: 1; }
    #menu > li a img { filter: none; }
    
    .item { width: 100%; margin-right: 0%; margin-bottom: 4%; }
    
    .card { padding: 3.25%; border-radius: 3px; }
    .card p { margin: 3% 0; font-size: .9em; line-height: 1.5em; }
    .card blockquote { font-size: .85em; }
    
    footer, footer .container, footer .promo { height: 115px; }
    footer .promo { text-align: center; vertical-align: middle; }
    footer .promo i { display: inline; font-size: .85em; }
    footer .promo img { width: 120px; margin-top: 10px; }
}

/* 480 ≤ Window Width < 768 */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    body { font-size: 17px; }
    h1 { font-size: 1.35em; text-shadow: none; }
    h2 { font-size: 1.2em; }
    
    button img, .button img { height: 32px; margin-right: 8px; }
    button.dropdown { width: 200px; height: 40px; }
    button.dropdown a { height: 40px; line-height: 40px; }
    
    nav { height: 60px; margin-bottom: -60px; }
    nav .identity img { height: 28px; margin: 16px 0; }
    nav .menu-icon { height: 20px; margin: 20px 0; }
    nav .close-icon { height: 20px; margin: 20px 4px; }
    
    header:first-of-type { padding-top: 60px; }
    header > h1 { margin: 5% 0 2.5% 0; }
    header p { display: inline; }
    header button, .header button { padding: 3.5% 4%; }
    header > .container, section > .container { margin: 6% auto; }
    
    section + section .container { margin-top: 2%; }
    section .container > h1 { font-size: 1.75em; margin-bottom: 5%; }
    
    #menu { width: 260px; }
    #menu li { height: 48px; margin-bottom: 5%; }
    #menu li:last-child { margin-bottom: 0; }
    #menu li a { left: -16px; opacity: 1; }
    #menu > li a img { filter: none; }
    
    .item { width: 100%; margin-right: 0%; margin-bottom: 4%; }
    
    .card { padding: 2.75%; border-radius: 3px; }
    .card p { margin: 3% 0; font-size: 1em; line-height: 1.75em; }
    .card blockquote { font-size: .85em; }
    .card blockquote p { font-size: inherit; }
    
    footer, footer .container, footer .promo { height: 130px; }
    footer .promo { text-align: center; vertical-align: middle; }
    footer .promo i { display: inline; font-size: .9em; }
    footer .promo img { width: 130px; margin-top: 10px; }
    
    body.article section p { margin-top: 5%; }
    body.article section h1 { margin-top: 10%; }
    
}

/* 768 ≤ Window Width < 1024 */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    
    body { font-size: 19px; padding-bottom: 180px; }
    h1 { font-size: 1.5em; text-shadow: none; }
    h2 { font-size: 1.3em; }
    
    button.dropdown { width: 250px; height: 50px; }
    button.dropdown a { height: 50px; line-height: 50px; }
    
    nav { height: 70px; margin-bottom: -70px; }
    nav .identity img { height: 32px; margin: 19px 0; }
    nav .menu-icon { height: 22px; margin: 24px 0; }
    nav .close-icon { height: 22px; margin: 24px 4px; }
    
    header:first-of-type { padding-top: 70px; }
    header > h1 { margin: 4% 0 2% 0; }
    header button, .header button { padding: 3% 4%; }
    header > .container, section > .container { margin: 5% auto; }
    
    section + section .container { margin-top: 1%; }
    
    #menu { width: 320px; }
    #menu li { height: 60px; }
    #menu li:last-child { margin-bottom: 0; }
    #menu li a { left: -20px; opacity: 1; }
    #menu > li a img { filter: none; }

    .item { width: 48%; margin-right: 4%; margin-bottom: 4%; }
    .item:nth-of-type(3n) { margin-right: 4%; }
    .item:nth-of-type(2n) { margin-right: 0; }
    
    .card { padding: 2.25%; border-radius: 4px; }
    .card p { margin: 3% 0; font-size: 1em; line-height: 1.5em; }
    .card blockquote { font-size: .75em; }
    
    footer, footer .container, footer .promo { height: 145px; }
    footer .promo i { font-size: .9em; }
    footer .promo img { width: 140px; margin-top: 15px; }
    
}

/* 1024 ≤ Window Width < 1280 */

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    
    body { font-size: 20px; padding-bottom: 190px; }
    h1 { font-size: 1.55em; }
    h2 { font-size: 1.4em; }
    
    #menu { width: 600px; }
    #menu li { float: left; height: 48px; }
    #menu li:nth-of-type(odd) { width: 260px; margin-right: 80px; }
    #menu li:nth-of-type(even) { width: 260px; }
    #menu li a { left: -16px; }
    
    footer, footer .container, footer .promo { height: 160px; }
    footer .promo i { font-size: .85em; }
    footer .promo img { width: 150px; margin-top: 15px; }
    
}

/* 1280 ≤ Window Width < 1440 */

@media only screen and (min-width: 1280px) and (max-width: 1439px) {
    
    body { font-size: 22px; }
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.05em; }
    p { font-size: 1.05em; }
    
    .container { max-width: 1152px; }
    
    #menu { width: 800px; }
    #menu li { float: left; height: 60px; }
    #menu li:nth-of-type(odd) { width: 320px; margin-right: 160px; }
    #menu li:nth-of-type(even) { width: 320px; }
    #menu li a { left: -20px; }
    
    footer .promo i { font-size: .85em; }
    
}

/* 1440 ≤ Window Width < 1680 */

@media only screen and (min-width: 1440px) and (max-width: 1679px) {
    
    body { font-size: 23px; }
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    
    .container { max-width: 1152px; }
    
}

/* 1680 ≤ Window Width */

@media only screen and (min-width: 1680px) {
    
    body { font-size: 24px; }
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    
    .container { max-width: 1152px; }
    header > .container, section > .container { margin: 3% auto; }
    
}

/* 1920 ≤ Window Width */

@media only screen and (min-width: 1920px) {
    
}


.achievement { padding: 1.25%; word-wrap: break-word; background-color: rgba(0, 0, 0, .15); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1);  }

.achievement p { color: white; margin: 2% 0; font-size: .85em; line-height: 1.5em; text-align: left; overflow: hidden; }
.achievement p.title {    font-weight: bold;
    font-size: 24px;
    margin-top: 0px;}
.achievement blockquote { color: rgba(255, 255, 255, .5); display: block; width: 100%; padding-top: 3%; font-size: .65em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-top: 1px dashed rgba(255, 255, 255, .15); }
.achievement blockquote p { font-size: inherit; margin-top: 0; }

.achievement .star {
    margin-right: 10px;
    float: left;
    display: inline-block;
    width: 40px;
    height:50px;
    // margin-top: 5px;
    // margin-bottom: 5px;
}
.achievement img {
    width:40px;
}
.achievement .text-container {
    width: 90%;
    // display:inline-block;
    min-height: 50px;
    // display: table;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.achievement .text {
    // margin: auto 0;
    // display: table-row;
    // position: relative;
    // top: 50%;
    //transform: translateY(-50%);
}
.achievement .outer {
    // display: block;
}

.achievement .outer:not(:last-child) {
    margin-bottom:20px;
}