/*!
Theme Name: Arend en Cynthia
Theme URI: http://underscores.me/
Author: Lars Grijsen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Goud color: #968653
This theme is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Wedding galore is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
	--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
 	line-height: 1.15; /* 1 */
 	-webkit-text-size-adjust: 100%; /* 2 */
 }

/* Sections
========================================================================== */

/**
 * Remove the margin in all browsers.
 */

 body {
 	margin: 0;
 }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

 .screen-reader-text {
 	clip: rect(1px, 1px, 1px, 1px);
 	position: absolute !important;
 	height: 1px;
 	width: 1px;
 	overflow: hidden;
 	word-wrap: normal !important;
 }

 b,
 strong {
 	font-weight: bolder;
 }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

 code,
 kbd,
 samp {

 	font-size: 1em; /* 2 */
 }

/**
 * Add the correct font size in all browsers.
 */

 small {
 	font-size: 80%;
 }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

 sub,
 sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
 }

 sub {
 	bottom: -0.25em;
 }

 sup {
 	top: -0.5em;
 }

/* Embedded content
========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

 img {
 	border-style: none;
 }

/* Forms
========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
 form {
 	margin: 0;
 }
 button,
 input,
 optgroup,
 select,
 textarea {

 	font-size: 100%; /* 1 */
 	line-height: 1.15; /* 1 */
 	margin: 0; /* 2 */
 }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

 button,
 input { /* 1 */
 	overflow: visible;
 }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

 button,
 select { /* 1 */
 	text-transform: none;
 }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
 	-webkit-appearance: button;
 }

/**
 * Remove the inner border and padding in Firefox.
 */

 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
 	border-style: none;
 	padding: 0;
 }

/**
 * Restore the focus styles unset by the previous rule.
 */

 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
 	outline: 1px dotted ButtonText;
 }

/**
 * Correct the padding in Firefox.
 */

 fieldset {
 	padding: 0.35em 0.75em 0.625em;
 }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

 legend {
 	box-sizing: border-box; /* 1 */
 	color: inherit; /* 2 */
 	display: table; /* 1 */
 	max-width: 100%; /* 1 */
 	padding: 0; /* 3 */
 	white-space: normal; /* 1 */
 }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

 progress {
 	vertical-align: baseline;
 }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

 textarea {
 	overflow: auto;
 }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

 [type="checkbox"],
 [type="radio"] {
 	box-sizing: border-box; /* 1 */
 	padding: 0; /* 2 */
 }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
 	height: auto;
 }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

 [type="search"] {
 	-webkit-appearance: textfield; /* 1 */
 	outline-offset: -2px; /* 2 */
 }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

 [type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

 ::-webkit-file-upload-button {
 	-webkit-appearance: button; /* 1 */
 	font: inherit; /* 2 */
 }

/* Interactive
========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

 details {
 	display: block;
 }

/*
 * Add the correct display in all browsers.
 */

 summary {
 	display: list-item;
 }

/* Misc
========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

 template {
 	display: none;
 }

/**
 * Add the correct display in IE 10.
 */

 [hidden] {
 	display: none;
 }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@font-face {
    font-family: 'Bernaillo';
    src: url('https://arendencynthia.nl/font/Bernaillo.woff2') format('woff2'),
        url('https://arendencynthia.nl/Bernaillo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-size: 18px;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

p {
	margin-bottom: 10px;
	margin-top:0;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}
a{
	text-decoration: none;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}



dt {
	font-weight: bold;
}



img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}



table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color:inherit;
	outline:none;
	text-decoration: none;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

footer{
	padding: 50px 0 20px;
	background:#fff;
}
@media (max-width: 980px){
	footer{
		padding-bottom:60px;
	}
}
.footer-logo{
	width: 200px; 
	margin-right: 20px;
	display: inline-block;
	vertical-align: top;
}
.footer-nav{
	width: calc(100% - 220px);
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	color: grey;
}
.footer-nav ul{
	padding: 0;
}
.footer-nav ul li{
	display: inline-block;
	list-style: none;
	margin-right: 10px;
}
#welcome{
	padding: 100px 20px;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-color: #272e2f;
}
@media (max-width: 760px){
	footer{
		text-align: center;
	}
	.footer-logo, .footer-nav ul li{ 
		display: block;
		margin: 0 auto;
	}
	.footer-nav {
		width: 100%;
	}
}
#welcome form {
	max-width: 500px;
	background: #fff;
	text-align: center;
	padding: 30px;
	margin: 0 auto;
}
#welcome input[type="password"] {
	padding: 10px 10px 10px 40px;
	display: block;
	width: 100%;
	border: none;
	border-bottom: 1px solid #5fb394;
	letter-spacing: 1px;
	font-size: 14px;
	margin: 10px auto;
	background-size: 20px !important;
	background-position: 10px center !important;
	padding-left: 40px !important;
	background-repeat: no-repeat !important;
	outline:none;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyLjAwMiA1MTIuMDAyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAyIDUxMi4wMDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+PGc+PGc+Cgk8Zz4KCQk8Y2lyY2xlIGN4PSIzNjQiIGN5PSIxNDAuMDYyIiByPSIzMiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojNEFBNDlDIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9jaXJjbGU+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik01MDYuNDc4LDE2NS45MzdjLTEwLjY4LTI3LjE5NC0zMC4yNjQtNjYuNDMxLTYyLjkxNS05OC45MjdjLTMyLjUzNS0zMi4zODQtNzEuMzU2LTUxLjQwOC05OC4xOTQtNjEuNjY2ICAgIGMtMjkuNDY0LTExLjI2MS02Mi45NDUtNC4xNjMtODUuMjk1LDE4LjA4MmwtNzguNTM4LDc4LjE3Yy0yMy4yODEsMjMuMTcxLTI5Ljk5MSw1OC44MjUtMTYuNjk4LDg4LjcyICAgIGM0LjEyMiw5LjI3Miw4LjYwNSwxOC4zNDEsMTMuMzk1LDI3LjEwM0w1Ljg1OCwzODkuNzkzQzIuMTA3LDM5My41NDQsMCwzOTguNjMxLDAsNDAzLjkzNnY4OGMwLDExLjA0Niw4Ljk1NCwyMCwyMCwyMGg4OCAgICBjMTEuMDQ2LDAsMjAtOC45NTQsMjAtMjB2LTM2bDM2LTAuMDAxYzExLjA0NiwwLDIwLTguOTU0LDIwLTIwdi0zNS45OTloMzZjMTEuMDQ2LDAsMjAtOC45NTQsMjAtMjBjMC0xMS4wNDYtOC45NTQtMjAtMjAtMjBoLTU2ICAgIGMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MzUuOTk5bC0zNiwwLjAwMWMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MzZINDBWNDEyLjIybDE3Ny4zNTUtMTc3LjM1NCAgICBjNi41MTYtNi41MTYsNy43MzctMTYuNjM5LDIuOTU4LTI0LjUxN2MtNi45MzEtMTEuNDI0LTEzLjI5OC0yMy42MzItMTguOTIzLTM2LjI4NWMtNi41OTktMTQuODQxLTMuMjM3LTMyLjU3LDguMzY2LTQ0LjExOSAgICBsNzguNTM3LTc4LjE2OWMxMS4yMTMtMTEuMTU5LDI4LjAxMS0xNC43MTgsNDIuNzk4LTkuMDY4YzIzLjIyMiw4Ljg3Niw1Ni42OSwyNS4yMTQsODQuMjU2LDUyLjY1MiAgICBjMjcuNzM1LDI3LjYwNCw0NC42Miw2MS41NjcsNTMuOSw4NS4xOTdjNS43OTEsMTQuNzQ4LDIuMjcyLDMxLjUwMy04Ljk2NSw0Mi42ODdsLTc5LjQ4Niw3OS4xMTQgICAgYy0xMS41NzUsMTEuNTE5LTI4Ljg1MSwxNC44ODctNDQuMDE2LDguNThjLTEyLjUwNy01LjIwMi0yNC42Mi0xMS4zODItMzYtMTguMzY3Yy05LjQxMy01Ljc3OC0yMS43MjktMi44My0yNy41MDcsNi41ODQgICAgYy01Ljc3OCw5LjQxNC0yLjgzMSwyMS43Myw2LjU4MywyNy41MDhjMTMuMTUyLDguMDcyLDI3LjEzNiwxNS4yMDcsNDEuNTYyLDIxLjIwN2MzMC4xNDIsMTIuNTM5LDY0LjUyNSw1LjgsODcuNTk1LTE3LjE2MSAgICBsNzkuNDg2LTc5LjExM0M1MTEuMDQ0LDIyOS4xNTcsNTE4LjEwMSwxOTUuNTM0LDUwNi40NzgsMTY1LjkzN3oiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6IzRBQTQ5QyIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+) !important;
}
#welcome input[type="submit"] {
	background: #76b6c1;
	padding: 10px 20px;
	display: block;
	width: 100%;
	margin-top: 30px;
}
#welcome input {
	max-width: 300px;
	margin: 0 auto;
}

