/* Table of Content */
/* -------------------- */
/* 1. Imports & Clears */
/* 2. Reset */
/* -------------------- */
/* 1. Imports & Clears */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Kristi);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic);

.header ul:after, .newlyweds:after, .blog-preview .articles:after, .blog-preview .people:after, .party .articles:after, .party .people:after, .view-posts:after, .rsvp:after, .rsvp-form:after, .twitter .feed:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

/* natural box layout model to all elements */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 2. Reset */
body, h1, h2, h3, h4, h5, h6, ul, li, form, div, p, ol, button, hr, blockquote {
  margin: 0;
  padding: 0;
}
article, figure, footer, header, nav, section, details, summary {
  display: block;
}
::-webkit-input-placeholder {
  opacity: 1;
}
:-moz-placeholder {
  opacity: 1;
}
::-moz-placeholder {
  opacity: 1;
}
:-ms-input-placeholder {
  opacity: 1;
}

/* 3. General */
html {
  background: #fff;
}

body {
  font: 18px "Open Sans", sans-serif;
  color: #5f5f5f;
  position: relative;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  font-weight: normal;
  color: #5c5157;
}

a {
  text-decoration: none;
  color: #5c5157;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: #9c8484;
}

div {
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* 4. Main Container */
.page {
  text-align: left;
  overflow: hidden;
}

.page .container {
  max-width: 1038px;
}

@media all and (max-width: 1038px) {
  .page .container {
    width: 98%;
   }
}

/* 5. Header Block */
.header {
  background-color: #5c5157;
  text-align: center;
}

.header ul {
  padding: 5px 0;
}

.header ul li {
  display: inline-block;
  font-weight: 300;
  font-size: 0.66667em;
  line-height: 18px;
  text-transform: uppercase;
  padding: 5px 0;
}

.header ul li a {
  padding: 5px 25px;
  color: #9c8484;
}

.header ul li a:hover {
  color: #fff;
}

/* 6. Intro Block */
.intro {
  text-align: center;
  color: #fff;
  background: #9b8484 url("assets/images/hero.jpg") top center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.intro.hero2 {
	background: #9b8484 url("assets/images/hero2.jpg") top center no-repeat;
}

.intro.hero3 {
	background: #9b8484 url("assets/images/hero3.jpg") top center no-repeat;
}

.intro h1 {
  text-transform: uppercase;
  font-family: "Playfair Display", serif;
  color: #fff;
}

/* 6.1 Intro Block Homepage */
.homepage .intro {
  aspect-ratio: 4096 / 1898;
  padding-top: calc(((100vw*1898)/4096)*.4);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom: 75px;
}

.homepage .intro.hero2 {
	padding-top: calc(((100vw*1898)/4096)*.45);
}

.homepage .intro.hero3 {
	padding-top: calc(((100vw*1898)/4096)*.75);
}

.homepage .intro.hero3 .info {
	background: rgba(10, 10, 10, .6);
	padding-bottom: 1em;
}

.homepage .intro h1, .homepage .intro .date {
  text-transform: uppercase;
  font-family: "Playfair Display", serif;
  color: #fff;
}

.homepage .intro h1 {
  font-size: 5.55556em;
}

.homepage .intro h1 span {
  color: #5c5157;
  /*font-size: 1.3em;*/
}

.homepage .intro.hero3 h1 span {
	color: #fff;
}

.homepage .intro p {
  font-family: "Kristi", cursive;
  font-size: 3.33333em;
  line-height: 60px;
}

.homepage .intro .date {
  font-size: 1.33333em;
  line-height: 18px;
}

@media all and (max-width: 900px) {
	.homepage .intro {
		background-image: url("assets/images/hero-900.jpg");
		aspect-ratio: 900 / 692;
    padding-top: calc(((100vw*900)/692)*.25);
	}
	.homepage .intro.hero2 {
		background-image: url("assets/images/hero2-900.jpg");
    padding-top: calc(((100vw*900)/692)*.25);
	}
	.homepage .intro.hero3 {
		background-image: url("assets/images/hero3-900.jpg");
    padding-top: calc(((100vw*900)/692)*.25);
	}
  .homepage .intro h1 {
    font-size: 4em;
    line-height: 1.2em;
  }
	.homepage .intro p {
		font-size: 2.66em;
	}
}

@media all and (max-width: 500px) {
	.homepage .intro {
		background-image: url("assets/images/hero-500.jpg");
		aspect-ratio: 500 / 595;
    padding-top: calc(100vw*500/595*.75);
	}
	.homepage .intro.hero2 {
		background-image: url("assets/images/hero2-500.jpg");
    padding-top: calc(100vw*500/595*.75);
	}
	.homepage .intro.hero3 {
		background-image: url("assets/images/hero3-500.jpg");
    padding-top: calc(100vw*500/595*.75);
	}
	.homepage .intro h1 {
		font-size: 2.5em;
	}
	.homepage .intro p {
		font-size: 2em;
		line-height: 1.1em;
	}
	.homepage .intro .date {
		font-size: 1.5em;
		line-height: 1.1em;
	}
}

/* 6.2 Intro Block Page */
.page-content .intro {
  min-height: 260px;
  padding: 96px 0;
}

.page-content .intro h1 {
  font-size: 2.5em;
}

.page-content .intro h1:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.page-content .intro h1:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.page-content .intro p {
  font-size: 1em;
  line-height: 40px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* 8. Venue Block */
.venue {
  text-align: center;
  font-weight: 300;
  z-index: 2;
  position: relative;
	margin-top: 75px;
}

.venue h2 {
  font-size: 2.5em;
  text-transform: uppercase;
}

.venue h2:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.venue h2:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.venue p {
  margin-bottom: 30px;
}

.venue p span {
  color: #9c8484;
}

.venue p:last-child {
  margin-bottom: 0;
}

.venue .subtitle {
  text-transform: uppercase;
  color: #9c8484;
  font-weight: 300;
  margin-bottom: 70px;
  letter-spacing: 0.2em;
}

.venue > img {
	display: block;
	margin: 0 auto 70px auto;
	max-width: 80%;
}

@media all and (max-width: 500px) {
	.venue > img {
		max-width: 100%;
	}
}

/* 9. Registry Block */
.registry {
  text-align: center;
}

.registry .container {
  padding: 40px;
}

.registry h2 {
  font-size: 2.5em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.registry h2:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.registry h2:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.registry h3 {
  text-transform: uppercase;
  color: #9c8484;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: .2em;
  margin-bottom: 70px;
}

.registry .options {
	display: flex;
	justify-content: space-around;
}

.registry .stores {
  padding: 40px;
  border: 1px solid #cdc1c1;
	max-width: 40%;
}

.registry .stores h2 {
	font-size: 1.5em;
}

.registry .stores h2:before {
	content: none;
}

.registry .stores h2:after {
	content: none;
}

.registry .stores img {
	max-width: 80%;
	margin: 1.5em auto 0;
}

@media all and (max-width: 1124px) {
	.registry .options {
		flex-direction: column;
	}

	.registry .stores {
		max-width: 90%;
		margin-bottom: 1em;
	}
}

/* 12. Blog Preview & Party Block */
.blog-preview .container {
  padding: 100px 0;
}

.blog-preview, .party {
  text-align: center;
  padding: 0 40px;
}

.blog-preview h2, .party h2 {
  font-size: 2.5em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog-preview h2:before, .party h2:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.blog-preview h2:after, .party h2:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.blog-preview .subtitle, .party .subtitle {
  text-transform: uppercase;
  color: #9c8484;
  font-weight: 300;
  margin-bottom: 70px;
  letter-spacing: 0.2em;
}

.people, .articles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 40px;
}

.blog-preview .articles div:nth-child(odd) { 
  text-align: right;
}

.blog-preview .articles div:nth-child(even) { 
  text-align: left;
}

@media all and (max-width: 1124px) {
	.people, .articles {
		grid-template-columns: 1fr;
	}

	.blog-preview .articles div:nth-child(odd), .blog-preview .articles div:nth-child(even) {
		text-align: center;
	}
}

.blog-preview .articles img, .blog-preview .people img, .party .articles img, .party .people img {
  margin-bottom: 20px;
  opacity: .8;
	max-width: 100%;
}

.blog-preview .articles img:hover, .blog-preview .people img:hover, .party .articles img:hover, .party .people img:hover {
  opacity: 1;
}

.blog-preview .articles h3, .blog-preview .people h3, .party .articles h3, .party .people h3 {
  font-size: 1.33333em;
  margin-bottom: 5px;
}

.blog-preview .articles p, .blog-preview .people p, .party .articles p, .party .people p {
  font-size: 0.77778em;
  text-transform: uppercase;
  color: #9c8484;
}

.blog-preview .articles img {
  opacity: 1;
	width: 442px;
	max-height: 250px;
}

.view-posts {
  font-weight: 300;
  font-size: 0.77778em;
  text-transform: uppercase;
  padding: 0 40px;
}

.view-posts a {
  padding: 10px 20px;
  color: #9c8484;
  border: 1px solid #cdc1c1;
  float: right;
}

.view-posts a:hover {
  background-color: #9c8484;
  border: 1px solid #9c8484;
  color: #fff;
}

.party {
  padding: 100px 40px;
  background-color: #9c8484;
}

.party h2 {
  color: #fff;
}

.party h2:before {
  content: url("assets/images/image02-default-color.png");
}

.party h2:after {
  content: url("assets/images/image02-default-color-flipped.png");
}

.party .subtitle {
  color: #5c5157;
}

.party .people p {
  color: #fff;
}

.party h3 {
  color: #5c5157;
}

.party .people img {
  opacity: 1;
	max-height: 250px;
}

@media all and (max-width: 1124px) {
	.people, .articles {
		grid-template-columns: 1fr;
	}

	.blog-preview .articles div:nth-child(odd), .blog-preview .articles div:nth-child(even) {
		text-align: center;
	}

	.party .people img {
		max-height: none;
	}
}

/* 12. Map Block */
.map {
  height: 580px;
  z-index: 1;
  margin-top: -100px;
}

.map:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 350px;
  background: url("assets/images/gradient.png") top center repeat-x;
  z-index: 9999;
}

/* 13. Accomodation Block */
.accommodation {
  text-align: center;
  color: #fff;
  background-color: #5c5157;
}

.accommodation .container {
  padding: 100px 40px;
}

.accommodation h2 {
  font-size: 2.5em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #fff;
}

.accommodation h2:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.accommodation h2:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.accommodation .subtitle {
  text-transform: uppercase;
  color: #9c8484;
  font-weight: 300;
  margin-bottom: 70px;
  letter-spacing: 0.2em;
}

.accommodation h3 {
  font-size: 1.33333em;
  color: #fff;
}

.accommodation h3, .accommodation p {
  margin-bottom: 30px;
}

.accommodation p {
  font-weight: 300;
}

.accommodation p a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: underline;
}

.accommodation p.booking-link {
  font-size: 0.77778em;
}

/* 12. Map Block */
.rsvp {
  text-align: center;
  background: url("assets/images/image04.jpg") top center no-repeat;
  color: #fff;
  padding: 80px 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.rsvp .container {
  padding: 40px;
}

.rsvp blockquote {
  font-size: 1.66667em;
  font-family: "Playfair Display", serif;
}

.rsvp blockquote span {
  font-family: "Kristi", cursive;
}

.rsvp blockquote p {
  margin-bottom: 20px;
}

.rsvp blockquote p:last-child {
  text-align: right;
  margin-bottom: 0;
}

/* 13. Timeline Block */
.timeline {
  font-weight: 300;
  z-index: 2;
  position: relative;
	margin-top: 75px;
	margin-bottom: 75px;
}

.timeline h2 {
	text-align: center;
  font-size: 2.5em;
  text-transform: uppercase;
}

.timeline h2:before {
  content: url("assets/images/image02.png");
  margin-right: 20px;
}

.timeline h2:after {
  content: url("assets/images/image02-flipped.png");
  margin-left: 20px;
}

.timeline table {
	margin: 1em auto 0 auto;
}

.timeline .time {
	font-weight: 700;
	text-align: right;
	padding-right: 1em;
}

@media all and (max-width: 900px) {
	.timeline h2, .venue h2, .registry h2, .registry .stores h2, .blog-preview h2, .party h2, .accommodation h2 {
		font-size: 2em;
	}

	.timeline h2:before, .venue h2:before, .registry h2:before, .registry .stores h2:before, .blog-preview h2:before, .party h2:before, .accommodation h2:before {
		content: none;
		margin-right: 0;
	}

	.timeline h2:after, .venue h2:after, .registry h2:after, .registry .stores h2:after, .blog-preview h2:after, .party h2:after, .accommodation h2:after {
		content: none;
		margin-left: 0;
	}
}

@media all and (max-width: 500px) {
  .blog-preview .articles div, .party .people div, .party {
		padding: 0;
	}
}