body { padding-top: 20px; padding-bottom: 40px; font-family: Helvetica, Tahoma, Arial, Georgia, Times; font-size: 16px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Helvetica, Tahoma, Arial, Georgia, Times; font-weight: 700;}

blockquote p { font-size: 16px; line-height: 1.6em; }

/* Masthead */
.header, .footer, .header h3 { font-family: Helvetica, Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: normal; }

/* Navigation */
h3.text-muted a {text-decoration: none; color: #999999; }
h3.text-muted a:hover { text-decoration: none; color: #0088cc; }

/* All <a> tag */
a {
    text-decoration: none!important;
    position: relative; }
a:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 0;
    background: #2a6496;
    transition: width 0.3s; }
a:hover:before {
    width: 100%; }
/* Except Navigation */
div.header a:before { content: none; }

/* Avatar */
img.avatar { margin-bottom: 30px; }

/* Animation Shake */
/*! * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-rotate
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-rotate {
  display: inline-block;
  transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-rotate:hover,
.shake-trigger:hover .shake-rotate {
  animation-play-state: running; }

@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(7.5deg); }
  4% {
    transform: translate(0, 0) rotate(2.5deg); }
  6% {
    transform: translate(0, 0) rotate(2.5deg); }
  8% {
    transform: translate(0, 0) rotate(-0.5deg); }
  10% {
    transform: translate(0, 0) rotate(2.5deg); }
  12% {
    transform: translate(0, 0) rotate(-5.5deg); }
  14% {
    transform: translate(0, 0) rotate(0.5deg); }
  16% {
    transform: translate(0, 0) rotate(0.5deg); }
  18% {
    transform: translate(0, 0) rotate(2.5deg); }
  20% {
    transform: translate(0, 0) rotate(1.5deg); }
  22% {
    transform: translate(0, 0) rotate(-5.5deg); }
  24% {
    transform: translate(0, 0) rotate(3.5deg); }
  26% {
    transform: translate(0, 0) rotate(4.5deg); }
  28% {
    transform: translate(0, 0) rotate(5.5deg); }
  30% {
    transform: translate(0, 0) rotate(0.5deg); }
  32% {
    transform: translate(0, 0) rotate(-0.5deg); }
  34% {
    transform: translate(0, 0) rotate(6.5deg); }
  36% {
    transform: translate(0, 0) rotate(4.5deg); }
  38% {
    transform: translate(0, 0) rotate(-5.5deg); }
  40% {
    transform: translate(0, 0) rotate(6.5deg); }
  42% {
    transform: translate(0, 0) rotate(-4.5deg); }
  44% {
    transform: translate(0, 0) rotate(6.5deg); }
  46% {
    transform: translate(0, 0) rotate(1.5deg); }
  48% {
    transform: translate(0, 0) rotate(-6.5deg); }
  50% {
    transform: translate(0, 0) rotate(6.5deg); }
  52% {
    transform: translate(0, 0) rotate(4.5deg); }
  54% {
    transform: translate(0, 0) rotate(-6.5deg); }
  56% {
    transform: translate(0, 0) rotate(-5.5deg); }
  58% {
    transform: translate(0, 0) rotate(7.5deg); }
  60% {
    transform: translate(0, 0) rotate(3.5deg); }
  62% {
    transform: translate(0, 0) rotate(6.5deg); }
  64% {
    transform: translate(0, 0) rotate(2.5deg); }
  66% {
    transform: translate(0, 0) rotate(-4.5deg); }
  68% {
    transform: translate(0, 0) rotate(-3.5deg); }
  70% {
    transform: translate(0, 0) rotate(-3.5deg); }
  72% {
    transform: translate(0, 0) rotate(0.5deg); }
  74% {
    transform: translate(0, 0) rotate(-5.5deg); }
  76% {
    transform: translate(0, 0) rotate(4.5deg); }
  78% {
    transform: translate(0, 0) rotate(-1.5deg); }
  80% {
    transform: translate(0, 0) rotate(1.5deg); }
  82% {
    transform: translate(0, 0) rotate(2.5deg); }
  84% {
    transform: translate(0, 0) rotate(0.5deg); }
  86% {
    transform: translate(0, 0) rotate(-2.5deg); }
  88% {
    transform: translate(0, 0) rotate(7.5deg); }
  90% {
    transform: translate(0, 0) rotate(4.5deg); }
  92% {
    transform: translate(0, 0) rotate(-6.5deg); }
  94% {
    transform: translate(0, 0) rotate(0.5deg); }
  96% {
    transform: translate(0, 0) rotate(5.5deg); }
  98% {
    transform: translate(0, 0) rotate(-6.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

.shake-rotate:hover,
.shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

/* Custom container */
.container > hr { margin: 30px 0; }
.container > hr.footer {margin-bottom: 15px; }

/* E-Mail */
.obfuscate { unicode-bidi: bidi-override; direction: rtl; }

/* Jumbotron */
.jumbotron { margin: 80px 0; }
.jumbotron h1 { font-size: 72px; line-height: 1; }
.jumbotron .btn { font-size: 21px; padding: 14px 24px; }
.marketing p { line-height: 25px; }
.marketing p.lead { line-height: 30px; }

/* Notes */
.notelist { width: 600px; margin: 0 auto; }
ul.listnotes { margin: 0 auto; }
ul.listnotes li {line-height: 30px; }

/* Note */
.note, .contact, .about, .error, .swatches { width: 85%; margin: 0 auto; line-height: 26px; }
.note h2.date, .swatch-log h2.date { font-size: 24.5px; font-weight: 300; font-style: italic; }

/* Swatches */
.swatch-log h2.date { margin-bottom: 30px; }
.swatch-log { margin: 30px auto 70px; height: 140px; }
ul.swatch { list-style: none; margin: 0 auto; padding: 0; height: 50px; }
ul.swatch li { text-transform: uppercase; display: inline; float: left; height: 80px; width: 75px; text-indent: -9999px; font-size: 14px; text-align: center; font-family: Helvetica, Tahoma, Arial, sans-serif; background-image: url(/img/glass.png); background-repeat: repeat-x; background-position: 0 50%;}
ul.swatch li:hover { height: 75px; width: 75px; vertical-align: middle; text-indent: 0; }
/*
ul.swatch li:last-child { webkit-border-top-right-radius: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-topright: 9px; -moz-border-radius-bottomright: 9px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
ul.swatch li:first-child { webkit-border-top-left-radius: 9px; -webkit-border-bottom-left-radius: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-bottomleft: 9px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
*/
.swatch-log p { font-size: 14px; clear: left; margin-top: 10px; font-family: Helvetica, Tahoma, Arial, sans-serif; text-transform: uppercase; }
.clear { clear: both; height: 20px; }

/* CV */
.cv {line-height: 23px; width: 90%; margin: 0 auto;}
.cv li { line-height: 23px; }
.cv h2 { font-size: 26.5px; }
.cv h1 { font-size: 32.5px; }

.notes, .contact, .about, .cv, .error, .swatches { margin-bottom: 30px; }

/* Contact */
iframe {font-family: 'Merriweather', Georgia, Times; font-size: 16px;}

/* About */
.about ul.list-unstyled li { line-height: 30px; text-indent: -30px; margin-left: 30px;}

/* Guides */
.guide { width: 90%; margin: 0 auto 60px auto; line-height: 26px;}
.guide .title { padding: 100px 30px 0px; width: 100%; height: 60%; margin-bottom: 40px; background: #d5d5d5; color: #428bca; }
.guide .title h1 { font-size: 46px; color: #181818; }
.guide p { margin: 0 0 1em;  }
.guide img { border: solid 1px #d5d5d5; border-radius: 4px; margin: 40px auto; display: block; }
.guide .notes { font-size: 12px; }
.guide .notes h2 { font-size: 14px; }

/* Code */
pre.prettyprint { padding: 10px !important; margin: 40px; font-size: 12px;}

.step { border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	width: 35px;
	height: 35px;
	background: #4679BD;
	color: #FFF;
	float: left;
	text-align: center;
	font-size: 24px;
	padding-top: 5.5px;
	margin: 5px 15px 0px 0px;
	font-family: 'Montserrat', Helvetica, sans-serif; }