h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  color: #383f48;
  font-weight: 600; }

h1 {
  font-size: 90px; }

h2 {
  font-size: 50px; }

h3 {
  font-size: 40px; }

h4 {
  font-size: 34px; }

h5 {
  font-size: 28px; }

h6 {
  font-size: 20px;
  text-transform: uppercase; }

p {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  color: #383f48; }

.fa.social-icon {
  font-size: 30px;
  padding: 16px;
  color: #ffffff;
  background-color: #272c33;
  border-radius: 100%;
  width: 70px;
  text-align: center;
  margin: 15px 20px 0px 0px;
  text-decoration: none;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s; }
  .fa.social-icon:hover {
    color: #28a7e9; }

.btn-main {
  background-color: transparent;
  color: #28a7e9;
  border: 3px solid #28a7e9;
  padding: 10px 30px;
  font-size: 16px;
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s; }
  .btn-main:hover, .btn-main:active, .btn-main:focus {
    background-color: #28a7e9;
    color: #ffffff;
    -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42);
    -moz-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42);
    -ms-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42);
    -o-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42);
    box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42); }

#sidebar {
  width: 230px;
  min-height: 100vh;
  position: fixed;
  background-color: #272c33;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 2; }
  #sidebar .inner-sidebar {
    width: 100%;
    height: 60%; }
    #sidebar .inner-sidebar .logo {
      width: 150px;
      height: 150px;
      border: 5px solid #28a7e9;
      background-color: #ffffff;
      display: block;
      margin: 0 auto;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      background-image: url("../../images/logo.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
    #sidebar .inner-sidebar ul {
      margin: 40px; }
      #sidebar .inner-sidebar ul li {
        text-align: center;
        font-size: 16px;
        font-family: 'Roboto Slab', serif;
        font-weight: 500;
        text-transform: uppercase;
        padding: 10px 0px; }
        #sidebar .inner-sidebar ul li a {
          color: #ffffff;
          text-decoration: none;
          -webkit-transition: all linear 0.3s;
          -moz-transition: all linear 0.3s;
          -ms-transition: all linear 0.3s;
          -o-transition: all linear 0.3s;
          transition: all linear 0.3s; }
          #sidebar .inner-sidebar ul li a:hover, #sidebar .inner-sidebar ul li a:active, #sidebar .inner-sidebar ul li a:focus {
            color: #28a7e9; }
        #sidebar .inner-sidebar ul li .active {
          color: #28a7e9 !important; }

#about {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px;
  z-index: 2; }
  #about .sub-heading {
    font-size: 22px;
    text-transform: uppercase;
    line-height: 0px;
    font-family: 'Roboto Slab', serif; }
    #about .sub-heading a {
      text-decoration: none; }
  #about .blue {
    color: #28a7e9 !important; }
  #about p {
    line-height: 24px;
    padding: 30px 0px; }

#services {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }
  #services .service-block {
    margin-top: 20px; }
    #services .service-block .fa {
      font-size: 50px;
      border-radius: 100%;
      width: 90px;
      text-align: center;
      padding: 16px;
      background-color: #272c33;
      color: #ffffff;
      -webkit-transition: all linear 0.3s;
      -moz-transition: all linear 0.3s;
      -ms-transition: all linear 0.3s;
      -o-transition: all linear 0.3s;
      transition: all linear 0.3s; }
    #services .service-block:hover .fa {
      background-color: #272c33;
      color: #28a7e9;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg); }

#experience {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }
  #experience h4 {
    margin-top: 50px; }
  #experience h6 {
    color: #777777; }
    #experience h6 a {
      color: #777777; }
    #experience h6 span {
      font-size: 16px;
      float: right;
      color: #28a7e9; }

#skills {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }

#interests {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }

