html {
    overflow-x: hidden;
}

body {
    margin: 0;
    background: #555;
    overflow-x: hidden;
}

ul {
    list-style-type: none;
    padding: 0;
}

/* ------ ANIMATIONS ------ */

.ajax-loaded {
    animation-duration: 0.5s;
    animation-name: ajax-loaded;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

@keyframes ajax-loaded {
    from {
        width: 0;
    }

    to {
        width: 20%;
    }
}

.story-content-loaded {
    animation-duration: 0.5s;
    animation-name: story-content-loaded;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

@keyframes story-content-loaded {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* ------ UTILITY CLASSES ------ */

.hidden {
    display: none;
}

.shown {
    display: block !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

.full-width {
    width: 100% !important;
}

.full-height {
    height: 100% !important;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-bottom {
    top: auto !important;
    bottom: 0 !important;
}

.position-fixed {
    position: fixed;
}

.display-inline-block {
    display: inline-block;
}

/* ------ FONT UTILITY CLASSES ------ */

.font-lato {
    font-family: 'Lato', 'Helvetica Neue', sans-serif;
}

.kr.font-lato {
    font-family: 'Noto Sans KR', sans-serif;
}

.kr #book {
    font-family: 'Lato', 'Helvetica Neue', sans-serif;
}

.font-arvo {
    font-family: 'Arvo', 'Lato', 'Helvetica Neue', sans-serif;
}

.kr #commuting-skit .font-arvo {
    font-family: inherit;
}

.font-white {
    color: white;
}

/* ------ WELCOME ------ */

.welcome-text-container {
	height: 100vh;
	background: #2F50B8;
}

.welcome-text {
    width: calc(100% - 40px);
    padding-top: calc(50vh - 50px);
    padding-left: 20px;
    padding-right: 20px;
    font-size: 32px;
}


/* ------ PASSWORD ------ */


#personal-phrase-form {
    height: 200px;
    margin-top: calc(50vh - 120px);
    font-size: 24px;
}

#personal-phrase-form p {
    margin-top: 0;
}

#personal-phrase-form input {
    width: 300px;
    display: block;
    height: 30px;

    padding: 15px;
    margin: 0 auto;

    border: 3px solid rgba(0,0,0,0);
    border-radius: 5px;

    background: #000;

    font-size: 24px;
    color: #aaa;
    cursor: pointer !important;

    opacity: 0.5;
}

#personal-phrase-form input:disabled {
    opacity: 0.2;
}

#personal-phrase-form input:focus {
    outline: none;
    border: 3px solid white;
}

#personal-phrase-form button {
    width: 336px;

    padding: 15px;
    margin: 15px;

    border: 1px solid #ddd;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.75);

    letter-spacing: 4px;
    color: #aaa;
}

#personal-phrase-form button:hover {
    background: #fff;
}

#personal-phrase-form button:focus {
    outline: none;
    background: #ddd;
    border-color: #999;
}

#personal-phrase-form .anon-login {
    letter-spacing: 2px;
    color: #ddd;
    font-size: 16px;
    text-decoration: none;
}

#personal-phrase-form .anon-login:hover {
    text-decoration: underline;
}

/* ------ NAVIGATION ------ */

#navigation {
    padding: 15px 0 20px 0;
    background-color: rgba(255,255,255,0.9);
    z-index: 1;
}

#navigation .nav-link {
    margin: 5px;
    padding: 10px;
    padding-right: 4px;
    border-radius: 5px;

    text-decoration: none;
    letter-spacing: 4px;
    font-weight: bold;
    font-size: 12px;

    color: #333;
}

#navigation .nav-link:not(.selected):hover {
    background-color: #ddd;
}

#navigation .nav-link.selected {
    color: #999;
    cursor: default;
}

#navigation .nav-link.selected:hover {
    border: 0;
}

/* ------ CHAPTER NAVIGATION ------ */

#chapter-navigation {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    z-index: 15;
    opacity: 0;
}

#chapter-navigation .chapter-link {
    padding: 15px 20px;
}

#chapter-navigation .bullet {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
}

#chapter-navigation .bullet:hover {
    background-color: #fff;
}

#chapter-navigation .label {
    top: 8px;
    left: 55px;
    padding: 5px 10px;
    min-width: 50px;
    height: 20px;
    border-radius: 2px;
    background-color: #fff;
    white-space: nowrap;
    display: none;
    font-size: 12px;
    line-height: 20px;
}

#chapter-navigation .label:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-right-color: #fff;
    border-left: 0;
    margin-top: -14px;
    margin-left: -14px;
}

/* ------ HEADER ------ */

.header {
    height: calc(100vh - 100px);
    min-height: 500px;
    overflow: hidden;
}

