html, body { font-family: 'Arial', 'sans-serif'; }
input, select { outline: none; text-transform: uppercase; width: 300px; border: 0; background: transparent; font-weight: bold; color: #333; font-size: 23px; }
label { font-weight: bold; }
select { width: auto; }
h1 { color: #48A2D6; font-size: 24px; font-weight: bold; }
footer { width: 100%; text-align: center; font-size: 13px; margin: 20px 0; }
#logo { margin-top: 10px; width: 100%; font-size: 40px; font-weight: bold; text-align: center; }
#card { margin: 0 auto; margin-top: 20px; width: 800px; height: 505px; background-image: url("/card.jpg"); font-family: 'Arial', 'sans-serif'; font-weight: bold; color: #333; }
#card-top { width: 100%; height: 166px; padding: 0; margin: 0; }
#card-fiscalcode { padding-left: 130px; width: 500px; height: 50px; margin-bottom: 10px; }
#card-surname { padding-left: 160px; width: 640px; height: 40px; }
#card-name { padding-left: 160px; width: 640px; height: 40px; float: left; }
#card-gender { padding-left: 110px; width: 150px; height: 40px; float: left; }
#card-city { padding-left: 160px; width: 640px; height: 60px; }
#card-province { padding-left: 162px; padding-top: 4px; width: 400px; height: 46px; }
#card-date { padding-left: 156px; width: 600px; height: 60px; padding-top: 16px; }
#fiscalCode { font-size: 30px; width: 350px; height: 50px; }
#surname, #name, #gender { height: 40px; }
#city { height: 60px; }
#province { height: 46px; font-weight: bold; font-size: 23px; }
#description { margin: 0 auto; width: 95%; padding: 30px; margin-top: 20px; }
.clearfix { clear: both; height: 0; }
.btn { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 5px; font-size: 14px; font-weight: bold; }
.buttons { margin: 0 auto; margin-top: 20px; max-width: 800px; border: 0; }
.logo1 { color: #48A2D6; font-size: 40px; }
.logo2 { color: #4E88D3; font-size: 40px; }
.logo3 { color: #2e5b98; font-size: 20px; }
.color1 { background: #48A2D6; color: #fff; }
.color2 { background: #4E88D3; color: #fff; }
.color3 { background: #2e5b98; color: #fff; }
.color4 { background: #F6F1F5; color: #333; }
.text { color: #48A2D6; font-weight: bold; }
.nounderline { text-decoration: none !important }

@media only screen and (max-width: 640px) {
    input, select { font-size: 12px; }
    select { width: auto; padding: 0; margin-top: -10px; }
    h1 { font-size: 20px; }
    #card { width: 320px; height: 200px; background-size: contain; background-repeat: no-repeat; }
    #card-top { height: 64px; }
    #card-fiscalcode { padding-left: 50px; width: 210px; height: 26px; margin-bottom: 0; }
    #card-surname { padding-left: 70px; width: 260px; height: 17px; line-height: 17px; }
    #card-name { padding-left: 70px; width: 260px; height: 17px; float: left; line-height: 17px; }
    #card-gender { padding-left: 32px; width: 60px; height: 17px; line-height: 12px; float: left; }
    #card-city { padding-left: 70px; width: 260px; height: 17px; }
    #card-province { padding-left: 71px; width: 260px; height: 17px; line-height: 15px; }
    #card-date { padding-left: 70px; width: 260px; height: 10px; line-height: 0; }
    #fiscalCode { font-size: 14px; width: 160px; height: 26px; }
    #surname, #name, #gender { height: 17px; line-height: 17px; }
    #city { height: 17px; line-height: 17px; }
    #province { height: 17px; font-weight: bold; font-size: 12px; line-height: 15px; }
    button { width: 80%; font-size: 30px; padding: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
    .inverse-text { font-size: 12px; }
    .btn { font-size: 12px; }
    .logo1 { font-size: 30px; }
    .logo2 { font-size: 30px; }
    .logo3 { font-size: 15px; }
}

.button-container { text-align: center; }