@import url("https://fonts.googleapis.com/css?family=Permanent+Marker|Roboto|Archivo+Black");
.btn-twitter {
  color: #FFFFFF;
  background-color: #1DA1F3;
  border-color: #130269; }
  .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active {
    color: #FFFFFF;
    background-color: #0a7bc2;
    border-color: #130269; }

.open .dropdown-toggle.btn-twitter {
  color: #FFFFFF;
  background-color: #0a7bc2;
  border-color: #130269; }

.btn-twitter:active, .btn-twitter.active {
  background-image: none; }

.open .dropdown-toggle.btn-twitter {
  background-image: none; }

.btn-twitter.disabled, .btn-twitter[disabled] {
  background-color: #1DA1F3;
  border-color: #130269; }

fieldset[disabled] .btn-twitter {
  background-color: #1DA1F3;
  border-color: #130269; }

.btn-twitter.disabled:hover, .btn-twitter[disabled]:hover {
  background-color: #1DA1F3;
  border-color: #130269; }

fieldset[disabled] .btn-twitter:hover {
  background-color: #1DA1F3;
  border-color: #130269; }

.btn-twitter.disabled:focus, .btn-twitter[disabled]:focus {
  background-color: #1DA1F3;
  border-color: #130269; }

fieldset[disabled] .btn-twitter:focus {
  background-color: #1DA1F3;
  border-color: #130269; }

.btn-twitter.disabled:active, .btn-twitter[disabled]:active {
  background-color: #1DA1F3;
  border-color: #130269; }

fieldset[disabled] .btn-twitter:active {
  background-color: #1DA1F3;
  border-color: #130269; }

.btn-twitter.disabled.active, .btn-twitter[disabled].active {
  background-color: #1DA1F3;
  border-color: #130269; }

fieldset[disabled] .btn-twitter.active {
  background-color: #1DA1F3;
  border-color: #130269; }

.btn-twitter .badge {
  color: #1DA1F3;
  background-color: #FFFFFF; }

.btn-custom-darken {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #434343;
  background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
  background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
  background-image: -o-linear-gradient(top, #4d4d4d, #333333);
  background-image: linear-gradient(to bottom, #4d4d4d, #333333);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d4d4d', endColorstr='#ff333333', GradientType=0);
  border-color: #333333 #333333 #0d0d0d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #333333;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
  .btn-custom-darken.active {
    color: rgba(255, 255, 255, 0.75); }
  .btn-custom-darken:hover, .btn-custom-darken:focus, .btn-custom-darken:active, .btn-custom-darken.active, .btn-custom-darken.disabled, .btn-custom-darken[disabled] {
    color: #ffffff;
    background-color: #333333;
    *background-color: #272727; }
  .btn-custom-darken:active, .btn-custom-darken.active {
    background-color: #1a1a1a; }

.btn-facebook {
  color: #FFFFFF;
  background-color: #3B5998;
  border-color: #130269; }
  .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active {
    color: #FFFFFF;
    background-color: #324b81;
    border-color: #130269; }

.open .dropdown-toggle.btn-facebook {
  color: #FFFFFF;
  background-color: #324b81;
  border-color: #130269; }

.btn-facebook:active, .btn-facebook.active {
  background-image: none; }

.open .dropdown-toggle.btn-facebook {
  background-image: none; }

.btn-facebook.disabled, .btn-facebook[disabled] {
  background-color: #3B5998;
  border-color: #130269; }

fieldset[disabled] .btn-facebook {
  background-color: #3B5998;
  border-color: #130269; }

.btn-facebook.disabled:hover, .btn-facebook[disabled]:hover {
  background-color: #3B5998;
  border-color: #130269; }

fieldset[disabled] .btn-facebook:hover {
  background-color: #3B5998;
  border-color: #130269; }

.btn-facebook.disabled:focus, .btn-facebook[disabled]:focus {
  background-color: #3B5998;
  border-color: #130269; }

fieldset[disabled] .btn-facebook:focus {
  background-color: #3B5998;
  border-color: #130269; }

.btn-facebook.disabled:active, .btn-facebook[disabled]:active {
  background-color: #3B5998;
  border-color: #130269; }

fieldset[disabled] .btn-facebook:active {
  background-color: #3B5998;
  border-color: #130269; }

.btn-facebook.disabled.active, .btn-facebook[disabled].active {
  background-color: #3B5998;
  border-color: #130269; }

fieldset[disabled] .btn-facebook.active {
  background-color: #3B5998;
  border-color: #130269; }

.btn-facebook .badge {
  color: #3B5998;
  background-color: #FFFFFF; }

.btn-linkedIn {
  color: #FFFFFF;
  background-color: #0077B5;
  border-color: #130269; }
  .btn-linkedIn:hover, .btn-linkedIn:focus, .btn-linkedIn:active, .btn-linkedIn.active {
    color: #FFFFFF;
    background-color: #005380;
    border-color: #130269; }

.open .dropdown-toggle.btn-linkedIn {
  color: #FFFFFF;
  background-color: #005380;
  border-color: #130269; }

.btn-linkedIn:active, .btn-linkedIn.active {
  background-image: none; }

.open .dropdown-toggle.btn-linkedIn {
  background-image: none; }

.btn-linkedIn.disabled, .btn-linkedIn[disabled] {
  background-color: #0077B5;
  border-color: #130269; }

fieldset[disabled] .btn-linkedIn {
  background-color: #0077B5;
  border-color: #130269; }

.btn-linkedIn.disabled:hover, .btn-linkedIn[disabled]:hover {
  background-color: #0077B5;
  border-color: #130269; }

fieldset[disabled] .btn-linkedIn:hover {
  background-color: #0077B5;
  border-color: #130269; }

.btn-linkedIn.disabled:focus, .btn-linkedIn[disabled]:focus {
  background-color: #0077B5;
  border-color: #130269; }

fieldset[disabled] .btn-linkedIn:focus {
  background-color: #0077B5;
  border-color: #130269; }

.btn-linkedIn.disabled:active, .btn-linkedIn[disabled]:active {
  background-color: #0077B5;
  border-color: #130269; }

fieldset[disabled] .btn-linkedIn:active {
  background-color: #0077B5;
  border-color: #130269; }

.btn-linkedIn.disabled.active, .btn-linkedIn[disabled].active {
  background-color: #0077B5;
  border-color: #130269; }

fieldset[disabled] .btn-linkedIn.active {
  background-color: #0077B5;
  border-color: #130269; }

.btn-linkedIn .badge {
  color: #0077B5;
  background-color: #FFFFFF; }

.buttons {
  text-align: center; }

.modal {
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  height: 100%; }

#logForm,
#register {
  margin-top: 15%; }

.glyphicon-remove {
  color: #337AB7;
  cursor: pointer;
  font-size: 30px;
  margin-right: -330px; }

.flexCont {
  display: flex; }

.flexCol {
  flex-direction: column; }

.flexRow {
  flex-direction: row; }

.alignCent {
  align-items: center; }

.alignFS {
  align-items: flex-start; }

.alignFE {
  align-items: flex-end; }

.alignBL {
  align-items: baseline; }

.alignSTR {
  align-items: stretch; }

.justSB {
  justify-content: space-between; }

.justSA {
  justify-content: space-around; }

.justCen {
  justify-content: center; }

.justSE {
  justify-content: space-evenly; }

.justFS {
  justify-content: flex-start; }

.justFE {
  justify-content: flex-end; }

.fg1 {
  flex-grow: 1; }

.fg2 {
  flex-grow: 2; }

.fg3 {
  flex-grow: 3; }

.asCen {
  align-self: center; }

.asFE {
  align-self: flex-end; }

.asFS {
  align-self: flex-start; }

.asSTR {
  align-self: stretch; }

.asBL {
  align-self: baseline; }

body {
  margin: 0 auto;
  font-family: "Roboto";
  color: #222;
  background-color: #fffff7; }

.full {
  width: 100%; }

#content {
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: stretch; }

.read {
  font-family: "Roboto"; }

.display {
  font-family: "Permanent Marker", cursive; }

.header-bar {
  font-family: "Permanent Marker", cursive; }

.container,
.container-fluid {
  max-width: 97.5%; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

.navbar-default {
  background-color: #fffff7; }
  .navbar-default .navbar-brand {
    font-family: "Permanent Marker", cursive;
    font-size: 1.8em;
    color: #222;
    padding: 15px 0; }
  .navbar-default .navbar-nav li:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  .navbar-default .navbar-nav li a {
    color: #222; }
    .navbar-default .navbar-nav li a:hover {
      color: #eee; }
  .navbar-default .navbar-toggle {
    border: 0;
    transform: rotate(0);
    transition: all 0.25s ease-in-out; }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
      background-color: transparent; }
    .navbar-default .navbar-toggle .icon-bar {
      transition: all 0.3s ease-in-out;
      height: 4px;
      margin-left: 12.5%; }
    .navbar-default .navbar-toggle .ib-top {
      transform: rotate(45deg);
      transform-origin: 0% 50%; }
    .navbar-default .navbar-toggle .ib-mid {
      opacity: 0; }
    .navbar-default .navbar-toggle .ib-bot {
      transform: rotate(-45deg);
      transform-origin: 0% 50%; }
    .navbar-default .navbar-toggle.collapsed {
      transform: rotate(-180deg); }
      .navbar-default .navbar-toggle.collapsed .icon-bar {
        height: 2px;
        margin-left: 0; }
      .navbar-default .navbar-toggle.collapsed .ib-top {
        transform: rotate(0); }
      .navbar-default .navbar-toggle.collapsed .ib-mid {
        opacity: 1; }
      .navbar-default .navbar-toggle.collapsed .ib-bot {
        transform: rotate(0); }
  .navbar-default.navbar-collapse {
    background-color: rgba(255, 255, 247, 0.95); }

#backButton .backButton {
  font-size: 1.55rem;
  color: #222;
  font-family: "Roboto"; }

#jumbo-container {
  background-color: #fffff7; }

.jumbotron {
  font-family: "Roboto";
  text-align: center;
  color: #222;
  background: none; }
  .jumbotron .main {
    margin-top: 100px; }
  .jumbotron li {
    display: inline-block;
    padding: 10px; }
  .jumbotron h1 {
    font-family: Archivo Black; }

.social {
  list-style: none;
  margin-left: -30px; }
  .social li a {
    font-size: 24px;
    color: #222;
    transition: all 0.2s ease-in-out; }
    .social li a .label {
      color: #222; }
      .social li a .label:hover {
        color: red; }
    .social li a:hover {
      color: red; }

#profile .polaroid {
  position: absolute;
  max-width: 70%;
  background: #fffae6;
  border-left: 1px solid rgba(122, 122, 122, 0.3);
  border-top: 1px solid rgba(122, 122, 122, 0.3);
  border-right: 1px solid #fff5cc;
  border-bottom: 1px solid #fff5cc;
  box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.5); }
  #profile .polaroid .self,
  #profile .polaroid .video {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    position: relative;
    left: 5%;
    top: 20px; }
  #profile .polaroid .gutter {
    position: relative;
    color: #333;
    display: block;
    margin-top: 30px;
    text-align: center;
    font-family: "Permanent Marker", cursive;
    font-size: 3.5rem; }
  #profile .polaroid .profile-toggle {
    position: absolute;
    margin-top: -20px;
    border-radius: 50%;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
    right: -20px;
    background-color: #2980b9; }
    #profile .polaroid .profile-toggle:active {
      background-color: #3498db; }
    #profile .polaroid .profile-toggle .fa {
      color: #fff;
      position: absolute;
      left: .35em;
      top: .35em;
      font-size: 1.75em; }
      #profile .polaroid .profile-toggle .fa .fa-play-circle-o:before {
        padding-left: .05em; }

p {
  font-size: 1.6em; }

.constrain {
  max-width: 1280px;
  margin: 0 auto;
  padding: 25px; }

.portfolio {
  background-color: #fffff7; }
  .portfolio h1, .portfolio h2 {
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: #eee;
    text-shadow: 2px 2px 6px #222; }
  .portfolio .loading,
  .portfolio .fa-spinner {
    text-shadow: 0px 0px 0px #fff;
    color: #222; }
  .portfolio .pulse {
    animation: pulse 2s infinite; }

@keyframes pulse {
  0% {
    text-shadow: 0px 0px 0 transparent, 0px 0px 0 transparent, 0px 0px 0 transparent, 0px 0px 0 transparent;
    color: black; }
  50% {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    color: white; } }

.input-group-addon {
  cursor: pointer; }

.frame {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  color: #444;
  font-family: 'Permanent Marker';
  border: 1px solid #999;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  margin-top: 25px;
  padding: 10px; }
  .frame .overlay {
    opacity: 0;
    position: absolute;
    left: 15px;
    right: 15px;
    top: 25px;
    bottom: 0px;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    font-family: 'Helvetica';
    background: rgba(31, 31, 122, 0.1);
    transition: all 1s ease-in-out; }
  .frame:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(255, 255, 255, 0.8); }
    .frame:hover .overlay {
      opacity: 1;
      background: rgba(31, 31, 122, 0.8);
      transition: opacity .3s ease-in-out; }
  .frame a {
    text-decoration: none;
    color: #000; }
    .frame a:hover {
      text-decoration: none;
      color: #000; }
  .frame .image {
    max-width: 100%;
    max-height: 75%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    clear: both; }

.tech {
  list-style-type: none; }
  .tech li {
    text-indent: -1.4em; }
    .tech li:before {
      font-family: 'FontAwesome';
      content: '\f121';
      color: #222;
      margin-right: .2em; }

.contact {
  height: 240px;
  background: none;
  font-family: "Permanent Marker", cursive; }
  .contact h4 {
    font-size: 2rem;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); }
  .contact button {
    color: #eee;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 10px;
    border-radius: 50%;
    border: none;
    font-size: 36px;
    transition: all 0.2s ease-in-out; }
    .contact button:hover {
      margin: 2; }
  .contact .fa {
    color: #eee;
    text-align: center; }
  .contact #github {
    background-color: #2c3e50;
    box-shadow: 0 0 0 0 #2c3e50; }
    .contact #github:hover {
      animation: github 1.25s infinite; }
  .contact #twitter {
    background-color: #3498db;
    box-shadow: 0 0 0 0 #3498db; }
    .contact #twitter:hover {
      animation: twitter 1.25s infinite; }
  .contact #linkedin {
    background-color: #2980b9;
    box-shadow: 0 0 0 0 #2980b9; }
    .contact #linkedin:hover {
      animation: linkedIn 1.25s infinite; }
  .contact #freecodecamp {
    background-color: #27ae60;
    box-shadow: 0 0 0 0 #27ae60; }
    .contact #freecodecamp:hover {
      animation: fcc 1.25s infinite; }
  .contact #codepen {
    background-color: #34495e;
    box-shadow: 0 0 0 0 #34495e; }
    .contact #codepen:hover {
      animation: codepen 1.25s infinite; }
  .contact .copyright {
    text-align: center; }
  .contact .radiate {
    box-shadow: 0 0 0 0 #d44946;
    border-radius: 1px; }
    .contact .radiate:hover {
      animation: email 1.25s infinite; }

@keyframes email {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

@keyframes github {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

@keyframes twitter {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

@keyframes linkedIn {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

@keyframes fcc {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

@keyframes codepen {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } }

.contact-buttons {
  display: block;
  text-align: center; }

.footer {
  background-color: #fffff7;
  border-top: 1px solid #111;
  max-height: 60px; }
  .footer h6 {
    float: right; }
  .footer ul {
    margin: 0;
    padding: 0;
    float: left;
    margin-top: 10px; }
  .footer li {
    display: inline;
    padding: 10px; }
    .footer li:hover:nth-child(odd) {
      background-color: rgba(0, 0, 0, 0.3); }
    .footer li a {
      color: #222; }
      .footer li a:hover {
        color: #eee; }

.colCont {
  width: 100%; }
  .colCont .zzz {
    max-height: 5px;
    overflow: hidden;
    opacity: 0;
    transition: max-height 500ms, opacity 750ms; }
  .colCont .xxx {
    opacity: 1;
    transition: max-height 500ms, opacity 750ms; }

@media only screen and (max-width: 768px) {
  .footer-links, .label, .conText {
    display: none; }
  .social .fa {
    font-size: 40px; }
  .social .fa-github {
    color: #2c3e50; }
  .social .fa-twitter-square {
    color: #3498db; }
  .social .fa-linkedin-square {
    color: #2980b9; }
  .social .fa-free-code-camp {
    color: #27ae60; }
  .social .fa-codepen {
    color: #34495e; } }

@media only screen and (min-width: 768px) {
  .frame {
    height: 260px; } }

@media only screen and (max-width: 540px) {
  .contact button {
    color: #eee;
    width: 36px;
    height: 36px;
    margin: 2px;
    font-size: 20px; } }

@media only screen and (max-width: 320px) {
  .navbar-default .navbar-brand {
    font-size: 1.5em; } }