.page .header-background {
    height: calc(100vh + 100px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

.page--events {
    background-image: url(../images/cardboard-very-dark.png);
}

.page--events .header-background {
    background-image: url(../images/bikes.jpg);
}

.page--rsvp .header-background {
    background-image: url(../images/mt-st-michel.jpg);
}

.page--gifts .header-background {
    background-image: url(../images/butt-bump-still.jpg);
    background-position: center;
}

.header-text {
    top: 100px;
}

.page--rsvp .header-title {
    letter-spacing: 6px;
    font-size: 36px;
    line-height: 48px;
    padding-left: 40px;
    padding-right: 40px;
}

.kr .page--rsvp .header-title {
    padding-top: 115px;
    font-size: 24px;
    line-height: 32px;
}

.kr .page--rsvp .header-title p {
    margin-bottom: 25px;
}

.fr .page--rsvp .header-title {
    font-size: 26px;
    line-height: 32px;
    padding-top: 100px;
}

.page--rsvp .details,
.page--gifts .details {
    padding: 0;
    margin: 30px 0;
    font-size: 14px;
    line-height: 1.5em;
    color: #222;
}

.button-label {
    display: inline-block;
    user-select: none;
    padding: 20px;
    margin: 10px;

    border-radius: 5px;
    border: 1px solid #222;

    font-size: 14px;
    letter-spacing: 1px;
}

.button-label:hover {
    background: rgba(0, 0, 0, 0.1);
}

.button-label:active {
    transform: translateY(2px);
}

.attending-fields {
    margin: 30px;
}

.rsvp-content .details.emoji-spacer {
    font-size: 32px;
}

.checkbox {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    display: inline-block;

    margin-left: 10px;
    margin-bottom: -5px;
    border-radius: 2px;
    border: 1px solid #222;

    background-color: white;
    text-align: center;
}

.checkbox:hover {
    background: #ddd;
}

.checkbox:active {
    background: #ccc;
}

.checkbox .checkbox-icon {
    display: none;
    left: 5px;
    top: -3px;
    font-style: normal;
    font-size: 18px;

    -webkit-transform: scaleX(1.2);
    transform: scaleX(1.2);
}

.attending-checkbox:checked + .checkbox-label .checkbox-icon{
    display: block;
}

.checkbox-label {
    line-height: 20px;
    display: block;
    margin: 10px;
    font-size: 16px;
    letter-spacing: 2px;
}

.user-info-form .button-label {
    padding: 15px;
    min-height: 25px;
}

.user-info-form input[type="checkbox"]:checked + .button-label {
    background: rgba(255, 255, 255, 0.8);
}

.user-info-form input:focus {
    outline: none;
    border-color: #666;
}

.contact-fields {
    margin-bottom: 60px;
}

.icon-input-wrapper label {
    font-size: 24px;
    padding-right: 10px;
}

.icon-input-wrapper input {
    font-size: 16px;
    border: 0;
    width: 300px;
    border-bottom: 2px solid #aaa;
    background: none;
    letter-spacing: 2px;
    padding: 20px 20px 5px 0;
}

.other-restriction-specification {
    display: none;
    border: 0;
    width: 200px;
    border-bottom: 2px solid #aaa;
    background: none;
    letter-spacing: 1px;
    padding: 0 0 5px 0;
    margin-left: 5px;
}

.other-restriction-button br {
    display: none;
}

input.other-restriction-button:checked + .button-label .other-restriction-specification,
input.other-restriction-button:checked + .button-label .other-restriction-specification {
    display: inline;
}

.yes-button:checked + .button-label,
.yes-button + .button-label:hover {
    background: rgba(4, 136, 4, 0.6);
    color: #fff;
    border-color: #fff;
}

.yes-button:checked + .button-label:hover {
    background: rgba(4, 136, 4, 0.7);
}

.no-button:checked + .button-label {
    background: rgba(0, 0, 0, 0.2);
}

.no-button:checked + .button-label:hover {
    background: rgba(0, 0, 0, 0.3);
}

.rsvp-content,
.gifts-content {
    width: 600px;
    margin: 30px auto;
}

.gifts-content img.beatles {
    display: block;
    width: 50%;
    min-width: 250px;
    margin: 0 auto;
}

.all-you-need-is-love {
    font-weight: bold;
    color: #d83434;
}

.rsvp-celebrate-text {
    font-size: 24px;
    letter-spacing: 1px;
    color: #222;
}

.button-label.submit-button {
    width: 300px;
    margin: 60px calc(50% - 150px);
    background: #f3c24a;
    color: #222;
    border: 2px solid #f1b932;
}

.button-label.submit-button:hover,
.button-label.submit-button:active {
    background: #f1b932;
}

.button-label.submit-button:focus,
.button-label.submit-button:active {
    outline: none;
}

.page--rsvp .details.error {
    color: #ca1818;
    font-weight: bold;
    background: #f5eeee;
    margin: 30px auto;
    padding: 15px;
    border-radius: 10px;
    max-width: 400px;
    border: 1px solid #ca1818;
}

.page--rsvp .details.error p {
    margin: 0;
}

.page--rsvp .details.info {
    color: #0065ea;
    font-weight: bold;
    background: #eef5ff;
    margin: 30px auto;
    padding: 15px;
    border-radius: 10px;
    max-width: 400px;
    border: 1px solid #0065ea;
}

.page--rsvp .details.info a {
    color: #5da0f9;
}

.page--rsvp .details.success {
    color: #048804;
    font-weight: bold;
    background: #c6dec6;
    margin: 30px auto;
    padding: 15px;
    border-radius: 10px;
    max-width: 400px;
    border: 1px solid #048804;
}

.page--gifts .header-text {
    top: 50%;
    text-align: center;
}

.kr .header-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 84px;
    padding-top: 60px;
}

.header-title {
    font-size: 64px;
    letter-spacing: 12px;
    padding-top: 90px;
    margin: 0 auto;
}

.page--gifts .header-title {
    padding-top: 0;
}

.header-title-container {
    height: 360px;
    width: 500px;
    margin: 0 auto;

    background-image: url(/static/images/penguinbooks-logo.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;

    color: #000;
}

.header-title p {
    font-size: 48px;
    margin: 0 0 15px;
    letter-spacing: 12px;
}

.kr .header-subtitle {
    font-family: 'Noto Serif KR';
    letter-spacing: 15px;
}

.pages--rsvp .header-title {
    font-size: 72px;
    letter-spacing: 12px;
}

.header-subtitle {
    font-size: 26px;
    letter-spacing: 6px;
    line-height: 36px;
    font-weight: normal;
}

.page-title {
    margin: 0 0 60px;
    padding-top: 60px;
    letter-spacing: 8px;
    color: #333;
    font-size: 24px;
}

.page--events .page-title .kr-translation,
.page--events .events-summary table .kr-translation {
    font-family: 'Noto Sans KR', sans-serif;
}

.page--events .page-title {
    color: #dfdfdf;
}

.page-centered-content {
    width: 600px;
    margin: 60px auto;
}

.page-centered-content table td {
    vertical-align: top;
}

.page-centered-content .details p:first-child {
    margin-top: 0;
}

td {
    padding-bottom: 30px;
}

.when {
    color: #666;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-align: right;
    width: 145px;
}

.details {
    padding-left: 30px;
    letter-spacing: 2px;
    font-size: 16px;
    color: #999;
}

.where {
    font-size: 14px;
    letter-spacing: 2px;
    color: #666;
    width: 170px;
    padding-left: 15px;
    padding-right: 15px;
}

.event-image {
    top: 0; 

    width: 50vw;
    min-width: 300px;
    height: 100%;
    min-height: 600px;

    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}

.you-are-invited.you-are-invited--sf {
    --color: #da4f1a;
}

.you-are-invited.you-are-invited--kr {
    --color: #0878ce;
}

.you-are-invited.you-are-invited--fr {
    --color: #f7bf0d;
}

.you-are-invited p {
    top: 5px;
    color: #fff;
}

.you-are-invited {
    cursor: pointer;
}

.event-address-directions {
    padding: 10px;

    background-color: var(--color);
    box-shadow: 2px 2px 0 0px var(--shadow-color);

    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;

    cursor: default;
}

.add-to-gcal-link {
    position: absolute;
    display: inline-block;
    padding: 5px 10px;
    top: 5px;
    right: 0;
    background-color: #fff;
    color: var(--color);
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 2px;
}

.add-to-gcal-link:hover {
    background-color: var(--color);
    color: #fff;
}

.event-address-directions.desktop-only  {
    top: 20px;
    right: 20px;
}

.event-address-directions.mobile-only {
    display: block;
    margin-top: 20px;
    width: 110px;
}

.event-address-directions:hover {
    top: 21px;
}

.event-address-directions:active {
    top: 22px;
}

.event-details--sf-croquet-party .event-address-directions,
.event-details--sf-croquet-party .add-to-gcal-link
{
    --color: #eb4100;
    --shadow-color: #ffbd00;
}

.event-details--korea-dinner-party .event-address-directions,
.event-details--korea-dinner-party .add-to-gcal-link
{
    --color: #0878ce;
    --shadow-color: #da4f1a;
}

.event-details--france-garden-party .event-address-directions,
.event-details--france-garden-party .add-to-gcal-link {
    --color: #ffbd00;
    --shadow-color: #0878ce;
    color: #333;
}

.event-image-background {
    height: 115%;
    background-repeat: no-repeat;
    background-size: cover;
}

.event-details {
    line-height: 24px;
    background-image: url(../images/cardboard-flat.png);
    min-height: 100vh;
    overflow: hidden;
    border-bottom: 1px solid #333;
}

.event-details--sf-croquet-party .event-image {
    left: 0;
}

.event-details--sf-croquet-party .event-description {
    left: 50%;
}

.event-details .event-dress-code {
    color: #333;
}

.event-details--sf-croquet-party .event-image-background {
    background-image: url(../images/ggb.jpg);
}

.event-details--korea-dinner-party .event-image {
    left: 50%;
}

.event-details--korea-dinner-party .event-description {
    left: 0;
}

.event-details--korea-dinner-party .event-image-background {
    background-image: url(../images/handus.jpg);
}

.event-details--france-garden-party .event-image {
    left: 0;
}

.event-details--france-garden-party .event-description {
    left: 50%;
}

.event-details--france-garden-party .event-image-background {
    background-image: url(../images/eiffel.jpg);
}

.event-image-text {
    top: 200px;
    left: 50%;
    transform: translate(-50%, -50%);

    letter-spacing: 12px;
    font-size: 38px;
    line-height: 40px;
}

.kr .event-image-text {
    font-family: 'Noto Serif KR', serif;
    line-height: 60px;
}

.event-image-text .event-image-date {
    font-size: 72px;
    margin: 0;
}

.event-description {
    width: 50%;
    min-width: 300px; 
    padding: 20px 0;
}

.event-instructions {
    width: 80%;
    min-width: 300px;
    margin: 30px auto;
}

.event-name {
    font-size: 16px;
    letter-spacing: 2px;
}

.kr .event-name {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: 28px;
    font-weight: normal;
}

.event-date {
    color: #888;
    letter-spacing: 2px;
    font-size: 12px;
}

.event-address {
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
    box-shadow: 5px 5px 0 0 var(--color);
}

.event-details--sf-croquet-party .event-address {
    --color: #da4f1a;
}

.event-details--korea-dinner-party .event-address {
    --color: #0878ce;
}

.event-details--france-garden-party .event-address {
    --color: #f7bf0d;
}

.event-time, .event-address, .event-dress-code {
    font-size: 14px;
    color: #333;
    letter-spacing: 1px;
}

.event-dress-code {
    margin: 30px 0;
}

.kr .event-dress-code {
    font-family: 'Noto Sans KR', 'Lato', sans-serif;
}

/* ------ GOOGLE MAPS ------ */

#map {
    width: 100%;
    height: 100%;
}

#map-container {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    left: 5px;
    top: 5px;
}

