@import url('https://fonts.googleapis.com/css?family=Orbitron');
@font-face {
  font-family: 'Acme Gothic Light';
  font-style: normal;
  src: local('Acme Gothic Light'), url('/static/fonts/Acme Gothic Light.otf') format('opentype');
  /* src: url('https://cdn.jamescosmin.com/static/fonts/Acme+Gothic+Light.otf') format('opentype'); */
}
@font-face {
  font-family: 'Acme Gothic Wide Light';
  font-style: normal;
  src: local('Acme Gothic Wide Light'), url('/static/fonts/Acme Gothic Wide Light.otf') format('opentype');
  /* src: url('https://cdn.jamescosmin.com/static/fonts/Acme+Gothic+Wide+Light.otf') format('opentype'); */
}
/* @font-face {
  font-family: 'Acme Gothic Extra Wide Regular';
  font-style: normal;
  src: local('Acme Gothic Extra Wide Regular'), url('/static/fonts/Acme Gothic Extra Wide Regular.otf') format('opentype');
  src: url('https://cdn.jamescosmin.com/static/fonts/Acme+Gothic+Extra+Wide+Regular.otf') format('opentype');
} */
/* darkmode */
:root {
  --background: #161616;
  --text: #ced4e2;
  --oxfordblue: #00224E;
  --oxfordbluergb: rgba(0, 34, 78, 1);
  --midnightblue: #003367;
  --midnightbluelight:#00439b;
  --midnightluergb: rgba(0, 51, 103, 1);
  --strongorange:#D72D23;
  --lightorange:#EA781E;
  --highlight: red;
  --separatorgr: rgba(0, 0, 0, 0);
  --color: #ced4e2;
  --navbar-color: rgba(0, 0, 0, 0.5);
  --bg-color: #EBECF0;
  --jccard-color1: #070709;


  /* neumorphic */
  --light-shadow: #050400;
  --dark-shadow: rgba(0, 34, 78, 0.9);
  --shadow-depth: 5px;
  --nbtn: #333333;
  --nbtntxt: #333333;
  --navbar-link: rgba(255, 255, 255, 0.5);
  --navbar-link-active: rgba(255, 255, 255, 0.8);
  --navbar-hover: rgba(255, 255, 255, 1);
  --navbar-disabled: rgba(255, 255, 255, 0.25);
  --navbar-active: rgba(255, 255, 255, 0.25);
  --navbar-toggler: rgba(255, 255, 255, 0.5);
  --navbar-toggler-border: rgba(255, 255, 255, 0.1);
  --gallery-background:#161616 url('https://cdn.jamescosmin.com/static/images/artworkfloor/jc_wallbw.png') repeat 0px 0px; 
  --gallery-floor: url('https://cdn.jamescosmin.com/static/images/artworkfloor/jc_fb.png') repeat-x 0px 0px; 
  --inthighlight: #FFFEFB;
  --intlightaccent: #D4EEFB;
  --intmidtone: #305774;
  --intdarkacccent: #2E5470;
  --jcplayer: #070709;
  --jcplayeractive: #000;
  --jcplayerlist: #000;
  --jcplayertitle: #fff;
  --jcplayerinner: #242628;
  --jcplayerinnerdark: #000000;
  --jcplayercontrols: #fff;
  --jcplayervolume: #fff;
  --jcplayeraptitle: #999;
  --jcplayeraptitleborder: #1e1e1e;
  --motion-bg: url('https://cdn.jamescosmin.com/static/images/motion/jc_bg.png') repeat-x 0px 0px; 
  --motion-stars: url('https://cdn.jamescosmin.com/static/images/motion/jc_stars.png') repeat-x 0px 0px; 
  --motion-nebula: url('https://cdn.jamescosmin.com/static/images/motion/jc_nebula.png') repeat-x 0px 0px; 
  --motion-clouds: url('https://cdn.jamescosmin.com/static/images/motion/jc_clouds.png') repeat-x 0px 0px; 

}

.light-theme {
  --background: #EBECF0;
  --text: #333333;
  --navbar-color: rgba(235, 236, 240, 0.5);;
  --color: #333333;
  --highlight: red;
  --oxfordblue: #00224E;
  --oxfordbluergb: rgba(0, 34, 78, 1);
  --midnightblue: #003367;
  --midnightbluelight:#00439b;
  --midnightluergb: rgba(0, 51, 103 1);
  --strongorange:#D72D23;
  --lightorange:#EA781E;
  --separatorgr: rgba(255, 255, 255, 0);
  --jccard-color1: #EBECF0;
    /* neumorphic */
  --light-shadow: #FAFBFF;
  --dark-shadow: rgba(0, 34, 78, 0.9);
  --shadow-depth: 5px;
  --nbtn: #EBECF0;
  --nbtntxt: #333333;
  --navbar-link: rgba(0, 0, 0, 0.5);
  --navbar-link-active: rgba(0, 0, 0, 0.8);
  --navbar-hover: rgba(0, 0, 0, 1);
  --navbar-disabled: rgba(0, 0, 0, 0.25);
  --navbar-active: rgba(0, 0, 0, 0.25);
  --navbar-toggler: rgba(0, 0, 0, 0.5);
  --navbar-toggler-border: rgba(0, 0, 0, 0.1);
  --gallery-background:url('https://cdn.jamescosmin.com/static/images/artworkfloor/jc_wallw.png') repeat 0px 0px;
  --gallery-floor: url('https://cdn.jamescosmin.com/static/images/artworkfloor/jc_fa.png') repeat-x 0px 0px; 
  --inthighlight: #FFFEFB;
  --intlightaccent: #D4EEFB;
  --intmidtone: #305774;
  --intdarkacccent: #2E5470;
  --jcplayer: #EBECF0;
  --jcplayeractive: #fff;
  --jcplayerlist: #EEEEEE;
  --jcplayertitle: #000;
  --jcplayerinner: #f6f7f8;
  --jcplayerinnerdark: #EBECF0;
  --jcplayercontrols: #000;
  --jcplayervolume: #000;
  --jcplayeraptitle: #2e2e2e;
  --jcplayeraptitleborder: #f6f7f8;
  --motion-bg: url('https://cdn.jamescosmin.com/static/images/motion/jc_bg.png') repeat-x 0px 0px; 
  --motion-stars: url('https://cdn.jamescosmin.com/static/images/motion/jc_stars.png') repeat-x 0px 0px; 
  --motion-nebula: url('https://cdn.jamescosmin.com/static/images/motion/jc_nebula.png') repeat-x 0px 0px; 
  --motion-clouds: url('https://cdn.jamescosmin.com/static/images/motion/jc_clouds.png') repeat-x 0px 0px; 
  background: var(--background);
  color: var(--text);
}

.theme-switch {
  --background: #fff;
  --text: #000;
  border: 1px solid var(--navbar-disabled);
  width: 40px;
  height: 20px;
  display: block;
  border-radius: 20px;
  position: relative;
}

.theme-switch .switch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  background-color: var(--navbar-link);
  top: 1px;
  left: 21px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 25px var(--midnightblue), 0 0 5px var(--oxfordblue);
  transition: 0.5s all ease;
}

.darkmode {
  padding: .5rem;
}

.theme-switch ::after{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  left: 5px;
  background-color: var(--midnightblue);
  transition: 0.5s all ease;
}

.light-theme .theme-switch {
  background: var(--navbar-disabled);
}
.light-theme .theme-switch .switch {
  background-color: var(--midnightblue);
  left: 2px;
  transform: rotate(-180deg);
}

