#title{
max-width: 800px;
padding: 10% 5%;
left: 50%;
transform: translateX(-50%);
margin-top: calc(80px + 2%);
background: black;
}
#title .title{
width: 90%;
margin: 0 5%;
text-align: center;
font-size: 45px;
line-height: 45px;
color: white;
z-index: 1;
}
#title .bg-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: .5;
}
#vendi-noi{
max-width: 800px;
padding: 4% 5%;
left: 50%;
transform: translateX(-50%);
margin-top: 1%;
background: white;
}
#vendi-noi .title{
width: 100%;
text-align: center;
margin-bottom: 5%;
font-size: 35px;
line-height: 35px;
}
.input{
width: 100%;
margin: 1% 0%;
}
.input.fotografie{
margin-top: 2%;
}
#file.input{
width: 100%
}
.input label{
width: 200px;
font-size: 15px;
line-height: 40px;
}
.input input, .input select, .input textarea{
width: calc(100% - 222px);
font-size: 15px;
line-height: 25px;
padding: 5px 10px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
}
.input select{
width: calc(100% - 200px);
}
.input textarea{
height: 100px;
resize: none;
}
.input.submit input{
width: 30%;
left: 50%;
transform: translateX(-50%);
margin-top: 3%;
cursor: pointer;
color: black;
background: var(--brand-color);
border: 1px solid var(--brand-color);
}
.input.submit input:disabled{
color: rgba(0,0,0,.2);
border: 1px solid rgba(0,0,0,.2);
}
.fotografia{
width: 18%;
margin: 1.25%;
}
#fronte, #interno-2{
margin-left: 0;
}
#interno-1, #danni-3{
margin-right: 0;
}
.fotografia .subtitle{
width: 100%;
font-size: 17px;
line-height: 17px;
margin-bottom: 2%;
}
.fotografia .subtitle span{
position: relative;
float: left;
}
.fotografia .subtitle .i{
width: 10px;
height: 10px;
line-height: 10px;
margin: 2.5px;
text-align: center;
font-size: 9px;
border: 1px solid black;
border-radius: 50%;
}
.fotografia .subtitle .i span{
width: 100%;
cursor: context-menu
}
.fotografia .subtitle .i .more{
position: absolute;
top: -5px;
left: 50%;
width: 150px;
transform: translate(-50%, -100%);
padding: 5px;
background: rgba(0,0,0,.8);
color: white;
border: 1px solid black;
border-radius: 5px;
font-size: 13px;
line-height: 13px;
opacity: 0;
transition: .3s;
}
.fotografia .subtitle .i span:hover ~ .more{
opacity: 1;
}
.fotografia .drop-zone{
width: calc(100% - 2px);
height: auto;
padding: 0;
padding-top: calc(100% - 2px);
margin: 0;
border: 1px dashed rgba(0,0,0,.2);
transition: .3s;
}
.fotografia .drop-zone:hover{
border: 1px solid rgba(0,0,0,.2);
}
.fotografia .drop-zone .drop-zone__prompt{
position: absolute;
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 13px;
}
.fotografia .drop-zone .drop-zone__thumb{
position: absolute;
width: 95%;
height: 95%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 2.5%;
border: 1px solid rgba(0,0,0,.2);
}
@media (max-width: 768px){
#title .title{
font-size: 35px;
line-height: 35px;
}
#vendi-noi .title{
font-size: 25px;
line-height: 25px;
}
#vendi-noi{
margin-top: 3%;
}
.input{
margin: 3% 0%;
}
.input label{
width: auto;
margin: 0 7.5px;
padding: 0 2.5px;
font-size: 13px;
line-height: 15px;
margin-bottom: -7.5px;
background: white;
z-index: 2;
}
.input input, .input select, .input textarea{
width: calc(100% - 17px);
font-size: 15px;
line-height: 25px;
padding: 5px 7.5px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
}
.input select{
width: 100%;
}
.fotografia{
width: 47.5%;
margin: 2.5%;
}
#fronte, #laterale-1, #interno-1, #altro, #danni-2{
margin-left: 0;
margin-right: 2.5%;
}
#retro, #laterale-2, #interno-2, #danni-1, #danni-3{
margin-left: 2.5%;
margin-right: 0;
}
}