body {
  overflow-x:hidden; 
  background-color: #e5e5e5;
}


/* ON PAGE NAVIGATION BAR --------------------------------------------------------------- */

@keyframes gallerynav {
	0% {top: -20px;}
	100% {top: 65px;}
}


.opnav-container {
	display: inline; 
	z-index: 90;
	left: 1%; 
	width: 98%;
	position: fixed; 
	top: 65px;
	height: 20px;
	text-align: center;
	font-size: 15px;
	color: black;
	background-color: rgba(229, 229, 229, 0.7);
    backdrop-filter: blur(3px);
	padding: 10px; 
	animation: gallerynav 2s ease;
	font-family: arial, sans-serif;
}

.topnavea {
  color: black;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  transition: letter-spacing .5s ease, font-weight .5s ease, text-decoration .5s ease;
  cursor: pointer;
}

.topnavea:hover {
	text-decoration: underline;
	letter-spacing: .2rem;
	font-weight: 600;
	transition: letter-spacing .5s ease, font-weight .5s ease, text-decoration .5s ease;
}




/* PAGE GRID START ------------------------------------------------------------- */


/* FAQ's ------------------------------------------------------------------------ */
.faq-header {
	grid-area: faqArea;
	font-family: Times, serif;
}

.faq1 {
	grid-area: faq1;
}

.faq2 {
	grid-area: faq2;
}

.faq3 {
	grid-area: faq3;
}

.faq4 {
	grid-area: faq4;
}

.faq5 {
	grid-area: faq5;
}

.faq6 {
	grid-area: faq6;
}

.faq7 {
	grid-area: faq7;
}

.faq8 {
	grid-area: faq8;
}

.faq9 {
	grid-area: faq9;
}

.question {
	color: gray;
	font-weight: bold; 
	font-size: 17px;
}

.faq-bottom {
	grid-area: faqBottom;
}

.horizontal-line {
	width: 100%;
	height: 5px;
	opacity: 0.3;
}


/* REVIEWS -------------------------------------------------------------------------*/

.reviews-header {
	grid-area: reviewsArea;
	font-family: Times, serif;
}

.review0 {
	grid-area: review0;
}

.review1 {
	grid-area: review1;
}

.review2 {
	grid-area: review2;
}

.review3 {
	grid-area: review3;
}

.review4 {
	grid-area: review4;
}

.review5 {
	grid-area: review5;
}

.review6 {
	grid-area: review6;
}

.review7 {
	grid-area: review7;
}

.review8 {
	grid-area: review8;
}

.review9 {
	grid-area: review9;
}

.review10 {
	grid-area: review10;
}

.review11 {
	grid-area: review11;
}

.review12 {
	grid-area: review12;
}

.review13 {
	grid-area: review13;
}

.review14 {
	grid-area: review14;
}

.review15 {
	grid-area: review15;
}

.review16 {
	grid-area: review16;
}

.review17 {
	grid-area: review17;
}

.review18 {
	grid-area: review18;
}

.review19 {
	grid-area: review19;
}

.review20 {
	grid-area: review20;
}

.review21 {
	grid-area: review21;
}

.review22 {
	grid-area: review22;
}

.review23 {
	grid-area: review23;
}

.review24 {
	grid-area: review24;
}

.review25 {
	grid-area: review25;
}



.csereviews {
	width: 100%;
	min-width: 300px;
	cursor: pointer;
} 


/* VENUE HEADER ----------------------------------------------------------- */
.venue-header {
	grid-area: venueHeader;
	font-family: Times, serif;
}

/* VENUE SECTION ----------------------------------------------------------- */

.venue0 {
	grid-area: venue0;
}

.venue1 {
	grid-area: venue1;
}

.venue2 {
	grid-area: venue2;
}

.venue3 {
	grid-area: venue3;
}

.venue4 {
	grid-area: venue4;
}

.venue5 {
	grid-area: venue5;
}

.venue6 {
	grid-area: venue6;
}

.venue7 {
	grid-area: venue7;
}

.venue8 {
	grid-area: venue8;
}

.venue9 {
	grid-area: venue9;
}

.venue10 {
	grid-area: venue10;
}

.venue11 {
	grid-area: venue11;
}

.venue12 {
	grid-area: venue12;
}

.venue13 {
	grid-area: venue13;
}

.venue14 {
	grid-area: venue14;
}

.venue-bottom {
	grid-area: venueBottom;
}




.venues {
	width: 100%;
	min-width: 350px;
	cursor: pointer;
} 

.moreinfo {
	font-weight: 600;
	color: black;
	text-decoration: underline;
}

/* PRICING ------------------------------------------------------------------------------------ */
.pricing-header {
	grid-area: pricingHeader;
	font-family: Times, serif;
}

