@font-face{
    font-family:'Roboto';
    src: url('../fonts/roboto-regular.woff') format('woff');
}

@font-face{
    font-family:'Nephilm';
    src: url('../fonts/Nephilm.woff') format('woff');
}

@font-face{
    font-family:'Open Sauce';
    src: url('../fonts/OpenSauceSans-Regular.woff') format('woff');
}

:root {
    --color-project-1: #333333;
    --color-project-2: #3e3e3e;
    --color-project-3: #e7c35b;
    --color-project-4: #ecca59;
    --color-project-5: #fff9f3;
}

input.special-input,
input.special-input:focus,
input.special-input:active,
input.special-input:hover,
input.special-input:disabled
{
    background-color: black !important;
    color: white;
}

input.special-input:-webkit-autofill,
input.special-input:-webkit-autofill:hover,
input.special-input:-webkit-autofill:focus,
input.special-input:-webkit-autofill:active {

    border: 2px solid black !important;
    outline: none !important;
}

.special-input::placeholder {
    color: white!important;
    opacity: 1;
}

.font-nephilm {
    font-family: Nephilm !important;
}

.font-open-sauce {
    font-family: 'Open Sauce' !important;
}

body {
    font-family: "Roboto";
    background-color: var(--color-project-5);
}

.text-project-primary {
    color: var(--color-project-2);
}

.text-project-secondary {
    color: var(--color-project-3);
}

.text-justify {
    text-align: justify;
}

.bg-project-primary {
    background-color: var(--color-project-1);
}

.bg-project-secondary {
    background-color: var(--color-project-3);
}

.bg-project-tertiary {
    background-color: var(--color-project-5);
}

.btn-project-primary {
    --bs-btn-color: var(--color-project-1);
    --bs-btn-bg: var(--color-project-3);
    --bs-btn-border-color: var(--color-project-3);
    --bs-btn-hover-color: #727272;
    --bs-btn-hover-bg: var(--color-project-3);
    --bs-btn-hover-border-color: var(--color-project-3);
    --bs-btn-focus-shadow-rgb:49,132,253;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg: var(--color-project-3);
    --bs-btn-active-border-color: var(--color-project-3);
    --bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg: var(--color-project-3);
    --bs-btn-disabled-border-color: var(--color-project-3);
    font-family: "Open Sauce";
}

.text-transform-uppercase {
    text-transform: uppercase;
}

.text-transform-capitalize {
    text-transform: capitalize;
}

.nav-item {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-item:hover,
.nav-item:focus,
.nav-item:active {
    background-color: var(--color-project-1);
    transition: background-color .4s ease-in;
}

.nav-item:hover .nav-link,
.nav-item:focus .nav-link,
.nav-item:active .nav-link {
    color: white !important;
}

button.navbar-toggler {

    width: 35px;
    height: 30px;
    padding: 5px;
}

button.navbar-toggler,
button.navbar-toggler:focus {

    border: 0;
    outline: 0;
    appearance: none;
    box-shadow: none;
}

button.navbar-toggler span {

    width: 100%;
    height: 4px;
    display: block;
    background-color: var(--color-project-1);
    transition: transform .5s;
}

button[aria-expanded="true"].navbar-toggler > span:nth-child(2){

    transform: translateX(5px);
}

.short-text {

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 250px;
}

.header-home {
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.60)),
        url("../images/residences/LIGH3137.jpg");
    width: 100%;
    height: calc(100vh - 158px);
    background-size: cover;
    background-repeat: no-repeat;
}

.filter {
    width: 80%;
    min-height: 50px;
}

.filter form div {
    width: fit-content;
}

.project-footer {
    background-image: url("../images/footer.png");
    width: 100%;
    background-size: cover;
    min-height: 100px;
}

.footer-title > li {
    padding: 10px 0;
}

.nav-link-custom {
    color: var(--color-project-1);
}

.footer-title > li > a:hover, a.nav-link:hover {
    color: var(--color-project-2);
}

.hr-talk-about {
    width: 100px;
    height: 3px;
    border: none;
    outline: none;
    background-color: var(--color-project-2);
}

.job {
    font-size: 10px;
}

.home-img-1 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
                url("../images/residences/LIGH3063-1.jpg");
    background-size: cover;
    width: 350px;
    height: 450px;
}

.home-img-2 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
    url("../images/residences/LIGH3098-1.jpg");
    background-size: cover;
    width: 350px;
    height: 450px;
}

.home-img-3 {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)),
    url("../images/residences/LIGH3066-1.jpg");
    background-size: cover;
    width: 350px;
    height: 450px;
}

iframe {
    width: 100vw;
    height: 450px;
}

@keyframes animate-x {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

.animation-x {
    animation-name: animate-x;
    animation-duration: 4s;
}