@font-face {
    font-family: Lato-Regular;
    src: url('Lato-Regular.ttf');
}
@font-face {
    font-family: Lato-Black;
    src: url('Lato-Black.ttf');
}
@font-face {
    font-family: Lato-Heavy;
    src: url('Lato-Heavy.ttf');
}

html,
body {
    height: 100%; 
    padding: 0;
    margin: 0;
	font-family: Lato-Regular; 
	font-size: 15px; 
	letter-spacing:0.01em;
	overflow-x: hidden;
}

/* Toolbox */
h1 {font-size: 36px; margin:0em 0em 0.2em 0em; padding:0em;} /* text-transform:uppercase; */
label {color:#464545; font-size: 20px; padding:0em;}
input {
    color:#000; border:1px solid #7d7d7d; background-color:#fff; font-family: Lato-Black; 
    font-size: 17px; 
    width: 100%; 
    padding:0.5em 1em; 
    margin: 0.4em 0em 1.5em 0em; 
    box-sizing: border-box; 
}
dd {margin:0em;}
textarea {font-family: Lato-Regular;}

.crop {width:65%; margin: 0 auto; height:100%;}
.center {text-align:center;}
.valign {position: relative; top: 50%; transform: translateY(-50%);}
.black {font-family: Lato-Black;}
.heavy {font-family: Lato-Heavy;}
.bold {font-weight:bold;}
.disable {display:none;}
.img {max-height:99%;}
.clear {display:none;}
.visible {display:inline;}
.uppercase {text-transform:uppercase;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.block {display:block;}
.inline {display:inline-block;}
.disabled{pointer-events: none; cursor: none; 
opacity:0.5; 
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; 
filter: alpha(opacity=50); 
-khtml-opacity: 0.5; 
-moz-opacity:50;
}
.align-right {text-align:right;}
.align-center {text-align:center;}
.align-left {text-align:left;}

.content {padding:2em;}
.content div {margin:0.1em 0em;}
.content-header {text-align:center;}

/* template */
#header-detail {width:100%; height:0.5%; background-color:#fff; position:relative; z-index:10; box-shadow: 0px 3px 4px #3d3d3d;}
#header {width:100%; height:14.5%; background-color:#fff; }
#branding {width:100%; height:100%; }
#branding .content {padding:0em; height:100%;}
#logo {padding:0em; margin:0em;}
#main {width:100%; height:65%; position: relative; background-image: url(../images/bg.jpg);background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: 0px 3px 4px #3d3d3d;}
#authform {display:block; margin:0 auto; width:70%; height:80%; background-color:#fff; border:0.5em solid #ddd; box-shadow: 4px 4px 4px #000;  border-radius: 10px; opacity: 0.85; filter: alpha(opacity=85); }

#FullName-label, #CertificateNumber-label, #VerificationCode-label {width:30%; display:inline-block; vertical-align:top; margin-top:0.9em; }
#FullName-element, #CertificateNumber-element, #VerificationCode-element {width:69%; display:inline-block; vertical-align:top;}
/*
#LastName-label {width:30%; display:inline-block; vertical-align:top; margin-top:0.9em;}
#LastName-element {width:69%; display:inline-block; vertical-align:top;}
#EmailAddress-label {width:30%; display:inline-block; vertical-align:top; margin-top:0.9em;}
#EmailAddress-element {width:69%; display:inline-block; vertical-align:top;}
*/

/* customer specific */
#submit {margin-top:1em; font-family: Lato-Black; background-color:#ddd; color:#000; border:1px solid #7d7d7d;}
#submit:hover {background-color:#ccc; border:1px solid #7d7d7d;}

#result {display:block; margin:0 auto; width:70%; height:80%; border-radius: 10px; opacity: 0.85; filter: alpha(opacity=85); border:0.5em solid #fff;}
#result .content {text-align:center; color:fff; }
.status-block {font-size:20px; padding-top:0.5em;}
.valid, .invalid {width:100%; color:#fff; border-radius: 5px; border:0.3em solid #fff; box-shadow: 4px 4px 4px #1e1e1e;}
/* padding:1em 1em; */
.valid { background-color:#3b7e0f; } /* background-image: url(../images/valid.png); */
.invalid { background-color:#ca2b2b; }
.valid .img, .invalid .img  {position:absolute; top:-50px; left:37%;}
#valid-img {width:200px;}
#status-block {position:relative;  padding:0.5em 1em; font-size:24px;}
#status-msg {margin-top:2em;}
#img-clock {height:50%; opacity: 0.60; filter: alpha(opacity=60); margin:-2em 0em 1em 0em;}
#lockOutMsg {margin-top:0.5em; font-size:22px;}
#action-block,.action-block { width: 100%; background-color:#be2727; box-shadow: 2px 2px 2px #1e1e1e;  } /* border:2px solid #fff;  */
a.invalid-action:link {min-height:1.3em; color:#fff; display:block; font-family: Lato-Black; font-size: 17px;  border:1px solid #feb4b4; padding:0.5em 1em; margin-top:2em; text-decoration:none;}
a.invalid-action:hover{ background-color:#8e0505; border:1px solid #fff;}
a.invalid-action:visited, a:active {color:#fff; border:1px solid #feb4b4;}

#footer {width:100%; height:18%; text-align:center; background-color:#fff; }
#footer .content {padding-left:0em; }
#footer .content div {margin:0.5em 0em;}
#footer-detail {width:100%; height:2%; background-color:#ccc;}

.content {/*padding:2em;*/}

ul.errors {color:red; font-size:16px; position:relative; margin:-1.3em 0em 0.8em 0em; padding-left:0.2em; list-style:none;}