*{
    font-family: 'Raleway';
}
html{
    overflow: hidden;
}
.navbar-light .navbar-brand,.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link  {
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    
}
.navbar .border-bottom {
        border-bottom: 1px solid #333 !important;
}
.navbar-light .navbar-brand{
    font-size: 30px
}
.main{
    background: #f8f9fa;
    padding-top: 200px
}
.explore{
    padding-top: 200px;
    
    
}
.explore h1{
       font-weight: bold
 
}
.explore span {
    border: 1px solid #000;
    margin-left: 5px;
    font-weight: bold;
    transition: all 0.3s ease-in-out 
}
.explore span:first-of-type{
    color: #FFF;
    background: #000
}
.explore span:hover{
    box-shadow: 0px 2px 10px #000
}
.about,.skill{
    padding-top: 90px
}
.about h1,.about p{
    padding-bottom: 20px;
    width: 100%
}
.about .btn{
    padding: 10px;
    border: none;
    border-radius: 0;
    font-weight: bold;
    margin-top: 10px
}
.skill p{
    font-weight: bold;
    padding-top: 20px;
    font-size: 22px
}
.code{
    margin-top: 50px;
    background: url(../img/1.jpg) fixed center center no-repeat;
    min-height: 500px;
    position: relative;
}
.code .overlay{
    position: absolute;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 2;
    width: 100%;
    height: 100%
}
.do .container{
    background: #FFF;
    box-shadow: 3px 1px 10px #333,-3px -1px 10px #333;
    position: relative;
    top: -265px;
    z-index: 3;
    padding: 100px;
}
.do .container div h4{
    font-weight: bold
}
.do .container div{
    padding: 10px
}
.do .container div p{
    font-size: 18px;
}
.work{
    margin-top: -135px;
    
}
.work h1{
    padding: 40px
}

.sta{
    background: url(../img/2.jpg) fixed center center no-repeat;
    min-height: 400px;
    color: #FFF;
    padding-top: 150px;
    position: relative
}
.sta .overlay{
    position: absolute;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
    width: 100%;
    height: 100%
}

.sta h1{
     font-weight: bold;
    font-size: 80px
}

.contact{
    padding-top: 80px
}
.contact .btn{
    margin: 20px 0px
}
.contact h1{
    padding: 20px
}
.contact input, .contact textarea{
    border: none;
    resize: none;
    margin-bottom: 10px
}
.contact textarea{
    height: 200px;
    margin-top: 10px
}
.copy{
    background: #333;
    color: #FFF;
    padding: 20px
}
.copy .list1 li{
    display: block;
    float: left;
    margin-left: 20px;
    cursor: pointer;
    font-size: 20px;

}
.copy .btn{
    font-size: 25px;
    color: #FFF;
    margin-bottom: -2px
}
.load{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
        z-index: 88888;
}
.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
        margin: 350px auto;
        overflow: visible

}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 

}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}