/**
 * Template name: Sundari
 * Template description: Default style for online invitation Sundari by Inviday
 * Tempate author: Inviday
 * Author URL: https://www.inviday.com
 * Note: Please don't steal this code and rebranding as your own or sell it to
 * your customer. If you want to build something similar like this template,
 * don't hesitate to contact us. We will provide you some option to use this
 * template in honorable way for commercial purpose.
 */

/*! normalize.css v8.0.1 | 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;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
	display: block;
}

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

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

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

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

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-family: monospace, monospace; /* 1 */
	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.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	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;
}

/**
 * Let's start the awesomeness for this Sundari template
 */

:root {
	--main-color: #a47432;
	--main-color-soft: rgba(164, 116, 50, 0.15);
	--main-color-transparent: rgba(164, 116, 50, 0);
	--fg-color: #1a1a1a;
	--fg-color-thick: rgba(26, 26, 26, 0.75);
	--fg-color-transparent: rgba(26, 26, 26, 0);
	--light-color: #ffffff;
	--light-color-transparent: rgba(255, 255, 255, 0);
	--dark-color: #000000;
	--dark-color-transparent: rgba(0, 0, 0, 0);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: "Fira Sans", Roboto, sans-serif;
	font-weight: 400;
	color: var(--fg-color);
	line-height: 1.5;
}

body.greyscale {
	--main-color: #333333;
	--main-color-soft: rgba(51, 51, 51, 0.15);
	--main-color-transparent: rgba(51, 51, 51, 0);
}

body.velvet {
	--main-color: #b3636b;
	--main-color-soft: rgba(179, 99, 107, 0.15);
	--main-color-transparent: rgba(179, 99, 107, 0);
}

body.gold {
	--main-color: #bb9b7b;
	--main-color-soft: rgba(187, 155, 123, 0.15);
	--main-color-transparent: rgba(187, 155, 123, 0);
}

a {
	color: var(--main-color);
	font-weight: 700;
	text-decoration: none;
}

.dark a {
	color: var(--fg-color);
}

.box-content {
	display: block;
}

.content {
	position: relative;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	padding: 30px;
	background-color: var(--main-color-soft);
	font-size: 0.875rem;
}

.content.dark {
	background-color: var(--main-color);
	color: var(--light-color);
}

.content .bg-content {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
}

.content .bg-content img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.top-title {
	font-family: Butler, serif;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	position: relative;
	padding-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 20px 0;
	color: var(--main-color);
}

.top-title::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background: -webkit-gradient(
		linear,
		left top, right top,
		from(var(--main-color)),
		to(var(--main-color-transparent))
	);
	background: linear-gradient(
		to right,
		var(--main-color),
		var(--main-color-transparent)
	);
	left: 0;
	bottom: 0;
	opacity: 0.8;
}

.content.dark .top-title {
	color: var(--light-color);
}

.content.dark .top-title::after {
	background: -webkit-gradient(
		linear,
		left top, right top,
		from(var(--light-color)),
		to(var(--light-color-transparent))
	);
	background: linear-gradient(
		to right,
		var(--light-color),
		var(--light-color-transparent)
	);
}

.invitation-title {
	position: absolute;
	width: 75%;
	height: auto;
	left: 30px;
	bottom: 30px;
	line-height: 1;
}

.invitation-title svg {
	fill: var(--light-color);
}

#front-cover::before,
#front-cover::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(var(--dark-color)),
		to(var(--dark-color-transparent))
	);
	background: linear-gradient(
		to bottom,
		var(--dark-color),
		var(--dark-color-transparent)
	);
	opacity: 0.5;
	z-index: -1;
}

#front-cover::after {
	top: auto;
	bottom: 0;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	opacity: 0.9;
}

#front-cover.content {
	background-color: transparent;
}

#front-cover .top-title {
	text-transform: capitalize;
	font-size: 1.25rem;
	letter-spacing: 0;
	margin-top: -0.2em;
	width: calc(100% - 80px);
}

#front-cover .top-title::after {
	display: none;
}

#front-cover .top-title.date-title {
	margin-top: -8px;
}

