/* There's nothing to see here. No secrets, no puzzles and no mysteries. At least not yet. */
@charset "utf-8";

html, body      {margin: 0; padding: 0; }


@font-face {
font-family: 'pixellari';
font-display: swap;
src: url('../fonts/pixellari.eot'); /* IE9 Compat Modes */
src: url('../fonts/pixellari.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/pixellari.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/pixellari.woff') format('woff'), /* Modern Browsers */
url('../fonts/pixellari.ttf')  format('truetype'), /* Safari, Android, iOS */
url('../fonts/pixellari.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body            {font-family: "pixellari", Arial, sans-serif; letter-spacing: 0.1px; padding: 0; margin: 0; font-size: 100%;  background-color: #0D0D0D; color: #242424; }
html            {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; background-color: #0D0D0D;}
pre             {padding: 0; margin: 0;}
ul              {padding: 0;}
span            {padding: 0; margin: 0;}
li              {padding: 0; margin: 0 auto; list-style: none;}
a               {text-decoration: none; color: #c0c0c0;}
a:hover         {text-decoration: none;}
p               {padding: 5; margin: 2px 0 30px 0;}
gray            {color: #c0c0c0;}
red             {color: #e60073;}
purple          {color: #8e44ad;}
blue            {color: #09c3b2;}
green           {color: #229954;}
yellow          {color: #f1c40f;}
b1:hover        {border-bottom-style: solid; border-color: #c0c0c0;}
b2:hover        {border-bottom-style: solid; border-color: #e60073;}
b3:hover        {border-bottom-style: solid; border-color: #8e44ad;}
b4:hover        {border-bottom-style: solid; border-color: #09c3b2;}
b5:hover        {border-bottom-style: solid; border-color: #229954;}
b6:hover        {border-bottom-style: solid; border-color: #f1c40f;}
c1              {color: #e60073;}
c2              {color: #09c3b2;}
c3:hover        {color: #e60073;}
video           {max-width: 100%; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
img             {max-width: 100%;}

#page           {position: fixed; width: 100%; height:100%; color: #6a6a6a; background-color: #252524; overflow-x: hidden; background-image: url(../images/pattern_maze_bg.png); background-repeat: repeat; background-position: right top;}

.social1        {position:absolute; top: 2px; right: 65px; width: 25px; height: 25px; transition: transform .2s ease;}
.social1:hover  {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}
.social2        {position:absolute; top: 2px; right: 115px; width: 25px; height: 25px; transition: transform .2s ease;}
.social2:hover  {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}
.social3        {position:absolute; top: 2px; right: 165px; width: 25px; height: 25px; transition: transform .2s ease;}
.social3:hover  {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}
.social4        {position:absolute; top: 2px; right: 215px; width: 25px; height: 25px; transition: transform .2s ease;}
.social4:hover  {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}
.social5        {position:absolute; top: 2px; right: 265px; width: 25px; height: 25px; transition: transform .2s ease;}
.social4:hover  {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}

.logo           {width: 300px; height: 300px; text-align: center; margin: 0 auto; margin-top: 25px; pointer-events: auto; background-image: url(../images/mazehead_logo_2.png); background-size: cover; background-repeat: no-repeat;}

.footer         {position: fixed; bottom: 0; color: #6a6a6a; background-color: #0D0D0D; background-image: url(../images/bg_scanlines.gif); background-repeat: repeat; background-position: right top; width: 100%; height: 10px; padding-top: 5px; padding-left: 15px; padding-bottom: 15px; z-index: 2; -moz-box-shadow:0 1px 8px #000000; -o-box-shadow:0 1px 8px #000000; -webkit-box-shadow:0 1px 8px #000000;}

.container      {height: 100%; overflow: scroll; scroll-behavior: auto; color: #6a6a6a;}

.container::-webkit-scrollbar-track   {background-color: rgba(0,0,0,0);}
.container::-webkit-scrollbar         {width: 10px;	background-color: rgba(0,0,0,0.2);}
.container::-webkit-scrollbar-thumb   {background-color: #161616;}

.menu           {color: #c0c0c0; max-width: 100%; text-align: center; margin: 0 auto; margin-top: 25px;}
.menuitem       {display: inline-block; color: #c0c0c0; margin-left: 3px; margin-right: 3px; font-size-adjust: auto;}

.centertextbox  {width: 100%; text-align: center; margin: 0 auto;}

.gallerycenter  {position: relative; max-width: 800px; text-align: center; margin: 0 auto;}

.projectname                  {display: none; margin-top: -25px; font-size: 80%; pointer-events: none; text-shadow: 0 0 3px #000000, 0 0 5px #000000, 0 0 8px #000000;}

.category1                    {display: inline-block; width: 150px; height: 150px; margin: 2px; overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.category1:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.category1:hover .projectname {display: block;}

.category2                    {display: inline-block; width: 150px; height: 150px; margin: 2px; overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.category2:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.category2:hover .projectname {display: block;}

.category3                    {display: inline-block; width: 150px; height: 150px; margin: 2px; overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.category3:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.category3:hover .projectname {display: block;}

.category4                    {display: inline-block; width: 150px; height: 150px; margin: 2px;  overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.category4:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.category4:hover .projectname {display: block;}

.category5                    {display: inline-block; width: 150px; height: 150px; margin: 2px; overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.category5:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.category5:hover .projectname {display: block;}

.lightbox li            {overflow: hidden; position: absolute; width: 0; height: 0; left: 0; right: 0; top: 0; opacity: 0; z-index: 3; text-align: center; background: rgba(0, 0, 0, 0.75); -moz-transition: opacity 1s; -o-transition: opacity 1s; -webkit-transition: opacity 1s;}
.lightbox li:target     {width: 100%; height: 100%; opacity: 1;}
.lightbox li:target a   {position: relative;}

.content                            {position: relative; display: inline-block; margin-left: 1%; margin-right: 1%; margin-top: 1%; margin-bottom: 2%; height: 95%; background-color: #2a2a27; overflow-x: hidden; overflow-y: auto; text-align: right;}
.content::-webkit-scrollbar-track   {background-color: rgba(0,0,0,0);}
.content::-webkit-scrollbar         {width: 10px;	background-color: rgba(0,0,0,0.2);}
.content::-webkit-scrollbar-thumb   {background-color: #161616;}

.close                  {position: absolute; right: 0; width: 45px; height: 45px; background-image: url(../images/close_gray.png); background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: 0.25; z-index: 6;}
.close:hover            {opacity: 0.5;}
.prev                   {position: absolute; display: inline-block; bottom: 100px; width: 100px; height: 250px; background-image: url(../images/arrow_left.png); background-repeat: no-repeat; background-position:  center left; opacity: 0.2; z-index: 5;}
.prev:hover             {opacity: 0.8;}
.next                   {position: absolute; display: inline-block; bottom: 100px; right: 0; width: 100px; height: 250px; background-image: url(../images/arrow_right.png); background-repeat: no-repeat; background-position: center right; opacity: 0.2; z-index: 5;}
.next:hover             {opacity: 0.8;}

.imgframe               {width: 100%; overflow: hidden; text-align: center; margin: 0 auto;}
.thumbnailbar           {width: 100%; height: 20px; text-align: center; margin: 0 auto; }

.textframe                            {width: 98%; max-width: 1200px; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-top: 30px; overflow: auto; text-align: left;}
.textframe::-webkit-scrollbar-track   {background-color: rgba(0,0,0,0);}
.textframe::-webkit-scrollbar         {width: 10px;	background-color: rgba(0,0,0,0.2);}
.textframe::-webkit-scrollbar-thumb   {background-color: #161616;}

.thumb                  {display: inline-block;  width: 60px; height: 60px; text-align: center; margin: 0 auto; margin-top: 5px; clear: both;}

.framepic1              {display: inline-block; width: 100%; text-align: center; margin: 0 auto;}
.framepic2              {display: none; width: 100%; text-align: center; margin: 0 auto;}
.framepic3              {display: none; width: 100%; text-align: center; margin: 0 auto;}
.framepic4              {display: none; width: 100%; text-align: center; margin: 0 auto;}
.framepic5              {display: none; width: 100%; text-align: center; margin: 0 auto;}

.blank                  {height: 50px; width: 100%;}

/* Project page specific */


.project                            {position: relative; max-width: 960px; background-color: #20201e; text-align: left; margin: 0 auto;}
.project::-webkit-scrollbar-track   {background-color: rgba(0,0,0,0);}
.project::-webkit-scrollbar         {width: 10px;	background-color: rgba(0,0,0,0.2);}
.project::-webkit-scrollbar-thumb   {background-color: #161616;}
.projectbanner                      {max-width: 960px; max-height: 400px; overflow: hidden; text-align: center; margin: 0 auto;}

.projecttext                        {margin: 0 auto; padding-left: 25px; padding-right: 25px; padding-top: 30px; overflow: hidden; text-align: left;}

.projectcenter  {position: relative; max-width: 960px; text-align: center; margin: 0 auto;}

.projectpic                   {display: inline-block; width: 150px; height: 150px; margin: 5px; overflow: hidden; clear: both; transition: transform .2s ease; -moz-box-shadow:0 1px 8px #000000;-o-box-shadow:0 1px 8px #000000;-webkit-box-shadow:0 1px 8px #000000;}
.projectpic:hover              {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3);}
.projectpic:hover .projectname {display: block;}

.projectgallery                            {position: relative; display: inline-block; margin-left: 1%; margin-right: 1%; margin-top: 1%; margin-bottom: 2%; height: 95%; background-color: rgba(0,0,0,0); overflow-x: hidden; overflow-y: auto; text-align: right;}
.projectgallery::-webkit-scrollbar-track   {background-color: rgba(0,0,0,0);}
.projectgallery::-webkit-scrollbar         {width: 10px;	background-color: rgba(0,0,0,0.2);}
.projectgallery::-webkit-scrollbar-thumb   {background-color: #161616;}




@media          all and (max-width: 950px) {
.project        {max-width: 85%;}
}

@media          all and (max-width: 750px) {
.logo           {width: 150px; height: 150px;}
.social1        {position:fixed; top: 20px; right: 15px; width: 30px; height: 30px;}
.social2        {position:fixed; top: 65px; right: 15px; width: 30px; height: 30px;}
.social3        {position:fixed; top: 110px; right: 15px; width: 30px; height: 30px;}
.social4        {position:fixed; top: 155px; right: 15px; width: 30px; height: 30px;}
.social5        {position:fixed; top: 200px; right: 15px; width: 30px; height: 30px;}
.content        {height: 97%;}
.prev           {bottom: 100px; width: 100px; height: 120px;}
.next           {bottom: 100px; right: 0; width: 100px; height: 120px;}
}

@media                  all and (max-width: 516px) {
.centertextbox          {padding-top: 0px;}
.prev                   {bottom: 75px; width: 100px; height: 100px;}
.next                   {bottom: 75px; right: 0; width: 100px; height: 100px;}
}