/*! GENERATED FILE - DO NOT EDIT. Built from scss/main.scss with "npm run build". */
html {
  height: 100%;
}

body {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #000;
  position: relative;
  height: 100%;
}

#band {
  width: 100%;
  height: 428px;
  background-color: #000;
  margin: -214px auto 0;
  top: 50%;
  position: relative;
}

#whiteline,
#limit {
  height: 450px;
  width: 1276px;
  margin: auto auto auto 50%;
  position: absolute;
  left: -639px;
}

#whiteline {
  top: -1px;
  left: -640px;
  height: 428px;
  border: 1px solid #fff;
}

#main {
  height: 100%;
  width: 1000px;
  margin: auto;
  position: absolute;
  left: 140px;
}

#content {
  width: 1276px;
  height: 100%;
  left: -140px;
  position: absolute;
  overflow: hidden;
}

.content {
  position: absolute;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  height: 428px;
  width: 1280px;
  margin: auto;
}

.credits {
  color: #7f7f7f;
  font-family: arial;
  font-size: 10px;
  height: 20px;
  margin-top: 190px;
  position: absolute;
  text-align: right;
  top: 100%;
  padding: 0 8px;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 10s;
}
.credits:hover {
  height: 10px;
  opacity: 1;
  transition: opacity 1s;
}
.credits a {
  color: #7f7f7f;
  text-decoration: none;
}
.credits img {
  vertical-align: middle;
  opacity: 0.6;
  border: none;
}
.credits.left {
  left: 0;
}
.credits.right {
  right: 0;
}

.label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#iPad {
  display: none;
}

.scroll-pane {
  position: relative;
  box-sizing: border-box;
  width: 243px;
  height: 100%;
}

.info .scroll-pane {
  width: 436px;
}

#content > .page {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 28;
}
#content > .page.is-next {
  z-index: 29;
}
#content > .page.topPage {
  z-index: 30;
}
#content > .page > .content {
  transition: opacity 1s;
}
#content > .page:not(.is-entered) > .content {
  opacity: 0;
  pointer-events: none;
}

html:not(.js) .background.top {
  display: none;
}

html.js .background {
  transition: opacity 3s;
}
html.js .page.topPage .background.top {
  opacity: 0;
}
html.js .page.is-next .background {
  transition: none;
}
html.js #content > .page.is-leaving > * {
  opacity: 0;
  transition: opacity 1s;
}
html.js #band {
  opacity: 0;
  pointer-events: none;
}
html.js.intro #band, html.js.ready #band {
  opacity: 1;
  pointer-events: auto;
}
html.js:not(.ready) .credits {
  opacity: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html.intro #whiteline {
  animation: fade-in 2s both;
}
html.intro #home .background.top {
  animation: fade-in 2s both, fade-out 3s 4s forwards;
}
html.intro #leftMenu,
html.intro #rightMenu,
html.intro #home .background.reveal {
  animation: fade-in 2s 3s both;
}
html.intro .page:not(#home) .background {
  animation: fade-in 0.1s 7s both;
}

#leftMenu {
  position: relative;
  z-index: 50;
  float: left;
  width: 130px;
  height: 430px;
  background: url(../images/menuBg.jpg) top left no-repeat transparent;
  color: #fff;
}

span.sgd_bullet {
  display: block;
  position: absolute;
  top: 94px;
  right: 9px;
  width: 13px;
  height: 13px;
  margin: 2px 10px 0;
  background: #000;
  border: 1px solid #fff;
}