h1, h2, h3, h4, h5, h6{
    margin: 0 0 10px;
}

a{
    outline: none;
    text-decoration: none;
	color: #968653;
}

/* HEADER & MENU */
header#masthead {
    text-align: center;
    position: relative;
}
div#primary-menu li {
    display: inline-block;
    list-style: none;
}
div#primary-menu li {
    display: inline-block;
    list-style: none;
    font-size: 14px;
    position: relative;
}

#page{
    width: 100%;
    overflow-x: hidden;
}
p.header-date {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 18px;
}
p.header-location {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
}
.admin-menu, .admin-menu *{
    font-family: "Open sans", sans-serif;
}
.admin-menu {
    background: #ffffff;
    font-size: 13px;
    padding: 6px 10px;
    border-bottom: 1px solid #dddddd;
}
.admin-menu *{
    font-size:13px;
}
.admin-menu select {   
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    margin-bottom: 0;
    border: 1px solid #bdbdbd;
}
select#select-user-group {
    width: 200px;
}

.admin-menu a.btn{
    background: #5c9a9a;
    text-decoration: none;
    padding: 2px 16px;
    color: #fff;
    border-radius: 4px;
    margin:0 4px;
    display: inline-block;
    line-height: 22px;
    font-size: 13px;
    cursor: pointer;
    float: right;
    border: none !important;
}

.admin-menu:after {
    clear: both;
    display: block;
    content: '';
}
@media (min-width: 981px){
    nav#site-navigation{
        transition:all 0.2s ease;
        position: relative;
		background: #f8f6f1;
		padding-top: 10px;
		margin-top: 10px;
    }
    nav#site-navigation.sticky {
        position: fixed;
        top: 0;
        z-index: 99;
        width: 100%;
        background: #fff;
        padding:20px 0;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
}

/*SECTIONs*/

.container {
    margin: 0 auto;
    max-width: 1000px;
    width: 90%;
    position: relative;
}
section{
    position: relative;
}
section.intro, section.footer{
    text-align: center;
}
section.intro .img-wrap, section.footer .img-wrap {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    height: 60vh;
    position: relative;
    background-color: #dfdfdf;
    background-blend-mode: multiply;
}
section.intro.with-img.intro-full-height .img-wrap {
    height: calc(100vh - 80px);
    background-attachment: fixed;
}
@media only screen 
and (max-device-width : 1024px) {
    section.intro.with-img.intro-full-height .img-wrap {
        background-attachment: initial;
    }
}

.no-img-wrap img.sticker {
    margin: 40px auto;
}
img.sticker{
    max-width: calc(100% - 10px);
    width: 600px;
}
section.footer.no-img img {
    width: 30%;
    max-width: 24px;
    margin: 86px auto;
    opacity: 0.7;
}
.img-wrap:before {
    position: relative;
    display: inline-block;
    content: '';
    height: 100%;
    vertical-align: middle;
}
.img-wrap > *{
    display: inline-block;
    vertical-align: middle;

}
.img-wrap > h1, .img-wrap > h3 {
   width: 97%;
   color: #fff;
   font-size: 120px !important;
}
h1, .no-img-wrap h3{
    font-size: 80px;
    
    margin-bottom: 0;
}
section.title-section{
    text-align: center;
    padding: 70px 0 35px 0;
}
section.title-section h1 {
	/*font-family: 'Bernaillo';*/
	/*font-family: 'Calligraffitti', cursive;*/
	font-family: 'Italianno', cursive;
    font-style: normal;
    color: #968653;
	font-size: 60px;
	font-weight: normal;
}

@media (max-width: 600px){
    .img-wrap > h1, .img-wrap > h3, .no-img-wrap h1, .no-img-wrap h3{
        font-size: 80px !important;
    }
}
section.wedding-couple {
    padding: 70px 0;
    text-align: center;
    position: relative;
}
.person-img {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    margin:0 auto;
}

#countdown div {
    display: inline-block;
    vertical-align: top;
    font-size: 48px;
    font-weight: bold;
    width: 24%;
    max-width: 100px;
    position: relative;
    margin-bottom: 30px;
}
#countdown #cd-days:after {
    content: 'Dagen';
}
#countdown #cd-hours:after {
    content: 'Uren';
}
#countdown #cd-minutes:after {
    content: 'Minuten';
}
#countdown #cd-seconds:after {
    content: 'Seconden';
}
#countdown>div:after {
    position: absolute;
    font-size: 10px;
    font-weight: 300;
    left: 0;
    bottom: -11px;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

form label {
    display: block;
    font-size: 12px;
    margin-top:15px;
}

div#rsvp-yes, div#rsvp-no {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    background: #eee;
}
form.rsvp-form {
    background: #eee;
    padding: 20px;
    margin: 10px auto;
} 
.rsvp-notice {
    margin: 15px auto;
    padding: 15px;
    background: #76b6c1;
    border-radius: 4px;
    max-width: 560px;
    color: #fff;
    text-align: center;
}
input[type="text"], input[type="phone"], input[type="number"],input[type="email"], select, textarea {
 width: 100%;
 font-size: 14px;
 padding: 5px 10px;
 background: #fff;
 border: 1px solid #eee;
 margin-bottom: 10px;
 -webkit-appearance: none;
}
form p{
    margin-bottom: 30px;
}
textarea{
    max-width: 100%;
    min-width: 100%;
    font-family: inherit;
}
select{
   background-position: calc(100% - 12px) center;
   background-size: 10px;
   background-repeat: no-repeat;
   background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDUxLjg0NyA0NTEuODQ3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NTEuODQ3IDQ1MS44NDc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjI1LjkyMywzNTQuNzA2Yy04LjA5OCwwLTE2LjE5NS0zLjA5Mi0yMi4zNjktOS4yNjNMOS4yNywxNTEuMTU3Yy0xMi4zNTktMTIuMzU5LTEyLjM1OS0zMi4zOTcsMC00NC43NTEgICBjMTIuMzU0LTEyLjM1NCwzMi4zODgtMTIuMzU0LDQ0Ljc0OCwwbDE3MS45MDUsMTcxLjkxNWwxNzEuOTA2LTE3MS45MDljMTIuMzU5LTEyLjM1NCwzMi4zOTEtMTIuMzU0LDQ0Ljc0NCwwICAgYzEyLjM2NSwxMi4zNTQsMTIuMzY1LDMyLjM5MiwwLDQ0Ljc1MUwyNDguMjkyLDM0NS40NDlDMjQyLjExNSwzNTEuNjIxLDIzNC4wMTgsMzU0LjcwNiwyMjUuOTIzLDM1NC43MDZ6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}
