body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  /*  font-size:120%;
*/
}


@font-face {
  font-family: Russo One;
/*  font-style: NORMAL_OR_ITALIC; 
/*  font-weight: NUMERIC_WEIGHT_VALUE; */
  src: url(RussoOne-Regular.ttf);
}

@font-face {
  font-family: Raleway Dots;
/*  font-style: NORMAL_OR_ITALIC; 
/*  font-weight: NUMERIC_WEIGHT_VALUE; */
  src: url(RalewayDots-Regular.ttf);
}

@font-face {
  font-family: Raleway;
  /* font-style: NORMAL_OR_ITALIC;  */
  /* font-weight: 800;  */
  src: url(Raleway-Light.ttf);
}

@font-face {
  font-family: Raleway Regular;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(Raleway-Medium.ttf);
}

@font-face {
  font-family: Raleway SemiBold;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(Raleway-SemiBold.ttf);
}

canvas {
  display: block;
}

p {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;
  margin: 0px;

}

h5 {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;
  position: absolute;
  margin: 0px;
}

div {
  overflow: hidden;
  margin: 0px;

}

#about_content {
  z-index: 103;
  position: relative;
  max-width: 850px;
  /*850, 1024*/
  top: 100px;
  /*211px;*/
  margin: auto;
  padding-bottom: 50px;
  background-color: #151515;
}

#contact_content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  top: 100px;
  /*211px;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 850px;
  /*850, 1024*/
  margin: auto;
  background-color: #151515;
  padding-bottom: 200px;

}

#content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 938px; 
  left: -12px;

  /*850, 1024*/
  top: 40px;
  /*211px;*/
  margin: auto;

  padding: 0px 0px 0px 0px;
  padding-bottom: 200px;
  /*background-color:#15F51533;*/
  background-color: #ffffff;
  text-align: center;
}

.button {
  position: relative;

  background-color: rgb(255, 102, 0);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 40px 2px;
  cursor: pointer;
  left:50%;
  transform: translate(-50%,0%);
  transition: 0.2s;
  font-family: Raleway SemiBold, san-serif;
  border-radius: 8px;
}

.button:hover {
  transition: 0.2s;
  color: black;
  background-color: rgb(255, 255, 255);

}

#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;

}

#overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 40px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  max-width: 500px;
  /* background-color: rgba(0,0,250,0.5); */

  /* padding-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  border: hidden; */

  font-family: Raleway Regular, san-serif;
}


#warning-title {
  color:rgb(255, 102, 0);
  text-align: center;
  font-size: 1em;
  font-family: Raleway Regular, sans-serif;
}


#warning-text {
  color:rgba(255, 255, 255, 1);
  text-align: left;
  font-size: 0.6em;
  line-height: 1.9em;
  font-family: Raleway Regular, sans-serif;
  padding: 15px;
}

#instructions {
  position: fixed;
  z-index: 120;
  bottom: 20px;
  left: 0px;

  width: 100%;
  height: 48px;

  /* background: rgb(255, 255, 255); */
  /* opacity:1; */
  background-color: rgb(0, 0, 0, 0);

}

#instructions-text {
  color:rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 0.8em;
  font-family: Raleway Regular, sans-serif;
}

#lissajous {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 800px;
  /*850, 1024*/
  top: 250px;
  /*211px;*/
  margin: auto;

  padding: 0px 0px 0px 0px;

  /*background-color:#15F51533;*/
}



#aboutTitle {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 750px;
  left: -0px;
  /*850, 1024*/
  top: 200px;
  /*211px;*/
  height: 50px;
  margin: auto;

  padding: 0px 0px 0px 0px;

  font-size: 2.40em;
  font-family: 'Raleway Dots', cursive;
  /* background-color:#15F51533; */
}

#bio {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 750px;
  /*850, 1024*/
  top: 260px;
  /*211px;*/
  margin: auto;

  font-size: 1.5em;
  font-weight: 300;
  padding: 0px 0px 0px 0px;
  line-height: 1.5em;
  font-family: 'Raleway', sans-serif;
  /*background-color:#15F51533;*/
  margin-bottom: 100px;
}