#primaryMenu {
  margin: 129px 9px 0 0;
}
#primaryMenu a {
  display: block;
  font-size: 14px;
  text-decoration: none;
  height: 30px;
  line-height: 18px;
  color: #fff;
  margin-top: 4px;
  text-align: right;
  outline: none;
  border: none;
  cursor: progress;
  transition: all 1s;
}
#primaryMenu a:hover {
  text-shadow: 0 0 1px #fff;
}
#primaryMenu a span {
  float: left;
  width: 87px;
}
#primaryMenu a span.bullet {
  display: block;
  float: right;
  width: 14px;
  height: 14px;
  margin: 2px 10px 0;
  background-color: #fff;
  transition: background-color 1s;
}
#primaryMenu.ready a {
  cursor: pointer;
}
#primaryMenu a.home.current span.bullet, #primaryMenu.ready a.home:hover span.bullet {
  background-color: #9933cc;
}
#primaryMenu a.about.current span.bullet, #primaryMenu.ready a.about:hover span.bullet {
  background-color: #993333;
}
#primaryMenu a.services.current span.bullet, #primaryMenu.ready a.services:hover span.bullet {
  background-color: #b2938d;
}
#primaryMenu a.projects.current span.bullet, #primaryMenu.ready a.projects:hover span.bullet {
  background-color: #71222d;
}
#primaryMenu a.gallery.current span.bullet, #primaryMenu.ready a.gallery:hover span.bullet {
  background-color: #e3fe89;
}
#primaryMenu a.contact.current span.bullet, #primaryMenu.ready a.contact:hover span.bullet {
  background-color: #fc5fae;
}

