html, body {
  width: 100%;
  height: 100%;
}

.p10 {
  padding: 10px;
}

.flex-center, .portfolio-div, .loader-in, .loader-bg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-right-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-left-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.clickable {
  cursor: pointer;
}

.full-screen, .loader-in, .loader-bg {
  height: 100%;
  width: 100%;
}

.page-div {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
  color: #f0f0f0;
  background-blend-mode: overlay;
  overflow-x: hidden;
}

@-webkit-keyframes pagein {
  0% {
    transform: translateX(-100%);
    background: #000;
    opacity: 1;
  }
  50% {
    background: #073058;
  }
  100% {
    transform: translateX(100%);
    background: #000;
    opacity: 1;
  }
}

@keyframes pagein {
  0% {
    transform: translateX(-100%);
    background: #000;
    opacity: 1;
  }
  50% {
    background: #073058;
  }
  100% {
    transform: translateX(100%);
    background: #000;
    opacity: 1;
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes transout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes transout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0px 10px 16px #111;
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0px 10px 16px #111;
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes fadeinUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes fadeinUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes fadeinLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeinLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@-webkit-keyframes fadeinRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeinRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@-webkit-keyframes contentIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes contentIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.loader-bg {
  position: fixed;
  top: 0;
  color: #fff;
  background: #000;
  z-index: 300;
  -webkit-animation: pagein 3s forwards;
          animation: pagein 3s forwards;
}

.loader-in {
  background: #369;
  -webkit-animation: pagein 3s forwards;
          animation: pagein 3s forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  position: fixed;
  z-index: 301;
}

.loading-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-top: #fff 4px solid;
  border-left: #fff 4px solid;
  -webkit-animation: rotate 5s infinite;
          animation: rotate 5s infinite;
  position: absolute;
}

@media screen and (min-width: 650px) {
  .menu-container {
    position: absolute;
    top: 30px;
    right: 40px;
  }
  .menu-item {
    opacity: 0;
    padding: 10px;
    margin: 0px 5px;
    cursor: pointer;
    color: #ccc;
  }
  .menu-item:hover {
    border-bottom: #ccc 4px solid;
  }
  .menu-icon {
    display: none;
  }
}
@media screen and (max-width: 649px) {
  .menu-container {
    position: absolute;
    width: 100%;
    top: 60px;
    right: 0px;
    padding: 15px 30px;
    background: #111;
    z-index: 1000;
    display: none;
  }
  .menu-item {
    display: block;
    opacity: 0;
    padding: 10px;
    cursor: pointer;
    background: #111;
    color: #ccc;
    border-bottom: #333 thin solid;
    width: 100%;
  }
  .menu-item::before {
    content: ":: ";
  }
  .menu-item:hover {
    background: #333;
  }
  .menu-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline;
    padding: 5px 15px;
    border: #ccc thin solid;
    color: #ccc;
    border-radius: 5px;
  }

  .pointer-right {
    position: fixed;
    right: 50px;
    top: 90% !important;
  }
  .pointer-left {
    position: fixed;
    left: 50px;
    top: 90% !important;
  }
}
.pointer, .pointer-left, .pointer-right {
  font-size: 16px;
  padding: 10px;
  border: #999 2px solid;
  color: #999;
  -webkit-animation: fadeBlink 2s infinite;
          animation: fadeBlink 2s infinite;
  opacity: 0;
}
.pointer-right {
  position: fixed;
  right: 50px;
  top: 80%;
}
.pointer-left {
  position: fixed;
  left: 50px;
  top: 80%;
}

.im-btn {
  font-size: 16px;
  padding: 10px;
  border: #f0f0f0 1px solid;
  color: #f0f0f0;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, #f0f0f0 50%);
  transition: background-position 1s;
  text-decoration: none;
}
.im-btn:hover {
  font-size: 16px;
  padding: 10px;
  border: #f0f0f0 1px solid;
  color: #000;
  background-position: -100% 0;
  text-decoration: none;
}

.im-input {
  border-radius: 0;
  border: none;
  border-bottom: #ccc thin solid;
  color: #fff;
  background: none;
  width: 100%;
  padding: 10px;
}
.im-input::-moz-placeholder {
  color: #999;
}
.im-input:-ms-input-placeholder {
  color: #999;
}
.im-input::placeholder {
  color: #999;
}
.im-input:focus {
  outline: none;
}

.social-link {
  color: #ccc;
  text-decoration: none;
}
.social-link:hover {
  color: #fff;
  text-decoration: none;
}

.right-align {
  text-align: right;
}

.skill {
  color: #ccc;
}
.skill-box {
  height: 30px;
  border: 1px #999 solid;
  margin-bottom: 10px;
}
.skill-bar {
  height: 28px;
  width: 0%;
  overflow: hidden;
  padding: 5px;
  background: #ccc;
  color: #000;
  font-size: 14px;
}
.skill-title {
  color: #ccc;
  font-size: 24px;
  margin-bottom: 15px;
}

.portfolio-image {
  border-radius: 10px;
  box-shadow: 0px 3px 8px #111;
  width: 100%;
}
.portfolio-image:hover {
  -webkit-animation: bounce 2s infinite;
          animation: bounce 2s infinite;
}
.portfolio-div {
  width: 100%;
  height: 100%;
  border: #999 3px solid;
  border-radius: 10px;
  padding: 15px;
}
.portfolio-div-left {
  color: #f0f0f0;
  opacity: 0;
}
.portfolio-div-right {
  color: #f0f0f0;
  opacity: 0;
}
.portfolio-stack {
  font-weight: 400;
}/*# sourceMappingURL=style.css.map */