		body {
			padding: 5px;
		}
		
		.front  {
		   position: relative;
		   width: 1011px;  /* width of card */
			height: 639px; /* height of card */
			border-right: dashed 7px; 	/* card cutting line */
			font-family: "Hammersmith One"; /* font used on the front side of the card */
			display: inline-block;
		}
		
		.cardname {
			position: absolute;
			font-size: 2.5em;
			color: white;
			width: 35%;
			top: 35px;
			left:160px;	
			background: #1D467C;
		}
		
		 .right {
			right:0%; /*right panel is flushed to the right edge of the card */
			width: 50%; /* the right panel occupies only half of card width */
			text-align: center;
			position: absolute;
			top: 0;
			height: 100%;
		 }
		 
		 .picframe {
			display: block;
			border: 0.8em solid #1D467C; 
			width: 70%; /* the pic only occupies 70% width of the right panel */
			margin: auto; /* the pic is centered on the right panel */
			object-fit: cover; /* pic covers the containing div without stretching */
			position: relative;
			top: 10%; /* the top edge the pic is 10% below */
		}
		
		.card-header {
		 background: #1D467C;
		 width: 100%;
		  position: absolute;
		  top: 0;
		  height: 170px;
		}
		.zig-zag {
		  width: 50%;
		  position: absolute;
		  top: 0;
		  right:0;
		  height: 170px;
		  background-color: #1D467C;
		  background-image: linear-gradient(155deg, #4A6B96 25%, transparent 25%),
			linear-gradient(205deg, #4A6B96 25%, transparent 25%),
			linear-gradient(335deg, #4A6B96 25%, transparent 25%),
			linear-gradient(25deg, #4A6B96 25%, transparent 25%);
		  background-position: -30px 0, -30px 0, 0 0, 0 0;
		  background-size: 60px 40px;
		  background-repeat: repeat;
		}
		
		.cardholder {
			width: 80%;
			margin: auto;
			position: relative;
			top: 10%;
		}
		
		.holdername {
			margin-bottom: 6px;
		}
	
		#usericon {
			position: absolute;
			left: 0%;
		}
		.usertype{
			width: 100%;
			position: absolute;
			font-size: 2em;
			margin-top: 6px;
			margin-bottom:0;
			margin-left: 6px;
		}
		
		.card-header .logo {
			border: 1px solid black;
			position: absolute;
			width: 100px;
			left: 30px;
			top: 30px
		}
		
		.logo.watermark {
			opacity: 8%;
		}
		
		
		.back .logo.watermark {
			 top: 10%;
			 position: absolute;
			 width: 50%;
			 left: 25%
		}
		
		.front .logo.watermark {
			 top: 30%;
			 position: absolute;
			 width: 35%;
			 left: 20%
		}

		 .primary-details {
			  font-weight: 500; 
			  font-style: normal;
			  font-size: 1.5em; 
			  position: absolute;
			  top: 30.5%; 
			  left: 2.4%; 
			  height: 53.5% 
		 } 
		
		.website {
			background: #1D467C;		
			height: 5%;
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
			margin: auto;
			padding-top: 1.5%;
			padding-bottom: 1.5%;
			font-size: 1.8em;
			font-weight: 500;
			color: white;	
			
		}

		
		.back {
			position: relative;
			width: 1011px;
			height: 639px;
			display: inline-block;
		}
		
			
	 .left {
			left:0%; /*right panel is flushed to the right edge of the card */
			width: 50%; /* the right panel occupies only half of card width */
			position: absolute;
			top: 0;
			height: 100%;
	 }		 
		
	  .contacts   {
		  font-family: "Hammersmith One", system-ui;
		  font-weight: 500;
		  font-style: normal;
		  font-size: 1.5em;
		  position: absolute;
		  color: navy;
		  bottom: 0;
		  /* margin-left: 1%; */
		  border-collapse: collapse;
		}
		
		.contacts td, .contacts th {
		  border: 1px solid #1D467c;
		  padding: 8px;
		}

		.contacts th {
		  padding-top: 12px;
		  padding-bottom: 12px;
		  text-align: left;
		  color: black;
		}
		
		.secondary-details   {
		  color: navy;
		  font-family: "Hammersmith One", system-ui;
		  font-weight: 500;
		  font-style: normal;
		  font-size: 1.5em;
		  position: absolute;
		  bottom: 0;
		  border-collapse: collapse;
	
		  height:95%;
		}
		
		.qrcode {
			margin: auto;
			position: absolute;
			top: 30px;
			left: 30px;
		}
		
			
		.secondary-details td, .secondary-details th {
		  border: 1px solid #1D467c;
		  padding: 8px;
		}

		.secondary-details th {
		  padding-top: 12px;
		  padding-bottom: 12px;
		  text-align: left;
		  color: black;
		}
		
		.usertags{
			width: 50px;
			right: 15%;
			position: absolute;
			top: 5%;
			margin: auto;
		}
		
		.green {color: green;}
		.red {color: red;}
		.blue {color: blue;}
		.orange {color: orange;}
		
		