input.req.warning, select.req.warning {
    border: 1px solid #ea9797 !important;
    background: #f5eaea  !important;
}
.checkbox-group.req.warning, .radio-group.req.warning {
    padding-left: 10px  !important;
    border-left: 3px solid red  !important;
}
.checkbox-group label:last-child, .radio-group label:last-child{
    margin-bottom: 30px;
}
.pc {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
}
.city {
    width: 73%;
    display: inline-block;
    vertical-align: top;
}

img.icon {
    width: 50px;
    height: auto;
}
div#rsvp-choices {
    text-align: center;
    padding: 30px 0;
    background: transparent;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
section.rsvp {
    padding-bottom: 50px;
}

div#rsvp-yes, div#rsvp-no {
    background: #f7f7f5;
    color: #76b6c1;
    width: 90px;
    border-radius: 3px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

div#rsvp-no.selected, div#rsvp-yes.selected {
    background: #76b6c1;
    color: #fff;
}
div#rsvp-yes {
    margin-right: 30px;
}
div#rsvp-no {
    margin-left: 30px;
}
div#rsvp-yes:after{
    content:'';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMS45OTkgNTExLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjk5OSA1MTEuOTk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxnPjxnPgoJPGc+CgkJPHBhdGggZD0iTTUwNi4yMzEsNzUuNTA4Yy03LjY4OS03LjY5LTIwLjE1OC03LjY5LTI3Ljg0OSwwbC0zMTkuMjEsMzE5LjIxMUwzMy42MTcsMjY5LjE2M2MtNy42ODktNy42OTEtMjAuMTU4LTcuNjkxLTI3Ljg0OSwwICAgIGMtNy42OSw3LjY5LTcuNjksMjAuMTU4LDAsMjcuODQ5bDEzOS40ODEsMTM5LjQ4MWM3LjY4Nyw3LjY4NywyMC4xNiw3LjY4OSwyNy44NDksMGwzMzMuMTMzLTMzMy4xMzYgICAgQzUxMy45MjEsOTUuNjY2LDUxMy45MjEsODMuMTk4LDUwNi4yMzEsNzUuNTA4eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojNzZCNkMxIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=);
    background-size: contain;
    right: -40px;
    top: -30px;
    opacity: 0;
    -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; 
    -o-transition: 0.2s ease; 
    transition: 0.2s ease;    
}
div#rsvp-no:after{
    content:'';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMi4wMDEgNTEyLjAwMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyLjAwMSA1MTIuMDAxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIGNsYXNzPSIiPjxnPjxnPgoJPGc+CgkJPHBhdGggZD0iTTUwNS45MjIsNDc2LjU2N0wyODUuMzU1LDI1Nkw1MDUuOTIsMzUuNDM1YzguMTA2LTguMTA1LDguMTA2LTIxLjI0OCwwLTI5LjM1NGMtOC4xMDUtOC4xMDYtMjEuMjQ4LTguMTA2LTI5LjM1NCwwICAgIEwyNTYuMDAxLDIyNi42NDZMMzUuNDM0LDYuMDgxYy04LjEwNS04LjEwNi0yMS4yNDgtOC4xMDYtMjkuMzU0LDBjLTguMTA2LDguMTA1LTguMTA2LDIxLjI0OCwwLDI5LjM1NEwyMjYuNjQ2LDI1Nkw2LjA4LDQ3Ni41NjcgICAgYy04LjEwNiw4LjEwNi04LjEwNiwyMS4yNDgsMCwyOS4zNTRjOC4xMDUsOC4xMDUsMjEuMjQ4LDguMTA2LDI5LjM1NCwwbDIyMC41NjctMjIwLjU2N2wyMjAuNTY3LDIyMC41NjcgICAgYzguMTA1LDguMTA1LDIxLjI0OCw4LjEwNiwyOS4zNTQsMFM1MTQuMDI4LDQ4NC42NzMsNTA1LjkyMiw0NzYuNTY3eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgc3R5bGU9ImZpbGw6I0Q4NTQ1NCI+PC9wYXRoPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=);
    background-size: contain;
    left: -40px;
    bottom: -30px;
    opacity: 0;
    -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; 
    -o-transition: 0.2s ease; 
    transition: 0.2s ease;    
}
div#rsvp-yes.selected:after{
    top:12px;
    opacity: 1;
}
div#rsvp-no.selected:after{
    bottom:12px;
    opacity: 1;
}

.rsvp form {
    background: #f7f7f5;
    max-width: 600px;
    margin: 0 auto;
}
form h3{
    font-weight: bold;
    text-align: center;
}
span.input-minus, span.input-plus {
    display: inline-block;
    width: 24px;
    background: #76b6c1;
    height: 24px;
    vertical-align: middle;
    border-radius: 3px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
form{
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
input[type="submit"] {
    background: #76b6c1;
    color: #fff;
    border-radius: 3px;
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
}
span.input-plus {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBjbGFzcz0iIj48Zz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00OTIsMjM2SDI3NlYyMGMwLTExLjA0Ni04Ljk1NC0yMC0yMC0yMGMtMTEuMDQ2LDAtMjAsOC45NTQtMjAsMjB2MjE2SDIwYy0xMS4wNDYsMC0yMCw4Ljk1NC0yMCwyMHM4Ljk1NCwyMCwyMCwyMGgyMTYgICAgdjIxNmMwLDExLjA0Niw4Ljk1NCwyMCwyMCwyMHMyMC04Ljk1NCwyMC0yMFYyNzZoMjE2YzExLjA0NiwwLDIwLTguOTU0LDIwLTIwQzUxMiwyNDQuOTU0LDUwMy4wNDYsMjM2LDQ5MiwyMzZ6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPg==);
}
span.input-minus{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48Zz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00OTIsMjM2SDIwYy0xMS4wNDYsMC0yMCw4Ljk1NC0yMCwyMGMwLDExLjA0Niw4Ljk1NCwyMCwyMCwyMGg0NzJjMTEuMDQ2LDAsMjAtOC45NTQsMjAtMjBTNTAzLjA0NiwyMzYsNDkyLDIzNnoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+);
}
.input-val{
    display: inline-block;
    width: 34px;
    font-weight: bold;
    text-align: center;
}
.checkbox-group label, .radio-group label { 
    font-size: 15px;
    cursor:pointer;
}
input[type="radio"], input[type="checkbox"]{
    -webkit-appearance:none;
    outline: none;
    position: absolute;
    opacity: 0;
}
span.custom-checkbox {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background: white;
    border: 1px solid #eee;
    border-radius: 3px;
    margin-right: 5px;
}
input[type="radio"]:checked + span.custom-checkbox, input[type="checkbox"]:checked + span.custom-checkbox{
 background: #76b6c1;
}
span.custom-checkbox:after {
    content:'';
    width: 18px;
    height: 18px;
    background-size: 1px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMS45OTkgNTExLjk5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjk5OSA1MTEuOTk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxnPjxnPgoJPGc+CgkJPHBhdGggZD0iTTUwNi4yMzEsNzUuNTA4Yy03LjY4OS03LjY5LTIwLjE1OC03LjY5LTI3Ljg0OSwwbC0zMTkuMjEsMzE5LjIxMUwzMy42MTcsMjY5LjE2M2MtNy42ODktNy42OTEtMjAuMTU4LTcuNjkxLTI3Ljg0OSwwICAgIGMtNy42OSw3LjY5LTcuNjksMjAuMTU4LDAsMjcuODQ5bDEzOS40ODEsMTM5LjQ4MWM3LjY4Nyw3LjY4NywyMC4xNiw3LjY4OSwyNy44NDksMGwzMzMuMTMzLTMzMy4xMzYgICAgQzUxMy45MjEsOTUuNjY2LDUxMy45MjEsODMuMTk4LDUwNi4yMzEsNzUuNTA4eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiI+PC9wYXRoPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=);
    -webkit-transition:all 0.12s 0.12s ease;
    -moz-transition:all 0.12s 0.12s ease;
    transition:all 0.12s 0.12s ease;
    position: absolute;
    top: 2px;
    left:2px;
}