.timeline-frame-map p {
    position: absolute;
    left: 50px;
    top: 0;
    color: #333 !important;
}

/* ------ INTRO & STORY CONTAINER ------ */

#loading-bar {
    top: 0;
    height: 5px;
    z-index: 2;
}

#loading-bar-fill {
    background: white;
}

#intro {
    top: 0;
    bottom: 0;

    min-height: 500px;
    height: 85vh;

    z-index: -1;
	overflow: hidden;

	background: #2F50B8;
}

#mobile-intro {
    top: 0;
    bottom: 0;

    min-height: 500px;
    height: calc(100vh - 160px);

    background-image: url(../images/mobile-cover-low-res.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;

    filter: blur(15px);
}

#mobile-intro .header-title {
    margin: 0;
    font-size: 32px;
    letter-spacing: 4px;
    text-align: right;
    padding: 10px;
    line-height: 42px;
    color: #fff;
}

.arrow-down.first-arrow {
    left: calc(50% - 25px);
    top: -25px;

    width: 50px;
    height: 50px;
}

.page--our-story .arrow-top.floating-arrow {
    opacity: 0;
}

.arrow-top.floating-arrow {
    right: 15px;
    bottom: 15px;

    width: 30px;
    height: 30px;

    background-size: 16px;
}

.arrow-down {
    background-image: url(../images/arrow_down.svg);
}

.arrow-up {
    background-image: url(../images/arrow_up.svg);
}

.arrow-top {
    background-image: url(../images/arrow_top.svg);
}

.arrow {
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background-color: #fff;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center center;

    cursor: pointer;
    z-index: 10;
}

.arrow:hover {
    background-color: #ccc;
}

#story {
    background-image: url(../images/cardboard-very-dark.png);
    padding-top: 90px;
}

/* ------ CHAPTER TITLES ------ */

.chapter-title {
    text-align: center;
    padding-top: 60px;
}

.chapter-number {
    margin-bottom: 20px;
    font-size: 24px;
    letter-spacing: 4px;
    color: #565656;
}

.chapter-description {
    font-size: 48px;
    color: #fff;
    font-family: 'Arvo', 'Lato', 'Helvetica Neue', sans-serif;
}

.kr .chapter-description {
    font-family: 'Noto Sans KR', serif;
    font-weight: 900;
}

.chapter-title-skit {
    position: relative;
    width: 300px;
    height: 150px;
    margin: 30px auto;
}

/* -- ch. 1: the move -- */

.chapter-one-title .plane {
    top: 35px;
    left: 20px;

    width: 100px;
    height: 55px;

    background-image: url(../images/plane.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.chapter-one-title .cloud {
    width: 60px;
    height: 36px;

    background-image: url(../images/cloud2.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    opacity: 0.5;
}

.chapter-one-title .passing-cloud-left {
    top: 20px;
    left: 5px;
}

.chapter-one-title .passing-cloud-right {
    top: 70px;
    right: 30px;
}

/* -- ch. 2: fire -- */

.chapter-two-title .chapter-description {
    color: #ffee90;
}

.chapter-two-title #flame {
    width: 100px;
}

/* -- ch. 3: flowers for love -- */

.chapter-three-title #flowers {
    width: 400px;
}

.chapter-three-title .chapter-title-skit {
    width: 400px;
    height: 200px;
}

/* -- ch. 4: engagement ducks -- */

.chapter-four-title .chapter-title-skit {
    width: 352px;
    height: 200px;
}

.chapter-four-title .chapter-title-skit img {
    width: 170px;
    position: absolute;
}

#girl-duck {
    left: 0;
    transform: rotate(-10deg);
}

#boy-duck {
    right: 0;
    transform: rotate(10deg);
}


/* ------ TIMELINE ELEMENTS ------ */

.timeline-item {
    position: relative;
    width: 400px;
    letter-spacing: 1px;
    line-height: 1.5em;    
    border-color: #fff;
}

.timeline-item-mathieu {
    margin-left: calc(50%);
    padding-left: 20px;
    border-left: 1px solid #fff;
    text-align: left;
}

.timeline-item-jiwon {
    margin-left: calc(50% - 420px);
    padding-right: 20px;
    border-right: 1px solid #fff;
    text-align: right;
}

.timeline-date {
    margin-top: 0;
    font-size: 14px;    
    color: #ccc;
}

.timeline-story:first-child {
    margin-top: 0;
}

.timeline-story {
    margin-bottom: 0;
    font-size: 16px;
    color: #999;
}

.kr .timeline-story, .kr .timeline-frame {
    font-family: 'Noto Serif KR', serif;
}

.timeline-highlight {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.timeline-divider {
    width: 100%;
    height: 150px;    
    position: relative;
}

.timeline-divider::after {
    content: "";

    display: block;
    position: relative;
    left: 50%;
    height: 100%;
    border-left: 1px solid #fff;
}

.timeline-divider.divider-polaroid {
    height: 90px;
}

.timeline-divider.divider-start:before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 10px;

    border-top: 1px solid #fff;
}

.timeline-divider.divider-end::before {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 10px;

    border-bottom: 1px solid #fff;
}

.timeline-frame {
    position: relative;
    width: 600px;
    margin: 0 auto;
    border: 1px solid #fff;
}

.timeline-frame-no-after {
    position: relative;
    width: 600px;
    margin: 0 auto;
}

.timeline-frame::after {
    content: "";
    display: block;
    position: absolute;    
    top: 5px;
    left: 5px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border: 1px solid #fff;
}

.timeline-frame.timeline-frame-full {
    width: 100%;
    border-left: 0;
    border-right: 0;
}

.timeline-frame.timeline-frame-full .frame-image-container {
    left: 0;
    width: 100%;
}

.timeline-frame.timeline-frame-full::after {
    top: 5px;
    left: 0;
    width: 100%;
    border-left: 0;
    border-right: 0;
}

.timeline-frame p, .timeline-frame-no-after p {
    width: 80%;
    margin: 50px auto;
    font-family: 'Arvo', serif;
    font-size: 24px;
    line-height: 1.5em;
    color: #fff;
}

.kr .timeline-frame p, .timeline-frame-no-after p {
    font-family: inherit;
}

.timeline-frame-image {
    width: 800px;
    height: 450px;
    overflow: hidden;
}

.timeline-frame-map {
    width: 1000px;
    height: 600px;
    overflow: hidden;
    border: 1px solid #fff;
}

