@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&family=Open+Sans:ital,wght@1,300&&family=Montserrat:wght@300;400;600&display=swap');
@import url('https://network.2percentrealty.ca/themes/2023_2per_franchise_rev1/../../css/css_assets/2per/2023/stellarnav.css');
@import url('https://network.2percentrealty.ca/themes/2023_2per_franchise_rev1/css/themeNav.css');
/* Globals
----------------------------------------------- */	
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	line-height: 110%;
	color: rgb(6,38,58);
	}
	
.mobile {
	display: block;
	}
		
  @media handheld, only screen and (max-width: 900px)
.content {
    
}
	
.content {
	max-width: 1700px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
	
.content.overflow {
	overflow: visible;
	}
	
.dropShadow {
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
  .container {
	width: 100%;
	}
  .main {
	min-height: 500px;
	margin-top: 150px;
	/*margin-top: 14vw;*/
	}

  .iframe {
    margin-top: 120px;
  }


p {
	margin: 0 0 1em 0;
	}
	
h1,
h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	color: rgb(6,38,58);
	}

a,
a:visited {	
	color: hsl(var(--secondaryColor));
	}
		
a:hover {
	color: hsl(var(--secondaryColor));
	}
	
.yellowButton {
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	min-width: 150px;
	min-height: 50px;
	font-size: 1.2em;
	font-weight: 400;
	background: hsl(var(--yellow));
	border-radius: 16px;
	padding: 0.2em 1em;
	margin: 10px;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
	}
.yellowButton a {
    text-decoration: none;
    color: hsl(var(--darkBlue));
}

.yellowButton a:visited {
    color: hsl(var(--darkBlue));
}
	
.yellowButton:hover {
	color: rgb(255,255,255);
	background: hsl(var(--secondaryColor));
	}
	
a.button.blueButton {
	height: auto;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	font-weight: 400;
	color: rgb(255,255,255);
	background: hsl(var(--lightBlue));
	border-radius: 16px;
	padding: 0.2em 1em;
  max-width: 200px;
	}
	
a.button.blueButton:hover {
	color: rgb(255,255,255);
	background: hsl(var(--primaryColor));
	}
	
a.buttonCenter,
input.buttonCenter {
	display: block;
	margin: 1em auto;
	width: 50%;
	max-width: 250px;
	}
	
a.buttonMed,
input.buttonCenter {
	width: 220px;
	}
	
a.buttonAuto,
input.buttonAuto {
	width: auto;
	}

.headerDirect {
  
  font-size: 1.2em;
}
	a.headerDirect {
		display: block;
		font-family: 'Lato', sans-serif;
		font-size: 1.2em;
		font-weight: 400;
		color: hsl(var(--primaryColor));
		text-decoration: none;
		}
	
.sec50 {
	display: grid;
	grid-template-rows: auto;
	justify-content: space-evenly;
	grid-template-columns: 50% 50%;
	}

.content-frame {
  margin: 0 auto;
  border: 1px solid hsl(var(--green));
  border-radius: 10px;
  padding: 20px;
  display: flex;
	flex-wrap: wrap; 
  align-items: flex-start; 
  justify-content: flex-start;
	margin-bottom: 20px; 
}

@media only screen and (max-width: 768px) {
  .content-frame {
    flex-direction: column;  /* Vertical stacking for mobile */
  }

}

:root {
	/*hsl values */
	--darkBlue: 201, 100%, 11%;
	--lightBlue: 199, 100%, 33%;
	--primaryColor: 87, 70%, 43%; /*hsl values */
	--secondaryColor: 201, 100%, 11%;
	--thirdColor: 199, 100%, 33%;
	/* Generic hsl color names - adjust to match your brand needs*/  
	--orange: 27, 92%, 58%;
	--red: 1, 62%, 50%;
	--blue: 199, 100%, 33%;
	--green: 95, 47%, 50%;
	--yellow: 50, 100%, 50%;
	--darkBlue: 200, 100%, 11%;
	--purple: 270, 61%, 24%;
	--darkPurple: 270, 62%, 25%; 
}	

.blueGrad {
	background: rgb(35,114,168);
	background: linear-gradient(0deg, rgba(35,114,168,1) 35%, rgba(255,255,255,1) 100%);
	}	
	
.2perBlue {
	color: hsl(199, 100%, 33%;);
	}
	
.2perGreen {
	color: hsl(87, 70%, 43%);
	}
	
.indicator,
.indicator.tActive {
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 100%;
	color: rgb(122,192,65);
	background: rgb(255,255,255);
	background-image: none;
	border-radius: 50%;
	margin: 0;
	}
	
.indicator::after {
	content: '\002B';
	}

.indicator.tActive::after {
	content: '\2212';
	}
	
.pageTitle {
	text-align: center;
	margin: 0 0 1.2em 0;
	}
	
.whiteBG {
	background: rgb(255,255,255);
	}
	
		
/* Header
----------------------------------------------- */
.header {
	padding: 1em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #fff;
	}
@media screen and (max-width: 768px) {
  .header {
    padding: 1em 0;
  }
}
.headerGrid {
	display: grid;
	grid-template-columns: 20% 60% 20%;
  grid-template-rows: auto;
	justify-content: start;
  align-content: start;
  grid-template-areas: 
  "headLogo nav contact";
	position: relative;
  /*max-height: 90px;
  align-items: end;*/
	}


.headerGrid .headerLogo {
  display: flex;
	grid-area: headLogo;
	}
		
.headerGrid .headerLogo img {
	  max-height: 100px;
	}

  @media screen and (max-width: 768px) {
      .headerGrid .headerLogo img {
      max-height: 50px;
    }
  }

.headerGrid .nav {
	grid-area: nav;
	}
	
.headerGrid .contact {
	grid-area: contact;
	}
			
a.button.contact {
	width: 150px;
	height: 40px;
	padding: 3px 5px;
 	position: absolute;
 	top: 50%;
 	right: 0;
	transform: translateY(-50%);
	margin: 0;
	z-index: 3;
	}
	
/* Footer
----------------------------------------------- */
.footerButton {
  display: flex;
    align-items: center;
    justify-content: center;  
  text-align: center;
    min-width: 150px;
    min-height: 50px;
    font-size: 1.2em;
    font-weight: 400;
    background: hsl(var(--yellow));
    border-radius: 16px;
    padding: 0.2em 1em;
    margin: 10px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}
.footerButton:hover {
    background: hsl(var(--primaryColor));
    color: hsl(var(--yellow));
}
.hiring {
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	}
	
.innovative,
.hiringLink {
	padding: 1.2em;
	}
	
.innovative {
	font-family: 'Lato', sans-serif;
	color: rgb(35,113,167);
	font-weight: 400;
	font-size: 2.5vw;
	line-height: 110%;
	}

.hiringLink {
	text-align: right;
	}

.canLarge {
	width: 55%;
	}
		
.footerGrid {
	display: grid;
	overflow: visible;
	grid-template-rows: auto;
	justify-content: space-evenly;
	height: 150px;
	grid-template-columns: 8% 60% 30%;
	grid-gap: 1%;
	padding: 1em;
  	grid-template-areas: 
    	"footerLogo revolution footAddy";
	}
@media (max-width: 767px) {
    .footerGrid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "footerLogo"
            "revolution"
            "footAddy";
        height: auto;
    }
}

