@import url(//fonts.googleapis.com/css?family=Abel|Shadows+Into+Light);

/* NO SCRIPT */
noscript {
  display: block;

  background-color: #600;
  color: #fff;
}

noscript h1 {
  font-size: 96px;
}

body {
  font-size: 18px;
  min-width: 320px;
}

img,
object {
  max-width: 100%;
}

/* GENERAL */
.alert,
.btn,
code,
.form-control,
.input-group-addon,
pre {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.img-border {
  border: 4px solid #ccc;
  margin: 16px 0;
}

/* FORM CONTROLS */
.help-block {
  color: #aaa;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 8px;
}

label {
  font-size: 18px;
}

/* CODE */
pre, code { padding: 4px; };
pre code { padding: 0; }

/* COLOURS */
.home:hover        { color: #4bdd4b!important; }
.github:hover      { color: #000000!important; }
.google-plus:hover { color: #dd4b39!important; }
.rss:hover         { color: #ff6600!important; }
.twitter:hover     { color: #4099ff!important; }

a, a:hover, a:active, a:visited, a:focus {
  color: #f8f8f8;
  text-decoration: none;
}
a.btn-default { color: #000; }

/* TYPOGRAPHY */
body {
  background-color: #222;
  color: #fcfcfc;
  font-family: 'Abel';
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Shadows Into Light';
}

p {
  font-size: 18px;
  margin-bottom: 16px;
  text-align: justify;
}

p.signature,
p.statement {
  font-family: 'Shadows Into Light';
}

p.statement {
  font-size: 32px;
  margin: 64px inherit;
  text-align: center;
}

p.subtitle {
  font-size: 12px;
  margin-top: -4px;
}

.tooltip {
  font-size: 14px;
}

/* HEADER */
#banner {
  background-color: #444;
  min-height: 256px;
  padding: 42px 16px;
  text-align: center;
}

#banner h1 {
  margin: 0;
  padding: 0;
}

nav {
  border-radius: 0!important;
  width: 100%;
  z-index: 1038;
}

nav.animated {
  transition: top 0.2s ease-in-out;
}

.navbar {
  border: 0;
  height: 52px;
  margin-bottom: 0;
  position: absolute;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  max-width: 540px;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar .navbar-collapse.collapsing,
.navbar .navbar-collapse.in {
  background-color: #f8f8f8;
}

.navbar-nav.nav-justified > li {
  float:none;
}

.navbar-nav > li > a {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  font-family: 'Abel';
  font-size: 22px;
  padding: 12px 0 12px 0;
  text-align: center;
}

.navbar-nav > li > a:hover {
  border-bottom-color: #444;
}

.navbar-brand {
  height: 52px;
  padding: 3px 16px;
}

.navbar-icons {
  padding: 12px 0;
}

.navbar-icon  {
  margin: 15px 0px;
}

.navbar-toggle {
  margin: 7px 15px;
  padding: 8px 10px;
}

.navbar-default {
  border-color: #f8f8f8;
}

.navbar-default .navbar-nav>li>a {
  color: #222;
  min-width: 108px;
}

.navbar-default .navbar-icon {
  color: #444;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  border-radius: 0;
  color: #222;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
  color: #fcfcfc;
  background-color: #222;
  border-top-color: #f8f8f8;
  border-bottom-color: #222;
}


/* PAGE CONTENT WRAPPERS */
.page-content {
  margin: 0 auto;
  max-width: 1170px;
  padding-top: 90px;
  z-index: 1024;
}

.page-container {
}




/* FOOTER */
footer {
  background-color: #222;
  border-top: 16px solid #444;
  margin-top: 64px;
  padding: 32px;
  z-index: -1000;
}

footer .copyright,
footer .copyright a {
  color: #fcfcfc;
  text-decoration: none;
}

footer .cc-by-sa {
  height: 22px;
  margin-right: 8px;
}



/* CSS WIDGETS */
.progress-radial {
  display: inline-block;
  margin: 8px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #222;
  background-color: #444;
  color: #fcfcfc;
}

.progress-radial .overlay {
  position: absolute;
  width: 72px;
  height: 72px;
  background-color: #666;
  border-radius: 50%;
  margin-left: 12px;
  margin-top: 12px;
  text-align: center;
  line-height: 72px;
  font-size: 12px;
}

.progress-0   { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg,  #444 50%, #222 50%, #222); }
.progress-5   { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #444 50%, #222 50%, #222); }
.progress-10  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #444 50%, #222 50%, #222); }
.progress-15  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #444 50%, #222 50%, #222); }
.progress-20  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #444 50%, #222 50%, #222); }
.progress-25  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #444 50%, #222 50%, #222); }
.progress-30  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #444 50%, #222 50%, #222); }
.progress-35  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #444 50%, #222 50%, #222); }
.progress-40  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #444 50%, #222 50%, #222); }
.progress-45  { background-image: linear-gradient(90deg,  #222 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #444 50%, #222 50%, #222); }
.progress-50  { background-image: linear-gradient(-90deg, #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-55  { background-image: linear-gradient(-72deg, #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-60  { background-image: linear-gradient(-54deg, #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-65  { background-image: linear-gradient(-36deg, #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-70  { background-image: linear-gradient(-18deg, #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-75  { background-image: linear-gradient(0deg,   #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-80  { background-image: linear-gradient(18deg,  #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-85  { background-image: linear-gradient(36deg,  #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-90  { background-image: linear-gradient(54deg,  #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-95  { background-image: linear-gradient(72deg,  #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }
.progress-100 { background-image: linear-gradient(90deg,  #444 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #444 50%, #222 50%, #222); }



/* TIMELINE */
.list-timeline {
  border-left: 2px solid #444;
  margin-left: 32px;
  padding-left: 14px;
}

.list-timeline > li {
  list-style-image: url('../img/list-style.png');
  padding: 8px 0 8px 16px;
}

.list-timeline > li,
.list-timeline > li a,
.blog {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.list-timeline > li:hover {
  list-style-image: url('../img/list-style-hover.png');
}
.list-timeline > li.cross {
  list-style-image: url('../img/list-style-cross.png');
}
.list-timeline > li.cross:hover {
  list-style-image: url('../img/list-style-cross-hover.png');
}

.list-timeline > li.square {
  list-style-image: url('../img/list-style-square.png');
}
.list-timeline > li.square:hover {
  list-style-image: url('../img/list-style-square-hover.png');
}
.list-timeline > li.triangle {
  list-style-image: url('../img/list-style-triangle.png');
}
.list-timeline > li.triangle:hover {
  list-style-image: url('../img/list-style-triangle-hover.png');
}

.list-timeline > li a,
.blog {
  color: #f8f8f8;
}

.list-timeline > li.square a:hover,
.blog:hover {
  color: #fb4;
}
.list-timeline > li.cross a:hover { color: #f8f8f8; }
.list-timeline > li.triangle a:hover { color: #f8f8f8; }


.list-timeline > li .period {
  font-size: 18px;
  line-height: 18px;
  position: relative;
  top: -2px;
}

.list-timeline > li > h2 {
  font-size: 24px;
  margin: 0 0 2px 0;
}
.list-timeline > li > h3 {
  font-size: 20px;
  margin: 2px 0 8px 0;
}

/* ADMIN */
.login-logo {
  margin-bottom: 48px;
  text-align: center;
}

.login-form {
  margin-top: 48px;
}

/* BLOG */
.blog-content a {
  color: #fb4;
}

.blog-tags .blog-tag+.blog-tag:before {
  content: ", ";
}

/* CONTACT */
.contact-map,
.contact-map iframe {
  border: 0;
  height: 384px;
  margin: 0 0 64px 0;
  width: 100%;
}

.contact-map .overlay {
  background: rgba(0,0,0,.3);
  border: 0;
  height: 384px;
  margin-top: -480px;
  position: relative;
  top: 384px;
  width: 100%;
}

.contact-media {
  display: inline-block;
  min-height: 80px;
  min-width: 172px;
  margin-bottom: 0;
  vertical-align: top;
}
.contact-media .contact-icon {
  float: left;
  height: 80px;
  padding-top: 4px;
  padding-right: 8px;
}
.contact-media .contact-icon a {
  color: #f8f8f8;
}
.contact-media .contact-title {
  font-size: 20px;
  font-weight: bold;
}
.contact-media .contact-handle {
  font-size: 16px;
}
.contact-media .contact-handle a {
  color: #ddd;
}

address {
  font-size: 16px;
}


/*
** PROJECT
*/
.project-content a {
  color: #fb4;
}

.project-thumb {
  border: 4px solid #444;
  margin-bottom: 16px;
}

/*
** REFERENCE
*/
.reference-content a {
  color: #fb4;
}
