.topnav-sm{
    overflow: hidden;
    position: fixed;
    z-index: 1;
}
.topnav-sm a{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
    font-size: 10px;
}
.topnav-sm a:hover {
    border-bottom: blue solid 3px;
    color: white;
  }

.centered-sm{

  background: rgba(45, 46, 45, 0.6);
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: xx-small;
}

.banner-container-sm .centered-sm h1{
    color: whitesmoke;
    text-align: center;
    margin: 0;
    margin-bottom: 3px;
    padding: 0;
    padding-bottom: 3px;
    text-decoration: underline overline 2px ;
    font-size: 4.5em;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1em;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    
}
.banner-container-sm .centered-sm p{
color:rgb(219, 237, 248);
font-size: 1em;
margin-bottom: 0px;
padding: 0 8px;
letter-spacing: .1em;
line-height: 1em;
text-transform: uppercase;
}
.banner-container-sm .social-icons-sm {
    
    margin-top: -2em;
    margin-bottom: 0px;
    text-align: center;
}
.banner-container .social-icons a {
text-align: center;
border: 1px solid rgb(173, 166, 166);
border-radius: 90px !important;
height: 52px;

padding: 0px;
width: 52px;
display: inline-block;
color: rgb(121, 119, 119);
margin: 0 2px;
}
.centered2-sm{
position: relative;
/* top: 80%; */
left: 50%;
transform: translate(-50%, -50%);
}
.fa-linkedin{
    color: rgb(229, 229, 240);
    font-size:10px;
}
.fa-linkedin:hover{
  color: #5820f2;
}
.fa-github{
    color:rgb(229, 237, 240);
}
.fa-github:hover{
  color: #2b2a2c;
}
.fa-twitter{
    color:rgb(229, 229, 240);
}
.fa-twitter:hover{
  color:rgb(19, 177, 235);
}
.fa-quora{
    color:rgb(229, 229, 240);
}
.fa-quora:hover{
  color: red;
}
.fa-instagram{
    color:rgb(229, 229, 240);
}
.fa-instagram:hover{
  color: rgb(232, 6, 104);
}

#intro{
    margin-top: -30px;
    padding: 50px 0;
    background-color: black;
    height:100px;
    color: white;
}
.centeredintro-sm{
    position: absolute;
    font-size: xx-small;
    background-color: black;
    transform: translate(0%,10%);  
}
.centeredintro-sm h1{
    font-size: x-small;
}

.centeredintro-sm ul li{
    font-size: xx-small;
}
#about{
  margin-top: -1.3em;
  background-color:black;
  color:white;
}
.aboutuscolumn-sm img{
      margin-top:10%;
      border:solid rgb(245, 163, 177) 3px;
      border-radius: 30%;
      height: 15em;
      width:12em;
      display:none;
}
.column-sm{
    float:none;
    width:60%;
}

.aboutuscolumn-sm h1{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:30px;
    padding:0.2em;
  }
.aboutuscolumn-sm h3{
      margin-top: 1em;
      margin-bottom: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:20px;
    padding:0.2em;
  }
.row-sm{
    margin-left: 15px;
}
  .about-column-sm{
    border-radius:10% ;
    border:solid pink 2px;
    transform: rotate(-15deg);
    margin-top: 5%;
    margin-right: 1em;
    height: 7em;
    float:left;
    width:30%;
    padding:10px;
}
  .about-column-sm i{
    font-size:40px;
      color: rgb(255, 153, 170);

  }

  .about-column-sm h2{
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: 5%;
    margin-bottom: 5%;
    color:rgb(242, 118, 138);
    margin-left:3%;
    font-size: x-small;
  }
  .about-column-sm p{
    font-family: 'Roboto', sans-serif;
    font-size:xx-small;
  }


  .parallaxTXT-sm{
    color: white;
    background-color: rgb(4, 2, 36);
    padding:2em;
    font-size: larger;
    font-family: 'Source Sans Pro', sans-serif;
}

.skills-Heading-sm h2{
    font-family: 'Bebas Neue',sans-serif;
    font-size:25px;
    color: #160261;
    margin-bottom:1.5em;
  }

  .column3-sm{
    float: left;
    width: 75%;
    margin-right: 2em;
  }

  .skills-sm{
    margin-bottom:1em;
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.html-sm {width: 90%;height:0.3em; background-color: #160261;}
  .css-sm {width: 80%;height:0.3em; background-color: #160261;}
  .php-sm {width: 60%;height:0.3em; background-color: #160261;}
  .java-sm {width: 60%;height:0.3em; background-color: #160261;}
  .js-sm {width: 65%; height:0.3em;background-color: #160261;}
  .dsa-sm {width: 60%; height:0.3em;background-color: #160261;}
  .node-sm {width: 60%;height:0.3em; background-color: #160261;}
  .react-sm {width: 50%;height:0.3em; background-color: #160261;}
  .express-sm {width: 60%;height:0.3em; background-color: #160261;}
  .jquery-sm {width: 60%;height:0.3em; background-color: #160261;}

  .experience-heading-sm{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 35px;
    padding:1em;
  }

  .experience-row-sm {
    margin-top: 2em;
    margin-left: 1.5em;
    padding:1.5em;
    }

    .card-sm {
      margin-left:1em;
        border-radius:5%;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      padding: 16px;
      text-align: center;
      background-color: #f1f1f1;
      height: 12em;
      width: 12em;
    }

    .porfolio-header-sm {
        text-align: center;
        padding: 13px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 20px; 
      }

      .porfolio-header-sm h1 span{
          font-size: 40px;
      }
      .portfolio-btn-sm {
        border: none;
        outline: none;
        padding: 10px 16px;
        background-color: #f1f1f1;
        cursor: pointer;
        font-size: 18px;
        margin-bottom: 6px;
      }
      .portfolio-row-sm {
        display: -ms-flexbox; /* IE 10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE 10 */
        flex-wrap: wrap;
        padding: 2em 0.1em;
        
      }
      
      /* Create two equal columns that sits next to each other */
      .portfolio-column-sm {
        -ms-flex: 50%; /* IE 10 */
        flex: 50%;
        padding: 0em 3em;
    
      }

      .portfolio-column-sm img {
        vertical-align: middle;
        height: 10em;
        width: 17em;
        padding: 0.3em 0.3em;
      }

      .portfolio-column-sm img:hover{
        animation: mymove 1s infinite;
        
      }
      @keyframes mymove {
        50% {box-shadow: 5px 5px 10px rgb(138, 136, 136)}
      }

      .contact-sm{
        background-color:#3394D5;
        height:80em;
      }

      .contact-heading-sm h1{
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 30px;
        padding:2em 2em 0.3em;
        color:white;
      }
      .contact-heading-sm h1 span{
        font-size: 35px;
      }
      .contact-heading-sm p{
        padding:1em 2em;
        color: white;
        font-size: 15px;
      }
    
      .contactform-sm{
        height:0em;
      }
      .contact-row-sm{
        padding:3em;
      }
      .contact-column-sm{
        float: left;
        width: 100%;
        padding: 10px;
        
      }
      input[type=text], select, textarea {
        width: 100%; /* Full width */
        padding: 12px; /* Some padding */ 
        border: 1px solid #ccc; /* Gray border */
        border-radius: 4px; /* Rounded borders */
        box-sizing: border-box; /* Make sure that padding and width stays in place */
        margin-top: 6px; /* Add a top margin */
        margin-bottom: 16px; /* Bottom margin */
        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
      }