#rightMenu {
  position: relative;
  float: right;
  z-index: 50;
  height: 428px;
  width: 114px;
  background: #fff;
  overflow: hidden;
  transition: width 1s;
}
#rightMenu.wide {
  width: 267px;
}
#rightMenu a.icon {
  position: absolute;
  top: 26px;
  width: 21px;
  height: 21px;
  overflow: hidden;
}
#rightMenu a.flickr::after,
#rightMenu a.instagram::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s;
}
#rightMenu a.flickr:hover::after,
#rightMenu a.instagram:hover::after {
  opacity: 1;
}
#rightMenu a.flickr {
  background: url("data:image/gif;base64,R0lGODlhFQAVANUAAAAAALu7u2ZmZg8PDxAQEBISEgsLCxcXFwQEBAcHBxEREWJiYgoKChQUFA0NDQwMDA4ODgICAo2NjbS0tE1NTYCAgFhYWBoaGnBwcCQkJGNjY1FRUQYGBi4uLrCwsBwcHCMjIyEhITExMUBAQCsrKwUFBVxcXDU1NSkpKSwsLElJSR0dHWVlZVZWVj4+PjIyMkJCQm5ubjMzMwkJCUdHR6WlpVpaWkRERAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAVABUAAAaiwAPDMCAMjsgk8sE4JADQqHQqTRioWKqDkO1CFVxvthAWU8lRRUp0mYY2lk4UDXixBHhaCaoJ+AMVT2gZeIUCLgA3f38xAGgUhngLCBKLfhMIaDaReA41ln4Nj5yTlZYemVwfnCcAMqAmjmEkC4UjEVAtE38YuAUDUQYgKGVQDTAqK2nAZlQKzM1SBBDRUwRX1VEPHNlRCUIGEEZKSkYGMwdBADs=");
  right: 12px;
}
#rightMenu a.flickr::after {
  background: url("data:image/gif;base64,R0lGODlhFQAVANUAAH9/f/8AeQBa2QRb1nt+go1yft8feh9jw4J8f/oEeUJtqnl9g151lswze7dIfFJynz1srmx5jW96i2p5joF+f0hvpoR7f59gfgFa2Exwo/APeklvpUBtq5ZpflRynidlvV11l8o0e65RfXx+gdYoe8M8fHJ7iTBotw9ezqxSfb5AfLFOffcHeaJdfZNsfrpFfDFotrtDfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAVABUAAAZtQIBwSCwaj8ikcslsOp/KSUXBKHYcscuRgxF4PwthKUAOkCzEh3ctgAFE5XKIeGB7BwRDnJxADFF2XhIae2QFQ3V2eHp7LH5CIIEQAC2FKkUbA2snI0IvCWUNFEYmHhkRRQUpKy5Qrq+wsbKwQQA7");
}
#rightMenu a.instagram {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAIAAAAmdTLBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RJREFUeNqkVFlME1EU7UwHmpauFFpBbU2AAoJ8WKIGUJGwFCMlArLon4IIKt8iCDEB0URFflyJIRrZTNQE1AAimxrZIWwaBQSh1EqhO1ZLx9uZZgyYaKIvb5r3ztwzve/ccx/i4+OzvLxM+6chEAgQDodjNBrJvaura1BQ0CbJZh6X5+LigiAIDXHguB3/YbMZjYb5ufnxsTGLxULGA5fm7u5ObqJjYtq7urR6nc5kXDLoYQFzkfiFCQiJv+3rTUpOJinAxSjyg9oatVp9vrh4YnzCZDLZbDacGAgx6HQ6g8GQSCU5ubl371VhLlh9bZ3zG0wWq/P1q+HREYlU+ofTMpnMbSEhniJRW2fHyPiYu1DoyB0eeagcEss5mfs7wXujN5vNJre3Ku/YcXz33j2K+HjDijkuXuHMXyrdgtJRSJtigjCn8vKSkpNEG8RL2qWnjY1XL19pf9kmkUhU8yo6HbVav8tkst7uHgefy+OtrtopVbk8btW9+7Fxsa2trc1NTX4y2em8vLCwsJSDSTXV1RAAJbdarc68IIes7OxF3fJ2uZzk5xcUmKzfTuTmUOmkpqeB+OUVFeQWZJpVzZ8rLgIuCnsUJapMw+Fxc3NLPpTS2vLi5vUbFB+kflhXn5CoFIlFRKAjEkEILhWEEyifzxeLxYODA+u07O3rhWMKhR5kJBm8hk8jvGYwGJa02sDArev4wUHBZpNJpyOcjiAU7uDb7WQ+DhS83NDQoNivgDNTQdGxMelHDrc0Ny+o1GQkDBy3w9qhP1gNQVEMo5PRFeXXwsLDb1dWxsTGDQ8N+Qf4p2Wkz87MlJWUkhphUEAUta3anHyjwQAAk8ki+V81mozUtDNn8w8kJCgTlWaz+cmjxxdKSj9NTzt9xWK5MhgWs8VZvx27dkJ5jmYeW3dmsGpAYKCXl9c6PEGpNK5Y4OtO/4Lbegb63/R0C4XCv/Y8i8VqfP7s/eQklAm4dDC5Xq/XLmozs7MiIyPBWHALsDkcHpfLF/B5fL5AAFPg4ekJzRceEVF26eK+qKiiwsLOjk7g/up/EHx4bFRvMYMXVZovc+qFzwsqcsIaEMDh7buPH7Kyj1P9v+b+gf+Rh4b6+vmy2RwMwxDUUVKccAzUCIScnprq7+vXaDRUmyH/ef/9FGAArb2Dvkp0qMkAAAAASUVORK5CYII=");
  right: 49px;
}
#rightMenu a.instagram::after {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAIAAAAmdTLBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FJREFUeNpcVE2MFEUUfvXT3bPDzuzMDjKsMDibsEBACS4niBrU5UCQCyGKJkqIEOBKdmJIjIsc1rhwIYYTrtEYjQe5kED4yXLBxGACSjzIYWWicNgfdpzZmZ6d7uqq4lX3bKfdl5fqrur63s/3Xj9SrVaVUhCKDiX5EgsJJfmCQinlUsoYT4A4SrPFDrQFBGiFGiUMFTjXKQZ9VHCR9MdjY70t16l87k39KqBXQD6APgFZYdZIM9E2u7NY+mrQX+1HsfAInOm0M8OvytJGeeUbGCxRy7aNXQyIgCZhSgQU0fPqaaX65+77r/wy7K8RxsT09DQ+BipH4e+Z+SvX/f+nnRRKiKWYZDD78T+dx0HpziDaxwy1owP64G5n4vwKMKPUooxR1mXn8qPq5ku8Ay+eL7tP5i2XI5biB6vThBx468tJZP7e770HTvGNB/nImVVTjzhl9r5y8YPtygHdpx1w5VOhQ4Y1DZZIATTnMfiFz8b4h+/xLRuci6ftN7a2T52lJydFKc3O7vJ1gGHb4ELLw8s8pFGSftC0W4j8H/fYjz/4167VhobMft+uzPF33NdP9Py8Izi4I6qzBU2iAgDb+AcGJG9OI+epyXP6xLtdcCjNYrZ39CN/7Gu+zIUFi0QZ/mkIQjyLqGNIaWM6eOvtJJHGx56XmfeEyahzNOIpJhLhCSOkn5Iw/gCvDpX5499WNC+//9CmQjEanXD0T4KoqETjaY5G8SulvffP8FuTueZcjM+0WnzsE7tyRCgZ+0fW4vgpQTx0i18b2qNG9mcrr62d+rb/37+K13/K7hxm2zctHju8nA/6rxNm8Kb/JUuRPGFUGl4AhFSzhy8Wto0435+zJ8e1Z/vjn9YPHYm7iylFYIGkebd++MMgfw48a8L66AaamNm635o4QDXepbiFRGvy/xoK5vS6PPo2+Xs+l7nd2fYE5yxJG8I8ZdYVf0HPFxdS+YLXlza8mvilXEiPr6m9WfJG6+lRTxck9rUmYeWALNcQw7bqC6sufKmvXvVv3g6UYox1e7bRzpD+2wX39OqZvbrB9CKHBui6MloLcIWa0HNKzQLkiu6tG/XyS91c4jlVb+eb/LuegSV77SwVbSJwBGkQRjV2mmKK9ojcwFIqEyTnD8YQjyDcu16qpTdETWnUgZVTEI8Zi+ffcwEGAC3MoIXZPvGAAAAAAElFTkSuQmCC");
}
#rightMenu a.email {
  right: 86px;
  display: block;
  text-decoration: none;
  background-color: #000;
  color: #fff;
  transition: background-color 1s;
}
#rightMenu a.email:hover {
  background-color: #7f7f7f;
}
#rightMenu div.dot {
  position: absolute;
  top: 26px;
  width: 19px;
  height: 19px;
  border: 1px solid #000;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
