@font-face{
font-family:'VolvoBroad';
font-weight:400;
font-style:Normal;
src:url('../engine/VolvBro.ttf');
}
@font-face{
font-family:'Poppins';
font-weight:400;
font-style:Normal;
src:url('../engine/Poppins.otf');
}
@font-face{
font-family:'VolvoSans';
font-weight:400;
font-style:Normal;
src:url('../engine/VolvSa.ttf');
}
@font-face{
font-family:'VolvoNovum';
font-weight:400;
font-style:Normal;
src:url('../engine/VolvoNovum.otf');
}
body {
font-family:"VolvoNovum";
font-size: 16px;
margin: 0;
padding: 0;
background:url(../engine/bgpic.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
color: black;
}
form {
background-color: rgb(225, 223, 221);
padding: 10px 0;
margin-top: 20px;
}
#title {
color: #000;
text-align: center;
width: 100%;
font-size: 38px;
font-family: "VolvoBroad";
}
header {
max-width: 1000px;
height: 100px;
margin: auto;
}
.container img {
position: relative;
}
.ekadharma {
height: 75px;
padding: 10.5px 0;
}
.volvo {
height: 90px;
float: right;
margin: auto 0;
}
.container {
max-width: 1000px;
margin: 10px auto;
background-color: #fffd;
padding: 50px 75px;
border-radius: 50px;
}
.subject {
position: relative;
margin-top: 0;
}
.subject section {
position: relative;
background: #1251b5;
padding: 10px;
color: #fff;
font-family: "volvobroad";
font-size: 32px;
border-radius: 0;
margin: auto;
letter-spacing: 1px;
text-align: center;
width: auto;
}
.text-mid {
padding: 20px 30px;
background: #333;
}
.text-mid p {
color: #fff;
font-size: 16px;
font-family: "VolvoSans";
}
.row_tab {
display: block;
}
.label_tab {
text-align: left;
}
.label_tab p {
margin: 0;
}
.input_tab {
width: auto ;
text-align: left;
display: inline-block;
}
.info_tab {
padding: 20px;
}
.VT {
background:url(../engine/img0001.jpg) center right no-repeat,rgba(51,51,51,1);
}
.parts {
background:url(../engine/img0002.jpg) center left no-repeat,rgba(51,51,51,1);
}
.svc {
background:url(../engine/img0003.jpg) center left no-repeat,rgba(51,51,51,1);
}
.cmx {
background:url(../engine/img0004.jpg) center left no-repeat,rgba(51,51,51,1);
}
.info_tab input {
display: block;
position: relative;
padding: 2px 10px;
border: none;
float: right;
top: -35px;
width: 60%;
height: 25px;
font-size: 16px;
font-weight: 500;
}
.info_tab .label_tab {
width: 555px;
background-color: rgba(0, 0, 0, .6);;
color: #fff;
padding:2px 20px;
margin:5px 0;
height: 40px;
}
.info_tab .label_tab label {
Display: block;
vertical-align: sub;
width: 40%;
}
.info_tab .label_tab .bahasa {
color:#fff;
}
.info_tab .label_tab .english {
color:#d8d7d5;
}
.info_tab p{
font-family: "VolvoSans";
}
.item_tab {
display: flow-root;
padding: 0;
border-bottom: solid 2px #fff;
height: 150px;
}
.qsn_tab {
display: block;
padding: 20px 0;
}
.qsn_tab .label_tab {
display: inline-flex;
width: auto;
padding: 20px;
}
.qsn_tab .input_tab {
display: inline-block;
}
.qsn_tab table {
float: right;
border-spacing: 0;
height: 100%;
background: #eee;
padding: 0 5px;
}
.qsn_tab th {
padding: 0 7.5px 20px 7.5px;
color: #666;
font-weight: 300;
}
.qsn_tab td {
padding: 20px 7.5px;
color: #666;
}
.label_tab p {
margin: 0;
font-size: 16px;
}
.qsn_tab span{
width: 30px;
}
.qsn_tab label {
max-width: 400px;
}
.bahasa {
color: #000;
font-weight: 700;
}
.english {
color: #4d4e53;
}
.answer_tab {
width: auto;
text-align: center;
border: none;
}
.asn01:hover, .asn02:hover, .asn03:hover, .asn04:hover {
background-color: none;
border-radius: 5px;
}
.qsn_tab .asn04 {
text-align: left;
}
.suggestion {
width: 100%;
padding: 20px 0;
}
.form-group {
padding: 0 30px;
}
.suggestion p {
padding-bottom: 10px;
margin: 0;
}
textarea {
font-family: "VolvoNovum";
width: 75%;
padding: 20px;
height: 100px;
border: solid 2px #4d4e53;
}

