* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	border: 0;
}

nav {
	display: flex;
	justify-content: space-between;
	padding-top: 30px;
}

.bar a:hover {
	font-weight: bolder;
	color: black;
	background-color: white;
	padding: 5px 15px;
	border-radius: 20px;
}

#logo {
	width: 125px;
	margin-left: 60px;
	margin-top: 15px;
}

.andsign {
	width: 75px;
	margin: 0;
	padding: 0;
}

.bar {
	display: flex;
	list-style: none;
	justify-content: flex-end;
	color: white;
	width: 70%;
	align-items: center;

	margin-top: 15px;
	gap: 40px;
}

a {
	color: white;
	text-decoration: none;
}

.hamburger, .phoneicon {
	cursor: pointer;
    display: none;
}

.lines {
	width: 30px;
    height: 2px;
    margin: 6px 0;
    background: #fff;
}

/* video background */
#background-video {
	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}

.firstlook {
	overflow: hidden;
	position: relative;
	height: 100vh;
	width: 100%;
	background-color: rgba(0, 0, 0, .2);
}
  
  /* page content */

.mainmessage {
	display: flex;
	flex-direction: column;
	margin: auto;
	position: absolute;
	top: 70vh;
	transform: translatey(-50%);
	width: 100%;
	padding: 0 8%;
}

h1, h2 {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	text-align: center;
}
  
h1 {
	font-size: 3rem;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 300;
}

.themessage {
	margin-bottom: 5px;
	font-weight: 400;
	font-size: 2rem;
	margin: 15px;
	padding: 0;

}

.realty {
	font-family: 'Italiana', serif;
	font-size: 1.5rem;
	position: relative;
	top: 63px;
	right: 77px;
}

h2 { 
	font-size: 1rem;
	font-weight: 300;
}
  
.thecompany {
	font-family: 'Italiana', serif;
	font-size: 4rem;
	position: absolute;
	top: 35vh;
	left: 40px;
	width: 100%;
	transform: translatey(-50%);
	display: flex;
	justify-content: center;
}

/* contact page background */

.contactpage {
	background-image: url(../Livingroom.jpg);
	background-size: cover;
	min-height: 50vh;
	padding-bottom: 20px;
	width: 100%;
	box-shadow: 0px 9px 10px rgb(50 50 50 / 27%);
}

.contact, .team, .soldlistings, .ourservices, .privacypolicy {
	font-family: 'Italiana', serif;
	font-size: 4rem;
	margin-top: 20px;
}

.skilledagents, .meetagents, .servicedescription, .sellingpoint {
	font-size: 1.5rem;
	font-weight: 300;
}

.allofit {
	width: 100%;
	justify-content: space-evenly;
	margin-top: 5%;
}

form {
	text-align: center;
}

.possiblelead {
	margin: auto;
}

.possiblelead h3 {
	font-weight: bold;
	font-size: 1.5rem;
}

input, label, textarea, .fullname {
	border-radius: 5px;
	margin-top: 5px;
}

input, textarea {
	border: solid .5px black;
	padding: 5px;
}
.inquiry, .email, .phone, .fullname {
	margin-top: 20px;
}

.email input, .phone input, .fullname input {
	width: 336px;
}

.disclaimed {
	display: flex;
	justify-content: center;
	text-align: justify;
	font-size: .75rem;
}
.disclaimer {
	width: 280px;
	margin: 10px;

}

#disclaimer {
	align-self: flex-start;
	margin-top: 10px;
}

.disclaimer a {
	color: blue;
}

.inquiry textarea {
	width: 336px;
	height: 125px;
	resize: none;
}


.submit {
	width: 100px;
	margin: 30px;
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	box-shadow: 0px -4px 10px rgb(50 50 50 / 27%);
	;
}

.location {
	text-align: center;
	font-family: 'Roboto';
}

.location h3 {
	margin: 40px 0 20px;
	font-size: 2rem;
}

.address h3 {
	margin-bottom: 8px;
	font-size: 1.5rem;
}

.address {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	font-size: 1rem;
	margin-bottom: 5%;
	font-family: 'Roboto';
}

.street p, .streettwo p {
	margin: 10%;
	font-size: 1.3rem;
	font-style: initial;
}

/* team page background */