#rightMenu.wide div.dot {
  opacity: 1;
}
#rightMenu div.dot1 {
  right: 123px;
  transition: opacity 0.2s 0.75s;
}
#rightMenu.wide div.dot1 {
  transition-delay: 0.25s;
}
#rightMenu div.dot2 {
  right: 160px;
  transition: opacity 0.2s 0.5s;
}
#rightMenu.wide div.dot2 {
  transition-delay: 0.25s;
}
#rightMenu div.dot3 {
  right: 197px;
  transition: opacity 0.2s 0.25s;
}
#rightMenu.wide div.dot3 {
  transition-delay: 0.5s;
}
#rightMenu div.dot4 {
  right: 234px;
  transition: opacity 0.2s 0.25s;
}
#rightMenu.wide div.dot4 {
  transition-delay: 0.75s;
}
#rightMenu img.sgd {
  position: absolute;
  z-index: 3;
  top: 272px;
  left: 15px;
  width: 86px;
  height: 86px;
  background-color: #000;
  transition: all 1s;
}
#rightMenu.wide img.sgd {
  top: 345px;
  left: 106px;
  width: 50px;
  height: 50px;
}
#rightMenu img.s_g_d {
  position: absolute;
  top: 372px;
  right: 13px;
  width: 88px;
  height: 49px;
  transition: all 1s;
}
#rightMenu.wide img.s_g_d {
  top: 345px;
  right: 11px;
}
#rightMenu img.rm {
  position: absolute;
  top: 407px;
  right: 11px;
  opacity: 0;
  transition: all 0.5s;
}
#rightMenu.wide img.rm {
  width: 148px;
  height: 10px;
  opacity: 1;
  transition: all 1s 1s;
}
#rightMenu div.content {
  position: absolute;
  top: 63px;
  left: 12px;
  width: 0;
  height: 266px;
  overflow: hidden;
  background: #f0f0f0;
  text-align: left;
  font-size: 11px;
  line-height: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, width 0.5s, visibility 0s 0.5s;
}
#rightMenu div.content.active {
  visibility: visible;
  transition: opacity 0.3s, width 0.5s;
}
#rightMenu div.content p {
  margin: 8px 0 8px 4px;
}
#rightMenu div.content .scroll-pane {
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e1e1e1 #f0f0f0;
}
#rightMenu div.content .scroll-pane::-webkit-scrollbar {
  width: 16px;
}
#rightMenu div.content .scroll-pane::-webkit-scrollbar-track {
  background: #f0f0f0;
}
#rightMenu div.content .scroll-pane::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  min-height: 40px;
}
#rightMenu div.content .scroll-pane:hover {
  scrollbar-color: #bbb #ddd;
}
#rightMenu div.content .scroll-pane:hover::-webkit-scrollbar-track {
  background: #ddd;
}
#rightMenu div.content .scroll-pane:hover::-webkit-scrollbar-thumb {
  background: #bbb;
}
#rightMenu.wide div.content {
  width: 243px;
}
#rightMenu.wide div.content.active {
  opacity: 1;
  transition: opacity 1s 0.5s, width 0.5s;
}
#rightMenu div.contact {
  background: #fff;
}
#rightMenu div.contact p {
  font-size: 16px;
  line-height: 1.3em;
  margin: 12px 0;
}
#rightMenu div.contact p a {
  color: #000;
  text-decoration: none;
}
#rightMenu div.contact p a:hover {
  text-decoration: underline;
}
#rightMenu.wide div.contact {
  margin-top: 50px;
  width: 160px;
}