.navbar .navbar-nav .nav-link {
  color: var(--navbar-link);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover {
  color: var(--navbar-hover);
  letter-spacing: 0.3rem;
}
.navbar .navbar-nav .nav-link.disabled {
  color: var(--navbar-disabled);
}
.navbar .navbar-nav .active > .nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .show > .nav-link {
  color: var(--navbar-active);
}
.navbar .navbar-toggler {
  color: var(--navbar-toggler);
  border-color: var(--navbar-toggler-border);
}
.navbar .navbar-text {
  color: var(--navbar-link);
}
.navbar .navbar-text a {
  color: var(--color);
}
.navbar .navbar-text a:focus,
.navbar .navbar-text a:hover {
  color: var(--color);
}

ul a:before {
  content: "";
  background: var(--midnightblue);
}

ul .active {
  color: var(--midnightblue);
}

.bar-wrapper {
  height: 300px;
  position: relative;
}
.bar {
  position: relative;
  bottom: 0;
  width: 5px;
  display: inline-block;
  border: 1px solid red;
  height: 5px;
  border-bottom: 3px solid #fff;
}

h1{
  font-family: 'Acme Gothic Wide Light';
}

button {
  border: none;
  outline: none;
  background: none;
  letter-spacing: 2px;
}

html {
  -webkit-text-size-adjust: none;
  /* height: -webkit-fill-available; */
}
body {
  font-family: 'Acme Gothic Light';
  color: var(--color);
  background: var(--background);
  transition: 1s background ease;
}
.navbar {
  background-color: var(--navbar-color);
  position: fixed;
  bottom: 0;
  width: 100%;
  transition: 1s background ease;
  z-index: 6;
}

.navbar .nav-link{
  font-size: medium;
}

.navbar .navbar-collapse {
  text-align: center;
}

button, #hamburger
{
  margin: auto;
}

/* Set the border color */ 
  
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 51, 103, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
border-color: var( --strongorange);
border-radius: 25%;
border-top: none;
border-bottom: none;
} 

.asteriskField{
display: none;
}

.alert-debug {
  color: Black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.btn {
  cursor: pointer;

  @media(min-width: 600px) {      
    margin: 0 1em 2em; 
  }
}

.btn:hover { text-decoration: none; }

.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover {
  letter-spacing: 0.5px;
}

.btn-2:active {
  letter-spacing: 0.5px;
  color: var(--navbar-link-active);
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border-bottom: 0.5px solid var(--midnightblue);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  margin-bottom: 1px;
  /* position: relative; */
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: var(--midnightblue) ;
  transition: width 350ms ease-in-out;
  width: 80%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 80%;
}

.jccard {
  position: relative;
  height: auto;
  overflow: hidden;
  margin-bottom: .5rem;
  padding: 2rem;
  color: var(--color);
  background: var(--background);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--jccard-color1)), to(var(--jccard-color2)));
  background: linear-gradient(to bottom, var(--jccard-color1), var(--jccard-color1));
  box-shadow: 0 15px 30px rgba(0,23,46,0.9);
  transition: 1s background ease;
}

.jccardvid a {
  text-decoration: none;
  color: var(--color);
  position: relative;
  cursor: pointer;
}

.jccardvid a:hover {
  text-decoration: none;
  color: var(--navbar-hover);
  letter-spacing: 0.5px;
}

.jccardvid a::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 20%;
  width: 60%;
  height: 1px;
  border-bottom: 1px solid var(--midnightblue);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.jccardvid a:hover::after {
  width: 100%;
  left: 0;
}

.jccardfilters {
  position: relative;
  height: auto;
  margin-bottom: 1rem;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0px;
  padding: 8px;
  color: var(--color);
  background: var(--background);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--jccard-color1)), to(var(--jccard-color2)));
  background: linear-gradient(to bottom, var(--jccard-color1), var(--jccard-color1));
  box-shadow: 0 15px 30px rgba(0,23,46,0.9);
  transition: 1s background ease;
}

.jccardvid {
  position: relative;
  height: auto;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.3rem;
  color: var(--color);
  background: var(--background);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--jccard-color1)), to(var(--jccard-color2)));
  background: linear-gradient(to bottom, var(--jccard-color1), var(--jccard-color1));
  box-shadow: 0 15px 30px rgba(0,23,46,0.9);
  transition: 1s background ease;
}

hr.style-two {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--separatorgr), var(--midnightblue), var(--separatorgr));
}

img {
  max-width:100%
}

iframe {
  max-width:100%
}

@media (min-width: 1200px) and (max-width: 1920px) {
	iframe {
		height: 735px;
	}
}

@media (min-width:600px) and (max-width:1200px) {
	iframe {
		height: 475px;
	}
}

@media (min-width:600px) and (max-width:812px) and (orientation: landscape) {
	iframe {
		height: 475px;
	}
}

@media screen and (max-width:600px) and (orientation: portrait) {
	iframe {
		height: 230px;
	}
}

.site-footer { 
  /* margin-bottom: 3.8rem;*/
  margin-top: 20px;
  text-align: center;
  padding-bottom: 3.8rem;
}

.site-footer a { 
  text-decoration: none;
  color: var(--color);
  position: relative;
  cursor: pointer;
}

.site-footer a:hover {
  text-decoration: none;
  color: var(--navbar-hover);
  letter-spacing: 0.5px;
}

/* sidebar */



@media only screen and (min-width: 1632px){
  .sidebar{
    width: 250px!important;
    display: block;   
  }
  #nav-open-btn{
    display: none!important;
  }
  .closebtn{
    display: none!important;
  }
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  background-color: var(--background);
}

.sidebar ul{
padding-left: 0!important;
}

.sidebar a {
display: block;
transition: 0.3s;
}

.sidebar .closebtn {
position: absolute;
top: 0;
left: 10px;
margin-bottom: 10px;
font-size: 36px;
margin-right: 50px;
}

#nav-open-btn {
font-size: 20px;
cursor: pointer;
background-color: var(--background);
color: var(--color);
border: none;
padding: 10px 15px;
position: fixed;
right: 2px;
top: 2px;
z-index: 1;
box-shadow: 0 5px 10px rgba(0,23,46,0.9);
}

#nav-open-btn:hover {
background-color: #444;
}

#main {
transition: margin-right .5s;
}

@media only screen and (max-width: 1632px){
    #sidebar-container {
      margin-top: 40px !important; 
    }
    .sidebar a {
      font-size: 18px;
  }
}

/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
}

.photogallery {
	margin: 0 auto;
}
/* Flex layout */
.photogallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	transition: all .2s;
}

.photo {
	box-sizing: border-box;
  padding: 5px;
}

/*--------------------------------------------------------------
photography gallery items
--------------------------------------------------------------*/
.photo figure {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.photo figure:hover img{
	opacity: 0.5;
	transform: scale(1.1);
}

.photo *{
  transition: all 0.35s ease-in-out;
}

.photo img {
	display: block;
  width: 100%;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0,  0.3);
}

/*--------------------------------------------------------------
Filter buttons
--------------------------------------------------------------*/

.filters ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.filters li {
    margin: 0 2px 2px 0;
}

.filters a {
    display: block;
    padding: .5em 1em;
    font-size: 80%;
    border: solid 1px hsl(0, 0%, 50%);
    color: #333;
    text-decoration: none;
    background: white;
}

.filters a:hover {
    outline: 2px solid orange;
}

a.checked {
    background: hsl(0, 0%, 50%);
    color: white;
} 

#intro {
	position: relative;
	box-sizing: border-box;
	text-align: center;
	transition: transform 800ms ease-out 300ms;
	overflow: hidden;
	z-index: 1
}

body.top #intro {
	transition: transform 800ms ease-out 300ms
}

#intro.primed {
	-webkit-transform: translate3d(0, 80px, 0);
	-ms-transform: translate3d(0, 80px, 0);
	transform: translate3d(0, 80px, 0)
}

#intro .intro__inner {
	height: 100%
}

#intro .cover-container {
	height: 100%
}

#intro .cover {
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat
}

#intro .cover video {
	display: block;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	object-fit: cover
}

#intro .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .2
}

#intro .content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center
}

#intro .content .inner {
  position: fixed !important;
  bottom: 3.5em;
	left: 1vw;
	right: 1vw
}
/* safari fix */
/* _::-webkit-full-page-media, _:future, :root #intro .content .inner {
  bottom: 10em;
} */
#loader h1,
#intro h1 {
	font-size: 54px;
  font-size: 6vw;
  color: #FFF;
}

#intro h1 strong,
#loader h1 strong {
	display: inline-block!important;
	max-width: 92%
}

#loader h2,
#intro h2 {
	font-size: 27px;
	font-size: 3vw;
	color: #FFF
}

@media screen and (min-width:1200px) {
	#loader h1,
	#intro h1 {
		font-size: 72px
	}
	#loader h2,
	#intro h2 {
		font-size: 36px
	}
}

@media screen and (max-width:600px) {
	#loader h1,
	#intro h1 {
		font-size: 31px
	}
	#loader h2,
	#intro h2 {
		font-size: 18px
  }
}

@media screen and (max-width:600px) and (orientation:portrait) {
	#loader .inner,
	#intro .inner {
		padding-bottom: 10px;
	}
}