input[type="radio"]:checked + span.custom-checkbox:after,  input[type="checkbox"]:checked + span.custom-checkbox:after {
    opacity: 1;
    background-size: 18px;
}



div#reserve-gift {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(252, 252, 252, 0.89);
    text-align: center;
    padding: 20px;
    z-index: 202;
}
#reserve-gift:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

input.gift-email {
    width: 100%;
    font-size: 14px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #eee;
}
input.gift-email.incorrect {
    border-color: #d88484;
}
#reserve-gift .container {
    background: #fcfcfc;
    max-width: 600px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 15px -7px rgba(0,0,0,0.2);
    overflow: auto;
    max-height: 100%;
    width: 98%;
}

.modal-header {
    padding: 20px;
    background: #60c5a2;
    color: #fff;
}
.modal-header p{
    margin: 0 !important;
    font-size: 20px;
}
.modal-content{
    padding: 20px;
    text-align: left;
}

.modal-actions input[type="submit"], .modal-actions a{
    width: 50%;
    border: none;
    background: #60c5a2;
    padding: 20px;
    line-height: 20px;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
    text-align: center;
    outline: none;
    font-weight: 400;
    text-transform: uppercase;
}
a.cancel {
    background: #de4343;   
}
div#gift-message {
    display: none;
    color: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #60c5a2;
    padding: 30px 10px;
    text-align: center;
    overflow-y: auto;
}

.message-content{
    font-size: 40px;    
}
.message-content small{
    font-size: 24px;
}
div#gift-message.active {
    display:block;
}

.circle-loader {
  margin-bottom: 3.5em;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-left-color: #fff;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #fff;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}
.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.smartphoto {
    z-index: 99999 !important;
}
.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  content: '';
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
}
20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
}
40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
}
100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
}
}
section.gallery{
    padding:40px 5px;
}
a.gallery-pic {
    display: inline-block;
    width: 20%;
    vertical-align: top;
}
a.gallery-pic img {
    display: block;
    margin: 5px;
    width: calc(100% - 10px);
    -webkit-transition:all 0.12s ease-in;
    -moz-transition:all 0.12s ease-in;
    -ms-transition:all 0.12s ease-in;
    transition:all 0.12s ease-in;
}
@media not all and (hover: none){
    a.gallery-pic:hover img {
        -webkit-transform: scale(1.06);
        -moz-transform: scale(1.06);
        -ms-transform: scale(1.06);
        transform: scale(1.06);
    }
}
@media (max-width: 800px){
 a.gallery-pic {
    display: inline-block;
    width: calc(100% / 3);
    vertical-align: top;
}   
}
@media (max-width: 400px){
 a.gallery-pic {
    display: inline-block;
    width: calc(100% / 2);
    vertical-align: top;
}   
}
section.gifts{
    padding: 40px 0;
}
section.gifts .container {
    max-width: 1200px;
}
section.gifts .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.gift {
    display: inline-block;
    width: calc(25% - 15px);
    vertical-align: top;
    margin: 20px 20px 20px 0;
    box-shadow: 0 0 20px -10px rgba(0,0,0,0.4);
    background: #fff;
    position: relative;
    overflow:hidden;
    padding-bottom:30px;
    text-align: center;
}
.gift.reserved:after {
    content: 'Gereserveerd';
    position: absolute;
    top: 86px;
    left: 0;
    text-align: center;
    width: 100%;
    left: -0;
    background: #60c5a2;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 0;
    z-index: 11;
}
.gift:nth-of-type(4n){
   margin-right:0;
}
.gift-image {
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
    background-blend-mode: darken;
}
.gift-content {
    padding: 15px;
    font-size: 14px;
}
h3.gift-title {
    font-size: 13px;
}
.gift p, .gift p *{
    margin:0;    
    font-size: 13px;
    color: #9e9e9e;
}
.gift p.gift-amounts {
    margin: 0;
    text-align: center;
    padding: 3px 15px;
}

