/* Core */
html {
	height: -webkit-fill-available;
}

body {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: -webkit-fill-available;
  min-height: 100vh;
}

.border {
	border: 12px solid #003A20;
	height: calc(100% - 24px);
	min-height: -webkit-fill-available;
	width: calc(100% - 24px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.shadow {
	background: transparent url("assets/bg_shadow.png") left top repeat-x;
	background-size: 100%;
	mix-blend-mode: multiply;
	top: 0;
	left: 0;
	position: fixed;
	min-height: 100%;
	width: 4142px;
	opacity: .8;
	pointer-events: none;
	z-index: 1;
}

.texture {
	background: transparent url("assets/bg_texture-optimized.jpg") center top repeat;
	background-size: 30%;
	position: fixed;
	min-height: 100%;
	width: 100%;
	top:0;
	left:0;
	z-index: -3;
	pointer-events: none;
}

@keyframes MOVE-BG {
	   from {
	     transform: translateX(0);
	   }
	   to { 
	     transform: translateX(-200%);
	   }
}

/* Typography */

@font-face {
  font-family: 'Modern Era';
  src: url(fonts/ModernEra-Regular.otf);
  font-weight: normal;
}

.eyebrow {
	font-family: 'Modern Era';
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 24px;
	color: #878787;
	margin-bottom: 24px;
}

.strikethrough {
	text-decoration: line-through;
}

p {
	font-family: 'Modern Era';
	font-size: 14px;
	line-height: 24px;
	color: #A0A0A0;
	font-weight: regular;
	margin-bottom: 24px;
}

a {
	cursor: pointer;
	color: #075B36;
}

a.link {
	font-family: 'Modern Era';
	text-transform: uppercase;
	font-style: italic;
	text-decoration: none;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #075B36;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

a.link:after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 5px;
	left: 0;
	background: #075B36;
	cursor: pointer;
}

a.link:hover {
	color: #000000;
}

a.link:hover:after {
	background: #000000;
	animation-name: MOVE-UNDERLINE;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

@keyframes MOVE-UNDERLINE {
	   0% {
	   	 width: 0%;
	   }
	   50% {
	     width: 100%;
	   }
}


/* Fade In */
.scrollFade {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}

.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--animate {
  transition: opacity 0.3s linear;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}


/* Main */

.main {
	min-height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

.main:before {
	content: '';
	display: block;
	background: red;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url("assets/flowers_right.png") right top no-repeat;
	background-size: 30%;
	height: 1500px;
	width: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	animation: fadeInAnimation cubic-bezier(0.75, 0, 0.25, 1) 1s;
	animation-fill-mode: forwards;
}

.main:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url("assets/flowers_left.png") left top no-repeat;
	background-size: 30%;
	height: 1500px;
	width: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	animation: fadeInAnimation cubic-bezier(0.75, 0, 0.25, 1) 1s;
	animation-fill-mode: forwards;
}

.headline {
	opacity: 0;
	animation: fadeInAnimation cubic-bezier(0.75, 0, 0.25, 1) 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}

.image-wrapper {
	display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text-block {
	margin-bottom: 112px;
}

.text-block-container {
	max-width:1600px;
	margin: 25vh 40px 0 40px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 160px 312px auto auto auto auto;
	gap: 0 40px;
	grid-template-areas: 
		". details details details . . . . . . . ."
    ". . . . . . . dress-code dress-code dress-code . ."
    ". . . . accommodations accommodations accommodations . . . . ."
    ". . . . travel-from-hotel travel-from-hotel travel-from-hotel travel-from-nyc travel-from-nyc travel-from-nyc . ."
    ". . . . near-hotel near-hotel near-hotel near-hotel . . . ."
    ". . . faq faq faq faq faq . . . .";
}

.details {
	grid-area: details;
}

.accommodations {
	grid-area: accommodations;
}

.dress-code {
	grid-area: dress-code;
}

.travel-from-hotel {
	grid-area: travel-from-hotel;
}

.travel-from-nyc {
	grid-area: travel-from-nyc;
}

.travel-from-hotel .flower {
	margin-top: 20px;
}

.near-hotel {
	margin-top: 10vh;
	grid-area: near-hotel;
}

.faq {
	grid-area: faq;
	position: relative;
}

.faq:before {
	content: '';
	display: block;
	position: absolute;
	bottom: 500px;
	right: -35vw;
	background: transparent url("assets/flower-middle-of-page.png") right top no-repeat;
	background-size: 30%;
	height: 1500px;
	width: 85vw;
	z-index: 0;
	pointer-events: none;
}


.faq .text-block {
	width: 70%;
	max-width: 400px;
	margin: 0 0 72px 24%;
}

.faq .text-block:nth-child(even) {
	margin-left: 0;
}

.faq-title {
	margin-bottom: 60px;
}

.cta {
	height: calc(100vh - 12px);
	width: calc(100vw - 24px);
	margin-top: 120px;
	background: transparent url('assets/green-texture.jpg') left top repeat;
	background-size: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cta-block {
	text-decoration: none;
}

.cta-block .eyebrow {
	display: inline-block;
	position: relative;
}

.cta-block .eyebrow:after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 3px;
	left: 0;
	opacity: 0;
	background: #ffffff;
	cursor: pointer;
}

.cta-block:hover .eyebrow {
	color: #ffffff;
}

.cta-block:hover .eyebrow:after {
	opacity: 1;
	animation-name: MOVE-UNDERLINE;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

.cta-block img {
	display: block;
	margin-bottom: 12px;
}

.cta-flower {
	margin: -28px 60px 0;
	display: block;
	opacity: 0.8;
}

.photos {
	height: calc(100vh - 12px);
	width: calc(100vw - 24px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.photos-left {
	width: 50%;
	height: 100%;
	padding: 10vh 10vw 12vh;
	border-right: 1px solid #E0E0E0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.photos-left .photos-flower {
	opacity: 0.4;
}

.photos-right {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.photos-gif {
	width: 65%;
	max-width: 500px;
}

/* Medium devices (landscape tablets, 1000px and down) */
@media only screen and (max-width: 1000px) {

.text-block-container {
	margin: 25vh 20px 0 20px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 120px auto auto auto auto auto;
	gap: 0 20px;
	grid-template-areas: 
		". details details . . . . ."
		". . . . . dress-code dress-code ."
    ". . accommodations accommodations accommodations . . ."
    ". . travel-from-hotel travel-from-hotel . travel-from-nyc travel-from-nyc ."
    ". . near-hotel near-hotel near-hotel near-hotel . . "
    ". . faq faq faq faq . .";
}

.text-block {
	margin-bottom: 100px;
}

.near-hotel {
	margin-top: 0;
}

.faq:before {
	right: -26vw;
}

.cta-rsvp img {
	height: 32px;
}

.cta-book-rooms img {
	height: 32px;
}

.cta-flower {
	margin: -24px 60px 0;
	opacity: 0.8;
	width: 48px;
}

}

/* Small devices (phones, 700px and down) */
@media only screen and (max-width: 700px) {
.main:before {
	background-size: 33%;
}

.main:after {
	background-size: 33%;
}

.text-block-container {
	margin: 0 80px 0 80px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto auto auto auto;
	gap: 0 20px;
	grid-template-areas: 
		"details details details details"
		"dress-code dress-code dress-code dress-code"
    "accommodations accommodations accommodations accommodations"
    "travel-from-hotel travel-from-hotel travel-from-hotel travel-from-hotel"
    "travel-from-nyc travel-from-nyc travel-from-nyc travel-from-nyc"
    "near-hotel near-hotel near-hotel near-hotel"
    "faq faq faq faq";
}

.text-block {
	margin-bottom: 80px;
}

.faq .text-block {
	width: auto;
	margin: 0 0 60px 0;
}

.faq:before {
	display: none;
}

.cta {
	flex-direction: column;
}

.cta-block {
	text-align: center;
}

.cta-flower {
	margin: 20px 0 40px;
	width: 40px;
}

.photos {
	flex-direction: column;
}

.photos-left {
	width: 100%;
	height: 30%;
	border-right: 0;
	padding: 60px 10vw 0;
	flex-direction: row;
}

.photos-headline {
	align-self: start;
	width: 140px;
}

.photos-flower {
	align-self: end;
	width: 40px;
}

.photos-right {
	width: 100%;
	height: 70%;
	padding: 0 0 40px;
}

.photos-gif {
	width: 90%;
}
}

/* Extra small devices (phones, 500px and down) */
@media only screen and (max-width: 490px) {
.main:before {
	background-size: 56%;
	top: 58vh;
}

.main:after {
	background-size: 56%;
	top: -3vh;
	left: -10vw;
}

.headline {
	width: 150px;
}

a.link {
	text-decoration: underline;
}

a.link:after {
	display: none;
}
}