@font-face {
  font-family: RetroTitle;
  src: url("/fonts/PressStart2P-Regular.ttf");
}
@font-face {
  font-family: RetroParagraph;
  src: url("/fonts/DotGothic16-Regular.ttf");
}
.font-white {
  color: #fff !important;
}

.font-dark {
  color: #222 !important;
}

.font-gray {
  color: #aaa !important;
}

.font-dark-gray {
  color: #797979 !important;
}

.font-blue {
  color: #2096f3 !important;
}

.icon-focus {
  color: #2096f3 !important;
}

.icon-nofocus {
  color: #f3f8fb !important;
}

.background-primary-blue {
  background: #2096f3;
  color: #ffffff;
}

.fs-7 {
  font-size: 12px;
}

.pt-6 {
  padding-top: 60px !important;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.diamond {
  width: 50px;
  height: 50px;
  background: #2096f3;
  margin-right: -25px;
  transform: rotate(45deg);
  z-index: -1;
}

/*===================*/
/*======Fontend======*/
/*===================*/
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #222222;
  font-family: RetroParagraph;
}

.remove-push-content {
  transform: translateX(0) !important;
}

.slideout-menu,
.side-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 160px;
  height: 100vh;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .slideout-menu,
.side-nav {
    display: none;
  }
}
.slideout-menu .col-nav,
.side-nav .col-nav {
  position: relative;
  float: left;
  background: #222222;
  color: #fff;
  width: 100px;
  height: 100%;
  overflow-y: auto;
}
.slideout-menu .col-nav .navbox,
.side-nav .col-nav .navbox {
  padding-top: 20px;
  border-bottom: 1px solid #444444;
}
.slideout-menu .profile-nav,
.side-nav .profile-nav {
  position: relative;
  float: left;
  background: #444444;
  width: 60px;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.slideout-menu .profile-nav .vertical-text,
.side-nav .profile-nav .vertical-text {
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  transform: rotate(-180deg);
  font-family: RetroTitle;
  width: 60px;
  min-height: 90%;
  white-space: nowrap;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

/*==main content panel==*/
.slideout-panel,
.main-content {
  width: calc(100% - 160px);
  position: relative;
  margin-left: 160px;
  min-height: 100vh;
  will-change: transform;
  z-index: 1;
  overflow: auto;
  background: #222222;
  overflow-x: hidden !important;
}
@media (max-width: 768px) {
  .slideout-panel,
.main-content {
    width: 100%;
    height: auto;
    margin-left: 0;
  }
}
.slideout-panel .menu-icon,
.main-content .menu-icon {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 10px;
  padding-bottom: 5px;
}
.slideout-panel .content-body,
.main-content .content-body {
  width: 100%;
  min-height: 100vh;
}
.slideout-panel .content-body .lb-btn-wrap,
.main-content .content-body .lb-btn-wrap {
  display: flex;
  position: absolute;
  z-index: 100;
  top: 15;
  left: 15;
}
@media (max-width: 991px) {
  .slideout-panel .content-body .lb-btn-wrap,
.main-content .content-body .lb-btn-wrap {
    display: flex;
  }
}
@media (max-width: 768px) {
  .slideout-panel .content-body .lb-btn-wrap,
.main-content .content-body .lb-btn-wrap {
    top: 50;
  }
}
@media (max-width: 576px) {
  .slideout-panel .content-body .lb-btn-wrap,
.main-content .content-body .lb-btn-wrap {
    top: 50;
  }
}
.slideout-panel .content-body .lb-btn-wrap .lb-to-text,
.main-content .content-body .lb-btn-wrap .lb-to-text {
  display: block;
}
@media (max-width: 991px) {
  .slideout-panel .content-body .lb-btn-wrap .lb-to-text,
.main-content .content-body .lb-btn-wrap .lb-to-text {
    display: none;
  }
}
.slideout-panel .content-body .lb-btn-wrap .lb-btn,
.main-content .content-body .lb-btn-wrap .lb-btn {
  background: #444444;
  border-radius: 10px;
  width: 60px;
  height: 35px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.slideout-panel .content-body .lb-btn-wrap .lb-btn .lb-text,
.main-content .content-body .lb-btn-wrap .lb-btn .lb-text {
  font-family: RetroTitle;
}
.slideout-panel .content-body .rb-btn-wrap,
.main-content .content-body .rb-btn-wrap {
  display: flex;
  position: absolute;
  z-index: 100;
  top: 15;
  right: 15;
}
@media (max-width: 991px) {
  .slideout-panel .content-body .rb-btn-wrap,
.main-content .content-body .rb-btn-wrap {
    display: flex;
  }
}
@media (max-width: 768px) {
  .slideout-panel .content-body .rb-btn-wrap,
.main-content .content-body .rb-btn-wrap {
    top: 50;
  }
}
@media (max-width: 576px) {
  .slideout-panel .content-body .rb-btn-wrap,
.main-content .content-body .rb-btn-wrap {
    top: 50;
  }
}
.slideout-panel .content-body .rb-btn-wrap .rb-to-text,
.main-content .content-body .rb-btn-wrap .rb-to-text {
  display: block;
}
@media (max-width: 991px) {
  .slideout-panel .content-body .rb-btn-wrap .rb-to-text,
.main-content .content-body .rb-btn-wrap .rb-to-text {
    display: none;
  }
}
.slideout-panel .content-body .rb-btn-wrap .rb-btn,
.main-content .content-body .rb-btn-wrap .rb-btn {
  background: #444444;
  border-radius: 10px;
  width: 60px;
  height: 35px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.slideout-panel .content-body .rb-btn-wrap .rb-btn .rb-text,
.main-content .content-body .rb-btn-wrap .rb-btn .rb-text {
  font-family: RetroTitle;
}
.slideout-panel .content-body .left-home-content .profile-img,
.main-content .content-body .left-home-content .profile-img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 991px) {
  .slideout-panel .content-body .left-home-content .profile-img,
.main-content .content-body .left-home-content .profile-img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 1200px) {
  .slideout-panel .content-body .left-home-content .profile-img,
.main-content .content-body .left-home-content .profile-img {
    -o-object-position: 35% 50%;
       object-position: 35% 50%;
  }
}
@media (max-width: 1400px) {
  .slideout-panel .content-body .left-home-content .profile-img,
.main-content .content-body .left-home-content .profile-img {
    -o-object-position: 35% 50%;
       object-position: 35% 50%;
  }
}
.slideout-panel .content-body .right-home-content .eq-icons,
.main-content .content-body .right-home-content .eq-icons {
  width: 35px;
  height: 35px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 576px) {
  .slideout-panel .content-body .right-home-content .eq-text,
.main-content .content-body .right-home-content .eq-text {
    width: 50%;
  }
}
.slideout-panel .content-body .right-home-content .status-box,
.main-content .content-body .right-home-content .status-box {
  height: 30px;
}
.slideout-panel .resume-icons,
.main-content .resume-icons {
  width: 35px;
  height: 35px;
  -o-object-fit: contain;
     object-fit: contain;
}
.slideout-panel .resume-icons,
.main-content .resume-icons {
  width: 37px;
  height: 37px;
  -o-object-fit: contain;
     object-fit: contain;
}
.slideout-panel .contactBox,
.main-content .contactBox {
  background: #333;
  padding: 10px;
  border: 1px solid #444;
  width: 250px;
}
.slideout-panel .progress-bar-outside,
.main-content .progress-bar-outside {
  background: #222222;
  border: 1px solid #2096f3;
  border-radius: 10px;
  height: 12px !important;
  padding: 2px !important;
}
.slideout-panel .progress-bar-inside,
.main-content .progress-bar-inside {
  background: #2096f3;
  border-radius: 10px;
}
.slideout-panel .certificate-box,
.main-content .certificate-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.slideout-panel .certificate-box .certificate-link-icon,
.main-content .certificate-box .certificate-link-icon {
  color: #f3f8fb;
  margin-left: 5;
  margin-top: -10;
  font-size: 14;
  border: 1px solid #f3f8fb;
  border-radius: 50%;
  padding: 5;
}
.slideout-panel .certificate-box .certificate-link-icon:hover,
.main-content .certificate-box .certificate-link-icon:hover {
  border: 1px solid #aaaaaa;
  color: #aaaaaa;
  cursor: pointer;
}
.slideout-panel .icon-legend,
.main-content .icon-legend {
  color: #aaaaaa;
  font-size: 17px;
}
.slideout-panel .legend-text,
.main-content .legend-text {
  color: #aaaaaa;
  font-size: 15px;
}
.slideout-panel .portfolio-card,
.main-content .portfolio-card {
  width: 33%;
  padding: 0.33%;
}
@media (max-width: 991px) {
  .slideout-panel .portfolio-card,
.main-content .portfolio-card {
    width: 49%;
  }
}
@media (max-width: 768px) {
  .slideout-panel .portfolio-card,
.main-content .portfolio-card {
    width: 100%;
  }
}
.slideout-panel .portfolio-card .portfolio-img-box,
.main-content .portfolio-card .portfolio-img-box {
  position: relative;
}
.slideout-panel .portfolio-card .portfolio-img-box .protfolio-link-box,
.main-content .portfolio-card .portfolio-img-box .protfolio-link-box {
  background: #444444;
  z-index: 100;
  border-radius: 50%;
  width: 40;
  height: 40;
  position: absolute;
  top: 5;
  right: 5;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.slideout-panel .portfolio-card .portfolio-img-box .protfolio-link-box:hover,
.main-content .portfolio-card .portfolio-img-box .protfolio-link-box:hover {
  background: #aaaaaa;
}
.slideout-panel .portfolio-card .portfolio-img-box .protfolio-link-box .portfolio-link-icon,
.main-content .portfolio-card .portfolio-img-box .protfolio-link-box .portfolio-link-icon {
  font-size: 20;
  color: #f3f8fb;
  cursor: pointer;
}
.slideout-panel .portfolio-card .portfolio-img,
.main-content .portfolio-card .portfolio-img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}
.slideout-panel .portfolio-card .label-tags,
.main-content .portfolio-card .label-tags {
  background: #2096f3;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  padding: 5px;
  margin-right: 5px;
}