span.badge{
position: relative;
float: left;
padding: 2%;
margin: 1%;
border-radius: 5px;
background: var(--brand-color);
font-size: 13px;
}
#car #back{
width: 100%;
margin-bottom: 1%;
}
#car #back a{
color: rgba(0,0,0,.5);
font-size: 14px;
}
#car{
width: 100%;
max-width: 1000px;
left: 50%;
margin-top: calc(5% + 80px);
transform: translate(-50%);
}
#car .container{
width: 98%;
padding: 1%;
background: white;
box-shadow: 4px 4px 10px 2px rgba(0,0,0,.05);
}
#car #container-2{
margin-top: 1%;
}
#car #container-3{
margin-top: 1%;
}
#car #container-4{
width: 47.5%;
margin-top: 1%;
}
#car #container-5{
width: 47.5%;
margin-left: 1%;
margin-top: 1%;
}
#car .container-text{
width: calc(100% - 120px);
}
#car .container-icons{
width: 120px;
height: 30px;
margin: 10px 0;
}
#car .container-icons .icon .badge{
position: absolute;
left: 50%;
top: -100%;
transform: translateX(-50%);
font-size: 13px;
padding: 5px;
border-radius: 5px;
color: black;
background: var(--brand-color);
opacity: 0;
transition: .3s;
}
#car .container-icons .icon:hover .badge{
opacity: 1;
}
#car .container-icons .icon{
width: 30px;
height: 30px;
}
#car .container-icons .icon.copia{
margin: 0 15px;
}
#car .container-icons .icon img{
width: 100%;
height: 100%;
}
#car .title{
width: 100%;
font-size: 26px;
line-height: 30px;
}
#car .subtitle{
width: 100%;
font-size: 20px;
line-height: 25px;
}
#car .images{
width: 60%;
padding-top: 45%;
}
#car .images .swiper-wrapper{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
#car .details{
width: 35%;
margin-left: 1%;
padding: 2%;
}
#car .details .line{
width: 100%;
height: 2px;
margin: 4% 0% 5%;
background: black;
}
#car .price, #car .state{
width: 50%;
}
#car .price span.offer, #car .state span.offer{
font-size: 25px;
line-height: 35px;
}
#car span.title{
position: relative;
float: left;
width: 100%;
font-size: 13px;
line-height: 13px;
font-weight: 400
}
#car span.offer{
position: relative;
float: left;
width: 100%;
font-size: 20px;
line-height: 32px;
font-weight: 400
}
#car .detail{
width: 50%;
margin-bottom: 5%;
}
#car .power{
width: 100%;
margin: 0;
}
#car .detail img{
position: relative;
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 7.5px 5px 7.5px 0px;
}
#car .detail .text{
width: calc(100% - 35px)
}
#car .optionals{
max-height: 120px;
overflow-y: scroll;
}
#car .title-container{
width: 100%;
font-size: 25px;
line-height: 30px;
font-weight: 500;
margin-bottom: 1%;
margin-top: 1%;
}
#car .text-container{
width: 100%;
font-size: 15px;
line-height: 18px;
font-weight: 300;
margin-bottom: 1%;
}
#car .section{
width: 45%;
padding: 0;
padding-right: 5%;
margin-bottom: 2%;
}
#car .section .title-section{
width: 100%;
}
#car .section .table{
width: 100%;
}
#car .section .table table{
width: 100%;
}
#car .section .table table th{
width: 30%;
text-align: left;
font-weight: 300;
font-size: 15px;
line-height: 20px;
color: rgba(0,0,0,.5);
}
#car .section .table table td{
width: 70%;
font-size: 15px;
line-height: 20px;
font-weight: 400;
}
#car .input, #car .textarea{
width: calc(47% - 2px);
border-radius: 5px;
padding: 1%;
border: 1px solid rgba(0,0,0,.2);
margin-bottom: 2%;
}
#car .input.submit{
width: calc(48% - 2px);
margin: 0 25%;
border: 1px solid var(--brand-color);
background: var(--brand-color);
margin-bottom: 1%;
}
#car .input.submit input:enabled{
color: rgba(0,0,0,1);
}
#car .input.submit input:disabled{
color: rgba(0,0,0,.2);
}
#car .input.surname{
margin-left: 2%;
}
#car .input.email, #car .textarea{
width: calc(98% - 2px);
}
#car input, #car textarea{
width: 100%;
font-size: 15px;
resize: none;
}
#car textarea{
height: 100px;
}
#car label{
font-size: 12px;
font-weight: 300;
}
@media (max-width: 768px){
#car #back{
width: 96%;
margin: 1% 2%;
}
#car #container-4{
width: 94%;
}
#car #container-5{
width: 94%;
margin-left: 2%;
}
#car .container{
width: 94%;
padding: 1%;
margin: 2%;
}
#car .title{
font-size: 22px;
line-height: 25px;
}
#car .subtitle{
font-size: 16px;
line-height: 20px;
}
#car .container-text{
width: calc(92.5% - 95px);
margin: 2.5% 2.5% 0 2.5%
}
#car .container-icons{
width: 95px;
height: auto;
}
#car .container-icons .icon{
width: 25px;
height: 25px;
}
#car .container-icons .icon.copia{
margin: 0px 10px;
}
#car .images{
width: 95%;
padding-top: 60%;
margin: 2.5%
}
#car .details{
width: 95%;
margin-left: 0%;
padding: 2.5%;
}
#car .section{
width: 95%;
padding: 2.5%;
margin-bottom: 2%;
}
#car .title-container{
width: 95%;
padding: 2.5%;
padding-bottom: 0;
}
#car .text-container{
width: 95%;
padding: 2.5%;
}
}