#bioTitle {
  /* font-family: 'Quicksand', sans-serif;
  font-size: 0.8em;
  font-weight: 700; */
  font-size: 1.7em;
  font-family: 'Raleway Dots', cursive;
}

#hi-bold {
  font-family: 'Raleway Regular', sans-serif;
  font-weight: 400;
}

#bioP {
  font-family: 'Raleway Regular', sans-serif;
  font-size: 0.8em;
  
  font-weight: 400;
  color:#353535
}

#quote {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 750px;
  /*850, 1024*/
  top: 250px;
  /*211px;*/
  margin: auto;
  line-height: 30px;

  /* font-weight:300; */
  /* font-style: italic; */
  padding: 0px 0px 30px 0px;
  font-size: 1.1em;

  font-family: 'Quicksand', sans-serif;
  /*background-color:#15F51533;*/
}


#id_content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*top: 100px; /*211px;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  /*width: 860px; 850, 1024*/
  max-width: 850px;
  height: 900px;
  top: 100px;
  margin: auto;

  background-color: #151515;
}

#header {
  z-index: 123;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 210px;
  background-image:
    url('./assets/starBar.png');
  background-repeat: repeat-x;
  background-position: 0px 100px;

}

#deslink {

  color: #FFFFFF;

}



a.infoC:link {
  color: #88CCCC;
  text-decoration: none;
}

a.infoC:visited {
  color: #88CCCC;
  text-decoration: none;
}

a.infoC:active {
  color: #88CCCC;
  text-decoration: underline;
}

a.infoC:hover {
  color: #FFFFFF;
  text-decoration: underline;
}



#secLink {

  color: #666666;

}

div#cheader {
  z-index: 153;
  top: 0px;
  left: 50%;

  margin-left: -512px;
  /*-512*/

  width: 1024px;
  height: 100px;



  /*background-image:*/
  /*url('./assets/consoleBar.png');*/
  /*background-position: 0px 0px;*/

}

div#filler

/*for background color matching*/
  {
  position: fixed;
  z-index: 120;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 48px;


  background: WHITE;

}

div#fillerTransparentWhite
{
  position: fixed;
  z-index: 120;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 48px;

  /* background: rgb(255, 255, 255); */
  /* opacity:1; */
  background-color: rgba(130, 130, 130, 0.2);
  /* opacity: 0.8; */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

}

div#portrait {
  margin-top: 85px;
  margin-left: 550px;
  background: url("../about/Xuan_portrait.jpg");
  width: 200px;
  height: 216px;
}


/*\*/
body>#header,
body>#cheader {
  position: fixed;
}

/* classes */
.desText {


  font-family: 'Raleway Regular', sans-serif;

  text-align: right;
  color: #000;
  /*FFFFFF*/
  font-size: 0.9em;
  line-height: 22pt;
  padding-bottom: 20px;
  font-weight: 500;

  /*max-width: 860px;*/
}

.desTextR {

  /* font-family: 'Open Sans', sans-serif; */

  font-family: 'Raleway Regular', sans-serif;

  text-align: right;
  color: #000;
  /*FFFFFF*/
  font-size: 0.9em;
  line-height: 22pt;
  padding-bottom: 20px;
  font-weight: 500;

  /*max-width: 860px;*/
}


.desText_about {

  font-family: 'Open Sans', sans-serif;

  position: relative;
  top: 55px;
  text-align: left;
  padding-right: 10px;
  left: 0px;
  color: #9F9F9F;
  /*C9C9C9 9F9F9F*/
  font-size: 0.70em;
  font-weight: normal;
  line-height: 20pt;
  max-width: 490px;
  /*612*/

}



@media screen and (max-width: 1000px) {
  .desText_about {
    left: 10px;
    padding-right: 20px;

  }

}

@media screen and (max-width: 550px) {

  img#contactImage {
    left: -10px;
  }

}

span.mailto {

  color: #FFFFFF;
  font-size: 1.0em;
}

.quoteSpacing {}

