/*.bp-mid	#top-panel {
	background-color: blue;
}

.bp-tablet #top-panel {
	background-color: pink;
}

.bp-mobile #top-panel {
	background-color: orange;
}*/

/*******************************
 ** Mid size devices
 *******************************/
.bp-mid #main-page {
	padding-top: 15%;
}

.bp-mid #profile-page {
	height: 700px;
	padding-top: 5%;
}

.bp-mid #profiles {
	padding: 0 5% 0 0;
	top: auto;
}

.bp-mid #profiles p {
	font-size: 1.2em;
	line-height: 1.5;
}

.bp-mid #profiles .summary-pt-div   {
	font-size: 1.2em;
}

.bp-mid #kenna {
	padding: 16% 0%;
}

.bp-mid .s-arrow-img {
	width: 60px;
}

.bp-mid .dot-badge {
	width: 22px;
	height: 22px;
}

.bp-mid .skills-lists {
	width: 940px;
	margin: auto;
}

.bp-mid .exp-year {
	padding: 0 !important;
}

.bp-mid .exp-item h4 {
	font-size: 1.5em;
}

.bp-mid .exp-item h5 {
	font-size: 1.1em;
}

.bp-mid .company-bp-list li {
	font-size: 1.3em;
}

.bp-mid .skill-item#g-blender {
	margin-left: -2%;
	margin-top: 5%;
}


/***********************************
 ***********************************
 ** Mobile and Tablet 
 ***********************************
 ***********************************/
.bp-mobile .full {
	padding: 3% 0;
}

.bp-tablet .menu-panel, .bp-mobile .menu-panel {
	padding: 0 5% !important;
}

.bp-tablet #menu-img-mobile, .bp-mobile #menu-img-mobile {
	display: inline-block;
	float: right;
	width: 30px;
}

.bp-tablet #top-panel, .bp-mobile #top-panel {
	font-size: 1.2em;
}

.bp-tablet #top-panel p, .bp-mobile #top-panel p {
	font-size: 1.3em;
	float: left;
	width: 80%;
	display: inline-block;
}

.bp-tablet #top-nav-mobile, .bp-mobile #top-nav-mobile {
	float: left;
	margin: 2% 0;
}

.bp-tablet #top-nav-mobile li, .bp-mobile #top-nav-mobile li {
	float: left;
	display: block;
	width: 100%;
	padding: 0 0 1% 0;
}

.bp-mobile #profile-page, .bp-tablet #profile-page {
	padding: 0;
}

.bp-mobile #profile-photo, .bp-tablet #profile-photo {
	width: 100%;
	padding: 0 0 8% 0;
}

.bp-mobile #profile-photo img, .bp-tablet #profile-photo img {
	border-radius: 0;
	width: 100%;
	content: url("../image/bg/hw_profile_short.jpg");
}

.bp-mobile #profiles, .bp-tablet #profiles {
	width: 100%;
	max-width: 100%;
	position: relative;
	left: 0;
	padding: 0 8%;
	margin-bottom: 15%;
	height: 100%;
}

.bp-mobile #profiles p {
	font-size: 1.2em;
	letter-spacing: 1.0px;
}

 .bp-tablet #profiles p {
 	font-size: 1.2em;
 }

.bp-mobile #profiles .summary-pt-div, 
.bp-tablet #profiles .summary-pt-div {
 	font-size: 1.2em;
 }

/***********************************
 ** Tablet size
 ***********************************/
.bp-tablet #main-page {
	padding: 25% 3%;
}

.bp-tablet #menu {
	margin-top: 20%;
	margin-bottom: 0%;
}

.bp-tablet #name {
	margin-bottom: 25%;
}

.bp-tablet .menu-title {
	font-size: 0.8em;
}

.bp-tablet .menu-sublist {
	margin-top: 2%;
}

.bp-tablet .menu-sublist li {
	padding: 0;
}

.bp-tablet .menu-sublist li a {
	font-size: 0.7em;
}

.bp-tablet .s-arrow-img {
	width: 30px;
}

.bp-tablet .proj-app-download {
	padding: 10px;
}

.bp-tablet .proj-app-download .download-link {
	width: 110px;
	margin: 0;
}

.bp-tablet .github-source {
	font-size: 1.2em;
	padding: 10px 3px;
}

.bp-tablet .github-icon {
	width: 70px;
}

.bp-tablet .dot-badge {
	width: 15px;
	height: 15px;
	margin: 0 1px;
}

.bp-tablet #edu-uw-logo {
	display: block;
	width: 100%;
	text-align: center;
}

