* {
  margin: 0;
  padding: 0; }

.slides .firstSlide ul li:nth-child(1), .slides .firstSlide ul li:nth-child(2), .slides .firstSlide ul li:nth-child(3), .slides .secSlide ul li:nth-child(1), .slides .secSlide ul li:nth-child(2), .slides .secSlide ul li:nth-child(3) {
  background-size: -webkit-cover;
  background-size: -moz-cover;
  background-size: -o-cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.sidebar .Links-List a, .slides .firstSlide ul li h1, .slides .firstSlide ul li:nth-child(2) div p, .slides .firstSlide ul li:nth-child(3) .checkWorks h1, .slides .firstSlide ul li:nth-child(3) .checkWorks a, .slides .secSlide ul li h1, .slides .secSlide ul li:nth-child(1) .moreAbout h1, .slides .secSlide ul li:nth-child(1) .moreAbout a, .slides .secSlide ul li:nth-child(2) .skill-container {
  font-family: 'Rajdhani', sans-serif; }

.pLoader {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #2f3640;
  z-index: 2; }
  .pLoader ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    display: flex; }
    .pLoader ul li {
      list-style: none;
      color: #57606f;
      font-size: 5em;
      letter-spacing: 15px;
      animation: pLoaderAni 1.4s linear infinite; }