#splash {
	height: 100%
}

#splash .splash-container {
	width: 100%;
	height: 100%
}

#splash .splash-container--image {
	background-size: cover;
	background-position: center center
}

#splash .splash-container--video video {
	display: block;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	object-fit: cover
}

#splash .splash-container--slideshow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.caps {
	letter-spacing: .30em
}

@media screen and (orientation:portrait) {
  .caps {
    letter-spacing: .17em
  }
}

.wfs {
	font-weight: normal!important
}

.animate {
	margin: 0;
}

.animate span {
	display: inline-block;
}
.jcintro span {
  background: linear-gradient(to bottom, var(--intlightaccent) 3%,var(--intmidtone) 17%, var(--intlightaccent) 26%, var(--intlightaccent) 27%,var(--inthighlight) 40%,var(--intdarkacccent) 78%); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}

.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}

@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color:  #003367;
	}

	60% {
		color:  #003367;
	}

	80% {
		transform: translate(0) scale(3);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    color: var(--accent);
  }
  70%, 80% {
    color: var(--cardtext);
  }
}
@keyframes flash {
  0%, 50%, 100% {
    color: var(--accent);
  }
  70%, 80% {
    color: var(--cardtext);
  }
}

@media (max-width: 1045px) {
  .nav-item a{
    font-size: 14px !important;
  }
}
.nav-link.active{
    color: var(--navbar-link-active)!important;
    font-weight: 500;
}

#info {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 30%;
}

.arrowright {
  width: 13px;
  transition: transform 0.3s ease;
}

.arrowright.open {
  transform: rotate(180deg);
  color: var(--strongorange);
}

@media only screen and (max-width: 768px) {
    .arrowright {
    transform: rotate(90deg);
  }
  .arrowright.open {
    transform: rotate(-90deg);
    color: var(--strongorange);
  }
}

.la-info-circle {
  transition: transform 3.3s ease;
  color: #ced4e2;
}

.la-times-circle {
  color: var(--strongorange);
}

.social {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-box;

}

@media screen and (max-width: 750px) {
  .social {
    padding-bottom: 3rem;
  }
  .social li {
    padding: 0 .8rem;
  }
  #motion-secondary {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* base */
    html {
        -webkit-overflow-scrolling: touch;
        /* -webkit-text-size-adjust: none; */
      }
  
      @keyframes moveInLeft {
      0% {
          opacity: 0;
          transform: translateX(-150px);
      }
      100% {
          opacity: 1;
          transform: translate(0);
      }
  }

      @keyframes moveInDown {
        0% {
            opacity: 0;
            transform: translateY(150px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
  
      @keyframes moveInRight {
          0% {
              opacity: 0;
              transform: translateX(150px);
          }
          100% {
              opacity: 1;
              transform: translateY(0);
          }
      }
  
      .nav-toggle.child {
        width: 13px;
        display: none;
        opacity: 0;
      } 
  
      .nav-toggle.child.open {
        display: inline-table;
        opacity: 1;
        animation-name: moveInRight;
        animation-duration: .1s;   
      }

      .nav-toggle.child.closed {
      animation-name: moveInLeft;
      animation-duration: 1s;
      }   
      
      @media screen and (max-width:767px){
        .nav-toggle.child.open {
          display: inline-table;
          opacity: 1;
          animation-name: moveInDown;
          animation-duration: .1s;   
        }
        .nav-toggle.child.closed {
          animation-name: moveInDown;
          animation-duration: 1s;
          }    
      }  

    .zoom-fade-enter-active:not(.zoom-fade-enter){
      cursor: pointer;
    }
      #info {
          position: absolute;
          top: 40%;
          left: 0;
          width: 100%;
      }
  
      #info>.inner {
          padding-bottom: 60px
      }
  
      #info h2 {
          margin: 0 0 2ex;
          font-size: 36px;
          font-size: 3vw;
          text-align: center
      }
  
      .bio {
          position: absolute;
          margin: 0 auto;
          font-size: 24px;
          font-size: 2vw;
          line-height: 1.6;
          text-align: left;
          color: #ced4e2;
      }
  
      .bio .jc-bio-section{
        text-align: justify;
        width: 64%;
        margin: 0 auto;
      }
  
      #info-toggle {
          display: block;
          position: absolute;
          top: 24px;
          right: 24px;
          width: 42px;
          height: 42px;
      }
  
      #info-toggle>a {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          line-height: 1;
          transition: .75s ease;
      }
  
      #info-toggle i {
          font-size: 34px
      }

  @media screen and (max-width: 750px) {
      #info h2 {
          font-size:23px
      }
      .bio .jc-bio-section{
          width: 88%;
          font-size: 15px
      }
  }
  
  @media screen and (min-width: 1200px) {
      #info h2 {
          font-size:36px
      }
      .bio .jc-bio-section{
          font-size: 24px
      }
  }
  
  #info>.inner {
      padding-bottom: 60px;
  }
  
  .zoom-fade-enter-active {
      transition: transform 300ms,opacity 300ms
  }
  
  .zoom-fade-leave-active {
      transition: transform 300ms,opacity 300ms
  }
  
  .zoom-fade-enter,.zoom-fade-leave-to {
      transform: scale(0.9);
      opacity: 0
  }
  
  .zoom-fade-enter-to {
      transform: scale(1.0);
      opacity: 1
  }

/* Headshots */


.hgallery {
	max-width: 1480px;
	min-width: 25vh;
	padding: 0 0 2.5vw;
	margin: 0 auto;
	transition: opacity 300ms;
  }

.hgallery a {
  cursor: crosshair;
  } 
  
.hgallery .title {
	padding: 100px 0 36px;
	margin-left: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
}  

.hgallery .item {
	display: flex;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}

.hgallery .item:nth-child(odd) {
	flex-direction: row-reverse;
}

.hgallery .item img{
	opacity: 0;
	box-shadow: 1px 3px 3px rgba(0,0,0,0.2);
}

.hgallery .item .primary {
	width: 68%;
	margin: 0 10px;
}

.hgallery .item .primary.full{
	width: calc(100vw - 10px);
}

.hgallery .item .primary img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hgallery .item .thumbnail {
	display: flex;
  	flex-direction: column;
	width: 32%;
	margin: 0 10px;
}

.hgallery .item .thumbnail div{
	align-self: center;
	position: relative;
	width: calc(100% - 0px);
	height: 100%;
	overflow: hidden;
	padding-top: 20px
}

.hgallery .item .thumbnail div:nth-child(1){
	padding-top: 0px !important;
}


.hgallery .item .thumbnail div:nth-child(1) img{
	height: 100%;
}
.hgallery .item .thumbnail div img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: calc(100% - 0px);
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }
    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

@media screen and (max-width:600px) and (orientation:portrait) {
	.hgallery {
		margin-bottom: 1.6rem;
	}
	.hgallery h1 {
  font-size: 2.1rem;
  }
}