#contact {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }
  #contact .row:nth-child(2) {
    margin-top: 50px; }
  #contact form {
    margin-top: 30px; }
    #contact form label {
      font-size: 14px;
      font-weight: 400;
      text-transform: uppercase;
      font-family: 'Roboto Slab', serif;
      color: #383f48; }
    #contact form .form-control {
      border: 1px solid #777777;
      -webkit-box-shadow: 0 0 0;
      -moz-box-shadow: 0 0 0;
      -ms-box-shadow: 0 0 0;
      -o-box-shadow: 0 0 0;
      box-shadow: 0 0 0;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      -o-border-radius: 0px;
      border-radius: 0px; }
    #contact form .input-field {
      padding: 20px 10px; }
    #contact form .btn {
      margin-bottom: 30px;
      float: right;
      background-color: transparent;
      border: 2px solid #28a7e9;
      color: #272c33;
      font-size: 16px;
      font-weight: 500;
      font-family: 'Roboto Slab', serif;
      text-transform: uppercase;
      padding: 8px 20px;
      -webkit-transition: all linear 0.3s;
      -moz-transition: all linear 0.3s;
      -ms-transition: all linear 0.3s;
      -o-transition: all linear 0.3s;
      transition: all linear 0.3s;
      -webkit-box-shadow: 0 0 0;
      -moz-box-shadow: 0 0 0;
      -ms-box-shadow: 0 0 0;
      -o-box-shadow: 0 0 0;
      box-shadow: 0 0 0; }
      #contact form .btn:hover, #contact form .btn:active, #contact form .btn:focus {
        color: #ffffff;
        background-color: #28a7e9; }
    #contact form .form-control-feedback {
      top: 28px; }
    #contact form .help-block {
      color: #C6363C;
      font-size: 14px;
      font-family: 'Raleway', sans-serif; }
  #contact #confirmation {
    margin-top: 30px;
    padding: 15px;
    width: 600px;
    height: 250px;
    background-color: #ffffff;
    border: 2px solid #28a7e9;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -ms-transition: all linear 1s;
    -o-transition: all linear 1s;
    transition: all linear 1s; }
    #contact #confirmation .fa {
      font-size: 80px;
      color: #28a7e9; }

.input-field::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #272c33;
  font-family: 'Roboto Slab', serif; }

.input-field::-moz-input-placeholder,
.form-control::-moz-input-placeholder {
  /* Firefox 19+ */
  color: #272c33;
  font-family: 'Roboto Slab', serif; }

.input-field::-ms-input-placeholder,
.form-control::-ms-input-placeholder {
  /* IE 10+ */
  color: #272c33;
  font-family: 'Roboto Slab', serif; }

.input-field::-o-input-placeholder,
.form-control::-o-input-placeholder {
  /* Firefox 18- */
  color: #272c33;
  font-family: 'Roboto Slab', serif; }

#copyright {
  background-color: #272c33;
  width: 100%;
  padding: 20px 0px 15px; }
  #copyright p {
    color: #28a7e9;
    font-weight: 300; }

.navbar {
  background-color: #272c33;
  padding: 20px 0px;
  z-index: 10;
  border: none; }
  .navbar .navbar-header {
    float: none; }
    .navbar .navbar-header .logo {
      width: 80px;
      height: 80px;
      border: 5px solid #28a7e9;
      background-color: #ffffff;
      display: block;
      float: left;
      margin: 0 auto 0 10px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      background-image: url("../../images/logo.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
  .navbar .navbar-right {
    float: none !important; }
  .navbar .navbar-toggle {
    display: block;
    margin-top: 20px;
    border: 2px solid #28a7e9;
    -webkit-transition: all linear 0.4s;
    -moz-transition: all linear 0.4s;
    -ms-transition: all linear 0.4s;
    -o-transition: all linear 0.4s;
    transition: all linear 0.4s; }
    .navbar .navbar-toggle:hover, .navbar .navbar-toggle:active, .navbar .navbar-toggle:focus {
      background-color: #ffffff; }
    .navbar .navbar-toggle .icon-bar {
      background: #28a7e9; }
  .navbar .navbar-collapse {
    overflow: hidden;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none; }
    .navbar .navbar-collapse .navbar-nav {
      float: none !important;
      margin-top: 7.5px;
      text-align: center; }
      .navbar .navbar-collapse .navbar-nav li {
        float: none;
        font-size: 16px;
        font-family: 'Roboto Slab', serif;
        font-weight: 500;
        text-transform: uppercase;
        margin: 10px 0px; }
        .navbar .navbar-collapse .navbar-nav li a {
          display: inline;
          color: #ffffff;
          text-decoration: none;
          -webkit-transition: all linear 0.3s;
          -moz-transition: all linear 0.3s;
          -ms-transition: all linear 0.3s;
          -o-transition: all linear 0.3s;
          transition: all linear 0.3s; }
          .navbar .navbar-collapse .navbar-nav li a:hover, .navbar .navbar-collapse .navbar-nav li a:active, .navbar .navbar-collapse .navbar-nav li a:focus {
            color: #28a7e9; }
        .navbar .navbar-collapse .navbar-nav li .active {
          color: #28a7e9 !important; }
  .navbar .navbar-collapse.collapse {
    display: none !important; }
  .navbar .collapse.in {
    display: block !important; }

#portfolio {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  min-height: 100vh;
  margin-left: 230px;
  max-width: 1150px; }
  #portfolio .code-snippets {
    margin-top: 30px; }
  #portfolio .grid {
    position: relative;
    clear: both;
    margin: 0 40px 0px 0px;
    padding: 1em 0 4em;
    max-width: 1000px;
    list-style: none;
    text-align: center; }
    #portfolio .grid figure {
      position: relative;
      float: left;
      overflow: hidden;
      margin: 10px 1%;
      min-width: 320px;
      max-width: 480px;
      max-height: 360px;
      width: 48%;
      height: 300px;
      background: #3085a3;
      text-align: center;
      cursor: pointer; }
      #portfolio .grid figure img {
        position: relative;
        display: block;
        height: 300px;
        max-width: 100%;
        opacity: 0.8; }
      #portfolio .grid figure figcaption {
        padding: 2em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; }
        #portfolio .grid figure figcaption:before {
          pointer-events: none; }
        #portfolio .grid figure figcaption:after {
          pointer-events: none; }
        #portfolio .grid figure figcaption .btn {
          margin-top: 10px; }
      #portfolio .grid figure h2 {
        word-spacing: -0.15em;
        font-weight: 300;
        margin: 0;
        font-size: 30px;
        color: #272c33; }
        #portfolio .grid figure h2 span {
          font-weight: 800;
          color: #272c33; }
      #portfolio .grid figure p {
        margin: 0;
        letter-spacing: 1px;
        font-size: 68.5%; }

