::-webkit-scrollbar {
     width: 12px;
     /* for vertical scrollbars */
     height: 12px;
     /* for horizontal scrollbars */
 }
 
 ::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.1);
 }
 
 ::-webkit-scrollbar-thumb {
     background: rgba(44, 62, 80, 1);
 }
 
 body {
     background-color: #f2f2f2;
     font-family: "Poppins";
     font-weight: 300;
     font-size: 16px;
     color: #555;
     -webkit-font-smoothing: antialiased;
     -webkit-overflow-scrolling: touch;
 }
 /* Titles */
 
 h1,
 h2,
 h3,
 h4,
 h5{
     font-weight: 300;
     color: #333;
 }
 
 .h1 {
     color: #EEEEEE;
 }
 
 .h3 {
     color: #EEEEEE;
 }
 /* Paragraph & Typographic */
 
 p {
     line-height: 28px;
     margin-bottom: 25px;
 }
 
 .centered {
     text-align: center;
 }
 /* Links */
 
 a {
     color: #f85c37;
     word-wrap: break-word;
     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
     -o-transition: color 0.1s ease-in, background 0.1s ease-in;
     transition: color 0.1s ease-in, background 0.1s ease-in;
 }
 
 a:hover,
 a:focus {
     color: #7b7b7b;
     text-decoration: none;
     outline: 0;
 }
 
 a:before,
 a:after {
     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
     -o-transition: color 0.1s ease-in, background 0.1s ease-in;
     transition: color 0.1s ease-in, background 0.1s ease-in;
 }
 
 hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
     padding: 0;
 }
 /*---------------------------------------------------
	3.1 Topbar
---------------------------------------------------*/
 
 #section-topbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 10000;
     overflow: visible;
     font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 #section-topbar a {
     /*color: #fff;*/
 }
 
 #topbar-inner {
     background: #111;
     line-height: 0;
     text-align: center;
 }
 /*
	Top Bar

	By default, top navigation bar uses "fixed" position
*/
 
 #section-topbar ul#nav {
     display: inline-block;
     margin: 0;
     padding: 0;
     /* For IE, the outcast */
     zoom: 1;
     *display: inline;
 }
 
 #section-topbar ul#nav>li {
     display: block;
     float: left;
     padding: 0;
 }
 
 #section-topbar ul#nav a {
     display: block;
     font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
     text-decoration: none;
     padding: 18px 20px 18px 20px;
 }
 
 #section-topbar ul#nav a:hover {
     background: #222;
     text-decoration: none;
     border-left: 1px solid #111;
     animation: bounce 0.7s ease infinite;
 }
 
 #section-topbar ul#nav .active a {
     background: #44bbaa;
     border-left: 1px solid #111;
 }
 
 #section-topbar ul#nav .active a:hover {
     background: #44bbaa;
 }
 
 #section-topbar i {
     font-size: 25px;
 }
 /*---------------------------------------------------
	SECTION WRAPS
---------------------------------------------------*/
 /* Header Wrap */
 
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

 #headerwrap {
     background: url(../img/header-bg.jpeg) no-repeat center top;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     margin-top: 0px;
     padding-top: 140px;
     text-align: center;
     background-attachment: relative;
     background-position: center center;
     min-height: 500px;
     width: 100%;
     -webkit-background-size: 100%;
     -moz-background-size: 100%;
     -o-background-size: 100%;
     background-size: 100%;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
 }
 
 #headerwrap h1 {
     font-size: 80px;
     color: #EEEEEE;
 }
 
 #headerwrap h3 {
     font-size: 20px;
     color: #EEEEEE;
 }
 /* Intnro Wrap */
 
 #intro {
     background: #2c3e50;
     padding-top: 60px;
     padding-bottom: 60px;
     color: white;
 }
 
 #intro h5,
 p {
     color: white;
 }
 
 #intro i {
     color: white;
     font-size: 20px;
     padding-right: 8px;
     vertical-align: middle;
 }
 
 #skillswrap {
     background: #2c3e50;
     padding-top: 60px;
     padding-bottom: 60px;
     color: white;
 }
 
 #skillswrap h5,
 p {
     color: white;
 }
 
 #footwrap {
     background: #2f2f2f;
     padding-top: 50px;
     padding-bottom: 50px;
 }
 
 #footwrap p {
     color: white;
 }
 
 #footwrap h5 {
     color: white;
 }
 
 #footwrap t {
     font-weight: 700;
 }
 
 #footwrap i {
     padding-right: 8px;
     color: #1abc9c;
 }
 /* Copyright Wrap */
 
 #c {
     background: #222222;
     padding-top: 15px;
     text-align: right;
 }
 
 #c p {
     color: white
 }
 /* Global Values */
 
 .desc {
     padding-top: 50px;
 }
 
 .desc p {
     color: #2f2f2f;
 }
 
 .desc t {
     color: #34495e;
     font-weight: 700;
 }
 
 .desc imp {
     padding: 6px;
     color: white;
     background: #34495e;
 }
 
 .desc more {
     color: #95a5a6;
 }
 
 sm {
     font-size: 12px;
 }
 
 @media screen and (max-width: 867px) {
     #section-topbar {
        /* display: none;*/
     }
     #headerwrap {
         margin-top: 0px;
     }
 }
 
 
 @media screen and (max-width: 470px) {
     #headerwrap h1 {
         font-size: 40px;
     }
     #headerwrap h3 {
         font-size: 15px;
     }
 }

 .containerButton {
    position: fixed;
    top: 40px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    outline: none;
    cursor: pointer;
    padding: 15px;
}
  
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #FFF;
margin: 6px 0;
transition: 0.4s;
}

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}

.typed-cursor{
    display:none;
}

.social_media {
    font-size: 25px;
}

.sub_skill{
    font-size:20px;
}

.vertical-line{
    border-left: 1px solid white;
    position:absolute;
    height: 280px;
    margin-top:20px
  }

@media screen and (max-width: 1200px) {
    .vertical-line {
        display:none;

    }
}

@media screen and (min-width: 1200px) {

}