.frame-image-container {
    position: relative;
    top: 5px;
    left: 5px;
    overflow: hidden;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.frame-image {
    position: absolute;

    width: 800px;

    background-position: center;
    background-repeat: no-repeat;
}

.frame-image-overlay {
    position: absolute;
    width: 100%;
    background-position: center;
}

/* ------ SURFING ------ */

#surfing {
    top: -100%;
    height: 700px;
    background-image: url(../images/surfing.jpg);
    background-size: 120%;
}

/* ------ IRC SKIT ------ */

.timeline-divider.divider-irc-2015 {
    height: 900px;
    margin-bottom: -800px;
}

.timeline-frame.irc-2015-winter, .timeline-frame.irc-2015-winter::after {
    border-color: #ddd;
}

#irc-skit {
    width: 750px;
    height: 400px;
    margin: 0 auto;
    background: #cdcdcd;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#irc-skit a {
    color: #388ae4;
}

#irc-skit .irc-window-controls {
    position: absolute;
    top: 10px;
    left: 10px;
}
#irc-skit .irc-window-title {
    position: relative;
    margin-top: 10px;

    color: #333;
    font-size: 16px;
    font-family: 'Lato', sans-serif;

    text-align: center;
}
#irc-skit .irc-window-content {
    position: absolute;
    top: 40px;
    width: calc(100% + 2px);
    height: 330px;
    background: linear-gradient(#fdfdfd, #dddddd);
    outline: 1px solid #999;
    left: -1px;
    box-shadow: 0 4px 10px -5px gray;

    z-index: 10; /* 1 higher than the irc window tabs */
}

.irc-window-chat {
    position: relative;
    height: calc(100% - 27px);
    overflow: hidden;
}

.irc-messages-container {
    position: absolute;
    bottom: 0;

    width: 100%;
}

#irc-skit .irc-window-tab-london {
    position: absolute;
    bottom: -26px;
    left: 382px;

    padding: 5px;
    padding-left: 25px;
    font-size: 12px;

    border: 1px solid #999;
    border-top: #ddd;

    background: #ddd;

    box-shadow: 0 4px 10px -5px grey;
}

#irc-skit .irc-window-tabs {
    position: absolute;
    top: 370px;
    left: 0px;
    width: 100%;
    height: 20px;

    z-index: 9; /* 1 lower than the irc window content */
}

#irc-skit .irc-window-tab {
    display: inline-block;
    position: relative;
    padding: 5px;
    padding-left: 22px;
    font-size: 12px;
    border-right: 1px solid #999;
    height: 20px;
    line-height: 1.8em;
}

#irc-skit .irc-window-tab:last-child {
    border-right: none;
}

.irc-window-tab::before, .irc-window-tab-london::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 5px;
    top: 10px;
    background-image: url(../images/irc-green-bubble.png);
    background-size: 100%;
}

.irc-window-tab:first-child::before {
    background-image: url(../images/irc-tan-bubble.png);
}

.irc-window-tab-london::before {
    top: 7px;
    left: 7px;
}

.irc-chat-bubble{
    display: none;

    position: relative;
    width: calc(100% - 24px);
    margin: 10px;
    padding: 5px 0;

    border-radius: 5px;
    border: 1px solid #999;

    background: white;
    box-shadow: 0 4px 5px -5px grey;

    overflow: hidden;
}

.irc-handle {
    margin-left: 20px;
    font-weight: 700;
    font-family: 'Lato', sans-serif !important;
}

.irc-message {
    margin-left: 20px;
    position: relative;
}

.kr .irc-message {
    margin-top: 5px;
    font-size: 14px;
}

.irc-window-tab, .irc-window-tab-london {
    font-family: 'Lato', sans-serif;
}

.irc-message:nth-child(2)::before {
    position: absolute;
    left: -20px;
    top: 5px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent black;
}

.irc-chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 110%;
    opacity: 0.7;
}

.irc-chat-bubble.irc-chat-bubble-jiwon::before {
    background: #e66458;
}

.irc-chat-bubble.irc-chat-bubble-mathieu::before {
    background: #5881e6;
}

.irc-window-message-bar {
    position: absolute;
    bottom: 6px;

    width: 100%;
    height: 20px;

    background: #fff;
    border-bottom: 1px solid #999;
}

/* ----- BURGER NIGHT ----- */

#burger {
    height: 1000px;
    top: -100%;
    background-image: url(../images/burger.jpg);
    background-size: auto 100%;
}

#burger-overlay {
    height: 300%;
    top: -200%;
    background-image: url(../images/stars.svg);
    background-size: 110%;
    background-repeat: repeat;
}

/* ------ BICYCLE TRIP TO BRIGHTON ------ */

.timeline-frame-image.biking-2016-mar {
    background-color: rgba(0, 0, 0, 0.2);
}

#biking {
    bottom: 10px;
    left: -120px;

    width: 600px;
    height: 300px;

    background-image: url(../images/biking.svg);
    background-size: auto 100%;
}

#cow {
    bottom: -118px;
    right: -60px;
    width: 500px;
    height: 250px;
    background-image: url(../images/cow.svg);
}

#biking-narration {
    text-align: center;
    position: absolute;
    width: 100%;
}

#bus {
    top: 154px;
    left: -200px;

    width: 200px;
    height: 110px;

    background-image: url(../images/bus.svg);
    background-size: 100%;
}

#bus-stop {
    top: 130px;
    left: 400px;

    width: 40px;
    height: 135px;

    background-image: url(../images/bus-stop.svg);
    background-size: 100%;
}

#gatwick-plane {
    top: 265px;
    left: 600px;

    width: 90px;
    height: 60px;

    background-image: url(../images/gatwick-plane.svg);
    background-size: 100%;
}

#tower-bridge {
    background-image: url(../images/tower-bridge.svg);
    width: 400px;
    height: 190px;
    top: 82px;
    left: -20px;
    background-size: 100%;
}

#brighton {
    top: 72px;
    right: -30px;

    width: 300px;
    height: 200px;

    background-image: url(../images/brighton.svg);
    background-size: 100%;
}

#bike-path {
    top: 60%;
    left: 0;
    width: 100%;
    background-image: url(../images/cardboard-dark.png);
    height: 40%;
    background-repeat: repeat;
}

/* ------ POLAROID PHOTO STRING ------ */

.polaroid {
    position: relative;
    width: 250px;
    padding: 15px;
    padding-bottom: 50px;
    margin: auto;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,.3);
}

.polaroid::before {
    content: "";

    position: absolute;
    top: -40px;
    left: calc(50% - 13px);

    display: block;

    width: 25px;
    height: 75px;

    background-image: url(../images/clip.svg);
    background-repeat: no-repeat;

    transform: rotate(20deg);
}

.polaroid::after {
    position: absolute;
    width: calc(100% - 30px);
    left: 15px;
    bottom: 10px;

    text-align: center;
    font-family: 'Caveat', 'Arvo', 'Lato', sans-serif;
    font-size: 30px;
}

.kr .polaroid::after {
    font-family: 'Noto Serif KR', serif;
    font-size: 24px;
}

/* -- golden gate bridge + sunrise -- */

.polaroid.polaroid-horizontal.ggb::before {
    transform: rotate(15deg);
    left: 290px;
}

.polaroid.polaroid-horizontal.ggb::after {
    content: "After 1200 miles down the West coast";
}

.kr .polaroid.polaroid-horizontal.ggb::after {
    content: "서해안 따라 2000km";
}

.polaroid.sunrise::before {
    transform: rotate(15deg);
    left: 290px;
}

.polaroid.sunrise::after {
    content: "";
}

.polaroid.polaroid-horizontal.ggb, .polaroid.polaroid-horizontal.sunrise {
    position: absolute;
    left: -320px;
    top: -150px;
    width: 300px;
    transform: rotate(8deg);
}

/* -- the waking up -- */

