/* Basic sample */

body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container{
	position:absolute;
	top:50%;
	left:50%;
	margin:auto;
}

.flipbook-viewport .flipbook{
	width:1000px;
	height:646px;
	left:-500px;
	top:-323px;
}

.flipbook-viewport .page{
	width:500px;
	height:646px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}
iframe{
	object-fit: contain;  	overflow: hidden;
	
	
	}
	body{
	
		width: 461px;
		height: 600px;
	margin-right: auto;
		margin-left: auto;
	
		
	}
	.main-container2 {
		width: 461px;
		height: 600px;
		z-index: 0;
		margin-right: auto;
		margin-left: auto;
		background-image: url('images/green card/bgs/2nd page.png');
		background-repeat: no-repeat;
		padding: 0px;
	}
	
	.main-container {
		width: 461px;
		height: 600px;
		z-index: 0;
		margin-right: auto;
		margin-left: auto;
		background-image: url('images/green card/bgs/bg card.png');
		background-repeat: no-repeat;
		padding: 0px;
	}
	.wrapper {
		padding-right: 30px;
		padding-left: 30px;
		margin-left:auto;
		margin-right:auto;
	}
	.top-id {
		display: flex;
		padding-bottom: 20px;
		top:50px;
		position:relative;
	}
	.citizen-id{
		display: flex;
		width: 60%;
		align-items: center;
		margin-left:40px;
	}
	.ministry-top {
		width: 40%;
			font-family: "segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		text-transform: uppercase;
		font-weight: 900;
		font-size: 23px;
		text-align: center;
		color: #000000;
		letter-spacing: -1px;
		line-height: 1em;
		-webkit-text-stroke-width: 0.5px;
	  -webkit-text-stroke-color: #4bff00;
	}
	.id-no {
		font-family: "segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		font-size: 40px;
		font-weight: 900;
		text-transform: uppercase;
		color: #4bff00;
	}
	.actu-no {
		font-family: "segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		font-size: 24px;
		font-weight: 900;
		color: #FFFFFF;
		margin-left: 5px;
	}
	.second-sec {
		display: flex;
		justify-content:center;
		position:relative;
		top:40px;
	
	}
	p{
		font-family: raleway;
		font-size: 16px;
		font-weight: 500;
		text-transform: uppercase;
		color: #4bff00;
		line-height:0em;
	}
	.emokis-name span{
		font-family: "segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		font-size: 28px;
		font-weight: 900;
		text-transform: uppercase;
		color: #FFFFFF;
		position: relative;
		
	}
	.emokis-feat {
		margin-left: 30px;
		
	}
	h2{
		font-family: "segoe UI", Tahoma, Geneva, Verdana, sans-serif;
		font-size: 25px;
		font-weight: 900;
		color: #FFFFFF;
		bottom: 10px;
		position: relative;
	}
	.third-sec {
		display: flex;
		justify-content:center;
		gap: 40px;
		position: relative;
		top:20px;
	
	}
	.fourth-sec {
		text-align: center;
		position: relative;
		
	}
	.fifth-sec {
		width: 20%;
		margin-right: auto;
		position: relative;
		margin-left: auto;
		
		
	}
	.sixth-sec {
		text-align: center;
		position: relative;
		bottom: 10px;
		
	}
	.seventh-sec {
		display: flex;
		justify-content:center;
		
		position: relative;
		bottom: 5px;
			
	}
	.wrapper2 {
		padding: 43px 0px 35px 0px;
	}
	
	.atrib-text {
		text-align: center;
		position: relative;
		bottom:10px;
	}
	.other-elem {
	justify-content:center;
	
		display: flex;
		flex-flow: row wrap;
		position: relative;
			gap:10px;
						}
	.item {
	flex-basis: 20%;
	cursor:pointer;
	
	   }