/*      ******       **        **   ******       
        **    **     ****    ****   **    **     
        **    **     ** **  ** **   **    **     
        ********     **  ****  **   ******       
        **      **   **        **   **           
        **      **   **        **   **           
        ********     **  2016  **   **         */

/* google icon */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(font/GG_ICON.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* CSS Document */
* {
	box-sizing: border-box;
}
body {
	font-family: 'Maitree', serif;
	margin: 0;
}
a:link, a:visited {
	color: #2D87E5;
	text-decoration: none
}
a:hover {
	text-decoration: underline;
}
.bmp-intro-para {
	word-break: keep-all;
	font-size: 25px;
	padding: 0 22vw;
}
.bmp-chevron-press {
	background-color: #212121;
	color: white;
}
.bmp-arrow {
	font-size: 20px;
	text-align: center;
	position: fixed;
	bottom: 0.5vw;
	right: 0.5vw;
	display: block;
}
div.bmp-arrow bmp-short-key {
	width: 30px;
	height: 30px;
	margin: 2px 0;
}

/* Hide the scrollbar
::-webkit-scrollbar {
width: 5px;
height: 5px;
}*/

/* noti bar */
.bmp-noti-bar {background:white;z-index:99;position:fixed;border:1px solid white;margin:0 auto;border-radius:15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 10%;;
left: 50%;
transform: translate(-50%, -50%);
}
.bmp-noti-bar p{text-align:center;margin:5px 0;}
a#noti-close {color:#2D87E5;}
/*end noti bar */

/* name effect */
@-webkit-keyframes name-effect {
 0% {
transform:rotate(60deg);
opacity:0;
}
 50% {
transform:rotate(-20deg);
}
 100% {
transform:rotate(0deg);
opacity:1;
}
}
bmp-name-word {
	margin-right: 5vw;
}
/*BUI MINH PHUC STYLE*/
bmp-name-charac {
	color:#333333;
	-webkit-transition: text-shadow 0.1s ease;
	transition: text-shadow 0.1s ease;
	animation: name-effect 0.5s ease;
	-webkit-animation: name-effect 0.5s ease;
	display: inline-block;
	-webkit-animation-fill-mode: backwards;
}
bmp-name {
	color: #212121;
	margin-top: 15vw;
	text-align: center;
	font-size: 8.5vw;
	display: block;
	font-family: 'Lalezar', cursive;
}
/*FREELANCER STYLE*/
@-webkit-keyframes freelancer-letter {
 0% {
letter-spacing:0vw;
color:white;
}
 100% {
letter-spacing:4vw;
color:#333333;/*CHANGE COLOR HERE*/
}
}
bmp-freelancer {
	-webkit-animation: freelancer-letter 1s ease 1.4s;
	-webkit-animation-fill-mode: forwards;
	margin-bottom: 15vw;
	display: block;
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	color: white;
	font-weight: 400;
	font-size: 5vw;
}
/*IMAKEWEBSITE STYLE*/
@-webkit-keyframes imakewebsite-letter {
 0% {
letter-spacing:0vw;
color:white;
}
 100% {
letter-spacing:2.5vw;
color:#333333;/*CHANGE COLOR HERE*/
}
}
bmp-imakewebsite {
	-webkit-animation: imakewebsite-letter 1s ease 1.4s;
	-webkit-animation-fill-mode: forwards;
	margin-bottom: 15vw;
	display: block;
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	color: white;
	font-weight: 400;
	font-size: 2vw;
}
/* end name effect */


/* filter */
.bmp-invert {
	-webkit-filter: invert(100%)
}
.bmp-blur {
	-webkit-filter: blur(20px) grayscale(100%);
}
/* end filter */

/* SEC - HOME PAGE */
/*SECTION COLOR*/
.bmp-sec-title {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	padding: 1vw 0;
	font-size: 40px;
	text-transform: capitalize;
	background-color: #333333;
	color: white;
	margin: 2vw 0;
}
div.bmp-sec-content p {
	padding-left: 4vw;
	font-family: 'Maitree', serif;
	text-align: justify;
	padding-right: 4vw;
}
div.bmp-sec-content img {
	width: 10vw;
	height: 10vw;
	margin: 0 auto;
}
div.bmp-sec-content input, div.bmp-sec-content select {height:50px}
div.bmp-sec-content textarea,div.bmp-sec-content input, div.bmp-sec-content select {
	display:block;width:100%;margin:5px 0;padding:0.5vw;}
div.g-recaptcha {margin:0 auto}
#contact input[type='submit'] {background:#212121;color:white;border:0;transition:all 0.5s ease}
#contact input[type='submit']:hover {background:#4C4C4C;}
div#contact {margin:0 auto;width:60%;}
/*CHANGE SKILL BAR COLOR HERE*/
.bmp-skill-bar {
	text-align: center;
	color: #333333;
	background-color: #333333;
	border: 2px solid #333333;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bmp-skill-bar:hover {
	-webkit-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
	background-color: white;
}
.bmp-skill-90 {
	width: 90%;
}
.bmp-skill-80 {
	width: 80%;
}
.bmp-skill-70 {
	width: 70%;
}
.bmp-skill-60 {
	width: 60%;
}
.bmp-skill-50 {
	width: 50%;
}
.bmp-skill-40 {
	width: 40%;
}
.bmp-skill-30 {
	width: 30%;
}
.bmp-skill-20 {
	width: 20%;
}
.bmp-skill-10 {
	width: 10%;
}
.bmp-skill-90:before {
	content: "90%"
}
.bmp-skill-80:before {
	content: "80%"
}
.bmp-skill-70:before {
	content: "70%"
}
.bmp-skill-60:before {
	content: "60%"
}
.bmp-skill-50:before {
	content: "50%"
}
.bmp-skill-40:before {
	content: "40%"
}
.bmp-skill-30:before {
	content: "30%"
}
.bmp-skill-20:before {
	content: "20%"
}
.bmp-skill-10:before {
	content: "10%"
}
.bmp-skill-icon {
	text-align: center;
	font-size: 50px;
}
.bmp-skill-name {
	text-align: center;
	font-size: 35px;
}
.bmp-skill-box {
	width: 100%;
	margin: 0 auto;
	padding: 0 4vw 2vw 4vw;
}
.bmp-skill {
	margin-top: 1vw;
	text-align: left;
}

/* end SEC */

/* map home */
.bmp-map-contain {
	padding: 0 4vw;
}
.bmp-map-home {
	width: 100%;
	height: 320px;
}
/*end map home */

/* footer */
/*.bmp-footer{bottom:0;position:absolute}*/
bmp-line-footer {
	border-top: 1px solid #dddddd;
	display: block;
}
div.bmp-footer ul {
	margin:0.5vw 0 0 0;
	padding: 0;
}
div.bmp-footer {
	padding: 1vw 4vw;
}
div.bmp-footer li {
	display: inline;
	margin-right: 20px;
}
div.bmp-footer #copyright {
	float: right;
}
/*FOOTER'S COLOR*/
.bmp-footer a:link,.bmp-footer a:visited{
	transition:all 0.3s ease;
	border-radius:5px;
	padding:0 8px;
	font-size:23px;
	color: #00897B;
	text-decoration: none}
