@import (once) "default.less";
@import (once) "font.less";

/* form ///////////////////////*/
.form{
padding:130px 0 50px 0;

.wrap{
padding:0 0 30px 0;
.tac;
}

.box{
border:2px @c2 solid;
margin:0 0 30px 0;

h3{
.tac;
.ffgb;
background:@c2;
color:#FFF;
padding:10px 0;
letter-spacing:.2em;
}

dl{
.dt;
.center;
padding:30px 0;
}

.icon{
.dtc;
.vat;
}

.icon p{
padding:20px 0 0 0;
height:70px;
width:70px;
background:url(../image/glow.svg) no-repeat 50% 50%;
background-size:cover;
.r(50%);
.tac;
}
.text{
.dtc;
.vam;
padding:0 20px;
}
.icon p,
.link a{
background-color:@c2;
}
.tel{
color:@c2;
.ffgb;
font-size:26pt;
letter-spacing:.1em;
padding:0 0 5px 0;
a{
color:@c2;
}
}

} /* box */


/* table ///////////////////////*/
table{
width:100%;
}

th,
td{
padding:10px;
border:1px @g2 solid;
.tal;
.fwn;
}

th,
td:first-child{
width:200px;
background:@c6;
}

textarea{
height:200px;
width:100%;
background:@g1 ;
border:1px @g2 solid;
.r(5px);
}

input[type="text"]{
font-size:11pt;
line-height:30px;
padding:0 0 0 5px;
background:@g1 ;
border:1px @g2 solid;
.r(5px);
}
input::placeholder {
color: #C9C9C9;
}
.ws{
width:80px;
}
.wm{
width:160px;
}
.wl{
width:300px;
}
.wa{
width:100%;
}

em{
background:@red;
color:#FFF;
padding:5px;
font-size:9pt;
.r(4px);
margin:0 10px;
.bold;
.nw;
}

.privacy{
padding:50px 0 0 0;
.tac;

h4{
padding:0 0 10px 0;
margin:0 0 20px 0;
font-size:15pt;
letter-spacing:.2em;
border-bottom:2px @g2 solid;
}
}

}


@media (max-width:800px){
.form{
padding:80px 0 30px 0;

.wrap{
.tal;
font-size:9pt;
}


.box{
border:2px @c2 solid;
margin:0 0 30px 0;

h3{
letter-spacing:.05em;
}
dl{
padding:20px 0;
}
.icon{
.db;
p{
.center;
}
}
.text{
.db;
.tac;
padding:10px 0 0 0;
}
.tel{
font-size:21pt;
}
}

table{
border-top:1px @g2 solid;
}

th,
td{
.db;
width:100%;
border:0;
border-bottom:1px @g2 solid;
}
td{
padding:15px 5px;
}

th,
td:first-child{
width:100%;
.tal;
}

textarea{
height:100px;
}

.ws{
width:60px;
}
.wm{
width:80px;
}
.wl{
width:150px;
}
.wa{
width:100%;
}

.privacy{
padding:50px 0 0 0;
.tal;

h4{
font-size:12pt;
}
}

}
}


/* submit ///////////////////////*/
.submit{
padding:50px 0 0 0;

button,
input{
.db;
.tac;
.ffgb;
padding:15px 0;
color:#FFFFFF;
font-size:12pt;
.r(5px);
letter-spacing:.1em;
.center;
width:300px;
border:0;
}

.send,
input[type="submit"]{
background:@c2;
transition:.5s;
}
.error,
button,
input[type="button"]{
background:@c4;
}
button:hover,
input[type="submit"]:hover{
opacity:.6;
}

}


@media (max-width:500px){
.submit{
padding:50px 0 0 0;

button,
input{
padding:20px 0;
width:100%;
}

}
}


/* thanks ///////////////////////*/
.thanks{
padding:130px 0 50px 0;
.tac;

h4{
padding:0 0 20px 0;
margin:0 0 20px 0;
font-size:15pt;
letter-spacing:.1em;
border-bottom:2px @g2 solid;
color:@c2;
.ffgb;
}

.link{
padding:50px 0 0 0;

a{
background:@c2;
width:300px;
.center;
}
}

}


@media (max-width:500px){
.thanks{
padding:100px 0 30px 0;

.link{
a{
width:auto;
}
}

}
}




/* exvalidation ///////////////////////*/
.errMsg {
.db;
.nw;
color: #FFF;
padding: 3px 25px 3px 20px;
line-height:100%;
}

.formError .formErrorContent{
padding:6px 0 5px 0;
color: #FFF;
background: @c4;
font-size: 8pt;
.ffgb;
.r(3px);
letter-spacing:.05em;
}