.primary:hover {
  filter: grayscale() contrast(1.1) brightness(0.9);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.thumb-sub:hover {
  filter: grayscale() contrast(1.1) brightness(0.9);
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.partialBorder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.partialBorder {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.partialBorder > div {
  position: absolute !important;
  height: 10% !important;
  width: 10% !important;
  border: 0.15vw solid #fff;
}

.partialBorder .leftTop {
  left: 0;
  top: 0;
  border-right: none;
  border-bottom: none;
}

.partialBorder .rightTop {
  right: 0;
  top: 0;
  border-left: none;
  border-bottom: none;
}

.partialBorder .leftBot {
  left: 0;
  bottom: 0;
  border-right: none;
  border-top: none;
}

.partialBorder .rightBot {
  right: 0;
  bottom: 0;
  border-left: none;
  border-top: none;
}

.primary:hover .partialBorder {
  opacity: 1;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}

.thumb-sub:hover .partialBorder {
  opacity: 1;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.primary .prim {
    align-self: center;
    position: relative;
}

/* Motion */

/* nebula */
.jcn{
	position: absolute;;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.jcn-bg{
  background: var(--motion-bg); 	   
	z-index: 1;
}

.jcn-star{
	background: var(--motion-stars); 
	z-index: 2;
	animation:200s scroll infinite linear;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.jcn-neb{
	background: var(--motion-nebula);
	z-index: 3;
	animation:200s scroll2 infinite linear;
}
.jcn-cloud{
	background: var(--motion-clouds);
	z-index: 3;
	animation:400s scroll infinite linear;
}

@-webkit-keyframes scroll{
	100%{
		background-position:-3000px 0px;
	}
}
@-moz-keyframes scroll{
	100%{
		background-position:-3000px 0px;
	}
}
@-o-keyframes scroll{
	100%{
		background-position:-3000px 0px;
	}
}
@-ms-keyframes scroll{
	100%{
		background-position:-3000px 0px;
	}
}
@keyframes scroll{
	100%{
		background-position:-3000px 0px;
	}
}

@-webkit-keyframes scroll2{
	100%{
		background-position:-3000px 0px;
	}
}
@-moz-keyframes scroll2{
	100%{
		background-position:-3000px 0px;
	}
}
@-o-keyframes scroll2{
	100%{
		background-position:-3000px 0px;
	}
}
@-ms-keyframes scroll2{
	100%{
		background-position:-3000px 0px;
	}
}
@keyframes scroll2{
	100%{
		background-position:3000px 0px;
	}
}

.jc-neulink {
	text-decoration: none;
	color: #ced4e2;
	position: relative;
	cursor: pointer;
  }
  
.jc-neulink:hover {
	text-decoration: none;
	color: #ced4e2;
	letter-spacing: 0.5px;
}

.jc-neulink::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 20%;
	width: 60%;
	height: 1px;
	border-bottom: 1px solid var(--midnightblue);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.jc-neulink:hover::after {
	width: 100%;
	left: 0;
}

/* motion container */

.jcvidpost {
	display: block; 
	cursor: pointer;
	box-shadow: 0 15px 30px rgba(0,23,46,0.9);
	transition: 0.3s;
  }

  .jcvidpost:hover {
	box-shadow: 0 15px 30px rgba(0,23,46,1);
  }

  .jcvidpost:hover .jcimgcard {
	filter: contrast(100%);
  }

  .jcvidcontainer {
	background: rgba(0,0,0,0.7);
	height: 100%; 
	width: 100%; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 1;
  }

  .jcimgcard {
	height: 100%;
	width: 100%;
	object-fit: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: contrast(70%);
	overflow: hidden;
	position: relative;
	transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  }

  .jcvidcard {
	position: absolute; 
	bottom: 2rem; 
	left: auto; 
	width: 100%; 
	z-index: 2;
	text-align: center;
  }



  .jcvidbox {
	position: relative; 
	height: 300px; 
	width: 100%;
  }

  .jcmplay {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    }

  @media screen and (max-width:750px){
    .jcvidbox {
      height: 200px; 
  }
    .jcmplay {
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .jc-neulink {
      font-size: 18px;
    }
}  

/* playanimation */

.circle {
	stroke: white;
	stroke-dasharray: 650;
	stroke-dashoffset: 650;
	-webkit-transition: all 0.5s ease-in-out;
	opacity: 0.3;
}

.playBut {
	-webkit-transition: all 0.5s ease;
  }



.playBut .triangle {
	-webkit-transition: all 0.7s ease-in-out;
	stroke-dasharray: 240;
	stroke-dashoffset: 480;
	stroke: #ced4e2;
	transform: translateY(0);
  }

.playBut:hover .triangle {
	stroke-dashoffset: 0;
	opacity: 1;
	stroke: var(--midnightblue);
	animation: nudge 0.7s ease-in-out;
  }
  @keyframes nudge {
	0% {
	  transform: translateX(0);
	}
	30% {
	  transform: translateX(-5px);
	}
	50% {
	  transform: translateX(5px);
	}
	70% {
	  transform: translateX(-2px);
	}
	100% {
	  transform: translateX(0);
	}
  }

.playBut:hover .circle {
	stroke-dashoffset: 0;
	opacity: 1;
  }    

/* GRID */

.jcwrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

.jcgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  flex: 1 1 auto;
  counter-reset: grid;
  margin-top: 1rem;
}

.jcgrid .jcvideo .jcvidcontainer::after {
  counter-increment: grid; 
  content: counter(grid);
  color: var(--strongorange);
  position: absolute;
  left: 50%;
  bottom: 3%;
}
.jcgrid .jcvideo:last-child:nth-child(2n-1) {
  grid-column: span 1;
  object-position: 50% 10%;
}

.jcgrid .jcvideo img:last-child:nth-child(2n-1) {
  object-position: 50% 10%;
}

.jcgrid .jcvideo:last-child:nth-child(2n-1) {
  grid-column: span 2;
}

.jcgrid .jcvideo_d .jcvidcontainer::after {
  counter-increment: grid; 
  content: counter(grid);
  color: var(--strongorange);
  position: absolute;
  left: 50%;
  bottom: 3%;
}
.jcgrid .jcvideo_d:last-child:nth-child(2n-1) {
  grid-column: span 1;
  object-position: 50% 10%;
}

.jcgrid .jcvideo_d img:last-child:nth-child(2n-1) {
  object-position: 50% 10%;
}

.jcgrid .jcvideo_d:last-child:nth-child(2n-2) {
  grid-column: span 2;
}


/* Photography */

.input-title {
    clear: both;
    padding: 22px 0px 0px 0px;
    font-size: 16px;
    color: rgba(255,255,255,.6);
    font-weight: 300;
}

#detail {
  color: #999;
  float: right;
  padding-top: 0.8em;
  padding-right: 1.5em;
} 

.exif_icon {
  filter: brightness(70%);
  width: 1em;
  vertical-align: sub;
  padding: 0 0.2em 0 0.5em;
}

@media screen and (min-width: 20em) {
    .photo {
        width: 33.3%;    
  }
    .photo-big {
        width: 66.6%; 
  }
    .photo-bigger {
        width: 100%;
	}
}

@media screen and (min-width: 40em) {
	.photo {
   width: 25%;    
  } 
  .photo-big {
    width: 50%;
    
  }
  .photo-bigger {
    width: 50%;
	}
}

@media screen and (min-width: 60em) {
	.photo {
    width: 25%;
	}
	.photo-big {
    width: 50%;    
  }
  .photo-bigger {
    width: 75%; 
	}
}

@media screen and (min-width: 80em) {
	.photo {
		width: 12.5%;
	}
	.photo-big {
    width: 25%;
  } 
  .photo-bigger {
    width: 37.5%; 
	}
}

.cos-section{
    width: calc(100% - 30px)!important;
    right: 15px;
    left: 15px;
  }

@media only screen and (max-width: 576px) {
  .p-descript {
      display: none!important;   
  }
  .cos-section{
    width: calc(100% - 30px)!important;
    right: 15px;
    left: 15px;
  }

  .cos-toggle {
    display: flex!important;
    height: 40px!important;
  }
}

.cos-section{
  width: 90%;
  position: inherit;
}

/* Music */

#canvas {
    width: 100%;
    height:200px;
    margin-bottom: -0.66rem;
    transition:.3s ease-in-out;
    }
  
  #background {
    width: 100%;
    height: 200px;
    background: linear-gradient(transparent,#00035f,transparent);
    background-size: 100% 7px;
    animation: bg 1s infinite linear;
    z-index: 2;
    opacity: 0.3;
  }
  
  @keyframes bg {
    0%{ 
      background-position: 0 0;
     }
    100%{ 
      background-position: 8px 8px; 
    }
  }
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  
  .hide {
    display: none !important;
  }
  
  .mbutton {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
  }
  .mbutton:focus {
      outline: none;
  }
  /*------------------------
      Audio Player - AP
  ------------------------*/
  /* Player and control panel */
  .ap {    
    margin: auto;  
    font-size: 14px;    
    color: var(--jcplayeraptitle);
  }
  .ap-inner {
    margin: 0 auto;
    /* background: #242628; */
    background: var(--jcplayerinner);
    background: -moz-linear-gradient(top, var(--jcplayerinner) 0%, var(--jcplayerinnerdark) 100%);
    background: -webkit-linear-gradient(top, var(--jcplayerinner) 0%, var(--jcplayerinnerdark) 100%);
    background: linear-gradient(to bottom, var(--jcplayerinner) 0%, var(--jcplayerinnerdark) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=var(--jcplayerinner), endColorstr=var(--jcplayerinnerdark), GradientType=0);
    position: relative;
    box-shadow: 0 15px 30px rgba(0,23,46,0.9);
  }
  .ap-panel {
      display: block;
      width: 100%;
      text-align: center;
  }
  .ap-item {
    display: block;
  }
  .ap--playback{}
  .ap--settings{position: absolute;top:43px;right: 0;}
  .ap--track {
    flex: 1 40%;
    padding: 0 20px;
  }
  
  /* Info section */
  .ap-info {
    width: 100%;
    position: relative;
    align-self: flex-start;
    padding: 5px 0 0;
  }
  .ap-title {
    text-align: center;
    margin: 4px auto;
    width: 300px;
    height: 38px;
    border: 1px solid #1e1e1e;
    background: var(--jcplayeractive);
    border-radius: 4px;
    padding: 6px;
  }
  .ap-time {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    /* color: #eee; */
    color: var(--midnightblue);
    font-weight: bold;
    width: 100px;
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
  }
  .ap-progress-container {
    padding: 5px 0 10px;
    cursor: pointer;
  }
  .ap-progress {
    position: relative;
    height: 5px;
    border-radius: 5px;
    background: rgba(0,0,0,.2);
  }
  .ap-preload-bar,
  .ap-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 5px 0 0 5px;
    background: rgba(0,0,0,.3);
    z-index: 999;
  }
  .ap-bar {
    background: linear-gradient(to right, var(--midnightbluelight) 0%,  var(--oxfordblue) 100%);
    z-index: 9999;
  }
  .ap-bar:after {
    position: absolute;
    top: 0;
    right: -5px;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    content: '';
    border-radius: 6px;
    background: linear-gradient(135deg ,var(--strongorange), var(--lightorange));
    opacity: 0;
    transition: opacity .3s ease;
  }
  .ap-progress-container:hover .ap-bar:after {
    opacity: 1;
  }
  
  /* Buttons */
  .ap-controls {
    position: relative;
    z-index: 1000;
    display: block;
    height: 50px;
    cursor: pointer;
    transition: background .2s ease;
    text-align: center;
    /* color: #fff; */
    color: var(--jcplayercontrols);
    border: 0;
    outline: 0;
    background: none;
  }
  .ap-controls svg {
    fill: #fff;
  }
  .ap-controls:hover svg {
    fill: #eee;
  }
  .ap-controls:active {
    background: rgba(0,0,0,.1);
  }
  .ap--playback > .ap-controls,
  .ap--settings > .ap-controls {
    display: inline-block;
    font-size: 26px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
  }
  .ap--pause,
  .playing > .ap--play {
    display: none;
  }
  .playing > .ap--pause {
    display: inline;
  }
  .ap-volume-container {
    z-index: 9999;
  }
  .ap-volume {
    position: absolute;  
    bottom: -86px;
    width: 100%;
    height: 0;
    z-index: 9999;
    visibility: hidden;
  }
  .ap-volume-btn {
    display: block;
    text-align: center;
    width: 100%;
    /* color: #fff; */
    color: var(--jcplayervolume);
  
  }
  .ap-volume-btn > .ap--volume-off,
  .muted > .ap--volume-on {
    display: none;
  }
  .muted > .ap--volume-off {
    display: inline;
  }
  .ap-volume-container:hover {
    background: transparent;
  }
  .ap-volume-container:hover .ap-volume {
    height: 100px;
    visibility: visible;
  }
  .ap-volume-progress {
    display: block;
    width: 20px;
    height: 100px;
    margin: 10px auto;
    background: #333333;
    position: relative;  
  }
  .ap-volume-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg ,var(--strongorange), var(--lightorange));
  }
  
  .ap-active {
    background: rgba(0,0,0,.15);
    opacity: 1;
  }
  
  @keyframes blink {
    from { opacity: 0; }
    50% { opacity: 1; }
    to { opacity: 0; }
  }
  .playing > .ap--pause {
    animation: blink 3.5s linear infinite;
  }
  /* --------------------------- */
  
  @media(max-width:880px) {
    .ap-item > .ap-controls {
      flex: 1;
    }
  }
  @media(max-width:550px) {
    .ap {
      min-width: 250px;
    }
    .ap, .ap-panel {
      height: auto;
    }
    .ap-panel {
      flex-wrap: wrap;
    }
    .ap--track {
      /* margin-bottom: 10px; */
      padding: 0 20px;
      order: 1;
      flex: 1 1 100%;
    }
    .ap--playback,
    .ap--settings {
      flex: 1 1 50%;
      order: 2;
    }
  }
  /*--------------------
    PlayList
  --------------------*/
  .pl-container {
    margin: auto;
    overflow: auto;
    /* background: #000; */
    background: var(--jcplayer);
    /* z-index: 999; */
    position: relative;  
    box-shadow: 0 15px 30px rgba(0,23,46,0.9);
  }
  .pl-lead {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: #333;
  }
  .pl-list {
    width: 100%;
    /*max-width: 550px;*/
    margin: 0 auto;
    padding: 30px 10px;
  }
  .pl-list > li {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
  }
  .pl-number,
  .pl-title,
  .pl-remove {
    margin: 0 5px;
    padding: 10px 0;
  }
  .pl-number {  
    text-align: center;
  }
  .pl-playing {
    display: none;
  }
  .pl-current{
    /* background: #000000 !important; */
    background: var(--jcplayeractive) !important;
    border: 1px solid #00224E;
    box-shadow: 0 0 10px #00224E;
    border-radius: 10px;
  }
  ul.pl-list li:hover {
    background: rgba(0,23,46,0.5);
    border-radius: 10px;
  }
  .pl-current .pl-count {
    display: none;
  }
  .pl-current .pl-playing {
    display: block;
  }
  .pl-current .pl-title {
      font-weight: bold;
  }
  .pl-title {  
    cursor: pointer;
    text-align: left;  
    /* color: #eeeeee; */
    color: var(--jcplayertitle);
    padding: 6px 12px;
    width: 85%;
    letter-spacing: 0.5px;
  }
  
  .pl-remove {
    margin-right: 0;
    cursor: pointer;
    text-align: center;
    flex: 0 50px;
    display: none;
  }
  .pl-remove:hover {
    background: #ddd;
  }
  .pl-list > li:hover .pl-remove {
    opacity: 1;
  }
  
  .pl-list svg {
    fill: rgba(0, 51, 103, 1);
    margin-left: 10px;
  }
  
  .pl-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    letter-spacing: 2px;
    color: #ccc;
  }
  
  @keyframes eq {
    0% { height: 3px; }
    50% { height: 20px; }
    100% { height: 3px; }
  }
  .eq {
    display: flex;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-end;
    margin-left: 10px;
  }
  .eq-bar {
    width: 4px;
    background: linear-gradient(135deg ,#D72D23, #EA781E);
  }
  .eq-bar:nth-child(1) {
    animation: eq .8s ease-in-out infinite 0s;
  }
  .eq-bar:nth-child(2) {
    animation: eq .8s ease-in-out infinite .2s;
  }
  .eq-bar:nth-child(3) {
    animation: eq .8s ease-in-out infinite .4s;
  }

  /* Neumorphic */


  .neubutton {
    color: var(--text);
    font-size: 13px;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    background-color: var(--nbtn);
    background-image: -webkit-gradient(linear, left top, right bottom, from(black), var(--background));
    background-image: linear-gradient(to bottom right, black, var(--background));
    background-blend-mode: soft-light;
    border-radius: calc(18px*1.4);
    padding: 10px 15px;
    box-shadow: calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*2) 0 var(--light-shadow), var(--shadow-depth) var(--shadow-depth) calc(var(--shadow-depth)*2) 0 var(--dark-shadow);
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    margin-bottom: 5px;
  }
  
  .neubutton:hover{
    color: #DBD7E0;
    transform: translateY(3px);
    box-shadow: calc(var
    (--shadow-depth)*-1) calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*2) 0 var(--light-shadow), var(--shadow-depth) var(--shadow-depth) calc(var(--shadow-depth)*2) 0 var(--dark-shadow);
  }
  
  .neubutton.activated {
    color: var(--midnightblue);
    transform: translateY(3px);
    text-shadow: 1px 1px 0 #FFF;
    box-shadow: -2px -1px 1px 
    rgba(0, 0, 0, 0.15), inset -1px 1px 0
    var(--light-shadow), 1px 1px 2px
    rgba(234,120,30, 0.6);
  }
  
  .arrow {
    width: 13px;
    transition: transform 0.3s ease;
  }
  
  .arrow.open {
    transform: rotate(180deg);
  }
  
  .neubutton p {
    display: inline;
    margin-right: 10px;
    margin-left: 10px;
  }

  .neulink a {
    text-decoration: none;
    color: var(--color);
    position: relative;
    cursor: pointer;
  }
  
  .neulink a:hover {
    text-decoration: none;
    color: var(--navbar-hover);
  }
  
  .neulink a::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 20%;
    width: 60%;
    height: 1px;
    border-bottom: 1px solid var(--midnightblue);
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .neulink a:hover::after {
    width: 100%;
    left: 0;
  }
  
  
  .neulinkside a { 
    text-decoration: none;
    color: var(--color);
    position: relative;
    cursor: pointer;
  }
  
  .neulinkside a:hover {
    text-decoration: none;
    color: var(--navbar-hover);
    letter-spacing: 0.5px;
  }

  .neubuttonbasic {
    color: var(--text);
    font-size: 13px;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    background-color: var(--nbtn);
    background-image: -webkit-gradient(linear, left top, right bottom, from(black), var(--background));
    background-image: linear-gradient(to bottom right, black, var(--background));
    background-blend-mode: soft-light;
    border-radius: calc(18px*1.4);  
    padding: 10px 15px;
    box-shadow: calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*2) 0 var(--light-shadow), var(--shadow-depth) var(--shadow-depth) calc(var(--shadow-depth)*2) 0 var(--dark-shadow);
    display: inline-table;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    margin-bottom: 5px;

  }
  
  .neubuttonbasic a {
    text-decoration: none;
    color: var(--midnightblue);
  }
  
  .neubuttonbasic a:hover {
    letter-spacing: 2.5px;
    text-decoration: none;
  }
  
  .neubuttonbasic button {
    text-decoration: none;
    color: var(--text);
  }
  
  .neubuttonbasic button:hover {
    text-shadow: 0px 0px 0 #FFF;
  }
  
  .neubuttonbasic:hover {
    color: #DBD7E0;;
    transform: translateY(3px);
    text-decoration: none;
    /* text-shadow: 0px 0px 0 #FFF; */
    box-shadow: calc(var
    (--shadow-depth)*-1) calc(var(--shadow-depth)*-1) calc(var(--shadow-depth)*2) 0 var(--light-shadow), var(--shadow-depth) var(--shadow-depth) calc(var(--shadow-depth)*2) 0 var(--dark-shadow);
  }
  
  .neubuttonbasic:active{
    color: var(--midnightblue);
    transform: translateY(3px);
    text-shadow: 1px 1px 0 #FFF;
    box-shadow: -2px -1px 1px 
    rgba(0, 0, 0, 0.15), inset -1px 1px 0
    var(--light-shadow), 1px 1px 2px
    rgba(234,120,30, 0.6);
  }  
  
  .neudropdown {
    background-color: #0b275a;
    background-image: radial-gradient(ellipse at center, #0b275a 0%, #05132d 100%);
    opacity: 0;
    width: 500px;
    overflow: hidden;
    border-radius: 1rem;
    -webkit-animation: 1s -.3s 1 paused opacify;
            animation: 1s -.3s 1 paused opacify;
    -webkit-backdrop-filter: blur(1.5rem);
            backdrop-filter: blur(1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
              -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07), 
              0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12), 
              0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12), 
              inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05), 
              inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05);
    position: absolute;
    z-index: 1;
  }
  
  /* fix */
  .neudropdown.open .container{
      display:inline-block!important;
  }
  .neudropdown .container{
      display: none;
  }
  
  @-webkit-keyframes opacify {
    to {
      background: transparent;
    }
  }
  
  @-moz-keyframes opacify {
    to {
      background: transparent;
    }
  }
  
  @keyframes opacify {
    to {
      background: transparent;
    }
  }
  
  .neu {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: .5rem;
  }
  
  .neudropdown.open {
    transform: scale(1);
    opacity: 1;
    box-shadow: 3px 3px 30px rgba(0, 23, 46, 0.15);
    box-shadow: 3px 3px 30px #00224E;
  }
  
  .neudropdown input[type=checkbox] + label {
    position: relative;
    color: white;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
    overflow: hidden;
  }
  
  .neudropdown input[type=radio] + label {
    position: relative;
    color: white;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
    overflow: hidden;
  }
  
  .neudropdown input[type=checkbox].clicked {
    padding-left: 35px;
    color: #003367;
  }
  
  .neudropdown input[type=checkbox]:hover {
    color: #003367;
  }
  
  .arrow {
    color: #003367;
  }
  
  .expl {
    padding: 10px;
  }
  
  .wrap{
    margin: 8px 0;
  }


