@font-face { font-family: Open Sans; src: url('Delicious-Roman.otf'); }
html，body{
	color: #434242;
	font-family: 'Roboto Slab', serif;
	height: 100%;
}
body{
	background: #F3EFE0;
	font-size: 15px;
	line-height: 1.64;
	color: #434242;
  /* font-family: 'Open Sans', sans-serif !important;*/
  font-family: 'Roboto Slab', serif;
}
.container{
	max-width: 1280px;
	padding: 40px 180px;
}
.jumbotron .overlay{
	background-color: #22A39F;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	opacity: 0.75;
	filter:alpha(opacity=75);
	z-index: 2；
}
.jumbotron .container{
	position: relative;
	text-align: center;
	z-index: 4;
	top: 28%;
}
.jumbotron .container > * {
	text-align: center;
	color: #FFFFFF;
}
.jumbotron .container h1{
	padding-bottom: 20px;
	border-bottom: 1px solid #FFFFFF;
	border-bottom-color: rgb(255, 255, 255, 0.35);
	display: inline-block;
}

.jumbotron{
	background: no-repeat center right fixed url();
	margin-bottom: 0px;
	background-size: cover;
	padding: 0px;

	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
}

.jumbotron .scroll-down{
	height: 80px; width: 110px; display: block;
	position: absolute;
	bottom: 0px; right: 5%;
	background-color: #222222;
	text-align: center;
	z-index: 6;
}
h1, h4{
	font-weight: 700;
	margin-bottom: 10px;
}

h1, h2, h3{
    font-family: 'Indie Flower', cursive;
    margin-bottom: 20px;
}

h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b {
    font-family: 'Roboto Slab', serif;
    margin-bottom: 20px;
}
h2,h3 { font-weight: 300; color: #22A39F; }

p.lead {
  font-family: 'Indie Flower', cursive;
	text-align: center;
	color: #727878;
}
p.lead a{
	color: #FFFFFF;
	text-decoration: underline;
}
p.lead a:hover{
	text-decoration: none;
}
hr{
	margin: 40px 0px;
	border-color: #727878; opacity: 0.2; filter:alpha(opacity=20);
}

.jumbotron .scroll-drown .glyphicon{
	color: #FFFFFF;
	font-size: 30px;
	padding-right: 2px;
	padding-top: 20px;
	animation-name:wiggle;
	animation-duration:1.2s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-direction:normal;
}
.jumbotron .scroll-drown{
	height: 80px; width: 110px;
	display: block;
	position: absolute;
	bottom: 0px; right: 5%; background-color: #222222;
	text-align: center;
	z-index: 6;
}
.jumbotron .scroll-drown:hover .glyphicon { padding-top: 25px; }



.navbar{
	border: 0px; background: #222222;
	position: absolute;
	right: 5%;
	top: 100%;
	width: 110px;
	z-index: 999;
}
.navbar .navbar-nav{
	float: none;
}
.navbar-nav{
	margin: 0px;
}

.navbar .navbar-collapse{
	padding: 0px; max-height: none;
}
.navbar .navbar-nav{
	float: none;
}
.navbar .nav > li{
	display: block;
	float: none;
	height: 80px;
}
.navbar .nav > li a{
	display: block; height: 80px;
	text-align: center;
	padding-top: 30px;
	font-weight: 600;
}
.navbar .nav > li a:hover, .navbar .nav > li a:focus{
	color: #999999;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
	background: #22A39F; color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar{
	background: #222222;
}

.fixed .navbar{
  position: fixed;
  top: 60px;
}

.background-white{
	background-color: white;
}

#profile .row > div{
	margin-bottom: 40px;
	margin-top: 20px;
}


#profile .row > div img{
	width: 100%; max-width: 246px; height: auto;
	margin-left: 30px;
	margin-top: 50px;
	border-radius: 50%;
}

/*Profile*/
h2{
	font-size: 54px;
	text-align: center;
}
h3{
	font-size: 28px;

}

/* linkin link*/
#nonsensewrap {
  position: absolute;
}