.top-title.date-title .date-event {
	display: inline-block;
	font-family: "Fira Sans", Roboto, "Soegoe UI", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	line-height: 1;
	padding: 8px 8px 7px 12px;
	border: 2px solid var(--light-color);
	text-transform: uppercase;
	border-radius: 8px;
	letter-spacing: 2px;
}

.top-title.date-title .day-event {
	display: block;
	font-family: "Fira Sans", Roboto, "Soegoe UI", sans-serif;
	font-weight: 400;
	font-size: 0.625rem;
	margin-left: 14px;
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.invitation-text {
	-webkit-box-flex: 1;
	flex-grow: 1;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}

.invitation-text p {
	margin: 20px 0 0;
}

.invitation-text p:first-child {
	margin-top: 0;
}

.invitation-text .invitation-details {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	margin: 30px 0;
	font-size: 1rem;
}

.invitation-text .invitation-details + p {
	margin-top: 0;
}

.invitation-date {
	display: block;
	width: 8em;
	color: var(--main-color);
	margin-right: 30px;
	flex-shrink: 0;
}

.invitation-date span {
	display: block;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.invitation-date .date {
	font-weight: 300;
	font-size: 6em;
	padding: 4px 8px;
	border: 2px solid var(--main-color);
	border-radius: 8px;
	letter-spacing: -4px;
}

.invitation-date .date.loosen {
	letter-spacing: 2px;
	padding-left: 12px;
}

.invitation-date .month-year {
	position: relative;
	font-size: 0.75em;
	padding: 10px 0 8px 4px;
	letter-spacing: 2px;
}

.invitation-date .month-year::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: 0;
	background: -webkit-gradient(
		linear,
		left top, right top,
		from(var(--main-color-transparent)),
		color-stop(var(--main-color)),
		to(var(--main-color-transparent))
	);
	background: linear-gradient(
		to right,
		var(--main-color-transparent),
		var(--main-color),
		var(--main-color-transparent)
	);
}

.invitation-date .time {
	font-size: 0.625em;
	letter-spacing: 1.2px;
	padding-top: 8px;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}

.invitation-date .time-icon {
	width: 1em;
	height: 1em;
	margin-right: 6px;
	margin-top: -2px;
}

.invitation-date .time-icon svg {
	fill: var(--main-color);
	display: inline-block;
}

.invitation-location {
	font-size: 0.875em;
	margin-top: -4px;
}

.invitation-location span {
	display: block;
}

.invitation-location .location-title {
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--main-color);
	font-weight: 700;
}

.invitation-location .location-text {
	margin: 8px 0 10px;
}

.invitation-location .location-map {
	font-weight: 700;
	line-height: 1;
	color: var(--main-color);
}

.location-map a {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
}

.location-map a:hover {
	opacity: 0.5;
}

.location-map .map-icon {
	margin-right: 4px;
}

.location-map .map-icon svg,
.location-map .direction-icon svg {
	width: 1em;
	height: 1em;
	fill: var(--main-color);
}

.location-map .direction-icon {
	margin-left: 6px;
}

.greeting-close {
	display: block;
	margin-top: 20px;
}

.invitation-signature {
	margin-top: 30px;
	font-size: 0.75rem;
	line-height: 1.25;
	-webkit-box-flex: 1;
	flex-grow: 1;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: end;
	justify-content: flex-end;
}

.invitation-signature.multisign {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;
	flex-wrap: wrap;
	-webkit-box-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	justify-content: space-between;
}

.invitation-signature span {
	display: block;
}

.multisign .signature {
	margin-right: 20px;
}

.multisign .signature:last-child {
	margin-right: 0;
}

.multisign .signature:not(:first-child) {
	margin-top: 10px;
}

.invitation-signature .family-signature {
	height: 40px;
}

.invitation-signature .family-signature.tall {
	height: 72px;
	margin-bottom: -28px;
}

.family-signature svg {
	width: auto;
	height: 100%;
}

.invitation-signature strong {
	color: var(--main-color);
}

.media-content {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-flex: 1;
	flex-grow: 1;
}

.media-content + .media-content {
	margin-top: 20px;
}

.media-content.hide-on-portrait {
	display: none;
}

