/* ----------------------------- */
/* Reset */
/* ----------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}


blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ----------------------------- */
/* Basic Setup */
/* ----------------------------- */

html, 
body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-family:  'Work Sans', sans-serif; 
    font-size: 18px;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.clearfix:after {
    content: "";
    clear: both;
    display: table;
}

/* ----------------------------- */
/* Grid System */
/* ----------------------------- */

.grid {
    display: grid;
    grid-gap: 1rem;
}

/* ----------------------------- */
/* General */
/* ----------------------------- */

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    width: 90%;
}

.container-sm {
    margin-left: auto;
    margin-right: auto;
    max-width: 45rem;
    width: 90%;
}

h1 {
    font-weight: 600;
    font-size: 3rem;
    margin-bottom: 1.75rem;
}

h2 {
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

h4 {
    font-weight: 500;
    font-size: 1.25rem;
    color: #03283c;
    margin-bottom: 0.75rem;
}

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.5rem;
    margin-bottom: .5rem;
}

img {
    border-radius: 0.5rem;
    display: block;
    width: 100%;
    
}

ul {
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

ol {
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

a {
    text-decoration: none;
    color: #275FB9;
}

a:hover {
    text-decoration: underline;
}


/* ----------------------------- */
/* Header */
/* ----------------------------- */

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    padding: 1rem 0;
}

.nav-items {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.nav li {
    list-style: none;
    margin-left: 1rem;
}

.nav-link {
    color: #333;
    padding: 0.5rem 0.5rem;
    position: relative;
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: none;
}

.nav-link::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='7' viewBox='0 0 100 7'%3E%3Cpath fill='currentColor' d='M99.98 2.2c-0.02 0.49-0.35 0.85-0.96 1.16c-0.6 0.3-1.48 0.59-2.63 0.77c-1.13 0.11-2.5 0.25-4.08 0.4c-0.4 0.03-0.82 0.06-1.26 0.06c-0.42-0.02-0.86-0.03-1.3-0.05c-0.89-0.05-1.82-0.1-2.8-0.15c-0.48-0.04-1.01-0.04-1.54-0.11c-0.53-0.07-1.05-0.17-1.57-0.27c-1.06-0.21-2.06-0.35-3.16-0.25c-1.1 0.08-2.28 0.28-3.51 0.25c-1.15-0.02-2.36 0.15-3.62 0.21c-1.25 0.05-2.51 0.1-3.8 0.14C69.1 4.4 68.48 4.46 67.8 4.45c-0.68-0.02-1.34-0.13-1.99-0.23c-0.65-0.1-1.29-0.19-1.93-0.2c-0.66 0-1.32 0.01-1.98 0.01c-0.67 0.01-1.34 0.02-2.01 0.03c-0.69 0-1.31 0.03-1.96 0.19c-1.17 0.25-2.45 0.72-3.71 0.71C52.98 4.98 51.77 5 50.56 5.03C49.97 5.04 49.29 5.08 48.68 5c-0.6-0.07-1.2-0.13-1.8-0.2c-0.59-0.06-1.12-0.08-1.71-0.03c-0.59 0.04-1.18 0.08-1.77 0.12c-2.34 0.15-4.62 0.37-6.82 0.56c-2.19 0.12-4.3 0.25-6.27 0.3c-0.98 0.04-1.94 0.07-2.86 0.11c-0.92 0.01-1.8 0.02-2.65 0.03c-0.83 0.02-1.67 0.02-2.38 0.06c-0.72 0.06-1.42 0.17-2.1 0.28c-0.67 0.1-1.32 0.19-1.93 0.21c-0.55 0.02-1.05 0.08-1.51 0.14c-0.92 0.12-1.66 0.23-2.17 0.27c-0.27 0.02-0.53 0.04-0.81 0.04c-0.29 0-0.56-0.01-0.84-0.04c-0.55-0.06-1.07-0.16-1.56-0.27C11 6.5 10.54 6.39 10.09 6.32C9.65 6.24 9.25 6.2 8.78 6.18C7.87 6.11 7.02 6.02 6.22 5.88c-0.8-0.14-1.51-0.26-2.2-0.52C2.67 4.84 1.75 4.13 1.15 3.58c-0.59-0.57-0.86-1.02-0.79-1.4c0.07-0.37 0.48-0.62 1.16-0.71c0.67-0.1 1.62 0.01 2.76 0.01c0.55 0 1.24-0.11 1.96-0.16c0.73-0.07 1.51-0.14 2.34-0.21c0.4-0.04 0.89-0.07 1.38-0.04c0.49 0.03 0.97 0.1 1.46 0.16c0.48 0.07 0.97 0.14 1.44 0.17c0.24 0.01 0.47 0.02 0.7 0.01c0.25-0.02 0.5-0.03 0.75-0.05c0.49-0.05 1.22-0.12 2.2-0.23c0.49-0.05 1.05-0.09 1.67-0.1c0.55 0 1.16-0.05 1.83-0.12c0.67-0.07 1.42-0.16 2.23-0.19c0.83-0.02 1.6 0.03 2.47 0.05c0.85 0.03 1.74 0.07 2.66 0.1c0.92 0.01 1.87 0.03 2.86 0.04c1.97 0.05 4.05 0.03 6.22 0.05c2.17-0.06 4.44-0.16 6.76-0.17c0.58-0.01 1.17-0.01 1.75-0.02c0.57-0.02 1.24 0.01 1.84 0.11c1.24 0.19 2.36 0.48 3.51 0.47c1.21 0.05 2.42 0.11 3.64 0.16c0.63 0.05 1.16 0.03 1.76-0.07l1.82-0.33c0.35-0.06 0.7-0.11 1.05-0.14l0.54-0.02l0.5 0.02c0.67 0.02 1.34 0.03 2.01 0.05c0.67 0.01 1.34 0.02 2 0.03c0.71-0.01 1.39 0.07 2.05 0.17c0.66 0.1 1.3 0.2 1.92 0.23c0.6 0.03 1.27-0.06 1.91-0.1c1.28-0.1 2.55-0.2 3.79-0.3c1.22-0.11 2.44-0.35 3.68-0.43c1.18-0.03 2.29-0.29 3.47-0.46c1.16-0.2 2.38-0.15 3.44 0c0.54 0.07 1.05 0.14 1.54 0.18c0.5 0.05 0.95 0.03 1.46 0.04c0.99 0.02 1.94 0.04 2.84 0.06c0.45 0.01 0.88 0.03 1.31 0.04c0.41 0 0.81-0.01 1.2-0.03c0.79-0.04 1.54-0.09 2.25-0.08c0.35 0 0.71 0.03 1.03 0.06c0.3 0.03 0.6 0.06 0.87 0.09c1.12 0.09 2.03 0.22 2.65 0.51C99.68 1.31 100 1.72 99.98 2.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -2px;
    content: "";
    height: 7px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s ease-in;
    width: 100%;
}

.nav-link:hover::after {
    opacity: 1;
}


/* ----------------------------- */
/* Portfolio */
/* ----------------------------- */

.cap {
    background-color: #3F3E3E;
    border: 2px solid #333;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    color: #fff;
    line-height: 1.25em;
    padding: 1rem;
    width: 100%;
}

.hero {
    display: grid;
}

.hero-image {
    margin: 0 auto;
    max-width: 20rem;
}

.hero h1 {
    line-height: 1.2em;
    margin: 2rem 0;
}

.handwritten {
    position: relative;
}

.handwritten::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='10' viewBox='0 0 300 10'%3E%3Cpath fill='%23BBD974' d='M6.17 8.49C80.91 8.16 155.66 8.19 230.4 8.58c21.22 0.11 42.43 0.25 63.65 0.42c1.31 0.01 1.29-7.25-0.22-7.26C219.09 1.14 144.35 0.9 69.6 1.03c-21.22 0.04-42.43 0.1-63.65 0.2C4.61 1.24 4.7 8.5 6.17 8.49L6.17 8.49z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: calc(-1 * 6px);
    content: '';
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}