button {
display: block;
width: 200px;
height: 50px;
margin: 20px auto;
border: none;
border-radius: 10px;
background: #4d4e53;
font-size: 16px;
font-family: "Arial";
font-weight: 700;
color: #fff;
}
button:hover {
background: #182871;
color: #fff;
cursor: pointer;
}
#footer{
margin-top: 30px;
}
#footer .left {
margin-left: 20px;
font-size: 13px;
color: #b8ab8e;
float: left;
}
#footer .right {
margin-right: 20px;
font-size: 11px;
color: #b8ab8e;
float: right;
}
#footer a {
color: #b8ab8e;
text-decoration: none;
}
#footer a:hover {
color: #dd7611;
}
.item input[type="radio"]{
display: none;
}
.item input[type="radio"] + label{
position: relative;
display: inline-block;
padding-left: 1.5em;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item input[type="radio"] + label:before,
.item input[type="radio"] + label:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
text-align: center;
color: white;
font-family: Times;
border: solid 2px #4d4e53;
border-radius: 25%;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.item input[type="radio"] + label:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
}
.item input[type="radio"] + label:hover:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
}
.item input[type="radio"]:checked + label:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.2em rgb(225, 223, 221), inset 0 0 0 1em rgb(24, 40, 113);
}

@media only screen
and (min-width : 992px) 
and (max-width : 1199px)
{
.qsn_tab .label_tab {
padding-top: 50px;
padding-bottom: 10px;
width: 100%;
margin: 15px 0;
}
.qsn_tab table {
width: 100%;
margin:0;
padding: 0 10px;
}
.item_tab {
height: auto;
}
.qsn_tab .label_tab {
padding-top: 30px;
padding-bottom: 10px;
width: 100%;
margin: 15px 0;
}
.qsn_tab label {
max-width: 100%;
}
}

@media only screen 
and (max-width : 991px)
{
header {
max-width: 991px;
height: 100px;
margin: auto;
}
.container {
max-width: 991px;
padding: 30px;
margin: 5px;
}
#title {
padding: 0;
width: 80%;
padding-left: 30px;
}
#title p {
text-align: left;
}
.ekadharma {
height: 60px;
}
.volvo {
height: 70px;
}
.subject {
}
.subject section {
position: absolute;
margin: auto 0;
top: -110px;
border-radius: 0;
height: 55px;
padding-top: 35px;
right: 0;
}
.info_tab .label_tab {
width: auto;
height: auto;
}
.item_tab {
height: auto;
}
.qsn_tab .label_tab {
padding-top: 50px;
padding-bottom: 10px;
width: 100%;
margin: 15px 0;
}
.qsn_tab table {
width: 100%;
margin:0;
}
.qsn_tab label {
max-width: 100%;
font-size: 24px;
}
.label_tab label {
padding-left: 0;
}
.info_tab input {
height:auto;
top: -55px;
padding: 5px 10px;
left: auto;
}
.label_tab, .suggestion p, textarea {
font-size: 1.75em;
}
.label_tab p {
font-size: 1em;
}
.qsn_tab th, .info_tab input {
font-size: 1em;
}
.text-mid p {
font-size: 1.24em;
}
.qsn_tab span {
display: contents;
}
button {
width: 100%;
font-size: 24px;
padding: 20px;
height: auto;
}
}