/**** SVG paths ****/
:root {
  --btnH: 1.125rem;
  --spnBtnH: 1.375rem;
  --iconBtnS: 2.5rem;
  --lboxW: 280px;
  --lboxH: 390px;
  --lboxRevW: 100%;
  --lboxHeadH: 70px;
  --lboxRevBodyMaxH: 890px;
  --confLboxW: 250px;
  --confLboxH: 250px;
  --lboxBodPad: 0.75rem;
  /*--spnStartDash: calc(1.5 * 1.375rem);
  --spnMidDash: calc(3.14 * 1.375rem);
  --spnEndDash: calc(1.5328 * 1.375rem);*/
  /*--spnStartDash: (1.5 * 22);
  --spnMidDash: (3.14 * 22);
  --spnEndDash: (1.5328 * 22);*/
  --spnStartDash: 33px;
  --spnMidDash: 69.08px;
  --spnEndDash: 33.7216px;
}

@-webkit-keyframes circStrokeSpn {
  0% {
    -webkit-transform: rotate(0deg);
    stroke-dashoffset: var(--spnStartDash);
  }
  60% {
    -webkit-transform: rotate(1000deg);
    stroke-dashoffset: var(--spnMidDash);
  }
  100% {
    -webkit-transform: rotate(1440deg);
    stroke-dashoffset: var(--spnEndDash);
  }
}
@keyframes circStrokeSpn {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    stroke-dashoffset: var(--spnStartDash);
  }
  60% {
    -ms-transform: rotate(1000deg);
    transform: rotate(1000deg);
    stroke-dashoffset: var(--spnMidDash);
  }
  100% {
    -ms-transform: rotate(1440deg);
    transform: rotate(1440deg);
    stroke-dashoffset: var(--spnEndDash);
  }
}
/*************/
@-webkit-keyframes boxShadReveal {
  0% {
    box-shadow: -1px -1px 2px 1px #f2f2f2, 3px 3px 3px 0px #d0d0d0;
  }
  100% {
    box-shadow: -1px -1px 2px 1px #f2f2f2, 3px 3px 3px 0px #d0d0d0;
  }
}
@keyframes boxShadReveal {
  0% {
    box-shadow: -1px -1px 2px 1px #f2f2f2, 3px 3px 3px 0px #d0d0d0;
  }
  100% {
    box-shadow: -1px -1px 2px 1px #f2f2f2, 3px 3px 3px 0px #d0d0d0;
  }
}
/*************/
@-webkit-keyframes boxShadHide {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes boxShadHide {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: none;
  }
}
/*************/
@-webkit-keyframes overflowDelay {
  0% {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  100% {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@keyframes overflowDelay {
  0% {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  100% {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
/*************/
@-webkit-keyframes techCardAnim {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  75% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes techCardAnim {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  75% {
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/*************/
@-webkit-keyframes techPathHide {
  0% {
    stroke-dashoffset: var(--l);
  }
  100% {
    stroke-dashoffset: var(--l);
  }
}
@keyframes techPathHide {
  0% {
    stroke-dashoffset: var(--l);
  }
  100% {
    stroke-dashoffset: var(--l);
  }
}
/*************/
@-webkit-keyframes techPathAnim {
  0% {
    stroke-dashoffset: var(--l);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes techPathAnim {
  0% {
    stroke-dashoffset: var(--l);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/*************/
@-webkit-keyframes techBodyOpac {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes techBodyOpac {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
}
@-webkit-keyframes pOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
}
/*************/
/*************/
/*************/
html {
  /*height: 100%;*/
  /*overflow: auto;*/
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  /*height: 100%;*/
  /*overflow: auto;*/
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.925rem;
  color: #312829;
}
body > * {
  padding: 0 1rem;
}

body.preload * {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: "Nunito Sans", sans-serif;
}

p, label, input {
  line-height: 1.5;
}

.separator {
  width: 0.25rem;
  height: 0.25rem;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.5rem;
}

em {
  font-style: normal;
}

.btn {
  -webkit-appearance: unset;
  display: inline-block;
  font-size: inherit;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  padding: 0.625rem 0.75rem;
  background-color: #ff3a4b;
  cursor: pointer;
  transition: background-color 750ms ease, color 750ms ease;
}
.btn .btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  min-height: var(--btnH);
}

.btn:hover, .btn:focus {
  color: #fff;
  background-color: #ff3a4b;
}

.btn.spn-btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.btn.spn-btn .btn-content {
  min-height: 0;
  height: 1.625rem;
  height: var(--spnBtnH);
}
.btn.spn-btn .btn-content .spnr {
  display: none;
  width: 100%;
  height: auto;
}
.btn.spn-btn .btn-content .spnr circle {
  stroke-dasharray: var(--spnMidDash);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.spn-btn.active .btn-content {
  width: 1.625rem;
  width: var(--spnBtnH);
  margin: 0 auto;
}
.spn-btn.active .btn-content .action-txt {
  display: none;
}
.spn-btn.active .btn-content .spnr {
  display: initial;
}
.spn-btn.active .btn-content .spnr > circle {
  -webkit-animation: circStrokeSpn 2000ms infinite linear;
  animation: circStrokeSpn 2000ms infinite linear;
}

.icon-btn, #home .wp-ui a {
  width: 2.5rem;
  height: 2.5rem;
  width: var(--iconBtnS);
  height: var(--iconBtnS);
  border-radius: 50%;
  padding: 0;
}

.icon-btn .btn-content {
  width: 100%;
  height: 100%;
  background-size: 16px 16px;
}

#nav-cont {
  position: relative;
  width: 100%;
  height: 3rem;
  padding: 0;
}

/*$jgIFrom: #301c1c;
$jgITo: #ff808b;*/
.jg-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  color: #fff;
  font-weight: bold;
  border-radius: 10%;
  background: -webkit-linear-gradient(top, #a09e9e, #dea8b0);
  background: -o-linear-gradient(bottom, #a09e9e, #dea8b0);
  background: -moz-linear-gradient(bottom, #a09e9e, #dea8b0);
  background: linear-gradient(to bottom, #a09e9e, #dea8b0);
}
.jg-icon:after {
  content: "JG";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("../img/jgIconPattRect@hr.svg");
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
  top: -3rem;
  width: 100%;
  max-width: 100%;
  height: inherit;
  padding: 0 0.5rem;
  background: #fff;
  /*font-size: 0.825rem;*/
  z-index: 1;
  box-shadow: inset 0px -1px 0px 0px #e0e0e0;
  box-sizing: border-box;
}
nav .sect-link[data-sect-id=home] {
  width: 2rem;
  height: 2rem;
}
nav .sect-link[data-sect-id=home] .jg-icon {
  font-size: 1rem;
  border-radius: 4px;
  background: -webkit-linear-gradient(top, #cec4c7, #ddc3c7);
  background: -o-linear-gradient(bottom, #cec4c7, #ddc3c7);
  background: -moz-linear-gradient(bottom, #cec4c7, #ddc3c7);
  background: linear-gradient(to bottom, #cec4c7, #ddc3c7);
}
nav .sect-link[data-sect-id=home] .jg-icon:after {
  background-image: none;
}
nav .nav-ul {
  display: flex;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}
nav .nav-ul .nav-li {
  display: flex;
  margin: 0 1rem;
}
nav .nav-ul .nav-li .nav-txt-lnk {
  padding: 0.5rem 0;
}
nav .nav-ul .nav-li:first-of-type {
  margin-left: 0;
}
nav .nav-ul .nav-li:last-of-type {
  margin-right: 0;
}
nav .nav-underline {
  position: absolute;
  top: 46px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #ff3a4b;
  transition: width 750ms ease, left 750ms ease;
}

.sticky-nav {
  position: fixed;
  top: 0;
  transition: top 250ms linear;
  box-shadow: 0 1px 6px 1px #e0e0e0;
}

section {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
  /*height: 1500px;*/
}
section > .title {
  font-size: 1.5rem;
  color: #312829;
  font-weight: bold;
  margin: 0 auto 4rem;
}
section > .title:after {
  content: "";
  display: block;
  background: #ff3a4b;
  border-radius: 0.5rem;
  width: 2rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
}
section > .content {
  max-width: 400px;
  margin: 0 auto;
  /*font-size: 0.825rem;*/
}

section:last-of-type {
  padding-bottom: 20rem;
}

#home {
  padding: 0;
  /*@for $i from 1 through 4 {*/
  /*}*/
}
#home .title {
  position: absolute;
  width: 80%;
  max-width: 80%;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#home .title p {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  line-height: normal;
}
#home .title p em {
  transition: color 750ms ease;
}
#home .title:before, #home .title:after {
  content: none;
}
#home .title .btn {
  font-size: 1rem;
  transition: background-color 750ms ease;
}
#home .wp-splash {
  background: -webkit-linear-gradient(top, #1b1b1b, #1b1b1b 50%, #311d1d);
  background: -o-linear-gradient(bottom, #1b1b1b, #1b1b1b 50%, #311d1d);
  background: -moz-linear-gradient(bottom, #1b1b1b, #1b1b1b 50%, #311d1d);
  background: linear-gradient(to bottom, #1b1b1b, #1b1b1b 50%, #311d1d);
  width: 100%;
  height: 100vh;
}
#home .wp-splash + .title p em {
  color: #ff3a4b;
}
#home .wp-splash + .title .btn {
  background-color: #ff3a4b;
}
#home .wp-splash .wp-ui {
  padding: 0.5rem;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
  background-color: #1b1b1b;
}
#home .wp-splash .wp-ui a {
  box-shadow: -2px -2px 8px -2px #7b7777, 2px 2px 8px 3px #000000;
  /*box-shadow: -2px -2px 5px 0px #483c3c, 2px 2px 8px 2px #000000;*/
  /*box-shadow: -2px -2px 5px 0px #483c3c, 2px 2px 8px 0px #000000;*/
  border: none;
}
#home .wp-splash .wp-ui a:first-child {
  margin-bottom: 0.75rem;
}
#home .wp-splash .wp-ui .pause div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2096%2096%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Cg%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3Cpath%20d%3D%22m60%2024v48%2012c0%202.208%201.792%204%204%204h12%207.953c2.234%200%204.047-1.813%204.047-4.047v-11.953-48-11.953c0-2.234-1.813-4.047-4.047-4.047h-7.953-12c-2.208%200-4%201.792-4%204v12z%22%2F%3E%3Cpath%20d%3D%22m8%2024v48%2012c0%202.208%201.792%204%204%204h12%207.953c2.234%200%204.047-1.813%204.047-4.047v-11.953-48-11.953c0-2.234-1.813-4.047-4.047-4.047h-7.953-12c-2.208%200-4%201.792-4%204v12z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#home .wp-splash .wp-ui .pause.active div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2096%2096%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Cg%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3Cpath%20d%3D%22m94.134%2044.871c1.153%200.641%201.866%201.837%201.866%203.133%200%201.293-0.713%202.491-1.866%203.132-15.292%208.505-57.452%2031.959-72.613%2040.392-1.144%200.636-2.546%200.628-3.684-0.015-1.138-0.647-1.837-1.833-1.837-3.119v-80.787c0-1.283%200.701-2.472%201.837-3.119%201.138-0.646%202.54-0.65%203.684-0.015%2015.161%208.435%2057.323%2031.887%2072.613%2040.396v2e-3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#home .wp-splash .wp-ui .hide div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2096%2096%22%20width%3D%2220px%22%20height%3D%2220px%22%3E%3Cg%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3Cpath%20d%3D%22m48%2012c-26.092%200-46.152%2031.397-47.022%2032.945-1.304%202.052-1.304%204.063%200%206.11%200.87%201.543%2020.93%2032.945%2047.022%2032.945s46.152-31.397%2047.022-32.945c1.304-2.052%201.304-4.063%200-6.11-0.87-1.543-20.93-32.945-47.022-32.945zm0%2012c13.44%200%2024%2010.56%2024%2024s-10.56%2024-24%2024-24-10.56-24-24%2010.56-24%2024-24zm0%2012c-6.625%205e-3%20-11.995%205.375-12%2012%200%206.619%205.381%2012%2012%2012s12-5.381%2012-12-5.381-12-12-12z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#home .wp-splash .wp-ui .hide.active div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2096%2096%22%20width%3D%2220px%22%20height%3D%2220px%22%3E%3Cg%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3Cpath%20d%3D%22m49.621%2057.678%200.014%200.015%2037.49-37.49c1.163-1.163%201.167-3.049%208e-3%20-4.208l-0.91-0.91-5.293-5.294-0.935-0.934c-1.145-1.146-3.009-1.142-4.16%208e-3l-6.252%206.253-23.204%2023.204-0.014-0.015-37.49%2037.49c-1.163%201.163-1.167%203.049-8e-3%204.208l0.91%200.91%205.293%205.294%200.935%200.934c1.145%201.146%203.009%201.142%204.16-8e-3l6.252-6.253%2023.204-23.204zm-40.729%203.942c-4.75-5.504-7.598-10.005-7.914-10.565-1.304-2.047-1.304-4.058%200-6.11%200.87-1.548%2020.93-32.945%2047.022-32.945%203.191%200%206.292%200.47%209.279%201.297l-10.745%2010.745c-12.226%200.707-21.748%2010.207-22.488%2022.424l-15.154%2015.154zm29.829%2021.083c2.987%200.827%206.088%201.297%209.279%201.297%2026.092%200%2046.152-31.397%2047.022-32.945%201.304-2.052%201.304-4.063%200-6.11-0.316-0.56-3.164-5.061-7.914-10.565l-15.154%2015.154c-0.74%2012.217-10.262%2021.717-22.488%2022.424l-10.745%2010.745z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#home .swtch3 {
  background: -webkit-linear-gradient(top, #1b1b1b, #1b1b1b 50%, #1d3131);
  background: -o-linear-gradient(bottom, #1b1b1b, #1b1b1b 50%, #1d3131);
  background: -moz-linear-gradient(bottom, #1b1b1b, #1b1b1b 50%, #1d3131);
  background: linear-gradient(to bottom, #1b1b1b, #1b1b1b 50%, #1d3131);
}
#home .swtch3 + .title p em {
  color: #18d8c7;
}
#home .swtch3 + .title .btn {
  background-color: #18d8c7;
}

#home, nav, .btn, img, .tech-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#projects {
  background: #f7f7f7;
}
#projects > .title {
  margin-bottom: 1rem;
}
#projects > .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 960px;
}

#about > .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
}
#about > .content > *:not(#tech-cards-cont) {
  max-width: 100%;
}
#about > .content p:last-of-type {
  margin: 2rem 0;
}
#about > .content .btn {
  margin: 0 auto;
}

#tech-cards-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 500px;
  margin: 2rem auto;
}

.tech-card {
  width: 110px;
  height: 115px;
  margin: 1rem;
  font-size: 0.825rem;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 1px 1px 5px -1px #d0d0d0;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
.tech-card > * {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tech-card .card-heading {
  height: 40px;
  font-weight: bold;
  color: #fff;
  background: #ff3a4b;
}
.tech-card .card-body {
  height: 75px;
  opacity: 1;
}
.tech-card .card-body .icon-inln {
  width: 100%;
  height: 100%;
}
.tech-card .card-body .icon-inln svg {
  max-width: 100%;
  max-height: 100%;
  opacity: 0.75;
  -webkit-transform: scale(1.4, 1.4);
  -ms-transform: scale(1.4, 1.4);
  transform: scale(1.4, 1.4);
}

#cntct-conf-box {
  --lboxW: var(--confLboxW);
  --lboxH: var(--confLboxH);
  --lboxRevW: var(--confLboxW);
  --lboxHeadH: 50px;
  --iconSize: 100px;
  position: fixed;
  top: -200px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*transition: top $confBoxTopSpd linear, z-index 0ms linear;*/
}
#cntct-conf-box .box-heading {
  font-size: 1rem;
}
#cntct-conf-box .box-body .content {
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}
#cntct-conf-box .box-body .content .icon-inln {
  display: none;
  width: 150px;
  height: 150px;
  width: var(--iconSize);
  height: var(--iconSize);
}

#cntct-conf-box.reveal {
  top: 50%;
  transition: top 250ms linear, z-index 0ms linear;
}
#cntct-conf-box.reveal .lbox-show {
  overflow: hidden;
}