.gift-actions {
  text-align: center;
  height: 29px;
  background: #60c5a2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.gift-actions:after {
    content: '';
    width: 12px;
    height: 12px;
    left: calc(50% - 7px);
    top: 8px;    
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDkyLjcxOSA0OTIuNzE5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTIuNzE5IDQ5Mi43MTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGc+PGc+Cgk8ZyBpZD0iSWNvbnNfMThfIj4KCQk8cGF0aCBkPSJNNDkyLjcxOSwxNjYuMDA4YzAtNzMuNDg2LTU5LjU3My0xMzMuMDU2LTEzMy4wNTktMTMzLjA1NmMtNDcuOTg1LDAtODkuODkxLDI1LjQ4NC0xMTMuMzAyLDYzLjU2OSAgICBjLTIzLjQwOC0zOC4wODUtNjUuMzMyLTYzLjU2OS0xMTMuMzE2LTYzLjU2OUM1OS41NTYsMzIuOTUyLDAsOTIuNTIyLDAsMTY2LjAwOGMwLDQwLjAwOSwxNy43MjksNzUuODAzLDQ1LjY3MSwxMDAuMTc4ICAgIGwxODguNTQ1LDE4OC41NTNjMy4yMiwzLjIyLDcuNTg3LDUuMDI5LDEyLjE0Miw1LjAyOWM0LjU1NSwwLDguOTIyLTEuODA5LDEyLjE0Mi01LjAyOWwxODguNTQ1LTE4OC41NTMgICAgQzQ3NC45ODgsMjQxLjgxMSw0OTIuNzE5LDIwNi4wMTcsNDkyLjcxOSwxNjYuMDA4eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgoJPC9nPgo8L2c+PC9nPiA8L3N2Zz4=);
    display: block;
    position: absolute;
    z-index: 11;
}
.gift-actions a{
    display: inline-block;
    text-align: center;
    width: 50%;
    vertical-align: top;
    font-size: 12px;
    background: #60c5a2;
    color: #fff;
    text-transform: uppercase;
    line-height: 29px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    float: left;
}
a.reserve-gift {
    float: right;
}
.gift-actions a:hover {
    background: #4e8c77;
}
div#primary-menu li {
    padding-left: 20px;
    font-size: 13px;
    text-transform: uppercase;
}
@media (min-width: 981px){
    div#primary-menu li:first-child {
        padding-left: 0;
    }
}
div#toggle-menu{
    display: none;
}
div#toggle-menu:before{
   content: '';
   width: 18px;
   height: 18px;
   display: block;
   position: absolute;
   background-size: contain;
   left: 13px;
   top: 9px;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI0Ljc1IDI0Ljc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNC43NSAyNC43NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxnPgoJPHBhdGggZD0iTTAsMy44NzVjMC0xLjEwNCwwLjg5Ni0yLDItMmgyMC43NWMxLjEwNCwwLDIsMC44OTYsMiwycy0wLjg5NiwyLTIsMkgyQzAuODk2LDUuODc1LDAsNC45NzksMCwzLjg3NXogTTIyLjc1LDEwLjM3NUgyICAgYy0xLjEwNCwwLTIsMC44OTYtMiwyYzAsMS4xMDQsMC44OTYsMiwyLDJoMjAuNzVjMS4xMDQsMCwyLTAuODk2LDItMkMyNC43NSwxMS4yNzEsMjMuODU1LDEwLjM3NSwyMi43NSwxMC4zNzV6IE0yMi43NSwxOC44NzVIMiAgIGMtMS4xMDQsMC0yLDAuODk2LTIsMnMwLjg5NiwyLDIsMmgyMC43NWMxLjEwNCwwLDItMC44OTYsMi0yUzIzLjg1NSwxOC44NzUsMjIuNzUsMTguODc1eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=);
   z-index: 201;
   transition:all 0.2s ease;
   display: block;
}
div#toggle-menu:after{
 content: '';
 width: 18px;
 height: 18px;
 display: block;
 position: absolute;
 background-size: contain;
 left: 13px;
 top: 9px;
 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDMwLjcyNCAzMC43MjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwLjcyNCAzMC43MjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48Zz4KCTxwYXRoIGQ9Ik0yOS45OTIsMTAuMTgybC0xNC42MywxNC42M0wwLjczMiwxMC4xODJjLTAuOTc3LTAuOTc2LTAuOTc3LTIuNTU5LDAtMy41MzVjMC45NzYtMC45NzcsMi41NTktMC45NzcsMy41MzUsMCAgIGwxMS4wOTQsMTEuMDkzTDI2LjQ1Nyw2LjY0NmMwLjk3Ny0wLjk3NywyLjU2LTAuOTc3LDMuNTM2LDBDMzAuOTY4LDcuNjIyLDMwLjk2OCw5LjIwNSwyOS45OTIsMTAuMTgyeiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiI+PC9wYXRoPgo8L2c+PC9nPiA8L3N2Zz4=);    
 z-index: 201;
 transition:all 0.2s ease;
 display: none;
}
div#toggle-menu.menu-open:after{
    display: block;
}
div#toggle-menu.menu-open:before{
    display: none;
}
@media (max-width: 1100px) and (min-width: 981px){
    .gift{
       width: calc((100% / 3) - 15px);
       margin-right: 15px !important;
   }
   .gift:nth-of-type(3n){
    margin-right: 0 !important;
}
}
@media (max-width: 980px){
    .gift{
     width: calc(50% - 5px);
     margin-right: 10px !important;
 }
 .gift:nth-of-type(2n){
    margin-right: 0 !important;
}
}
@media (max-width: 980px){
    nav#site-navigation {
        display: none;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        position: fixed;
        transition: all 0.25s ease-in-out;
        z-index: 199;

    }
    nav#site-navigation:after {
        display: block;
        content: '';
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
    }

    div#toggle-menu {
        position: fixed;
        top: 25px;
		/*bottom: 20px;*/
        width: 120px;
        /*left: calc(50% - 60px);*/
        left: calc(20px);
        background: #135050;
        line-height: 36px;
        z-index: 202;
        border-radius: 18px;
        transition: 0.4s linear;
        box-shadow: 0 0 14px -5px rgba(0,0,0,0.3);
        text-align: right;
        padding: 0 16px;
    }
    div#toggle-menu span {
        color: #fff;
        font-size: 18px;
    }
    div#toggle-menu.menu-open + nav#site-navigation {
        /*top:0   ;*/
		display: block;
    }
    div#toggle-menu{
        display: block;
    }
    div#primary-menu {
      z-index: 201;
      position: relative;
      left: 0;
      right: 0;
      padding: 50px 30px;
      top: 20px;
      max-height: 100vh;
      overflow-y: auto;
  }
  div#primary-menu ul {
    padding: 0;
}
div#primary-menu ul li{ 
    padding:15px;
    font-size: 17px;    
}
div#primary-menu ul li a{
    color:#fff;
} 