figure.effect-julia {
  background: #2f3238; }

figure.effect-julia img {
  max-width: none;
  height: 400px;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  -o-transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

figure.effect-julia figcaption {
  text-align: left; }

figure.effect-julia h2 {
  position: relative;
  padding: 0.5em 0; }

figure.effect-julia p {
  display: inline-block;
  margin: 0 0 0.25em;
  padding: 0.4em 1em;
  background: rgba(255, 255, 255, 0.9);
  color: #2f3238;
  text-transform: none;
  font-weight: 500;
  font-size: 75%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(-360px, 0, 0);
  transform: translate3d(-360px, 0, 0); }

figure.effect-julia a {
  display: inline-block;
  margin: 0 0 0.25em;
  padding: 0.4em 1em;
  background: rgba(255, 255, 255, 0.9);
  color: #2f3238;
  text-transform: none;
  font-weight: 500;
  font-size: 75%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(-360px, 0, 0);
  transform: translate3d(-360px, 0, 0); }

figure.effect-julia p:first-child {
  -webkit-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  transition-delay: 0.15s; }

figure.effect-julia p:nth-of-type(2) {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s; }

figure.effect-julia p:nth-of-type(3) {
  -webkit-transition-delay: 0.05s;
  -o-transition-delay: 0.05s;
  transition-delay: 0.05s; }

figure.effect-julia a {
  -webkit-transition-delay: 0.05s;
  -o-transition-delay: 0.05s;
  transition-delay: 0.05s; }

figure.effect-julia:hover a {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0.10s;
  -o-transition-delay: 0.10s;
  transition-delay: 0.10s; }

figure.effect-julia:hover p:first-child {
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s; }

figure.effect-julia:hover p:nth-of-type(2) {
  -webkit-transition-delay: 0.05s;
  -o-transition-delay: 0.05s;
  transition-delay: 0.05s; }

figure.effect-julia:hover p:nth-of-type(3) {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s; }

figure.effect-julia:hover img {
  opacity: 0.4;
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1); }

figure.effect-julia:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

#arrow {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 100px;
  background-color: #272c33;
  width: 80px;
  border-radius: 100%;
  text-align: center;
  padding: 10px;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all linear 0.4s;
  -moz-transition: all linear 0.4s;
  -ms-transition: all linear 0.4s;
  -o-transition: all linear 0.4s;
  transition: all linear 0.4s; }
  #arrow a {
    font-size: 40px;
    color: #28a7e9; }

.animate-arrow {
  opacity: 1 !important; }

.meter {
  position: relative;
  height: 30px;
  margin-bottom: 40px;
  background-color: #272c33;
  padding: 10px 5px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  -webkit-box-shadow: inset 0 -1 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1 1px rgba(255, 255, 255, 0.3);
  -ms-box-shadow: inset 0 -1 1px rgba(255, 255, 255, 0.3);
  -o-box-shadow: inset 0 -1 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1 1px rgba(255, 255, 255, 0.3); }
  .meter span {
    display: block;
    height: 24px;
    overflow: hidden;
    background-color: #28a7e9;
    position: relative;
    margin-top: -7px;
    -webkit-border-radius: 20px 8px 8px 20px;
    -moz-border-radius: 20px 8px 8px 20px;
    -ms-border-radius: 20px 8px 8px 20px;
    -o-border-radius: 20px 8px 8px 20px;
    border-radius: 20px 8px 8px 20px; }

