/*
Theme Name: bootstrap_5.3.1

GLOBAL STYLES
-------------------------------------------------- */



/* social media icons */
.fa {
	padding: 5px;
	font-size: 1.25rem;
	width: 2rem;
	text-align: center;
	text-decoration: none;
	margin: 2px 2px;
  }
  
  .fa:hover {
	  opacity: 0.7;
  }
  
  .fa-facebook {
	background: #3B5998;
	color: white;
	border-radius: 0.25rem;
  }
  /* end social media icons */
  

  
  /* end modal css */
  
  
  body {
	  /* background-color: #ffff57;*/
	  background-color: #ffff58;
	  
  }
	  
	  .container {
		  padding-bottom: 100px;
	  }
	  #headerDiv {
		  position: fixed;
		  width: 100%;
		  top: 0;
		  left: 0;
		  z-index: 1002;
		  background-color: #ffff58;
		  height: 80px;
		  border-bottom: 3px solid red;
	  }	
		  
		  #pgpLogo {
			  position: fixed;
			  left: 40px;
			  top: 5px;
			  border: solid red 2px;
			  box-shadow:1px 1px 5px red, 0 0 25px gold, 0 0 5px snow;
			  border-radius: 0.5rem;
			  width: 9em;
			  height: 6em;
			  z-index: 1002;
		  }
		  #companyTitle {
			  position: fixed;
			  top: 0px; 
			  margin: 0; 
			  padding: 0;
			  padding-left: 210px;
			  padding-top: 10px;
			  display: block;
		  }
		  #navbarDiv {
			  position: fixed;
			  top: 0px; 
			  margin: 0; 
			  padding: 0;
			  padding-left: 200px;
			  padding-top: 20px;
			  height: 80px;
			  line-height: 40px;
			  display: block;
		  }
		  .nav-link {
			  float: left;
			  padding-top: 7px;
			  padding-bottom: 6px;
			  padding-left: 10px;
			  padding-right: 10px;
			  display: block;
			  color: #306754;
			  text-align: center;
			  text-decoration: none;
			  font-weight: bold;
			  line-height: 35px;
			  font-size: 1.1em;
		  }
		  .topnav a:hover {
			  background-color: snow;
			  color: darkgreen;
			  border-radius: 0.25rem;
		  }
		  .topnav a.active {
			  background-color: darkgreen;
			  color: snow;
			  /* pointer-events: none; */
			  /* cursor: default; */
			  border-radius: 0.25rem;
		  }
		  .navbar-icon {
			  display: none;
		  }
	  .modal-carousel-img {
		  min-height: 360px;
		  min-width: 680px;
		  max-height: 420px;
		  max-width: 720px;
	  }	
	  #propertyDetailsPage {
		  position: relative;
		  top: 140px;
	  }
	
	
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
	  #myCarousel {
		  position: relative;
		  top: 120px;
		  z-index: 1;
	  }
	  .carousel-inner{
		background-color: #ffff58;
		height: 80%;
		
	  }
		  .carousel-item {	
			width: 90%;
			height: 100%;
			margin: auto; 
			float: none; 
			justify-content: center;
		  }
		  /* main carousel */
		  .carousel-img {
			  width: 100%;
			  height: 100%;
			  border-radius: 0.75em;
			  
			  /* box-shadow: 1px 1px 5px yellow, 0 0 10px black, 0 0 15px snow; */
		  }
		  
		  .tagLine1 {
			  position: absolute;
			  top: -340px;
			  left: 80px;
			  color: red;
			  font-family: 'Brush Script MT', cursive;
			  font-family: 'Dancing Script', cursive;
			  font-weight: bold;
			  font-size: 4.5em;
			  text-shadow: 2px 2px 25px white, 2px 2px 15px bisque, 1px 1px 25px rgb(245, 218, 218);
			  animation-name: tagLine1;
			  animation-duration: 1s;  
			  animation-fill-mode: forwards;
		  }
			  @keyframes tagLine1 {
				  from {left: -600px;}
				  to {left: 80px; }
			  }
		  
		  .tagline2 {
			  position: absolute;
			  top: -240px;
			  left: 140px;
			  color: red;
			  font-family: 'Brush Script MT', cursive;
			  font-family: 'Dancing Script', cursive;
			  font-weight: bold;
			  font-size: 3.6em;
			  text-shadow: 2px 2px 25px white, 2px 2px 25px bisque, 2px 2px 5px snow;
			  animation-name: tagLine2;
			  animation-duration: 4s;  
			  animation-fill-mode: forwards;
		  }
			  @keyframes tagLine2 {
				  from {left: -700px;}
				  to {left: 140px; }
			  }
		  
		  .carousel-caption { 
			  position: absolute;
			  bottom: 120px;
		  }
		  .carousel-slide-title {
			  color: gold;
			  font-weight: bold;
			  text-shadow: 1px 1px 1px black;
		  }
		  .carousel-slide-details {
			  color: gold;
			  font-size: 1.25rem;
			  font-weight: bold;
			  text-shadow: 1px 1px 1px black;
		  }	
  
  
  
	  /* Featurettes
	  ------------------------- */
	  #listingSectionTitle {
		position: relative;
		top: 100px;
	  }  
	  .listings {
		  position: relative;
		  margin-left: auto;
		  margin-right: auto;
		  top: 150px;
		  margin-bottom: 120px;
	  }
	  
	  #featuretteHeading {
		  position: relative;
		  top: 140px;
	  }
	  .featurette-heading  {
		font-weight: 500;
		line-height: 1;
		letter-spacing: -.025rem;
		color: darkgreen; 
		text-shadow: 0px 0px 2px snow;
	  }
	  
	  .listing-label {
		  color: darkgreen;
		  font-weight: bold;
		  padding-left: 10px;
	  }
	  .listing-details {
		  padding-left: 10px;
	  }
	  .featurette-image	{
		min-width: 510px;  
		min-height: 330px;  
		  
		max-width: 540px;
		max-height: 360px;
		  
		  border-radius: 0.5em;
		  border: solid darkgreen 2px;
		  box-shadow: 1px 1px 5px yellow, 0 0 10px black, 0 0 15px snow;	
	  }
	  #sectionDivider {
		  margin: 2rem 0; /* Space out the Bootstrap <hr> more */
		  position: relative;
		  top: 100px;
	  }
	  .featurette-divider {
		margin: 4rem 0; /* Space out the Bootstrap <hr> more */
	  }
	.pagination-details {
		
		border: none;
		opacity: 1;
		width: 50px;
		background-color: #ffff58;
	}
  
	  /* Footer CSS
	  -------------------------------------------------- */
	  .footer {
		  position: relative;
		  bottom: -60px;
	  }
	  .footer-contact-info {
		  justify-content: end;
		  text-align: right;
	  }
	  #backToTopAnchorDiv {	
		  position: relative;
		  bottom: 70px;
		  padding: 0;
		  text-align: center;
		  z-index: 10000;
	  }
  
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
	  
	  @media only screen and (max-width: 1366px) {
		.carousel-item {	
			width: 80%;

		  }
		  /* main carousel */  
		  .carousel-img {
			  width: 100%;
			  height: 90%;
		  }
		
		  .tagLine1 {
			  top: -260px;
			  left: -20px;
			  font-size: 4.2em;
		  }
			  @keyframes tagLine1 {
				  from {left: -300px;}
				  to {left: -20px; }
			  }
		  .tagline2 {
			  top: -180px;
			  left: 20px;
			  font-size: 3.4em;
		  }
			  @keyframes tagLine2 {
				  from {left: -300px;}
				  to {left: 20px; }
			  }
			.carousel-caption {
				bottom: 180px;
			}
		  
	  }
	  
	  @media only screen and (max-width: 1200px) {	
		  #navbarDiv {
			  position: fixed;
			  top: 0px;
			  padding-left: 150px;
			  width: 100%;
			  background-color: #ffff58;
			  height: 80px;
			  border-bottom: 3px solid red;
		  }
			  #pgpLogo {
				  left: 10px;
				  width: 8em;
				  height: 5.5em;
			  }
			  .navbar-icon {
				  position: fixed;
				  top: 25px;
				  right: 20px;
				  border: 1px solid;
				  border-radius: 0.1em;
				  display: inline-block;
				  z-index: 10005;
				  text-align: center;	
			  }
			  
			  .topnav a:not(.active) {
				  display: none;
			  }
			  .topnav a.icon {
				  float: right;
				  display: block;
			  }
			  .topnav.responsive {
				  position: absolute;
				  width: 100%;
				  left: 0px;
			  }
			  .topnav.responsive a {
				  float: none;
				  display: block;
				  text-align: left;
				  width: 70%;
			  }
			  .topnav.responsive a:hover  {
				  border-radius: 0.25rem;
			  }
			  
		  
		  .featurette-image	{
			  min-width: 360px;
			  min-height: 240px;
			  max-width: 380px;
			  max-height: 240px;
		  }
		  
		  .footer {
			  width: 100%;
		  }
		  .footer-address-info {
			  justify-content: center;
			  text-align: center;
		  }
		  .footer-contact-info {
			  justify-content: center;
			  text-align: center;
		  }
	  }
	  

	  @media only screen and (max-width: 1080px) {
		  #companyTitle {
			  padding-left: 170px;
		  }
		  .carousel-item {	
			width: 100%;

		  }
		  /* main carousel */  
		  .carousel-img {
			  width: 100%;
			  height: 90%;
		  }
		  .tagLine1 {
			top: -240px;
			left: -35px;
			font-size: 3.2em;
		}
			@keyframes tagLine1 {
				from {left: -300px;}
				to {left: -35px; }
			}
		.tagline2 {
			top: -160px;
			left: -14px;
			font-size: 2.0em;
		}
			@keyframes tagLine2 {
				from {left: -300px;}
				to {left: -14px; }
			}
			.carousel-caption {
				bottom: 220px;
			}
			.featurette-image	{
				width: 100%;
				height: auto;
			}
	  }
	  @media only screen and (max-height: 640px) {
		#companyTitle {
			padding-left: 170px;
		}
		.carousel-item {	
		  height: 100%;

		}
		/* main carousel */  
		.carousel-img {
			height: 100%;
		}
		.tagLine1 {
		  top: -240px;
		  left: -35px;
		  font-size: 3.2em;
	  }
		  @keyframes tagLine1 {
			  from {left: -300px;}
			  to {left: -35px; }
		  }
	  .tagline2 {
		  top: -140px;
		  left: -14px;
		  font-size: 2.0em;
	  }
		  @keyframes tagLine2 {
			  from {left: -300px;}
			  to {left: -14px; }
		  }
		  .carousel-caption {
			  bottom: 120px;
		  }
		  
	}
	  
	  @media only screen and (max-height: 580px) {	 
		  .navbar-icon {
			  right: 10px;
		  }
		  .tagLine1 {
			  top: -180px;
			  left: -35px;
		  }
			  @keyframes tagLine1 {
				  from {left: -300px;}
				  to {left: -35px; }
			  }
		  .tagline2 {
			  top: -110px;
			  left: -14px;
			  font-size: 1.75em;
		  }
			  @keyframes tagLine2 {
				  from {left: -300px;}
				  to {left: -14px; }
			  }
		 
		  
	  }