*{
    padding: 0 ;
    margin: 0;
    box-sizing: border-box !important;
} 
/* vanta waves */
#vantajs{
    width: 100%;
}
#top-1 {
    display: none !important;
}
.clear{
    clear: both;
}
/* loading page animsition-loading */
.animsition-overlay-slide {
    background-color: #252525!important;          
}
.animsition-loading {
    position: fixed;
    width: 40px !important;
    height: 40px !important;
    top: 50%;
    left: 50%;
    transform: translateZ(0);
    background-color: #fff;
    border: none;
    border-radius: none !important;
    text-align: center;
    z-index: 10 !important;
    animation: animation1  2s linear infinite both !important;
}


.fa{
    color: #fff;
}
.fa:hover{
    transition: all .4s linear;
    color: #08fdd8;
}
.green {
    background-color: #08fdd8 !important;
}
.dark{
    background-color:  rgba(29, 29, 29, .9) !important;
}
.letterSpace{
    letter-spacing: 1px;
}
/* navigation bar animation border  navbar logo*/
.menu{
    z-index: 3 !important;
    opacity: 1 !important;
}
.navbar-brand{
    margin-left: 1rem !important;
}
.navbar {
    background: transparent;
    min-height: 80px;
}

ul.navbar-nav li.nav-item {
    margin: 0 .5em ;
    padding: 0 ;
}
@media (min-width: 450px ) and (max-width: 990px) {
  
    ul.navbar-nav li.nav-item{
      margin:0.3em .4em !important;
   
    }
    .navbar-nav > .nav-item > a.nav-link{
        padding: .7em 1.1em !important;
    }
  }

.navbar-nav>.nav-item>a.nav-link {
        position: relative;
        padding: .7em 1.7em;
        display: inline-block;
        color: #fff;
        outline: none;
        border: none;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
}

.navbar-nav>.nav-item>a.nav-link:before,
.navbar-nav>.nav-item>a.nav-link:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: none;
    visibility: hidden;
    box-sizing: border-box;
}

.navbar-nav>.nav-item>a.nav-link:before {
    top: 0;
    left: 0;
    border-top: 1px solid #08fdd8;
    border-right: 1px solid #08fdd8;
    transition: width 0.1s linear .3s, height 0.1s linear 0.2s, visibility 0s 0.2s;
}

.navbar-nav>.nav-item>a.nav-link:after {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #08fdd8;
    border-left: 1px solid #08fdd8;
    transition: width 0.1s linear 0.1s, height 0.1s linear, visibility 0s 0.2s;
}

.navbar-nav>.nav-item>a.nav-link:hover:before,
.navbar-nav>.nav-item>a.nav-link:hover:after {
    height: 100%;
    width: 100%;
    visibility: visible;
}

.navbar-nav>.nav-item>a.nav-link:hover:before {
    transition: width .1s linear, height .1s linear .1s;
}

.navbar-nav>.nav-item>a.nav-link:hover:after {
    transition: width .1s linear .2s  , height .1s linear .3s , visibility 0s .2s;
    
}

.navbar-nav>.nav-item>.nav-link.active{
    color:  rgba(8, 253, 216, .7);
    border: 1px solid rgba(8, 253, 216, .1);
}

.nav-link-icon.active,
.nav-link-icon:hover,
.navbar-nav>.nav-item>.nav-link:hover, 
.navbar-nav>.nav-item>.nav-link:focus{
    color:  #08fdd8;
    transition-delay: .3s;
    transition-timing-function: linear;
    transition-duration: .7s;
}

/* styling icon */
.nav-item-icon{
    margin: 0 0.4em;
    padding: 0;
}

.nav-link-icon{
    margin: 0 0.4em;
    padding: .7em 0;
    display: inline-block;
    color: #fff;
    outline: none;
    border: none;
    font-weight: 900;
}
/* remove navbar button stying */

.navbar-toggler {
    background: none;
    border: none;
    height: auto;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 29px;
    height: 4px;
    border-radius: 1px;
    margin: 4px 0 4px 0;
    transition: all 0.2s ease;
}