.hero {
  text-align: center;
  margin-bottom: 50px;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 200px; }
  .hero h1 {
    font-size: 40px;
    color: #ffffff;
    text-transform: uppercase;
    -webkit-text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
    -moz-text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
    -ms-text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
    -o-text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
    text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); }

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }
  #loader-wrapper #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 3px solid transparent;
    border-top-color: #C6363C;
    z-index: 1001;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -ms-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite; }
    #loader-wrapper #loader::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border: 3px solid transparent;
      border-top-color: #0C4076;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite; }
    #loader-wrapper #loader::after {
      content: '';
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border: 3px solid transparent;
      border-top-color: #ffffff;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
      -webkit-animation: spin 1.5s linear infinite;
      -moz-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite; }
  #loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background-color: #272c33;
    z-index: 1000; }
  #loader-wrapper .section-left {
    left: 0; }
  #loader-wrapper .section-right {
    right: 0; }

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all ease-out 0.3s 1s;
  -moz-transition: all ease-out 0.3s 1s;
  -ms-transition: all ease-out 0.3s 1s;
  -o-transition: all ease-out 0.3s 1s;
  transition: all ease-out 0.3s 1s; }
  .loaded #loader-wrapper #loader {
    opacity: 0;
    -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -ms-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s; }
  .loaded #loader-wrapper .section-left {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all linear 0.7s 0.3s;
    -moz-transition: all linear 0.7s 0.3s;
    -ms-transition: all linear 0.7s 0.3s;
    -o-transition: all linear 0.7s 0.3s;
    transition: all linear 0.7s 0.3s; }
  .loaded #loader-wrapper .section-right {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all linear 0.7s 0.3s;
    -moz-transition: all linear 0.7s 0.3s;
    -ms-transition: all linear 0.7s 0.3s;
    -o-transition: all linear 0.7s 0.3s;
    transition: all linear 0.7s 0.3s; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@media screen and (min-width: 992px) and (max-width: 1300px) {
  #portfolio figure {
    min-width: 230px !important; }
    #portfolio figure h2 {
      font-size: 24px !important; } }

@media screen and (max-width: 991px) {
  #about {
    margin-left: 0px;
    padding-top: 150px;
    text-align: center; }
  #services {
    margin-left: 0px;
    text-align: center; }
  #experience {
    margin-left: 0px;
    text-align: center; }
    #experience h6 span {
      display: block;
      float: none; }
  #skills {
    margin-left: 0px;
    text-align: center; }
  #portfolio {
    text-align: center;
    margin-left: 0px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    #portfolio .grid {
      margin-right: 0px !important; }
      #portfolio .grid figure {
        display: block;
        margin: 0 auto !important;
        float: none !important;
        width: 420px !important; }
  #interests {
    margin-left: 0px;
    text-align: center; }
  #contact {
    display: block;
    margin-left: 0px;
    text-align: center; }
    #contact #confirmation {
      display: block;
      margin: 30px auto;
      max-width: 500px; } }

@media screen and (max-width: 544px) {
  #about {
    padding-top: 140px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    #about h1 {
      font-size: 46px; }
    #about .sub-heading {
      font-size: 16px; }
  #services {
    padding-top: 130px; }
  #experience {
    padding-top: 130px; }
  #skills {
    padding-top: 130px; }
  #portfolio {
    padding-top: 130px; }
    #portfolio .grid {
      margin: auto 20px !important; }
      #portfolio .grid figure {
        min-width: 100px !important;
        width: 300px !important; }
  #interests {
    padding-top: 130px; }
  #contact {
    padding-top: 130px; }
    #contact #confirmation {
      max-width: 270px; } }

@media screen and (max-height: 800px) {
  #sidebar .hero {
    display: none; }
  #sidebar {
    display: -ms-grid !important;
    display: grid !important;
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    align-items: unset;
    -ms-flex-line-pack: center;
    align-content: center; } }

body {
  overflow: hidden; }

.loaded {
  overflow-x: hidden;
  overflow-y: auto; }

::-webkit-scrollbar {
  width: 10px;
  z-index: 100;
  position: relative; }

::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #272c33; }

::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #28a7e9;
  height: 200px; }