/* GENERAL SITE SETTINGS */
 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

 }

 html,
 body {
     background-color: #dfe2e2;
     color: black;
     font-family: 'Lato', 'Arial', sans-serif;
     font-weight: 300;
     font-size: 20px;
     text-rendering: optimizeLegibility;
     overflow-x: hidden;
 }

 .clearfix {zoom: 1;}
 .clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

 /* NAVIGATION BAR */

.navbar-nav a:link,
.navbar-nav a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}

.navbar-nav a:hover,
.navbar-nav a:active {
    border-bottom: 2px solid #A1D6E2;
}
.navbar-brand {
    font-family: 'Great Vibes', cursive;
    color: whitesmoke;
    font-size: 42px;
    transform: scale(1, 1.2);
 }    

 .datetime{
     display: block;
     font-family: 'Lato', 'Arial', sans-serif;
     font-weight: 300;
     font-size: 15px;
     margin-left: 15px;
 }
 
 /* MAIN PAGE */

 #hero-main {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/new-york-city.jpg');
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/new-york-city.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
    max-width: 100%;
 }

 /*PROPERTIES PAGE */

#hero-listings{
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/condominium-690086_1280.jpg');
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/condominium-690086_1280.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    object-fit: contain;
    max-width: 100%;
    
 }

 .card-deck {
     margin-top: 80px;
     max-width: 80%;
     margin-left: auto;
     margin-right: auto;
     font-family: 'Lato', Arial, Helvetica, sans-serif;
   
 }

 .property-type {
     background-color: #1995ad;
     color: #F1F1F2;
     text-align: center;
     text-transform: uppercase;
 }

 .property-type>h4 {
     font-size: 24px;
     font-weight: bolder;
 }

 .card-body>h4,
 .card-body>h3,
 .card-body>.card-text {
     font-size: 18px;
     text-align: left;
 }

.price {font-weight: bold;}

.details-btn{ background-color: #A1D6E2;}
.details-btn:hover{background-color: #F1F1F2;}
.icons { 
    margin-top: -25px;
    text-align: right;}
.icons>p { 
    display: inline;
    padding-left: 10px;
}
/* PROPERTY LISTING DETAILS MODAL */

.product-name,
.description {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 22px;
}


.price-text {font-size: 20px;}

.summary {
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
}

.item {padding-right: 8px;}
.features {
    font-size: 16px;
    padding-bottom: 10px;

}

table {
    display: table;
    width: 100%;
    border-bottom: 1px solid #bcbcbc;
    font-size: 18px;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td{
    border-bottom: 1px solid #bcbcbc;
    padding-top: 5px;
    padding-bottom: 5px;
}

.last-child {text-align: right;}
.close-modal {float: right;}


/*TOOLS PAGE */
#hero-tools{
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url("../img/tools-page-header.jpg");
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url("../img/tools-page-header.jpg");
    background-size: cover;
    background-position: center;
    height: 100vh;
    
 }
 #maindiv {
     display: block;
 }
 .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
 }

 .calculator {
     clear: both;
     overflow: hidden;
 }
 .site-padding{
     padding-left: 50px;
     padding-right: 50px;
 }

 .region {
     position: relative;
     margin: 0 auto;
     max-width: 560px;
 }
 .main-div {
     max-height: 860px;
}

.calc-box{
    background: #F1F1F2;
    width: 413px;
    height: 413px;
    padding-top: 30px;
    margin-top: -20px;
    margin-bottom: 60px;
}

.calc-box>table>tbody>tr>td>label

 {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold; 
}

.calc-box>table>tbody>tr>td>span {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-right: 20px;
    font-weight: bold;
}
 #divCalculator .wrapper .row {
     background: #F1F1F2;
     display: block;
     margin: 0 1.5% 40px;
     padding: 0 0 40px;
     width: 30%;

 }

 #calcTitle {
    font-size: 18px;
    color: #F1F1F2;
    background: #1995ad;
    text-align: center;
    padding: 30px;
    width: 70%;
    margin-top: 10%;

 }

 #divCalculator>.wrapper>.row>.calc-box {
     padding: 1em;
 }

 #divCalculator>.wrapper>.row>table {
    border: 0;
    margin: 0;
    width: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

#divCalculator>.wrapper>.row>table>tr {
    width: 100%;
    border-bottom: 1px solid #b2c2cb;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

#submit-calculator,
#clear-calculator {
    float: right;
    margin-top: 15px;
    margin: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    outline:none;
}

#submit-calculator:hover,
#clear-calculator:hover {
    color: #A1D6E2;
    border: none;
}



 
/* CONTACT US PAGE */

#hero-contact {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/contact-us-page-header.jpg');
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('../img/contact-us-page-header.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    object-fit: contain;
    max-width: 100%;
    
 }

.hero-title {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 280px;
    padding-left: 60px;
     font-family: 'Lato',Arial, Helvetica, sans-serif;
     font-size: 66px;
     color: #A1D6E2;
     text-transform: uppercase;
     letter-spacing: 2px;
     line-height: 1.5rem;
 }

 .hero-byline {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 380px;
    padding-left: 60px;
    font-family: 'Lato',Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #BCBABE;
 }
.contact-section, 
.contact {
    font-family: 'Lato',Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #1995ad;
    color: #F1F1F2;
    height: 474px;
}


.contact-card-title {
    text-align: center;
    color: #F1F1F2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 30px;
}
.list-unstyled {
    margin-top: 30px;
    font-size: 16px;
}

.fas {
    color: #BCBABE;
}


#submit-contact-form,
#clear-contact-form {
    float: right;
    margin-top: 15px;
    margin: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    outline:none;
}

#submit-contact-form:hover,
#clear-contact-form:hover {
    color: #A1D6E2;
}

input[type="text"]:focus {color: #1995ad; }
input[type="email"]:focus {color: #1995ad; }

.fab:hover {
    cursor: pointer;
    color:  #A1D6E2;
}

/*FOOTER*/

.page-footer {
    background-color: #A1D6E2;
    height: 70vh;
}

.footer-container,
.footer-hr,
.footer-media{
    margin-top: 40px;
}
h5{
    color: #1995ad;
}

#aboutCompany
{
    color: #F1F1F2;
    font-size: 25px;
}

.footer-list>li>a {
    color: #F1F1F2;
    font-size: 18px;
}

.footer-list>li>a:hover,
.footer-media>li>a>i:hover {
    color:#BCBABE;
    text-decoration: none;
}

.footer-media>li>a>i {
    color: #F1F1F2;
    font-size: 40px;
}