.media-photo,
.media-map {
	display: -webkit-box;
	display: flex;
	-webkit-box-flex: 1;
	flex-grow: 1;
	position: relative;
}

.media-photo {
	min-height: calc(3 / 4 * (100vw - 120px));
}

.media-photo img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
}

.media-caption {
	font-family: Butler, serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.05;
	text-align: center;
	margin: 20px 0 0 0;
}

.media-caption span {
	display: block;
}

.media-caption .person-family {
	font-family: "Fira Sans", Roboto, "Soegoe UI", sans-serif;
	font-weight: 400;
	font-size: 0.5em;
	padding: 0 30px;
	line-height: 1.35;
	margin-top: 4px;
}

.media-caption .person-family.merge {
	padding-left: 10px;
	padding-right: 10px;
}

.media-content iframe {
	width: 100%;
	height: auto;
	outline: none;
	border: none;
	background-color: var(--light-color);
}

.map-button {
	margin-top: 20px;
	margin-bottom: 30px;
}

.map-button a {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	width: 100%;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 20px;
	padding-bottom: 22px;
	text-align: center;
	background-color: var(--fg-color);
	color: var(--light-color);
	border: none;
	outline: none;
	border-radius: 4px;
	letter-spacing: 0.4px;
}

.map-button a:hover {
	background-color: var(--fg-color-thick);
}

.map-button .button-icon {
	width: auto;
	height: 1em;
	margin-right: 8px;
}

.map-button .button-icon img {
	display: block;
	width: auto;
	height: 100%;
}

.map-button .button-text {
	margin-bottom: -0.25em;
}

.map-button p {
	font-size: 0.625rem;
	margin: 10px 0;
	opacity: 0.6;
	text-align: center;
}

.backlink {
	position: absolute;
	width: 100%;
	height: 40px;
	left: 0;
	bottom: 0;
	font-size: 0.75rem;
	background-color: var(--main-color);
	color: var(--light-color);
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}

.has-ext-vendor .backlink {
	height: 48px;
}

.backlink::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	top: 0;
	left: 0;
	background: -webkit-gradient(
		linear,
		left top, right top,
		from(var(--fg-color-transparent)),
		color-stop(var(--fg-color)),
		to(var(--fg-color-transparent))
	);
	background: linear-gradient(
		to right,
		var(--fg-color-transparent),
		var(--fg-color),
		var(--fg-color-transparent)
	);
	opacity: 0.8;
}

.backlink p {
	margin: 2px 0 0;
	text-align: center;
	line-height: 1.4;
}

.backlink a {
	color: var(--light-color);
}

.backlink a:hover {
	opacity: 0.5;
}

.backlink span {
	display: block;
}

.owl-carousel .owl-item {
	height: 100vh;
	overflow-y: auto;
}

.owl-dots {
	display: -webkit-box;
	display: flex;
	position: absolute;
	right: 30px;
	top: 33px;
	z-index: 1;
}

