/*
Theme Name: Ernest & Cooper Plain
Description: Minimal hand-coded theme for Ernest & Cooper Realty, ported directly from the original ernest-cooper.com static site. No page builder.
Author: Alvaro Castillo
Version: 1.0
*/

* {
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;
object-fit: cover;
}

.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: 300px;
height: 160px;
object-fit: cover;
display: block;
}

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

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

/* stats block (added on top of original design) */
.statsblock {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
margin: 40px 0;
text-align: center;
}
.statsblock .stat-num {
font-size: 2.2rem;
font-weight: bold;
color: #c0392b;
}
.statsblock .stat-label {
font-size: .9rem;
letter-spacing: .05em;
text-transform: uppercase;
color: #555;
}

footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 25px 15px;
background-color: white;
box-shadow: 0px -4px 10px rgb(50 50 50 / 27%);
text-align: center;
}

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

.site-footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 15px 0;
}
.site-footer-nav a {
color: black;
}
.site-footer-meta {
color: #555;
font-size: .85rem;
margin: 5px 0;
}
.site-footer-meta a {
color: #555;
}
.site-footer-meta a:hover {
color: #c0392b;
text-decoration: underline;
}

/* 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 {
width: 100%;
padding: 40px 5%;
}

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

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

/* 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) {
.agent1 p, .agent2 p {
font-size: .85rem;
}

.details p {
color: black;
}

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

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

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

/* body copy sections (added on top of original design, matches its fonts/colors) */
.bodycopy {
padding: 60px 8% 20px;
max-width: 900px;
margin: 0 auto;
color: #222;
}
.bodycopy h1 {
color: #222;
font-family: 'Italiana', serif;
font-size: 2.2rem;
margin-bottom: 20px;
text-align: left;
}
.bodycopy p {
color: #333;
font-size: 1rem;
line-height: 1.7;
margin-bottom: 18px;
text-align: left;
}
.gettouch {
text-align: center;
padding: 20px 8% 60px;
}
.gettouch h3 {
font-family: 'Italiana', serif;
font-size: 1.8rem;
margin-bottom: 20px;
color: #222;
}

/* WPForms visual match to the original contact form styling */
.possiblelead {
padding: 0 5% 40px;
}
.wpforms-container {
max-width: 336px;
margin: 0 auto;
}
.wpforms-container label {
color: #222;
font-weight: 400;
}
.wpforms-container input[type=text],
.wpforms-container input[type=tel],
.wpforms-container input[type=email],
.wpforms-container textarea {
width: 100%;
border: solid .5px black;
border-radius: 5px;
padding: 5px;
margin-top: 5px;
color: #222;
}
.wpforms-container .wpforms-field {
margin-top: 20px;
}
.wpforms-container button[type=submit] {
width: 100px;
margin: 30px auto 0;
display: block;
color: #000;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 0px -4px 10px rgb(50 50 50 / 27%);
padding: 8px 0;
cursor: pointer;
}
.wpforms-container .wpforms-field-description,
.wpforms-container .wpforms-field-label {
text-align: left;
}