.pricing-image {
	grid-area: pricingImage;
	padding: 20px;
}

.price-image {
	clip-path: ellipse();
	width: 100%;
}

.price-image {
	clip-path: ellipse();
	width: 100%;
}

.pricing1 {
	grid-area: pricing1;
}

.pricing2 {
	grid-area: pricing2;
}

.pricing-bottom {
	grid-area: pricingBottom;
}



/* PLANNING SHEETS ------------------------------------------------------------------------------------ */
.planningsheets-header {
	grid-area: planningHeader;
	font-family: Times, serif;
}

.planning-description {
	grid-area: planningDescription;
}

.planning-sheets {
	grid-area: planningSheets;
}

.wedding-sheets {
	width: 600px;
}

.ws-download {
	text-decoration: underline;
	color: black;
}

.page-link {
	text-decoration: underline;
	color: black;
    transition: background-color 1s ease;
}

.page-link:hover {
  background-color: yellow;
  cursor: pointer;
  transition: background-color .5s ease;
}


/* GRID SETUP AND LAYOUT ----------------------------------------------------------- */
.grid-container-resources {
  display: grid;
  position: relative;
  overflow-x: hidden;
  grid-gap: 10px;
  background-color: rgba(0, 0, 0, 0);
  top: 95px;
  left: 2%;
  width: 90%;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: black;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-areas: 
  'faqArea faqArea faqArea'
  'faq1 faq1 faq1'
  'faq2 faq2 faq2'
  'faq3 faq3 faq3'
  'faq4 faq4 faq4'
  'faq5 faq5 faq5'
  'faq6 faq6 faq6'
  'faq7 faq7 faq7'
  'faq8 faq8 faq8'
  'faq9 faq9 faq9'
  'faqBottom faqBottom faqBottom'
  'reviewsArea reviewsArea reviewsArea'
  'review0 review1 review2'
  'review0 review3 review4'
  'review5 review6 review9'
  'review7 review8 review9'
  'review10 review11 review12'
  'review10 review13 review14'
  'review15 review16 review19'
  'review17 review18 review19'
  'review20 review18 review19'
  'review25 review22 review21'
  'review24 review23 review26'
  'review24 review29 review28'
  'reviewBottom reviewBottom reviewBottom'
  'venueHeader venueHeader venueHeader'
  'venue0 venue1 venue2'
  'venue3 venue4 venue5'
  'venue6 venue7 venue8'
  'venue9 venue10 venue11'
  'venue12 venue13 venue14'
  'venueBottom venueBottom venueBottom'
  'pricingHeader pricingHeader pricingHeader'
  'pricing1 pricingImage pricing2'
  'pricingBottom pricingBottom pricingBottom'
  'planningHeader planningHeader planningHeader'
  'planningDescription planningDescription planningDescription'
  'planningSheets planningSheets planningSheets';
}


/*
.grid-container-resources > div {
	padding: 20px;
}
*/



/* REVIEW MODAL --------------------------------------------------------------- */

@keyframes blowUpModal {
  0% {transform:scale(0); }
  100% {transform:scale(1); }
}


.review-modal {
	position: fixed;
	display: none;
	z-index: 250;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	text-align: center;
	align-items: center;
	justify-content: center;
	background-color: rgba(204, 204, 204, 0.7);
    backdrop-filter: blur(3px);
	animation: blowUpModal .5s ease;
}

#currentreview {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.close-modal {
	position: absolute;
	background-color: rgba(255, 0, 0, 0.3);
	color: rgba(0, 0, 0, 0.7);
	right: 0;
	top: 0;
	padding: 10px;
	font-size: 40px;
	font-weight: 600;
	cursor: pointer;
	transition: color .5s ease, background-color 0.5s ease;
}

.close-modal:hover {
	background-color: rgba(255, 0, 0, 1);
	color: rgba(0, 0, 0, 1);
	transition: color .5s ease, background-color 0.5s ease;
}

/* VENUE MODAL --------------------------------------------------------------- */

@keyframes blowUpVenue {
  0% {transform:scale(0); }
  100% {transform:scale(1); }
}


.venue-modal {
	position: fixed;
	display: none;
	z-index: 250;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	text-align: center;
	justify-content: center;
	background-color: rgba(204, 204, 204, 0.7);
    backdrop-filter: blur(3px);
	animation: blowUpVenue .5s ease;
}

.venue-caption {
	position: absolute;
	bottom: 10%;
	color: black;
	left: 14%;
	width: 72%;
	text-align: center;
	background-color: rgba(229, 229, 229, 0.5);
    backdrop-filter: blur(3px);
}