.polaroid.the-waking-up::before {
    transform: rotate(-15deg);
    left: 36px;
}

.polaroid.the-waking-up::after {
    content: "";
}

.polaroid.the-waking-up {
    position: absolute;
    top: -200px;
    left: 400px;
    transform: rotate(-10deg);
}

/* -- flight to london -- */

.polaroid.polaroid-horizontal.flight-to-london::before {
    transform: rotate(-15deg);
    left: 36px;
}

.polaroid.polaroid-horizontal.flight-to-london::after {
    content: "All this for nothing";

    left: 20px;
    bottom: 20px;
}

.kr .polaroid.polaroid-horizontal.flight-to-london::after {
    content: "만반의 준비를 했건만";
}

.polaroid.polaroid-horizontal.flight-to-london {
    position: absolute;
    top: -200px;
    left: 400px;
    width: 300px;
    transform: rotate(-10deg);
}

/* -- cassis -- */

.en .polaroid-photo-string .polaroid.cassis::after {
    content: "Cassis, France";
}

.fr .polaroid-photo-string .polaroid.cassis::after {
    content: "Calanques de Cassis";
}

.kr .polaroid-photo-string .polaroid.cassis::after {
    content: "프랑스 카시스";
}

.polaroid.cassis {
    transform: rotate(4deg);
}

/* -- bread -- */

.polaroid.bread::before {
    transform: rotate(-15deg);
}

.en .polaroid-photo-string .polaroid.bread::after {
    content: "Fun times with bread";
}

.fr .polaroid-photo-string .polaroid.bread::after {
    content: "Pain maison";
}

.kr .polaroid-photo-string .polaroid.bread::after {
    content: "빵굽고 장난치기";
}

.polaroid.bread {
    transform: rotate(-2deg);
}

/* -- thames -- */

.polaroid.thames::before {
    left: 55%;
    transform: rotate(-10deg);
}

.en .polaroid-photo-string .polaroid.thames::after {
    content: "Biking along the Thames";
}

.fr .polaroid-photo-string .polaroid.thames::after {
    content: "À vélo au bord de la Tamise";
}

.kr .polaroid-photo-string .polaroid.thames::after {
    content: "템즈강 자전거 여행";
}

.polaroid.thames {
    transform: rotate(-10deg);
}

/* -- cableguy -- */

.polaroid.cableguy::before {
    left: 46%;
    transform: rotate(12deg);
}

.polaroid.cableguy::after {
    content: "Cable guy moving in :)";
}

.fr .polaroid-photo-string .polaroid.cableguy::after {
    content: "L'électricien de service";
}

.kr .polaroid-photo-string .polaroid.cableguy::after {
    content: "전기기사 매튜";
}

.polaroid.cableguy {
    transform: rotate(2deg);
}

/* -- hamburg -- */

.polaroid.hamburg::before {
    left: 51%;
    transform: rotate(20deg);
}

.polaroid.hamburg::after {
    content: "It's freezing in Hamburg!";
}

.fr .polaroid-photo-string .polaroid.hamburg::after {
    content: "Sous la neige à Hambourg";
}

.kr .polaroid-photo-string .polaroid.hamburg::after {
    content: "춥디 추운 함부르크";
}

.polaroid.hamburg {
    transform: rotate(-4deg);
}

/* -- kitchen -- */

.polaroid.kitchen::before {
    left: 45%;
    transform: rotate(25deg);
}

.polaroid.kitchen::after {
    content: "A two-person kitchen";
}

.fr .polaroid-photo-string .polaroid.kitchen::after {
    content: "Studio avec cuisine";
}

.kr .polaroid-photo-string .polaroid.kitchen::after {
    content: "이인용 부엌";
}

.polaroid.kitchen {
    transform: rotate(2deg);
}

/* -- london -- */

.polaroid.london::before {
    left: 40%;
    transform: rotate(-25deg);
}

.polaroid.london::after {
    content: "Exploring London";
}

.fr .polaroid-photo-string .polaroid.london::after {
    content: "Explorant Londres";
}

.kr .polaroid-photo-string .polaroid.london::after {
    content: "런던 탐색";
}

.polaroid.london {
    transform: rotate(5deg);
}

/* -- coasteering -- */

.polaroid.coasteering::before {
    transform: rotate(-20deg);
}

.polaroid.coasteering::after {
    content: "Coasteering in Newquay";
}

.fr .polaroid-photo-string .polaroid.coasteering::after {
    content: "Coastering à Newquay";
}

.kr .polaroid-photo-string .polaroid.coasteering::after {
    content: "영국 뉴키에서 해안탐험";
}

.polaroid.coasteering {
    transform: rotate(-2deg);
}

.polaroid.polaroid-horizontal {
    width: 400px;
}

.polaroid img {
    width: 100%;
}

/* ----- LIVING ROOM SKIT ----- */

.living-room-2017-skit {
    top: calc(50% - 300px);
    width: 1000px;
    height: 600px;
}

.living-room-2017-skit .living-room {
    background-image: url(../images/living-room-bare.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.living-room-2017-skit .living-room .furnishings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: 100% auto;
    background-repeat: no-repeat;
}

.backs {
    position: absolute;
    bottom: 0;
    right: 130px;
    width: 450px;
    height: 250px;

    background-image: url(../images/backs.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#living-room {
    background-image: url(../images/living-room.svg);
}

#tripod-light {
    background-image: url(../images/tripod-light.svg);
}

.living-room-view {
    position: absolute;
    top: 75px;
    left: 270px;
    height: 290px;
    width: 460px;

    background-image: url(../images/living-room-view.jpg);
    background-size: 100% auto;
    opacity: 1;
}

.living-room-view.living-room-view--sunset {
    background-image: url(../images/living-room-view-sunset.jpg);
    background-position: 2px -68px;
}

/* ------ PROLOGUE ------ */

#engagement-photo-strip img {
    height: 335px;
}

#prologue .video-container,
#prologue video,
#prologue .video-overlay,
#prologue .chapter-title {
    top: 0;
    left: 0;
}

#prologue .video-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

#prologue .chapter-title {
    padding: 0;
}

#prologue .chapter-number {
    padding-top: 60px;
    color: #aaa;
}

#prologue .chapter-description {
    left: 0;
    bottom: 0;
    padding-bottom: 60px;
    padding-left: 50px;

    text-align: left;
    color: #ddd;
    font-family: 'Arvo', serif;
}

.kr #prologue .chapter-description {
    font-family: 'Noto Sans KR', serif;
    font-weight: 900;
}

#commuting-skit {
    height: 3100px;
    background: rgba(0, 0, 0, 0.25);
}

#road {
    top: 200px;
    left: 0;

    background-image: url(../images/road.svg);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

#scenic-drive {
    top: 196px;
    left: calc(50% - 42px);
    width: 100px;
    height: 250px;
    background-image: url(../images/scenic-drive-sign.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#neighborhood-garden {
    top: 345px;
    left: calc(50% + 70px);
    width: 250px;
    height: 270px;

    background-image: url(../images/neighborhood-garden.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#biking-birds-eye {
    top: 580px;
    left: calc(50% - 80px);

    width: 180px;
    height: 450px;
    
    background-image: url(../images/biking-birds-eye.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#twin-peaks {
    top: 70px;
    left: calc(50% - 460px);
    width: 400px;
    height: 400px;

    background-image: url(../images/twin-peaks.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#commuting-skit .commuting-skit-caption p {
    margin: 0;
    width: 100%;
}

#twin-peaks-caption {
    top: 500px;
    left: calc(50% - 420px);
    width: 420px;
}

#castro-flag-caption {
    top: 980px;
    left: calc(50% + 90px);
    width: 420px;
}

#safeway-sign-caption {
    top: 1350px;
    left: calc(50% - 380px);
    width: 420px;
}