/* ----------------------------- */
/* Footer */
/* ----------------------------- */

footer {
    padding: 4rem 0;
}

footer h2 {
    border-top: 3px solid #333;
    padding-top: 2rem;
}

.footer-icon {
    height: 1.25rem;
    margin-right: 0.5rem;
    width: 1.25rem;
}

.footer-link {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333;
    display: flex;
    padding: 0.5rem 0;
    position: relative;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: none;
}

.footer-link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='7' viewBox='0 0 100 7'%3E%3Cpath fill='currentColor' d='M99.98 2.2c-0.02 0.49-0.35 0.85-0.96 1.16c-0.6 0.3-1.48 0.59-2.63 0.77c-1.13 0.11-2.5 0.25-4.08 0.4c-0.4 0.03-0.82 0.06-1.26 0.06c-0.42-0.02-0.86-0.03-1.3-0.05c-0.89-0.05-1.82-0.1-2.8-0.15c-0.48-0.04-1.01-0.04-1.54-0.11c-0.53-0.07-1.05-0.17-1.57-0.27c-1.06-0.21-2.06-0.35-3.16-0.25c-1.1 0.08-2.28 0.28-3.51 0.25c-1.15-0.02-2.36 0.15-3.62 0.21c-1.25 0.05-2.51 0.1-3.8 0.14C69.1 4.4 68.48 4.46 67.8 4.45c-0.68-0.02-1.34-0.13-1.99-0.23c-0.65-0.1-1.29-0.19-1.93-0.2c-0.66 0-1.32 0.01-1.98 0.01c-0.67 0.01-1.34 0.02-2.01 0.03c-0.69 0-1.31 0.03-1.96 0.19c-1.17 0.25-2.45 0.72-3.71 0.71C52.98 4.98 51.77 5 50.56 5.03C49.97 5.04 49.29 5.08 48.68 5c-0.6-0.07-1.2-0.13-1.8-0.2c-0.59-0.06-1.12-0.08-1.71-0.03c-0.59 0.04-1.18 0.08-1.77 0.12c-2.34 0.15-4.62 0.37-6.82 0.56c-2.19 0.12-4.3 0.25-6.27 0.3c-0.98 0.04-1.94 0.07-2.86 0.11c-0.92 0.01-1.8 0.02-2.65 0.03c-0.83 0.02-1.67 0.02-2.38 0.06c-0.72 0.06-1.42 0.17-2.1 0.28c-0.67 0.1-1.32 0.19-1.93 0.21c-0.55 0.02-1.05 0.08-1.51 0.14c-0.92 0.12-1.66 0.23-2.17 0.27c-0.27 0.02-0.53 0.04-0.81 0.04c-0.29 0-0.56-0.01-0.84-0.04c-0.55-0.06-1.07-0.16-1.56-0.27C11 6.5 10.54 6.39 10.09 6.32C9.65 6.24 9.25 6.2 8.78 6.18C7.87 6.11 7.02 6.02 6.22 5.88c-0.8-0.14-1.51-0.26-2.2-0.52C2.67 4.84 1.75 4.13 1.15 3.58c-0.59-0.57-0.86-1.02-0.79-1.4c0.07-0.37 0.48-0.62 1.16-0.71c0.67-0.1 1.62 0.01 2.76 0.01c0.55 0 1.24-0.11 1.96-0.16c0.73-0.07 1.51-0.14 2.34-0.21c0.4-0.04 0.89-0.07 1.38-0.04c0.49 0.03 0.97 0.1 1.46 0.16c0.48 0.07 0.97 0.14 1.44 0.17c0.24 0.01 0.47 0.02 0.7 0.01c0.25-0.02 0.5-0.03 0.75-0.05c0.49-0.05 1.22-0.12 2.2-0.23c0.49-0.05 1.05-0.09 1.67-0.1c0.55 0 1.16-0.05 1.83-0.12c0.67-0.07 1.42-0.16 2.23-0.19c0.83-0.02 1.6 0.03 2.47 0.05c0.85 0.03 1.74 0.07 2.66 0.1c0.92 0.01 1.87 0.03 2.86 0.04c1.97 0.05 4.05 0.03 6.22 0.05c2.17-0.06 4.44-0.16 6.76-0.17c0.58-0.01 1.17-0.01 1.75-0.02c0.57-0.02 1.24 0.01 1.84 0.11c1.24 0.19 2.36 0.48 3.51 0.47c1.21 0.05 2.42 0.11 3.64 0.16c0.63 0.05 1.16 0.03 1.76-0.07l1.82-0.33c0.35-0.06 0.7-0.11 1.05-0.14l0.54-0.02l0.5 0.02c0.67 0.02 1.34 0.03 2.01 0.05c0.67 0.01 1.34 0.02 2 0.03c0.71-0.01 1.39 0.07 2.05 0.17c0.66 0.1 1.3 0.2 1.92 0.23c0.6 0.03 1.27-0.06 1.91-0.1c1.28-0.1 2.55-0.2 3.79-0.3c1.22-0.11 2.44-0.35 3.68-0.43c1.18-0.03 2.29-0.29 3.47-0.46c1.16-0.2 2.38-0.15 3.44 0c0.54 0.07 1.05 0.14 1.54 0.18c0.5 0.05 0.95 0.03 1.46 0.04c0.99 0.02 1.94 0.04 2.84 0.06c0.45 0.01 0.88 0.03 1.31 0.04c0.41 0 0.81-0.01 1.2-0.03c0.79-0.04 1.54-0.09 2.25-0.08c0.35 0 0.71 0.03 1.03 0.06c0.3 0.03 0.6 0.06 0.87 0.09c1.12 0.09 2.03 0.22 2.65 0.51C99.68 1.31 100 1.72 99.98 2.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -2px;
    content: "";
    height: 7px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s ease-in;
    width: 100%;
}