.bp-tablet #uw-logo {
	margin: 0;
	width: 300px;
}

.bp-tablet #uw-edu-info {
	width: 100%;
	display: block;
	margin-bottom: 5%;
	text-align: center;
}

.bp-tablet .degree {
	font-size: 1.0em;	
}

.bp-tablet .school-name {
	font-size: 1.8em;
	line-height: 1.1em;
	font-weight: bold
}

.bp-tablet .edu-date {
	font-size: 0.8em;
}

.bp-tablet .subtitle {
	font-size: 0.7em;
}

/* resume - skills */
.bp-tablet #area-skills {
	padding: 0;
}

.bp-tablet .skill-item {
	font-size: 1.2em;
	display: inline-block;
}

.bp-tablet .skills-title {
	margin-left: 0;
	font-size: 1.6em;
	margin-left: 3%;
}

.bp-tablet .skills-lists {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}


.bp-tablet .skill-item#p-csharp {
	font-size: 3.0em;
	margin-left: 7%;
	margin-top: 5%;
}

.bp-tablet .skill-item#p-c {
	font-size: 1.7em;
	margin-left: 15%;
	margin-top: 0;
}

.bp-tablet .skill-item#p-python {
	font-size: 2.0em;
	margin-top: 2%;
	margin-left: 4%;
}

.bp-tablet .skill-item#p-js {
	font-size: 3.0em;
	margin-left: 54%;
	margin-top: -24%;
}

.bp-tablet .skill-item#p-rest {
	margin-left: 1%;
	margin-top: 3%;
}

.bp-tablet .skill-item#p-cpp {
	font-size: 3.4em;
	margin-top: 8%;
	margin-left: 5%;
}

.bp-tablet .skill-item#p-java {
	font-size: 1.8em;
	margin-top: 5%;
}

.bp-tablet .skill-item#p-jquery {
	font-size: 1.9em;
	margin-top: 17%;
	margin-left: -2%;
}

.bp-tablet .skill-item#p-mvc {
	font-size: 1.4em;
	margin-left: 16%;
}

.bp-tablet .skill-item#p-asp {
	font-size: 1.1em;
	margin-top: 6%;
}

.bp-tablet .skill-item#p-html {
	font-size: 2.4em;	
}

.bp-tablet .skill-item#p-nodejs {
	font-size: 1.1em;
	margin-left: 24%;
}



.bp-tablet .skill-item#g-ps {
	font-size: 2.4em;
	margin-left: 10%;
}

.bp-tablet .skill-item#g-ill {
	font-size: 1.1em;
	margin-left: 1%;
	margin-top: 10%;
}

.bp-tablet .skill-item#g-3dx {
	font-size: 1.7em;
	margin-left: 2%;
	margin-top: 12px;
} 

.bp-tablet .skill-item#g-maya {
	font-size: 2.4em;
	margin-left: 26%;
	margin-top: 7%;

}

.bp-tablet .skill-item#g-sketchup {
	font-size: 2.0em;
	margin-left: 30%;
	margin-top: 0;
}


.bp-tablet .skill-item#o-cartoon {
	font-size: 2.5em;
	margin-left: 7%;
}

.bp-tablet .skill-item#o-qa {
	font-size: 1.6em;
	margin-top: 17%;
}

.bp-tablet .skill-item#o-unity {
	font-size: 2.0em;
	margin-left: 27%;
	margin-top: 4%;
}

.bp-tablet .skill-item#o-gamemaker {
	font-size: 1.3em;
	margin-left: 54%;
	margin-top: -17%;
}
/* resume - experience */
.bp-tablet .exp-year {
	padding: 4% 0 !important;
}

.bp-tablet .company-logo {
	width: 200px;
}

.bp-tablet .exp-year h3 {
	font-size: 2.4em;
}

.bp-tablet .exp-year h3::before {
	content: ' ';
	border-bottom: 0.1em solid #29428f;
	left: 42%;
	right: 42%;
	top: 15%;
}

.bp-tablet .exp-company {
	margin: 0 10%;
}

.bp-tablet .exp-item {
	font-size:1.0em;
	margin: 10% 0;
}

.bp-tablet .exp-item h4 {
	margin-bottom: 0;
	font-size: 2.2em;
}

.bp-tablet .exp-item h5 {
	font-size: 1.6em; 
}

.bp-tablet .exp-item.bullet-pt {
	text-align: left;
}


.bp-tablet .company-bp-list li {
	font-size: 1.5em;
	line-height: 1.2em;
}

/* resume - education */
.bp-mobile #edu-uw-logo {
	display: block;
	width: 100%;
	text-align: center;
}