#wLinkedIn a {
    display: inline-block;
    color: #000 !important;
    background: #fdfdfd;
    background: -webkit-linear-gradient(#fdfdfd, #eee);
    background: -moz-linear-gradient(#fdfdfd, #eee);
    background: -o-linear-gradient(#fdfdfd, #eee);
    background: linear-gradient(#fdfdfd, #eee);
    text-decoration: none;
    font-size: 12px !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: inherit;
    font-weight: bold;
    border: 1px solid #bbb;
    border-radius: 3px;
}

#wLinkedIn a:hover {
    opacity: 0.8;
}

#icon-bg {
    display: inline-block;
    background: #007bb6;
    background: -webkit-linear-gradient(#81bedb, #007bb6);
    background: -moz-linear-gradient(#81bedb, #007bb6);
    background: -o-linear-gradient(#81bedb, #007bb6);
    background: linear-gradient(#81bedb, #007bb6);
    color: #fff;
    padding: 0px 5px;
    border-radius: 3px;
    border: 1px solid #3f7eb7;
    font-size: 16px;
    margin: -1px;
}

#icon-label-bg {
    display: inline-block;
    padding: 3px 5px 3px 5px;
}
/* End of linkin link*/






#experience .experience .experiences-details > span{
	display: block;
	margin-bottom:  6px;
}

#experience h3{
	color: #22A39F;

}

#experience .experience p > strong{
	display: block;
	padding-top: 8px;
	margin-bottom: 10px;
}

#experiences .experience p > strong { display: block; padding-top: 8px; margin-bottom: 10px; }
#experiences .experience .experience-details { display: block; margin-top: 6px; }
#experiences .experience .experience-details * { color: #22A39F; }
#experiences .experience .experience-details .seperator { color: #BCBCBC; }

#experience .career .career-row{
  display: block;
  padding-top: 8px;
	margin-bottom: 50px;
}

#project .project  p > strong{
	display: block;
}


#project .project > div img{
	padding-left: 20px;

}

#project .project h3{
	color: #22A39F;

}

#project .project .experiences-details {
	margin-top: -20px;
}


ul.no-bullets {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#ability {
	padding-top: 100px;
	padding-bottom: 100px;
}
#ability hr{
	padding-bottom: 60px;
}
#ability  .row {
	margin-bottom: 40px;
	margin-top: 20px;
}

#ability ul > li .ability-score {float: right;}
#ability ul > li .ability-score .glyphicon{
	color: #DFE0E0;
}
#abilities ul > li .ability-title { display: inline-block; width: 60%; }
#ability ul > li .ability-score .glyphicon.filled { color: #22A39F; }
#abilities ul > li:hover .ability-score .glyphicon { margin-left: 2px; }
#abilities ul > li:hover { background: #F2F2F2; }


.background-grey {
    background: #434242;
}

.icon { display: inline-block; background: url(images/sm_icon_sprite.png) no-repeat; height: 32px; width: 32px; }
.icon.icon-twitter { background-position: 0px 0px; }
.icon.icon-linkedin { background-position: 0px -32px; }
.icon.icon-skype { background-position: 0px -64px; }
.icon.icon-email { background-position: 0px -96px; }

#contact *{color: #FFFFFF;}

#contact a { display: block; line-height: 32px; margin-bottom: 20px; opacity: 0.6; filter:alpha(opacity=60);  }

#contact .glyphicon, #contact .fa{
	margin-right: 15px;
}
#contact h2{
	margin-top: 80px;
}
#contact hr{
	margin-bottom: 100px;
}

#contact a:hover,
#contact a:focus{
	 opacity: 1; filter:alpha(opacity=100); text-decoration: none;
}

@media (max-width: 767px) {
	.jumbotron .container{
		top: 20%;
		padding-top: 0px;
	}

	.navbar{
		left: 0px; width: 100%;
	}
   .fixed .navbar { top: 0px; }
	.container {padding: 60px 20px; min-width: 280px;}

	.hidden-phone { display: none; }

	#profile .row{text-align: center;}
	#nonsensewrap{
		position: relative;
		margin: auto;
	}

}