.navbar-toggler .icon-bar {
    background: #fff;
}

.navbar-toggle {
    outline: 0
}

.navbar-toggler .icon-bar:nth-of-type(1) {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .icon-bar:nth-of-type(3) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
    transform: rotate(0);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
    transform: rotate(0);
}
h1.fontSize{
    font-size: 0;
}
h1 span{
    font-size: 4.25rem;
    
}

@media (min-width: 991px) and (max-width: 1200px){
    h1.wrap1{
        padding: 3rem 2.3rem !important;
    } 
  }

@media (min-width: 320px) and (max-width: 768px){
    h1.fontSize{
        font-size: 0;
    }
    h1 span{
        font-size: 2.4rem !important;
    }    
  }


/* progress bar animation */
.skills, .center {
    width: 100%;
    max-width: 550px;
    padding: 0 .4rem;
    margin: 4% auto;
}
 #myCanvasContainer{
    width: 50%;
    height: 80%;
    padding: 0 20px;
    margin: 0 auto;
   
}
 
#myCanvas{ 
    width: 100%;
    min-height: 100vh;
}  

  /* skill page cloud */
  @media  screen and (max-width: 990px) {
    #myCanvasContainer{
        width: 100%;
        padding: 2rem 1rem;  
    }
  }
/* .cloudsTag{ 
        position: absolute;
        width: 80%;
        left: auto;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
}

  #myCanvasContainer {
 position: relative;
height: 100%;
width: 100%;
  }

  #myCanvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 100%;
  }
  @media screen and (max-width: 989px){
    .cloudsTag {
        position: relative;
       
    }  
  #myCanvas {
        position: relative;
        width: 100%;
        margin: 0;
    }  
  
  } */

 /* skill */
.skill-name {
    width: 100px;
    display: inline-block;
    height: 100%;
     padding: 3px;
    font-size: 10pt;
    font-weight: 700;
    color: rgb(29, 29, 29);
    background-color: rgba(247, 247, 247, .7);
    text-transform: uppercase;
    text-align: center;
}

.skill-bar {
    height: 24px;
    background: rgb(247, 247, 247);
    border-radius: 3px;
    margin: 1em 0;
}

.skill-per {
    height: 24px;
    background-color: rgb(8, 253, 216);
    width: 0;
    transition: all 1.5s linear;
    position: relative;
    border-radius: 3px;
}

.skill-per::before {
    content: attr(per);
    position: absolute;
    /* background-color: #141414; */
    color: #1d1d1d;
    font-size: .9rem;
    border-radius: 4px;
    top: 0;
    right: 0;
    transform: translateX(-50%);
    font-weight: 800;
}


.skill-per::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0;
    left: 0;
    transform: translateX(50%) rotate(45deg);
    border-radius: 2px;
}

/* logo  */
#logo{
    padding: 9% 0 0 ;
    animation: fill-anime 0.5s ease forwards 2.5s;
}
#logo path:nth-child(1){
    stroke-dasharray: 160px;
    stroke-dashoffset: 160px;
    animation: line-anim  2.2s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 205px;
    stroke-dashoffset: 205px;
    animation: line-anim  2s ease forwards .3s; 
}
#logo path:nth-child(3){
    stroke-dasharray: 223px;
    stroke-dashoffset: 223px;
    animation: line-anim  2s ease forwards .6s;
}
#logo path:nth-child(4){
    stroke-dasharray: 160px;
    stroke-dashoffset: 160px;
    animation: line-anim  2s ease forwards .9s; 
}
 
@keyframes line-anim{
    to{
        stroke-dashoffset: 0;
    }
} 

@keyframes fill-anime {
    from{
        fill: transparent;
    }
    to {
        fill: #fff;
    }
}



/* form */

.form-group {
    position: relative;
}