/*FOOTER'S HOVER*/
.bmp-footer a:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color:#ffffff;
	text-decoration: none;
}
.bmp-footer a#ft-home:hover {
	box-shadow:none;
	color:#000000;
}
.bmp-footer a#ft-mail:hover {
	background:#4CAF50;
}
.bmp-footer a#ft-fb:hover {
	background:#3F51B5;
}
.bmp-footer a#ft-ig:hover {
	background:#2196F3;
}
.bmp-footer a#ft-yt:hover {
	background:#F44336;
}
/* end footer */

/* -------------------------------------------------------------------------------------- ADMIN */
.admin-sign-in-frame{padding:0 15vw;margin:6vw 0;}
.admin-sign-in{background:#212121;}
.admin-sign-in .bmp-footer{color:white}
/*.admin-sign-in input{display:block;margin:2vw auto;width:100%;padding:1vw;font-size:30px;color:white;background:#212121;}

table{width:100%;border-collapse: collapse;}
tr:nth-child(odd){background-color: #f2f2f2}
td i{margin:0 0.5vw;padding-top:5px;transition:all 0.3s ease}
td i:hover{color:F28A35;text-shadow:0px 0px 10px #212121;}
td img {width:50px;transition:all 0.5s ease;}
td, th {text-align:center;padding:0 1vw;vertical-align:middle;}
th{text-transform:uppercase;border:0;height:5vw;
background: white; 
    background: -webkit-linear-gradient(white, #BBDEFB);
    background: -o-linear-gradient(white, #BBDEFB); 
    background: -moz-linear-gradient(white, #BBDEFB);
    background: linear-gradient(white, #BBDEFB); */

div.menu-toggle+div{display:none;}
div.menu-toggle h1 {transition: all 0.5s ease;border-left:5px solid #ffffff;padding:0 5px;}
div.menu-toggle h1:hover{border-left:5px solid #2D87E5;}
/* --------------------------------------------------------------------------------------- end ADMIN */

/* INSIDE - CONTENT FOR POST AND BLOG */
bmp-blockquote{display:block;border-left:7px solid #2D87E5;background:#F1F8E9;margin:2vw 0;}
bmp-blockquote div{overflow-x:auto;overflow-y:scroll;height:400px;padding:2vw;}
tab {display:inline-block;width:4vw;content:"asdf"}
chapter {display:block;font-size:40px;font-weight:700;margin-bottom:2vw;}
bmp-tag{display:inline-block;padding:0 5px;background:#2196F3;color:white;border-radius:10px;}
a.bmp-link-btn:link,a.bmp-link-btn:visited{background-color: white;width:100%;margin:2vw 0;
    color: black;
    border: 2px solid #2196F3;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display:block;}
a.bmp-link-btn:hover,a.bmp-link-btn:active{background-color: #2196F3;
    color: #ffffff;text-decoration: none;}
.bmp-content {padding:0 15vw; margin-bottom:20px;}
iframe-border{display:block;background:#212121;border:0px solid #212121;border-radius:0 0 5px 5px;color:white;margin-top:2vw;margin-bottom:4vw;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
iframe-border-porfolio{width:600px;display:block;background:#212121;border:0px solid #212121;border-radius:0 0 5px 5px;color:white;margin:2vw auto;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
bmp-iframe-wrap {display:block;position: relative;padding-bottom: 56.25%; /* 16:9 Aspect Ratio */}
bmp-iframe-wrap iframe{position: absolute;width: 100%!important;height: 100%!important;}
ten-anh{display:block;font-size:20px;text-align:center;font-style:italic;padding:0.5vw;}
ten-anh-porfolio{display:block;font-size:15px;text-align:center;;padding:0.5vw;}

.bmp-content img {width:100%}
.bmp-inside-container{background:white;padding:1vw 4vw 0 4vw;font-family: 'Noto Sans', sans-serif;font-size:28px;color:#212121;}
.bmp-inside-container h1 {font-size:90px;margin:1vw;text-align:center;}
div.bmp-icon-tit i{margin:0 auto;display:block}
.bmp-icon-tit img{width:12vw;}
.bmp-icon-tit {color:white;z-index:-1;position: fixed;font-size:150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
bmp-nav-next{text-align:center;border-radius:15px 15px 0 0;padding:2vw 0;display:block;}
bmp-nav-next a{}
bmp-nav-next a:link,bmp-nav-next a:visited{color:#ffffff;font-size:30px;font-weight:700;}
bmp-nav-next a:hover{text-decoration:none;}
/* end INSIDE */

/* PROJECT - WORK FRAME */
label{display:block;font-weight:700}
.bmp-project-page input,.bmp-add-project input,.bmp-add-project select,.bmp-add-project textarea{display:block;width:100%;border-width:0px;margin-bottom:2vw;padding:10px;
border-left:5px solid #2D87E5;
background-color:#EEEEEE;
background: -webkit-linear-gradient(left, #EEEEEE , white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #EEEEEE , white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #EEEEEE , white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #EEEEEE , white); /* Standard syntax (must be last) */
}
input.submit-btn{width:100%;padding:10px;font-weight:700;border-left:5px solid #DD2C00;
transition:all 0.3s ease;
background: -webkit-linear-gradient(left, #DD2C00 , white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #DD2C00 , white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #DD2C00 , white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #DD2C00 , white); /* Standard syntax (must be last) */}
input.submit-btn:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.bmp-project-page {
	padding: 1vw 4vw;
}
/*FRAME'S STYLE*/
bmp-project-frame {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: block;
	/*border: 0.5vw solid #69A9DF;*/
	background-color: #00695C;
	margin: 1vw;
	animation: project-frame 1s ease 0.8s;
	-webkit-animation-fill-mode: backwards;
}
/*IMG STYLE*/
bmp-project-img img, bmp-project-img {
	display: block;
	width: 100%;
	background-color: white;
	transition:all 0.5s ease;
}
bmp-project-img img:hover {
	
	-webkit-filter: invert(100%)
}
/*TITLE & CONTENT*/
bmp-project-tit{padding-top:10px;}
bmp-project-content{padding-bottom:10px;}
bmp-project-tit, bmp-project-content {
	display: block;
	text-align: center;
	color: white;
}
@-webkit-keyframes project-frame {
 0% {
opacity:0
}
 100% {
opacity:1
}
}
/* end PROJECT */

/* LAB - LAB & BLOG SHOW PAGE */
@-webkit-keyframes lab-line {
 0% {
transform:scale(1, 0)
}
 100% {
transform:scale(1, 1)
}
}
bmp-lab-line a:link, bmp-lab-line a:visited {
	color:inherit;
	text-decoration: none
}
div#lab-type{	animation: lab-line 1s ease 0.8s;
	-webkit-animation-fill-mode: backwards;
	text-align: center;
	font-size:80px;}
bmp-lab-line a:hover {
	text-decoration: none;
}
bmp-lab-line img{width:50px;}
bmp-lab-line {
	padding:0.5vw 1vw;
	background-color: #212121;
	color: white;
	width: 100%;
	display: block;
	text-align: center;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	transition: all 0.5s ease;
	animation: lab-line 0.8s ease 0.8s;
	-webkit-animation-fill-mode: backwards;
}
bmp-lab-line i {font-size:20px;}
/*hover of lab line*/
bmp-lab-line h3 {
	font-size:25px;
	margin: 5px 0;
	transition:all 0.5s ease;
}
bmp-lab-line h3:hover{font-size:35px;color:black;}
/* end lab */

/*GENERAL*/
#bmp-tips{color:#BBDEFB;margin-top:50px;}
@-webkit-keyframes logo-rotate {
 0% {
transform:rotate(360deg), scale(0, 0);
opacity:0;
}
 50% {
transform:scale(1.5, 1.5)
}
 100% {
transform:rotate(0deg), scale(1, 1);
opacity:1;
}
}
.bmp-logo {
	margin: 2vw auto;
	width: 90px;
	display: block;
	animation: logo-rotate 0.7s ease;
}
bmp-li {
	display: block;
	margin: 10px;
	font-size: 25px
}
bmp-li a:link, bmp-li a:visited, bmp-li a:hover {
	color: white;
	text-decoration: none;
}
.bmp-txt-italic {
	font-style: italic;
}
.bmp-btn-flo-right {
	float: right
}
.bmp-icon-bar {
	padding: 0 5px;
}
.bmp-sh-key-hvr:hover {
	color: #C80909;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.bmp-icon-bar:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 3px;
}
.bmp-btn-menu {
	z-index: 1;
	position: fixed;
	top: 0.5vw;
	right: 0.5vw;
}
.bmp-btn-trans {
	background-color: transparent;
	border: none;
	text-align: center;
}
.bmp-modal-menu {
	font-family: 'Noto Sans', sans-serif;
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
}
.bmp-btn-close {
	text-align: center;
	font-size: 25px;
	color: #F44336;
}
.bmp-modal-content {
	width: 70%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.bmp-modal-list h2 {
	color: #F44336;
	font-size: 25px;
	font-style: italic;
}
bmp-short-key {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: inline-block;
	text-align: center;
	border: 1px solid black;
	border-radius: 3px;
	width: 37px;
	height: 37px;
	margin-right: 3px;
}
.bmp-modal-head {
	font-weight: bold;
	color: #F44336;
	text-align: center;
	letter-spacing: 1.5vw;
	font-size: 40px;
}
.bmp-modal-r {
	text-align: right
}
.bmp-letter-spacing-fx {
	letter-spacing: 0.1vw;
	-webkit-animation: letter-fx 0.65s;
}
@-webkit-keyframes letter-fx {
 0% {
letter-spacing: -2px;
opacity:0;
}
 100% {
letter-spacing: 0.1vw;
opacity:1;
}
}

/* Responsive */
/* For mobile phones: */
[class*="bmp-col-"] {
	width: 100%;
	float: left;
}
@media only screen and (min-width: 300px) {
/* For phones: */
.bmp-col-s-1 {
	width: 8.33%;
}
.bmp-col-s-2 {
	width: 16.66%;
}
.bmp-col-s-3 {
	width: 25%;
}
.bmp-col-s-4 {
	width: 33.33%;
}
.bmp-col-s-5 {
	width: 41.66%;
}
.bmp-col-s-6 {
	width: 50%;
}
.bmp-col-s-7 {
	width: 58.33%;
}
.bmp-col-s-8 {
	width: 66.66%;
}
.bmp-col-s-9 {
	width: 75%;
}
.bmp-col-s-10 {
	width: 83.33%;
}
.bmp-col-s-11 {
	width: 91.66%;
}
.bmp-col-s-12 {
	width: 100%;
}
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.bmp-col-m-1 {
	width: 8.33%;
}
.bmp-col-m-2 {
	width: 16.66%;
}
.bmp-col-m-3 {
	width: 25%;
}
.bmp-col-m-4 {
	width: 33.33%;
}
.bmp-col-m-5 {
	width: 41.66%;
}
.bmp-col-m-6 {
	width: 50%;
}
.bmp-col-m-7 {
	width: 58.33%;
}
.bmp-col-m-8 {
	width: 66.66%;
}
.bmp-col-m-9 {
	width: 75%;
}
.bmp-col-m-10 {
	width: 83.33%;
}
.bmp-col-m-11 {
	width: 91.66%;
}
.bmp-col-m-12 {
	width: 100%;
}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.bmp-col-1 {
	width: 8.33%;
}
.bmp-col-2 {
	width: 16.66%;
}
.bmp-col-3 {
	width: 25%;
}
.bmp-col-4 {
	width: 33.33%;
}
.bmp-col-5 {
	width: 41.66%;
}
.bmp-col-6 {
	width: 50%;
}
.bmp-col-7 {
	width: 58.33%;
}
.bmp-col-8 {
	width: 66.66%;
}
.bmp-col-9 {
	width: 75%;
}
.bmp-col-10 {
	width: 83.33%;
}
.bmp-col-11 {
	width: 91.66%;
}
.bmp-col-12 {
	width: 100%;
}
}
.bmp-row::after {
	content: "";
	clear: both;
	display: block;
}