html {
  width: 100%;
  height: 100%; 
}

body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f4f4f4;
  overflow-x: hidden; 
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing: 1px; 
}

p {
  margin: 0 0 1.5rem; 
}

a {
  color: #26a5d3; 
}

a:hover, a:focus {
  text-decoration: none;
  color: #16617d; 
}

  /*mob view navbar*/
.navbar {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color: #333; 
}

.navbar-brand {
  font-weight: 700; 
}

.navbar-brand:focus {
  outline: none; 
}

.navbar-custom a {
  color: #f4f4f4; 
}

.navbar-custom .nav li a {
  -webkit-transition: background .03s ease-in-out;
  -moz-transition: background .03s ease-in-out;
  transition: background .03s ease-in-out; 
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
  outline: none;
  background-color: rgba(0, 0, 0, 0.57); 
}

.navbar-dark .navbar-nav .nav-link {
  color: white; 
}


/*Projects css*/
#projects{
  padding: 2.5rem;
}
.project{
  border: 1px solid;
  border-radius: 10%;
  position: relative;
  height: 200px;
}

#pro1{
  background: url(../img/shoppingproject.JPG) no-repeat center;
  background-size:     cover; 
}

#pro2{
  background: url(../img/firstportfolio.JPG) no-repeat center;
  background-size:     cover; 
}

#pro3{
  background: url(../img/formlogo.jpg) no-repeat center;
  background-size:     cover; 
}

#pro4{
  background: url(../img/rpslogo.jpg) no-repeat center;
  background-size:     cover;                      
}

.projectSpace{
  margin-bottom: 10px;
}

.btnAlign{
  padding-top: 5px;
  padding-bottom: 10px;
  justify-content: space-around;
  display: flex;
}



.proTxt{
  position: absolute;
  width: 100%;
  height: 60px;
  text-align: center;
  bottom: 0px;
  font-size: 0.9rem;
  background-color: black;
  color: white;
  padding-top: 5px;
}

@media (min-width: 767px) {

  #project1{
    animation-name: project1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }

  @keyframes project1{
    0% {left:-500px}
    100% {left:0px}
  }

  #project2{
    animation-name: project2;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  @keyframes project2{
    0% {left:-500px}
    100% {left:0px}
  }

  #project3{
    animation-name: project3;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  @keyframes project3{
    0% {right:-500px}
    100% {right:0px}
  }

  #project4{
    animation-name: project4;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }

  @keyframes project4{
    0% {right:-500px}
    100% {right:0px}
  }

  
  .btnAlign {
    position: relative;
  }

.btnAlignActive {
  position: relative;
  animation-name: btnAlignActive;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes btnAlignActive {
  0% { opacity: 0 ; }
  80% {opacity: 0.0;}
  100% {opacity: 1;}
}

}


  /*for large screen navbar*/
@media (min-width: 767px) {
  .navbar {
    padding: 1.4rem 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: transparent;
    -webkit-transition: background .0005s ease-in-out,padding .0005s ease-in-out;
    -moz-transition: background .0005s ease-in-out,padding .0005s ease-in-out;
    transition: background .00005s ease-in-out,padding .5s ease-in-out; }

  .top-nav-collapse {
    padding: 0;
    background-color: #333; }
  .navbar-custom.top-nav-collapse {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); } 
  
  
    .project{
      border: 1px solid;
      transition-duration: 1s;
      position: relative;
    }
    
  
    .project:hover{
      transform: scale(1.1);
      transition-duration: 1s;
    }
  
  }

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 6rem 0;
  text-align: center;
  color: #f4f4f4;
  background: url(../img/introImage.jpg) no-repeat bottom center scroll;
  background-color: #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}


.intro-body {
  display: table-cell;
  vertical-align: middle; 
}

.brand-heading {
  font-size: 2rem; 
}

.intro-text {
  font-size: 1.1rem; 
}




@media (min-width: 767px) {
  .intro {
    height: 100%;
    padding: 0; }

  .brand-heading {
    font-size: 4rem !important; }

  .intro-text {
    font-size: 1.7rem; } }

.content-section {
  padding: 2rem 0 2rem; }


  /*Resume css*/
.resumeDiv{
  width:80%;
  margin-left: auto;
  margin-right: auto;
}


.resume-section {
  width: 100%;
  padding: 3rem 0;
  color: #f4f4f4;
  background: url(../img/downloads-bg.jpg) no-repeat center center scroll;
  background-color: #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

 .resume-section hr{
   background: white;
 }

 .resume-section #skillid{
   list-style-type: none;
 }

 #resumeShow{
   display: none;
 }



@media (min-width: 767px) {
  .resume-section {
    padding: 3rem 0; } 
  
  .resumeDiv p{
    font-size: 18px;
  } 
}

#aboutmeBox{
  border: 1px solid;
  border-color: rgba(79, 226, 20, 0.97);
  padding: 1rem 2rem;
  box-shadow: 2px 10px 8px 2px rgba(0, 0, 0, 0.2);
}

#aboutHr{
  border: solid 2px black;
  margin-bottom: 20px;
}

#contact{
  padding-bottom: 2rem;
  background-color: #333;
  color: white;
}

#phoneNumIcon{
    color: white;
  }

@media (max-width: 550px) {
  .banner-social-button li:nth-child(3){
    padding-top: 5px;
  }
  .banner-social-button li:nth-child(4){
    padding-top: 5px;
  }
}

@media screen and (max-width: 768px)
{
  body{
    overflow-x: hidden; 
  }
}



footer {
  margin-top: .75rem;
  padding-top: 2rem;
  background-color: #f4f4f4;
  color: black;
  height: 80px;
  text-align: center; }

.page-scroll {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 2s;
  -moz-transition-property: -webkit-transform;
  -moz-transition-duration: 2s; 
}