/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/oswald-v35-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* cabin-regular - latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('./fonts/cabin-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/cabin-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/
body{
  margin-top: 20px;
  background: url('../img/fuzzy.png') repeat scroll 0px 0px #EAEFF2;
  font-family: 'Cabin', sans-serif;
  font-size: 20px;
  color: #3F3F3F;
}

@media (min-width: 768px) and (max-width: 992px){
  .content {
      padding-left: 40px;
  }
}

@media (max-width: 768px){
  .content {
    padding-top: 20px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;

}

.title {
  line-height: 1.2em;
}

a         { color: #3B7C8B; text-decoration: none; }
a:hover   { color: #3B7C8B; text-decoration: none; }

.meta {
  color: #727272;
  font-size: 0.9em;
}

.meta > .icon {
  font-size: 0.8em;
  margin-left: 10px;
  fill: #727272;
}

.meat {
  padding: 20px 0px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-item.active .page-link {
  background-color: #b9d0dd;
  border-color: initial;
}
img {
  background: none repeat scroll 0% 0% rgb(255, 255, 255);
  padding: 5px;
  border: 2px solid #3F3F3F;
  max-width: 100%;
}

hr.narrow {
  width: 25%;
}

.btn-outline-cool {
    color: #3B7C8B;
    border-color: #3B7C8B;
}

.btn-outline-cool:active {
    background-color: #3B7C8B;
    border-color: #3B7C8B;
}

.btn-outline-cool:hover {
    background-color: #3B7C8B;
    border-color: #3B7C8B;
}


/*****************************************************************************/
/*
/* Logo
/*
/*****************************************************************************/

#logo {
  width: 100%
}

.svg {
  width:200px;
  height:200px;
  float:left;
  margin-bottom: 15px;
}

#logo svg > * {
    fill: #3f3f3f;
}
svg text {
    font-size: 56px;
    font-weight: 900;
    font-family: 'Oswald', Helvetica;
}

.go-clockwise {
  -webkit-animation: clockwise 3s infinite linear;
  -moz-animation: clockwise 3s infinite linear;
}

.go-counter-clockwise {
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;
}

svg .correct {
    -webkit-transform: translate(100px,100px);
    -moz-transform: translate(100px,100px);
    transform: translate(100px,100px);
}
svg path {
    -webkit-transform: translate(-100px,-100px);
    -moz-transform: translate(-100px,-100px);
    transform: translate(-100px,-100px);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

.go-clockwise {
    -webkit-animation: clockwise 3s infinite linear;
    -moz-animation: clockwise 3s infinite linear;
    animation: clockwise 3s infinite linear;
}
.go-counter-clockwise {
    -webkit-animation: counter-clockwise 3s infinite linear;
    -moz-animation: counter-clockwise 3s infinite linear;
    animation: counter-clockwise 3s infinite linear;
}
@-webkit-keyframes clockwise {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes counter-clockwise {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes clockwise {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-moz-keyframes counter-clockwise {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(-360deg); }
}
@keyframes clockwise {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes counter-clockwise {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
/*****************************************************************************/
/*
/* Sidebar
/*
/*****************************************************************************/
#affixme {
  position: -webkit-sticky;
  position: sticky;
  top: -130px;
  margin-top: 20px;
}
@media (max-width: 768px){
  #affixme{
    position: relative;
    top: 10px;
  }

  .featured-item {
    margin: auto;
  }

  .navlinks li {
    display: inline;
    margin-right: 10px;
  }
}

.sidebar{
  text-align: center;
}

.sidebar a {
    color: #3F3F3F;
}

.sidebar .navlinks li{
  font-size: 32px;
  font-family: 'Oswald', sans-serif;
  text-decoration: none;
  list-style: none outside none;
  transition: color 0.2s ease-in-out 0s;
}

.social li {
    font-size: 24px;
    list-style-type: none;
    display: inline;
    padding: 4px;
}

.secondary li {
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-style: dotted;
}
/*****************************************************************************/
/*
/* Syntax highlighting
/*
/*****************************************************************************/

.highlight {
  font-size: 75%;
  font-family: 'Inconsolata', 'Open Sans', monospace;
}

.highlight > pre {
  padding: 5px;
}

/*****************************************************************************/
/*
/* Archives
/*
/*****************************************************************************/

.archive-date {
  position: absolute;
  right: 0px;
}

@media (max-width: 768px){
  .archive-date {
    position: relative;
  }
}

/*****************************************************************************/
/*
/* Blockquote
/*
/*****************************************************************************/
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/*****************************************************************************/
/*
/* About
/*
/*****************************************************************************/

.experience-head {
  background-color: #f7f7f7;
}
.page-break {
    page-break-after: always;
}
.experience-head {
    page-break-after: avoid;
}