#cntct-conf-box[data-status=success] .box-heading > .content > .title:after {
  content: "Message Sent";
}
#cntct-conf-box[data-status=success] .box-body > .content > .icon-inln {
  display: initial;
}
#cntct-conf-box[data-status=success] .box-body > .content > .details:after {
  content: "Thank you for your enquiry. I'll get back to you at the email address provided.";
}

#cntct-conf-box[data-status=error] .box-heading > .content > .title:after {
  content: "Message Not Sent";
}
#cntct-conf-box[data-status=error] .box-body > .content > .details:after {
  content: "Something went wrong. Please try again.";
}

#email-copy-conf {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: #312829;
  color: #fff;
  font-size: 0.825rem;
  font-weight: bold;
  position: fixed;
  right: 1rem;
  top: -4.25rem;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
  transition: top 250ms;
}
#email-copy-conf .conf-chk {
  width: 30px;
  height: 30px;
  margin-right: 0.5rem;
}
#email-copy-conf .conf-chk .path {
  fill: #fff;
}
#email-copy-conf:after {
  content: "Email address copied";
}
#email-copy-conf.active {
  top: 4.25rem;
}

.anim-paths.anim-start .anim-path {
  stroke-dasharray: var(--l);
  -webkit-animation-name: techPathHide, techPathAnim;
  animation-name: techPathHide, techPathAnim;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.tech-card.anim-start {
  -webkit-animation-name: techCardAnim;
  animation-name: techCardAnim;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.tech-card.anim-start.anim-paths .card-body {
  -webkit-animation-name: techBodyOpac;
  animation-name: techBodyOpac;
  -webkit-animation-duration: 400ms;
  animation-duration: 400ms;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  /*-webkit-animation: techBodyOpac $bodyDur linear;*/
  /*animation: techBodyOpac $bodyDur linear;*/
}
.tech-card.anim-start.anim-paths .anim-path {
  -webkit-animation-duration: 0ms, 300ms;
  animation-duration: 0ms, 300ms;
}
.tech-card.anim-start.anim-paths .order-0 {
  -webkit-animation-delay: 250ms, calc((0 * 300ms) + 250ms);
  animation-delay: 250ms, calc((0 * 300ms) + 250ms);
}
.tech-card.anim-start.anim-paths .order-1 {
  -webkit-animation-delay: 250ms, calc((1 * 300ms) + 250ms);
  animation-delay: 250ms, calc((1 * 300ms) + 250ms);
}
.tech-card.anim-start.anim-paths .order-2 {
  -webkit-animation-delay: 250ms, calc((2 * 300ms) + 250ms);
  animation-delay: 250ms, calc((2 * 300ms) + 250ms);
}
.tech-card.anim-start.anim-paths .order-3 {
  -webkit-animation-delay: 250ms, calc((3 * 300ms) + 250ms);
  animation-delay: 250ms, calc((3 * 300ms) + 250ms);
}
.tech-card.anim-start.anim-paths .order-4 {
  -webkit-animation-delay: 250ms, calc((4 * 300ms) + 250ms);
  animation-delay: 250ms, calc((4 * 300ms) + 250ms);
}
.tech-card.anim-start.anim-paths .order-5 {
  -webkit-animation-delay: 250ms, calc((5 * 300ms) + 250ms);
  animation-delay: 250ms, calc((5 * 300ms) + 250ms);
}

#cntct-conf-box.anim-paths.anim-start .anim-path {
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}
#cntct-conf-box.anim-paths.anim-start .order-0 {
  -webkit-animation-delay: 0ms, calc((0 * 250ms) + 250ms);
  animation-delay: 0ms, calc((0 * 250ms) + 250ms);
}
#cntct-conf-box.anim-paths.anim-start .order-1 {
  -webkit-animation-delay: 0ms, calc((1 * 250ms) + 250ms);
  animation-delay: 0ms, calc((1 * 250ms) + 250ms);
}
#cntct-conf-box.anim-paths.anim-start .order-2 {
  -webkit-animation-delay: 0ms, calc((2 * 250ms) + 250ms);
  animation-delay: 0ms, calc((2 * 250ms) + 250ms);
}
#cntct-conf-box.anim-paths.anim-start .order-3 {
  -webkit-animation-delay: 0ms, calc((3 * 250ms) + 250ms);
  animation-delay: 0ms, calc((3 * 250ms) + 250ms);
}
#cntct-conf-box.anim-paths.anim-start .order-4 {
  -webkit-animation-delay: 0ms, calc((4 * 250ms) + 250ms);
  animation-delay: 0ms, calc((4 * 250ms) + 250ms);
}
#cntct-conf-box.anim-paths.anim-start .order-5 {
  -webkit-animation-delay: 0ms, calc((5 * 250ms) + 250ms);
  animation-delay: 0ms, calc((5 * 250ms) + 250ms);
}