.quoteText {

  position: relative;
  top: 20px;

  color: #C9C9C9;
  font-size: 0.70em;
  line-height: 12pt;
  width: 720px;
  border-color: #452525;
  border-width: 1px;
  border-style: dotted;

  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.quoteTextTitle {

  text-align: left;
  color: #FFFFFF;
  font-size: 0.75em;
  line-height: 12pt;
  width: 720px;
}

.desText_2 {

  text-align: left;
  color: #FFFFFF;
  font-size: 0.70em;
  line-height: 12pt;
  width: 860px;
}


span.titles {
  color: #FFFFFF;
  font-size: 15px;
}

span.subtitle {
  color: #9ffff9;
  font-size: 12px;
}

span.black {
  color: #000000;
}

span.here {
  /* color: #779999 */
  color: #000000;

  /*669999*/
}

#bg_00 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 5px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #989898;
  /*border: 0px solid black;*/


  /* CSS3 standard */
  opacity: 0.78;

}

#bg_01 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 12px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #383848;
  /*border: 0px solid black;*/

  /* CSS3 standard */
  opacity: 0.68;
}

#bg_02 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 29px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #384848;
  /*border: 0px solid black;*/

  /* CSS3 standard */
  opacity: 0.48;
}

#bg_03 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 56px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #284848;
  /*border: 0px solid black;*/

  /* CSS3 standard */
  opacity: 0.38;
}

#bg_04 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 113px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #284848;
  /*border: 0px solid black;*/

  /* CSS3 standard */
  opacity: 0.18;
}

div#title {
  position: absolute;
  z-index: 103;
  top: 0px;
  left: 22px;
  width: 550px;
  height: 110px;

}

div#topLinks {
  position: absolute;
  z-index: 653;
  top: 0px;
  left: 710px;
  /*288, 268, 355*/
  overflow: visible;
  width: 500px;
  height: 48px;
}

div#main_header {
  /*projects*/

  position: absolute;

  z-index: 105;
  top: 35px;
  right: 5px;
  /*20*/
  max-width: 300px;
  height: 20px;

  /*overflow:visible;*/
  /*border-style:dotted;*/


}

div#main_content {
  position: relative;
  z-index: 105;
  top: 155px;
  /*right: 5px; 87px; 158px*/
  overflow: visible;
}

div#main_content_about {
  position: relative;
  z-index: 105;
  top: 50px;
  /*right: 5px; 87px; 158px*/
  overflow: visible;

}

div#main_quotes {
  position: absolute;
  z-index: 108;
  top: 115px;
  left: 50px;
  /*87px; 158px*/
  width: 745px;
  height: 600px;




  overflow: visible;
}

div#main_about {
  position: absolute;
  z-index: 105;
  top: 100px;
  /*115*/
  left: 5px;
  /*87px; 158px*/
  width: 600px;
  height: 200px;

  /*color:#FFFFFF;
  border-style:dotted;*/


  overflow: visible;
}


#contactImage {
  position: relative;
  z-index: 105;
  top: 100px;
  /*115*/
  left: 25px;
  max-width: 100%;
  color: #FFFFFF;
  overflow: visible;
  padding: 0px;

  border-style: dotted;
  border-color: white;
  border-width: 5px;
  border: none;
}


div#titleImage {
  position: absolute;
  z-index: 653;
  top: 0px;
  left: 33px;
  /*22, 88*/
  overflow: hidden;
  width: 400px;
  height: 54px;
  /* background-color: #284848; */

}

p#title {
  
  color: #ffffff;
  bottom: 20px;

  font-size: 1.3em;
  /*28, 33, 38*/

  line-height: 15pt;
  position: absolute;
  /* font-family: 'Qwitcher Grypen', cursive; */
  /* font-family: 'Nixie One', cursive; */
  /* font-family: 'Raleway', sans-serif; */
  /* font-family: 'Russo One', sans-serif; */

  font-family: 'Raleway SemiBold', sans-serif;
}

p#heading {
  color: #FFFFFF;
  right: 0px;

  font-size: 0.8em;

  font-weight: normal;
  line-height: 15pt;


}

p#menu {
  color: #ffffff;
  bottom: 9px;
  /*15 before animation */

  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
