/*Colours
Red
	#bf2e32
	rgba(191,46,50,1)

Grey
	#c1c0bf
	rgba(193,192,191,1)
*/

/*fluidFont*/
html {
    font-size: 16px;
    font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1900 - 400));
}

h1 {
    font-size: 1.728rem;
}

h2 {
    font-size: 1.44rem;
}

h3 {
    font-size: 1.2rem;
}

h4, p {
    font-size: 1rem;
}

h5 {
    font-size: 0.833rem;
}

h6 {
    font-size: 0.694rem;
}


body {
    background: #000;
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}


@media (max-width:991px) {
    .pullCenter {
        text-align: center !important;
    }

    .pullLeft {
        text-align: left !important;
    }
}


/*Wrap*/
.wrap {
    margin: 5rem 0;
}


/*Header*/
.navbar {
    background: #000;
    border-bottom: solid 1px #fff;
}

    .navbar.navHome {
        background: none;
        border: none;
        transition: all.35s;
    }

.hiddenclass {
    display: none;
}

@media (max-width:768px) {
    .navbar.navHome {
        background: #000;
        border-bottom: solid 1px #fff;
    }
	.navbar-nav, .dropdown-menu {
		font-size:1.2rem;
	}
}

.navbar.navHome.navScrolled {
    background: #000;
    border-bottom: solid 1px #fff;
    transition: all.35s;
}

.navbar-brand img {
    max-width: 150px;
}

.navbar-nav {
    background: rgba(0,0,0,.5);
}


/*Footer*/
footer {
    background: #bf2e32;
    color: #fff;
    padding: 1rem 0;
}


.stdBtn {
    display: inline-block;
    background: #fff;
    padding: 1rem 2rem;
    margin: 1rem 0;
    border: solid 2px #aaa;
    font-weight: bold;
    color: #aaa;
    transition: all.35s;
}

    .stdBtn:hover {
        text-decoration: none;
        color: #bf2e32;
        border-color: #bf2e32;
        transition: all.35s;
    }

.stdLink {
    color: #fff;
}

    .stdLink:hover {
        color: #bf2e32;
    }

/*Index*/
.qlWrap {
    position: relative;
    width: 100%;
    height: 80vh;
    background: #000;
}

    .qlWrap .swiper-slide.slide1 {
        background: url('../img/banner/1.jpg') center center / cover no-repeat;
    }

    .qlWrap .swiper-slide.slide2 {
        background: url('../img/banner/2.jpg') center center / cover no-repeat;
    }

    .qlWrap .swiper-slide.slide3 {
        background: url('../img/banner/5.jpg') center center / cover no-repeat;
    }

.qlItem {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
}

    .qlItem img {
        height: 100%;
        width: auto;
    }

@media (max-width:768px) {
    .qlItem img {
        display: none;
    }
}

.qLink {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    flex: 1 1 auto;
    color: #fff;
}


.qLinkInner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.qLink a {
    color: #fff;
    border: solid .4rem #fff;
    padding: 1rem 5rem;
    font-size: 3rem;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 1px 1px 2px #000;
    transition: all .35s;
}

    .qLink a:hover {
        transform: scale(1.05);
        transition: all .35s;
    }

.qLink i {
    font-size: 3rem;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    margin-right: 5rem;
}

blockquote {
    position: relative;
    color: #c1c0bf;
    padding: 2rem 0;
    text-align: center;
    font-size: 3rem;
}

    blockquote::before, blockquote::after {
        content: "";
        position: absolute;
        left: 25%;
        width: 50%;
        height: 2px;
        background: #c1c0bf;
    }

    blockquote::before {
        top: 0;
    }

    blockquote::after {
        bottom: 0;
    }

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

    .embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

@media (max-width:991px) {
    .collapseMargin {
        margin-top: 5rem;
    }
}


/*Search*/
.propLink {
    display: block;
    margin-bottom: 1.5rem;
}

    .propLink:last-child {
        margin-bottom: 0;
    }

    .propLink:hover {
        text-decoration: none;
    }

.imageWrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: #aaa;
    transition: all .35s;
}

    .imageWrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.25);
        z-index: 1;
        opacity: 0;
        transition: all .35s;
    }

    .imageWrap::after {
        content: "\f105";
        font-family: fontAwesome;
        font-size: 10rem;
        color: #bf2e32;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        opacity: 0;
        transition: all .35s;
    }

.propLink:hover .imageWrap {
    background: #bf2e32;
    transition: all .35s;
}

    .propLink:hover .imageWrap::before, .propLink:hover .imageWrap::after {
        opacity: 1;
        transition: all .35s;
    }