#me-cont {
  width: 120px;
  height: 120px;
  margin: 0 auto 3.075rem;
  border-radius: 50%;
  overflow: hidden;
}
#me-cont img {
  width: 100%;
  height: 100%;
}

#contact {
  /*  font-size: 0.8rem;
  */
}
#contact p {
  margin-bottom: 2rem;
  text-align: left;
}

#cntct-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}
#cntct-form label {
  text-align: left;
  margin-bottom: 0.25rem;
}
#cntct-form .rqrd:after {
  content: "*";
  color: #ff3a4b;
  margin-left: 0.1rem;
}
#cntct-form .inpt {
  border: 1px solid #e0e0e0;
  /*border: none;*/
  border-radius: 0.5rem;
  font-family: "Nunito Sans", sans-serif;
  color: #312829;
  /*height: 2rem;*/
  margin-bottom: 1rem;
  padding: 0.75rem 0.5rem;
  /*box-shadow: inset -1px -1px 2px -1px #c3aaaa, inset 2px 2px 5px -2px #8e4343;*/
}
#cntct-form .inpt::placeholder {
  opacity: 0.25rem;
  font-style: italic;
}
#cntct-form #form-msg {
  resize: none;
  height: initial;
}
#cntct-form em {
  color: #ff3a4b;
}
#cntct-form .spn-btn .btn-content > .action-txt:after {
  content: "Send";
}

#cntct-email {
  text-align: left;
}
#cntct-email .email-add {
  display: flex;
  align-items: center;
}
#cntct-email .email-add .icon-inln {
  line-height: 0;
  margin-right: 0.25rem;
}
#cntct-email .email-add .icon-inln svg {
  width: 31px;
  height: 18px;
}
#cntct-email .email-add .icon-inln svg path {
  stroke-width: 1px;
  stroke: #4a4a4a;
}
#cntct-email .email-add .btn {
  width: 25px;
  height: 31px;
  background-size: 25px 31px;
  background-image: url("../img/copyLink.svg");
  background-color: #fff;
  margin-left: 1rem;
  padding: 0;
}

.icon-bg, .icon-btn > .btn-content {
  background-repeat: no-repeat;
  background-position: center;
}

.icon-inln {
  display: inline-block;
}

.ext-link {
  display: inline-block;
  min-width: 0;
  min-height: 0;
  background-image: url("../img/extLink.svg");
}