@media only screen and (max-width: 768px) {
    .neubutton p{
      margin-left: 5px!important;
      margin-right: 5px!important;
    }
    .neubutton{
      font-size: 10px!important;
    }
    .neubutton .arrow{
      width: 0!important;
    }
}

  input[type=checkbox]{
    float: left!important;
    margin-top: 2px;
    margin-right: 10px;
  }
  
  .cos-option-tab{
    margin: 0px 5px;
  }
  
  .cos-option{
    display: flex!important;
    
  }
  
  /* custom checkboxes */
  .neo {
    margin-top: -2px;
    box-sizing: border-box;
    border: 1px solid var(--background);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navbar-color), var(--background));
    box-shadow: -4px -4px 15px rgba(255, 255, 255, 0.1), 4px 4px 15px rgba(0, 0, 0, 0.5), inset 0px 0px 8px rgba(255, 255, 255, 0.04);
    font-weight: bold;
  }
  
  .neo-checkbox {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 5px;
  }
  
  .neo-checkbox:hover {
    background: linear-gradient(135deg ,var(--oxfordblue), var(--midnightblue));

  }
  
  .neo-checkbox:checked {
    background: linear-gradient(135deg ,var(--oxfordblue), var(--midnightblue));
    border: 1px solid var(--background);
    box-shadow: 0 0 3px var(--midnightblue), 0 0 3px var(--oxfordblue);
  }
  
  .neo-checkbox:checked:after {
    content: '✓';
    position: absolute;
    padding-left: 3px;
    line-height: initial;
    font-size: 15px;
    color: #fff;
    transition: all .2s;
  }
  
  .neo-checkboxo {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 5px;
  }
  
  .neo-checkboxo:hover {
    /* background: linear-gradient(-45deg, var(--navbar-color), var(--background)); */
    background: linear-gradient(-45deg, var(--strongorange), var(--lightorange));
  }
  
  .neo-checkboxo:checked {
    background: linear-gradient(135deg ,var(--strongorange), var(--lightorange));
    border: 1px solid var(--background);
    box-shadow: 0 0 3px var(--strongorange), 0 0 3px var(--lightorange);
  }
  
  .neo-checkboxo:checked:after {
    content: '✓';
    position: absolute;
    padding-left: 3px;
    line-height: initial;
    font-size: 15px;
    color: #fff;
    transition: all .2s;
  }
  
  .neo-radio {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
  }
  
  .neo-radio:hover {
    /* background: linear-gradient(-45deg, var(--navbar-color), var(--background)); */
    background: linear-gradient(135deg, var(--oxfordblue), var(--midnightblue));
    box-shadow: -4px -4px 15px rgba(255, 255, 255, 0.1), 4px 4px 15px rgba(0, 0, 0, 0.5), inset 0px 0px 8px rgba(255, 255, 255, 0.00);
  }
  
  .neo-radio:checked {
    background: linear-gradient(135deg, var(--oxfordblue), var(--midnightblue));
    border: 1px solid var(--background); 
    box-shadow:  0 0px var(--midnightblue), 0 0 0px var(--oxfordblue);
  }
  
  .neo-radio:checked:after {
    content: '✓';
    position: absolute;
    padding-left: 4.5px;
    line-height: initial;
    font-size: 12px;
    color: #fff;
    transition: all .2s;
    padding-top: 2px;
  }
  
  .neo-radioor {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
  }
  
  .neo-radioor:hover {
    background: linear-gradient(-45deg, var(--strongorange), var(--lightorange));
    box-shadow: -4px -4px 15px rgba(255, 255, 255, 0.1), 4px 4px 15px rgba(0, 0, 0, 0.5), inset 0px 0px 8px rgba(255, 255, 255, 0.00);
  }
  
  .neo-radioor:checked {
    background: linear-gradient(135deg, var(--strongorange), var(--lightorange));
    border: 1px solid var(--background);
    box-shadow:  0 0px var(--strongorange), 0 0 0x var(--lightorange);

  }
  
  .neo-radioor:checked:after {
    content: '✓';
    position: absolute;
    padding-left: 3.5px;
    line-height: initial;
    font-size: 15px;
    color: #fff;
    transition: all .2s;
  }


  .inputgroup {
    display: relative;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: space-evenly;
  }
  
  .inputgroup #textfield {
    width: 100%;
  }
  
  .inputgroup input[type="text"] {
    height: 48px;
    width: 100%;
    border-radius: 48px;
    background: linear-gradient(270deg, #ebecf0, #e6e7ec);
    border: 0 none;
    text-shadow: 1px 1px 0 #FFF;
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2), inset -3px -3px 6px rgba(255,255,255,0.9);
    outline: none;
    padding-left: 20px;
    color: #61677C;
    font-size: 18px;
  }
  
  input[type="text"]::placeholder {
    color: #8a92a5;
  }
  
  .inputgroup input[type="text"]::selection {
    background: var(--midnightblue);
    color: #61677C;
  }
  
  @media screen and (max-width: 375px) {

    .inputgroup {
      padding-top: 0;
    }
    
    .inputgroup textarea[name="message"] {
      /* height: 11em; */
      height: 284px;
    }

  }
  
  .inputgroup textarea[name="message"] {
    width: 100%;
    /* height: 13em; */
    border-radius: 15px;
    background: linear-gradient(270deg, #ebecf0, #e6e7ec);
    border: 0 none;
    text-shadow: 1px 1px 0 #FFF;
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2), inset -3px -3px 6px rgba(255,255,255,0.9);
    outline: none;
    padding-left: 20px;
    padding-top: 10px;
    color: #61677C;
    font-size: 18px;
    resize: none;
    /*  */
  }
  
  textarea[name="message"]::placeholder {
    color: #8a92a5;
  }
  
  .inputgroup textarea[name="message"]::selection {
    background: var(--midnightblue);
    color: #61677C;
  }
  
  .searchwrapper {
    width: 300px;
    height: 48px;
    position: relative;
  }
  .searchwrapper input {
    padding-left: 48px !important;
  }
  .searchwrapper input::focus {
    background: linear-gradient(135deg, #ebecf0, #ebecf0);
  }
  
  .searchwrapper input::placeholder {
    letter-spacing: normal;
    transform-origin: center left;
    transition: all 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  .searchwrapper input:focus::placeholder {
    letter-spacing: 60px;
    transform: translateX(300px) scale(2);
    -ms-transform: translateX(300px) scale(2);
    -moz-transform: translateX(400px) scale(4);
    -webkit-transform: translateX(300px) scale(2);
  }
  .searchwrapper i {
    display: block;
    height: 24px;
    width: 24px;
    position: absolute;
    top: 16px;
    left: 16px;
    color: var(--midnightblue);
  }  


#clock {
  display: initial;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: var(--text);
  /* text-shadow: 0 0 20px var(--midnightblue), 0 0 20px rgba(10, 175, 230, 0); */
}

#clock .time {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.5em;
  font-size: 22px;
  text-align: center;
  margin: 0;
  color: var(--midnightblue);
  /* margin-bottom: 3.8rem; */
}