@keyframes pLoaderAni {
  0% {
    color: #57606f;
    text-shadow: none; }
  90% {
    color: #57606f;
    text-shadow: none; }
  100% {
    color: #00a8ff;
    text-shadow: 0 0 7px #00a8ff, 0 0 50px #0097e6; } }
  .pLoader ul li:nth-child(1) {
    animation-delay: .2s; }
  .pLoader ul li:nth-child(2) {
    animation-delay: .4s; }
  .pLoader ul li:nth-child(3) {
    animation-delay: .6s; }
  .pLoader ul li:nth-child(4) {
    animation-delay: .8s; }
  .pLoader ul li:nth-child(5) {
    animation-delay: 1s; }
  .pLoader ul li:nth-child(6) {
    animation-delay: 1.2s; }
  .pLoader ul li:nth-child(7) {
    animation-delay: 1.4s; }

@media screen and (max-width: 767px) {
  .pLoader ul li {
    font-size: 22px;
    letter-spacing: 12px; } }
.main {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%; }

.sidebar {
  width: 80px;
  height: 100%;
  left: 0;
  position: fixed;
  background-color: #2f3640;
  transition: 0.3s;
  z-index: 1; }

.active {
  width: 350px; }

@media screen and (max-width: 767px) {
  .sidebar {
    width: 50px; }

  .active {
    width: 230px; } }
.sidebar .Links-List {
  width: 200px;
  height: 100%;
  margin-top: 70%; }
  @media screen and (max-width: 767px) {
    .sidebar .Links-List {
      width: 160px;
      margin-top: 55%; } }
  .sidebar .Links-List a {
    width: 100%;
    text-align: center;
    float: left;
    text-decoration: none;
    text-shadow: 0px 0px 5px #0097e6;
    color: #00a8ff;
    margin: 10px;
    font-size: 20px; }
    .sidebar .Links-List a:hover {
      color: #fbc531;
      text-shadow: 0px 0px 5px #fbc531;
      -webkit-transition: 0.6s ease;
      -moz-transition: 0.6s ease;
      -o-transition: 0.6s ease;
      transition: 0.6s ease; }
.sidebar ul {
  float: right;
  height: 100%;
  width: 30%; }
  .sidebar ul li {
    list-style: none;
    height: 80px;
    width: 80px;
    float: right;
    margin-bottom: 5px; }
    .sidebar ul li:nth-child(1) {
      background-color: #353b48;
      cursor: pointer; }
.sidebar .sidebar-btn {
  width: 80px;
  height: 80px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  text-align: -o-center;
  position: absolute;
  cursor: pointer;
  background-color: #353b48; }
.sidebar span {
  width: 30px;
  height: 3px;
  top: 30px;
  position: relative;
  background-color: #00a8ff;
  margin-top: 5px;
  cursor: pointer;
  display: block;
  box-shadow: 0 0 20px #0097e6; }
  .sidebar span:nth-child(2) {
    width: 20px; }
  .sidebar span:nth-child(3) {
    width: 10px; }

@media screen and (max-width: 767px) {
  .sidebar ul li {
    height: 50px;
    width: 50px; } }
.active Span:nth-child(1) {
  transform: rotate(45deg);
  margin-top: 0;
  transition: 0.3s;
  width: 30px;
  top: 39px;
  height: 4px; }
.active Span:nth-child(2) {
  display: none; }
.active Span:nth-child(3) {
  transform: rotate(135deg);
  margin-top: 0;
  transition: 0.3s;
  width: 30px;
  top: 36px;
  height: 4px; }

@media screen and (max-width: 767px) {
  .sidebar .sidebar-btn {
    width: 50px;
    height: 50px; }
  .sidebar span {
    top: 15px;
    height: 2px; }

  .active Span:nth-child(1) {
    top: 23px;
    height: 3px; }
  .active Span:nth-child(3) {
    top: 20px;
    height: 3px; } }
.sidebar .social {
  height: 100%;
  width: 100%;
  margin-top: 25px;
  text-align: center; }
.sidebar ul li a {
  text-decoration: none;
  color: #95a5a6;
  outline: none !important; }
  .sidebar ul li a:hover {
    color: #00a8ff;
    text-shadow: 0px 0px 2px #00a8ff;
    transition: 0.4s; }
  .sidebar ul li a i {
    font-size: 25px; }

.slides {
  position: fixed;
  height: 100%;
  width: 94.2%;
  transition: 0.3s;
  right: 0; }

.activeslides {
  transform: translateX(270px);
  overflow: hidden; }

@keyframes slideup {
  0% {
    transform: translateY(2000px); }
  25% {
    transform: translateY(1000px); }
  50% {
    transform: translateY(500px); }
  75% {
    transform: translateY(250px); }
  100% {
    transform: translateY(0); } }
@keyframes slidedown {
  0% {
    transform: translateY(-2000px); }
  25% {
    transform: translateY(-1000px); }
  50% {
    transform: translateY(-500px); }
  75% {
    transform: translateY(-250px); }
  100% {
    transform: translateY(0); } }
.slides .firstSlide {
  position: relative;
  float: left;
  overflow: hidden;
  height: 100%;
  width: 50%;
  animation: slideup 1.3s 1 linear; }
.slides .secSlide {
  position: relative;
  float: left;
  overflow: hidden;
  height: 100%;
  width: 50%;
  animation: slidedown 1.3s 1 linear; }
.slides .firstSlide ul, .slides .secSlide ul {
  -webkit-transition: 1s ease;
  -moz-transition: 1s ease;
  -o-transition: 1s ease;
  transition: 1s ease; }
.slides .firstSlide ul {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateY(0%); }
  .slides .firstSlide ul li {
    width: 100%;
    height: 100%;
    display: block; }
    .slides .firstSlide ul li h1 {
      color: #00a8ff;
      text-align: center;
      font-size: 45px;
      padding-top: 10%; }
      .slides .firstSlide ul li h1::before {
        content: "";
        height: 80%;
        width: 68%;
        z-index: 0;
        position: absolute;
        left: 16%; }
  .slides .firstSlide ul li:nth-child(1) {
    background-image: url(../img/timothy-barlin-541995-unsplash-min.png); }
  .slides .firstSlide ul li:nth-child(2) {
    background-image: url(../img/Slide2l.png);
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -o-center; }
    .slides .firstSlide ul li:nth-child(2) div {
      width: 80%;
      padding-top: 25%;
      text-align: center; }
      .slides .firstSlide ul li:nth-child(2) div p {
        color: #0097e6;
        font-size: 22px;
        font-weight: bold;
        text-align: justify; }
  .slides .firstSlide ul li:nth-child(3) {
    background-image: url(../img/Slide3L.png);
    position: relative; }
    .slides .firstSlide ul li:nth-child(3) .checkWorks {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 480px;
      text-align: center;
      text-align: -webkit-center;
      text-align: -moz-center;
      text-align: -o-center;
      background: rgba(47, 54, 64, 0.5);
      box-shadow: 0px 0px 3px #0097e6;
      border-radius: 5px; }
      .slides .firstSlide ul li:nth-child(3) .checkWorks h1 {
        color: #0097e6; }
      .slides .firstSlide ul li:nth-child(3) .checkWorks a {
        text-decoration: none;
        color: #00a8ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 23px;
        height: 50px;
        width: 130px;
        padding: 10px;
        margin-top: 5%;
        background: #1d2228;
        border-radius: 5px;
        font-weight: 600; }
.slides .secSlide ul {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateY(-200%); }
  .slides .secSlide ul li {
    width: 100%;
    height: 100%;
    display: block; }
    .slides .secSlide ul li h1 {
      color: #00a8ff;
      text-align: center;
      font-size: 43px;
      padding-top: 10%; }
      .slides .secSlide ul li h1::before {
        content: "";
        height: 80%;
        width: 80%;
        z-index: 0;
        position: absolute;
        left: 10%; }
  .slides .secSlide ul li:nth-child(1) {
    background-image: url(../img/Slide3.png); }
    .slides .secSlide ul li:nth-child(1) .moreAbout {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      height: 480px;
      text-align: center;
      text-align: -webkit-center;
      text-align: -moz-center;
      text-align: -o-center;
      background: rgba(47, 54, 64, 0.5);
      box-shadow: 0px 0px 3px #0097e6;
      border-radius: 5px; }
      .slides .secSlide ul li:nth-child(1) .moreAbout h1 {
        color: #0097e6; }
      .slides .secSlide ul li:nth-child(1) .moreAbout a {
        text-decoration: none;
        color: #00a8ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 23px;
        height: 50px;
        width: 130px;
        padding: 10px;
        margin-top: 5%;
        background: #1d2228;
        border-radius: 5px;
        font-weight: 600; }
  .slides .secSlide ul li:nth-child(2) {
    background-image: url(../img/background2.png);
    position: relative; }
    .slides .secSlide ul li:nth-child(2) .skill-container {
      height: 90%;
      width: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(47, 54, 64, 0.5);
      border-radius: 5px;
      padding: 20px;
      box-shadow: 0px 0px 4px #00a8ff; }
      .slides .secSlide ul li:nth-child(2) .skill-container h1 {
        padding-top: 0%; }
      .slides .secSlide ul li:nth-child(2) .skill-container .skills {
        padding: 15px 20px;
        margin: 15px;
        background: rgba(53, 59, 72, 0.4);
        border-radius: 3px;
        color: #00a8ff;
        box-shadow: inset 0 0 3px #00a8ff; }
        .slides .secSlide ul li:nth-child(2) .skill-container .skills .skills-label h4 {
          margin: 0;
          padding: 0;
          float: left; }
        .slides .secSlide ul li:nth-child(2) .skill-container .skills .skills-label .percent {
          float: right; }
        .slides .secSlide ul li:nth-child(2) .skill-container .skills .bar {
          position: relative;
          width: 100%;
          height: 2px;
          background: #2f3640;
          margin: 0px 0px 0px; }
          .slides .secSlide ul li:nth-child(2) .skill-container .skills .bar .skill-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 87%;
            height: 100%;
            background: linear-gradient(to right, #0984e3, #d63031); }
            .slides .secSlide ul li:nth-child(2) .skill-container .skills .bar .skill-progress::before {
              content: '';
              position: absolute;
              top: -5px;
              right: 0;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #d63031;
              box-shadow: 0px 0px 20px #d63031; }
  .slides .secSlide ul li:nth-child(3) {
    background-image: url(../img/FirstSlide.png); }
.slides ul li img {
  height: auto;
  width: auto; }

@media screen and (max-width: 1200px) {
  .slides .firstSlide ul li h1,
  .slides .secSlide ul li h1 {
    font-size: 28px;
    padding-top: 10%; } }
@media screen and (max-width: 767px) {
  .secSlide ul li:nth-child(2) .skill-container .skills {
    margin: 2px !important; } }
@media screen and (max-width: 767px) {
  .slides {
    position: relative;
    height: 200%;
    margin-right: -60px; }
    .slides .firstSlide,
    .slides .secSlide {
      position: relative;
      overflow: hidden;
      height: 500px;
      width: 100%; }
    .slides .firstSlide ul,
    .slides .secSlide ul {
      height: 500px; }
      .slides .firstSlide ul li h1,
      .slides .secSlide ul li h1 {
        font-size: 30px;
        padding-top: 10%; }
      .slides .firstSlide ul li p,
      .slides .secSlide ul li p {
        font-size: 20px !important; }

  .activeslides {
    transform: translateX(180px); } }
@media screen and (max-width: 500px) {
  .slides .firstSlide ul li h1,
  .slides .secSlide ul li h1 {
    font-size: 22px !important;
    padding-top: 10%; } }
.next,
.prev {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: none;
  outline: none !important;
  color: #95a5a6;
  font-size: 22px;
  cursor: pointer;
  position: fixed;
  background-color: #2f3640;
  border: 1px solid #2f3640;
  border-radius: 5px;
  z-index: 1;
  top: 50%;
  right: 0; }

.next:hover,
.prev:hover {
  color: #00a8ff;
  text-shadow: 0px 0px 5px #00a8ff;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease; }

.prev {
  margin: 0 5px 0 20px;
  animation: slideup 2s 1 linear; }
  .prev::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 20px;
    background-color: #00a8ff;
    top: 88%;
    right: 20%; }

.next {
  margin: 60px 5px 0px 100px;
  animation: slidedown 2s 1 linear; }

@media screen and (max-width: 767px) {
  .prev,
  .next {
    top: 75%; } }

/*# sourceMappingURL=home.css.map */