@media (max-width: 767px) {
  .jumbotron:before {
    bottom: 100px;
    left: 20px;
    right: 20px;
    top: 20px;
  }
  .jumbotron .container { top: 20%; padding-top: 0px; }
  .jumbotron .scroll-down { width: 100%; right: 0px; }

  .navbar  { left: 0px; width: 100%; }
  .navbar .nav > li { height: 60px; }
  .navbar .nav > li a { height: 60px; text-align: center; padding-top: 20px; font-weight: 600; color: #FFFFFF; }

  .fixed .navbar { top: 0px; }

  .container { padding: 60px 20px; min-width: 280px; }
  .hidden-phone { display: none; }

  #profile .row * { text-align: center; }

  #experiences .experience .experience-details > span { display: block; margin-bottom: 6px; }
  #experiences .experience .experience-details .seperator { display: none; }

  #contact { padding-bottom: 60px; }
  #contact a .icon { float: left; margin-right: 10px; }
}

@media only screen and (orientation: portrait) and (max-width: 767px)  {
    .jumbotron {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (max-width: 767px)  {

    .jumbotron {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }

  .jumbotron .lead { display: none; }
}

@keyframes wiggle {
  0% {
    padding-top: 20px;
  }

  50% {
    padding-top: 28px;
  }

  100% {
    padding-top: 20px;
  }
}






/*html, body {
  color: #434242;
  font-family: 'Open Sans', sans-serif !important;
  height: 100%;
   }
body {
    background: #F3EFE0;
    font-size: 15px;
    line-height: 1.64;
    color: #434242;
    font-family: 'Open Sans', sans-serif !important;
}
.background-white {
    background: #FFFFFF;
}
.background-gray {
    background: #434242;
}


.jumbotron .overlay {
    background-color: #22A39F;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.75;
    filter: alpha(opacity=75);
    z-index: 2;
}
.jumbotron .container{
  text-align: center;
  top: 28%;
}
.container {
    max-width: 1280px;
    padding: 40px 180px;
}
.jumbotron .container h1 {
    padding-bottom: 20px;
    border-bottom: 1px solid #FFFFFF;
    border-bottom-color: rgba(255,255,255,0.35);
    display: inline-block;
}
.jumbotron .container > * {
    text-align: center;
    color: #FFFFFF;
}
h1, h4 {
    font-weight: 700;
    margin-bottom: 10px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b {
    font-family: 'Open Sans', sans-serif !important;
    margin-bottom: 20px;
}
h2,h3 { font-weight: 300; color: #22A39F; }
h2 { font-size: 54px; text-align: center; }
h3 { font-size: 28px; }

p.lead { text-align: center; color: #727878; }
p.lead a { color: #FFFFFF; text-decoration: underline; }
p.lead a:hover { text-decoration: none; }
ul.no-bullets { list-style-type: none; margin: 0px; padding: 0px; }
hr { margin: 40px 0px; border-color: #727878; opacity: 0.2; filter:alpha(opacity=20); }

.project-referal { margin-top: 40px; }
.project-referal p { font-style: italic; color: #999999; }

.btn-primary { background-color: #22A39F; border-color: #1c8784; }
.btn-primary:hover { background-color: #1c8784;  border-color: #1c8784; }

.icon { display: inline-block; background: url(images/sm_icon_sprite.png) no-repeat; height: 32px; width: 32px; }
.icon.icon-twitter { background-position: 0px 0px; }
.icon.icon-linkedin { background-position: 0px -32px; }
.icon.icon-skype { background-position: 0px -64px; }
.icon.icon-email { background-position: 0px -96px; }


.jumbotron {
  background: no-repeat center right fixed url(images/background.jpg);

  -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');

  margin-bottom: 0px;
  padding: 0px;
}
.jumbotron .overlay { background-color: #22A39F; position: absolute; top:
  0px; bottom: 0px; left: 0px; right: 0px; opacity: 0.75; filter:alpha(opacity=75); z-index: 2; }

.jumbotron .container {position: relative;top: 28%;z-index: 4;text-align: center;}
.jumbotron .container > * { text-align: center; color: #FFFFFF; }
.jumbotron .container h1 {
  padding-bottom: 20px; border-bottom: 1px solid #FFFFFF;
  border-bottom-color: rgba(255,255,255,0.35); display: inline-block; }

.jumbotron .container .lead { font-size: 28px; }
.jumbotron .scroll-down {
  height: 80px; width: 110px; display: block; position: absolute;
  bottom: 0px; right: 5%; background-color: #222222; text-align: center; z-index: 6; }

.jumbotron .scroll-down .glyphicon {
  color: #FFFFFF;
  font-size: 30px;
  padding-right: 2px;
  padding-top: 20px;
  animation-name: wiggle;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.jumbotron .scroll-down:hover .glyphicon { padding-top: 25px; }

.navbar  {
 border: 0px; background-color: #222222; position: absolute; top: 100%;
 right: 5%; width: 110px; z-index: 999;
}
.navbar .navbar-collapse {
  padding: 0px; max-height: none; }
.navbar .navbar-nav {
  float: none; }
.navbar-nav {
  margin: 0px; }
.navbar .nav > li {
  display: block; float: none; height: 80px; }
.navbar .nav > li a {
  display: block;  height: 80px; text-align: center; padding-top: 30px; font-weight: 600; color: #FFFFFF; }
.navbar .nav > li a:hover, .navbar .nav > li a:focus {
  color: #999999; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background: #22A39F; color: #FFFFFF; }
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
  background: #222222; }

.fixed .navbar {
    position: fixed;
    top: 60px;
}

#profile .row > div { margin-bottom: 20px; }
#profile .row > div img { width: 100%; max-width: 246px; height: auto; }

#experiences .experience { margin-bottom: 20px; }
#experiences .experience p > strong { display: block; padding-top: 8px; margin-bottom: 10px; }
#experiences .experience .experience-details { display: block; margin-top: 6px; }
#experiences .experience .experience-details * { color: #22A39F; }
#experiences .experience .experience-details .seperator { color: #BCBCBC; }

#abilities ul > li { min-height: 30px; padding: 3px 0px; }
#abilities ul > li:hover { background: #F2F2F2; }
#abilities ul > li .ability-title { display: inline-block; width: 60%; }
#abilities ul > li .ability-score { float: right; }
#abilities ul > li .ability-score .glyphicon {
  color: #DFE0E0;
  font-size: 14px;

  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#abilities ul > li .ability-score .glyphicon.filled { color: #22A39F; }

#abilities ul > li:hover .ability-score .glyphicon { margin-left: 2px; }

#interests .left { float: left; }
#interests .right { float: right; }
#interests img { width: 80%; height: auto; }
#interests .right img { float: right; }
#interests .interest-content { padding: 40px 0px; }

#interests .row:hover .left img {
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
}

#interests .row:hover .right img {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
}

/* #projects .row { margin: 0px; } // bootstrap 3.1- hack */
/*#projects .row > div { margin-bottom: 30px; }
#projects figure { position: relative; overflow: hidden; }
#projects figure h3 { color: #FFF; font-weight: 600; margin-bottom: 5px; }
#projects figure p > strong { width: 60px; display: inline-block; margin: 0px; }
#projects figure img { width: 110%; }
#projects figure figcaption {
    padding: 20px 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
#projects figure a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
#projects figure .icon {
  background: #22A39F;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 48px;
  height: 48px;
}
#projects figure .icon span {
  font-size: 18px;
  line-height: 18px;
  padding: 15px;
}

#contact { padding-bottom: 200px; }
#contact h2, #contact .row * { color: #FFFFFF; }
#contact a { display: block; line-height: 32px; margin-bottom: 20px; opacity: 0.6; filter:alpha(opacity=60);  }
#contact a .icon { float: left; margin-right: 20px; }
#contact a:hover { opacity: 1; filter:alpha(opacity=100); text-decoration: none; }

.opl {
  position:absolute;
  top:100px;
  left:0px;
  z-index:99999;
}

.opl a {
  width:73px;
  height:56px;
  text-indent:-9999px;
  display:block;
  background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}

@media (max-width: 1200px) {
  #interests .interest-content { padding: 20px 0px; }
}

@media (max-width: 767px) {
  .jumbotron:before {
    bottom: 100px;
    left: 20px;
    right: 20px;
    top: 20px;
  }
  .jumbotron .container { top: 20%; padding-top: 0px; }
  .jumbotron .scroll-down { width: 100%; right: 0px; }

  .navbar  { left: 0px; width: 100%; }
  .navbar .nav > li { height: 60px; }
  .navbar .nav > li a { height: 60px; text-align: center; padding-top: 20px; font-weight: 600; color: #FFFFFF; }

  .fixed .navbar { top: 0px; }

  .container { padding: 60px 20px; min-width: 280px; }
  .hidden-phone { display: none; }

  #profile .row * { text-align: center; }

  #experiences .experience .experience-details > span { display: block; margin-bottom: 6px; }
  #experiences .experience .experience-details .seperator { display: none; }

  #interests .left { float: none; }
  #interests .right { float: none; }

  #interests > * { text-align: center; }
  #interests img { width: 50%; height: auto; float: none !important; }
  #interests .interest-content { padding: 20px 0px; }

  #contact { padding-bottom: 60px; }
  #contact a .icon { float: left; margin-right: 10px; }
}

@media only screen and (orientation: portrait) and (max-width: 767px)  {
    .jumbotron {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (max-width: 767px)  {

    .jumbotron {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }

  .jumbotron .lead { display: none; }
}

@keyframes wiggle {
  0% {
    padding-top: 20px;
  }

  50% {
    padding-top: 28px;
  }

  100% {
    padding-top: 20px;
  }
}*/