#services .content,
#projects .content,
#gallery .content {
  position: absolute;
  top: 0;
  left: 260px;
  width: 766px;
  height: 450px;
  overflow: hidden;
}

#services .accordion,
#projects .accordion {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 101;
  width: 765px;
  height: 100%;
  text-align: left;
  background: url("../images/projects_reveal.jpg") no-repeat -260px top;
  transition: left 1s;
}

#services .accordion {
  background-image: url("../images/services_top.jpg");
}

#projects .accordion.a {
  left: 661px;
  background-position: -260px top;
}
#projects .accordion.a.open {
  left: 20px;
}

#projects .accordion.b {
  left: 687px;
  background-position: -286px top;
}
#projects .accordion.b.open {
  left: 46px;
}

#projects .accordion.c {
  left: 713px;
  background-position: -312px top;
}
#projects .accordion.c.open {
  left: 72px;
}

#projects .accordion.d {
  left: 739px;
  background-position: -338px top;
}
#projects .accordion.d.open {
  left: 98px;
}

#services .accordion.a {
  left: 687px;
  background-position: -274px top;
}
#services .accordion.a.open {
  left: 20px;
}

#services .accordion.b {
  left: 713px;
  background-position: -300px top;
}
#services .accordion.b.open {
  left: 46px;
}

#services .accordion.c {
  left: 739px;
  background-position: -326px top;
}
#services .accordion.c.open {
  left: 72px;
}

.accordion h3 {
  margin: 26px 0 0 64px;
  text-transform: uppercase;
  font-weight: normal;
  transition: color 1s;
}
.accordion .header {
  float: left;
  width: 24px;
  height: 428px;
  overflow: hidden;
  background: #fff;
  color: #fff;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  cursor: pointer;
  text-align: center;
  font-weight: normal;
  text-decoration: none;
}
.accordion .header .title {
  margin-top: 70px;
  border: none;
}
.accordion .header .number {
  position: absolute;
  top: 25px;
  left: -1px;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 1px 9px 1px 3px;
  line-height: 22px;
  text-align: center;
  background-color: #000;
  color: #fff;
  transition: background-color 1s;
}

#projects .accordion.current .header .number {
  background-color: #71222d;
}
#projects .accordion.current h3 {
  color: #71222d;
}

#services .accordion.current .header .number {
  background-color: #b2938d;
}
#services .accordion.current h3 {
  color: #ffeedd;
}