#twitter-sign-caption {
    top: 1700px;
    left: calc(50% + 110px);
    width: 420px;
}

.kr #twitter-sign-caption {
    left: calc(50% + 150px);
    width: 300px;
}

#our-own-office-caption {
    top: 2200px;
    left: 0;
    width: 100%;
}

#our-own-office-caption p {
    font-size: 32px;
    letter-spacing: 1px;
}

#castro-flag {
    top: 900px;
    left: calc(50% - 390px);
    width: 400px;
    height: 400px;

    background-image: url(../images/castro-flag.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#safeway-sign {
    top: 1200px;
    left: calc(50% + 115px);
    width: 400px;
    height: 400px;

    background-image: url(../images/safeway-sign.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

#twitter-sign {
    top: 1600px;
    left: calc(50% - 280px);
    width: 160px;
    height: 350px;

    background-image: url(../images/twitter-sign.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    transform: rotate(5deg);
}

#square-and-uber {
    top: 1730px;
    left: calc(50% - 440px);
    width: 250px;
    height: 300px;

    background-image: url(../images/square-and-uber.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    transform: rotate(-10deg);
}

#officebuilding {
    bottom: 0;
    left: calc(50% - 300px);
    width: 400px;
    height: 754px;
    background-image: url(../images/140NM.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

/* DESKTOP-SPECIFIC */

@media only screen and (min-width: 600px) {
    .where .kr-translation {
        font-size: 14px;
        font-weight: bold;
    }

    .where .details .kr-translation {
        font-weight: normal;
    }

    .events-summary table {
        width: calc(100% - 40px);
    }

    .mobile-only {
        display: none !important;
    }

    .modal {
        width: calc(100vw - 200px);
        height: calc(100vh - 100px);
        border-radius: 2px;
        margin-left: 100px;
        margin-top: 50px;
    }

	.modal.modal--rsvp-confirmation {
        width: calc(100vw - 500px);
		min-width: 500px;
        height: calc(100vh - 300px);
		min-height: 300px;
        border-radius: 2px;
        margin-left: 250px;
        margin-top: 150px;
	}

    .modal-close-link {
        top: 3px;
        right: 8px;
        font-size: 25px;
        cursor: pointer;
    }

    .modal--rsvp-confirmation .modal-content-map {
        width: 50%;
    }

}

/* MOBILE-FRIENDLY */

@media only screen and (max-width: 600px) {
    .add-to-gcal-link {
        position: relative;
        margin-top: 20px;
    }

	.rsvp-tooltip {
		top: 95px;
	}

	#book {
		top: 140px !important;
		left: 30px !important;
		transform: scale(1.2) rotate(-3deg) !important;
	}

    body {
        background: #bbb;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }

    #personal-phrase-form .personal-phrase-prompt {
        font-size: 32px;
    }

    #navigation {
        padding: 5px 0 10px 0;
    }
    
    #navigation .nav-link {
        display: inline-block;
        font-size: 10px;
        width: 20vw;
        margin: 5px;
        padding: 0;
        vertical-align: text-top;
        letter-spacing: 2px;
    }

    #navigation .nav-link:not(.selected):hover {
        background-color: none;
    }

    .nav-icon {
        font-size: 32px;
        margin-top: 5px;
    }

    .nav-link:not(.selected) .nav-icon {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
    }

    .timeline-divider:not(.divider-polaroid) {
        display: none;
    }    

    .timeline-item {
        box-sizing: border-box;
        margin: 30px 0 !important;
        padding: 10px !important;
        width: 100vw !important;
    }
    
    .timeline-item-mathieu, .timeline-item-jiwon {
        margin-left: 0;
        border: 0;
    }

    .timeline-date {
        text-align: center;
        margin-top: 15px;
    }

    .timeline-item-photo {
        height: 500px;
        margin-left: -100px;
    }

    .timeline-story {
        font-size: 18px;
        line-height: 32px;
        padding: 5px;
        color: #ccc;
    }

    .timeline-frame {
        margin-top: 60px;
        margin-bottom: 60px;
        width: calc(100vw - 20px);
    }

    .timeline-frame.living-room-2017-skit {
        width: 100vw;
    }
    
    .living-room.frame-image-container {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .timeline-frame-desktop-only {
        border: 0;
    }

    .timeline-frame-desktop-only::after {
        border: 0;
    }

    .timeline-frame-image:not(.biking-2016-mar):not(#commuting-skit) {
        height: 300px !important;
    }

    #irc-skit {
        width: calc(100vw - 12px);
        height: 550px;
    }

    #irc-skit .irc-window-content {
        height: 480px;
    }

    #irc-skit .irc-window-tabs {
        top: 520px;
    }

    #irc-skit .irc-window-tab-london {
        left: 245px !important;
    }

    #gatwick-plane {
        top: 265px;
        left: 80px;
        width: 90px;
        height: 60px;
    }

    #tower-bridge {
        width: 200px;
        height: 100px;
        top: 172px;
        left: -20px;
    }
    
    #bus-stop {
        top: 192px;
        left: 320px;
        width: 30px;
        height: 100px;
    }

    #bus {
        top: 220px;
        left: -200px;
        width: 120px;
        height: 80px;
    }

    #brighton {
        top: 168px;
        right: -160px;
        width: 150px;
        height: 100px;
    }

    #biking {
        bottom: 20px;
        left: -700px;
        width: 400px;
        height: 200px;
    }
     
    #cow {
        bottom: -60px;
        right: -30px;
        width: 300px;
        height: 150px;
    }

    #surfing {
        top: -160%;
        width: 600px;
        height: 700px;
    }
    
    #burger {
        width: 600px;
        height: 600px;
    }

    .chapter-description {
        font-size: 42px;
    }

    .chapter-three-title #flowers {
        width: 300px;
    }

    .chapter-three-title .chapter-title-skit {
        width: 300px;
    }

    .polaroid-horizontal {
        width: 300px !important;
    }

    .living-room-view {
        top: 30px;
        left: calc(50vw - 132px);
        height: 155px;
        width: 245px;
    }

    .living-room-view.living-room-view--sunset {
        background-position: 2px -38px;
    }
    
    .living-room, .living-room .furnishings {
        background-size: auto 100% !important;
        background-position: 50%;
    }

    .living-room .backs {
        right: 30px;
        width: 200px;
        height: 105px;
    }

    .the-waking-up .timeline-item-photo {
        width: 100vw;
        margin-left: -10px;
    }

    #commuting-skit {
        height: 2000px;
    }

    #biking-birds-eye {
        top: 380px;
        width: 120px;
        height: 300px;
        left: calc(50% - 40px);
    }

    #road {
        top: 100px;
    }

    #twin-peaks {
        top: 36px;
        left: calc(50% - 230px);
        width: 240px;
        height: 220px;
    }

    #scenic-drive {
        top: 87px;
        left: 50%;
        width: 72px;
        height: 180px;
    }

    #neighborhood-garden {
        top: 166px;
        left: calc(50% + 31px);
        width: 180px;
        height: 225px;
    }

    #commuting-skit .commuting-skit-caption p {
        font-size: 18px;
        line-height: 32px;
    }
    
    #castro-flag {
        top: 515px;
        left: calc(50% - 210px);
        width: 280px;
        height: 280px;
    }
    
    #safeway-sign {
        top: 860px;
        left: calc(50% + 10px);
        width: 300px;
        height: 300px;
    }

    #twitter-sign {
        top: 1165px;
        left: calc(50% - 158px);
        width: 90px;
        height: 200px;
    }

    #square-and-uber {
        top: 1240px;
        left: calc(50% - 200px);
        width: 120px;
        height: 180px;
    }
    
    #officebuilding {
        left: calc(50% - 180px);
        width: 250px;
        height: 477px;
    }

    #twin-peaks-caption {
        top: 400px;
        left: 20px;
        width: calc(100% - 40px);
    }
    
    #castro-flag-caption {
        top: 750px;
        left: 0;
        text-align: right;
        width: 70%;
        left: calc(30% - 20px);
    }

    #safeway-sign-caption {
        top: 1100px;
        left: 20px;
        width: calc(70% - 40px);
    }
    
    #twitter-sign-caption {
        top: 1250px;
        left: calc(40% - 20px) !important;
        width: 60% !important;
        text-align: right;
    }
    
    #our-own-office-caption {
        top: 1450px;
    }

    #prologue .chapter-description {
        width: calc(100% - 40px);
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
        font-size: 32px;
    }

    #prologue video {
        width: 160vw !important;
        margin-left: -50vw !important;
    }

    .page--events .header,
    .page--gifts .header,
    .page--rsvp .header {
        height: 500px;
    }

    .page--rsvp .header-title {
        letter-spacing: 4px;
        font-size: 20px;
        line-height: 32px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 125px;
    }

    .fr .page--rsvp .header-title {
        font-size: 18px;
        line-height: 24px;
        padding-top: 126px;
    }

    .kr .page--rsvp .header-title {
        font-size: 14px;
        line-height: 20px;
        padding-top: 140px;
    }

    .page--events .header-background,
    .page--gifts .header-background,
    .page--rsvp .header-background {
        height: 500px;
    }

    .page--events .header-text {
        top: 20px;
    }

    .header-title-container {
        width: 300px;
    }

    .page--events .header-title {
        font-size: 42px;
        margin-bottom: 10px;
        padding-top: 120px;
        letter-spacing: 6px;
    }

    .page--events .header-subtitle {
        text-align: left;
        font-size: 12px;
        line-height: 24px;
        letter-spacing: 4px;
        padding-left: 20px;
    }

    .kr .page--events .header-subtitle {
        text-align: center;
        font-size: 24px;
        line-height: 24px;
        letter-spacing: 6px;
        padding-left: 0;
    }

    .fr .page--events .header-subtitle {
        text-align: center;
        padding-left: 0;
    }

    .page--events .header-background {
        background-image: url(../images/bikes-colorized.jpg)
    }

    .page--rsvp .header-background {
        background-image: url(../images/mt-st-michel-colorized.jpg)
    }

    .page--gifts .header-background {
        background-image: url(../images/butt-bump-red-colorized.jpg);
    }

    .events-summary {
        margin: 30px auto;
    }

    .events-summary table {
        margin-left: 20px;
        width: calc(100vw - 40px);
    }

    .event-image {
        position: relative !important;
        width: 100% !important;
        height: 500px;
        left: 0 !important;
    }

    .kr .event-name {
        font-size: 32px;
        line-height: 42px;
    }

    .event-description {
        left: 20px !important;
        width: calc(100% - 40px);
        padding: 5px 0;
    }

    .kr .event-dress-code {
        font-size: 18px;
        line-height: 32px;
    }

    .event-image-date {
        line-height: 64px;
    }

    .kr .event-image-date {
        font-size: 48px;
    }
    
    .event-image-text {
        font-size: 20px;
    }

    .event-image-background {
        background-position: center;
    }

    .page--gifts .header-title {
        margin-left: 20px;
        font-size: 32px;
        letter-spacing: 6px;
    }

    .page--gifts .header-background {
        background-position: 65% center !important;
    }

    .rsvp-content,
    .gifts-content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30px;
    }

    .button-label {
        padding: 15px;
        margin: 5px;
        width: 200px;
    }

    .icon-input-wrapper input {
        font-size: 14px;
        width: 200px;
    }

    .button-label:active {
        transform: none;
    }

    .page--gifts .header-text {
        top: 40%;
        text-align: left;
    }

    .event-address-directions:hover {
        top: 20px;
    }

    .event-address-directions:active {
        top: 20px;
    }

    .modal {
        width: 100vw;
        height: 100vh;
        margin-left: 0;
        margin-top: 0;
        flex-direction: column;
    }

    .modal:not(.modal--rsvp-confirmation) {
        flex-direction: column-reverse;
    }

    .modal-close-link {
        top: 5px;
        right: 18px;
        font-size: 35px;
    }

    .modal--rsvp-confirmation .modal-close-link {
        color: #ccc;
    }

    .modal.modal--rsvp-confirmation .rsvp-confirmation-heading {
        margin-top: 60px;
    }

    .page-footer .made-with-love {
        font-size: 11px !important;
    }

    .fr .bios .bio-text, .en .bios .bio-text {
        width: 300px;
    }

    .bio--jiwon .bio-text {
        text-align: left;
    }

    .bio--mathieu .bio-text {
        text-align: right;
        margin-left: calc(100vw - 320px);
    }
}

