/******************************************************************
    Template Name: JM Carganilla
    Description: Southforbes Community Microsite
    Author: JM Carganilla
    Author URI: 
    Version: 1.0
    Created: @ Cathayland Inc.
******************************************************************/


/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

@font-face {
   font-family: 'SF-New-Republic';
   src: url('fonts/SF New Republic.ttf') format('truetype');
}
@font-face {
   font-family: 'SF-New-Republic-Bold';
   src: url('fonts/SF New Republic Bold.ttf') format('truetype');
}
@font-face {
   font-family: 'Rage-Italic-Regular';
   src: url('fonts/RageItalicRegular.ttf') format('truetype');
}
@font-face {
   font-family: 'ITC-Bold';
   src: url('fonts/ITCAvantGardeStd-Bold.otf') format('truetype');
}

html {
    /*overflow: hidden !important;*/
    height: auto;
}

body {
    color:#484647;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
    height: auto;
    width: 100%;
}

h1,p, a,{
    font-family: 'Montserrat', 'sans-serif';
    color: #000;
}

b{
    color:#000;
    text-shadow: none !important;
}

.tabcontent {
    display: none;
}
.tab-wrapper {
    margin-top: 1em;
}

.banner-content-wrapper {
    display: none;
    margin: -1em auto;
    opacity: .7;

}
.banner-content-wrapper .title {
    text-align: center;
    padding: 0 1em;
    font-family: "Rage-Italic-Regular";
    font-size: 45px;
    font-weight: 300;
    color: #156a63;
    line-height: 50px;
}
.banner-content-wrapper .description {
    margin-top: 1em;
    padding: 0 3em;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
    font-family: "Montserrat";
    color: #000;
    font-style: italic;
  

}
.banner-content-wrapper {
    position: absolute;
    top: 50em;
    display: inline-block;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    opacity: .8;
    padding: 1em;
}
.banner-content-wrapper .lot-size {
    margin-top: 1em;
    text-align: center;
    line-height: 15px;
    font-size: 10px;
    font-family: "Montserrat";
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
}
.banner-content-wrapper .address{
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    font-family: "Montserrat";
    color: #000;
    margin-top: -5em;

}
.banner-content-wrapper .know-more {
    margin-top: -1em;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    font-family: "Montserrat";
    color: #000;
    padding-bottom:  7em;

}

.community-wrapper {
    display: inline-flex;
    justify-content: center;

}
.container-menu  .tablinks img {
    width: 100%;
    height: auto;
    
}

.container-contact-form {
    position: absolute;
    text-transform: uppercase;
    top: 5em;
    right: 5em;
    width: 395px;
    padding: 1em 2em;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    border-radius: 10px;
}
.form-title {
    font-family: "Montserrat";
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #fff;


}

.input-text {
   /* background-color: #fff;*/
    border: 1px solid #cfbf02;
    /*text-transform: uppercase;*/
    padding: 2em 1.5em;
}
.input-text::placeholder {
    color: #000 !important;
   
}

.btn-send {
    display: block;
    width: 150px;
    padding: 0.5em 2em;
    background-color: #156a63;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    margin: 0 auto;
    border: none !important;
}
.btn-send:hover {
    background-color: #A59700;
    color: #fff;
}
.separator {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    background-color: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    position:relative; 
    color: #156A63;
}
.footer-logo {
    display: block;
    width:  20%;
    display: block;
    margin: 0 auto;
}

.active {
    display: block !important;
}
/*.bar{
    background-color: #fff;
    border: 2px solid  #A59700;
    display: block;
    width: 5%;
    position: absolute;
    left: 50%;
    right: 50%;
}*/
/*====================================IMAGE OVERLAY=========================================*/
.tabHolder{
  position: relative;
  width: 100%;

}
.image {
  display: block;
  height: auto;
  width: 100%;
}
.tablinks {
    padding: 1em;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #fff;
}

