/* CSS Document */

@media only screen and (max-width: 1700px) {
    /*body { background-color:orange; } */
}

@media only screen and (max-width: 1500px) {
    /*body { background-color:pink; }*/
    .crop {width:75%;}


    label {font-size: 17px; padding:0em;}
    input {font-size: 16px; padding:0.5em 1em; margin: 0.4em 0em 1.5em 0em;}


}

@media only screen and (max-width: 1280px) {
    /*body { background-color:blue; }*/
    .crop {width:85%;}
}

@media only screen and (max-width: 1024px) {
    /*body { background-color:red;}*/
    .crop {width:95%;}
    .valid .img, .invalid .img  {left:35%;}
}

@media only screen and (max-height: 575px) {
    #status-block {font-size: 18px;padding: 0;}
    .status-block {font-size: 18px;}
    #status-block img{width: 6em; height: 6em;}
    a {font-size: 18px;}
    .zend_form {margin: 0 !important;}
    .content-header {margin: 0 !important;}
}

@media only screen and (max-width: 768px), screen and (max-height: 475px) {
    /*body{background-color:purple;}*/
    .valid .img, .invalid .img  {left:30%;}
    label {}
    input {}
    #authform {width:85%;}
    #FullName-label, #CertificateNumber-label, #VerificationCode-label {width:100%;}
    #FullName-element, #CertificateNumber-element, #VerificationCode-element {width:100%;}
    label {font-size: 12px;}
    input {font-size: 11px;padding: 0.5em 1em; margin: 0.5em 0em 0.5em 0em;}
    .content {font-size: 10px;}
    .content-header {margin-bottom:1em;}
    h1 {font-size: 20px;}
    .content-header-message {font-size: 13px;}
    .content-header img {height: 3em;}
    #status-block {font-size: 16px;padding: 0;}
    .status-block {font-size: 16px;}
    #status-block img{width: 4em; height: 4em;}
    a {font-size: 16px;}
    #result {width: 85%;height: 85%;}
    /*
    #authform {display:block; width:90%; height:40%; margin:0 auto;}
    #authform .content {text-align:center;}
    #result {display:block; width:90%; height:40%; float:none; margin:0 auto;}
    .valign {position: relative; top: 5%; transform: translateY(-5%);}
    .valid, .invalid {width:100%; padding:0em 0em; color:#fff; border-radius: 5px; border:0.3em solid #fff; box-shadow: 4px 4px 4px #1e1e1e;}
    .valid .img, .invalid .img {position:relative; top:-80px;}
    #valid-img {width:150px;}
    #status-block {margin-top:1em;}
    */
}

@media only screen and (max-width: 740px) {
    /*body{background-color:blue;}*/

}

@media only screen and (max-width: 570px) {
    /*body{background-color:pink;}*/

}

@media only screen and (max-width: 480px) {
    /*body{background-color:red;}*/

}

@media only screen and (max-width: 380px) {
    /*body{background-color:orange;}*/
    label {font-size: 10px;}
    input {font-size: 9px;}
    .content {font-size: 8px;}
    h1 {font-size: 15px;}
    .content-header-message {font-size: 11px;}
}

@media only screen and (max-width: 320px), screen and (max-height: 375px) {
    /*body{background-color:yellow;}*/
    #status-block {font-size: 12px;padding: 0;}
    .status-block {font-size: 12px;}
    #status-block img{width: 3em; height: 3em;}
    .content-header img {height: 2em;}
    a {font-size: 12px;}
}

/** iPhone only **/
@media screen and (max-device-width: 480px) {
    /*body{background-color:teal;}*/
}


@media only screen and (max-width: 380px), screen and (max-height: 975px) {
    #main {height:85%;}
    #footer {display: none;}
    #footer-detail {display: none;}
}