html { background-color: #53C4BA; background-image: url(images/bg-plumbobs-v2.png); background-repeat: repeat-x; background-position: center 400px; background-attachment: fixed; }
body { margin: 0; font: 18px/1.5 'Atma', 'Margarine', sans-serif; letter-spacing: 0.1em; }
h1, h2 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 36px; text-align: center; }
#header #welcome h1 { text-indent: -5000px; overflow: hidden; background-image: url("images/logo.png"); background-size: contain; background-repeat: no-repeat; background-position: center top; width: 100%; height: 241px; margin: 0 auto; }
#header-nl #welcome h1 { text-indent: -5000px; overflow: hidden; background-image: url("images/logo-nl.png"); background-size: contain; background-repeat: no-repeat; background-position: center top; width: 100%; height: 241px; margin: 0 auto; }
h2 { font-size: 26px; margin-bottom: 1em; color: #3dc7bb; text-shadow: 2px 2px rgba(0,0,0,0.1); }
h3 { font-size: 20px; margin-bottom: 1em; color: #9dc378; text-shadow: 2px 2px rgba(0,0,0,0.1); }
h4 { font-size: 18px; margin-bottom: 1em; color: #83cba8; text-shadow: 2px 2px rgba(0,0,0,0.1); }
p { margin: 0 0 1em 0; }
a, a:link, a:active, a:visited { color: #e66872; text-decoration: none; font-weight: bold; }
a:hover { color: #f49b9f; text-decoration: none;  }
#header { color: #FFF; margin: 0 auto; }
#nav { width: 80%; margin: 0 auto; text-align: center; }
#nav li { background-image: url("images/bg-sprite-nav.png"); list-style-type: none; height: 40px; margin: 0; padding: 0; display: inline-block; text-indent: -5000px; overflow: hidden; }
#nav li a { display: block; }
li#nav-home { background-position: 0 0; width: 70px; }
li#nav-home:hover { background-position: -250px 0; width: 70px; }
li#nav-home a { width: 70px; }
li#nav-home:hover a { width: 70px; }
li#nav-story-en { background-position: 0 -432px; width: 123px; }
li#nav-story-en:hover { background-position: -250px -432px; width: 123px; }
li#nav-story-en a { width: 123px; }
li#nav-story-en:hover a { width: 123px; }
li#nav-story-nl { background-position: 0 -480px; width: 145px; }
li#nav-story-nl:hover { background-position: -250px -480px; width: 145px; }
li#nav-story-nl a { width: 145px; }
li#nav-story-nl:hover a { width: 145px; }
li#nav-thankyou-en { background-position: 0 -1104px; width: 114px; }
li#nav-thankyou-en:hover { background-position: -250px -1104px; width: 114px; }
li#nav-thankyou-en a { width: 114px; }
li#nav-thankyou-en:hover a { width: 114px; }
li#nav-bedankt-nl { background-position: 0 -1152px; width: 96px; }
li#nav-bedankt-nl:hover { background-position: -250px -1152px; width: 96px; }
li#nav-bedankt-nl a { width: 96px; }
li#nav-bedankt-nl:hover a { width: 96px; }
li#nav-registry-en { background-position: 0 -144px; width: 112px; }
li#nav-registry-en:hover { background-position: -250px -144px; width: 112px; }
li#nav-registry-en a { width: 112px; }
li#nav-registry-en:hover a { width: 112px; }
li#nav-registry-nl { background-position: 0 -192px; width: 127px; }
li#nav-registry-nl:hover { background-position: -250px -192px; width: 127px; }
li#nav-registry-nl a { width: 127px; }
li#nav-registry-nl:hover a { width: 127px; }
li#nav-dresscode { background-position: 0 -240px; width: 132px; }
li#nav-dresscode:hover { background-position: -250px -240px; width: 132px; }
li#nav-dresscode a { width: 132px; }
li#nav-dresscode:hover a { width: 132px; }
li#nav-unplugged { background-position: 0 -288px; width: 134px; }
li#nav-unplugged:hover { background-position: -250px -288px; width: 134px; }
li#nav-unplugged a { width: 134px; }
li#nav-unplugged:hover a { width: 134px; }
li#nav-directions { background-position: 0 -336px; width: 120px; }
li#nav-directions:hover { background-position: -250px -336px; width: 120px; }
li#nav-directions a { width: 120px; }
li#nav-directions:hover a { width: 120px; }
li#nav-route { background-position: 0 -384px; width: 205px; }
li#nav-route:hover { background-position: -250px -384px; width: 205px; }
li#nav-route a { width: 205px; }
li#nav-route:hover a { width: 205px; }
li#nav-info, li#nav-info-nl { background-position: 0 -528px; width: 55px; }
li#nav-info:hover, li#nav-info-nl:hover { background-position: -250px -528px; width: 55px; }
li#nav-info a, li#nav-info-nl a { width: 55px; }
li#nav-info:hover a, li#nav-info-nl:hover a { width: 55px; }
li#nav-rsvp { background-position: 0 -576px; width: 60px; }
li#nav-rsvp:hover { background-position: -250px -576px; width: 60px; }
li#nav-rsvp a { width: 60px; }
li#nav-rsvp:hover a { width: 60px; }
li#nav-didyouknow { background-position: 0 -720px; width: 162px; }
li#nav-didyouknow:hover { background-position: -250px -720px; width: 162px; }
li#nav-didyouknow a { width: 162px; }
li#nav-didyouknow:hover a { width: 162px; }
li#nav-wistjedat { background-position: 0 -768px; width: 135px; }
li#nav-wistjedat:hover { background-position: -250px -768px; width: 135px; }
li#nav-wistjedat a { width: 135px; }
li#nav-wistjedat:hover a { width: 135px; }
li#nav-vows { background-position: 0 -624px; width: 68px; }
li#nav-vows:hover { background-position: -250px -624px; width: 68px; }
li#nav-vows a { width: 68px; }
li#nav-vows:hover a { width: 68px; }
li#nav-geloften { background-position: 0 -672px; width: 108px; }
li#nav-geloften:hover { background-position: -250px -672px; width: 108px; }
li#nav-geloften a { width: 108px; }
li#nav-geloften:hover a { width: 108px; }
li#nav-weddingday { background-position: 0 -816px; width: 192px; }
li#nav-weddingday:hover { background-position: -250px -816px; width: 192px; }
li#nav-weddingday a { width: 192px; }
li#nav-weddingday:hover a { width: 192px; }
li#nav-trouwdag { background-position: 0 -864px; width: 173px; }
li#nav-trouwdag:hover { background-position: -250px -864px; width: 173px; }
li#nav-trouwdag a { width: 173px; }
li#nav-trouwdag:hover a { width: 173px; }
li#nav-honeymoon { background-position: 0 -1008px; width: 140px; }
li#nav-honeymoon:hover { background-position: -250px -1008px; width: 140px; }
li#nav-honeymoon a { width: 140px; }
li#nav-honeymoon:hover a { width: 140px; }
li#nav-huwelijksreis { background-position: 0 -1056px; width: 158px; }
li#nav-huwelijksreis:hover { background-position: -250px -1056px; width: 158px; }
li#nav-huwelijksreis a { width: 158px; }
li#nav-huwelijksreis:hover a { width: 158px; }
li#nav-photoshoot { background-position: 0 -912px; width: 142px; }
li#nav-photoshoot:hover { background-position: -250px -912px; width: 142px; }
li#nav-photoshoot a { width: 142px; }
li#nav-photoshoot:hover a { width: 142px; }
li#nav-fotoshoot { background-position: 0 -960px; width: 120px; }
li#nav-fotoshoot:hover { background-position: -250px -960px; width: 120px; }
li#nav-fotoshoot a { width: 120px; }
li#nav-fotoshoot:hover a { width: 120px; }
ul { padding: 0; margin: 0; }
li { list-style-type: none; padding: 0 0 0 20px; margin: 0; background-image: url("images/bg-bullet.png"); background-repeat: no-repeat; background-position: left 5px;}
#nav li { display: inline-block; }
#header a, #header a:link, #header a:active, #header a:visited { color: #fff; text-decoration: none;}
#header a:hover { color: #f1f39a; }
code { background: #F5F5F5; max-width: 100px; padding: 2px 6px; word-wrap: break-word; }
#wrapper { border-radius: 10px; box-shadow: 2px 2px 2px rgba(0,0,0,0.25); background: #FFF; margin: 1em auto; max-width: 800px; width: 95%; }
#container { padding: 2em; }
#welcome {  }
#status { margin-bottom: 2em; }
#welcome h1 span { display: block; font-size: 75%; }
#icon-status, #icon-book { float: left; height: 64px; margin-right: 1em; margin-top: -4px; width: 64px; }
#icon-book { display: none; }
input, textarea { font: 18px/1.5 'Atma', 'Margarine', sans-serif; background-color: #FFF; color: #000; }
button { font: 18px/1.5 'Atma', 'Margarine', sans-serif; background: #B3D296; background: -webkit-linear-gradient(left top, #CBE0B7, #B3D296, #9EC579, #8DB85C, #8DB85C); background: -o-linear-gradient(bottom right, #CBE0B7, #B3D296, #9EC579, #8DB85C, #8DB85C); background: -moz-linear-gradient(bottom right, #CBE0B7, #B3D296, #9EC579, #8DB85C, #8DB85C); background: linear-gradient(to bottom right, #CBE0B7, #B3D296, #9EC579, #8DB85C, #8DB85C); border: 1px solid #8DB85C; box-shadow: 2px 2px 2px rgba(0,0,0,0.1); border-radius: 20px; text-shadow: -1px 1px rgba(255,255,255,0.5); color: #00867a; cursor: pointer; padding: 0 10px; }
button:hover { background: #CBE0B7; background: -webkit-linear-gradient(left top, #CADFB6, #CBE0B7, #B3D296, #B3D296, #8DB85C); background: -o-linear-gradient(bottom right, #CADFB6, #CBE0B7, #B3D296, #B3D296, #8DB85C); background: -moz-linear-gradient(bottom right, #CADFB6, #CBE0B7, #B3D296, #B3D296, #8DB85C); background: linear-gradient(to bottom right, #CADFB6, #CBE0B7, #B3D296, #B3D296, #8DB85C); border: 1px solid #8DB85C; box-shadow: 2px 2px 2px rgba(0,0,0,0.1); border-radius: 20px; text-shadow: -1px 1px rgba(255,255,255,0.5); color: #00867a; }
button:disabled {
    background: #CCCCCC;
    background: rgb(204,204,204); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(204,204,204,1) 0%, rgba(85,85,85,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(204,204,204,1) 0%,rgba(85,85,85,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(204,204,204,1) 0%,rgba(85,85,85,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 1px solid #CCCCCC;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    text-shadow: -1px 1px rgba(1,1,1,0.2);
    color: black;
    cursor: auto;
}
form { padding: 0; }
#form_remarks { clear: both; display: block; }
#form_next { margin-top: 10px; }
#form_amount { width: 30px; }
label { margin: 0 5px 5px 0; display: inline-block; }
label[for=form_amount] { margin: 0 5px 20px 0; }
label[for=form_ceremony] { margin: 0 5px 5px 0; }
label[for=form_dinner] { margin: 0 5px 5px 0; }
label[for=form_party] { margin: 0 5px 20px 0; }
label[for=form_remarks] { margin: 0 5px 5px 0; }
#designer { color: #FFF; margin: 25px auto; text-align: center; font-size: 80%; text-shadow: 2px 2px rgba(0,0,0,0.1); }
#designer a, #designer a:link, #designer a:active, #designer a:visited { color: #fff; text-decoration: underline; }
#designer a:hover { color: #f1f39a; text-decoration: none; }
strong.svp { color: #de0f20; }
p img {  }
p img.perc100 { width: 100%; height: auto; }
.perc { width: 25%; height: auto; }
.perc { width: 21%; height: auto; margin: 0 2% 5px; }
.photo { display: block; width: 98%; height: auto; margin: 0 0 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; }
.photo-50 { display: block; width: 50%; height: auto; margin: 0 24% 25px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-50 .photo { width: 98%; height: auto; margin: 0 0 10px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-w { width: 100%; height: auto; margin: 0 0 25px; padding: 0; text-align: center; }
.photo-w .photo { display: block; width: 100%; height: margin: 0 0 10px; padding: 0; }
.photo-trio { display: inline-block; width: 31%; height: auto; margin: 0 0 10px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-m { display: inline-block; width: 45%; height: auto; margin: 0 0 10px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-ml { float: left; width: 45%; height: auto; margin: 0 0 25px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-mr { float: right; width: 45%; height: auto; margin: 0 0 25px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-p { width: 98%; height: auto; margin: 0 0 25px; background-color: #f9f7f2; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 1%; text-align: center; }
.photo-50 .photo, .photo-w .photo, .photo-trio .photo, .photo-m .photo, .photo-ml .photo, .photo-mr .photo, .photo-p .photo { box-shadow: none; padding: 0; background-color: none; width: 100%; }
.photo-nb { display: block; width: 100%; height: auto; margin: 0 0 10px; }
.photo-left { display: block; width: 25%; height: auto; margin: 0 20px 5px 0; float: left; }
.photo-left img { width: 94%; height: auto; margin: 0 0 5px 0; background-color: #FFF; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 3%; }
.photo-right { display: block; width: 25%; height: auto; margin: 0 0 5x 20px; float: right; }
.photo-right img { width: 94%; height: auto; margin: 0 0 5px 0; background-color: #FFF; box-shadow: 0 2px 2px rgba(0,0,0,0.25); padding: 3%; }
.roundicon { width: 80px; margin: 0 0 10px 20px; float: right; }
.roundicon2 { width: 80px; margin: 0 20px 10px 0; float: left; }
.imgright { margin: 0 0 10px 20px; float: right; }
abbr { cursor: pointer; color: #e66872; }
em.caption { font-size: 13px; color: #999; line-height: 0.6; text-align: center; }
.clear { clear:both; }
.center {text-align: center; margin: 0 auto;}

@media (min-width: 768px) {
    #wrapper { width: 80%; margin: 1em auto; }
    #icon-book { display: inline-block; }
    #status a, #next a { display: block; }

    @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
    .sf-toolbar { opacity: 0; -webkit-animation: fade-in 1s .2s forwards; animation: fade-in 1s .2s forwards;}
}

input { background: white; color: black; }

#pictures {
    max-width: 720px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 160px 160px 160px 160px;
    justify-items: center;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

#pictures .picture-link {
    display: block;
    margin: 0;
    width: 160px;
    height: 160px;
}

#pictures .picture {
    width: 160px;
    height: 160px;
}

#pictures .double {
    width: 340px;
    height: 340px;
    grid-column-end: span 2;
    grid-row-end: span 2;
}
#pictures .double .picture {
    width: 340px;
    height: 340px;
}

.footnote {
    clear: both;
}

#honeymoon {
	width: 100%;
}

.day-thumb {

}

.day-thumb img {
	width: 46%;
    height: auto;
    display: block;
    margin: 2%;
    padding: 0;
    float: left;
}

.honeymoon-thumb {

}

#day2-thumb, #day4-thumb, #day6-thumb, #day8-thumb {
	clear: both;
}