.certificate {
	font-family:'Prompt',san-sarif;
	min-height:394px;
	padding:0 0 0 0;
	margin:0 auto 0 auto;
}
		
#frontcard {
	position:absolute;
	width:645px;
	height:auto;
	margin:0 auto 0 auto;
	padding:0 0px;
}
			
#photo {
	position:absolute;
	right:13px;
	top:12px;
	width:218px;
	height:330px;
	overflow:hidden;
}
#frontcard img {
	border:1px solid #000;
}
#photo img {
	border:none;
}
#qrcode img {
	border:none;
}
#qrcode {
	position:absolute;
	left:319px;
	top:256px;
	width:80px;
	height:auto;
	overflow:hidden;
}
#category {
	position:absolute;
	left:90px;
	top:105px;
	width:285px;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}
#namecer {
	position:absolute;
	left:90px;
	top:149px;
	width:285px;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}
#nametemple {
	position:absolute;
	left:90px;
	top:223px;
	width:285px;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}
#namemb {
	position:absolute;
	left:110px;
	top:275px;
	width:200px;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}
#datecer {
	position:absolute;
	left:110px;
	top:312px;
	width:auto;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}
#code {
	position:absolute;
	left:510px;
	top:367px;
	width:auto;
	height:auto;
	overflow:hidden;
	color:#000;
	font-size:1.0em;
	font-weight:700;
}

@media(max-width: 1280px) {	
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:394px;
		padding:0 0 0 0;
		margin:0 auto 0 auto;
	}
			
	#frontcard {
		position:absolute;
		width:600px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
	}
				
	#photo {
		position:absolute;
		right:14px;
		top:12px;
		width:200px;
		height:304px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:300px;
		top:242px;
		width:70px;
		height:auto;
		overflow:hidden;
	}
	#category {
		position:absolute;
		left:90px;
		top:98px;
		width:285px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
	#namecer {
		position:absolute;
		left:90px;
		top:140px;
		width:285px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
	#nametemple {
		position:absolute;
		left:90px;
		top:210px;
		width:285px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
	#namemb {
		position:absolute;
		left:110px;
		top:256px;
		width:200px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
	#datecer {
		position:absolute;
		left:110px;
		top:290px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
	#code {
		position:absolute;
		left:470px;
		top:341px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:1.0em;
		font-weight:700;
	}
}

@media(max-width: 768px) {	
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:210px;
		padding:0 0 0 0;
		background-image: url("images/loginbg.jpg"); /* The image used */
		background-position:center center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
			
	#frontcard {
		position:absolute;
		width:352px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
	}			
	#photo {
		position:absolute;
		right:8px;
		top:8px;
		width:119px;
		height:178px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:176px;
		top:142px;
		width:40px;
		height:auto;
		overflow:hidden;
		z-index:10;
	}
	#category {
		position:absolute;
		left:50px;
		top:59px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namecer {
		position:absolute;
		left:50px;
		top:83px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#nametemple {
		position:absolute;
		left:50px;
		top:124px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namemb {
		position:absolute;
		left:62px;
		top:152px;
		width:140px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#datecer {
		position:absolute;
		left:62px;
		top:172px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#code {
		position:absolute;
		left:277px;
		top:202px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
}

@media(max-width: 600px) {	
	
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:165px;
		padding:0 0 0 0;
		background-image: url("images/loginbg.jpg"); /* The image used */
		background-position:center center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
			
	#frontcard {
		position:absolute;
		width:270px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
	}			
	#photo {
		position:absolute;
		right:7px;
		top:7px;
		width:89px;
		height:136px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:136px;
		top:110px;
		width:30px;
		height:auto;
		overflow:hidden;
		z-index:10;
	}
	#category {
		position:absolute;
		left:40px;
		top:44px;
		width:130px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:5px;
		font-weight:400;
		line-height:1.2em;
	}
	#namecer {
		position:absolute;
		left:50px;
		top:83px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#nametemple {
		position:absolute;
		left:50px;
		top:124px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namemb {
		position:absolute;
		left:62px;
		top:152px;
		width:140px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#datecer {
		position:absolute;
		left:62px;
		top:172px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#code {
		position:absolute;
		left:277px;
		top:202px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
}

@media(max-width: 414px) {	
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:232px;
		padding:0 0 0 0;
		background-image: url("images/loginbg.jpg"); /* The image used */
		background-position:center center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
			
	#frontcard {		
		position:absolute;
		width:370px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
		top: 0; left: 0; bottom: 0; right: 0;
	}	
	#photo {
		position:absolute;
		right:8px;
		top:8px;
		width:124px;
		height:187px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:183px;
		top:148px;
		width:45px;
		height:auto;
		overflow:hidden;
		z-index:10;
	}
	#category {
		position:absolute;
		left:55px;
		top:63px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namecer {
		position:absolute;
		left:55px;
		top:87px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#nametemple {
		position:absolute;
		left:55px;
		top:131px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namemb {
		position:absolute;
		left:65px;
		top:160px;
		width:140px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#datecer {
		position:absolute;
		left:65px;
		top:181px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#code {
		position:absolute;
		left:292px;
		top:212px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
}

@media(max-width: 375px) {
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:210px;
		padding:0 0 0 0;
		background-image: url("images/loginbg.jpg"); /* The image used */
		background-position:center center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
			
	#frontcard {
		position:absolute;
		width:343px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
	}			
	#photo {
		position:absolute;
		right:7px;
		top:8px;
		width:116px;
		height:173px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:171px;
		top:138px;
		width:40px;
		height:auto;
		overflow:hidden;
		z-index:10;
	}
	#category {
		position:absolute;
		left:50px;
		top:57px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namecer {
		position:absolute;
		left:50px;
		top:81px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#nametemple {
		position:absolute;
		left:50px;
		top:120px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namemb {
		position:absolute;
		left:62px;
		top:147px;
		width:140px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#datecer {
		position:absolute;
		left:62px;
		top:167px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#code {
		position:absolute;
		left:269px;
		top:196px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
}

@media(max-width: 360px) {
	.certificate {
		font-family:'Prompt',san-sarif;
		min-height:202px;
		padding:0 0 0 0;
		background-image: url("images/loginbg.jpg"); /* The image used */
		background-position:center center; /* Center the image */
		background-repeat: no-repeat; /* Do not repeat the image */
		background-size: cover; /* Resize the background image to cover the entire container */
	}
			
	#frontcard {
		position:absolute;
		width:328px;
		height:auto;
		margin:0 auto 0 auto;
		padding:0 0px;
	}			
	#photo {
		position:absolute;
		right:7px;
		top:7px;
		width:110px;
		height:166px;
		overflow:hidden;
	}
	#frontcard img {
		border:1px solid #000;
	}
	#photo img {
		border:none;
	}
	#qrcode img {
		border:none;
	}
	#qrcode {
		position:absolute;
		left:170px;
		top:131px;
		width:40px;
		height:auto;
		overflow:hidden;
		z-index:10;
	}
	#category {
		position:absolute;
		left:45px;
		top:57px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namecer {
		position:absolute;
		left:45px;
		top:80px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#nametemple {
		position:absolute;
		left:45px;
		top:117px;
		width:160px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:0.5em;
		font-weight:400;
		line-height:1.2em;
	}
	#namemb {
		position:absolute;
		left:60px;
		top:143px;
		width:140px;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#datecer {
		position:absolute;
		left:60px;
		top:163px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
	#code {
		position:absolute;
		left:265px;
		top:190px;
		width:auto;
		height:auto;
		overflow:hidden;
		color:#000;
		font-size:6px;
		font-weight:400;
		line-height:1.2em;
	}
}