/*
 *
 * GENERAL
 * COLORS
 * BORDERS
 * HEADER
 * HOME
 * GRID with FILTERS
 * FOOTER
 *
*/

body {
    font-family: 'Raleway', sans-serif !important;
}

/******** GENERAL ********/
.h1, h1 {
    font-size: 2rem !important;
}
.h2, h2 {
    font-size: 1.75rem !important;
}
.h3, h3 {
    font-size: 1.5rem !important;
}
.h4, h4 {
    font-size: 1.25rem !important;
}
.h5, h5 {
    font-size: 1rem !important;
}
.h6, h6 {
    font-size: 1rem !important;
}

ul.residences {
    padding: 0;
    list-style: none;
}

iframe {
    border: none;
    width: 100%;
}

video {
    height: auto;
}

@media  screen and (min-width: 1200px) {
    .lg-max-width-600 {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (min-width: 1460px) {
    .container {
        max-width: 1400px !important;
    }
}

.img-mh-350 {
    max-height: 350px;
}


/******** COLORS ********/

/*
 * Taupe clair : #CEBCA5
 * Taupe foncé : #675F4F
 * Taupe foncé hover :rgba(96,96,93,.75)
*/

/*
 * Rouge  : #a48c65
 * Orange : #3c3c3b
 * Rose   : #e30062
*/

/* Header / Footer */
header a,
footer a {
    color: #000;
}
header a:hover,
footer a:hover {
    color: rgba(0,0,0,0.5);
}

/* home  */
.text-third {
    color: #b85c4a !important; /*d4a574*/
}
.text-dark-blue {
    color: #3c3c3b !important;
}
.text-light-blue {
    color: #a48c65 !important;
}

/* Content */
small a {
    color: #808080;
}
p a,
label a {
    color: #3c3c3b;
}
h1 a,
h2 a,
h3 a,
h4 a {
    color: #000;
}
small a:hover,
p a:hover,
label a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
    color: #a48c65;
    text-decoration: none;
}
.nav-pills .nav-link {
    color: #fff;
}
.nav-pills .nav-link:hover {
    background-color: #fff;
    color: #a48c65;
}

.border-red {
    border: 1px solid #a48c65;
}

/* Button */
.btn,
.nav-pills .nav-link {
    border-radius: 0 !important;
}
.nav-pills .nav-link.active {
    background-color: #a48c65 !important;
    border-color: #a48c65 !important;
    color: #fff !important;
}
.btn-primary {
    background-color: #3c3c3b !important;
    border-color: #3c3c3b !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: color-mix(in srgb, #3c3c3b, black 20%) !important;
    border-color: color-mix(in srgb, #3c3c3b, black 20%) !important;
    color: #fff !important;
}
.btn-red {
    background-color: #a48c65 !important;
    border-color: #a48c65 !important;
    color: #fff !important;
}
.btn-red:hover {
    /*background-color: #a48c65 !important;*/
    background-color: color-mix(in srgb, #a48c65, black 20%) !important;
    border-color: color-mix(in srgb, #a48c65, black 20%) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #b85c4a !important;
    border-color: #b85c4a !important;
    color: #fff !important;
}

.btn-secondary:hover {
    background-color: color-mix(in srgb, #b85c4a, black 20%) !important;
    border-color: color-mix(in srgb, #b85c4a, black 20%) !important;
    color: #fff !important;
}


/* Form */
.form-control:focus {
    border-color: #a48c65 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}
.dropdown-item:active {
    background-color: transparent !important;
}
.check-center {
    display: block;
    margin: 0 auto;
}


/* Background */
.bg-red {
    background-color: #a48c65;
}
.bg-grey {
    background-color: #B4B5B6;
}
.bg-light-grey {
    background-color: #ecebeb; /*#f7f5f5;*/
}
.bg-home {
    background-color: #a48c65;
    background-image: url(https://residences-tempologis.com/assets/img/home/4-home-576.jpg);
}
.social-block {
    background-color: #e30062;
    background: /*url('../img/pattern.png'),*/ -webkit-linear-gradient(135deg, #e30062 0%,#3c3c3b 50%,#a48c65 100%);
    background: /*url('../img/pattern.png'),*/ -o-linear-gradient(135deg, #e30062 0%, #3c3c3b 50%, #a48c65 100%);
    background: /*url('../img/pattern.png'),*/ -o-linear-gradient(135deg, #e30062 0%,#3c3c3b 50%,#a48c65 100%);
    background: /*url('../img/pattern.png'),*/ linear-gradient(-45deg, #e30062 0%,#3c3c3b 50%,#a48c65 100%);
}
.bg-at-fixed {
    background-attachment: fixed;
}
.bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-height {
    height: 250px;
}
@media screen and (min-width: 576px) {
    .bg-home {
        background-image: url(https://residences-tempologis.com/assets/img/home/4-home-768.jpg);
    }
}
@media screen and (min-width: 768px) {
    .bg-height {
        height: 325px;
    }
    .bg-home {
        background-image: url(https://residences-tempologis.com/assets/img/home/4-home-992.jpg);
    }
}
@media screen and (min-width: 992px) {
    .bg-height {
        height: 400px;
    }
    .bg-home {
        background-image: url(https://residences-tempologis.com/assets/img/home/4-home-1200.jpg);
    }
}
@media screen and (min-width: 1200px) {
    .bg-home {
        background-image: url(https://residences-tempologis.com/assets/img/home/4-home-1920.jpg);
    }
}

/****** Form resa home *******/
.input-group-text, input.form-control, select.form-control, .border-light-blue {
    border: 1px solid #a48c65 !important;
}
.resa-form {
    max-width: 90%;
    margin: 0 auto;
}
@media (min-width: 375px) {
    .resa-form {
        max-width: 80%;
        margin: 0 auto;
    }
}
@media (min-width: 576px) {
    .resa-form {
        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .resa-form {
        max-width: 90%;
    }
}
@media (min-width: 992px) {
    .resa-form {
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .resa-form {
        max-width: 1060px;
    }
}
.resa-form .input-group, .resa-submit {
    max-width: 95%;
    width: 100%;
}
@media (min-width: 576px) {
    .resa-form .input-group, .resa-submit {
        max-width: 45%;
    }
}
@media (min-width: 992px) {
    .resa-form .input-group, .resa-submit {
        max-width: 20%;
    }
}
.resa-form .input.form-control {
    border-radius: 0;
    border-left-width: 0 !important;
}
.resa-form .input-group-text {
    background-color: transparent !important;
    border-radius: 0;
    border-right-width: 0 !important;
}


/******** BORDERS ********/
/* Modal */
.modal-content {
    border: 0 !important;
    border-radius: 0 !important;
}
.modal-header {
    border-bottom: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.modal-footer {
    border-top: 0 !important;
}

.input-group-text,
.form-control {
    border-radius: 0 !important;
}

/* Header */
@media screen and (max-width: 991px) {
    header .dropdown-menu {
        border: 0 !important;
        background-color: transparent !important;
    }
}


/******** MODAL ********/
@media screen and (min-width: 992px) {
    .modal .modal-body .modal-body-text .two-column {
        column-count: 2;
        column-gap: 25px;
    }
}


/******** HEADER ********/
.navbar-brand img {
    width: 150px;
    height: 45px;
}

.navbar-nav .nav-item .nav-link {
     transition: border-bottom-color 0.5s;
     border-bottom: 2px solid transparent;
}
.navbar-nav .nav-item .nav-link-active,
.navbar-nav .nav-item .nav-link:hover {
     border-bottom-color: #a48c65;
     transition: border-bottom-color 0.5s;
}

.navbar .lang {
    opacity: 0.5;
}
.navbar .lang:hover,
.navbar .lang.active-lang {
    opacity: 1;
}
.navbar .lang:hover {
    cursor: pointer;
}

@media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        width: 100%;
    }
}
@media screen and (min-width: 768px) {
    .navbar-brand img {
        width: 200px;
        height: 61px;
    }
}


/******** HOME ********/
.carousel {
    max-height: 300px;
}
.carousel .carousel-item {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
}
.carousel .carousel-item .carousel-caption {
    text-shadow: 1px 1px 10px #000;
}
.carousel .carousel-item .carousel-caption h4 a {
    color: #fff;
}
.carousel-control-prev i,
.carousel-control-next i {
    color: #a48c65;
    font-size: 2rem;
}

@media screen and (max-width: 1449px) {
    #reservation .h2,
    #reservation h2 {
        font-size: 1.5rem !important;
    }
}

@media  screen and (min-width: 1200px) and (min-height: 850px) {
    .bg-home {
        height: calc(100vh - 152px);
        position: relative;
    }
    .bg-home > div:not(#modal) {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }
}
.form-resa-home {
    background-color: rgba(245,245,245,0.85);
    padding: 25px;
}
.nav-pills .nav-link {
    font-size: 1.25rem;
}
.counter {
    font-size: 2.75rem;
}

/* Actualités */
.item .item-description {
    padding: 1.25rem;
    border: 1px solid #a9a9a9;
}

.residence {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    position: relative;
    min-height: 250px !important;
    width: 100%;
}
.m-h-180 {min-height: 180px !important;}
.residence > .ease {
    background-color: rgba(0,0,0,.25);
    text-shadow: 1px 1px 10px #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    width: 100%;
    height: 250px;
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
    padding: 95px;
}
.residence > .ease:hover {
    background-color: rgba(0,0,0,.55);
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    transition: background-color 0.5s;
}


/******** GRID with FILTERS ********/
.filters,
.grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.filters li {
    padding: 10px;
    margin: 0 5px;
}
.filters .active,
.filters li:hover {
    cursor: pointer;
    background-color: #3c3c3b;
    color: #fff;
}
.filters li:hover {
    background-color: #a48c65;
}

.grid {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
	margin: 30px auto 0;
	padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.grid li {
	width: 100%;
    padding-bottom: 30px;
    text-align: center;
}

.grid li h4 {
	margin-top: 10px;
}

.grid li a,
.grid li img {
	outline: none;
	max-width: 100%;
}

@media screen and (min-width: 768px) {
	.grid li {
		width: 50%;
        padding-left: 2%;
        padding-right: 2%;
        text-align: left;
	}
}

@media screen and (min-width: 992px) {
	.grid li {
		width: 33%;
	}
    .grid.resa li {
        width: 50%;
    }
}


/******** RESERVATION ********/

.searchCriteria {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    width: 90%;
}
.searchCriteria li {
    list-style: none;
    padding: 1rem;
    width: 100%;
}
.searchCriteria li {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.searchCriteria li:last-of-type {
    border-bottom: 0 solid rgba(0,0,0,.1);
}

@media screen and (min-width: 992px) {
    .searchCriteria {
        width: 50%;
    }
    .searchCriteria li {
        width: 50%;
    }
    .searchCriteria li:nth-child(odd) {
        border-right: 1px solid rgba(0,0,0,.1);
    }
    .searchCriteria li:nth-last-child(2) {
        border-bottom: 0 solid rgba(0,0,0,.1);
    }
}

.appartment-list > div {
    max-width: 365px;
    margin: 0 auto;
}
.appartment-list > div:not(.active) {
    opacity: .66;
}
.appartment-list > div:hover {
    opacity: 1;
}


/******** FOOTER ********/
.social-block span {
    display: block;
}
@media screen and (min-width: 768px) {
    .social-block span {
        display: initial;
    }
}

footer ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
footer ul .fb,
footer ul .lkin {
    font-size: 1.25rem;
}
footer .ps {
    font-size: 0.85rem;
}
footer .ps:hover {
    color: #ea0000;
}
footer ul .fb:hover {
    color: #4267b2;
}
footer ul .lkin:hover {
    color: #0073b1;
}

/* Swiper */
.swiper-button-next, .swiper-button-prev {
    color: #3c3c3b !important;
}
.swiper-pagination-bullet-active, .bg-dark-blue {
    background-color: #3c3c3b !important;
}