/* CSS Document */
* {
  box-sizing: border-box;
}
html {
	overflow-x:hidden;
}
body {
	font-family: 'Jura', sans-serif;
		font-size:0.8em;
  color: #e1e1e1;
  background-color:#26282C;
	padding-bottom: 70px;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-size: 1em;
  margin: 3px 0 5px 0;
  text-align: left;
	font-family: 'Play', sans-serif
}
h3 {
  font-size: 1.1em;
}
h4 {
  font-size: 1em;
	font-color:#a1a1a1;
}
.header {
  width: 100%;
  font-size: 1.7em;
}
.header h1 {
  margin-top: 0;
}
.header p {
  font-size: 0.6em;
	margin-top:0.5em;
}
.header-subtext {
  font-size: 0.65em;
  padding-top: -50px;
  color: #a1a1a1;
}
.subtext {
  font-size: 0.85em;
  font-style: italic;
  color: #a1a1a1;
}
.divided {
  border-bottom: #666 thin solid;
  min-height: 20px;
}
.divided-top {
  border-top: #666 thin solid;
  min-height: 20px;
}
.textdivider {
  color: #ccc;
  margin: 0 5;
}
.caption {
  font-size: 0.75em;
  font-style: italic;
	margin:0.5em 0 1em 0;
}
.menu-button {
	margin-top:8px;
}

a {
	color:#e1e1e1;
	text-decoration: none;
}
.urlicon {
	margin-bottom:-6px;
}
.footer {
	position: fixed;
	bottom:0;
	width:100%;
	height:50px;
	left:0;
  background-color: #36393f;
	background-color: #202225;
	
  -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.5);
	z-index:9999999;
	padding:0.33em;
}

.footer img {
	margin-left:10px;
	margin-right:10px;
	width:28px;
	height:28px;
	margin-top:4px;
}
.filter-button {
	opacity:0.33;
	transition-duration: 0.5;
}
.filter-button:hover {
	opacity:0.8;
}
.filter-button.toggled {
	opacity:1;
}

.menu-button,
.close-button{
	cursor:pointer;
}
.close-popup {
	text-align:right; cursor:pointer; padding:0.25em 0.5em; font-weight:bold; font-size:1em; float:right; border:thin solid #515151;
}
.title {
	float:left;
}
.filters {
	/*float:left;*/ margin-top:0.3em 0.3em;
}
.devlog-nav, .webgl-nav {
	font-size: 1em;
	padding: 0.3em 0.45em 0.4em 0.45em;
	border-radius: 0.75em;
	border: thin solid #a1a1a1;
	color: #e1e1e1;
	margin: 0em;
}
.devlog-nav {
	cursor:pointer;
}
.devlog-nav.toggled {
	border: thin solid #515151;
	color: #919191;
}
.devlog a, .devlog-full a {
	text-decoration: underline;
	text-decoration-color:#777;
	text-underline-offset:2px;
}
.return-to-top {
	cursor: pointer;
}
.copyright {
	font-size:0.7em; color:#717171;
}
.uncredited {
	font-size:0.6em;
}
.about .subtext {
	font-size:0.9em;
}

button.copy {
	display: inline-block; border:none;
    padding: 0;
    margin: 0;
   margin-left:10px;
   margin-top:-3px;
    vertical-align: middle;
	background-image:url('../assets/copy-icon-small.png'); 
	background-size:cover; 
	width:14px; 
	height:14px;
	transition: all ease-in-out .1s;
	opacity:0.66;
	cursor:pointer;
}
.copy.discord:hover {
	opacity:1;
}
.copy.email:hover {
	opacity:1;
}


.project div, .demo-reel div {
	background-position: center;
	background-size: cover;
}
.project-name-A {
	margin-top:-48%; margin-bottom:0%;
	padding-left:5px;
}
.project-name-B {
	margin-top:-47%; margin-bottom:45%;
	padding-left:5px;
}
#project-full-description-container {
	margin-top:0px;
}
#project-full-role-container {
	margin-top:20px;
}
.project-info {
	margin-top:29.5%; margin-bottom:5.75%;
	width:100%;
	padding-right:5px;
}
.project-item { cursor:pointer;}

li {
	margin:0.5em 0;
}
li span {
	position:relative;
	left:-3px;
}
p{
	margin:1em 0;
  font-size: 1em;
	text-align:justify;
}

.project-full-header {
	float:left; width:80%;
}
.background-watermark {
	opacity: 0.025; 
	width:150px; 
	height:150px; 
	float:right; 
	background-size:contain; 
	margin:-18px 0px -250px 0px;
}
.devlog .background-watermark
{
	background-image:url('../assets/devlogs-toggle-icon.png'); 
}
.about .background-watermark
{
	background-image:url('../assets/about-toggle-icon.png'); 
}