.footLogo {
	grid-area: footerLogo;
	overflow: visible; 
	}
	
.footerLogo img {
	width: 100%;
	}
	
.footAddy {
	text-align: right;
	font-family: 'Lato', sans-serif;
	color: rgb(35,113,167);
	font-weight: 400;
	font-size: 1em;
	line-height: 110%;
	grid-area: footAddy;
	}
	
.revolution {
	width: 50%;
	grid-area: revolution;
	}

.logo img,	
.revolution img {
	bottom: 7%;
	}
	
.tm {
	font-size: 0.6em;
	line-height: 110%;
	padding-bottom: 3em;
	}
	
/* Forms
----------------------------------------------- */	

	
@media only screen and (max-width: 768px) {

}

@media handheld, only screen and (max-width: 1023px) {
/* Global
----------------------------------------------- */
.sec50 {
	grid-template-columns: 1fr;
	}


		
/* Footer
----------------------------------------------- */
.hiring,
.hiringLink {   
	text-align: center;
	}
	
.innovative {
	font-size: 4vw;
	padding: 1em 0;
	}
	
.footerGrid {
	grid-template-columns: 12% 56% 30%;
	}	

.revolution {
	width: 70%;
	}
	

}

	

/* Header
----------------------------------------------- */

    
a.button.contact {
	width: 120px;
	margin: 0 auto;
	position: relative;
	right: auto;
	font-size: 0.8em;
	height: 25px;
	line-height: 25px;
	padding: 3px 5px;
	}
	