#toggle-menu.menu-open + nav#site-navigation #primary-menu li{
    left: 0;
    transition: all 0.2s 0.2s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(1){
    transition: all 0.2s 0.1s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(2){
    transition: all 0.2s 0.12s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(3){
    transition: all 0.2s 0.14s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(4){
    transition: all 0.2s 0.16s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(5){
    transition: all 0.2s 0.18s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(6){
    transition: all 0.2s 0.20s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(7){
    transition: all 0.2s 0.22s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(8){
    transition: all 0.2s 0.24s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(9){
    transition: all 0.2s 0.26s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(10){
    transition: all 0.2s 0.28s ease;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu li:nth-child(11){
    transition: all 0.2s 0.30s ease;
}
#site-navigation:before {
 content: '';
 display: inline-block;
 width: 0;
 height: calc(100% / 1.2);
 vertical-align: bottom;
 margin-left: -5px;
}
#toggle-menu.menu-open + nav#site-navigation #primary-menu{
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}



div#primary-menu li {
    display: block;
    text-align: left;
    position: relative;
    left: -100%;
    transition: all 0.15s ease;            
}


nav#site-navigation:after {
    background: rgba(104, 170, 173, 0.95);
}

}
@media (max-width: 600px){
    h1 {    
        font-size: 36px;
    }
    #countdown div{
        font-size:32px;
    }
    .gift-actions a{
        font-size:11px;
    }
    /*.gift{
        display: block;
        width: 100%;
        max-width: 340px;
        margin:20px auto !important;
        }*/

    }
    div.countdown-wrapper {
        text-align: center;
        width: 440px;
        margin: 0 auto;
        position: relative;
        max-width: 100%;
    }
    #cd-date{
        text-align: center;
    }
    .practical, .person {
        display: inline-block;
        width: calc(100% / 3);
        text-align: center;
        padding: 20px;
        vertical-align: top;
    }
    @media (max-width: 1000px){
        .practical, .person {
            width: 50%;
        }
    }
    @media (max-width: 699px){
        .practical, .person {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: block;
        }
    }

    section#ceremoniemeesters{
        text-align: center;
        padding-top:70px;
        padding-bottom: 70px;
    }
    section#ceremoniemeesters .container {
        padding: 30px;
        background: rgba(255,255,255,0.5);
        box-shadow: 0 0 15px -4px rgba(0,0,0,0.3);
        border-radius: 5px;
    }
    .ceremoniemeester{
        display: inline-block;
        vertical-align: top;
    }
    .cm-header-wrap {
        display: inline-block;
        text-align: center;
        font-size: 30px;
        width: 50%;
        vertical-align: middle;
    }
    section#ceremoniemeesters h2 span {
        display: block;
    }
    .ceremoniemeester h4, .ceremoniemeester p {
        margin-bottom: 0;
        font-size: 18px;
    }
    .ceremoniemeesters-wrap{
        width: calc(50% - 22px);
        display: inline-block;
        vertical-align: middle;
        margin-left:20px;
        padding-left:20px;
        border-left:2px solid;
    }

    .count-2 .ceremoniemeesters-wrap{
        width: calc(200% / 3 - 22px);
    }
    .count-2 .cm-header-wrap{
        width: calc(100% / 3);
    }
    .count-2 .ceremoniemeester{
        width: 50%;
    }

    .count-3 .ceremoniemeesters-wrap{
        width: calc(75% - 22px);
    }
    .count-3 .cm-header-wrap{
        width: 25%;
    }
    .count-3 .ceremoniemeester{
        width: calc(100% / 3);
    }
    .cm-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin:0 auto 10px;
    }
    @media (max-width: 1100px){
        section#ceremoniemeesters h2 {
            font-size: 32px;
        }
    }
    @media (max-width: 899px){
        .cm-header-wrap, .ceremoniemeesters-wrap{
            display: block;
            width: 100% !important;
            padding-left:0;
            margin-left: 0;
            border-left:none;
        }
        section#ceremoniemeesters h2 span {
            display: inline;
            margin-bottom:15px;
        }

        section#ceremoniemeesters h2 {
            border-bottom: 2px solid;
            display: inline-block;
            margin-bottom: 20px;
        }
    }
    @media (max-width: 650px){
        .count-3 .ceremoniemeester{
            width: 100%;
            display: block;
            margin-bottom: 15px;
        }
    }
    @media (max-width: 480px){
        section#ceremoniemeesters .container {
            padding: 20px;
        }
        .count-2 .ceremoniemeester{
            width: 100%;
            display: block;
            margin-bottom: 15px;
        }
        section#ceremoniemeesters h2 {
            font-size: 40px !important;
        }
    }

    section#insta-home{
        padding:50px 0;
        text-align: center;
    }
    section#insta-home #insta-wrap .post{
        display: inline-block;
        vertical-align: top;
        padding:5px;
        width: calc(100% / 3);
    }
    section#insta-home #insta-wrap{
        display: flex;
        flex-wrap: wrap;
            max-width: 1000px;
    margin: 0 auto;
    }
    section#insta-home #insta-wrap .post .meta{
        display:none;
    }
    div#insta-blog .post a{
        position: relative;
        display: block;
    }
    div#insta-blog .post {
        background: #fff;
        box-shadow: 0 0 18px -5px rgba(0,0,0,0.3);
        width: 100%;
        max-width: 640px;
        margin: 0 auto 70px;
        position: relative;
    }
    .masonry .container{
        width: 90%;
        max-width: 90%;
    }
    .masonry div#insta-blog .post{
        width: 24%;
        /*display: block;*/
        margin: 0.5%;
        float: left;
    }
    @media (max-width: 1200px){
         .masonry div#insta-blog .post{
        width: calc(100% / 3 - 20px);       
    }
    }
     @media (max-width: 999px){
         .masonry div#insta-blog .post{
        width: calc(49%);       
    }
    }
     @media (max-width: 600px){
         .masonry div#insta-blog .post{
        width: 100%;
        margin:5px auto 20px;       
    }
    }
    .masonry div#insta-blog .post:nth-of-type(3n){
        /*clear: both;*/
    }
    .post-image{
        position: relative;
    }
    .post.type-video .post-image:before {
        content: '';
        width: 100px;
        height: 100px;
        background-image: url(../img/playbutton.png);
        position: absolute;
        top: calc(50% - 50px);
        left: 0;
        right: 0;
        margin: 0 auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    div#insta-blog .post .meta{
        display:block;
        padding:20px;
        max-width: 500px;
        margin: 0 auto;
        font-weight:400;
        font-size:14px;
        word-break: break-word;
    }
    span.stats .likes:before, span.stats .comments:before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(../img/heart.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin-right: 5px;
    }
    span.stats .comments:before{
        background-image: url(../img/like.png);
    }
    span.likes {
        margin-right: 30px;
    }
    span.count-0 {
        display: none;
    }
    #load-more{
        background: #f7f7f5;
        color: #76b6c1;
        width: 200px;
        border-radius: 3px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        padding: 18px;
        margin: 0 auto;
        display: block;
        text-align: center;
        clear: both;
    }

/* GALORE STYLING*/
#page, input, textarea, select, ul, li, ol, #modal {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    letter-spacing: 1px;
}
h1 {
    font-size: 46px;
    font-weight: 900;
}
.container{
    max-width: 800px;
}
img.icon {
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
    position: relative;
}
a.btn, a.btn.close-modal {
    text-transform: uppercase;
    padding: 10px 20px;
    display: inline-block;
    letter-spacing: 2px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background: transparent;
    color: #000;
    border: 2px solid #000 !important;
    border-radius: 0;
    font-weight: 400;

}
input[type="submit"] {
    background: transparent;
    border: 2px solid #000;
    border-radius: 0;
    color: #000;
}
a.btn:hover {
    background: #000;
    color:#fff;

}
#welcome input[type="submit"]{
    background-color: transparent;
}
div#rsvp-yes, div#rsvp-no {
    background: transparent;
    color: #000;
    width: 90px;
    border: 2px solid #000;   
    border-radius: 0;
}
div#rsvp-no.selected, div#rsvp-yes.selected {
    background: #000000;
    color: #fff;
}
input[type="text"], input[type="phone"], input[type="number"], input[type="email"], select, textarea {
    padding: 5px 10px;
    background: transparent;
    border-bottom: 2px solid #000;
    border: none !important;
    border-bottom: 2px solid !important;
    outline: none;
}
textarea{
    border:2px solid #000 !important;
}
input[type="radio"]:checked + span.custom-checkbox, input[type="checkbox"]:checked + span.custom-checkbox {
    background: #000000;
}
span.input-minus, span.input-plus {
    background-color: #000;
    border-radius: 50%;
}
.checkbox-group label, .radio-group label {
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}
header#masthead {
    /*background: #a6b9ad;
    color:#fff;*/
}
.no-img-wrap h1 {
    color: initial;
    padding:40px 0 10px;
}
.img-wrap > h1, .img-wrap > h3{
    max-width: 98%;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
h3.heading {
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
}
p.sub-heading {
    font-size: 20px;
    text-transform: uppercase;
}

section#ceremoniemeesters h2 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 900;
}
.ceremoniemeester h4 {
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
}
section.intro .img-wrap, section.footer .img-wrap{
    background-color: #f7f7f5;
    background-blend-mode: multiply;

}
.ceremoniemeesters-wrap{
    border-left: none;
    position: relative;
}
.ceremoniemeesters-wrap:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    background-image: url(img/vertical-dashes.png);
    width: 15px;
    background-size: 6px;
    background-repeat: no-repeat;
}
div#primary-menu li{
    padding-left: 0;
}
.site-branding h2 {
    font-size: 38px;
	font-weight: bold;
    padding: 20px 0 10px;
    margin-bottom: 0;
	/*font-family: 'Bernaillo';*/
	/*font-family: 'Calligraffitti', cursive;*/
	font-family: 'Italianno', cursive;
	font-style: normal;
	color: #968653;
}
.bernailloFont {
	font-weight: bold;
	/*font-family: 'Bernaillo';*/
	/*font-family: 'Calligraffitti', cursive;*/
	font-family: 'Italianno', cursive;
	font-style: normal;
	color: #968653;
	text-transform: none !important;
	font-size: 48px !important;
	margin-bottom: 20px;
}
#page{
    background-color:#f3f0e6;
}
div#primary-menu li a {
    color: #968653;
    padding: 0 15px 10px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}