.hover {
  opacity: 1 !important;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.text img {
    width: 100%;
}

.footer div{
    background-color: #fff;
    display: flex;
    justify-content: center;
}

/*Addational Custom CSS*/
.list-table > li {display: table-cell; }
textarea {resize: none; }
input {margin-bottom: 15px; }
/*---------------------------------standard css------------------------------------------*/

a,a:hover {text-decoration: none !important; }

.bg-white:{background-color: #fff;}
.margin1em {margin:1em; }
.nopadding {padding: 0px; }
.nopaddingbot {padding-bottom: 0px; }
.nopaddingtop {padding-top: 0px; }
.nomarginbot {margin-bottom: 0px; }
.nomargintop {margin-top: 0px; }
.paddingLR0{padding-left: 0; padding-right: 0; }
/*paddings*/
.paddingtop1em {padding-top: 1em; }
.paddingtop2em {padding-top: 2em; }
.paddingtop3em {padding-top: 3em; }
.paddingtop4em {padding-top: 4em; }
.paddingtop5em {padding-top: 5em; }
.paddingtop7em {padding-top: 7em; }
.paddingtop14em {padding-top: 14em; }
.paddingbot1em {padding-bottom: 1em; }
.paddingbot2em {padding-bottom: 2em; }
.paddingbot3em {padding-bottom: 3em; }
.paddingbot4em {padding-bottom: 4em; }
.paddingbot5em {padding-bottom: 5em; }
.paddingbot7em {padding-bottom: 7em; }
.padding5em {padding: 5em; }
.padding3em {padding: 3em; }
.padding1em {padding: 1em; }
/*margins*/
.nomargin {margin:0px; }
.margintop1em {margin-top: 1em; }
.margintop2em {margin-top: 2em; }
.margintop3em {margin-top: 3em; }
.margintop4em {margin-top: 4em; }
.margintop5em {margin-top: 5em; }
.margintop6em {margin-top: 6em; }
.margintop7em {margin-top: 7em; }
.marginbot1em {margin-bottom: 1em; }
.marginbot2em {margin-bottom: 2em; }
.marginbot3em {margin-bottom: 3em; }
.marginbot4em {margin-bottom: 4em; }
.marginbot5em {margin-bottom: 5em; }
.marginbot6em {margin-bottom: 6em; }
.marginbot7em {margin-bottom: 7em; }

.borderbot3em {border-bottom: 3em; }
.lh15 {line-height: 15px; }
.lh25 {line-height: 25px; }

.col-right {float:right; margin: 0 auto; }
.col-center{float: none; margin-right: auto; margin-left: auto; }
.allcaps {text-transform:   uppercase; }

.light{font-weight: 300; }
.regular {font-weight: 400; }
.medium {font-weight: 500; }
.semi-bold{font-weight: 600; }
.bold {font-weight: 700; }
.extra-bold {font-weight: 800; }
.black {font-weight: 900; }
.left {float: left; }
.right {float: right; }
/*font-size*/
.fs12 {font-size: 12px; }
.fs14 {font-size: 14px; }
.fs16 {font-size: 16px; }
.fs18 {font-size: 18px; }
.fs20 {font-size: 20px; }
.fs22 {font-size: 22px; }
.fs24 {font-size: 24px; }
.fs26 {font-size: 26px; }
.fs28 {font-size: 28px; }
.fs30 {font-size: 30px; }
.fs32 {font-size: 32px; }
.fs34 {font-size: 34px; }
.fs36 {font-size: 36px; }
.fs40 {font-size: 40px; }
.fs48 {font-size: 48px; }
/*text-align*/
.text-center {text-align: center; }
.text-left {text-align: left; }
.text-right {text-align: right; }
.text-justify {text-align: justify; }
/*text-color*/
.color-white {color: #fff; }
.color-lightgray {color:#ABABAB; }
.color-black{color: #484647; }
.color-orange {color: #FBAA1D; }
.e-center{margin-left: auto; margin-right: auto; } 
/*end of standard css*/

/*jPages*/
.holder { margin: 15px 0;text-align: center; }
.holder a {font-size: 12px !important; cursor: pointer; margin: 0 5px; color: #166862 !important;}
.holder a:hover {background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-previous { margin-right: 15px; }
.holder a.jp-previous:hover{background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-next:hover {background-color: transparent !important; font-weight:700 !important; color: #bda916 !important;}
.holder a.jp-next { margin-left: 15px; }
.holder a.jp-current, a.jp-current:hover {color: #bda916 !important; font-weight: 700 !important; }
.holder a.jp-disabled, a.jp-disabled:hover {color: #bbb; }
.holder a.jp-current, a.jp-current:hover,
.holder a.jp-disabled, a.jp-disabled:hover {cursor: default; background: none; }
.holder span { margin: 0 5px; }
#itemContainer { min-height: auto !important; }

input:invalid {
    background-color: #fff !important;
}

.checkbox label {
    color: #f5deb3;
    display: grid;
    align-items: center;
}
@media only screen and (max-width: 991px){
    .footer-logo {
        width: 40%;
    }
}
@media only screen and (max-width: 767px){
    .container-contact-form {
        position: relative;
        text-transform: uppercase;
        top: 0;
        right: 0;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        background-color: #fff;
        display: inline-block;
    }
    .banner-content-wrapper {
        display: none;
        margin: 1em auto;
        opacity: .7;
        position: relative;
        top: 0;
        padding: 0;
    }
    .separator {
        margin-top: 0;
    }
    .banner-content-wrapper .title {
        padding: 0;
    }
    .form-title {
        color: #000 !important;
    }
    .checkbox label {
        color: #a8a39a !important;
        display: grid;
        align-items: center;
    }
    .footer-logo {
        width: 65%;
    }
}