/* Footer
----------------------------------------------- */
address,
address p,
address a {
  font-style: normal;
  }

address h2 {
  font-size: 1.2em;
  margin: 0;
  padding-top: 10px;
  }

.footerGrid {
	grid-template-columns: 38% 60%;
  	grid-template-areas: 
    	"footerLogo footAddy"
    	"revolution .";
	}

.footerLogo img {
	width: 100px;
	}
	
.footAddy {	
	font-size: 0.8em;
	grid-area: 1 / 2 / 3 / 3;
	}
	
.revolution {
	width: 70%;
	}
	
.footer .logo img,
.footer .revolution img {
	position: relative;
	bottom: auto;
	display: block;
	overflow: visible;
	}
	
.content.tm {
	padding: 3em 4vw;
	}
	

/* Homepage Template Styles - Applies to all Chart Templates
----------------------------------------------- */
html,
body {
    height: 100%;
	margin: 0;
	padding: 0;
    }

  .container.home {
	margin-top: 5vw;
	}
  @media screen and (max-width: 768px) {
    .container.home {
	margin-top: 15vw;
	}
  }


  .video-container {
    position: relative;
    overflow: hidden; /* To ensure the video doesn't spill over if it's larger than the container */
    z-index: 1; /* This ensures that the video stays below the text overlay */
}
/* Define initial states */
section {
    padding: 40px 0;
}
.animated {
  opacity: 0;
}
.fade-in {
  opacity: 1 !important;
  transition: opacity 1s ease-in-out;
}
section h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}
section h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center; 
}
.video-container video {
  display: flex;
    align-items: center; /* vertically center */
    justify-content: center;  
  width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}
#intro {
    position: relative;
    padding: 0px;
    margin: 0px;
}
#intro .video-container::after {
  content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    z-index: 1;
}
@media screen and (max-width: 768px) {
  #intro {
    height: 30vh;
    margin-top: 120px;
  }
  #intro .text-overlay {
   margin-left: auto;
   margin-right: auto;
   width: 50%;
  }
  .text-overlay h1, .text-overlay h2 {
    text-align: center;
    margin-bottom: 10px;
  }
  .text-overlay h2{
    font-size: 16px;
  }
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2; /* This ensures the text is above the video */
}
.rounded-shadow {
  border: 1px solid hsl(var(--primaryColor));
  width: 80%;
  position: relative;
  margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 8px 14px hsla(var(--primaryColor), 0.4);
}
@media screen and (max-width: 767px) {
  .rounded-shadow {
    width: 95%;
  }
} 

section .text-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
@media screen and (max-width: 768px) {
section .text-block {
  width: 100%;
}
}


