@charset "UTF-8";

@font-face {
  font-family: Breamcatcher;
  src: url(/fonts/Breamcatcher.ttf);
}
@font-face {
  font-family: CoffeeTea;
  src: url(/fonts/CoffeeTea.ttf);
}
@font-face {
  font-family: HaarlemDeco;
  src: url(/fonts/HaarlemDeco.otf);
}
@font-face {
  font-family: HazelDecoLight;
  src: url(/fonts/HazelDecoLight-Regular.otf);
}
@font-face {
  font-family: JosefinSansLight;
  src: url(/fonts/JosefinSans-Light.ttf);
}
@font-face {
  font-family: Lovera;
  src: url(/fonts/Lovera.otf);
}
@font-face {
  font-family: Magazine;
  src: url(/fonts/Magazine.ttf);
}
@font-face {
  font-family: Magazine-Bold;
  src: url(/fonts/Magazine-Bold.ttf);
}

body, html {
  background-color: #1F1F1F;
  background-image: linear-gradient(#2F2F2F, #1F1F1F);
  margin: 0;
	text-align: center;
}

a {
  color: #D9B06E;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Colors */

.gold-text {
	color: #D9B06E;
}
.white-text {
	color: #DEDEDE;
}

/* Card */

.card {
  display: table;
  width: 100%;
}
.card-row {
  display: table-row;
}
.card-contents {
  display: table-cell;
  width: 30em;
  height: 100vh;
  overflow-y: auto;
}
/* .card-left {
  display: table-cell;
  height: 100vh;
  width: 50%;
  vertical-align: top;
}
.card-left-decoration {
  background: url(/images/CardBorderSide-Left.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
  width: calc(50vw - 10em);
  height: 100vh;
  position: fixed;
}
.card-right {
  display: table-cell;
  height: 100vh;
  width: 50%;
  vertical-align: top;
}
.card-right-decoration {
  background: url(/images/CardBorderSide-Right.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
  width: calc(50vw - 10em);
  height: 100vh;
  position: fixed;
} */

.card-left {
  display: table-cell;
  height: 100vh;
  width: 50%;
  vertical-align: top;
}
.card-left-decoration {
  background: url(/images/CardBorderSide-Left.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
  width: 100%;
  height: 100vh;
  position: fixed;
  right: calc(50vw + 15em);
}
.card-right {
  display: table-cell;
  height: 100vh;
  width: 50%;
  vertical-align: top;
}
.card-right-decoration {
  background: url(/images/CardBorderSide-Right.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: calc(50vw + 15em);
}

/* .card-contents::before {
  content: '';
  background: url(/images/CardBorderSide-Left.png);
  position: relative;
  top: 0px;
  left: -25em;
  width: 50em;
  height: 100vh;
  background-position: right;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
  background-attachment: fixed;
} */
.card-contents::after {
  content: '';
  background: url(/images/CardBorderSide-Right.png);
  position: relative;
  top: 0px;
  right: -10em;
  width: 50em;
  height: 100vh;
  background-position: left;
  background-repeat: no-repeat;
  background-size: 28vh 100vh;
}

.event-icon {
  float: left;
  height: 1.25em;
  padding-right: 0.75em;
}
.event-picture {
  border: 8px solid #1F1F1F;
  border-radius: 8px;
  width: 100%;
}
.event-title {
  font-weight: bold;
}

/* Form */

.form-password-input {
  background-color: #1F1F1F;
  border: 1px solid #D9B06E;
  border-radius: 0.3em;
  color: #D9B06E;
  font-size: 1.6em;
  letter-spacing: 0.2em;
  margin: 2vh 0;
  padding: 2vh 0em;
  text-align: center;
  text-transform: uppercase;
  max-width: 70vw;
  width: 10em;
}
.form-submit-button {
  background-color: #D9B06E;
  border-radius: 0.5em;
  color: white;
	display: inline-block;
	font-family: JosefinSansLight;
  margin-top: 2vh;
	padding: .5em 1em .3em 1em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Header */

.header {
  background-color: #1F1F1F;
  border-bottom: 2px solid #D9B06E;
	margin: auto;
}

.header-name {
	color: #D9B06E;
	display: inline-block;
	font-family: Breamcatcher, JosefinSansLight;
	font-size: 3em;
	font-weight: 600;
	padding: .25em .25em .1em .25em;
	text-decoration: none;
	transform: scaleY(0.75);
}
.header-name:hover {
	text-decoration: underline;;
}

.header-nav {
	font-size: 1em;
	padding: .5em .25em;
}
.header-nav-button {
	color: #D9B06E;
	display: inline-block;
	font-family: JosefinSansLight;
	margin: .5em .3em;
	padding: .5em;
	text-decoration: none;
	text-transform: uppercase;
}
.header-nav-selected {
	border-bottom: 2px solid #D9B06E;
}
.header-nav-button:hover {
	text-decoration: underline;
}
.header-nav-selected:hover {
	text-decoration: none;
}

.header-rsvp-button {
  background-color: #D9B06E;
  border-radius: 0.5em;
  color: white;
	display: inline-block;
	font-family: JosefinSansLight;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.5em 0 1.5em 0;
	padding: 1em 1.5em .7em 1.5em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Hero */

.hero-container {
	display: table;
  height: 80vh;
  margin: auto;
  max-width: 40em;
  /* width: 100%; */
}
.hero {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.hero-banner-container {
	margin: auto;
	text-align: left;
	position: relative;
	top: -3vh;
	width: 47vh;
}
.hero-banner {
	color: #6B86C6;
	font-family: CoffeeTea;
	font-size: 4vh;
	transform: rotate(-15deg);
}

.hero-text {
	font-family: Magazine;
	font-size: 3vh;
	transform: scaleX(0.85);
}
.hero-text-shadow-bottom {
	text-shadow: 0px .25vh .25vh black;
}
.hero-text-shadow-top {
	text-shadow: 0px -.25vh .25vh black;
}

.hero-name {
	color: #D9B06E;
	display: inline-block;
	font-family: Lovera;
	font-size: 4vh;
	font-weight: 600;
  letter-spacing: -.1vh;
	margin: auto;
	padding: 1vh 1vh 1vh 2vh;
	text-align: center;
  text-transform: uppercase;
}

.hero-date {
	color: #DEDEDE;
  font-family: Magazine;
	font-size: 4vh;
	line-height: 6vh;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
	transform: scaleX(0.85);
}

.hero-location {
	color: #DEDEDE;
	font-family: Breamcatcher, JosefinSansLight;
	font-size: 4vh;
	line-height: 6vh;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
	transform: scaleY(0.75);
}

.hero-hashtag {
	color: #DEDEDE;
	font-family: CoffeeTea;
	font-size: 3vh;
	margin: auto;
	margin: 3vh 0 2vh 0;
	text-align: center;
}

.hero-rsvp-button {
  background-color: #D9B06E;
  border-radius: 0.5em;
  color: white;
	display: inline-block;
	font-family: Magazine-Bold;
  font-size: 2.5vh;
  font-weight: bold;
  margin-top: 2vh;
	padding: 2vh 3vh 1.5vh 3vh;
	text-decoration: none;
  text-shadow: 0px .2vh .2vh gray;
	text-transform: uppercase;
}

.nav-container {
	display: table;
	height: 10vh;
	width: 100%;
}
.nav {
	font-size: 2.5vh;
	padding: 1.5em .5em;
}
.nav-hr {
	background: url(/images/HR.png);
	background-position: center;
  background-repeat: no-repeat;
  background-size: 86.7vh 1.5vh;
	height: 2vh;
}
.nav-button {
	color: #D9B06E;
	display: inline-block;
	font-family: JosefinSansLight;
	padding: 1em 1.5em;
	text-decoration: none;
	text-transform: uppercase;
}
.nav-button:hover {
	text-decoration: underline;
}
.chevron-down {
	height: 2vh;
	padding: 3vh;
}

/* Page */

.page-container {
	background-image: linear-gradient(#2F2F2F, #1F1F1F);
  border-top: .5em solid #1F1F1F;
  margin: auto;
	min-height: 60vh;
	text-align: center;
  width: 100%;
}
.page-container-rsvp {
	background-image: linear-gradient(#2F2F2F, #1F1F1F);
  border-top: .5em solid #1F1F1F;
  margin: auto;
	min-height: 90vh;
	text-align: center;
  width: 100%;
}
.page {
	color: white;
	font-family: JosefinSansLight;
	font-size: 1.25em;
  line-height: 1.5em;
	text-align: center;
	margin: auto;
	max-width: 30em;
	padding: 2em;
}
.page-part {
  text-align: left;
  padding: 1em 0;
  width: 100%;
}
.page-part-center {
  text-align: center;
  padding: 1em 0;
  width: 100%;
}
.page-part-description {
  font-size: 1em;
}
.page-title {
  font-family: Magazine, Breamcatcher, JosefinSansLight;
	font-size: 2.25em;
	transform: scaleY(0.85);
}
.page-title2 {
  font-family: Magazine, Breamcatcher, JosefinSansLight;
	font-size: 1.75em;
	transform: scaleY(0.85);
}
.page-title3 {
  font-family: Magazine, Breamcatcher, JosefinSansLight;
	font-size: 1.5em;
  letter-spacing: 0.05em;
	transform: scaleY(0.85);
}
.page-title4 {
  font-family: Magazine, Breamcatcher, JosefinSansLight;
	font-size: 1.25em;
	transform: scaleY(0.85);
}
.page-title4-taller {
  font-family: Magazine, Breamcatcher, JosefinSansLight;
	font-size: 1.25em;
}

.image-container {
	padding: 1em 0;
	text-align: center;
	width: 100%;
}
.image-full {
	display: inline-block;
	width: 100%;
}
.image-half {
	display: inline-block;
	width: 49%;
}

.video-container {
	display: inline-block;
	position: relative;
	text-align: center;
}
.video-text {
	color: white;
	font-size: .8em;
	font-weight: bold;
  line-height: 1.5em;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	text-shadow: 0 0 .35em black;
}
.video-play-button {
	font-size: 1.5em;
}

.map-container {
	display: inline-block;
  padding: 1em 0;
	position: relative;
	text-align: center;
}
.map-text {
	color: white;
	font-size: 1em;
	font-weight: bold;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	text-shadow: 0 0 .35em black;
}

.footer {
  padding: 2em 2em 4em 2em;
}
.countdown {
  color: #999;
  font-family: JosefinSansLight;
  font-size: 1em;
}