div#primary-menu li:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 9px;
    left: 50%;
    right: 50%;
    background: #968653;
    height: 2px;
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
section#ceremoniemeesters .container {    
    background: transparent;
    box-shadow: none;
}
@media (max-width: 899px){
    section#ceremoniemeesters h2{
        border-bottom:none;
        margin-bottom: 30px;
    }
    .ceremoniemeesters-wrap:before {
        top: -23px;
        bottom: unset;
        height: 7px;
        left: 0;
        right: 0;
        width: unset;
        background-size: contain;
        background-position: center;

    }
}

div#primary-menu li:hover:after, div#primary-menu li.current_page_item:after {
    left: 15px;
    right: 15px;
}
div#primary-menu ul {
    margin: 0 auto;
}
.header-date, .header-location{
    color:#334439;
}

/*section.intro .img-wrap:after  {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 20%;
    background-image: url(img/header-after.png);
    left: 0;
    bottom: -2px;
     -webkit-background-size:  1920px 100%;;
    -moz-background-size:  1920px 100%;;
    -o-background-size:  1920px 100%;;
    background-size: 1920px 100%;
    mix-blend-mode: lighten;
}
section.footer .img-wrap:after  {
    content: '';
    transform:rotate(180deg);
    display: block;
    position: absolute;
    width: 100%;
    height: 20%;
    background-image: url(img/header-after.png);
    left: 0;
    top: -2px;
    background-size: 1920px 100%;
    mix-blend-mode: lighten;
    }*/
    section.wedding-couple{
        text-align: center;
        padding:100px 0;
        position: relative;
    }
    div#countdown {
        margin-bottom: 60px;
        max-width: 600px;
        position: relative;
        margin: 0 auto 40px;
    }
    #countdown>div{
        opacity: 0;
        transform:translateY(-30px);
    }
    #countdown.in-view>div{
        opacity: 1;
        transform: translateY(0);
        transition: all 0.5s ease-in-out;
    }
    #countdown  #cd-days{
        transition-delay: 0.1s;
    }
    #countdown  #cd-hours{
        transition-delay: 0.2s;
    }
    #countdown #cd-minutes{
        transition-delay: 0.3s;
    }
    #countdown  #cd-seconds{
        transition-delay: 0.4s;
    }
    .person, .practical{
        opacity: 0;
        transform:translateY(30px);
        transition: all 0.5s ease-in-out;
        transition-delay: 0.1s;
    }
    .person.in-view, .practical.in-view{
        opacity: 1;
        transform: translateY(0);
		box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
    }
    @media (min-width: 981px){   
        .person:nth-of-type(3n+2), .practical:nth-of-type(3n+2){
            transition-delay: 0.2s;
        }
        .person:nth-of-type(3n), .practical:nth-of-type(3n){
            transition-delay: 0.3s;
        }
    }
    @media (min-width: 601px) and (max-width: 980px){   
       .person:nth-of-type(2n), .practical:nth-of-type(2n){
        transition-delay: 0.2s;
    }        
}

#countdown #countdown:after{
    content: '';
    width: 1080px;
    padding-top: 100px;
    max-width: 90%;
    position: absolute;
    display: block;
    background-image: url(img/divider.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-position: center top;
}
span.first-name {
    font-weight: bold;
}
h2.name-1{
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding-right: 30px;
    text-align: right;
    padding-bottom: 60px;
    -webkit-transition:all 1s 0.1s ease-in-out;
    -moz-transition:all 1s 0.1s ease-in-out;
    transition:all 1s 0.1s ease-in-out;
    opacity: 0;
    transform: translateX(50px);
}
h2.name-2 {
    display: inline-block;
    vertical-align: bottom;
    width: 50%;
    padding-left:30px;
    text-align: left;
    padding-top: 60px;
    -webkit-transition:all 1s 0.2s ease-in-out;
    -moz-transition:all 1s 0.2s ease-in-out;
    transition:all 1s 0.2s ease-in-out;
    opacity: 0;
    transform: translateX(-50px);
}
h2.name-1.in-view, h2.name-2.in-view {
    opacity: 1;
    transform: translateX(0);
}


h2.name-1 span, h2.name-2  span{
    display: block;
}
section.wedding-couple h2 {
    font-size: 40px;
    color: #353535;
    position: relative;
    text-transform: uppercase;
    margin:0;
}

section.wedding-date {
    padding: 30px 0;    
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    text-transform: uppercase;
}
@media (max-width: 600px){
    section.wedding-date{
        font-size: 28px;
    }
    .site-branding h2 {
        font-size: 28px;
        padding: 24px 0 14px 0;
		margin-left: 120px;
    }
    h2.name-1, h2.name-2{
        transform: scale(0.9) !important;
        font-size: 28px !important;
    }
    h2.name-1.in-view, h2.name-2.in-view{
        transform:scale(1) !important;
    }
}
span.and {
    display: block;
    position: absolute;
    bottom: 50%;
    top: 50%;
    left: calc(50% - 1px);
    background: #968653;
    width: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(21deg);
    -webkit-transition:none;
    -moz-transition: none;
    transition:none;
}
span.and.in-view{
   bottom: -40px;
   top: -40px;
   -webkit-transition: all 1s 1.2s ease;
   -moz-transition: all 1s 1.2s ease;
   transition: all 1s 1.2s ease;

}
p.hashtag{
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  padding-top: 50px;
}

.section-img {
    padding-top: 50%;
    background-size: cover;
    background-position: center;
    width: 50%;
    display: inline-block;
    vertical-align: top;
}
.content-section .container{
    background:#f7f7f5;
    margin-bottom: 50px;
}
.content-wrap{
    display: inline-block;
    position: relative;
    width: 50%;
    vertical-align: top;
}
.content-wrap:after{
    content:'';
    display: block;
    padding-bottom:100%;
}