/* Mobile */
@media screen and (max-width: 767px) {
  section h1 {
    font-size: 28px;
  }
  section h2 {
    font-size: 24px;
  }
}

/* Small laptop */
@media screen and (min-width: 768px) {
  section h1 {
    font-size: calc(24px + (28 - 24) * ((100vw - 768px) / (1366 - 768)));
  }
}

/* HD */
@media screen and (min-width: 1366px) {
  section h1 {
    font-size: calc(48px + (33 - 28) * ((100vw - 1366px) / (1920 - 1366)));
  }
}

/* Larger than HD */
@media screen and (min-width: 1920px) {
  section h1 {
    font-size: calc(48px + (48 - 33) * ((100vw - 1920px) / (2560 - 1920)));
  }
}
.chart-container {
  width: 70vw;
  margin: 0 auto;
  position: relative;
}
.chart-container::before {
    content: "";
    position: absolute;
    top: 50px; 
    left: 0;
    right: 0;
    bottom: 0; 
    z-index: -1; 
}
.chart-button { display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;}

#savings-chart {
 position: relative;
}
#savings-chart h1 {
  text-align: center;
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .chart-container {
    display: flex;
    flex-direction: column;
        justify-content: center;
        align-items: center;
				width: 100%;
        margin-top: 20px;
  }
  #savings-chart .video-container {
        width: 100%;
    }

}
/*-------------------------*/
#maximum-exposure {
    display: flex;
    align-items: center;
    padding: 6vw;
}

#maximum-exposure h1 {
    flex: 1;
    text-align: center;
    margin: 0;
    padding: 20px;
    
}

#maximum-exposure .video-container {
  display: flex;  
	flex: 1;
    max-width: 50%;
		justify-content: center;
		align-items: center;
    
}

#maximum-exposure .video-container video {
    flex: 1;
    max-width: 65%;
}

/* Additional media query for mobile layout */
@media (max-width: 768px) {
    #maximum-exposure {
        flex-direction: column-reverse;
        height: auto;
        padding: 0px;
    }
    #maximum-exposure h1 {
        order: 1; 
    }
    #maximum-exposure .video-container {
      max-width: 100%; 
      width: 100%;
      order: 2;    }

      #maximum-exposure a {
        order: 3;}
}



#easy-mls-search {
    display: flex;
    align-items: center;
    background: white; 
    /* padding: 2vw 6vw;
    z-index: 10;
    margin-top: -50px;
    margin-bottom: 50px;*/  
}
#easy-mls-search h1 {
    flex: 1; 
    text-align: center; 
    margin: 0; 
    padding: 20px;
    
}
#easy-mls-search .video-container {
    flex: 1; 
    max-width: 50%; 
}
@media (max-width: 768px) {
  #easy-mls-search .video-container {
        max-width: 80%;
        width: 80%;
    }
    #easy-mls-search {
      flex-direction: column;
      padding: 0px;
      margin-top: 20px;
    margin-bottom: 20px; 
    }
}
/*-------------------------*/
#expert-advice .video-container {
  flex: 1;
  max-width: 50%;
}
#expert-advice {
    display: flex;
    align-items: center;
    background: white; 
    padding: 0 6vw 6vw; 
    z-index: 5;
}
#expert-advice h1 {
    flex: 1; 
    text-align: center; 
    margin: 0; 
    padding: 20px; 
}
@media (max-width: 768px) {
  #expert-advice .video-container {
        max-width: 100%;
        width: 100%;
    }
    #expert-advice {
      flex-direction: column-reverse;
    }
}

#locations-map {
  box-sizing: border-box;    
  position: relative;
    padding: 0px 0; /* Adjust this value as needed for vertical spacing */
    margin-bottom: 0;
   
}
#locations-map video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#locations-map h1 {
    text-align: left;
}
#locations-map .title-block {
  position: absolute;
    top: 20px; 
    left: 20px; 
    width: 50%;
    padding: 40px 0 0 80px;
    z-index: 2; 
}