.venue-link {
	position: absolute;
	bottom: 3%;
	color: black;
	left: 14%;
	width: 72%;
	text-align: center;
	background-color: rgba(229, 229, 229, 0.5);
    backdrop-filter: blur(3px);
}

#currentvenue {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.close-venuemodal {
	position: absolute;
	background-color: rgba(255, 0, 0, 0.3);
	color: rgba(0, 0, 0, 0.7);
	right: 0;
	top: 0;
	padding: 10px;
	font-size: 40px;
	font-weight: 600;
	cursor: pointer;
	transition: color .5s ease, background-color 0.5s ease;
}

.close-venuemodal:hover {
	background-color: rgba(255, 0, 0, 1);
	color: rgba(0, 0, 0, 1);
	transition: color .5s ease, background-color 0.5s ease;
}


/* -----------------------------LANDSCAPE ORIENTATION ON SMALL SCREEN -------------------------------------------------------------*/
  @media ((orientation: landscape) and (max-width: 1100px) and (min-width: 500px)) {

.opnav-container {
	top: 55px;
}


#currentreview {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85%;
}

.csereviews {
	width: 100%;
	max-width: 300px;
	cursor: pointer;
} 

#currentvenue {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  
}


.grid-container-resources {
  display: grid;
  position: relative;
  overflow-x: hidden;
  grid-gap: 10px;
  background-color: rgba(0, 0, 0, 0);
  top: 95px;
  left: 2%;
  width: 90%;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: black;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-areas: 
  'faqArea faqArea'
  'faq1 faq1'
  'faq2 faq2'
  'faq3 faq3'
  'faq4 faq4'
  'faq5 faq5'
  'faq6 faq6'
  'faq7 faq7'
  'faq8 faq8'
  'faq9 faq9'
  'faqBottom faqBottom'
  'reviewsArea reviewsArea'
  'review0 review1'
  'review0 review2'
  'review3 review4'  
  'review5 review6'
  'review7 review8'  
  'review9 review10'  
  'review11 review12'
  'review13 review14'
  'review15 review16'
  'review17 review19'
  'review18 review19'
  'review18 review19'
  'review20 review19'
  'review25 review22'
  'review21 review24'
  'review23 review26'
  'review27 review28'
  'reviewBottom reviewBottom'
  'venueHeader venueHeader'
  'venue0 venue1'
  'venue2 venue3'
  'venue4 venue5'
  'venue6 venue7'
  'venue8 venue9'
  'venue10 venue11'
  'venue12 venue13'
  'venue14 venue14'
  'venueBottom venueBottom'
  'pricingHeader pricingHeader'
  'pricing1 pricingImage'
  'pricing2 pricingImage'
  'pricingBottom pricingBottom'
  'planningHeader planningHeader'
  'planningDescription planningDescription'
  'planningSheets planningSheets';
} 
  
}
  
  
  
  

/* ------------------------------------------------PORTRAIT ORIENTATION ------------------------------------------------------------------- */
 @media (orientation: portrait) {
	
.opnav-container {
   top: 65px;
   height: 30px;
   backdrop-filter: blur(3px);
}	
	 
.planning-sheets {
	width: 100%;
}

.wedding-sheets {
	width: 90%;
}
	 
	 
.grid-container-resources {
  grid-template-areas: 
  'faqArea'
  'faq1'
  'faq2'
  'faq3'
  'faq4'
  'faq5'
  'faq6'
  'faq7'
  'faq8'
  'faq9'
  'faqBottom'
  'reviewsArea'
  'review0'
  'review1'
  'review2'
  'review3'
  'review4'
  'review5'
  'review6'
  'review9'
  'review7'
  'review8'
  'review10'
  'review11'
  'review12'
  'review13'
  'review14'
  'review15'
  'review16' 
  'review19'
  'review17' 
  'review18'
  'review20'
  'review21'
  'review22'
  'review23'
  'review24'
  'review25'
  'review26'
  'review27'
  'review28'
  'review29'
  'review30'
  'reviewBottom'
  'venueHeader'
  'venue0' 
  'venue1' 
  'venue2'
  'venue3' 
  'venue4' 
  'venue5'
  'venue6' 
  'venue7' 
  'venue8'
  'venue9' 
  'venue10' 
  'venue11'
  'venue12' 
  'venue13' 
  'venue14'
  'venueBottom'
  'pricingHeader'
  'pricing1'
  'pricingImage'
  'pricing2'
  'pricingBottom'
  'planningHeader'
  'planningDescription'
  'planningSheets';
}


#currentreview {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 0;
  width: 85%;
  height: auto;
  transform: translate(-0%, -50%);
  
}

#currentvenue {
  position: absolute;
  margin: 0;
  padding: 20px;
  top: 50%;
  left: 5%;
  width: 90%;
  transform: translate(-5%, -50%);
  
}

 
 }