.owl-carousel .owl-dots button.owl-dot {
	display: block;
	width: 8px;
	height: 8px;
	background: var(--fg-color);
	margin-left: 6px;
	border-radius: 4px;
	opacity: 0.25;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.owl-carousel .owl-dots button.owl-dot:nth-child(n + 4) {
	display: none;
}

.owl-carousel .owl-dots button.owl-dot:nth-last-child(2),
.owl-carousel .owl-dots button.owl-dot:last-child {
	display: block !important;
}

.owl-carousel .owl-dots.dark button.owl-dot {
	background: var(--light-color);
}

.owl-carousel .owl-dots button.owl-dot.active {
	opacity: 1;
}

/* Style for no-photo body class */
.list-person {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 1rem;
}

.list-person li {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.list-person li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

.list-person li::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: -1px;
	background: -webkit-gradient(
		linear,
		left top, right top,
		from(var(--light-color)),
		to(var(--light-color-transparent))
	);
	background: linear-gradient(
		to right,
		var(--light-color),
		var(--light-color-transparent)
	);
	opacity: 0.8;
}

.list-person li:last-child::after {
	display: none;
}

.list-person .person-name {
	display: block;
	font-family: Butler, serif;
	font-weight: 700;
	font-size: 1.75em;
	line-height: 1.05;
}

.list-person .person-family {
	display: block;
	max-width: 20em;
	font-size: 0.75em;
	line-height: 1.25;
	margin-top: 4px;
	opacity: 0.8;
}

@media screen and (min-width: 360px) {
	.owl-carousel .owl-dots button.owl-dot:nth-child(n + 4) {
		display: block;
	}

	.owl-carousel .owl-dots button.owl-dot:nth-child(n + 5) {
		display: none;
	}
}

@media screen and (min-width: 560px) and (orientation: landscape) {
	.content {
		padding-top: 20px;
	}

	.owl-dots {
		top: 23px;
	}

	.invitation-title {
		width: 60%;
	}

	.invitation-text {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		align-items: center;
	}

	.invitation-text > * {
		flex-basis: calc(50% - 20px);
	}

	.invitation-text .invitation-details {
		margin: 0;
	}

	.invitation-text .invitation-details + p {
		margin-top: 20px;
	}

	.invitation-date {
		margin-right: 20px;
	}

	.invitation-signature {
		-webkit-box-flex: 0;
		flex-grow: 0;
		-webkit-box-align: center;
		align-items: center;
	}

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

	.media-content {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
	}

	.media-photo,
	.media-map {
		max-width: calc(4 / 3 * (100vh - 100px));
		margin-right: 30px;
		flex-basis: 200%;
	}

	.media-photo {
		min-height: 0;
	}

	.media-caption {
		text-align: left;
		margin-top: 0;
		align-self: center;
	}

	.media-caption .person-name {
		font-size: 1.75rem;
	}

	.media-caption .person-family {
		padding-left: 0;
	}

	.media-caption .person-family.merge {
		padding-left: 0;
	}

	.media-map {
		margin-bottom: 40px;
	}

	.map-button {
		min-width: 180px;
		margin-top: 0;
		margin-bottom: 0;
		align-self: center;
	}

	.map-button .extend-text {
		display: none;
	}

	.content.has-more-media .media-content:not(.hide-on-portrait) {
		display: none;
	}

	.media-content.hide-on-portrait {
		display: -webkit-box;
		display: flex;
	}

	.media-content.hide-on-portrait .media-photo {
		max-width: none;
		margin-right: 0;
	}

	.media-content.hide-on-portrait:last-of-type {
		margin-top: 0;
	}

	.content.has-more-media .media-content + .media-caption {
		margin-top: 20px;
		align-self: center;
	}
}

@media screen and (min-width: 752px) {
	.content {
		padding: 60px;
		padding-top: 50px;
		font-size: 1.5rem;
	}

	.top-title {
		font-size: 2rem;
	}

	#front-cover .top-title {
		font-size: 2.5rem;
		margin-top: -0.175em;
	}

	.owl-dots {
		top: 62px;
		right: 60px;
	}

	.owl-carousel .owl-dots button.owl-dot:nth-child(n + 5) {
		display: block;
	}

	.invitation-title {
		left: 60px;
		bottom: 60px;
		width: calc(0.85 * (100vw - 120px));
	}

	.invitation-text .invitation-details {
		font-size: 1.5rem;
	}

	.invitation-location {
		font-size: 0.875em;
	}

	.invitation-signature {
		font-size: 1.25rem;
	}

	.invitation-signature.multisign {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: end;
		align-items: flex-end;
		-webkit-box-pack: justify;
		justify-content: space-between;
	}

	.invitation-signature .family-signature {
		height: 60px;
	}

	.invitation-signature .family-signature.tall {
		height: 96px;
		margin-bottom: -36px;
	}

	.media-caption {
		font-size: 3rem;
	}

	.map-button a {
		font-size: 1.5rem;
	}

	.map-button p {
		font-size: 1rem;
	}

	.backlink {
		height: 60px;
		font-size: 1.125rem;
	}

	.has-ext-vendor .backlink {
		height: 60px;
	}

	.backlink span {
		display: inline-block;
	}

	.backlink span::before {
		content: "- ";
	}

	.list-person {
		font-size: 1.625rem;
	}

	.top-title.date-title .date-event {
		font-size: 1.25rem;
	}

	.top-title.date-title .day-event {
		font-size: 0.875rem;
		margin-top: 8px;
	}
}