/*  font-weight: 400;
*/  font-family: 'Raleway Regular', sans-serif;


}

p#menu2 {

  color: #ffffff;

  bottom: 9px;
  /*15 before animation */
  left: 103px;
  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
  font-weight: 400;

  font-family: 'Raleway Regular', sans-serif;


}

p#menu3 {
  /* Contact */
  color: #ffffff;

  bottom: 9px;
  /*15 before animation */
  left: 208px;
  /*201*/
  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
  font-weight: 400;

  font-family: 'Raleway Regular', sans-serif;


}

p#menu4 {

  color: #999999;

  bottom: 15px;
  left: 118px;
  /*190*/
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

p#menu5 {

  color: #999999;

  bottom: 15px;
  left: 190px;
  /*260*/
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

p#menu6 {

  color: #999999;

  bottom: 15px;
  left: 330px;
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

#copyright {
  /* font-family: candara, verdana, geneva, arial, helvetica, san-serif;

  position: relative;
  z-index: 500;
  text-align: left;
  top: 180px;
  left: 0px;
  color: #999999;
  font-size: 0.55em;
  line-height: 15pt; */

  font-family: 'Raleway', sans-serif;
  position: relative;
  z-index: 500;
  top: 180px;
  color: #252525;
  font-size: 0.75em;
  line-height: 15pt;
}


#copyright_about {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;

  position: relative;
  z-index: 500;
  text-align: left;
  left: 0px;
  top: 50px;
  color: #999999;
  font-size: 0.55em;
  line-height: 15pt;
}

/* links  */
a:link {
  color: #787878;
  text-decoration: none;
}

a:visited {
  color: #787878;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  text-decoration: none;
}


.link-wrapper {
  /* position: auto;
  display: block;
  padding: 0px 0px; */
}


.link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 5px 0;
  color: #ffffff;
}


.hover-5:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  transform: scaleY(0);
  background-color: rgb(255, 255, 255);
  transition: transform 0.1s;
}

.hover-5:hover:after {
  transform: scaleY(1);
}

img {
  border: none;

}

/* for name home link  */
a.rolloverN {
  display: block;
  width: 158px;
  height: 20px;
  position: relative;

  float: left;
  text-decoration: none;
  background: url("./assets/nameBlack.png");

}

a.rolloverN:hover {
  /*background-position: 158px 0px;*/
}

a.rolloverN:active {
  position: relative;
  top: 5px;
}


/* Desktop & Mobile Safari + Firefox */
@supports (-webkit-touch-callout: none) or (selector(:nth-child(1 of x))) or (-moz-appearance: none) {

  a.logoName {
    color: rgb(255, 255, 255);
  }


}

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
  a.logoName {


    background: linear-gradient(170deg, var(--myColor1) 0%, var(--myColor2) 70%);
    /* transition: --myColor1 5s, --myColor2 1s; */
    transition: --myColor1 0.01s, --myColor2 0.7s;


    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}


/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {

  @property --myColor1 {
    syntax: '<color>';
    initial-value: WHITE;
    inherits: false;
  }

  @property --myColor2 {
    syntax: '<color>';
    initial-value: rgba(80,80,80,1);
    inherits: false;
  }
}

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
  a.logoName:hover {

    /* color: hsl(180, 66%, 60%);  */
    /* color: rgb(126, 204, 194); */
    /* transition: 0.3s; */

    /* color: hsl(159, 100%, 50%); */
    /* background: -webkit-radial-gradient( hsl(159, 100%, 50%), rgb(0, 234, 255), rgb(217, 255, 0)); 
  background: -webkit-linear-gradient(#3cc5d7, #47d794); */
    /* background: linear-gradient(170deg, rgba(0, 212, 255, 1) 0%, rgb(144, 238, 194) 70%); */

    --myColor1: rgba(0, 212, 255, 1);
    --myColor2: rgb(144, 238, 194);
    /* transition: --myColor1 0.01s, --myColor2 0.7s; */
    /* transition: --myColor1 0.7s, --myColor2 0.01; */

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;



  }
}


