@font-face {
    font-family: Opel;
    src: url(OpelSans-Condensed.woff2);
}

@font-face {
    font-family: OpelBold;
    src: url(OpelSans-BoldCondensed.woff2);
}

@font-face {
    font-family: FontAwesome;
    src: url(FontAwesome.otf);
}

@font-face {
    font-family: FontAwesomeBrands;
    src: url(FontAwesomeBrands.otf);
}

body {
    font-family: Opel;
    overflow-x: hidden;
}

button, h1, h2, .bold {
    font-family: OpelBold;
}

button {
    border-radius: 30px !important;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

@media (max-width: 767px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}

header {
    padding: 15px 0 15px 70px;
    background: transparent;
    background-image: url('../img/polygon.png');
    background-repeat: no-repeat;
    background-position: right -750px center;
}

header img, header p {
    display: inline-block;  
}

header p {
    vertical-align: middle;
}

header big {
    font-size: 3rem;
}

.pack {
    background-color: #000;
    opacity: 0.65;
}

.pack.position-absolute {
    border: 4px solid #FFFFFF;
    top: 30px;
    left: 30px;
}

.pack ul {
    list-style: none;
    font-size: 130%;
}

.pack ul li:before {
    content: "\2022";
    color: #F4DE64;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.contact, .carousel-indicators li.active {
    background-color: #F4DE64;
}

.contact.position-absolute {
    border: 4px solid #FFFFFF;
    bottom: 30px;
    right: 30px;
}

.contact p.bold {
    font-size: 140%;
}

.contact button {
    background-color: #fff;
}

.contact button small::before {
    font-family: FontAwesome;
    content: "\f879";
    font-size: 120%;
    vertical-align: middle;
}

.contact input {
    border: none;
    opacity: 0.75;
    text-align: center;
}

.clockdiv {
    display: inline-block;
    font-weight: 100;
    text-align: center;
}
 
.clockdiv > div {
    padding: 5px;
    border-radius: 3px;
    display: inline-block;
}
 
.clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    display: inline-block;
    background-color: #fff;
    opacity: 0.6;
    font-size: 120%;
}
 
.smalltext {
    padding-top: 5px;
    text-transform: uppercase;
    font-size: 80%;
}

.contact-icons button, .contact-icons-modal button {
    border-radius: 100%;
    border: none;
    padding: 5px 10px;
    font-size: 20px;
    outline: none;
}

.whatsapp {
    background-color: #25D366 !important;
}

.whatsapp::after {
    font-family: FontAwesomeBrands;
    content: "\f232";
    color: #fff;
}

.phone {
    background-color: #949685 !important;
}

.phone::after {
    font-family: FontAwesome;
    content: "\f095";
    color: #fff;
}

.email {
    background-color: #d325a6 !important;
}

.email::after {
    font-family: FontAwesome;
    content: "\f0e0";
    color: #fff;
}

.models {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.flex-item {
    flex-basis: 30%;
    margin: 10px 5px;
    border: 1px solid #F4DE64;
    min-width: 275px;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.4);
}

.btn {
    padding: .375rem 2rem;
    background-color: #F4DE64;
    border: none;
    font-size: 120%;
}

.btn-call::before {
    font-family: FontAwesome;
    content: "\f095";
}

.models ul {
    font-size: 85%;
    margin-left: -15px;
}

.sale-price {
    font-size: 120%;
}

.rate {
    background: #000;
    width: fit-content;
    float: right;
}

.values {
    background-size: cover;
    background-position: bottom;
}

.carousel-indicators li {
    background-color: #707070;
    border-radius: 100%;
    height: 20px;
    width: 20px;
}

.carousel-indicators {
    bottom: -30px;
}

.stars::after {
    font-family: FontAwesome;
    content: "\f5c0";
    color: #fff;
    vertical-align: middle;
    font-size: 24px;
}


.floating-contact {
    position: fixed;
    bottom: 0;  
    padding: 10px;
    z-index: 999;
}

footer {
    margin-bottom: 60px;
}

@media (max-width: 1100px) and (min-width: 768px) {
    .pack {
        max-width: 230px;
        top: 5px !important;
        left: 5px !important;
    }
    .pack img {
        height: 35px;
    }
    .pack ul {
        font-size: unset;
    }
    .contact {
        bottom: 2px !important;
        right: 2px !important;
    }
    .contact p.bold {
        font-size: unset;
        margin-bottom: 2px;
    }
    .contact small, .clockdiv .smalltext, .contact label{
        font-size: 65%;
    }
    .contact form button {
        font-size: 80%;
        padding: 5px;
    }
    .clockdiv {
        margin-top: -20px;
    }
    .clockdiv span {
        padding: 5px !important;
        font-size: 90% !important;
    }
    .contact-icons {
        margin-top: 5px !important;
    }
}

@media (max-width: 600px) {
    header {
        padding-left: 10px !important;
    }
    #logo {
        height: 35px;
    }
    header big {
        font-size: 2rem;
    }
}

@media (max-width: 765px) and (min-width: 340px) {
    .flex-item {
        min-width: unset;
        flex-basis: unset;
    }
}

@media (max-width: 800px) {
    header {
        background: none;
    }
}

@media (max-width: 465px) {
    header {
        display: flex;
    }
    header img {
        align-self: center;
    }
    header big {
        font-size: 1.5rem;
    }
    header p {
        font-size: .8rem;
    }
}