@import url('https://fonts.googleapis.com/css?family=Lato');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");


.fa {
  padding: 20px;
  font-size: 200px;
  width: 250px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 20%;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}


.fa:hover {
    opacity: 0.7;
    transform: scale(1.2, 1.2);
    transition:.3s ease-in-out;
}
html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Lato";
}
.navbar{ background:#4484CE;}
.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}
.nav-link{ margin-right: 1em !important;}
.nav-link:hover{ background: #4484CE;}
.navbar-collapse{ justify-content: flex-end;}
.navbar-toggler{  background:#fff !important;}

transition: all 0.4s ease;
}

@keyframes slideInFromLeft {
  0% {
  opacity: 0;
  transform: translateX(-1024px);
  }
  10% {
  opacity: 1;

  }
}
.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 40% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black;}
}

.typewriter {
  position: absolute;
  top: 30%;
  padding: 2em;
  color:#4484CE;
  height: 6em;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 2.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

.header{
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

.description{
   animation: 3.5s ease-out 0s 1 slideInFromLeft;
    position: absolute;
    top: 50%;
    margin: auto;
    padding: 2em;
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #4484CE;
 background: #4484CE;
 color:#fff;
}

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#4484CE;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;

}
.about .desc h3{
 color: #4484CE;
}
.about .desc p{
 line-height:2;
 color:#888;
}

/*Portfolio*/
.portfolio{
 margin: 4em 0;
 position: relative; 
}
.portfolio h1{
 color:#4484CE;
 margin: 2em; 
}
.portfolio h5{
 color:#4484CE;
}
.portfolio img{
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 15rem;
  width: 75%;
  background-color: #343a40;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.links{
 margin: 4em 0;
 position: relative; 
}
.links h1{
 color:#4484CE;
 margin: 2em; 
}

.links img{
  height: 80%;
  width: 80%;
  border-radius: 80%
}

.des{
 background: #4484CE;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 90%;
 width: 75%;
 height: 20%;
 transition:.3s ease-in-out;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.img-modal {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 150px;
    max-width: 300px;
    margin-top: 25px;
}

.item:hover .des{
 height: 15rem;
 background:#4484CE;
 position: absolute;
 width: 75%;
 padding: 5em;
 top: 0;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom-left-radius: 0;
}

.row{
  padding-left: 70px 
}

.polaroid {
  border-radius: 8px;
  transition:.3s ease-in-out;
  background-color: #4484CE;
  width: 120%;
  height: 24rem;
  background-color: white;
  margin-bottom: 25px;
}

.polaroid:hover {
    opacity: 1;

    /** default is 1, scale it to 1.5 */
 	transform: scale(1.2, 1.2);


    /** translate 50px from left, and 40px from top */
    /** transform: translate(50px, 40px); *//

    /** combine both scale and translate */
    /** transform: scale(1.5, 1.5) translate(50px, 40px); */
}