.info {
  width: 436px;
  height: 307px;
  margin: 39px 0 0 66px;
  font-size: 12px;
  overflow: hidden;
}
.info .scroll-pane {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e1e1e1 #f0f0f0;
}
.info .scroll-pane::-webkit-scrollbar {
  width: 16px;
}
.info .scroll-pane::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.info .scroll-pane::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  min-height: 40px;
}
.info .scroll-pane:hover {
  scrollbar-color: #bbb #ddd;
}
.info .scroll-pane:hover::-webkit-scrollbar-track {
  background: #ddd;
}
.info .scroll-pane:hover::-webkit-scrollbar-thumb {
  background: #bbb;
}
.info h4 {
  margin: 12px;
  font-size: 12px;
  clear: both;
}
.info p {
  margin: 0 12px;
}

#projects .info {
  background-color: #fff;
}
#projects .info img {
  margin: 0 0 0 39px;
}

#services .info {
  background-image: url("../images/services/bg.png");
}
#services .info .scroll-pane {
  padding-top: 32px;
}
#services .info img {
  margin: 0;
}

#services .consultancy .info img {
  margin: 0 0 24px 0;
}

.accordion > a.thumb {
  position: absolute;
  left: 557px;
  width: 70px;
  height: 47px;
  cursor: pointer;
  border: none;
  transition: all 1s;
}
.accordion > a.thumb > img {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}
.accordion > a.thumb.t1 {
  top: 88px;
}
.accordion > a.thumb.t2 {
  top: 140px;
}
.accordion > a.thumb.t3 {
  top: 192px;
}
.accordion > a.thumb.t4 {
  top: 244px;
}
.accordion > a.thumb.t5 {
  top: 296px;
}
.accordion > a.thumb.t6 {
  top: 348px;
}
.accordion > a.thumb.expand {
  top: 0;
  left: 26px;
  z-index: 2;
  width: 641px;
  height: 428px;
  cursor: default;
}

.accordion .slideShow {
  position: absolute;
  top: 0;
  left: 26px;
  z-index: 3;
  width: 641px;
  height: 450px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}
.accordion .slideShow.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s 1s;
}

.accordion .slideRack {
  position: relative;
  z-index: 1;
  width: 3846px;
  height: 428px;
  margin: 0;
  padding: 0;
  transform: translateX(calc(var(--slide, 0) * -641px));
  transition: transform 1s;
}
.accordion .slideRack > li {
  position: relative;
  float: left;
  width: 641px;
  height: 428px;
  list-style: none;
}
.accordion .slideRack > li img {
  position: absolute;
  z-index: 1;
  width: 641px;
  height: 428px;
}
html.js .accordion .slideRack > li img:not(.loaded) {
  visibility: hidden;
}

.accordion .caption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s, top 1s;
}
.accordion .caption.is-current {
  opacity: 1;
}

.accordion .slideShow.is-open .caption {
  top: 430px;
  transition: opacity 0.4s, top 1s 1s;
}

.accordion a.cross {
  top: 26px;
  left: 600px;
  width: 22px;
  height: 22px;
}

.accordion a.next {
  left: 600px;
}

.accordion a.previous {
  left: 20px;
}

#galleryContent,
#gallery .slide {
  width: 766px;
  height: 450px;
}

#gallery .slides {
  position: absolute;
  left: 0;
  display: flex;
  width: max-content;
  height: 450px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(calc(var(--slide, 0) * -766px));
  transition: transform 1s;
}

#gallery .slide {
  position: relative;
  flex: none;
}
#gallery .slide a,
#gallery .slide img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

#gallery .caption {
  position: absolute;
  top: 400px;
  left: 0;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s, top 1s;
}

#gallery .slide.is-current .caption {
  opacity: 1;
}

#gallery.is-entered .caption {
  top: 430px;
  transition: opacity 0.4s, top 1s 1s;
}

#gallery .content a.next,
#gallery .content a.previous,
.accordion a.cross,
.accordion a.next,
.accordion a.previous {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background: no-repeat center;
  opacity: 0.2;
  transition: opacity 1s;
}