#clock .date {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.6em;
  font-size: 12px;
  text-align: center;
  margin: 0;
  padding-top: 5px;
  color: var(--midnightblue);
}

#clock .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  margin: 0;
  text-align: center;
  /* padding: 20px 0 0; */
}


progress {
  width: 400px;
  height: 20px;
}

#year-percentage {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.2em;
  font-size: 14px;
  text-align: center;
  color: var(--strongorange);
  margin-bottom: 7px;
}

#curdate {
  padding-left: 30px !important;
}

/* Styling an indeterminate progress bar */

progress:not(value) {

}

progress[value] {
	appearance: none;
	border: none;
  width: 17%; height: 8px;
  background-color: #ebecf0;
  border-radius: 10px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
  color: var(--lightorange);
	position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


progress[value]::-webkit-progress-bar {
  background-color: #ebecf0;
  border-radius: 50px;
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2), inset -3px -3px 6px rgba(255,255,255,0.9);
}

progress[value]::-webkit-progress-value {
	position: relative;
	border-radius: 3px;
	
}


progress[value]::-webkit-progress-value:after {
	content: '';
	position: absolute;
	
	width:5px; height:5px;
	top:7px; right:7px;
	
	background-color: var(--lightorange);
	border-radius: 100%;
}


progress[value]::-moz-progress-bar {
	background-image:
     -moz-linear-gradient( left, var(--lightorange), var(--strongorange));
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius: 3px;
}