.footer-link:hover::after {
    opacity: 1;
}

/* ----------------------------- */
/* Portfolio Pages */
/* ----------------------------- */

.portfolio {
    margin: 2rem 0;
}

.portfolio-item {
    margin-bottom: 2rem;
}

.flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex button {
    width: 7rem;
}

button {
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    position: relative;
}

button::before {
    align-items: center;
    background-color: #A0C5FF;
    border: 2px solid #212054;
    border-radius: 0.25rem;
    content: attr(data-title);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.2s ease;
    width: 100%;
    z-index: 1;
}

button:hover::before {
    transform: translate(4px, 6px);
}

button::after {
    background-color: #346EC9;
    border: 2px solid #346EC9;
    border-radius: 0.25rem;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(4px, 6px);
    width: 100%;
}


/* ----------------------------- */
/* About */
/* ----------------------------- */

.bio {
    margin: 4rem 0;
    padding-left: 5%;
}

.bio-txt {
    margin-bottom: 2rem;
}

.bio-pic {
    margin: 0 auto;
    max-width: 30rem;
}

.bio-content {
    align-self: center;
}

/* ----------------------------- */
/* Screen Width up to 40rem */
/* ----------------------------- */

@media only screen and (max-width: 40rem) {

    /****** Basic Setup ******/
    
    h1 {
        font-size: 2.5rem;
    }  
   
    
    /****** Footer ******/
    
    .footer-nav > * + * {
        margin-top: 0.5rem;
    }
    
    /****** Portfolio ******/
    
    .cover {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* ----------------------------- */
/* Screen Width larger than 40rem */
/* ----------------------------- */

@media only screen and (min-width: 40rem) {

    /****** Footer ******/

    .footer-nav {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: flex;
        margin: 0 calc(-1 * 1rem);
    }
    
    .footer-link {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: flex;
        margin: 0 1rem;
    }
}

/* ----------------------------- */
/* Screen Width larger than 60rem */
/* ----------------------------- */

@media only screen and (min-width: 60rem) {
    /****** Grid System ******/

    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /****** Portfolio ******/
    
    .cap {
        position: absolute;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        -webkit-transition: transform .3s ease-in-out;
        -o-transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transform: translateY(10rem);
        width: 100%;
    }

    .portfolio-item {
        overflow: hidden;
        position: relative;
    }
    
    .portfolio-item a:hover {
        text-decoration: none;
    }

    .portfolio-item:hover .cap {
        transform: translateY(0);
    }
    
    .hero {
        grid-template-columns: 1fr 1fr;
        margin: 2rem 0 8rem 0;
    }
    
    .hero-content {
        align-self: center;
    }
    
    .hero-image {
        margin: 0;
        max-width: 30rem;
        order: 2;
    }
    
}

/* ----------------------------- */
/* Screen Width larger than 80rem */
/* ----------------------------- */

@media only screen and (min-width: 80rem) {
    
    /****** Portfolio ******/
    
    .hero {
        grid-template-columns: 3fr 2fr;
    }
}