@media screen and (min-width: 960px) {
	.content {
		font-size: 2rem;
		padding: 80px;
		padding-top: 70px;
	}

	.invitation-title {
		left: 80px;
		bottom: 80px;
	}

	.owl-dots {
		right: 80px;
		top: 82px;
	}

	.invitation-text .invitation-details {
		font-size: 2rem;
		margin-top: 60px;
		margin-bottom: 60px;
	}

	.invitation-date {
		margin-right: 40px;
	}

	.invitation-signature {
		font-size: 1.5rem;
	}

	.media-caption {
		font-size: 4rem;
	}
}

@media screen and (min-width: 960px) and (orientation: landscape) {
	.content {
		font-size: 1.375rem;
		padding-top: 60px;
	}

	.owl-dots {
		top: 72px;
	}

	.invitation-text .invitation-details {
		font-size: 1.375rem;
		margin-top: 0;
		margin-bottom: 0;
	}

	.invitation-signature {
		font-size: 1.25rem;
	}

	.invitation-signature.multisign {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
	}

	.multisign .signature {
		margin-left: 10px;
		margin-right: 10px;
	}

	.multisign .signature:last-child {
		margin-right: 10px;
	}

	.media-photo,
	.media-map {
		margin-right: 60px;
	}

	.media-caption {
		font-size: 2.5rem;
		align-self: flex-end;
	}

	.media-caption .person-name {
		font-size: 3.5rem;
	}

	.map-button {
		min-width: 240px;
	}
}