.you-are-invited {
    top: -12px;
    right: 15px;

    color: var(--color);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.kr .you-are-invited {
    top: -18px;
}

.you-are-invited .kr-translation {
    letter-spacing: 2px;
    font-size: 12px;
}

.where--invited {
    border: 2px solid var(--color);
    padding: 6px;
}

.where--invited-sf {
    --color: #da4f1a;
}

.where--invited-kr {
    --color: #0878ce;
}

.where--invited-fr {
    --color: #f7bf0d;
}


.modal-overlay {
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}

.modal {
    min-width: 300px;
    background-color: #fff;
    display: flex;
}

.modal-close-link {
    color: #666;
}

.modal-close-link:hover {
    color: #aaa;
}

.modal-content-map {
    min-width: 50%;
    flex-grow: 0;
}

.modal-content-description {
    flex-grow: 1;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3);
}

.modal-content-inner {
    margin: 40px;
    line-height: 20px;
}

.modal-content-inner p {
    font-size: 14px;
    letter-spacing: 1px;
}

.modal-content-inner .event-name {
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 15px;
}

.external-directions-links {
    margin-top: 30px;
}

.external-directions-link:hover .external-directions-link-logo {
    border-color: #000;
}

.external-directions-link-logo {
    width: 80px;
    height: 80px;
    border: 3px solid #fff;
    border-radius: 20px;
}

.yelp-link {
    background-color: #d32223;
}

.yelp-burst {
    background-image: url(../images/yelp-burst.svg);
    background-size: 100%;
}

.naver-map-link {
    background-image: url(../images/naver-map-logo.png);
    background-size: 100%;
    border-color: rgba(0, 214, 0, 0.5);
}

.handus-link {
    background-image: url(../images/handus-logo.png);
    background-size: 100%;
}

.sf-recpark-link {
    background-image: url(../images/sf-recpark-logo.jpg);
    background-size: 132px;
    background-position: 50% 92%;
}

.sf-croquet-club-link {
    background-image: url(../images/sf-croquet-club-logo.png);
    background-size: 100%;
}

.external-directions-link {
    text-decoration: none;
    margin-right: 15px;
}

.external-directions-link:active {
    outline: none;
}

.pacific-bell-building-credits {
    text-align: right;
    font-size: 10px;
    top: 2px;
    right: 0;
    letter-spacing: 1px;
}

.mobile-only.pacific-bell-building-credits {
    letter-spacing: 0;
    color: #666;
    margin-top: -60px;
}

.page-footer {
    padding: 20px;
    background-color: #222;
}

.page-footer .made-with-love {
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 14px;
    color: #666;
}

.view-in-google-maps-link {
    bottom: 10px;
    left: 10px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
    background: #fff;
    padding: 10px;
}

.view-in-google-maps-link a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.languagepicker {
    position: absolute;
    top: 5px;
    right: 5px;

	border-radius: 5px;
	background-color: #FFF;
	display: inline-block;
	padding: 0;
	height: 40px;
	overflow: hidden;
	transition: all .3s ease;
	margin: 0 10px 10px 0;
	vertical-align: top;
	float: left;

    z-index: 100;
}

