body {
  overflow-x:hidden; 
  background-color: lavender;
  transition: background-color: 2s ease;
}

@keyframes rsrclogofadein {
	0% {opacity: 0;}
	30% {opacity: 0;}
	70% {opacity: 0.9;}
	80% {opacity: 0.9;}
	100% {opacity: 0.5;}
}

.logobackevents-container {
	z-index: -2;
	position: fixed;
	text-align: center;
	top: 100px;
	width: 80%;
	left: 10%;
	height: 80%;
	transition: top 2s ease, left 2s ease, height 2s ease;
}

.eventslogo {
	height: 90%;
	width: auto;
	opacity: 0.5;
	z-index: -4;
	left: 25%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
	animation: rsrclogofadein 6s linear;
}


/* 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(230, 230, 250, 0.85);
	padding: 10px; 
    backdrop-filter: blur(3px);
	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;
}

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





/* EVENTS GRID ---------------------------------------------------------------- */
.grid-container-events {
  display: grid;
  position: relative;
  background-color: rgba(230, 230, 250, 0.0);
  top: 85px;
  left: 2%;
  width: 90%;
  display: grid;
  justify-content: center;
  align-items: center;
  color: black;
  padding: 20px;
  grid-gap: 20px;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}

.grid-container-events > div {
	padding: 20px;
}