.lbox {
  width: 340px;
  width: var(--lboxW);
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  z-index: 0;
}
.lbox .flex {
  display: flex;
}
.lbox .box-heading {
  position: relative;
  align-items: center;
  justify-content: center;
  height: 90px;
  height: var(--lboxHeadH);
  background: #ff3a4b;
  font-size: 1.25rem;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
  box-sizing: border-box;
}
.lbox .box-heading .content {
  display: inherit;
  flex-direction: column;
  top: 0;
  left: 0;
}
.lbox .box-body {
  position: relative;
  background: #fff;
  height: calc(450px - 90px);
  height: calc(var(--lboxH) - var(--lboxHeadH));
  color: #312829;
  box-sizing: border-box;
}
.lbox .box-body > [class*=content] {
  top: 0;
  width: 100%;
  min-height: 100%;
  padding: 1rem;
  padding: var(--lboxBodPad);
  box-sizing: border-box;
}
.lbox .box-body .lbox-show {
  -webkit-animation: opacOut-100 250ms;
  animation: opacOut-100 250ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
  flex-direction: column;
}
@-webkit-keyframes opacOut-100 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}
@keyframes opacOut-100 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}
.lbox .box-body .lbox-hide {
  visibility: visible;
  -webkit-animation: opacIn-100 500ms;
  animation: opacIn-100 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  flex-direction: column-reverse;
  padding: 1rem;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.lbox.reveal {
  position: fixed;
  width: 640px;
  width: var(--lboxRevW);
  top: 0;
  z-index: 3;
}
.lbox.reveal .lbox-show {
  visibility: visible;
  -webkit-animation: opacIn-100 500ms;
  animation: opacIn-100 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: relative;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  /*overflow-x: hidden;
  overflow-y: scroll;*/
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.lbox.reveal .lbox-hide {
  -webkit-animation: opacOut-100 250ms;
  animation: opacOut-100 250ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
}
@-webkit-keyframes opacOut-100 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}
@keyframes opacOut-100 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
  }
}

html.no-touchevents .lbox.reveal .box-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.no-touchevents .lbox.reveal .box-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
html.no-touchevents .lbox.reveal .box-body::-webkit-scrollbar-thumb {
  background: #d2d2d2;
}
html.no-touchevents .lbox.reveal .box-body::-webkit-scrollbar-thumb:hover {
  background: #b2b2b2;
}

.prjct-box-cont {
  position: relative;
  min-width: 340px;
  min-height: 450px;
  min-width: var(--lboxW);
  min-height: var(--lboxH);
  margin: 3rem 1rem 0;
  box-sizing: border-box;
}