.propLink img {
    width: 100%;
    height: auto;
    transition: all .35s;
}

.propLink:hover img {
    transform: scale(1.05);
    transition: all .35s;
}

.propLinkDetails {
    display: flex;
    flex-flow: column;
}

    .propLinkDetails > div {
        flex: 1 1 auto;
    }

.propLinkTop {
    flex-grow: 0 !important;
    padding: .5rem 1rem;
    color: #fff;
    /* background:#c1c0bf; */
    background: #aaa;
    transition: all .35s;
}

.propLink:hover .propLinkTop {
    background: #bf2e32;
    transition: all .35s;
}

.propLink:hover .propLinkBottom {
    border-color: #bf2e32;
    transition: all .35s;
}

.propLinkTop h2 {
    margin: 0;
}

.propLinkBottom {
    background: #fff;
    color: #000;
    padding: .5rem 1rem;
    border: solid 2px #aaa;
    border-width: 0 5px 5px 0;
    transition: all .35s;
}

.propAttributes span {
    white-space: nowrap;
}

.propAttributes i {
    margin-right: 1rem;
    color: #bf2e32;
}


/*Property*/
.propImg {
    margin-bottom: 10px;
}

    .propImg img {
        width: 100%;
        height: auto;
    }

    .propImg .swiper-slide:not(.swiper-slide-active) img {
        opacity: .5;
    }

.propertyDetails {
    background: #fff;
    color: #000;
    padding: 2rem 4rem;
}

.propAgent {
    background: #aaa;
}

@media (max-width:992px) {
    .propAgent {
        margin-top: 10px;
    }

        .propAgent img {
            max-width: 300px;
        }
}

.propAgent img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 360px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
}

.propAgentInner {
    padding: 1rem 2rem;
}

@media (min-width:992px) {
    .reducePadding > div:first-child {
        padding-right: 5px;
    }

    .reducePadding > div:last-child {
        padding-left: 5px;
    }
}

.propertyDetails .propAttributes {
    display: inline-block;
    font-size: 1.44rem;
    margin: 1rem 0;
}

.propMap {
    margin-top: 10px;
}

.propTools {
    padding: 2rem;
    list-style: none;
    margin: 0;
}

    .propTools li:not(:last-child) {
        border-bottom: solid 1px #fff;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }

.propEnquire {
    background: #aaa;
    padding: 1rem 2rem;
}

    .propEnquire input, .propEnquire textarea {
        width: 100%;
        padding: .5rem;
        margin: .5rem 0;
    }


/*Staff*/
.staffLink {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 150%;
    overflow: hidden;
    margin-bottom: 30px;
}

    .staffLink::before {
        content: "View More \f105";
        color: #fff;
        font-family: "fontAwesome", "Open Sans", sans-serif;
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 1rem;
        width: 100%;
        height: 10%;
        opacity: 0;
        transition: all .35s;
    }

    .staffLink::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(to top, rgba(191,46,50,1) 50%, transparent);
        opacity: 0;
        transition: all .35s;
    }

    .staffLink span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(191,46,50,.5);
        transform: translateY(calc(100% - 4.5rem));
        transition: all .5s;
        color: #fff;
        padding: .5rem 1rem;
    }

    .staffLink:hover span {
        transform: translateY(0);
        background: rgba(191,46,50,.8);
        transition: all .5s;
    }

    .staffLink:hover::after, .staffLink:hover::before {
        opacity: 1;
        transition: all .35s;
    }


/*Agent*/
.swiperControls {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin: 2rem 0 1rem;
}

    .swiperControls > * {
        cursor: pointer;
        border: solid 1px #c1c0bf;
        color: #c1c0bf;
        border-width: 2px 0;
        padding: .5rem;
        transition: all .5s;
    }

    .swiperControls .active {
        color: #bf2e32;
        border-color: #bf2e32;
        transition: all .5s;
    }

.testimonials {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .testimonials > li {
        background: #fff;
        color: #000;
        padding: 1rem 2rem;
    }

        .testimonials > li:not(:last-child) {
            margin-bottom: 10px;
        }

        .testimonials > li > * {
            margin-bottom: 0;
        }

@media (max-width:767px) {
    .hiddenclass {
        display: block;
    }
}

#ContactMap, #LocationMap {
    width: 100%;
    height: 300px;
}
@media (max-width:767px) {
    .cmsContent img{
        width:100%!important;
        height:auto!important;
    }
}