.form-input {
    position: relative;
 
    font-weight: 600;
    width: 100%;
    /* height: 40px; */
    border: none;
    /* padding: 0 10px; */
    box-shadow: none;
    outline: none;
    -webkit-transition: all .5s linear;
       -moz-transition: all .5s linear;
        -ms-transition: all .5s linear;
         -o-transition: all .5s linear;
            transition: all .5s linear;
  }
  .form-input.border-animation {
    border: 1px solid rgba(8, 253, 216, .1);
  }
  .form-input.border-animation ~ .border-line-animation.top-bottom:before,
  .form-input.border-animation ~ .border-line-animation.top-bottom:after,
  .form-input.border-animation ~ .border-line-animation.left-right:before,
  .form-input.border-animation ~ .border-line-animation.left-right:after,
  .form-input.border-animation ~ .border-line-animation.top:before,
  .form-input.border-animation ~ .border-line-animation.top:after,
  .form-input.border-animation ~ .border-line-animation.bottom:before,
  .form-input.border-animation ~ .border-line-animation.bottom:after,
  .form-input.border-animation ~ .border-line-animation.left:before,
  .form-input.border-animation ~ .border-line-animation.left:after,
  .form-input.border-animation ~ .border-line-animation.right:before,
  .form-input.border-animation ~ .border-line-animation.right:after{
    position: absolute;
    content: " ";
    right: 0;
    background: rgb(8, 253, 216);
    -webkit-transition: all .5s linear;
       -moz-transition: all .5s linear;
        -ms-transition: all .5s linear;
         -o-transition: all .5s linear;
            transition: all .5s linear;
  }
  .form-input.border-animation ~ .border-line-animation.top-bottom:before,
  .form-input.border-animation ~ .border-line-animation.top-bottom:after,
  .form-input.border-animation ~ .border-line-animation.top:before,
  .form-input.border-animation ~ .border-line-animation.top:after,
  .form-input.border-animation ~ .border-line-animation.bottom:before,
  .form-input.border-animation ~ .border-line-animation.bottom:after
   {
    width: 0;
    height: 2px;
  }
  .form-input.border-animation ~ .border-line-animation.left-right:before,
  .form-input.border-animation ~ .border-line-animation.left-right:after,
  .form-input.border-animation ~ .border-line-animation.left:before,
  .form-input.border-animation ~ .border-line-animation.left:after,
  .form-input.border-animation ~ .border-line-animation.right:before,
  .form-input.border-animation ~ .border-line-animation.right:after
   {
    width: 2px;
    height: 0;
  }
  .form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
    bottom: 0;
    left: 0;
  }
  .form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
    top: 0;
    right: 0;
  }
  .form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
    left: 0;
    bottom: 0;
    left: 0;
  }
  .form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
    top: 0;
    right: 0;
    bottom: 0;
  }
  
  .form-input.border-animation.set-1:hover ~ .border-line-animation.top-bottom:before,
  .form-input.border-animation.set-1:hover ~ .border-line-animation.top-bottom:after,
  .form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
  .form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
    width: 100%;
  }
  .form-input.border-animation.set-1:hover ~ .border-line-animation.left-right:before,
  .form-input.border-animation.set-1:hover ~ .border-line-animation.left-right:after,
  .form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
  .form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
    height: 100%;
  }
  


 /* -----------index html css ------------------ */

 /* overlay styles, all needed */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    background-color: rgba(29, 29, 29, 1);
    z-index: 10;
}
/**
 * ----------------------------------------
 * animation scale-up-tl logo
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-tl {
    0% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      -webkit-transform-origin: 0% 0%;
              transform-origin: 0% 0%;
              background-color: transparent;
    }
    70% {
        background-color:  rgba(29, 29, 29, .01);
    }
    80% {
        background-color:  rgba(29, 29, 29, 1);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 0% 0%;
              transform-origin: 0% 0%;
              
    }
  }
  @keyframes scale-up-tl {
    0% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      -webkit-transform-origin: 0% 0%;
              transform-origin: 0% 0%;
              background-color:  transparent
    }
    70% {
        background-color:  rgba(29, 29, 29, .01);
    }
    80% {
        background-color:  rgba(29, 29, 29, .7);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 0% 0%;
              transform-origin: 0% 0%;
              background-color:  rgba(29, 29, 29, 1);
    }
  }
  /* .scale-up-tl   transition-delay: 1s;  lepsie bez delay */
  .scale-up-tl  { 
	-webkit-animation: scale-up-tl 3.5s cubic-bezier(0.340, 0.595, 0.525, 1.000) reverse forwards;
            animation: scale-up-tl 3.5s cubic-bezier(0.340, 0.595, 0.525, 1.000) reverse forwards;
            
}