.bp-mobile #uw-logo {
	margin: 0;
	width: 200px;
}

.bp-mobile #uw-edu-info {
	width: 100%;
	display: block;
	margin-bottom: 15%;
	text-align: center;
}

.bp-mobile .degree {
	font-size: 0.8em;	
}

.bp-mobile .school-name {
	font-size: 1.5em;
	line-height: 1.1em;
	font-weight: bold
}

.bp-mobile .edu-date {
	font-size: 0.8em;
}

.bp-mobile .subtitle {
	font-size: 0.6em;
}

/* Contact Me */
.bp-tablet #contact-page {
	padding : 3% 10%;
}
.bp-tablet #contact-list h2{
	text-align: center;
	font-size: 2.5em;
}

.bp-tablet #contact-page h3 {
	font-size: 1.8em;
	margin-bottom: 10%;
}

.bp-tablet .contact {
	font-size: 1.3em;
	line-height: 1.2;
	width: 400px;
	margin: auto;
	float: none;
}

.bp-tablet .contact-logo {
	width: 150px;
}

.bp-tablet #contact-git {
	float: right;
}


/***********************************
 ** Mobile size 
 ***********************************/
/* main page*/
.bp-mobile #main-page {
	padding: 20% 0 35% 0;
	background-image: url("../image/bg/bluer_bg_1.jpg");
}

.bp-mobile #name {
	margin-bottom: 25%;
}

.bp-mobile #name h3 {
	font-size: 2.5em;
	text-shadow:
		-1px -1px 0 #ffffff,
		1px -1px 0 #ffffff,
		-1px 1px 0 #ffffff,
		1px 1px 0 #ffffff;
}

.bp-mobile #rotate-icon{
	left: auto;
	right: auto;
	margin-bottom: 8%;
}

.bp-mobile #rotate-item span {
	text-align: center;
	margin-top: 0;
	left: auto;
	right: auto;
	margin-bottom: 10%;
}

.bp-mobile #rotate-item span:nth-child(2) {
	left: auto;
	right: auto;
}

.bp-mobile #rotate-item span:nth-child(3) {
	left: auto;
	right: auto;
}

.bp-mobile #menu {
	display: none;
}

/* Project Section */
.bp-mobile .slider-frame {
	margin: 0;
}

.bp-mobile .s-arrow-img {
	width: 20px;
}

.bp-mobile .arrow-left {
	padding-left: 3px;
}

.bp-mobile .arrow-right {
	padding-right: 3px;
}

.bp-mobile .proj-app-download {
	padding: 3px;
}

.bp-mobile .proj-app-download .download-link {
	width: 80px;
	margin: 0;
}

.bp-mobile .github-source {
	font-size: 0.8em;
	padding: 3px 5px;
}

.bp-mobile .github-icon {
	width: 40px;
}

.bp-mobile .dot-badge {
	width: 10px;
	height: 10px;
	margin: 0 1px;
}

/***********************/
/* Resume */
.bp-mobile #resume-main {
	text-align: center;

}

.bp-mobile #resume-main p {
	width: 100%;
}

.bp-mobile #resume-main .font-small {
	font-size: 0.5em;
}

.bp-mobile #resume-main .download {
	width: 30px;
	height: 30px;
}

.bp-mobile #resume-main .pointer {
	margin-top: 3px;
	height:20px;
}

.bp-mobile .arrow {
	width: 20px;
	height: 20px;
}

.bp-mobile .resume-title {
	font-size: 1.2em;
}

/* resume - skills */
.bp-mobile #area-skills {
	padding: 0;
}

.bp-mobile .skill-item {
	font-size:1.0em;
	display: inline-block;
}

.bp-mobile .skills-title {
	margin-left: 0;
	font-size: 1.2em;
	margin-left: 3%;
}

.bp-mobile .skills-lists {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.bp-mobile .skills-title#programming {
	margin-right: 0;
	margin-right: 10%;
	border-bottom: 0.1em solid #423262;
}



.bp-mobile .skill-item#p-csharp {
	font-size: 1.7em;
	margin-left: 28%;
	margin-top: 5%;
}

.bp-mobile .skill-item#p-c {
	font-size: 1.7em;
	margin-left: 20%;
}

.bp-mobile .skill-item#p-python {
	font-size: 2.0em;
	margin-top: -8%;
	margin-left: 18%;
}

.bp-mobile .skill-item#p-js {
	font-size: 3.0em;
}

.bp-mobile .skill-item#p-rest {
	margin-left: 1%;
	margin-top: 10%;
}

