@import url('https://fonts.cdnfonts.com/css/akira-expanded');
@import url('https://fonts.cdnfonts.com/css/cellofy');
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');

body, html{
    margin: 0;
    padding: 0;
    font-family: Syncopate;
    font-size: 13px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    background-color: black;
    color: #fff;
}

.hidden{ display: none; }
.clear{ width: 100%; height: 1px; clear: both; }
.redborder{ border: 1px solid red; }

.topgradient{
    width: 100%;
    height: 80px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); 
}

.bigtitle{
    font-family:'Cellofy';
    font-weight: 900;
    font-size: 50px;
    letter-spacing: 1.8px;
    text-transform: none;
}

span.button, input.button{
    padding: 14px 22px;
    border-radius: 22px;
    text-transform: uppercase;
    color: #000;
    background: rgb(161,161,161);
    background: linear-gradient(130deg, rgba(161,161,161,1) 0%, rgba(255,255,255,1) 36%, rgba(219,219,219,1) 53%);
    cursor: pointer;

    font-family: Syncopate;
    font-size: 13px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
}

#top{
    width: 100%;
    max-width: 2560px;
    padding-bottom: 200px;
    background: url('masinahero.webp');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
}

#top #logo{
    margin: 100px auto 0 auto;
    width: 170px;
    height: 50px;
    background: url('logobig.svg') center center no-repeat;
}

#top #menu{
    margin-top: 20px;
    margin-bottom: 120px;
}
#top #menu a, #footer .menu a{
    margin-right: 30px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
#top #menu a.whatsapp, #footer .menu a.whatsapp{
    width: 18px;
    height: 18px;
    margin: 0;
    background: url('whatsapp.svg') center center no-repeat;
    display: inline-block;
}

#top #resbox{
    width: 400px;
    margin: 36px auto;
    padding: 60px 80px 43px 80px;
    backdrop-filter: blur(6px);
    border: 1px solid #ccc;
    text-transform: uppercase;
}

#top #resbox .servicetype{
    margin-bottom: 30px;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
}
#top #resbox .servicetype span{
    padding: 5px;
    display: inline-block;
}
#top #resbox .servicetype span.active, #top #resbox .servicetype span:hover{
    border-bottom: 1px solid;
}
#top #resbox .servicetype span:hover{
    cursor: pointer;
}
.distanceestimate{
    width: 360px;
    margin: 15px 20px 25px 20px;
}
.distanceestimate input{
    width: 70px;
    margin: -10px 0 0 0;
    padding: 10px 5px 10px 30px;
    font-family: Syncopate;
    font-size: 11px;
    text-transform: uppercase;
    float: right;
}
#top #resbox .inputs{
    width: 360px;
    margin: 15px 20px;
}
#top #resbox .inputs input, #top #resbox .inputs select{
    margin: 0;
    padding: 10px 5px 10px 30px;
    font-family: Syncopate;
    font-size: 11px;
    text-transform: uppercase;
}
#top #resbox .inputs.two{
    display: flex;
    justify-content: space-between;
}
#top #resbox .inputs input.oneperline{ width: calc(100% - 39px); }
#top #resbox .inputs input.twoperline{ width: calc(47% - 35px); }
#top #resbox .inputs select.twoperline{ width: calc(50% - 7px); }

#top #resbox input.location{ background-image: url('location.svg'); }
#top #resbox input.date{ background-image: url('date.svg'); }
#top #resbox select.time{ background-image: url('time.svg'); }
#top #resbox input, #top #resbox select{
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

#top #resbox .last{
    margin-top: 40px;
}


#carsouter{
    width: 100%;
    max-width: 2560px;
    background: url('fundalscaun.webp');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
}

#carsinner{
    width: 1470px;
    margin: 0 auto;
}

.row{
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}
.row .car{
    width: calc((100% - 48px) / 3);
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    text-align: left;
    backdrop-filter: blur(6px);
}
.row .car .image{ width: 100%; aspect-ratio: 3 / 2; margin: 0; padding: 0; }
.row .car .image img{ width: 100%; }
.row .car .details{
    margin: 0;
    padding: 24px;
}
.row .car .name{
    font-family: 'Akira Expanded', sans-serif;
    font-size: 33px;
    letter-spacing: 1.8px;
    width: 100%;
}
.row .car .details .left{ float: left; width: 50%; }
.row .car .details .right{ float: right; width: 50%; text-align: right; }
.row .car .details .left p, .row .car .details .right p{
    margin: 10px 0 0 0;
    padding: 0;
}
.row .car .details .right .tripdetails, .row .car .details .right .cost{
    font-size: 20px;
}
.row .car .details .bottom{
    text-align: center;
    padding: 25px 0;
}

#costs{
    width: 100%;
    margin-top: 200px;
    max-width: 2560px;
    background: url('grilaboxa.webp');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    text-transform: uppercase;
}
.reservationdetails{
    width: 740px;
    margin: 75px auto 20px auto;
    padding: 30px;
    border: 1px solid #ccc;
    backdrop-filter: blur(6px);
}
.reservationdetails .cardetails{
    width: 50%;
    text-align: left;
    float: left;
}
.reservationdetails .cardetails .carname{
    font-family: 'Akira Expanded', sans-serif;
    font-size: 24px;
    letter-spacing: 1.8px;
}
.reservationdetails .cardetails .tripdetails, .reservationdetails .cardetails .cost{
    font-family: Syncopate;
    font-size: 20px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
}
.reservationdetails .clientdetails{
    width: 50%;
    float: right;
}
.reservationdetails .clientdetails input{
    width: calc(100% - 20px);
    margin: 0 0 20px 0;
    padding: 10px;
}
.reservationdetails .clientdetails textarea{
    width: calc(100% - 20px);
    height: 80px;
    padding: 10px;
}

#contact{
    width: 100%;
    margin-top: 200px;
    max-width: 2560px;
    background: url('fundalcontact.webp');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    text-transform: uppercase;
}

.contactform{
    width: 525px;
    margin: 75px auto 20px auto;
}
.contactform input{
    width: calc(100% - 20px);
    margin: 0 0 20px 0;
    padding: 10px;
}
.contactform textarea{
    width: calc(100% - 20px);
    height: 80px;
    margin: 0 0 40px 0;
    padding: 10px;
}

#footer{
    width: 100%;
    height: 200px;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-transform: uppercase;
}
#footer .logo{
    width: 170px;
    height: 50px;
    background: url('logobig.svg') center center no-repeat;
}
#footer .left{
    width: calc(30% - 100px);
    padding-left: 100px;
}
#footer .center{
    width: 30%;
    text-align: center;
    display: block;
}
#footer .center .copyright{
    margin-top: 15px;
    font-size: 8px;
}
#footer .right{
    width: calc(30% - 100px);
    padding-right: 100px;
    text-align: right;
}
#footer .right a{
    margin: 6px 0;
    display: block;
}


.modal{
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
.modal-content{
    width: 60%;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    background-color: #000;
    text-align: center;
}

.g-recaptcha{
    text-align: center;
}





@media only screen and (min-width: 1280px) and (max-width: 1440px){
    #carsinner{ width: 1200px; }
}

@media only screen and (min-width: 960px) and (max-width: 1279px){
    #carsinner{ width: 940px; }
}

@media only screen and (max-width: 959px){
    #carsinner{ width: 96%; }
    .row{
        display: block;
    }
    .row .car{
        width: calc(100% - 48px);
        margin: 0 24px 24px 24px;
    }
}