* { box-sizing: border-box; }


/*

*/

a {  text-decoration: none;  color: rgba(34, 34, 34, 0.8);}

a:hover, a :focus { color: red; text-decoration: none;}



.menu-left a { display: inline-block;  position: relative;  padding-bottom: 0px;  transition: color .35s ease;}
.menu-left a:before {  content: '';  display: block;  position: absolute;  left: 0;  bottom: 0;  height: 1px;  width: 0;  transition: width 0s ease, background .35s ease;}
.menu-left a:after {  content: '';  display: block;  position: absolute;  right: 0;  bottom: 0;  height: 1px;  width: 0;  background: red;  transition: width .35s ease;}
.menu-left a:hover:before {  width: 100%;  background: red;  transition: width .35s ease;}
.menu-left a:hover:after {  width: 100%;  background: transparent;  transition: all 0s ease;}
nav { padding-bottom: 5px; left: 0;  width: 100%; z-index: 3;  will-change: transform;  transition: background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);  transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s;  transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);  transform: translateY(0);  -webkit-transform: translateY(0);}
nav .logo {  float: left; padding-top: .25rem; padding-bottom: .25rem;  margin-right: 1rem;  font-size: 1.25rem;  line-height: inherit;  font-weight: 500;  color: red;}
nav .logo:after {  content: '';  display: table;  clear: both;}
nav ul {  list-style: none;  padding-left: 0;  margin: 0;}
nav ul li {  float: none;  margin-left: 0;}
nav ul li a { display: block; }
ul.menu-left {  padding-right: 0;  display: block;  max-height: 0;    overflow: hidden;  -webkit-transition: all 0.3s ease-out;  -moz-transition: all 0.3s ease-out;  -ms-transition: all 0.3s ease-out;  -o-transition: all 0.3s ease-out;  transition: all 0.3s ease-out;  z-index: 10;}
ul.menu-left:before {  content: '';  display: table;  clear: both;}
ul.menu-left.collapse2 { max-height: 37rem !important; }
.nav-toggle2 {  display: block;  border-radius: 5px;  background-color: transparent;  float: right;  height: 38px;  width: 38px;  cursor: pointer;  padding: 8px 8px;}
.nav-toggle2.open span:first-child { transform: rotate(45deg) translate(4.4px, 4.4px); }
.nav-toggle2.open span:last-child { transform: rotate(-45deg) translate(4.4px, -4.4px); }
.nav-toggle2 span {  position: relative;  display: block;  height: 2px;  width: 100%;  margin-top: 4px;  background-color: #000;  transition: all .25s;}


/*  Responsive Area Start  */

@media (min-width: 992px) {
  nav ul li { float: left; }
}
@media (min-width: 576px) {
  nav ul li a { display: block;  padding: .425rem 0rem;}
}
 @media (max-width: 992px) {
  ul { clear: both; }
  ul li {}
  .skill-content ul li {  padding: 0;}
}
@media (min-width: 992px) {
  ul.menu-left {  display: block !important;  float: ;  max-height: none;}
}
.nav-toggle2.open span:nth-child(2) {
  width: 0%;  opacity: 0;
}
@media (min-width: 992px) {
  .nav-toggle2 { display: none; }
}
/*  Responsive Area End  */