/* Desktop & Mobile Safari + Firefox */
@supports (-webkit-touch-callout: none) or (selector(:nth-child(1 of x))) or (-moz-appearance: none) {
  a.logoName:hover {

    background: linear-gradient(170deg, rgba(0, 212, 255, 1) 0%, rgb(144, 238, 194) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

#bbImg {
  padding: 50px;
  background: url("./assets/bb.jpg");
  background-repeat: no-repeat;
  background-size: cover;

}

#bbImg:hover {
  background: url("./assets/bb.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#serenityImg {
  padding: 50px;
  background: url("./assets/serenity.png");
  background-repeat: no-repeat;

}

#serenityImg:hover {
  background: url("./assets/serenity.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#caddyImg {
  padding: 50px;
  background: url("./assets/caddy.png");
  background-repeat: no-repeat;

}

#caddyImg:hover {
  background: url("./assets/caddy.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#cognitiveImg {
  padding: 50px;
  background: url("./assets/cognitivegames.png");
  background-repeat: no-repeat;
}

#cognitiveImg:hover {
  background: url("./assets/cognitivegames.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#moodmixImg {
  padding: 50px;
  background: url("./assets/moodmix.png");
  background-repeat: no-repeat;
}

#moodmixImg:hover {
  background: url("./assets/moodmix.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}



#terrainImg {
  padding: 50px;
  background: url("./assets/terrain.png");
  background-repeat: no-repeat;

}

#terrainImg:hover {
  background: url("./assets/terrain.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


#oldwebImg {
  padding: 50px;
  background: url("./assets/oldweb.png");
  background-repeat: no-repeat;

}

#oldwebImg:hover {
  background: url("./assets/oldweb.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* new image rollover for each project */
/* HertzianRide */
a.rollover0 {
  display: block;
  position: relative;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/hertzianRide.jpg");
}

a.rollover0:hover {
  background-position: 850px 0px;

}

#hrideImg {

  padding: 50px;
  background: url("./assets/hertzianRide.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#hrideImg:hover {
  background: url("./assets/hertzianRide.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Hertzian explorer */
a.rollover1 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/hexp.jpg");

}

a.rollover1:hover {
  background-position: 850px 0px;
}

#hexpImg {

  padding: 50px;
  background: url("./assets/hexp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#hexpImg:hover {
  background: url("./assets/hexp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*Torrent Watch*/
a.rollover2 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/twatch.jpg");
}

a.rollover2:hover {
  background-position: 850px 0px;
}

#torrentImg {

  padding: 50px;
  background: url("./assets/twatch.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#torrentImg:hover {
  background: url("./assets/twatch.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*ReVis*/
a.rollover3 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/revis.jpg");
}

a.rollover3:hover {
  background-position: 850px 0px;
}

#revisImg {

  padding: 50px;
  background: url("./assets/revis.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#revisImg:hover {
  background: url("./assets/revis.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*Patriot Performer*/
a.rollover4 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/patriot.jpg");
}

a.rollover4:hover {
  background-position: 850px 0px;
}

#patImg {

  padding: 50px;
  background: url("./assets/patriot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#patImg:hover {
  background: url("./assets/patriot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Logo Painter */
a.rollover5 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/painter.jpg");
}

a.rollover5:hover {
  background-position: 850px 0px;
}

#logoImg {

  padding: 50px;
  background: url("./assets/painter.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#logoImg:hover {
  background: url("./assets/painter.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* SyneTyper */
a.rollover6 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/typer.jpg");
}

a.rollover6:hover {
  background-position: 850px 0px;
}

#synImg {

  padding: 50px;
  background: url("./assets/typer.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#synImg:hover {
  background: url("./assets/typer.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Solar Panel Plant */
a.rollover7 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/plant.jpg");
}

a.rollover7:hover {
  background-position: 850px 0px;
}

#solarImg {
  padding: 50px;
  background: url("./assets/plant.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#solarImg:hover {
  background: url("./assets/plant.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* DragonFly */
a.rollover8 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/dragonfly.jpg");
}

a.rollover8:hover {
  background-position: 850px 0px;
}

#dragonImg {

  padding: 50px;
  background: url("./assets/dragonfly.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#dragonImg:hover {
  background: url("./assets/dragonfly.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Bubble Times */
a.rollover9 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/bubble.jpg");
}

a.rollover9:hover {
  background-position: 850px 0px;
}

#bubbleImg {

  padding: 50px;
  background: url("./assets/bubble.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#bubbleImg:hover {
  background: url("./assets/bubble.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* Out of Control */
a.rollover10 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/control.jpg");
}

a.rollover10:hover {
  background-position: 850px 0px;
}

/* Softimage renders */
a.rollover11 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/renders.jpg");
}

a.rollover11:hover {
  background-position: 850px 0px;
}

#xsiImg {

  padding: 50px;
  background: url("./assets/renders.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#xsiImg:hover {
  background: url("./assets/renders.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Patent */
a.rollover12 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/watch2.jpg");
}

a.rollover12:hover {
  background-position: 850px 0px;
}

#patent1Img {

  padding: 50px;
  background: url("./assets/watch2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#patent1Img:hover {

  background: url("./assets/watch2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;

}


/* JunctionPoint */
a.rolloverJP {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("/assets/jp.jpg");
}

a.rolloverJP:hover {
  background-position: 850px 0px;
}

#jpImg {

  padding: 50px;
  background: url("./assets/jp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#jpImg:hover {
  background: url("./assets/jp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Quiver */
a.rolloverQuiver {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/quiver.jpg");
}

a.rolloverQuiver:hover {
  background-position: 850px 0px;
}

#quiverImg {

  padding: 50px;
  background: url("./assets/quiver.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#quiverImg:hover {
  background: url("./assets/quiver.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Drugeye */
a.rolloverDrugeye {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/drugeye.jpg");
}

a.rolloverDrugeye:hover {
  background-position: 850px 0px;
}

#deImg {

  padding: 50px;
  background: url("./assets/drugeye.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#deImg:hover {
  background: url("./assets/drugeye.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* BlowingBlues */
a.rolloverBlowingBlues {
  position: relative;
  display: flex;
  /*display: block;*/
  max-width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/bb.jpg");
  background-size: auto;

}

a.rolloverBlowingBlues:hover {
  background-position: 850px 0px;
  background-size: auto;

}

/* Music for MS Surface */
a.rolloverMusic {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/music.jpg");
}

a.rolloverMusic:hover {
  background-position: 850px 0px;
}

a.dorkbot:link {

  color: #FFFFFF;
  text-decoration: underline;
}

a.dorkbot:visited {
  color: #FFFFFF;
  text-decoration: underline;
}

a.dorkbot:hover {
  color: #88CCCC;
  text-decoration: underline;
}

a.contact:link {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: none;
}

a.contact:visited {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: underline;
}

a.contact:hover {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: underline;
}

p#contactNew {
  top: 60px;
  font-weight: 400;
  padding: 0px 0px 0px 0px;

  font-family: 'Raleway Regular', sans-serif;
}

@media screen and (max-width: 550px) {
  div#overlay {
    visibility: hidden;
  }
}
@media screen and (max-height: 600px) {
  div#overlay {
    visibility: hidden;
  }
  
  div#instructions {
    visibility: hidden;
  } 
}

@media screen and (max-width: 960px) {

  div#titleImage {
    visibility: hidden;

  }

}

@media screen and (max-width: 550px) {

   div#instructions {
    visibility: hidden;
  } 

}

/* navigation bar */
@media screen and (max-width: 960px) {

  div#topLinks {
    position: initial;
    margin: auto;
    width: 100%;
    height: 100px;
    text-align: center;
    padding-top: 10px;

  }

  div#fillerTransparentWhite {
    height:130px
  }
  
  p#menu,
  p#menu2,
  p#menu3,
  p#menu4,
  p#menu5,
  p#menu6 {
    position: initial;
    line-height: 22pt;
  }

  div#cheader {
    height: 200px
  }

  div#content {
    top: 155px;
  }

  div#about_content {
    top: 155px;
  }

  div#id_content {
    top: 155px;
  }
}


div#lissajous {}