.prjct-box {
  /*$zIdxDur: calc(150ms * 0.6);*/
  /*$zIdxDel: calc(150ms - 90ms);*/
  transition-property: width, top, left, z-index;
  transition-duration: 150ms, 150ms, 150ms, 90ms;
  transition-timing-function: linear;
  transition-delay: 0ms, 0ms, 0ms, 60ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-name: boxShadReveal;
  animation-name: boxShadReveal;
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  cursor: pointer;
}
.prjct-box .box-heading .content .title {
  margin-bottom: 0.5rem;
}
.prjct-box .box-heading .content .details {
  display: inherit;
  align-self: center;
}
.prjct-box .box-heading .content .details .tech-lbls {
  display: inherit;
}
.prjct-box .box-heading .content .details .tech-lbls .tech-lbl {
  text-transform: uppercase;
  border: 1px solid #fff;
  font-size: 0.5rem;
  padding: 0 0.25rem;
  margin-right: 0.25rem;
  height: 14px;
  line-height: 1.9;
}
.prjct-box .box-heading .content .details .tech-lbls .tech-lbl:last-child {
  margin-right: 0;
}
.prjct-box .box-heading .content .details .separator {
  align-self: center;
}
.prjct-box .box-heading .content .details .ext-link {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}
.prjct-box .box-body {
  height: var(--prjBxH, calc(var(--lboxH) - var(--lboxHeadH)));
  transition-property: height;
  transition-duration: 150ms;
  transition-timing-function: linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  /** Default content **/
  /* Numbered content */
  /* Numbered content */
  /* Numbered content */
  /* Numbered content */
  /* Numbered content */
  /* Numbered content */
}
.prjct-box .box-body .pbox-trig-cont {
  width: 100%;
  flex-direction: row-reverse;
}
.prjct-box .box-body [class*=slide-cont] {
  position: relative;
  left: 0;
  top: 0;
  margin: calc(1rem * -1) calc(1rem * -1) 1rem;
  margin: calc(var(--lboxBodPad) * -1) calc(var(--lboxBodPad) * -1) var(--lboxBodPad);
  padding: 0;
  transition: left 250ms;
  touch-action: auto;
  touch-action: pan-y;
}
.prjct-box .box-body [class*=slide-cont] .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: #fff;
  font-weight: bold;
  transition: opacity 250ms;
}
.prjct-box .box-body [class*=slide-cont] .slide svg {
  max-width: 100%;
  height: auto;
}
.prjct-box .box-body [class*=slide-cont].no-trans {
  transition: none;
}
.prjct-box .box-body [class*=slide-cont].no-trans .slide {
  transition: none;
}
.prjct-box .box-body .slide-cont-1 {
  width: calc((1 * 100%) + (1rem * (1 * 2)));
  width: calc((1 * 100%) + (var(--lboxBodPad) * (1 * 2)));
}
.prjct-box .box-body .slide-cont-1 .slide {
  width: calc(calc((1 * 100%) + (1rem * (1 * 2))) / 1);
  width: calc(calc((1 * 100%) + (var(--lboxBodPad) * (1 * 2))) / 1);
  height: auto;
}
.prjct-box .box-body .slide-cont-2 {
  width: calc((2 * 100%) + (1rem * (2 * 2)));
  width: calc((2 * 100%) + (var(--lboxBodPad) * (2 * 2)));
}
.prjct-box .box-body .slide-cont-2 .slide {
  width: calc(calc((2 * 100%) + (1rem * (2 * 2))) / 2);
  width: calc(calc((2 * 100%) + (var(--lboxBodPad) * (2 * 2))) / 2);
  height: auto;
}
.prjct-box .box-body .slide-cont-3 {
  width: calc((3 * 100%) + (1rem * (3 * 2)));
  width: calc((3 * 100%) + (var(--lboxBodPad) * (3 * 2)));
}
.prjct-box .box-body .slide-cont-3 .slide {
  width: calc(calc((3 * 100%) + (1rem * (3 * 2))) / 3);
  width: calc(calc((3 * 100%) + (var(--lboxBodPad) * (3 * 2))) / 3);
  height: auto;
}
.prjct-box .box-body .slide-cont-4 {
  width: calc((4 * 100%) + (1rem * (4 * 2)));
  width: calc((4 * 100%) + (var(--lboxBodPad) * (4 * 2)));
}
.prjct-box .box-body .slide-cont-4 .slide {
  width: calc(calc((4 * 100%) + (1rem * (4 * 2))) / 4);
  width: calc(calc((4 * 100%) + (var(--lboxBodPad) * (4 * 2))) / 4);
  height: auto;
}
.prjct-box .box-body .slide-cont-5 {
  width: calc((5 * 100%) + (1rem * (5 * 2)));
  width: calc((5 * 100%) + (var(--lboxBodPad) * (5 * 2)));
}
.prjct-box .box-body .slide-cont-5 .slide {
  width: calc(calc((5 * 100%) + (1rem * (5 * 2))) / 5);
  width: calc(calc((5 * 100%) + (var(--lboxBodPad) * (5 * 2))) / 5);
  height: auto;
}
.prjct-box .box-body .slide-cont-6 {
  width: calc((6 * 100%) + (1rem * (6 * 2)));
  width: calc((6 * 100%) + (var(--lboxBodPad) * (6 * 2)));
}
.prjct-box .box-body .slide-cont-6 .slide {
  width: calc(calc((6 * 100%) + (1rem * (6 * 2))) / 6);
  width: calc(calc((6 * 100%) + (var(--lboxBodPad) * (6 * 2))) / 6);
  height: auto;
}
.prjct-box .box-body .contnt-ctrls {
  position: relative;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  margin-bottom: var(--lboxBodPad);
}
.prjct-box .box-body .contnt-ctrls .contnt-lnk {
  width: 3rem;
  height: 3rem;
  background: #fff;
}
.prjct-box .box-body .contnt-ctrls .contnt-lnk .btn-content {
  background-image: url("../img/chevron.svg");
  background-size: 25px 25px;
}
.prjct-box .box-body .contnt-ctrls .contnt-dcr-lnk .btn-content {
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  -ms-transform: matrix(-1, 0, 0, 1, 0, 0);
  transform: matrix(-1, 0, 0, 1, 0, 0);
}
.prjct-box .box-body .contnt-ctrls .contnt-dots {
  flex: 2;
  justify-content: center;
}
.prjct-box .box-body .contnt-ctrls .contnt-dots .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 25%;
  margin: 0 0.25rem;
  background-color: #ffc6cb;
  transition: background-color 250ms;
}
.prjct-box .box-body .proj-info {
  position: relative;
  flex-direction: column;
}
.prjct-box .box-body .proj-info .title {
  align-items: center;
}
.prjct-box .box-body .proj-info .label {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  margin: 0 0 0 0.5rem;
  padding: 0 0.3rem;
  font-size: 0.61rem;
  height: 16px;
  border: 1px solid #847a7b;
  box-sizing: border-box;
}
.prjct-box .box-body .proj-info .ext-link {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  filter: brightness(50%);
}
.prjct-box .box-body .proj-info .separator {
  background-color: #847a7b;
}
.prjct-box .box-body .proj-info .descrpt {
  text-align: left;
  margin: 0.25rem 0;
  font-size: 0.75rem;
  color: #949292;
}
.prjct-box .box-body .proj-info .info {
  position: relative;
  border-top: 1px solid #e0e0e0;
  margin: 0;
  text-align: left;
}
.prjct-box .box-body .proj-info .info .page {
  top: 0;
  left: 0;
}
.prjct-box .box-body .proj-info .info .page ul {
  margin: 2rem 0;
  padding-inline-start: 1.25rem;
}
.prjct-box .box-body .proj-info .info .page li {
  margin-bottom: 0.5rem;
}
.prjct-box .box-body .proj-info .info .page li:last-of-type {
  margin-bottom: 0;
}
.prjct-box .box-body .content .contnt-dots .dot:first-of-type {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content .page:first-of-type {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content .slide:first-of-type {
  opacity: 1;
}
.prjct-box .box-body .content .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-1 .page:nth-of-type(1) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-1 .slide:nth-of-type(1) {
  opacity: 1;
}
.prjct-box .box-body .content-1 .contnt-dots .dot:nth-of-type(1) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-1 .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-1 .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content-1 .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-1 .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content-1 .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-1 .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content-1 .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-1 .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content-1 .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-1 .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-1 [class*=slide-cont] {
  left: 0;
  left: 0;
}
.prjct-box .box-body .content-2 .page:nth-of-type(1) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-2 .slide:nth-of-type(1) {
  opacity: 0;
}
.prjct-box .box-body .content-2 .page:nth-of-type(2) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-2 .slide:nth-of-type(2) {
  opacity: 1;
}
.prjct-box .box-body .content-2 .contnt-dots .dot:nth-of-type(2) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-2 .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-2 .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content-2 .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-2 .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content-2 .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-2 .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content-2 .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-2 .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-2 [class*=slide-cont] {
  left: calc( ((-100 * 1) * 1%) - (1rem * (1 * 2)));
  left: calc( ((-100 * 1) * 1%) - (var(--lboxBodPad) * (1 * 2)));
}
.prjct-box .box-body .content-3 .page:nth-of-type(1) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-3 .slide:nth-of-type(1) {
  opacity: 0;
}
.prjct-box .box-body .content-3 .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-3 .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content-3 .page:nth-of-type(3) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-3 .slide:nth-of-type(3) {
  opacity: 1;
}
.prjct-box .box-body .content-3 .contnt-dots .dot:nth-of-type(3) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-3 .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-3 .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content-3 .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-3 .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content-3 .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-3 .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-3 [class*=slide-cont] {
  left: calc( ((-100 * 2) * 1%) - (1rem * (2 * 2)));
  left: calc( ((-100 * 2) * 1%) - (var(--lboxBodPad) * (2 * 2)));
}
.prjct-box .box-body .content-4 .page:nth-of-type(1) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-4 .slide:nth-of-type(1) {
  opacity: 0;
}
.prjct-box .box-body .content-4 .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-4 .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content-4 .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-4 .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content-4 .page:nth-of-type(4) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-4 .slide:nth-of-type(4) {
  opacity: 1;
}
.prjct-box .box-body .content-4 .contnt-dots .dot:nth-of-type(4) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-4 .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-4 .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content-4 .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-4 .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-4 [class*=slide-cont] {
  left: calc( ((-100 * 3) * 1%) - (1rem * (3 * 2)));
  left: calc( ((-100 * 3) * 1%) - (var(--lboxBodPad) * (3 * 2)));
}
.prjct-box .box-body .content-5 .page:nth-of-type(1) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-5 .slide:nth-of-type(1) {
  opacity: 0;
}
.prjct-box .box-body .content-5 .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-5 .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content-5 .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-5 .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content-5 .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-5 .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content-5 .page:nth-of-type(5) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-5 .slide:nth-of-type(5) {
  opacity: 1;
}
.prjct-box .box-body .content-5 .contnt-dots .dot:nth-of-type(5) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-5 .page:nth-of-type(6) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-5 .slide:nth-of-type(6) {
  opacity: 0;
}
.prjct-box .box-body .content-5 [class*=slide-cont] {
  left: calc( ((-100 * 4) * 1%) - (1rem * (4 * 2)));
  left: calc( ((-100 * 4) * 1%) - (var(--lboxBodPad) * (4 * 2)));
}
.prjct-box .box-body .content-6 .page:nth-of-type(1) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-6 .slide:nth-of-type(1) {
  opacity: 0;
}
.prjct-box .box-body .content-6 .page:nth-of-type(2) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-6 .slide:nth-of-type(2) {
  opacity: 0;
}
.prjct-box .box-body .content-6 .page:nth-of-type(3) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-6 .slide:nth-of-type(3) {
  opacity: 0;
}
.prjct-box .box-body .content-6 .page:nth-of-type(4) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-6 .slide:nth-of-type(4) {
  opacity: 0;
}
.prjct-box .box-body .content-6 .page:nth-of-type(5) {
  position: absolute;
  -webkit-animation: pOut 10ms;
  animation: pOut 10ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.prjct-box .box-body .content-6 .slide:nth-of-type(5) {
  opacity: 0;
}
.prjct-box .box-body .content-6 .page:nth-of-type(6) {
  visibility: visible;
  -webkit-animation: opacIn-100 1000ms;
  animation: opacIn-100 1000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prjct-box .box-body .content-6 .slide:nth-of-type(6) {
  opacity: 1;
}
.prjct-box .box-body .content-6 .contnt-dots .dot:nth-of-type(6) {
  background-color: #ff3a4b;
}
.prjct-box .box-body .content-6 [class*=slide-cont] {
  left: calc( ((-100 * 5) * 1%) - (1rem * (5 * 2)));
  left: calc( ((-100 * 5) * 1%) - (var(--lboxBodPad) * (5 * 2)));
}
.prjct-box .box-body .lbox-hide .icon-cont {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.prjct-box.reveal {
  top: 0 !important;
  /*left: 50% !important;*/
  left: calc((1280px - 640px) / 2) !important;
  left: var(--prjBxL, calc((var(--docW) - var(--lboxRevW)) / 2)) !important;
  /*left:  !important;*/
  transition-property: width, top, left, z-index;
  transition-duration: 250ms, 250ms, 250ms, 0ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-name: boxShadHide;
  animation-name: boxShadHide;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  cursor: auto;
}
.prjct-box.reveal .box-body {
  height: calc(100vh - 90px);
  height: var(--prjBxBdyRevH, min(calc(100vh - var(--lboxHeadH)), var(--lboxRevBodyMaxH)));
  /*padding-bottom: 1.5rem;*/
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transition-duration: 250ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  /*-webkit-animation: overflowDelay 0ms linear $animDur;
          animation: overflowDelay 0ms linear $animDur;*/
  /*-webkit-animation-name: overflowDelay;
          animation-name: overflowDelay;
  -webkit-animation-duration: 0ms;
          animation-duration: 0ms;
  -webkit-animation-delay: $animDur;
          animation-delay: $animDur;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;*/
}

#ts-box {
  --slideImgWdth: 100%;
  --slidePad: 1.5rem 1rem 1rem;
}
#ts-box .box-body .ref-cont {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  line-height: 0;
  padding: 2rem;
  padding: var(--slidePad);
  box-sizing: border-box;
}
#ts-box .box-body .mock-slide-img {
  position: relative;
  width: 65%;
  width: var(--slideImgWdth);
  height: auto;
  visibility: hidden;
  opacity: 0;
}
#ts-box .box-body .lbox-hide .icon-cont {
  width: 100%;
  height: 220px;
  margin: 1.5rem auto auto;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
#ts-box .box-body .lbox-hide .icon-cont .icon-bg {
  width: 220px;
  height: 220px;
  background-size: 220px 220px;
  display: inline-block;
  background-image: url("../img/tSIcon.svg");
  margin: 0;
}
#ts-box .box-body .lbox-show .slide {
  padding: 2rem;
  padding: var(--slidePad);
}
#ts-box .box-body .lbox-show .slide > img {
  width: 65%;
  width: var(--slideImgWdth);
}