/* Grid Row 1 TITLE ---------------------------- */
.title-row {
  name: title;
  grid-column: 1 / span 4;
  grid-row: 1 / span 1;
  display: grid;
  justify-content: center;
  text-align: center;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 2 (WEDDINGS) ---------------------------- */

.wedding-image-container {
  name: wedding-pic;
  grid-column: 1 / span 2; 
  grid-row: 2 / span 1;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%
}

.event-image {
  object-fit: cover;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 100%; 
  height: 500px;
  
}

.events-wedding {
  name: weddingEvents;
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
  margin: 20px;
  padding: 20px;
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}


/* GRID ROW 3 QUOTES -----------------------------------*/
.wedding-quote {
  name: weddingquote1;
  grid-column: 1 / span 4;
  grid-row: 3 / span 1;
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 4 HORIZONTAL -----------------------------------*/
.horizontal-wedding {
  left: 1%;
  width: 98%;
  grid-row: 4 / span 1;
  grid-column: 1 / span 4;
  display: grid;
}




/* GRID ROW 5 (SCHOOLS) ---------------------------- */

.school-image-container {
  name: schoolpic;
  grid-column: 3 / span 2; 
  grid-row: 5 / span 1;
  overflow: hidden;
  width: 100%;
  height: 100%
}

.events-school {
  name: schoolEvents;
  grid-column: 1 / span 2;
  grid-row: 5 / span 1;
  justify-content: center;
  margin: 20px;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 6 SCHOOL QUOTES -----------------------------------*/
.school-quote {
  name: schoolquote;
  grid-row: 6 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 7 HORIZONTAL -----------------------------------*/
.horizontal-school {
  left: 1%;
  width: 98%;
  grid-row: 7 / span 1;
  grid-column: 1 / span 4;
  display: grid;
}





/* GRID ROW 8 (NIGHT LIFE) ---------------------------- */

.nightlife-image-container {
  name: nightlifepic;
  grid-row: 8 / span 1;
  grid-column: 1 / span 2; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

.events-nightlife {
  name: nightlifeevents;
  grid-row: 8 / span 1;
  grid-column: 3 / span 2;
  margin: 20px;
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 9 NIGHT LIFE QUOTES -----------------------------------*/
.nightlife-quote {
  name: nightlifequote;
  grid-row: 9 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 10 HORIZONTAL -----------------------------------*/
.horizontal-nightlife {
  left: 1%;
  width: 98%;
  grid-row: 10 / span 1;
  grid-column: 1 / span 4;
  display: grid;
}





/* GRID ROW 11 (SOCIAL EVENTS) ---------------------------- */

.social-image-container {
  name: socialpic;
  grid-row: 11 / span 1;
  grid-column: 3 / span 2; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

.events-social {
  name: socialevents;
  grid-row: 11 / span 1;
  grid-column: 1 / span 2;
  margin: 20px;
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 12 SOCIAL QUOTES -----------------------------------*/
.social-quote {
  name: socialquote;
  grid-row: 12 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 13 HORIZONTAL -----------------------------------*/
.horizontal-social {
  left: 1%;
  width: 98%;
  grid-row: 13 / span 1;
  grid-column: 1 / span 4;
  display: grid;
}







/* GRID ROW 14 (CORPORATE EVENTS) ---------------------------- */

.corp-image-container {
  name: corppic;
  grid-row: 14 / span 1;
  grid-column: 1 / span 2; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

.events-corp {
  name: corpevents;
  grid-row: 14 / span 1;
  grid-column: 3 / span 2;
  margin: 20px;
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
 }

/* GRID ROW 15 CORPORATE QUOTES -----------------------------------*/
.corp-quote {
  name: corpquote;
  grid-row: 15 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  /* color: #616060;  */
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}


/* GRID ROW 16  HORIZONTAL LINE  ----------------------------------------- */

.horizontal-corp {
  left: 1%;
  width: 98%;
  grid-row: 16 / span 1;
  grid-column: 1 / span 4;
  display: grid;
}

.horizontal {
	width: 100%;
}

.horizontal-lite {
	color: gray;
	opacity: 0.3;
	width: 100%;
}



/* GRID ROW 17  SUMMARY  ----------------------------------------- */
.events-summary1 {
  name: summaryevents;
  grid-row: 17 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: center;
  color: #000000; 
  font-weight: 400;
  font-size: 16px;
}




/* GRID ROW 18  REMEMBER  ----------------------------------------- */
.events-summary-remember {
  grid-row: 18 / span 1;
  grid-column: 2 / span 2;
  display: grid;
  line-height: 0;
  justify-content: center;
  text-align: center;
  color: black; 
  font-weight: 600;
  font-size: 26px;
  font-family: Times, serif;
}


/* GRID ROW 19  DJ EQUATION  ----------------------------------------- */
.events-summary-image {
  name: summaryeventsimage;
  grid-row: 19 / span 1;
  grid-column: 1 / span 4;
  display: grid;
  justify-content: center;
  text-align: right;
} 

.events-summary-image img {
  object-fit: cover;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-80%);
  max-width: 100%; 
  height: 300px;
}

.quotesig {
	font-size: 16px
}

.link2 {
  font-size: 14px;
  font-weight: 600;
  color: black; 
  text-decoration: underline;
  transition: background-color 1s ease;
}

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

.section-title {
	text-align: center;
	font-family: times, serif;
	text-decoration: underline;
}


/* ------------------------------------------------PORTRAIT ORIENTATION ------------------------------------------------------------------- */
 @media (orientation: portrait) {
	 
.event-image {
  position: relative;
  top: 10;
  left: 0;
  transform: translateX(0) translateY(0);
  width: 100%; 
  height: 300px;
  
}

.grid-container-events {
	display: grid;
	grid-gap: 25px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(24, auto);
}

.grid-container-events > div {
	padding: 0px;
}


/* GRID ROW 1 TITLE -----------------------------------*/
.title-row {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}


/* GRID ROW 2 WEDDING IMAGE -----------------------------------*/
.wedding-image-container {
  grid-column: 1 / span 1; 
  grid-row: 2 / span 1;
  overflow: hidden;
  width: 100%;
  height: 100%
}

/* GRID ROW 3 WEDDING DESCRIPTION -----------------------------------*/

.events-wedding {
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
}

/* GRID ROW 4 QUOTE -----------------------------------*/
.wedding-quote {
	display: grid;
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}

/* GRID ROW 5 HORIZONTAL -----------------------------------*/
.horizontal-wedding {
  left: 1%;
  width: 98%;
  grid-row: 5 / span 1;
  grid-column: 1 / span 1;
}


	 
/* GRID ROW 6 SCHOOL IMAGE ---------------------------- */

.school-image-container {
  name: schoolpic;
  grid-column: 1 / span 1; 
  grid-row: 6 / span 1;
  overflow: hidden;
  width: 100%;
  height: 100%
}


/* GRID ROW 7 SCHOOL DESCRIPTION ---------------------------- */

.events-school {
  name: schoolEvents;
  grid-column: 1 / span 1; 
  grid-row: 7 / span 1;
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 8 SCHOOL QUOTES -----------------------------------*/
.school-quote {
  name: schoolquote;
  grid-row: 8 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 9 HORIZONTAL -----------------------------------*/
.horizontal-school {
  left: 1%;
  width: 98%;
  grid-row: 9 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
}





/* GRID ROW 10 (NIGHT LIFE IMAGE) ---------------------------- */

.nightlife-image-container {
  name: nightlifepic;
  grid-row: 10 / span 1;
  grid-column: 1 / span 1; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

/* GRID ROW 11 (NIGHT LIFE DESCRIPTION) ---------------------------- */

.events-nightlife {
  name: nightlifeevents;
  grid-row: 11 / span 1;
  grid-column: 1 / span 1; 
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 12 NIGHT LIFE QUOTES -----------------------------------*/
.nightlife-quote {
  name: nightlifequote;
  grid-row: 12 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 13 HORIZONTAL -----------------------------------*/
.horizontal-nightlife {
  left: 1%;
  width: 98%;
  grid-row: 13 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
}





/* GRID ROW 14 (SOCIAL EVENTS IMAGE) ---------------------------- */

.social-image-container {
  name: socialpic;
  grid-row: 14 / span 1;
  grid-column: 1 / span 1; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

/* GRID ROW 15 (SOCIAL EVENTS DESCRIPTION) ---------------------------- */
.events-social {
  name: socialevents;
  grid-row: 15 / span 1;
  grid-column: 1 / span 1; 
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
}

/* GRID ROW 16 SOCIAL QUOTES -----------------------------------*/
.social-quote {
  name: socialquote;
  grid-row: 16 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}

/* GRID ROW 17 HORIZONTAL -----------------------------------*/
.horizontal-social {
  left: 1%;
  width: 98%;
  grid-row: 17 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
}







/* GRID ROW 18 (CORPORATE IMAGE) ---------------------------- */

.corp-image-container {
  name: corppic;
  grid-row: 18 / span 1;
  grid-column: 1 / span 1; 
  overflow: hidden;
  width: 100%;
  height: 100%
}

/* GRID ROW 19 (CORPORATE DESCRIPTION) ---------------------------- */
.events-corp {
  name: corpevents;
  grid-row: 19 / span 1;
  grid-column: 1 / span 1; 
  justify-content: center;
  text-align: justify;
  color: black; 
  font-weight: 400;
  font-size: 14px;
 }

/* GRID ROW 20 CORPORATE QUOTES -----------------------------------*/
.corp-quote {
  name: corpquote;
  grid-row: 20 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  text-align: center;
  color: gray; 
  /* color: #616060;  */
  font-weight: 400;
  font-size: 17px;
  font-family: Times, serif;
}


/* GRID ROW 21  HORIZONTAL LINE  ----------------------------------------- */

.horizontal-corp {
  left: 1%;
  width: 98%;
  grid-row: 21 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
}



.horizontal {
	width: 100%;
}

.horizontal-lite {
	color: gray;
	opacity: 0.3;
	width: 100%;
}



/* GRID ROW 22  SUMMARY  ----------------------------------------- */
.events-summary1 {
  name: summaryevents;
  grid-row: 22 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  text-align: center;
  color: #000000; 
  font-weight: 400;
  font-size: 16px;
}




/* GRID ROW 23  REMEMBER  ----------------------------------------- */
.events-summary-remember {
  grid-row: 23 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  line-height: 0;
  justify-content: center;
  text-align: center;
  color: black; 
  font-weight: 600;
  font-size: 26px;
  font-family: Times, serif;
}


/* GRID ROW 24  DJ EQUATION  ----------------------------------------- */
.events-summary-image {
  name: summaryeventsimage;
  grid-row: 24 / span 1;
  grid-column: 1 / span 1; 
  display: grid;
  justify-content: center;
  width:100%;
} 

.events-summary-image img {
  object-fit: scale-down;
  position: relative;
  width: 100%;
}

	 
}