.project-screenshot,
.slick-screenshot,
.youtube-thumb {
	border:thin solid #555;
	padding:0.25em; margin:0.3em;
}
.youtube-thumb {
	width:85%;
}
.slick-screenshot{
	-webkit-box-shadow: 0px 5px 15px -3px rgba(0,0,0,0.41); 
box-shadow: 0px 5px 15px -3px rgba(0,0,0,0.41);
}
.project-screenshot.featured {
	background-image:url('../media/projects/Apolycalypse/index-thumb-B.jpg');
}
.project-full,
.devlog-full {
	width:95%;
	margin:2.5% 2.5% 60px 2.5%;
	height:auto;
	font-size:1.1em;
	 max-width:1050px; background-color: #36393f; background-image:url(../assets/grid.png); background-repeat:no-repeat; background-position:top left; font-family:'Jura', sans-serif; 
}
.devlog-full {
	max-width:650px;
}
.devlog-full img {
	max-width:90%;
}
#project-full, #devlog-full, #webgl-full {
	max-width:100%;
    -webkit-transform: scale(0.3);
       -moz-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
}
.popup_visible #project-full,
.popup_visible #devlog-full,
.popup_visible #webgl-full {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}


/* ---- grid ---- */
.grid-item,
.project-name,
.project-full,
.devlog-full,
.webgl-content
{
  background-color: #36393f;
}
.grid {
  background: transparent;
	font-size:1.1em;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer, .grid-item {
  width: 100%;
  text-align: justify;
  float: left;
	
  -webkit-box-shadow: 3px 3px 8px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 8px 3px rgba(0, 0, 0, 0.5);
	margin-bottom:0.25em;
}
.grid-item,
.project-full,
.devlog-full,
.webgl-full,
.webgl-content {
	border:thin solid #555;
	background-image:url('../assets/grid.png');
	background-position:top left;
	background-repeat: no-repeat;	
  padding: 0.5em;
}
.devlog-screen {
	max-width:85%;
	width:85%;
  padding: 0.25em;
	border:thin solid #555;
}
.grid-item.project,
.grid-item.devlog-item, 
.grid-item.demo-reel
{
  padding: 1em;
	cursor:pointer;
}
.grid-item.width2 {
  width: 100%;
}
.grid-item img {
  display: block;
  max-width: 100%;
}
.gutter-sizer {
  width: 3.5%;
}
.stamp {
	position:absolute;
}

.section {
	margin:0;
}


.webgl-play, .windows-play, .webgl-subtext, .windows-subtext {
	width:20%;
	text-align: center;
	margin:auto 10%;
	padding:5px;
}
.webgl-play, .windows-play {
	border:thin solid #666;
	cursor:pointer;
}
.webgl-play:hover, .windows-play:hover {
	border:thin solid #ddd;
}
.webgl-play, .webgl-subtext {
	float:left;
}
.windows-play, .windows-subtext {
	float:right;
}
.windows-subtext, .webgl-subtext {
	font-size:0.7em;
	font-sytle:italic;
	
}
.webgl-full {
	z-index:99999;
	padding:20px;
}
.webgl-iframe {
	width:100%;
	height:100%;
}

.mmo-play-content{
	padding:20px 50px;
}
.desktop-only {
	display:none;
}
.mobile-only {
	display:inline;
}




/* SLICK */
* {
  box-sizing: border-box;
}

.slider {
	width: 85%;
	margin:auto 7.5%;
	padding:0.5em 0;
}
.slick-slide {
  margin: 10px 3px;
}

.slick-slide img {
  width: 198%;
}


.slick-prev:before,
.slick-next:before {
  color: #d1d1d1;
	padding:0.5em;
	margin-left:-0.5em;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .5;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}


.slider-for {
	width:100%;
	padding:0px;
	margin:1%;
	padding-top:0.5em;
}
.slider-for img {
	max-width:100%;
	margin:auto;
}
.slider-for div {
	margin:0;
	height:auto;
	padding:10 0;
}
.player-speed-control,
.skip-button {
	float:right;
	padding:0.5em;
	cursor:pointer;
}

input {
	padding:0.2em;
	font-size:1em;
	margin:1em;
	font-weight:bold;
}
textarea {
	padding:0.2em;
	margin:1em;
	width:97%;
	font-weight:bold;
	font-size:1em;
}
.boxsizingBorder {
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}






input,
select,
textarea,
button {
	font-family: inherit;
	font-size: 90%;
	background-color:#333;
	color:#eee;
	font-size:1em;
	font-weight:500;
	border-color:#444;
	padding:1em;
	line-height:1.5em;
}
form{font-family: 'Jura', sans-serif;}
input[type=submit] {
	background-color:transparent;
	border: thin solid #a1a1a1;
	color: #e1e1e1;
	border-radius: 0.75em;
	padding: 0.3em 0.45em 0.4em 0.45em;
	cursor:pointer;
	 margin-top:-5px;
	font-family:inherit;
}
input[type=button] {
	background-color:transparent;
	border: thin solid #a1a1a1;
	color: #e1e1e1;
	border-radius: 0.75em;
	padding: 0.3em 0.45em 0.4em 0.45em;
	cursor:pointer;
	 margin-top:-5px;
	font-family:inherit;
	font-weight:normal;
}

#form_result div {
	margin:0.3em 0.2em;
}
input[type=submit].disabled {
	color:#777;	
	border-color:#777;
}

input:focus, textarea:focus {
	outline: none !important;
	border-color:#444;
    box-shadow: 0 0 10px #555;
}

.toolbar {
	font-size:0.75em;	
}












/* end of document */