.languagepicker li {
	display: block;
	padding: 0px 20px;
	line-height: 40px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.languagepicker li:hover{
	background-color: #eee;
    cursor: pointer;
}

.languagepicker a:first-child li {
	border: none;
	background: #FFF !important;
}

.languagepicker li img {
	margin-right: 5px;
    margin-bottom: -2px;
    width: 20px;
}

.languagepicker:hover {
	height: 125px;
}

.fr .kr-translation {
    display: none;
}

.fr .en-translation {
    display: none;
}

.kr .fr-translation {
    display: none;
}

.kr .en-translation {
    display: none;
}

.en .fr-translation {
    display: none;
}

.en .kr-translation {
    display: none;
}

#book {
	top: calc(50vh - 200px);
	left: 80px;

	width: 400px;
	height: 100%;
	margin: 0 auto;

	transform: scale(1.5) rotate(-10deg);

	z-index: 1;
}

#book-spine {
	top: -9px;

	width: 50px;
	height: 424px;
	border-bottom-left-radius: 40px 20px;
	border-bottom-right-radius: 50px 10px;

	background: #EE6A38;
	transform: skewY(20deg);
}

#book .book-spine-ridge {
	position: absolute;
	width: 100%;
	height: 9px;
	border-bottom: 3px solid black;
	border-bottom-left-radius: 40px 20px;
	border-bottom-right-radius: 40px 11px;
}

#book .book-spine-ridge:first-child {
	top: 100px;
}

#book .book-spine-ridge:nth-child(2) {
	top: 305px;
}

#book .book-spine-ridge:last-child {
	top: 320px;
}

#book-leaves {
	top: -18px;
	left: 25px;

	width: 300px;
	height: 18px;

	background-color: #fff;
	background-image: linear-gradient(to bottom, transparent 33%, #ddd 33%, #ddd 66%, transparent 66%);
	background-size: 5px 5px;

	transform: skewX(70deg);
}

#book-cover {
	left: 50px;
	width: 300px;
	height: 420px;
	background-color: #fe7f4c;
}

#book-logo {
	width: 120px;
	height: 85px;

	margin: 20px auto;

	background-image: url(/static/images/penguinbooks-logo.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#book-logo p {
	padding-top: 32px;
	letter-spacing: 2px;
}

#book-title {
	top: 140px;
	width: 100%;
	height: 140px;
	background: #fff;
}

#book-title h1 {
	margin-top: 20px;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 24px;
}

#book-title .title-ampersand {
    color: #ee6a38;
}

#book-title hr {
	border-top: 1px solid #ddd;
	border-bottom: 0;
	width: 100px;
}

#book-title p {
	font-size: 14px;
	letter-spacing: 2px;
}

#book-footer {
	margin-top: 210px;
	width: 100%;
	text-align: center;
}

#book-footer img {
	width: 50px;
}

a.directions, a.nearby-attraction-link {
    text-decoration: none;
    color: #2F50B8 !important;
    border-bottom: 5px solid rgba(47, 80, 184, 0.1);
}

a.directions:hover, a.nearby-attraction-link:hover {
    border-bottom: 5px solid rgba(47, 80, 184, 0.2);
}

.modal-content-inner h3 {
    font-size: 14px;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.modal-content-inner h4 {
    letter-spacing: 1px;
}

.kr-personal-phrase-prompt {
    font-family: 'Noto Serif KR', serif;
    font-size: 32px;
    letter-spacing: 4px;
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}

#event-kr .highlight {
    color: #0078d5;
    border-bottom: 2px solid rgba(235, 65, 0, 0.8);
}

.link-rsvp:not(.nav-link) {
    text-decoration: none;
    color: #eb4100;
    border-bottom: 2px solid #eb4100cc;
}

.nearby-attractions {
    background-color: #f9f9f9;
    margin-top: 30px;
    padding: 20px;
    padding-top: 0;
    border: 1px solid #ddd;
}

.nearby-attraction a:not(.directions) {
    color: #888;
}

.nearby-attraction a:not(.directions):hover {
    color: #2F50B8;
}

.bios {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.bio {
    width: 400px;
    line-height: 24px;
}

.bios .bio-picture {
    width: 300px;
    height: 300px;
    background-size: 100%;
    border-radius: 50%;
    margin: 0 auto;
}

.bio--jiwon .bio-picture.baby-photo {
    background-image: url(../images/infantphoto-jiwon.jpg);
}

.bio--mathieu .bio-picture.baby-photo {
    background-image: url(../images/infantphoto-mathieu.jpeg);
}

.bio--jiwon .bio-picture.kid-photo {
    background-image: url(../images/babyphoto-jiwon.jpg);
}

.bio--mathieu .bio-picture.kid-photo {
    background-image: url(../images/babyphoto-mathieu.jpeg);
}

.bio--jiwon .bio-picture.adult-photo {
    background-image: url(../images/jiwon-localhost.jpg);
}

.bio--mathieu .bio-picture.adult-photo {
    background-image: url(../images/mathieu-weatherman.jpeg);
}

.bio-text {
    margin: 50px 20px;
    letter-spacing: 2px;

    color: #aaa;
}

.bio-text span.kr-translation {
    font-family: 'Noto Sans KR', 'Noto Serif KR', sans-serif;
}

#download-chrome-icon {
    margin-bottom: -12px;
}

select[name="children-rsvp-dropdown"] {
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #555;
    letter-spacing: 2px;
    text-indent: 10px;
}

.page--rsvp .header-title span.deadline {
    color: #fab700;
}

.modal--rsvp-confirmation .modal-content-map {
    background: #2F50B8;
}

.modal--rsvp-confirmation .rsvp-confirmation-heading {
    font-size: 36px;
    letter-spacing: 6px;
    margin: 30px;
    color: #a5adef;
}

.modal--rsvp-confirmation .rsvp-confirmation-heading .names {
    color: #fff;
}

.modal--rsvp-confirmation .modal-content-inner p {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 26px;
}

.rsvp-tooltip {
    width: 200px;
    background: rgba(30,30,30,0.8);
    color: #fff;
    top: 52px;
    left: calc(50% - 100px);
    z-index: 2;
    border-radius: 5px;
	padding: 20px 0 20px;
	cursor: pointer;
}

.rsvp-tooltip::before {
    content: '';
    position: absolute;
    top: -20px;
    left: calc(50% - 10px);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid rgba(30,30,30,0.8);
}

/* ZOLA REGISTRY */

.registry-container {
    overflow: hidden;
}

.zola-registry-iframe {
    top: -210px;
    margin-bottom: -215px;
}

@media only screen and (max-width: 410px) {
    .zola-registry-iframe {
        top: -236px;
        margin-bottom: -240px;
    }
}

.events-summary table {
    display: table;
    border-collapse: collapse;
}

.events-summary .when {
    width: 100px;
}

.events-summary .details {
    padding: 10px 0 0 0;
    font-size: 12px;
}

/* RSVP arrow */

.page--rsvp .header-title-container .arrow-down {
    animation: MoveUpDown 1s ease-out infinite;
    width: 100%;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
}

/* RSVP MOBILE */

@media only screen and (max-width: 600px) {
    @keyframes MoveUpDown {
      0%, 100% {
        margin-top: 15px;
      }
      50% {
        margin-top: 10px;
      }
    }

    .header-title p {
        font-size: 36px;
    }
}

/* RSVP DESKTOP */

@media only screen and (min-width: 600px) {
    @keyframes MoveUpDown {
      0%, 100% {
        margin-top: 30px;
      }
      50% {
        margin-top: 25px;
      }
    }
}