html {
  font-size: 14px; }

#float {
  position: fixed;
  right: 50px;
  top: 50px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 15px #000;
  z-index: 10;
  outline: 0;
  transition: all 0.3s ease-out; }
  #float span {
    font-size: 35px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    color: #000; }

#float:hover {
  animation: circColor .5s;
  background: #30d7e6;
  transform: scale(1.2);
  transition: all 0.7s ease-out; }

header {
  position: relative;
  top: 0;
  left: 0;
  background: url(../img/bg-header.jpg) no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  height: 100vh; }
  header .navbar.navbar-default {
    background: transparent;
    border: none;
    padding-top: 30px; }
    header .navbar.navbar-default .navbar-brand {
      font-family: 'SalamanderScriptBold';
      color: #f28c2a;
      font-size: 5rem;
      font-style: italic;
      text-shadow: 0 0 10px #1fbbf1; }
    header .navbar.navbar-default .collapse ul li {
      font-family: v_KomikaAxis;
      font-size: 1rem;
      color: #fff; }
      header .navbar.navbar-default .collapse ul li a {
        color: #fff;
        text-decoration: none;
        transform: scale(1);
        transition: transform 0.5s ease-out; }
      header .navbar.navbar-default .collapse ul li a:hover {
        color: red;
        transform: scale(1.2);
        transition: transform 0.2s ease-in;
        transition: color 0.3s linear; }
  header h1 {
    font-family: RalewayRegular;
    font-size: 5rem;
    color: #fff;
    padding-top: 20%;
    text-shadow: 0 3px 10px #fff; }
  header h2 {
    font-family: Rotonda-Bold;
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 5px;
    margin: 0;
    padding: 10px 20px 5px 20px;
    background: rgba(144, 160, 228, 0.5);
    z-index: 1; }
  header .header-btn {
    margin-top: 30px;
    border-radius: 50%;
    background: #fff;
    border: none;
    outline: none;
    box-shadow: 0 0 10px 1px #fff;
    transition: all 0.4s; }
    header .header-btn span.fa.fa-chevron-down {
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 15px;
      padding-right: 15px;
      font-size: 2rem;
      color: #000;
      text-align: center; }
  header .header-btn:hover {
    animation: circColor .5s;
    background: #30d7e6;
    transform: scale(1.2);
    transition: all 0.4s; }

.about {
  padding: 50px 0; }
  .about h3 {
    font-family: v_KomikaAxis;
    margin-bottom: 30px;
    font-size: 4rem; }
  .about h4 {
    padding-top: 30px;
    font-family: RalewayRegular;
    font-size: 3rem; }
  .about p {
    font-family: Verdana;
    font-size: 1.5rem;
    color: #000; }
  .about img {
    width: 100%;
    box-shadow: 5px 10px 30px #000; }
  .about .wraper {
    margin: 30px 0; }

.skills {
  background: #111;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 100px; }
  .skills .my-progress-bar-1,
  .skills .my-progress-bar-2,
  .skills .my-progress-bar-3,
  .skills .my-progress-bar-4 {
    position: relative;
    margin: 0 auto;
    height: 200px; }
    .skills .my-progress-bar-1 .progress-percentage,
    .skills .my-progress-bar-2 .progress-percentage,
    .skills .my-progress-bar-3 .progress-percentage,
    .skills .my-progress-bar-4 .progress-percentage {
      position: absolute;
      top: 65px;
      left: 65px;
      font-family: v_KomikaAxis;
      color: red;
      font-size: 40px; }
    .skills .my-progress-bar-1 canvas,
    .skills .my-progress-bar-2 canvas,
    .skills .my-progress-bar-3 canvas,
    .skills .my-progress-bar-4 canvas {
      position: absolute;
      top: 0;
      left: 0; }
  .skills h2 {
    font-family: Rotonda-Bold;
    font-size: 2rem;
    color: #fff;
    transition: all 1s; }
  .skills h1 {
    font-family: v_KomikaAxis;
    color: #fff; }

.whatdo {
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 100px; }
  .whatdo h1 {
    font-family: v_KomikaAxis;
    color: #000;
    font-size: 2.8rem; }
  .whatdo hr {
    background: #01b9a2;
    width: 100px;
    height: 10px; }
  .whatdo .item {
    margin-top: 30px;
    border: 3px solid #e4e4e4;
    border-radius: 5px;
    padding: 30px 20px; }
    .whatdo .item .item-icon {
      background: #01b9a2;
      height: 100px;
      width: 100px;
      border-radius: 50%; }
      .whatdo .item .item-icon .fa {
        margin-top: 25%;
        font-size: 50px;
        color: #fff; }

footer {
  background: #000;
  color: #818170; }
  footer .row {
    padding-top: 50px;
    padding-bottom: 50px; }
    footer .row h3 {
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
      margin-top: 0;
      padding-top: 0; }
    footer .row a {
      text-decoration: none;
      color: #818170;
      transition: color .2s; }
    footer .row a:hover {
      text-decoration: none;
      color: #ffcd05;
      transition: color .2s; }
    footer .row ul {
      text-decoration: none;
      list-style: none;
      padding-left: 0; }
  footer .geographic span {
    display: inline-block;
    height: 51px;
    width: 35px;
    border: 5px solid #ffcd05; }
  footer .geographic h2 {
    display: inline-block;
    padding: 0 0 15px 3px;
    margin: 0;
    font-size: 25px;
    text-transform: uppercase;
    color: #fff; }

@keyframes circColor {
  0% {
    background: radial-gradient(#30d7e6 0%, #fff 0%); }
  10% {
    background: radial-gradient(#30d7e6 10%, #fff 30%); }
  20% {
    background: radial-gradient(#30d7e6 20%, #fff 40%); }
  30% {
    background: radial-gradient(#30d7e6 30%, #fff 50%); }
  40% {
    background: radial-gradient(#30d7e6 40%, #fff 60%); }
  50% {
    background: radial-gradient(#30d7e6 50%, #fff 70%); }
  60% {
    background: radial-gradient(#30d7e6 60%, #fff 80%); }
  70% {
    background: radial-gradient(#30d7e6 70%, #fff 90%); }
  80% {
    background: radial-gradient(#30d7e6 80%, #fff 100%); }
  90% {
    background: radial-gradient(#30d7e6 90%, #fff 1000%); }
  100% {
    background: radial-gradient(#30d7e6 70%, #fff 0%); } }

/*# sourceMappingURL=style.css.map */