.bp-mobile .skill-item#p-cpp {
	font-size: 3.4em;
	margin-top: 0px;
	margin-left: 2%;
}

.bp-mobile .skill-item#p-java {
	font-size: 1.8em;
	margin-top: 5%;
}

.bp-mobile .skill-item#p-jquery {
	font-size: 1.9em;
	margin-top: 24%;
	margin-left: -20%;
}

.bp-mobile .skill-item#p-mvc {
	font-size: 1.4em;
	margin-left: 16%;
}

.bp-mobile .skill-item#p-asp {
	font-size: 1.1em;
	margin-top: -5%;
}

.bp-mobile .skill-item#p-html {
	font-size: 2.3em;	
}

.bp-mobile .skill-item#p-nodejs {
	font-size: 1.1em;
	margin-left: 24%;
}

.bp-mobile .skills-title#graphic {
	margin-right: 0;
	margin-right: 50%;
	border-bottom: 0.1em solid #10321f;
}

.bp-mobile .skill-item#g-ps {
	font-size: 2.4em;
	margin-left: 10%;
}

.bp-mobile .skill-item#g-ill {
	font-size: 1.1em;
	margin-left: 1%;
	margin-top: 10%;
}

.bp-mobile .skill-item#g-3dx {
	font-size: 1.7em;
	margin-left: 2%;
	margin-top: 12px;
} 

.bp-mobile .skill-item#g-maya {
	font-size: 2.4em;

}

.bp-mobile .skill-item#g-sketchup {
	font-size: 2.0em;
	margin-left: 30%;
	margin-top: 0;
}

.bp-mobile .skills-title#others {
	border-bottom: 0.1em solid #733924;
}

.bp-mobile .skill-item#o-cartoon {
	font-size: 2.4em;
	margin-left: 20%;
}

.bp-mobile .skill-item#o-qa {
	font-size: 1.6em;
}

.bp-mobile .skill-item#o-unity {
	font-size: 1.6em;
	margin-left: 44%;
	margin-top: -100px;
}

.bp-mobile .skill-item#o-gamemaker {
	font-size: 1.3em;
	margin-left: 60%;
	margin-top: -10%;
}

/* resume - experience */
.bp-mobile .exp-year {
	padding: 3% 0 !important;
}

.bp-mobile .company-logo {
	width: 150px;
}

.bp-mobile .exp-year h3 {
	font-size: 2.0em;
}

.bp-mobile .exp-year h3::before {
	content: ' ';
	border-bottom: 0.1em solid #29428f;
	left: 40%;
	right: 40%;
	top: 65px;
}

.bp-mobile .exp-company {
	margin: 0 3%;
}

.bp-mobile .exp-item {
	font-size:0.7em;
	margin: 10% 0;
}

.bp-mobile .exp-item h4 {
	margin-bottom: 0;
}

.bp-mobile .exp-item h5 {
	font-size: 1.2em; 
}

.bp-mobile .exp-item.bullet-pt {
	text-align: left;
}

.bp-mobile .bullet-pt ul {
	margin-left: -5%;
}

.bp-mobile .company-bp-list li {
	font-size: 1.5em;
	line-height: 1.2em;
}

/* resume - education */
.bp-mobile #edu-uw-logo {
	display: block;
	width: 100%;
	text-align: center;
}

.bp-mobile #uw-logo {
	margin: 0;
	width: 200px;
}

.bp-mobile #uw-edu-info {
	width: 100%;
	display: block;
	margin-bottom: 15%;
	text-align: center;
}

.bp-mobile .degree {
	font-size: 0.8em;	
}

.bp-mobile .school-name {
	font-size: 1.5em;
	line-height: 1.1em;
	font-weight: bold
}

.bp-mobile .edu-date {
	font-size: 0.8em;
}

.bp-mobile .subtitle {
	font-size: 0.6em;
}

/* End of Mobile Resume */
/**********************************/

/* Contact Me */
.bp-mobile #contact-page {
	padding : 3% 5%;
}
.bp-mobile #contact-list h2{
	text-align: center;
	font-size: 2.0em;
}

.bp-mobile #contact-page h3 {
	font-size: 1.4em;
	margin-bottom: 10%;
}

.bp-mobile .contact {
	font-size: 1.1em;
	line-height: 1.2;
	width: 250px;
	margin: auto;
	float: none;
}

.bp-mobile #linkedin-git {
	/*width: 100%;*/
}

.bp-mobile .contact-logo {
	width: 80px;
}

.bp-mobile #contact-git {
	float: right;
}