#ts-box.reveal .box-body {
  /*.ref-cont {
    height: calc(100vw / 1.31);
  }*/
}
#ts-box.reveal .box-body .lbox-hide .icon-cont {
  margin-top: 0;
  /*margin-left: 4.5%;*/
  height: 26.75%;
  transition: all 250ms;
}
#ts-box.reveal .box-body .lbox-hide .icon-cont .icon-bg {
  margin: 0 0 0 -71%;
  margin: 1.25% 0 0 -71%;
  /*width: 100%;*/
  height: 100%;
  background-size: 100% 100%;
  transition: margin 250ms;
}

@-webkit-keyframes cardToLboxCardAnim1 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0px);
  }
  10% {
    -webkit-transform: scale(1.5, 1.78) translateY(10px);
  }
  50% {
    -webkit-transform: scale(1.5, 1.78) translateY(10px);
  }
  60% {
    -webkit-transform: scale(1, 1) translateY(0px);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0px);
  }
}
@keyframes cardToLboxCardAnim1 {
  0% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
  }
  10% {
    -ms-transform: scale(1.5, 1.78) translateY(10px);
    transform: scale(1.5, 1.78) translateY(10px);
  }
  50% {
    -ms-transform: scale(1.5, 1.78) translateY(10px);
    transform: scale(1.5, 1.78) translateY(10px);
  }
  60% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
  }
  100% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
  }
}
@keyframes cardToLboxCardAnim1_msEdge {
  0% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
    stroke-width: 2px;
  }
  10% {
    -ms-transform: scale(1.5, 1.78) translateY(10px);
    transform: scale(1.5, 1.78) translateY(10px);
    stroke-width: 1.22px;
  }
  50% {
    -ms-transform: scale(1.5, 1.78) translateY(10px);
    transform: scale(1.5, 1.78) translateY(10px);
    stroke-width: 1.22px;
  }
  60% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
    stroke-width: 2px;
  }
  100% {
    -ms-transform: scale(1, 1) translateY(0px);
    transform: scale(1, 1) translateY(0px);
    stroke-width: 2px;
  }
}
@-webkit-keyframes cardToLboxCardAnim2 {
  0% {
    -webkit-transform: scale(0.8, 0.8) translate(0px, 0px);
  }
  10% {
    -webkit-transform: scale(1.95, 1.43) translate(39px, -15.8px);
  }
  50% {
    -webkit-transform: scale(1.95, 1.43) translate(39px, -15.8px);
  }
  60% {
    -webkit-transform: scale(0.8, 0.8) translate(0px, 0px);
  }
  100% {
    -webkit-transform: scale(0.8, 0.8) translate(0px, 0px);
  }
}
@keyframes cardToLboxCardAnim2 {
  0% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
  }
  10% {
    -ms-transform: scale(1.95, 1.43) translate(39px, -15.8px);
    transform: scale(1.95, 1.43) translate(39px, -15.8px);
  }
  50% {
    -ms-transform: scale(1.95, 1.43) translate(39px, -15.8px);
    transform: scale(1.95, 1.43) translate(39px, -15.8px);
  }
  60% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
  }
  100% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
  }
}
@keyframes cardToLboxCardAnim2_msEdge {
  0% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
    stroke-width: 2.5px;
  }
  10% {
    -ms-transform: scale(1.95, 1.43) translate(39px, -15.8px);
    transform: scale(1.95, 1.43) translate(39px, -15.8px);
    stroke-width: 1.183431953px;
  }
  50% {
    -ms-transform: scale(1.95, 1.43) translate(39px, -15.8px);
    transform: scale(1.95, 1.43) translate(39px, -15.8px);
    stroke-width: 1.183431953px;
  }
  60% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
    stroke-width: 2.5px;
  }
  100% {
    -ms-transform: scale(0.8, 0.8) translate(0px, 0px);
    transform: scale(0.8, 0.8) translate(0px, 0px);
    stroke-width: 2.5px;
  }
}
@-webkit-keyframes cardToLboxCardAnim3 {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  53% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cardToLboxCardAnim3 {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  53% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes lboxRotateCardAnim1 {
  0% {
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  12% {
    -webkit-transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  25% {
    -webkit-transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  37% {
    -webkit-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
  }
  50% {
    -webkit-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
  }
  62% {
    -webkit-transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  75% {
    -webkit-transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  87% {
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes lboxRotateCardAnim1 {
  0% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  12% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  25% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  37% {
    -ms-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
  }
  50% {
    -ms-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
  }
  62% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  75% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
  }
  87% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  100% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes lboxRotateCardAnim1_msEdge {
  0% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
    stroke-width: 2px;
  }
  12% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
    stroke-width: 1.22px;
  }
  25% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
    stroke-width: 1.22px;
  }
  37% {
    -ms-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    stroke-width: 1.93307835px;
  }
  50% {
    -ms-transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    transform: scale(1.300018751, 0.769219674) translate(25.7px, 38px);
    stroke-width: 1.93307835px;
  }
  62% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
    stroke-width: 1.22px;
  }
  75% {
    -ms-transform: scale(1.5, 1.78) translate(0px, 32px);
    transform: scale(1.5, 1.78) translate(0px, 32px);
    stroke-width: 1.22px;
  }
  87% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
    stroke-width: 2px;
  }
  100% {
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
    stroke-width: 2px;
  }
}
@-webkit-keyframes lboxRotateCardAnim2 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  3% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  32% {
    opacity: 0;
    -webkit-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  37% {
    opacity: 1;
    -webkit-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  48% {
    opacity: 1;
    -webkit-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  53% {
    opacity: 0;
    -webkit-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  70% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  82% {
    opacity: 0;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  85% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes lboxRotateCardAnim2 {
  0% {
    opacity: 1;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  3% {
    opacity: 0;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  20% {
    opacity: 0;
    -ms-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
    transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  32% {
    opacity: 0;
    -ms-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
    transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  37% {
    opacity: 1;
    -ms-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
    transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  48% {
    opacity: 1;
    -ms-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
    transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  53% {
    opacity: 0;
    -ms-transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
    transform: scale(1.300018751, 0.769219674) translate(3px, 52px);
  }
  70% {
    opacity: 0;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  82% {
    opacity: 0;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  85% {
    opacity: 1;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1, 1) translate(0px, 0px);
    transform: scale(1, 1) translate(0px, 0px);
  }
}
@-webkit-keyframes lboxRotateG {
  0% {
    -webkit-transform: rotate(0deg);
  }
  16% {
    -webkit-transform: rotate(0deg);
  }
  21% {
    -webkit-transform: rotate(-90deg);
  }
  66% {
    -webkit-transform: rotate(-90deg);
  }
  71% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes lboxRotateG {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  16% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  21% {
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  66% {
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  71% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/*.def-path:host {
  stroke-width: inherit;
}*/
/*$cardToLboxStage2Delay: calc(var(--slideSvgAnimDur) / 4);*/
#profile-box .box-body .icon-cont {
  width: 10rem;
  height: 10rem;
  box-sizing: content-box;
}
#profile-box .box-body .icon-cont .jg-icon {
  font-size: 4rem;
  /*&:before {
    -webkit-mask-image: url('../img/jgIconPattRect_l.svg');
            mask-image: url('../img/jgIconPattRect_l.svg');
  }*/
}
#profile-box .box-body .lbox-hide > .icon-cont {
  top: 3.75rem;
}
#profile-box .slide-svg-anim {
  -webkit-animation-duration: var(--slideSvgAnimDur);
  animation-duration: var(--slideSvgAnimDur);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  /*&.card {
    stroke-width: 2px;
  }*/
}
#profile-box.reveal .content-2 {
  --slideSvgAnimDur: 8000ms;
}
#profile-box.reveal .content-2 .cardToLbox-card-1.move {
  -webkit-animation-name: cardToLboxCardAnim1;
  animation-name: cardToLboxCardAnim1;
}
#profile-box.reveal .content-2 .cardToLbox-card-2.move {
  -webkit-animation-name: cardToLboxCardAnim2;
  animation-name: cardToLboxCardAnim2;
  -webkit-animation-delay: 2000ms;
  animation-delay: 2000ms;
}
#profile-box.reveal .content-2 [class*=cardToLbox-card].fade {
  -webkit-animation-name: cardToLboxCardAnim3;
  animation-name: cardToLboxCardAnim3;
}
#profile-box.reveal .content-2 .cardToLbox-card-2.fade {
  -webkit-animation-delay: 2000ms;
  animation-delay: 2000ms;
}
#profile-box.reveal .content-3 {
  --slideSvgAnimDur: 8000ms;
}
#profile-box.reveal .content-3 .lboxRotate-card.move {
  -webkit-animation-name: lboxRotateCardAnim1;
  animation-name: lboxRotateCardAnim1;
}
#profile-box.reveal .content-3 .lboxRotate-card.fade {
  -webkit-animation-name: lboxRotateCardAnim2;
  animation-name: lboxRotateCardAnim2;
}
#profile-box.reveal .content-3 #lboxRotate-g-1 {
  -webkit-animation-name: lboxRotateG;
  animation-name: lboxRotateG;
}

.slide-svg-anim.card {
  stroke-width: 2px;
}
.slide-svg-anim.card.cardToLbox-card-2 {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transform-origin: 76% 30%;
  -ms-transform-origin: 76% 30%;
  transform-origin: 76% 30%;
}

#cardToLbox-g-1 {
  -webkit-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  transform: translateX(-40px);
}

.cardToLbox-g-1-clip {
  -webkit-transform: translateX(40px);
  -ms-transform: translateX(40px);
  transform: translateX(40px);
}

#cardToLbox-g-2 {
  -webkit-transform: translateX(-18px);
  -ms-transform: translateX(-18px);
  transform: translateX(-18px);
}

.cardToLbox-card-1 {
  -webkit-transform-origin: 24% 51.7%;
  -ms-transform-origin: 24% 51.7%;
  transform-origin: 24% 51.7%;
}

.lboxRotate-card.move {
  -webkit-transform-origin: 48.9% 30%;
  -ms-transform-origin: 48.9% 30%;
  transform-origin: 48.9% 30%;
}

#lboxRotate-g-1 {
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
}

#lboxRotate-inner-2 {
  -webkit-transform-origin: 50% 58%;
  -ms-transform-origin: 50% 58%;
  transform-origin: 50% 58%;
}

/* Non-scaling stroke not supported by MS Edge. Custom
   animations and props needed to offset stroke scaling. */
@supports (-ms-ime-align: auto) {
  #profile-box.reveal .content-2 .cardToLbox-card-1.move {
    animation-name: cardToLboxCardAnim1_msEdge;
  }
  #profile-box.reveal .content-2 .cardToLbox-card-2.move {
    animation-name: cardToLboxCardAnim2_msEdge;
  }
  #profile-box.reveal .content-3 .lboxRotate-card.move {
    animation-name: lboxRotateCardAnim1_msEdge;
  }

  .slide-svg-anim.card.cardToLbox-card-2 {
    stroke-width: 2.5px;
  }
}
footer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
  font-size: 0.75rem;
  min-height: 55px;
  width: 100%;
  box-sizing: border-box;
}