.teampage {
	background-image: url(..//MeetTheTeam.jpg);
	background-size: cover;
	min-height: 50vh;
	padding-bottom: 20px;
	width: 100%;
	box-shadow: 0px 9px 10px rgb(50 50 50 / 27%);
}

.agent1, .agent2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.agent1 p, .agent2 p {
	width: 50%;
	align-self: center;
}

.agent2 {
	display: flex;
	flex-direction: row-reverse;
	background-color: ghostwhite;
}

.agent1 img, .agent2 img {
	margin-top: 5%;
	margin-bottom: 5%;
}

.allagents img {
	width: 350px;
	height: 500px;
}

.details {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	margin: 5% 0;
}

.details p {
	width: 70%;
	margin: 5%;
	font-family: 'Roboto', sans-serif;
	text-align: justify;
	text-align-last: center;
	line-height: 20px;
}

.details h2 {
	color: black;
	text-align: left;
	font-size: 2.5rem;
	font-family: 'Italiana', serif;
}

.BRE {
	color:  black;
}

.BRE a {
	color: black;
}
/* listings page background */

.container {
	overflow: hidden;
}

.listingspage {
	background-image: url(../soldlistings.jpg);
	background-size: cover;
	min-height: 50vh;
	padding-bottom: 20px;
	width: 100%;
	box-shadow: 0px 9px 10px rgb(50 50 50 / 27%);
}

.allhomes, .gallery {
	margin-top: 65px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.figure {
	margin: 20px;
}

.figure img {
	width: 500px;
	height: 280px;
	object-fit: cover;
}

.figcaption {
	font-size: 1rem;
	padding: 5px;
	text-align: center;
}

.figcaption h2 {
	font-size: 1.7rem;
	font-family: 'Italiana', serif;
	color: black;
	margin: 5px;
}

/*pagination styling background */

.gallery-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.gallery .gallery-items .item.show{
	animation: show .5s ease;
}

@keyframes show{
    0%{
    	opacity:0;
    	transform: scale(0.9);
    }
    100%{
    	opacity:1;
    	transform: scale(1);
    }
}

.gallery .pagination{
	width: 100%;
	float: left;
	padding:15px;
	text-align: center;
	margin-bottom: 30px;
}
.gallery .pagination div{
	display: inline-block;
	margin:0 10px;
}
.gallery .pagination .page{
	color:gray;
}
.gallery .pagination .prev,.gallery .pagination .next{
 color:#000;
 border:1px solid #000;
 border-radius: 20px;
 font-size:15px;
 padding:7px 15px;
 cursor: pointer;
 box-shadow: 0px -4px 10px rgb(50 50 50 / 27%);
}

.gallery .pagination .prev.disabled,
.gallery .pagination .next.disabled{
	border-color: gray;
	color:gray;
	pointer-events: none;
}


footer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 65px;
	background-color: white;
	box-shadow: 0px -4px 10px rgb(50 50 50 / 27%);
	;
}


.homefooter {
	position: absolute;
	bottom: 0;
}

.socialmedia img {
	width: 40px;
}
.callus a, .sendemail a {
	color: black;
	margin: auto 60px;
	font-style: initial;
}

/* services page background */

.servicespage {
	background-image: url(../Services.jpg);
	background-size: cover;
	min-height: 50vh;
	padding-bottom: 20px;
	width: 100%;
	box-shadow: 0px 9px 10px rgb(50 50 50 / 27%);
}

.theservices {
	height: 40vh;
	width: 100%;
}

.theservices h1 {
	color: black;
	font-size: 1.5rem;
}

.allwedo {
	display: flex;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	margin: 5%;
}

/* privacy page background */

.privacypage {
	background-image: url(../Privacy.jpg);
	background-size: cover;
	min-height: 50vh;
	padding-bottom: 20px;
	width: 100%;
	box-shadow: 0px 9px 10px rgb(50 50 50 / 27%);
}

.therules, .therules p, .therules span, .therules li  {
	margin: 5%;
}

.therules p, .therules span, .therules li {
	margin-top: 2%;
	margin-bottom: 2%;
}

/* These are for LinkedIn and Youtube */

.hide {
	display: none;
}

@media (min-height: 1080px) {
	.contactpage, .teampage, .listingspage, .servicespage {
		background-size: cover;
		height: 40vh;
		width: 100%;
  }

  	.servicespage {
		height: 50vh;
	}
}

@media (max-width: 820px) { 
	.hamburger {
		display: block;
		margin-top: 40px;
		margin-right: 40px;
		z-index: 1;
	}


	.phoneicon {
		display: block;
		width: 25px;
		margin-top: 40px;
	}

	.smallScreen {
		display: flex;
		gap: 20px;
	}

	#logo {
		margin-left: 20px;
		margin-top: 0px;
		z-index: 2;
		width: 110px;
	}
	nav {
		padding-top: 20px;
	}
	.bar {
		margin: 0;
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
        padding-top: 200px;
        transition: 0.3s;
        text-align: center;
        z-index: -1;
	}

	li a {
		border-bottom: 1px solid white;
	}

	.bar.active {
		top: 0px;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.callus {
		display: none;
	}

	.sendemail a {
		margin-right: 20px;
		margin-left: 0px;
		padding: 0 15px;
	}

	.thecompany, .contact, .team, .ourservices, .soldlistings {
		font-size: 2.5rem;
		left: 30px;
		margin: 50px 0 0;
	}

	.themessage {
		font-size: 1.5rem;
	}

	.skilledagents, .skilledagents, .meetagents, .servicedescription, .sellingpoint {
		font-size: 1.3rem;
		font-weight: 300;
		margin: 15px 40px;
	}

	.realty {
		font-size: 1.2rem;
		top: 38px;
		right: 60px;
	}

	.andsign {
		width: 53px;
	}
	
	.street p, .streettwo p {	
		font-size: 1rem;
	}

	.details p {
		color: black;
	}
}

@media (max-width: 544px) {
	.figure image {
		width: 50%;
	}

	.agent1 p, .agent2 p {
		font-size: .85rem;
	}
	
	.details p {
		color: black;
	}

	.allwedo {
		display: block;
		text-align: center;
	}

	.theservices {
		height: 100%;
	}
}

@media (max-width: 699px) {
	.details {
		width: 100%;
		color: black;
	}
	.details p {
		margin: 2%;
		color: black;
	}
}

a[href^=tel] {
	text-decoration:inherit;
	color: inherit;
 }