/**
     * ----------------------------------------
     * animation scale-up-left svg logo
     * ----------------------------------------
     */


     #logo2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: fill-anime1 1.5s ease forwards 1s;
}
#logo2 path:nth-child(1){
    stroke-dasharray: 643.84521484375px;
    stroke-dashoffset: 643.84521484375px;
    animation: line-anim1 1s ease forwards;
    /* animation-iteration-count: infinite; */
}
#logo2 path:nth-child(2){
    stroke-dasharray: 827.6783447265625px;
    stroke-dashoffset:827.6783447265625px;
    animation: line-anim1 1s ease forwards .3s; 
    /* animation-iteration-count: infinite; */
}
#logo2 path:nth-child(3){
    stroke-dasharray: 899.370361328125px;
    stroke-dashoffset: 899.370361328125px;
    animation: line-anim1 1s ease forwards .6s;
    /* animation-iteration-count: infinite; */
}
#logo2 path:nth-child(4){
    stroke-dasharray: 643.84521484375px;
    stroke-dashoffset:643.84521484375px;
    animation: line-anim1 1s ease forwards .9s; 
    /* animation-iteration-count: infinite; */
}

@keyframes line-anim1{
    to{
        stroke-dashoffset: 0;
    }
} 

@keyframes fill-anime1 {
    from{
        fill: transparent;
    }
    to {
        fill: #fff;
    }
}

/* #logo 2  media querries*/

@media (min-width: 320px) and (max-width: 768px){
    #logo2 {
    width: 70% !important;
  }
  .scale-up-tl{
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
  }
}





.animation-target {
    animation: animation 2000ms linear infinite both;
  }
  
  /* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bl%3A1%2Cs%3A%5B%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A0.2%2Cy%3A1%7D%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A500%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A1%2Cy%3A0.2%7D%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A1000%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A5%2Cy%3A1%7D%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A500%2CD%3A1500%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A1%2Cy%3A5%7D%2Cs%3A1%2Cb%3A2%7D%5D%7D */
  
  @keyframes animation1 { 
    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    2.15% { transform: matrix3d(0.589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.3% { transform: matrix3d(0.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    6.46% { transform: matrix3d(0.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.61% { transform: matrix3d(0.125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.16% { transform: matrix3d(0.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    19.72% { transform: matrix3d(0.205, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    24.9% { transform: matrix3d(0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    25% { transform: matrix3d(0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    27.15% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    29.3% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    30.83% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    31.46% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    33.61% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    39.16% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    41.99% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.72% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.205, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    49.9% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    50% { transform: matrix3d(0.2, 0, 0, 0, 0, 0.201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    52.15% { transform: matrix3d(0.611, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    54.3% { transform: matrix3d(0.903, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    55.83% { transform: matrix3d(1.015, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    56.46% { transform: matrix3d(1.042, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    58.61% { transform: matrix3d(1.075, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    64.16% { transform: matrix3d(1.017, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    66.99% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    69.72% { transform: matrix3d(0.995, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    74.9% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    75% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    76.9% { transform: matrix3d(1, 0, 0, 0, 0, 0.629, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    77.85% { transform: matrix3d(1, 0, 0, 0, 0, 0.79, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    78.78% { transform: matrix3d(1, 0, 0, 0, 0, 0.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    79.73% { transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    80.68% { transform: matrix3d(1, 0, 0, 0, 0, 1.03, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    80.83% { transform: matrix3d(1, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    82.56% { transform: matrix3d(1, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    87.56% { transform: matrix3d(1, 0, 0, 0, 0, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    91.99% { transform: matrix3d(1, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    92.57% { transform: matrix3d(1, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
  }