@media screen and (min-width: 1200px) {
	.box-content {
		width: calc(100% - 480px);
		display: -webkit-box;
		display: flex;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		justify-content: space-between;
	}

	.content {
		padding: 100px;
		padding-bottom: 0;
		flex-basis: 50%;
	}

	.content:nth-child(n + 3) {
		min-height: 110vh;
	}

	.content:last-child {
		min-height: 100vh;
	}

	.content:nth-child(3),
	.content:nth-child(4) {
		min-height: calc(110vh - 100px);
	}

	.content:nth-last-child(2),
	.content:nth-last-child(3) {
		padding-bottom: 100px;
	}

	.content:nth-child(2n + 3) {
		padding-right: 50px;
	}

	.content:nth-child(2n + 4) {
		padding-left: 50px;
	}

	.invitation-title {
		width: calc(0.8 * (100vw - 640px));
	}

	.top-title {
		font-size: 1.125rem;
		display: none;
	}

	.show-top-title .content:nth-child(odd):not(:first-child) .top-title {
		display: block;
	}

	#front-cover {
		flex-basis: 100%;
	}

	#front-cover::before {
		display: none;
	}

	#invitation-content {
		position: fixed;
		width: 480px;
		height: 100%;
		top: 0;
		right: 0;
		font-size: 0.875rem;
		overflow-y: auto;
		padding: 30px 40px;
		padding-left: 50px;
	}

	#invitation-content::before {
		content: "";
		position: absolute;
		width: 4px;
		height: 100%;
		top: 0;
		left: 0;
		background: -webkit-gradient(
			linear,
			left top, left bottom,
			from(var(--main-color-transparent)),
			color-stop(var(--main-color)),
			to(var(--main-color-transparent))
		);
		background: linear-gradient(
			to bottom,
			var(--main-color-transparent),
			var(--main-color),
			var(--main-color-transparent)
		);
		opacity: 0.85;
	}

	#invitation-content .top-title {
		display: block;
		font-size: 1rem;
	}

	.invitation-text {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		flex-wrap: nowrap;
		-webkit-box-align: start;
		align-items: flex-start;
	}

	.invitation-text > * {
		flex-basis: auto;
	}

	.invitation-text .invitation-details {
		font-size: 1rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.invitation-text .invitation-details + p {
		margin-top: 0;
	}

	.invitation-date {
		margin-right: 20px;
	}

	.invitation-signature {
		font-size: 0.875rem;
		-webkit-box-align: start;
		align-items: flex-start;
		-webkit-box-flex: 1;
		flex-grow: 1;
	}

	.invitation-signature.multisign {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		flex-wrap: wrap;
		-webkit-box-align: end;
		align-items: flex-end;
		-webkit-box-pack: justify;
		justify-content: space-between;
		width: 100%;
	}

	.multisign .signature {
		text-align: left;
		margin-left: 0;
		margin-right: 20px;
	}

	.multisign .signature:last-child {
		margin-right: 0;
	}

	.multisign .signature:not(:first-child) {
		margin-top: 0;
	}

	.invitation-signature .family-signature {
		height: 40px;
	}

	.invitation-signature.multisign .family-signature.long {
		height: 30px;
	}

	.invitation-signature .family-signature.tall {
		height: 72px;
		margin-bottom: -28px;
	}

	.invitation-signature.multisign .family-signature.tall {
		height: 60px;
		margin-bottom: -24px;
	}

	.media-content {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
	}

	.media-content + .media-content {
		margin-top: 30px;
	}

	.media-photo {
		margin-right: 0;
		max-width: none;
	}

	.media-caption {
		width: 100%;
		margin-top: 20px;
		font-size: 1.5rem;
	}

	.media-caption .person-name {
		font-size: 2rem;
	}

	.media-caption .person-family {
		max-width: 300px;
		margin-top: 6px;
		padding: 0;
	}

	.media-caption .person-family.merge {
		padding: 0;
	}

	.content:last-child {
		flex-basis: 100%;
		padding: 20px;
		padding-bottom: 30px;
	}

	.content:last-child .top-title {
		display: block;
		position: absolute;
		left: 20px;
		bottom: 55px;
		font-size: 1.75rem;
		margin-bottom: 0;
		padding-bottom: 8px;
		letter-spacing: 0;
		color: var(--fg-color);
	}

	.content.has-ext-vendor:last-child .top-title {
		bottom: 67px;
	}

	.media-map {
		margin-right: 0;
		max-width: none;
	}

	.map-button {
		align-self: flex-end;
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		flex-direction: row-reverse;
		-webkit-box-align: center;
		align-items: center;
		max-width: 380px;
	}

	.map-button a {
		font-size: 1.125rem;
		width: 320px;
	}

	.map-button p {
		font-size: 0.75rem;
		text-align: right;
		margin-right: 20px;
	}

	.backlink {
		-webkit-box-pack: start;
		justify-content: flex-start;
		font-size: 0.875rem;
		height: auto;
		background-color: transparent;
		color: var(--fg-color);
		width: auto;
		left: 20px;
		bottom: 28px;
		opacity: 0.8;
	}

	.has-ext-vendor .backlink {
		height: auto;
		bottom: 23px;
	}

	.backlink::before {
		display: none;
	}

	.backlink p {
		text-align: left;
	}

	.backlink a {
		color: var(--main-color);
	}

	.backlink span {
		display: block;
	}

	.backlink span::before {
		display: none;
	}

	body.no-photo #invitation-content + .content {
		flex-basis: 100%;
		padding: 80px;
		-webkit-box-pack: center;
		justify-content: center;
	}

	.content.black {
		background-color: var(--dark-color);
		color: var(--main-color);
	}

	.content.black .list-person li::after {
		background: -webkit-gradient(
			linear,
			left top, right top,
			from(var(--main-color)),
			to(var(--main-color-transparent))
		);
		background: linear-gradient(
			to right,
			var(--main-color),
			var(--main-color-transparent)
		);
		opacity: 0.65;
	}

	.content.has-more-media .media-content:not(.hide-on-portrait) {
		display: -webkit-box;
		display: flex;
	}

	.media-content.hide-on-portrait {
		display: none;
	}
}

@media screen and (min-width: 1200px) and (max-height: 640px) {
	.invitation-text {
		line-height: 1.45;
	}

	.invitation-text .invitation-signature {
		margin-top: 10px;
	}
}

@media screen and (min-width: 1400px) {
	.media-caption .person-name {
		font-size: 2.25rem;
	}

	.invitation-text .invitation-details {
		margin-top: 30px;
		margin-bottom: 30px;
	}
}