/* Fallback technique styles */
.progress-bar {
	background-color: #ebecf0;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
	width: 100%; height:20px;
}

.progress-bar span {
	background-color: var(--lightorange);
	border-radius: 3px;
	
	display: block;
	text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}


p[data-value]:after {
	content: attr(data-value) '%';
	position: absolute; right:0;
}


.yrperc::-webkit-progress-value  {
  background-image:
     -webkit-linear-gradient( left, var(--lightorange), var(--strongorange))
     ;
}

.yrperc::-moz-progress-bar {
	background-image:
     -moz-linear-gradient( left, var(--lightorange), var(--strongorange));
}
   
  
  /* For Ripple Effect */


  .ripple-sonar.ripple-white{
    border: 2.5px solid #FFFFFF;
  }

.ripple-sonar.ripple-red{
    border: 2.5px solid var(--strongorange);
  }  

.ripple-white {
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 34px;
    height: 34px;
    width: 34px;
    clear: both;
    display: block;
    position: fixed;
    top: 28px;
    right: 31.5px;
    width: 27.5px;
    height: 26.5px;
}

.ripple-red {
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 34px;
    height: 34px;
    width: 34px;
    clear: both;
    display: block;
    position: fixed;
    top: 28px;
    right: 31.5px;
    width: 27.5px;
    height: 26.5px;
}

.ripple-sonar{
    display: block;
    position: fixed;
    top: 30px;
    right: 33.5px;
    width: 22px;
    height: 22px;

    border-radius: 50%;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    opacity: 0;
    z-index: 999;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

  /* textshuffle */

.shuffle {
    cursor: pointer;  
}

.shuffle.is-main {
    font-size: 100%;
}

.shuffle.completed {
    animation: blink 1s linear 0s 1 alternate;
}

@keyframes blink {
    0% {
        color: #fff;
        text-shadow: 0 0 1rem #fff;
    }
}

#mute-toggle{
  display: block;
  position: absolute;
  top: 14px;
  left: 24px;
  font-size: 34px;
  width: 42px;
  height: 42px;
  color: #ced4e2;
}

.la-volume-up {
  transition: transform 3.3s ease;
  color: #ced4e2;
}

/* loader */

@keyframes grow-and-fade {
  0% {
    opacity: 0;
    transform: scale(0.1) translatez(0);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1) translatez(0);
  }
}
@keyframes pulsing-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.8;
  }
  60% {
    opacity: 0;
  }
}
.jcLoad {
  align-items: center;
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 888;
}
.triangle {
  animation: grow-and-fade 2000ms linear infinite;
  height: 150px;
  left: 0;
  opacity: 0;
  width: 150px;
  position: absolute;
  top: 0%;
  transform: translatez(0);
  transform-origin: 50% 60%;
  will-change: opacity, transform;
}
.triangle-wrapper {
  height: 150px;
  position: relative;
  width: 150px;
}
.triangle-loading {
  animation: pulsing-fade 3000ms ease infinite;
  color: var(--color);
  font-size: 14px;
  font-weight: 300;
  left: 50%;
  letter-spacing: 8px;
  margin-left: 4px;
  margin-top: 10px;
  opacity: 0;
  position: absolute;
  top: 100%;
  transform: translate3d(-50%, -50%, 0);
  text-transform: uppercase;
}
.triangle-svg {
  margin-top: -20px;
  opacity: 0.5;
  overflow: visible;
}
.triangle-polygon {
  stroke-width: 5px;
}
.triangle-1 {
  animation-delay: 0ms;
}
.triangle-1 .triangle-polygon {
  stroke: var(--lightorange);
}
.triangle-2 {
  animation-delay: 400ms;
}
.triangle-2 .triangle-polygon {
  stroke: var(--strongorange);
}
.triangle-3 {
  animation-delay: 800ms;
}
.triangle-3 .triangle-polygon {
  stroke: var(--midnightbluelight);
}
.triangle-4 {
  animation-delay: 1200ms;
}
.triangle-4 .triangle-polygon {
  stroke: var(--midnightblue);
}
.triangle-5 {
  animation-delay: 1600ms;
}
.triangle-5 .triangle-polygon {
  stroke: white;
}

