/* Colors */
@font-face {
  font-family: raleway-thin;
  src: url(../fonts/raleway/Raleway-Thin.ttf); }

@font-face {
  font-family: raleway;
  src: url(../fonts/raleway/Raleway-Regular.ttf); }

@font-face {
  font-family: raleway-med;
  src: url(../fonts/raleway/Raleway-Medium.ttf); }

@font-face {
  font-family: raleway-bold;
  src: url(../fonts/raleway/Raleway-Bold.ttf); }

@font-face {
  font-family: raleway-bold-italic;
  src: url(../fonts/raleway/Raleway-SemiBoldItalic.ttf); }

html, body {
  height: 100%;
  font-family: raleway-med, raleway, verdana, sans-serif;
  font-size: 21px; }

h1 {
  color: #800000; }

.navbar-header {
  width: 100%; }
  .navbar-header .fa {
    color: #800000; }
  .navbar-header button {
    background-color: transparent; }
    .navbar-header button i.fa {
      font-size: 3em;
      margin-top: 28px;
      top: 0; }
  .navbar-header .button--m-r-12 {
    position: fixed;
    right: 17%; }
    @media (max-width: 1023px) {
      .navbar-header .button--m-r-12 {
        right: 25%; } }
    @media (max-width: 600px) {
      .navbar-header .button--m-r-12 {
        right: 17%; } }
  .navbar-header .button--m-l-12 {
    position: fixed;
    left: 17%;
    top: 0; }
    @media (max-width: 1023px) {
      .navbar-header .button--m-l-12 {
        left: 25%; } }
    @media (max-width: 600px) {
      .navbar-header .button--m-l-12 {
        left: 17%; } }

aside {
  position: fixed;
  top: 0px;
  display: none;
  width: 20%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 1000; }
  @media (max-width: 1023px) {
    aside {
      width: 30%;
      background-color: #ffffff; } }
  aside ul {
    list-style: none;
    padding: 1em; }
    aside ul li {
      padding: 0.5em;
      margin: auto;
      text-align: center;
      font-size: 1.5em; }
  aside .name {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #800000; }
    aside .name h3 {
      font-family: raleway-thin;
      font-weight: 600; }

aside.sidebar {
  -webkit-animation-duration: 1s; }

aside.sidebar {
  right: 10px; }
  @media (max-width: 600px) {
    aside.sidebar {
      width: 80%;
      right: 0; } }

aside.social {
  left: 10px; }
  @media (max-width: 600px) {
    aside.social {
      width: 80%;
      left: 0; } }

.section {
  width: 100%;
  padding-bottom: 1em; }
  .section video {
    position: absolute;
    width: 100%; }
  .section button {
    width: 100px; }
  .section .well {
    background-color: rgba(245, 245, 245, 0.65);
    background-image: none; }
  .section .profile-img {
    width: 200px;
    height: 200px;
    padding: 0.5em; }
    @media (max-width: 450px) {
      .section .profile-img {
        width: 120px;
        height: 120px; } }
  .section .phone-box {
    width: 100%;
    height: 615px; }
  .section .work-imgs {
    width: 100%; }
  .section-main-header h1 {
    font-family: raleway-thin;
    font-size: 5em;
    padding-top: 3em;
    /* Portrait and Landscape */ }
    @media (max-width: 1024px) {
      .section-main-header h1 {
        font-size: 2em;
        padding-top: 2em; } }
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
      .section-main-header h1 {
        padding-top: 1em; } }
    .section-main-header h1:after {
      display: block;
      content: '';
      width: 40%;
      height: 1px;
      margin: auto;
      border-bottom: 1px solid #800000; }
      @media (max-width: 1000px) {
        .section-main-header h1:after {
          width: 50%; } }
      @media (max-width: 600px) {
        .section-main-header h1:after {
          width: 65%; } }
      @media (max-width: 400px) {
        .section-main-header h1:after {
          width: 100%; } }
  .section-header {
    padding-bottom: 1em; }
    .section-header h1 {
      font-family: raleway-thin;
      font-size: 4em;
      font-weight: 900; }
      @media (max-width: 600px) {
        .section-header h1 {
          font-size: 2em; } }
      .section-header h1:after {
        display: block;
        content: '';
        width: 25%;
        height: 1px;
        margin: auto;
        border-bottom: 1px solid #800000; }
        @media (max-width: 1000px) {
          .section-header h1:after {
            width: 50%; } }
        @media (max-width: 600px) {
          .section-header h1:after {
            display: none; } }
        @media (max-width: 400px) {
          .section-header h1:after {
            display: none; } }
  .section-content {
    margin: 1em auto; }
  .section--white {
    background: #ffffff;
    color: #000000; }
  .section--gray {
    background: rgba(51, 51, 51, 0.7);
    color: #000000; }
  .section--black {
    background: #000000;
    color: #ffffff; }
  .section--pale {
    background: #E8EAF6;
    color: #000000; }
  .section--top-m-50 {
    margin-top: 50px; }

.section1 {
  height: 100%; }

.section-main-header.fadeIn {
  -webkit-animation-duration: 7s;
  -moz-animation-duration: 7s;
  -o-animation-duration: 7s;
  -ms-animation-duration: 7s; }

.section-header.slideInLeft, .section-header.slideInRight {
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  -ms-animation-duration: 5s; }

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  .parallax-1 {
    background-image: url("../img/sky.jpg"); }
  .parallax-2 {
    background-image: url("../img/air.jpg"); }
  .parallax-3 {
    background-image: url("../img/lamps-faded.jpg"); }
  .parallax-4 {
    background-image: url("../img/stars.jpg"); }
  .parallax-5 {
    background-image: url("../img/cityview2.jpg"); }
  .parallax-6 {
    background-image: url("../img/park-faded.jpg"); }
  .parallax-7 {
    background-image: url("../img/map.jpg"); }

#vortex {
  width: 600px;
  height: 300px;
  position: relative;
  margin: 2em auto 4em; }

#vortex.vortex-animating > * {
  background-color: rgba(51, 51, 51, 0.5); }

.vortex-tile {
  width: 110px;
  height: 115px;
  border-radius: 10px;
  background-color: rgba(51, 51, 51, 0.5); }
  .vortex-tile .skill-tile {
    margin: auto; }

@media (max-device-width: 600px) {
  #vortex {
    width: 300px; } }

.project-img {
  display: block;
  width: 100%;
  height: 180px;
  background-size: 100%; }
  .project-img--contact {
    background-image: url("../img/projects/contact-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--contact:hover {
      background-image: url("../img/projects/contact.jpg"); }
  .project-img--how-guides {
    background-image: url("../img/projects/how-guides-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--how-guides:hover {
      background-image: url("../img/projects/how-guides.jpg"); }
  .project-img--mobile {
    background-image: url("../img/projects/mobile-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--mobile:hover {
      background-image: url("../img/projects/mobile.jpg"); }
  .project-img--classics {
    background-image: url("../img/projects/classics-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--classics:hover {
      background-image: url("../img/projects/classics.jpg"); }
  .project-img--biblio {
    background-image: url("../img/projects/biblio-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--biblio:hover {
      background-image: url("../img/projects/biblio.jpg"); }
  .project-img--todo {
    background-image: url("../img/projects/todo-bw.jpg");
    background-repeat: no-repeat; }
    .project-img--todo:hover {
      background-image: url("../img/projects/todo.jpg"); }

.navbar {
  background-image: none; }

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none; }

/*Extends here as bootstrap sass files not included*/
.btn-maroon, .btn-maroon:active, .btn-maroon:focus {
  background: -moz-linear-gradient(left, maroon 0%, rgba(127, 0, 0, 0.66) 100%);
  background: -webkit-linear-gradient(left, maroon 0%, rgba(127, 0, 0, 0.66) 100%);
  background: linear-gradient(to right, maroon 0%, rgba(127, 0, 0, 0.66) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#a87f0000',GradientType=1 );
  border: 1px solid #800000; }

.img-thumbnail .caption p {
  font-size: 0.5em; }

a {
  color: #000000; }
  a:focus, a:active, a:visited {
    color: #000000; }

@media (max-width: 800px) {
  #vortex, #vortexBtn {
    display: none; }
  .skill-tile {
    margin: auto; } }

@media (min-width: 801px) {
  .skills-tiles {
    display: none; } }

/* Some helper classes, will be moved to own partial if grows */
.m-t-1 {
  margin-top: 1em; }

.m-b-1 {
  margin-bottom: 1em; }

.p-b-1 {
  padding-bottom: 1em; }

.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center; }
  .arrow-down .fa {
    font-size: 2.5em;
    color: #800000; }

.arrow-up {
  position: fixed;
  right: 15px;
  bottom: 0; }
  .arrow-up .fa {
    font-size: 2.5em;
    color: #800000; }

.repos {
  margin: auto; }
  .repos ul {
    list-style: none;
    padding: 0; }
  .repos .repo {
    float: none;
    margin: auto; }

/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
@media (max-device-width: 1024px) {
  .parallax {
    background-attachment: scroll; } }