.lbox-bg, .lbox-close {
  position: fixed;
}

.lbox-bg {
  /*@include opacOut(250ms, 0.75);*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  padding: 0;
  z-index: 2;
  visibility: hidden;
}

.lbox-bg.reveal {
  visibility: visible;
  -webkit-animation: opacIn-75 500ms;
  animation: opacIn-75 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes opacIn-75 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
@keyframes opacIn-75 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}

.lbox-close {
  /*@include opacOut(250ms);*/
  background-color: rgba(255, 255, 255, 0);
  z-index: 4;
}
.lbox-close .btn-content {
  background-image: url("../img/close.svg");
  background-size: 18px 18px;
}

.lbox-close.reveal {
  visibility: visible;
  -webkit-animation: opacIn-100 100ms;
  animation: opacIn-100 100ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacIn-100 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.lbox-close.prjct-box-exit {
  top: 0;
  left: calc(100% - 2.5rem);
  left: calc(100% - var(--iconBtnS));
}

.lbox-close.contct-box-exit {
  top: calc(50% - (400px / 2));
  left: calc(50% + (400px / 2) - 2.5rem);
  top: calc(50% - (var(--confLboxW) / 2));
  left: calc(50% + (var(--confLboxW) / 2) - var(--iconBtnS));
}

.top-scroll {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  right: 20px;
  bottom: -44px;
  float: right;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
  transition: bottom 250ms linear;
}
.top-scroll .btn-content {
  background-image: url("../img/scrollTop.svg");
}
.top-scroll.reveal {
  bottom: 20px;
}

.lbox-show > .top-scroll {
  bottom: -100px;
  align-self: flex-end;
}
.lbox-show > .top-scroll.reveal {
  bottom: 70px;
}
.lbox-show > .proj-info.no-top-scroll + .top-scroll {
  display: none;
}

@media only screen and (orientation: landscape) {
  #home .title {
    width: 65%;
  }

  #ts-box {
    --slideImgWdth: 65%;
  }
  #ts-box .box-body .lbox-hide .icon-cont {
    margin: 3rem auto auto;
  }
  #ts-box .box-body .lbox-show .slide > img[title="TopoSpot Logo"] {
    width: 80%;
  }

  #ts-box.reveal .box-body {
    /*.ref-cont {
      height: calc(100vw / 1.98);
    }*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont {
    height: 33.5%;
    /*top: 36%;*/
    /*left: 12%;*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont .icon-bg {
    margin: 0.75% 0 0 -59.75%;
    /*width: 18%;*/
    /*height: 31.75%;*/
    /*background-size: 18% 31.75%;*/
  }
}
/* 481px up */
@media only screen and (min-width: 30.063em) {
  #cntct-form .spn-btn {
    min-width: 5rem;
    align-self: flex-end;
  }
}
@media only screen and (min-width: 30.063em) and (orientation: portrait) {
  #ts-box {
    --slidePad: 2rem;
  }

  #ts-box.reveal .box-body {
    /*.ref-cont {
      height: calc(100vw / 1.33);
    }*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont {
    /*top: 36%;*/
    /*left: 7%;*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont .icon-bg {
    /*width: 18.5%;
    height: 28.75%;
    background-size: 18.5% 28.75%;*/
    margin: 0 0 0 -71%;
  }
}
/* 641px up */
@media only screen and (min-width: 40.063em) {
  :root {
    --lboxRevW: 640px;
  }

  .lbox-close.prjct-box-exit {
    left: calc(50% + (640px / 2) - 2.5rem);
    left: calc(50% + (var(--lboxRevW) / 2) - var(--iconBtnS));
  }

  /*#ts-box.reveal {
    .box-body {
      .lbox-hide {
        .icon-cont {
          width: 107px;
          height: 107px;
          /*.icon-bg {
            @include iconBg(107px);
          }*/
  /* }
      }
    }
  }*/
}
@media only screen and (min-width: 40.063em) and (orientation: portrait) {
  :root {
    --btnH: 1.375rem;
    --spnBtnH: 1.625rem;
    /*--iconBtnS: 2.5rem;*/
    --lboxW: 340px;
    --lboxH: 450px;
    --lboxHeadH: 90px;
    --lboxBodPad: 1rem;
    --confLboxW: 400px;
    --confLboxH: 400px;
    /*--spnStartDash: calc(1.5 * 1.625rem);
    --spnMidDash: calc(3.14 * 1.625rem);
    --spnEndDash: calc(1.5328 * 1.625rem);*/
    /*--spnStartDash: (1.5 * 26);
    --spnMidDash: (3.14 * 26);
    --spnEndDash: (1.5328 * 26);*/
    --spnStartDash: 39;
    --spnMidDash: 81.64;
    --spnEndDash: 39.8528;
  }

  body {
    font-size: 0.925rem;
  }

  .nav-ul {
    font-size: 1rem;
  }

  section > .title, #home > .title {
    font-size: 2rem;
  }

  section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  #home .title {
    width: auto;
  }
  #home .title p {
    font-size: 2rem;
  }
  #home .title .btn {
    font-size: 1.25rem;
  }

  #projects > .title {
    margin-bottom: 1rem;
  }

  .lbox .box-heading {
    font-size: 1.5rem;
  }

  #cntct-conf-box {
    --lboxHeadH: 90px;
    --iconSize: 150px;
  }
  #cntct-conf-box .box-heading {
    font-size: 1.25rem;
  }
  #cntct-conf-box .box-body {
    font-size: 1rem;
  }
  #cntct-conf-box .box-body > .content {
    padding: 2rem;
  }

  .prjct-box .box-heading .content .details .tech-lbls .tech-lbl {
    font-size: 0.625rem;
    height: 16px;
    line-height: 1.8;
  }
  .prjct-box .box-heading .content .details .ext-link {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  .prjct-box .box-body .lbox-hide {
    padding: 1.5rem;
  }
  .prjct-box .box-body .proj-info .info .page ul {
    padding-inline-start: 2.5rem;
  }
  .prjct-box .box-body .proj-info .descrpt {
    font-size: 0.825rem;
  }
  .prjct-box .box-body .contnt-ctrls, .prjct-box .box-body .proj-info {
    padding: 0 0.5rem;
  }

  #ts-box {
    --slideImgWdth: 80%;
  }
  #ts-box .box-body .lbox-hide .icon-cont {
    margin: 2rem auto auto;
  }

  #profile-box .box-body .icon-cont {
    top: 4.5rem;
  }

  #cardToLbox-g-2 {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .lbox-close.contct-box-exit {
    margin-left: 1rem;
    background: #ff3a4b;
    top: calc(50% - (400px / 2) + (90px / 2) - (2.5rem / 2));
    left: calc(50% + (400px / 2));
    top: calc(50% - (var(--confLboxH) / 2) + (var(--lboxHeadH) / 2) - (var(--iconBtnS) / 2));
    left: calc(50% + (var(--confLboxW) / 2));
  }

  #ts-box.reveal .box-body .lbox-hide {
    /*.ref-cont {
      height: 388px;
    }*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont {
    /*top: 37%;
    left: 13.75%;*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont .icon-bg {
    margin: 0 0 0 -57%;
  }

  /*html.no-touchevents {
    #ts-box.reveal {
      .box-body {
        .lbox-hide {
          .ref-cont {
            height: 382px;
          }
          .icon-cont {
            top: 37%;
            left: 13.75%;
          }
        }
      }
    }
  }*/
}
@media only screen and (min-width: 40.063em) and (orientation: landscape) {
  /*#ts-box.reveal {
    .box-body {
      .ref-cont {
        height: 323px;
      }
      .lbox-hide {
        .icon-cont {
          top: 35%;
          left: 12%;
        }
      }
    }
  }*/
  /*html.no-touchevents {
    #ts-box.reveal {
      .box-body {
        .lbox-hide {
          .ref-cont {
            height: 318px;
          }
          .icon-cont {
            top: 37%;
            left: 13.75%;
          }
        }
      }
    }
  }*/
}
/* 961px up */
@media only screen and (min-width: 60.063em) {
  .lbox-close.prjct-box-exit {
    margin-left: 1rem;
    background: #ff3a4b;
    top: calc(0% + (90px / 2) - (2.5rem / 2));
    left: calc(50% + (640px / 2));
    top: calc(0% + (var(--lboxHeadH) / 2) - (var(--iconBtnS) / 2));
    left: calc(50% + (var(--lboxRevW) / 2));
  }
}
@media only screen and (min-width: 60.063em) and (orientation: landscape) {
  :root {
    --btnH: 1.375rem;
    --spnBtnH: 1.625rem;
    /*--iconBtnS: 2.5rem;*/
    --lboxW: 340px;
    --lboxH: 450px;
    --lboxHeadH: 90px;
    --lboxBodPad: 1rem;
    --confLboxW: 400px;
    --confLboxH: 400px;
    /*--spnStartDash: calc(1.5 * 1.625rem);
    --spnMidDash: calc(3.14 * 1.625rem);
    --spnEndDash: calc(1.5328 * 1.625rem);*/
    /*--spnStartDash: (1.5 * 26);
    --spnMidDash: (3.14 * 26);
    --spnEndDash: (1.5328 * 26);*/
    --spnStartDash: 39;
    --spnMidDash: 81.64;
    --spnEndDash: 39.8528;
  }

  body {
    font-size: 0.925rem;
  }

  .nav-ul {
    font-size: 1rem;
  }

  section > .title, #home > .title {
    font-size: 2rem;
  }

  section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  #home .title {
    width: auto;
  }
  #home .title p {
    font-size: 2rem;
  }
  #home .title .btn {
    font-size: 1.25rem;
  }

  #projects > .title {
    margin-bottom: 1rem;
  }

  .lbox .box-heading {
    font-size: 1.5rem;
  }

  #cntct-conf-box {
    --lboxHeadH: 90px;
    --iconSize: 150px;
  }
  #cntct-conf-box .box-heading {
    font-size: 1.25rem;
  }
  #cntct-conf-box .box-body {
    font-size: 1rem;
  }
  #cntct-conf-box .box-body > .content {
    padding: 2rem;
  }

  .prjct-box .box-heading .content .details .tech-lbls .tech-lbl {
    font-size: 0.625rem;
    height: 16px;
    line-height: 1.8;
  }
  .prjct-box .box-heading .content .details .ext-link {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  .prjct-box .box-body .lbox-hide {
    padding: 1.5rem;
  }
  .prjct-box .box-body .proj-info .info .page ul {
    padding-inline-start: 2.5rem;
  }
  .prjct-box .box-body .proj-info .descrpt {
    font-size: 0.825rem;
  }
  .prjct-box .box-body .contnt-ctrls, .prjct-box .box-body .proj-info {
    padding: 0 0.5rem;
  }

  #ts-box {
    --slideImgWdth: 80%;
  }
  #ts-box .box-body .lbox-hide .icon-cont {
    margin: 2rem auto auto;
  }

  #profile-box .box-body .icon-cont {
    top: 4.5rem;
  }

  #cardToLbox-g-2 {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .lbox-close.contct-box-exit {
    margin-left: 1rem;
    background: #ff3a4b;
    top: calc(50% - (400px / 2) + (90px / 2) - (2.5rem / 2));
    left: calc(50% + (400px / 2));
    top: calc(50% - (var(--confLboxH) / 2) + (var(--lboxHeadH) / 2) - (var(--iconBtnS) / 2));
    left: calc(50% + (var(--confLboxW) / 2));
  }

  #ts-box.reveal .box-body .lbox-hide {
    /*.ref-cont {
      height: 388px;
    }*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont {
    height: 28.75%;
    /*top: 37%;*/
  }
  #ts-box.reveal .box-body .lbox-hide .icon-cont .icon-bg {
    margin: 0.75% 0 0 -60.2%;
  }

  /*html.no-touchevents {
    #ts-box.reveal {
      .box-body {
        .lbox-hide {
          .ref-cont {
            height: 382px;
          }
          .icon-cont {
            top: 37%;
            left: 12%;
          }
        }
      }
    }
  }*/
}
/*@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min--moz-device-pixel-ratio: 1.25),
       only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {


  .jg-icon:after {
    background-image: url("../img/jgIconPattRect@hr.svg");
  }
}*/

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