#gallery .content a.next,
#gallery .content a.previous,
.accordion a.next,
.accordion a.previous {
  top: 193px;
  width: 22px;
  height: 44px;
}

#gallery .content a.next,
.accordion a.next {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAsCAYAAABhVUjwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQtJREFUeNpi/A8EDDQATAw0AqMGEzR4GaUGM+JIFQJAfAmI5ajt4o9AHAfEf2kRxgeBuJvaQcEIpdmA+BgQG1PbYBBQB+LzQMxJ7eR2E4iLaeFiGNgCxN60MFgUiK9CaarmvNdAnEirLL0ViKdTOyhggBOaStSpXQh9B+JoIP5Fi9LtLBDXUzsoYIAZiPcCsT21DWaAln6gUpCf2gX9IyDOolUN8pdWQQFKekLUdDEo8uZjM5RSg4uA2Inayc0YWgGwDYks3UvIUDD4jx0w4MDe/4kEg6Kgn0+soaQYnElKfTeg1T8onS4l1VBiDG4kpxVEKCjsoQU585Boxk6jxFB8Lh7t3AwBgwECDAChxLefK+SfwAAAAABJRU5ErkJggg==");
}

#gallery .content a.previous,
.accordion a.previous {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAsCAYAAABhVUjwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAShJREFUeNpi/A8EDDQATAw0AqMGU9XgZdgEGSlMFY+AWA+IP1DTxX+BOA6IP1I7KLqB+CAuSXKD4iwQWwHxLyj/PzUM/g7EhkB8E0nsPzWCohjNUKoExVYg9sEiTlFQvAZibShN0GBSgiIRh6EU5bzp0GAgGhATFDehqeA7HjUkBwUonUYTMJSsoKiHZgaSAb6gAGVXZ2iZQAgQndw+QkutR0Q6kOgwziLBUJLC+C8DhQBXULyDJjGqB4UQEM8HYmZa1HlOQFxE7aBAziBWRKTl/4MmS4OAOhD3khwW/4kH3iDP4cAYYFAU9KLQJEiTJpY3EGdSq6CnW/XPCcRLgZiNFq1NYyBupHZQIJeAztAK4T81DaZZMxYE5IB4Gi0a3qOdmwE0GCDAAJv60p+IOBMSAAAAAElFTkSuQmCC");
}

.accordion a.cross {
  background-image: url("data:image/gif;base64,R0lGODlhFgAWAIABAP///wYxiyH5BAEAAAEALAAAAAAWABYAAAIshI+py+0Po3ShqhooRji37oEPKEKkJZEToKZndG6aXDIdJ9so7q3+DwwKDQUAOw==");
}

#gallery .content a.previous {
  left: 20px;
}

#gallery .content a.next {
  left: 724px;
}

#gallery .content:hover a.arrow,
.accordion:hover a.cross,
.accordion:hover a.previous,
.accordion:hover a.next {
  opacity: 1;
}

#gallery .content a.disabled,
.accordion a.disabled {
  cursor: default;
  opacity: 0.2 !important;
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
  #band {
    margin-top: -324px;
  }
}
@media only screen and (max-width: 1024px) {
  #gallery .content a.previous,
  #gallery .content a.next,
  .accordion a.cross,
  .accordion a.previous,
  .accordion a.next {
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #main {
    left: 0;
  }
  #main,
  #whiteline,
  #limit {
    width: 1000px;
  }
  #whiteline,
  #limit {
    overflow: hidden;
    left: -500px;
  }
  #whiteline {
    left: -501px;
  }
  #content {
    left: 0;
    overflow-x: hidden;
    width: 1000px;
  }
  .background {
    left: -120px;
  }
  #services .background {
    left: -160px;
  }
  #gallery .content,
  #services .content,
  #projects .content {
    left: 120px;
  }
  .accordion a.cross {
    opacity: 1;
  }
  #services .accordion.a {
    background-position: -297px top;
  }
  #services .accordion.b {
    background-position: -323px top;
  }
  #services .accordion.c {
    background-position: -349px top;
  }
  html,
  body {
    width: 1024px;
    height: 668px;
  }
}