/*PHOTOGRAPHY*/
 /* body{ */
   /* this breaks ARTWORK */
    /* overflow-x: hidden; */
  /* } */
  html{
      overflow-y: scroll;
    }
  #container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
  .main-area{
    padding: 5px;
  }
.input-title {
    clear: both;
    padding: 22px 0px 0px 0px;
    font-size: 16px;
    color: rgba(255,255,255,.6);
    font-weight: 300;
}

#detail {
  color: #999;
  float: right;
  padding-top: 0.8em;
  padding-right: 1.5em;
}
.exif_icon {
  filter: brightness(70%);
  width: 1em;
  vertical-align: sub;
  padding: 0 0.2em 0 0.5em;
}

@media screen and (min-width: 20em) {
    .photo {
        width: 33.3%;
  }
    .photo-big {
        width: 66.6%;
  }
    .photo-bigger {
        width: 100%;
	}
}

@media screen and (min-width: 40em) {
	.photo {
   width: 25%;
  }
  .photo-big {
    width: 50%;

  }
  .photo-bigger {
    width: 50%;
	}
}

@media screen and (min-width: 60em) {
	.photo {
    width: 25%;
	}
	.photo-big {
    width: 50%;
  }
  .photo-bigger {
    width: 75%;
	}
}

@media screen and (min-width: 80em) {
	.photo {
		width: 12.5%;
	}
	.photo-big {
    width: 25%;
  }
  .photo-bigger {
    width: 37.5%;
	}
}
.cos-section{
    width: calc(100% - 30px)!important;
    right: 15px;
    left: 15px;
  }

@media only screen and (max-width: 576px) {
  .p-descript {
      display: none!important;
  }
  .cos-section{
    width: calc(100% - 30px)!important;
    right: 15px;
    left: 15px;
  }
  .cos-toggle {
    display: flex!important;
    height: 40px!important;
  }
}

.cos-section{
  width: 90%;
  position: inherit;
}
/* Artwork */

.gr-gallery {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.gr-wrapper { 
  height: 100%; 
}

.gr-room {
	position: absolute;
	top: 0;
	width: 100%;
	height: 85%;
	text-align: center;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

.gr-wall-main,
.gr-wall-other {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	background: var(--gallery-background);
}

.gr-wall-main {
	left: 0;
}

.gr-gallery figure {
	position: absolute;
	-webkit-transform-style: preserve-3d;
}

.no-js .gr-gallery figure {
	display: inline-block;
	position: relative;
	margin: 20px;
}

.gr-gallery figure::before {
	content: '';
	position: absolute;
	width: 180%;
	height: 150%;
	top: -45%;
	left: -40%;
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0) 66%);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0) 66%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0) 66%);
	background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0) 66%);
	pointer-events: none;
	opacity: 0.5;
}

.gr-gallery figure div,
.gr-gallery figure img,
.gr-gallery figcaption {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	color: #000000;
}

.blk-text {
	color: #000000;
}

figcaption p {
	color: #000000;
}

.gr-gallery figure div {
	position: relative;
	border: 10px solid #000;
	box-shadow: 0 10px 7px -5px rgba(0,0,0,0.3);
  background-color: white
}

.gr-gallery figure img {
	display: block;
	margin: 0 auto;
	border: 20px solid #fff;
}

.gr-caption-inner p {
	color: #333333;
}

.gr-gallery figcaption {
	width: 80px;
	display: block;
	font-size: 8px;
	background: #fff;
	color: #444;
	padding: 5px;
	margin-top: 20px;
	position: relative;
	text-align: left;
	cursor: -webkit-zoom-in; 
	cursor: -moz-zoom-in;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.gr-gallery figcaption h2 span {
	display: inline-block;
	margin: 0 2px;
}

.gr-gallery figcaption div {
	display: none;
}

.wrapper {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gr-gallery nav {
	position: absolute;
	width: 300px;
	height: 38px;
	bottom: 10%;
	left: 50%;
	margin-left: -150px;
	z-index: 3;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.gr-gallery nav span {
	width: 90px;
	height: 100%;
	background: url(../images/stepsW.png);
	float: left;
	text-indent: -100%;
	overflow: hidden;
	opacity: 0.6;
}

.gr-gallery nav span:hover {
	opacity: 1;
	transform: scale(1.5);
	transition: border-color 0.5s ease-in 1s;
}

.gr-gallery nav span.gr-next {
	background-position: top right;
	float: right;
}

.gr-caption {
	position: absolute;
	width: 400px;
	height: 280px;
	padding: 40px;
  margin-left: auto;
  margin-right: auto;
  left: 15px;
  right: 0;
	bottom: 0;
	background: white;
	box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
	-webkit-transform: translateY(310px);
	-webkit-transition: -webkit-transform .5s ease;
	-moz-transform: translateY(310px);
	-moz-transition: -moz-transform .5s ease;
	-o-transform: translateY(310px);
	-o-transition: -o-transform .5s ease;
	-ms-transform: translateY(310px);
	-ms-transition: -ms-transform .5s ease;
	transform: translateY(310px);
	transition: transform .5s ease;
}

@media screen and (max-width:750px) and (orientation: portrait){
  .gr-caption {
    margin-left: 0;
    width: 232px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
}  

.gr-caption-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #fff;
	color: var(--strongorange);
	width: 21px;
	height: 21px;
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 0 3px var(--strongorange);
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	-ms-transition: all .2s linear;
	transition: all .2s linear;
}

.gr-caption-close:hover {
	color: #555;
	box-shadow: 0 0 8px -1px rgba(0,0,0,0.6);
}

.gr-caption h2 {
	border-bottom: 1px solid rgba(0,0,0,0.3);
	padding: 0 0 10px 0;
	margin: 0 0 20px 0;
	font-family: 'Cutive Mono', cursive;
}

.gr-caption > div {
	overflow: hidden;
	overflow-y: auto;
	max-height: 160px;
}

.gr-caption > div a {
	font-weight: 700;
}

.gr-caption > div a:hover {
	color: #d80066;
}

/* custom arrows */

#next-svg{
	float: right!important;
}

div nav svg {
  width: 50px;
  height: auto;
  margin: 0 2rem;
  cursor: pointer;
  overflow: visible;
}
div nav svg polygon, div nav svg path {
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  fill: var(--midnightblue);
}
div nav svg:hover polygon, div nav svg:hover path {
  transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
  fill: var(--midnightbluelight)
}
div nav svg:hover .arrow {
  animation: arrow-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
div nav svg:hover .arrow-fixed {
  animation: arrow-fixed-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}

@keyframes arrow-anim {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  5% {
    transform: translateX(-0.1rem);
  }
  100% {
    transform: translateX(1rem);
    opacity: 0;
  }
}
@keyframes arrow-fixed-anim {
  5% {
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Artwork settings */

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}
.artcontainer {
	width: 100%;
	height: 100%;
}

.artcontainer > h1 {
	z-index: 9999;
	font-weight: 400;
	padding: 50px 20px;
}

.js .artcontainer > h1 {
	position: fixed;
	-webkit-backface-visibility: hidden;
	bottom: 0;
	left: 0;
	color: #f0f0f0;
	padding: 20px;
	font-size: 20px;
}

.artcontainer > h1 a {
	font-size: 12px;
	text-transform: uppercase;
	display: inline-block;
	padding: 0 0 0 10px;
	font-weight: 700;
}

.artcontainer > h1 a:hover,
.artcontainer > h1 a.demo-current {
	color: #222;
}
.gr-gallery figure img{
    border: none!important;
    margin: 20px!important;
}
.magnify{
    border-radius: 50%;
    border: 2px solid var(--midnightblue);
    position: absolute;
    z-index: 20;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 20px rgba(0,0,0,.5);
    display: none;
    cursor: none;
    }
.gr-room {
    height: 80%;
}
.gr-floor {
   position: absolute;
   top: 100%;
   left: 0;
   height: 30%;
   width: 100%;
   background: var(--gallery-floor);
}