html{
	height:100%;
	width:100%;
}
body{
    background-color:#ffd740;
	font-family: 'Public Sans', sans-serif !important;
	height:100%;
    /* width:100%; */
    display: table;
    border:8px solid #ece8dc;
    user-select:none;
}
.container{
    min-height: 100%;
    min-width: 100%;
    margin: 0;
}
*{
    box-sizing: border-box;
}
.card{
    margin-top: 2vh;
    margin-bottom: 2vh;
}
#person{
    background-color: #ece8dc;
    vertical-align: middle;
    border-radius: 20px;
    border-left-color: black;
    border-left-width: 4px;
    border-left-style: solid;
    border-bottom: 1px solid black;
    padding: 0px;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.cover1{
    background-image:url('passportback1.png');
    background-size: 100% 100%;
    box-sizing: border-box;
}
.person_info_container{
    background-image:url('passportback1.png');
    background-size: 100% 100%;
    box-sizing: border-box;
}
#cover1{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#imgContainer{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.div2{
    display: none;
}
.person_info_container {
    padding: 6px 8px 6px 16px;
    display: block;
}
.person_photo{   
    padding: 2px;
}
.info_cont{
	padding:1px 2px 2px 2px;
}
.sub_info{
	padding:1px 2px 2px 2px;
}
.person_photo img{
    border-radius: 8px;
}
.person_info {
    text-align: center;
    padding: 5px 2px 2px 16px;
}
h2{
    margin-top:0;
    font-size:27px;
}
.label_title{
    font-weight: 200;
    text-align: left;
    display: block;
    font-size: 16px;
    color:grey;
	margin-bottom: 2px;
}
.label_info{
    font-weight: bold;
    text-align: left;
    font-size: 18px;
    color:black;
	margin-bottom:4px;
}
.navigation_container{
    width: 100%;
   /*  height: 10vh; */
    margin: auto;
    text-align: center;
    padding: 20px;
}
.material-icons{
    font-size: 65px;
    background-color: #fc5656;
    color:black;
	box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.5);
}
.socialIcon{
    width: 5vw;
    font-size: 55px;
    padding: 5px;
    height: 10vh;
}
.person_skill_container{
	padding:0;
	/* padding-top:6px; */
	border-top:3px solid black;
}
#div1{
    border-bottom: 2px solid black;
}
#div00,#div10{
    border-right: 2px solid black;
   /*  border-bottom: 2px solid black; */
}
#div3{
    border-right: 2px solid black;
}
.border_bottom{
    border-bottom: 2px solid black;   
}
.border_left{
    /* border-left: 2px solid black; */
}
.border_top
{
    border-right: 2px solid black;
    /* border-top: 2px solid black; */
}
.skill_info{
    color:black;
    padding:3px;
    border-collapse: collapse;
    height:100%;
}
.skill_name{
    font-family: 'Public Sans', sans-serif !important;
    /* margin-top: 25%; */
    margin-bottom: 5px;
    font-weight: bold;
}
.nopadding{
	padding:0;
}
#cover1{
    display:block
}
/* .mobile_view{
    display: none;
}
 */
@media screen and (max-width:600px){
	body{
		border:8px solid #ece8dc;
	}
	.person_info_container {
		padding: 8px 0px 0px 12px;
	}
	.person_skill_container{
		/* padding-top:6px; */
	}
    h2{
        font-size:20px;
    }
	.card{
		margin-top: 4vh;
	}
    .label_title{
        font-size:14px;
    }
    .label_info{
        font-size:13px;
		margin-bottom: 1px;
    }
    .skill_name{
        font-size:18px;
        font-family: 'Public Sans', sans-serif !important;
        margin-top: 25%;
    }
	.skill_info{
		/* min-height:12vh; */
		padding:3px;
	}
	.certified_container{
		padding:2px;
    }
   /*  #cover1{
        display:none;
    }
    .mobile_view{
        display: block;
    } */
    .person_info {
        text-align: center;
        padding: 5px 2px 2px 5px;
    }
}
@media screen and (max-width:600px){
    .dateOfIssue{
        position: absolute;
        left:-35vw;
        padding-top: 0.5vh;
    }
    .givenName{
        position: absolute;
        left:-35vw;
    }
    .gender{
        position: relative;
        left:-35vw;
    }
    .socialIcon{
        width: 18vw;
        font-size: 55px;
        padding: 5px;
        height: 10vh;
    }
}
@media screen and (min-height:700px) and (min-width:700px){
    .dateOfExpiry{
        position: relative;
        left:-40vw;
        top:2vh;
    }
    .gender{
        position: relative;
        top:-3vh;
    }
}
/* .page
{
	transition: transform 1000ms ease;
}
.nextturn {
	transform: rotateX(-200deg);
	transform-origin: 0% 0%;
  }
  .prevturn {
	transform: rotateX(200deg);
	transform-origin: 0% 100%;
	z-index: 1;
 }
  .prev {
	transform: rotateX(200deg);
	transform-origin: 100% 0%;
	z-index: 1;
 } */
 .page
  {
	  transition: transform 600ms ease;
}

.nextturn {
	transform: rotateX(-180deg);
	transform-origin: 0% 0%;
  }
  .prevturn {
	transform: rotateX(180deg);
	transform-origin: 0% 100%;
	z-index: 1;
 }
/*  .prevturn {
	transform: rotateX(0deg);
	transform-origin: 100% 0%;
	z-index: 1;
 } */
.extra_margin{
    margin-top:37px;
}
h2{
    font-weight:bold;
}