html{
	height:100%;
	width:100%;
}
body{
    background-color:#fdcc55;
	font-family: 'Public Sans', sans-serif !important;
	height:100%;
	width:100%;
	border:8px solid #ece8dc;
}

*{
    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;
    /* height: 65vh; */
    padding: 5px;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.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);
}

/* .person_skill_container{
    background-color:white;
    vertical-align: middle;
    border-radius: 20px;
    border-left-color: black;
    border-left-width: 4px;
    border-left-style: solid;
    height: 50vh;
    padding: 5px;
} */

.person_skill_container{
	padding:0;
	padding-top:6px;
	border-top:3px solid black;
}
.border_right{
    border-right: 2px solid black;
    border-bottom: 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;
}
.skill_name{
    font-family: 'Public Sans', sans-serif !important;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

/* .skill_info img{
    transform: rotate(14deg);
}
 */
.nopadding{
	padding:0;
}

@media screen and (max-width:600px){
	body{
		border:8px solid #ece8dc;
	}
	.person_info_container {
		padding: 8px 12px 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:13px;
        font-family: 'Public Sans', sans-serif !important;
		margin-top: 16px;
    }
	.skill_info{
		min-height:12vh;
		padding:3px;
	}
	.certified_container{
		padding:2px;
	}
}

@media screen and (max-width:600px) and (min-height:600px){
    .dateOfIssue{
        position: absolute;
        left:-35vw;
        padding-top: 0.5vh;
    }
    .givenName{
        position: absolute;
        left:-35vw;
    }
    .gender{
        position: relative;
        left:-35vw;
    }
}

@media screen and (min-height:740px){
    .givenName{
        position: relative;
    }
    .dateOfIssue{
        position: relative;
        padding-top: 0.5vh;
    }
    .dateOfExpiry{
        position: relative;
        left: -39vw;
    }
    .gender {
        position: relative;
        top: -4vh;
    }
}