#locations-map .video-container {
  padding-top: 56.25%; 
}

.corner-link {
    position: absolute;
    bottom: 100px; 
    right: 40px; 
    z-index: 3; 
}
@media (max-width: 768px) {
  #locations-map {
    height: auto; /* allow the container to expand to fit content */
  }

  #locations-map .video-container {
    height: 25vh;  /* set a fixed height */
    padding-top: 10%; 
  }
  #locations-map .video-container video {
    width: 100%;  /* set width to 100% */
    height: 100%;  /* set height to 100% */
  }
  #locations-map video {
    object-fit: cover;
    object-position: center bottom;  /* align to the bottom */
  }

  #locations-map .title-block {
    position: static; /* Reset to static positioning */
    width: auto; /* Auto width */
    padding: 0;
    margin: 0 auto; 
    text-align: center; /* Center align text */
  }

  #locations-map h1 {
    font-size: 1.5rem; /* Reduce font size */
    text-align: center; /* Center align the text */
    padding: 0;
    margin: 0;
  }
}
.cityWelcome {
  box-sizing: border-box;
  background: hsl(var(--primaryColor));
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 80vw;
}
.franchise-icons {
  display: flex;
  justify-content: center;
  flex-direction: row;
 margin: 10px;
}
.cityWelcome img {
  margin: 10px;
}
.welcomeButtons {
  width: 50%;
  margin: 0 auto;
}
.cityWelcome h1 {
  text-align: center;
  font-size: 4rem;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
.cityWelcome {
  width: 90vw;
  margin-top: 180px;
}
.welcomeButtons {
  width: 90%;
  margin: 0 auto;
}
.cityWelcome img {
  margin: 10px;
}
.cityWelcome h1 {
  text-align: center;
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.franchise-centered {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.franchise-icons {
  display: flex;
  justify-content: center;
  flex-direction: row;
 padding: 10px;
}

.franchise-centered {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.franchise-icons,
.franchise-centered {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
}

/*-------------------------*/
.franchise-custom {
  box-sizing: border-box;
  margin: 0 auto;
  width: 80vw;
}
@media screen and (max-width: 768px) {
  .franchise-custom {
    width: 90vw;
  }
}
/*-----realtor specific-----*/
.grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;
}
.realtorWelcome {
  box-sizing: border-box;
  background: hsl(var(--primaryColor));
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 80vw;
  background: linear-gradient(135deg, hsla(var(--primaryColor), 1) 0%, hsla(var(--primaryColor), 0.6) 100%), url(https://network.2percentrealty.ca/media/assets/suburban_sunset.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.realtorImage {
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  margin-bottom: 20px;
}
.image-container {
    position: relative;
}

.background-image {
    width: 100%;
}

.overlay-badge {
    box-sizing: border-box;
    position: absolute;
    bottom: 40px;
    left: 20px;
    width: 50%;
}
.realtorWelcome h1, .realtorWelcome h2, .realtorWelcome p .realtorWelcome a {
  color: white;
}
.realtorWelcome h1 {
  margin-bottom: 0;
}
.realtorWelcome a:visited {
  color: white;
}
.realtorWelcome p {
  color: white;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .grid-container {
        grid-template-columns: 1fr;
    }
    
  .realtorWelcome {
  width: 90vw;
  margin-top: 125px;
}
}
/* Header
----------------------------------------------- */

    
a.button.contact {
	width: 120px;
	margin: 0 auto;
	position: relative;
	right: auto;
	font-size: 0.8em;
	height: 25px;
	line-height: 25px;
	padding: 3px 5px;
	}
  @media handheld, only screen and (max-width: 1023px) {
/* Global
----------------------------------------------- */
.sec50 {
	grid-template-columns: 1fr;
	}

/* Header
----------------------------------------------- */
.headerGrid {
  	grid-template-areas: 
    	"headLogo contact nav";
	}