.content-content h3{
    font-weight: bold;
    font-size: 30px;
}
.content-content h5{
    text-transform: uppercase;
    font-size: 22px;
}
section.stories, section.events {
    padding-top: 30px;
}
.story, .event {
    margin-bottom: 100px;
    opacity: 0;
    -webkit-transition:all 0.6s 0.2s ease-in-out;
    -moz-transition:all 0.6s 0.2s ease-in-out;
    transition:all 0.6s 0.2s ease-in-out;        
    transform: translateY(30px);
}
.story.in-view, .event.in-view{
    opacity: 1;
    transform: translateY(0);
}
.story p {
		font-size:20px;
}
.story p:last-child{
    margin-bottom: 0;
}
.story-content, .event-content {
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}
.rsvp form {
    background: transparent;
    /*border: 2px solid;*/
}
.event .content-right {
    text-align: center;
}
.event img.icon {
    margin-bottom: 20px;
}
.event-time, .event-date{
    line-height: 1;
}
.event-time:before, .event-date:before{
    content: '';
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzODcuODgyIDM4Ny44ODIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgMzg3Ljg4MiAzODcuODgyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0zNjAuMTc2IDI3LjcwNmgtNTUuNDEydi0yNy43MDZoLTI3LjcwNnYyNy43MDZoLTE2Ni4yMzR2LTI3LjcwNmgtMjcuNzA2djI3LjcwNmgtNTUuNDEyYy0xNS4yNzQgMC0yNy43MDYgMTIuNDMyLTI3LjcwNiAyNy43MDZ2MzA0Ljc2NWMwIDE1LjI3MyAxMi40MzIgMjcuNzA2IDI3LjcwNiAyNy43MDZoMjM1LjVjMy42OCAwIDcuMTk3LTEuNDYxIDkuNzk0LTQuMDU4bDExMC44MjQtMTEwLjgyNWMyLjU5Ny0yLjU5NyA0LjA1OC02LjExNSA0LjA1OC05Ljc5NHYtMjA3Ljc5NGMwLTE1LjI3NC0xMi40MzItMjcuNzA2LTI3LjcwNi0yNy43MDZ6bS04My4xMTcgMzEyLjg4MnYtNjMuNTI4aDYzLjUyOXptODMuMTE3LTkxLjIzNGgtODMuMTE4Yy0xNS4yNzMgMC0yNy43MDYgMTIuNDMyLTI3LjcwNiAyNy43MDZ2ODMuMTE4aC0yMjEuNjQ2di0yMjEuNjQ4aDMzMi40NzF2MTEwLjgyNHptMC0xMzguNTNoLTMzMi40N3YtNTUuNDExaDU1LjQxMnYyNy43MDZoMjcuNzA2di0yNy43MDZoMTY2LjIzNXYyNy43MDZoMjcuNzA2di0yNy43MDZoNTUuNDEydjU1LjQxMXoiLz48L3N2Zz4=);
}
.event-time:before{
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0NDMuMjk0IDQ0My4yOTQiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNDQzLjI5NCA0NDMuMjk0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yMjEuNjQ3IDBjLTEyMi4yMTQgMC0yMjEuNjQ3IDk5LjQzMy0yMjEuNjQ3IDIyMS42NDdzOTkuNDMzIDIyMS42NDcgMjIxLjY0NyAyMjEuNjQ3IDIyMS42NDctOTkuNDMzIDIyMS42NDctMjIxLjY0Ny05OS40MzMtMjIxLjY0Ny0yMjEuNjQ3LTIyMS42NDd6bTAgNDE1LjU4OGMtMTA2Ljk0MSAwLTE5My45NDEtODctMTkzLjk0MS0xOTMuOTQxczg3LTE5My45NDEgMTkzLjk0MS0xOTMuOTQxIDE5My45NDEgODcgMTkzLjk0MSAxOTMuOTQxLTg3IDE5My45NDEtMTkzLjk0MSAxOTMuOTQxeiIvPjxwYXRoIGQ9Im0yMzUuNSA4My4xMThoLTI3LjcwNnYxNDQuMjY1bDg3LjE3NiA4Ny4xNzYgMTkuNTg5LTE5LjU4OS03OS4wNTktNzkuMDU5eiIvPjwvc3ZnPg==);
}
h5.location-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}
.story-content img:not(.icon), .event-content img:not(.icon) {
    margin: -30px -30px 30px;
    width: calc(100% + 60px);
    max-width: inherit;
    -webkit-clip-path: polygon(0 0,100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0,100% 0, 100% 90%, 0 100%);
}

.content-left, .content-right {
    display: inline-block;
    width: calc(100% - 240px);
    vertical-align: top;
    padding:30px;
    position: relative;
}
.event-location{
    padding-top: 10px;
}
.event-location p{
    margin-bottom:0;
    line-height: 1.3;
}
.event-location a.btn{
    margin-top:10px;
}
.content-left{
    text-align:right;
    width: 240px;
    padding:0;
}
.content-left .image{
    background-size: cover;
    position: relative;
    background-position: center;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.content-left .image:hover {
    transform: scale(1.1);
}

.content-left .image:after {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: -7px;
    right: -7px;
    border-radius: 50%;
    border: 2px solid #000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.image:hover:after {
    opacity: 0;
    transform: scale(0.9);
}

.story-title, .event-title{
    font-weight: normal;
    font-size: 50px;
	/*font-family: 'Bernaillo';*/
	/*font-family: 'Calligraffitti', cursive;*/
	font-family: 'Italianno', cursive;
    font-style: normal;
    color: #968653;
}
section.people .container, section.practicals .container{
    /*max-width: 1200px;*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.person, .practical {
    width: 32%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
    background: #fff;
    margin-bottom: 40px;
    padding:0;
	border-bottom: 10px solid #968653;
}
.person:nth-child(3n), .practical:nth-child(3n){
    margin-right: 0;
}
.person-img {
    width: 100%;
    padding-top: 100%;
    height: 0;
    background-position: center;
    background-size: cover;   
}

.person-content {
    padding: 20px;
}
h3.person-title {
	/*font-family: 'Bernaillo';*/
	/*font-family: 'Calligraffitti', cursive;*/
	font-family: 'Italianno', cursive;
    font-style: normal;
    color: #968653;
    font-size: 25px;
    
}
p.person-role {
    font-weight: bold;
    font-size:14px;
}
section.practicals, section.people{
    padding:50px 0 20px;
}
.practical {
    padding: 30px;
    text-align: center;
}
h3.practical-title { 
    margin: 20px auto;
    font-size: 14px;
    text-transform: none;
    font-weight: bold;
}

section.text-section {
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    padding: 40px 0;
}
section.text-section h3 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 26px;
}
section.text-section h5 {
    text-transform: uppercase;
    font-weight: 300;
}

section.gifts .container {
    max-width: 1200px;
}
.gift{
    padding-bottom:41px;
}
h3.gift-title {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}
p.gift-description {
    text-align: center;
    font-size: 14px;
}

.gift.reserved:after, .gift-actions, .gift-actions a, .modal-header, .modal-actions input[type="submit"], div#gift-message {
    background: #000;
}
.gift-actions{
    height: 41px;
}
.gift-actions:after {
    top: 14px;
}
.gift-actions a:hover{
    background: #5a5750;
}
.gift-actions a {
    padding: 6px 0;
    font-weight: bold;
    letter-spacing: 1px;
}
h2.reserve-gift-title {
    font-weight: bold;
    text-transform: uppercase;
}
div#reserve-gift p {
    margin-bottom: 10px;
}
.modal-header p{
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/*RESPONSIVE*/

@media (max-width:980px){
    .person, .practical {
        width: 48%;
        margin-right: 4% !important;
    }
    .person:nth-child(2n), .practical:nth-child(2n){
        margin-right: 0 !important;
    }

    div#primary-menu li a {
       font-size: 16px;
       padding: 0;
       font-weight: 500;
       color: #fff;
   }
   div#primary-menu li:after{
    display: none;

}
h2.name-1, h2.name-2 {
    display: block;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

span.and {
  transform: rotate(90deg);
}
div#toggle-menu {
    border-radius:0;
    background-color:#000;
}
div#primary-menu ul li a {
    color: #000;
    letter-spacing: 1px;
    text-transform: none;
    font-weight: 600;
}
nav#site-navigation:after {
    background: #f3f0e6e3;
}
}


@media (max-width: 799px){
    .story, .event {
        max-width: 500px;
        margin: 0 auto 30px;
    }
    .content-left, .content-right {
        display: block;
        width: 100%;
        text-align: center;
    }

    .content-left{
        text-align:center;
        padding: 30px 0 20px;
    }
    .story:nth-of-type(2n) .content-left, .event:nth-of-type(2n) .content-left {
        float: none;
        text-align: center;
    }
    .content-wrap, .section-img{
        display: block;
        width: 100%;
    }
    .section-img{
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        -moz-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        padding-top: 100%;
    }
    .content-content{
      position: relative;
      height: inherit;
  }
  .content-wrap:after{
    display: none;
}
.content-section .container {    
    max-width: 500px;
    margin: 0 auto 50px !important;
}
}

@media (max-width:600px){
    .person, .practical {
        width: 100%;
        margin-right: 0 !important;
    }
    h1 {    
        font-size: 36px;
    }
}