* {
    box-sizing: border-box;
}

body {
    background: #f3f3f3;
    font-family: 'Garamond', 'EB Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', 'serif';
    margin: 0;
    font-size: 20px;
}

p {
    margin: 20px 0;
}

a {
    color: #ff1164;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

li {
    list-style: none;
    position: relative;
}

li:before {
    content: "•";
    color: #ff1164;
    font-size: 1.5em;
    position: absolute;
    left: -21px;
    top: -5px;
}

.no-bullet:before {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display SC', serif;
    text-transform: uppercase;
    margin: 0;
}

h1 {
    text-align: center;
    font-size: 55px;
}

h2 {
    font-size: 45px;
}

h3 {
    font-size: 35px;
}

h4 {
    font-size: 25px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 5px;
}

.site-header {
    position: relative;
    padding-bottom: 40px;
}

.site-title {
    display: block;
    margin: 35px 0;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('img/businesscard.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 300px;
}

nav ul {
    text-align: center;
    padding: 0;
}

nav ul li {
    display: inline-block;
}

nav li:before {
    content: '';
    display: none;
}

nav ul li a {
    position: relative;
    color: #000;
    text-decoration: none;
    font-family: 'Playfair Display SC', serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
    margin-right: 80px;
}

nav ul li a:hover,
nav ul li a:focus {
    text-decoration: none;
}

nav ul li a:hover:after,
nav ul li a:focus:after {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.about a:hover:after,
.about a:focus:after {
    background-image: url('img/aboutoverlay.png');
    width: 64px;
    height: 40px;
    left: 0;
    bottom: 0;
    width: 75px;
    height: 45px;
}

.section-wrapper img {
    max-width: 100%;
}

.work a:hover:after,
.work a:focus:after {
    background-image: url('img/workoverlay.png');
    width: 64px;
    height: 40px;
    left: -7px;
    bottom: 7px;
}

.contact a:hover:after,
.contact a:focus:after {
    background-image: url('img/contactoverlay.png');
    width: 105px;
    height: 60px;
    left: 3px;
    bottom: -1px;
}

nav ul li:last-child a {
    margin-right: 0;
}

.site-content {
    width: 100%;
    background: #fff;
    min-height: 700px;
    height: auto;
    line-height: 1.4;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1000ms;
}

.site-content.open {
    transform: scaleY(1);
    transition: transform 1000ms;
}

.close {
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: -25px;
    z-index: 10;
    left: calc(50% - 25px);
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('img/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: 1000ms;
}

.close.visible {
    opacity: 1;
}

.about-header,
.work-header,
.contact-header {
    display: block;
    margin: 0 auto;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('img/about_subheader.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100px;
    max-width: 550px;
}

.work-header {
    background-image: url('img/work_subheader.png');
}

.contact-header {
    background-image: url('img/contact_subheader.png');
}

.section-wrapper {
    padding: 45px 15px;
    width: 100%;
    overflow: hidden;
}

section {
    height: 0;
    opacity: 0;
    transition: opacity 500ms;
    margin: 0 auto;
    width: 100%;
}

section.target {
    opacity: 1;
    height: auto;
    max-width: 650px;
    position: relative;
}

.work-section h2 {
    color: #ff1164;
    text-align: center;
}

.work-section h3 {
    color: #000;
    text-align: left;
    text-transform: initial;
    margin-top: 25px;
}

.portfolio {
  text-align: center;
}

.portfolio > a {
    max-width: 260px;
    display: inline-block;
    margin: 7px;
    vertical-align: top;
}

.portfolio > a:hover,
.portfolio > a:focus {
    text-decoration: none;
}


.portfolio > a:hover .caption,
.portfolio > a:focus .caption {
    color: #ff1164;
}

.portfolio > a:hover img,
.portfolio > a:focus img {
    outline: 3px solid;
}

.portfolio img {
    max-width: 100%;
}

.portfolio .caption {
  text-align: center;
  color: #000;
}

.lightbox-wrapper {
  display: none;
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
}

.lightbox-wrapper.active {
  display: block;
}

.lightbox-wrapper .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-wrapper .contents {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: auto;
    text-align: center;
    top: 50%;
    margin-top: -180px;
}

.lightbox-wrapper .title {
    font-size: 21px;
    font-family: serif;
    text-transform: none;
    font-weight: normal;
    text-align: left;
}

.lightbox-wrapper iframe {
    width: 100%;
    height: 360px;
}

.lightbox-wrapper .caption {

}

input,
textarea {
    display: block;
    background-color: #f3f3f3;
    color: #000;
    padding: 10px;
    font-size: 18px;
    width: 100%;
    border: 0;
    margin: 20px 0;
}

input[name="email"],
input[name="name"] {
    display: inline-block;
    width: 48%;
}

input[name="name"] {
    margin-left: 10px;
    float: right;
}

button {
    display: block;
    cursor: pointer;
    font-size: 18px;
    background-color: #ff1164;
    color: #fff;
    width: 100%;
    padding: 10px;
    border: 0;
    font-family: 'Garamond', 'EB Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', 'serif';
    font-weight: bold;
}

.social-links {
    padding: 0;
    margin: 0;
    margin-top: 100px;
}

.social-links li {
    display: inline-block;
    margin-right: 64px;
}

.social-links li:before {
    content: '';
    display: none;
}

.social-links li:last-child {
    display: inline-block;
    margin-right: 0;
}

.social-links a {
    display: inline-block;
    width: 100px;
    height: 100px;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url('img/socials_facebook.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.social-links .youtube a {
    background-image: url('img/socials_youtube.png');
}

.social-links .facebook a {
    background-image: url('img/socials_facebook.png');
}

.social-links .twitter a {
    background-image: url('img/socials_twitter.png');
}

.social-links .tumblr a {
    background-image: url('img/socials_tumblr.png');
}

@media screen and (max-width: 400px) {
    nav ul li {
        display: block;
        margin-bottom: 30px;
    }
    nav ul li:last-child {
        margin-bottom: 0;
    }

    nav ul li a {
        margin: 0;
    }
}

.doodle.fin {
    display: block;
    margin: auto;
    margin-top: 75px;
    width: 81px;
    height: 50px;
}

#about ul li:last-child:after {
    content: '';
    display: block;
    width: 105px;
    height: 23px;
    background-image: url('img/doodles/about/andphones.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -70px;
    top: 0;
}


#about ul {
    position: relative;
}

#about ul:before {
    content: '';
    display: block;
    width: 148px;
    height: 82px;
    background-image: url('img/doodles/about/cottongin.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -170px;
    top: 0;
}

.fast-facts-heading {
    position: relative;
}

.fast-facts-heading:after {
    content: '';
    display: block;
    width: 158px;
    height: 42px;
    background-image: url('img/doodles/about/okwegetit.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -180px;
    top: -20px;
}

.getting-bored {
    position: relative;
}

.getting-bored:before {
    content: '';
    display: block;
    width: 98px;
    height: 84px;
    background-image: url('img/doodles/about/gettingbored.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -210px;
    top: -45px;
}

.huh {
    position: relative;
}

.huh:before {
    content: '';
    display: block;
    width: 57px;
    height: 45px;
    background-image: url('img/doodles/about/huh.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -144px;
    top: 25px;
}

.interesting {
    position: relative;
}

.interesting:after {
    content: '';
    display: block;
    width: 122px;
    height: 42px;
    background-image: url('img/doodles/about/interesting.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -244px;
    top: -45px;
}

.im-a-photograph {
    position: relative;
}

.im-a-photograph:after {
    content: '';
    display: block;
    width: 179px;
    height: 77px;
    background-image: url('img/doodles/about/imaphotograph.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -130px;
    top: -45px;
}

.shows-heading {
    position: relative;
}

.shows-heading:before {
    content: '';
    display: block;
    width: 69px;
    height: 49px;
    background-image: url('img/doodles/work/wow.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -139px;
    top: 0;
}

.music-heading {
    position: relative;
}

.music-heading:before {
    content: '';
    display: block;
    width: 146px;
    height: 90px;
    background-image: url('img/doodles/work/nowthatswhaticall.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 8px;
    top: -30px;
}

.portfolio {
    position: relative;
}

.portfolio.videos:before {
    content: '';
    display: block;
    width: 178px;
    height: 108px;
    background-image: url('img/doodles/work/thesearejustpictures.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -140px;
    top: 0;
}

.games-list {
    position: relative;
}

.games-list {
    margin-bottom: 100px;
}

.games-list:after {
    content: '';
    display: block;
    width: 153px;
    height: 54px;
    background-image: url('img/doodles/work/impressive.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 0;
    top: 0;
}

.write-a-poem {
    position: relative;
}

.write-a-poem:before {
    content: '';
    display: block;
    width: 125px;
    height: 84px;
    background-image: url('img/doodles/contact/writeapoem.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -261px;
    top: 0;
}

.social-links {
    position: relative;
}

.social-links:before {
    content: '';
    display: block;
    width: 124px;
    height: 85px;
    background-image: url('img/doodles/contact/followme.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: -249px;
    top: 0;
}

.idea-electronic-mail {
    position: relative;
}

.idea-electronic-mail:after {
    content: '';
    display: block;
    width: 77px;
    height: 78px;
    background-image: url('img/doodles/contact/ideaelectronicmail.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -170px;
    top: -60px;
}

.contact-submit-button {
    position: relative;
}

.contact-submit-button:after {
    content: '';
    display: block;
    width: 113px;
    height: 92px;
    background-image: url('img/doodles/contact/largebutton.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: -136px;
    bottom: 0;
}

#contact form {
    margin-bottom: 100px;
}