body {
  margin: 0;
  padding: 0;
  /*  font-size:120%;
  */
  background-image: linear-gradient(to bottom, rgb(250, 253, 255, 0.88),
      rgb(255, 252, 238, 1.0), rgb(255, 245, 216, 1.0), rgba(213, 255, 245, 1.0)), url(./svg_gradient.svg); 

  /* background-image: linear-gradient(to bottom, rgb(255, 255, 255, 1.0),
      rgb(255, 252, 238, 1.0), rgb(255, 245, 216, 1.0), rgba(213, 255, 245, 1.0)), url(./svg_gradient.svg); */
  background: no-repeat, cover;
  background-color: transparent;

  background-size: cover;
  
}

.bg {

  position: fixed;
  /* Sit on top of the page content */

  /* The image used */
  background-image: url(./svg_gradient.svg);
  opacity: 0.5;
  /* Full height */
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;


  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 110;
  pointer-events: none;
  mix-blend-mode: screen;
}

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


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

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

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

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

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

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

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

@font-face {
  font-family: OpenSans Semibold;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(../fonts/OpenSans-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: 1050px;
  left: 0px;

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

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

}


#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;
  /*120px*/


  background: WHITE;

}

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

  width: 100%;
  height: 48px;

  background-color: rgba(255, 255, 255, 0.8);
  /* opacity: 0.8; */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

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


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

.container-row::after {
  content: "";
  clear: both;
  display: table;


}

.container-column {

  float: left;
  /* color: white;
    padding-bottom: 0px;
    padding-left:0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: -4px; */
  width: 50%;
  display: none;

  padding-right: 2.5px;
  padding-bottom: 0px;
  /* padding-bottom:5px;
    padding-left:5px; */
  /* margin-bottom: -4px; */
  /* qqq fix for block labels */
  position: relative;
  /* text-align: center; */
  /* color: white; */

  box-sizing: border-box;

}

.container-column-r {
  float: left;
  /* color: white;
    padding-bottom: 0px;
    padding-left:0px;
    padding-top: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: -4px; */
  width: 50%;
  display: none;

  padding-left: 2.5px;
  padding-bottom: 0px;


  /* padding-bottom:5px;
    padding-left:5px; */
  /* margin-bottom: -4px; */
  /* qqq fix for block labels */
  position: relative;
  /* text-align: center; */
  /* color: white; */

  box-sizing: border-box;
}

.container-column-empty {
  float: left;
  color: rgb(223, 223, 223);
  padding-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: -4px;
  width: 50%;
  display: none;
  background-color: #00000028;
  /* qqq fix for block labels */
  position: relative;
  /* text-align: center; */
  /* color: white; */

  height: inherit;

  box-sizing: border-box;


}

.container {
  position: relative;
  text-align: center;
  color: white;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: -1px;
  width: 100%;
}

/* element targeting */
/* .container:hover .desTextR { */
/* color: #000;
    background-color: white;
    /* padding: 20px 30px 20px 30px; */
/*padding: 1em 1.3em 1em 1.3em; */
/* } */

/* .container .desTextR {} */

.container:hover .desTextR-invert {
  transition: 0.2s;

  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  /* padding: 1em 1.3em 1em 1.3em; */
}

.container:hover .desTextR {
  transition: 0.2s;

  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  /* padding: 1em 1.3em 1em 1.3em; */

}

.container:hover #patent1Img,
.container:hover #insightImg,
.container:hover #exptocImg {
  transition: 0.2s;
  outline: 3px dotted rgb(0, 0, 0);
  outline-offset: -10px;

}

.container:hover #caddyImg,
.container:hover #serenityImg,
.container:hover #moodmixImg,
.container:hover #cognitiveImg,
.container:hover #bbImg,
.container:hover #hrideImg,
.container:hover #hexpImg,
.container:hover #oldWebImg,
.container:hover #renderImg,
.container:hover #quiverImg {
  transition: 0.2s;
  outline: 3px dotted rgb(255, 255, 255);
  outline-offset: -10px;

}

/* targeting tiled */
.container-column:hover .desTextR-invert,
.container-column-r:hover .desTextR-invert {
  transition: 0.2s;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  /* padding: 1em 1.3em 1em 1.3em; */
}

.container-column:hover .desTextR,
.container-column-r:hover .desTextR {
  transition: 0.2s;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  /* padding: 1em 1.3em 1em 1.3em; */
}

.container-column:hover #insightImg,
.container-column-r:hover #patent1Img,
.container-column:hover #exptocImg {
  transition: 0.2s;
  outline: 3px dotted rgb(0, 0, 0);
  outline-offset: -10px;
}

.container-column-r:hover #caddyImg,
.container-column:hover #serenityImg,
.container-column-r:hover #moodmixImg,
.container-column:hover #cognitiveImg,
.container-column-r:hover #bbImg,
.container-column-r:hover #hrideImg,
.container-column:hover #hexpImg,
.container-column-r:hover #oldWebImg,
.container-column:hover #renderImg,
.container-column:hover #quiverImg {
  transition: 0.2s;
  outline: 3px dotted rgb(255, 255, 255);
  outline-offset: -10px;
}


.blockLabel_tiled {

  /* position: absolute;
    bottom: 20px;
    right: 50%; */

  position: absolute;
  bottom: 3px;
  right: 0px;

}

.blockLabelRight_tiled {

  position: absolute;
  bottom: 3px;
  right: 0px;

}

.blockLabel {

  position: absolute;
  bottom: 0px;
  right: 0px;

}

/*
  Fix and upload alignment for tiled mode 
  */
.blockLabel-inverted {

  position: absolute;
  bottom: 5px;
  right: 3px;

}

.blockLabel-inverted-nonTiled {
  position: absolute;
  bottom: 4px;
  right: 0px;
}


/* classes */
.desText {


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

  text-align: right;
  color: rgb(165, 165, 165);
  /*FFFFFF*/
  font-size: 0.9em;
  line-height: 22pt;
  padding-bottom: 20px;
  font-weight: 500;
  margin-right: 20px;
  /*max-width: 860px;*/
}

.desTextR {

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

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

  text-align: right;
  color: rgb(255, 255, 255);
  /*FFFFFF*/
  font-size: 1.5em;
  /*font-size: calc(1.2em + 0.5vw); /*1.5em;*/

  /* scaling formula
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
    */
  font-size: calc(20.5px + (22.5 - 20.5) * ((100vw - 400px) / (800 - 400)));

  line-height: 22pt;
  /* margin-bottom: 20px; */
  font-weight: 500;
  margin-right: 0px;
  padding: 0.83em;
  transition: 0.1s;
  /*max-width: 860px;*/
}

.desTextR:hover {
  transition: 0.2s;

  color: #000;
  background-color: white;
  /* padding: 20px 30px 20px 30px; */
  padding: 1em 1.3em 1em 1.3em;


}

.desTextR-invert {

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

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

  text-align: right;
  color: black;
  font-size: 1.5em;

  /* scaling formula
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
    */
  font-size: calc(20.5px + (14 - 12) * ((100vw - 400px) / (800 - 400)));

  line-height: 22pt;
  font-weight: 500;
  margin-right: 0px;
  padding: 0.83em;
  /*max-width: 860px;*/
  transition: 0.1s;

}

.desTextR-invert:hover {
  transition: 0.2s;

  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding: 1em 1.3em 1em 1.3em;

}


.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: #aeaeae;

  /*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;
  /*110px*/
}

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: 50px;
  /*155px*/
  /*right: 5px; 87px; 158px*/
  overflow: visible;
  padding-left: 0px;
  /*23*/
  padding-right: 0px;
  /* background-color: transparent; */
  visibility: visible;
  /* height: 100%; */

}


div#main_content_tiled {

  position: relative;
  z-index: 105;
  top: 50px;
  /*155px*/
  /*right: 5px; 87px; 158px*/
  /* overflow: visible; */
  padding-left: 5.2px;
  /*23*/
  padding-right: 5.2px;
  visibility: hidden;
  /* background-color: gray; */

}

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;
  /*115*/
  /* background-color: #284848; */

}

p#title {

  color: #151515;
  bottom: 20px;

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

  line-height: 15pt;
  position: absolute;
  /* font-family: 'Qwitcher Grypen', cursive; */
  /* font-family: 'Nixie One', cursive; */
  /* font-family: 'Raleway', sans-serif; */
  /* font-weight:800; */
  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: #000;
  bottom: 9px;
  /*15 before animation */

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


}

p#menu2 {

  color: #000000;

  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: #000000;

  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;

}

#copyright2 {
  /* 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: 200px;
  color: #252525;
  font-size: 0.75em;
  line-height: 15pt;
}


#copyright {


  max-width: 100%;
  left: 0px;
  text-align: center;

  /* 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: 200px;
  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: #000000;
  text-decoration: none;
}

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

a:hover {
  color: #000000;
  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: #000000;
}


.hover-5:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  transform: scaleY(0);
  background-color: #000;
  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;
}



a.logoName {
  color: #000;
}

a.logoName:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleY(0);
  background-color: rgb(200, 200, 200);
  transition: transform 0.3s;

}

a.logoName:hover:after {
  transform: scaleY(1);

}

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

  /* a.logoName {
      color: #000;
    } */


}

/* 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: black;
      inherits: false;
    }
  
    @property --myColor2 {
      syntax: '<color>';
      initial-value: black;
      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); */

    /*--myColor1: rgb(255, 132, 0);*/
    /*--myColor2: rgb(255, 140, 0);*/

    /* 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) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    } */

}

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

  width: 100%;

  /* height:110px; */
  transition: 0.2s;
  /* outline: 3px dotted rgba(255, 255, 255, 0); */
  outline-offset: -6px;
}

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


  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;
}

#serenityImg {
  /* padding: 55px;
    background: url("./assets/serenity.jpg");
    background-repeat: no-repeat;
    background-size: cover; */

  width: 100%;
  transition: 0.2s;
  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

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

  transition: 0.2s;

  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;
}

#caddyImg {
  /* padding: 55px;
    background: url("./assets/caddy.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  transition: 0.2s;
  width: 100%;
  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

#caddyImg:hover {
  /* background: url("./assets/caddy.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* background-position: right; */
  transition: 0.2s;
  /* outline: 6px double rgb(255, 255, 255);
    outline-offset: -12px; */
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;


}

#insightImg {

  width: 100%;

  transition: 0.2s;

  outline: 3px dotted rgb(0, 0, 0, 0);
  outline-offset: -6px;
  /*
    border-color: black;
    border-width: 10px;*/
}

#insightImg:hover {

  transition: 0.2s;
  /* outline: 6px double rgb(255, 255, 255);
    outline-offset: -12px; */
  /* outline: 3px dotted rgb(0, 0, 0); */
  outline-offset: -6px;


}

#exptocImg {

  transition: 0.2s;
  width: 100%;
  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

#exptocImg:hover {

  transition: 0.2s;
  /* outline: 6px double rgb(255, 255, 255);
    outline-offset: -12px; */
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;


}

#oldWebImg {

  transition: 0.2s;
  width: 100%;
  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

#oldWebImg:hover {

  transition: 0.2s;
  /* outline: 6px double rgb(255, 255, 255);
    outline-offset: -12px; */
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;


}

#renderImg {

  transition: 0.2s;
  width: 100%;
  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

#renderImg:hover {

  transition: 0.2s;
  /* outline: 6px double rgb(255, 255, 255);
    outline-offset: -12px; */
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;


}


#cognitiveImg {
  width: 100%;
  /* padding: 55px;
    background: url("./assets/cognitivegames.jpg");
    background-repeat: no-repeat;
    background-size: cover; */

  transition: 0.2s;

  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

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

  transition: 0.2s;

  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;
}

#moodmixImg {
  /* padding: 55px;
    background: url("./assets/moodmix.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  width: 100%;
  transition: 0.2s;

  /* outline: 3px dotted rgb(255, 255, 255, 0); */
  outline-offset: -6px;
}

#moodmixImg:hover {
  /* background: url("./assets/moodmix.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* background-position: right; */
  transition: 0.2s;

  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;

}



#terrainImg {
  width: 100%;
  /* padding: 55px;
    background: url("./assets/terrain.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  transition: 0.2s;
}

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


  transition: 0.2s;
}


#oldWebImg {

  width: 100%;
  /* 
    padding: 55px;
    background: url("./assets/oldweb.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  transition: 0.2s;

}

#oldWebImg:hover {
  /* background: url("./assets/oldweb.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* background-position: right; */
  transition: 0.2s;
}


/* 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: 200px;
    background: url("./assets/hrideBig.jpg");
    background-repeat: no-repeat;
    background-size: cover; */

  /* background-size:auto;
    background-repeat: no-repeat;
    opacity: 1; */
  width: 100%;
  /* height:110px; */
  transition: 0.2s;
  /* outline: 3px dotted rgba(255, 255, 255, 0); */
  outline-offset: -6px;
}

#hrideImg:hover {
  /* background: url("./assets/hrideBig.jpg"); */
  /* opacity: 1; */

  /* background-repeat: no-repeat; */
  /* background-size: cover; */
  /* background-repeat: no-repeat;
    background-size: cover; */
  /* background-position: -936px 0px; */

  transition: 0.2s;
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;
}

/* 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 {

  width: 100%;
  /* 
    padding: 55px;
    background: url("./assets/hexp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* max-width: 850px;
      height: 100px;*/
  transition: 0.2s;

  /* outline: 3px dotted rgba(255, 255, 255, 0); */
  outline-offset: -6px;

}

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

  transition: 0.2s;
  /* outline: 3px dotted rgb(255, 255, 255); */
  outline-offset: -6px;
}

/*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 {
  width: 100%;
  /* padding: 55px;
    background: url("./assets/twatch.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  transition: 0.2s;

  /* max-width: 850px;
      height: 100px;*/
}

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

  transition: 0.2s;
}

/*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 {

  width: 100%;
  /* padding: 55px;
    background: url("./assets/revis.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* max-width: 850px;
      height: 100px;*/
  transition: 0.2s;

}

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


}

/*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: 60px;
  background: url("./assets/patriot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
      height: 100px;*/

  opacity: 0.7;
}

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

  opacity: 1;
}

/* 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: 60px;
  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 {

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

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

  transition: 0.2s;
}

/* 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 {
  width: 100%;
  /* padding: 55px;
    background: url("./assets/plant.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* max-width: 850px;
      height: 100px;*/

  transition: 0.2s;

}

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

  transition: 0.2s;


}


/* 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 {

  width: 100%;
  /* padding: 55px;
    background: url("./assets/dragonfly.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* max-width: 850px;
      height: 100px;*/
  transition: 0.2s;

}

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

  transition: 0.2s;

}

/* 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: 60px;
  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 {

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

  transition: 0.2s;
}

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

  transition: 0.2s;
}

/* 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 {
  width: 100%;
  /* 
    padding: 55px;
    background: url("./assets/watch2.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* max-width: 850px;
      height: 100px;*/
  transition: 0.2s;

  outline: 3px dotted rgba(0, 0, 0, 0);
  outline-offset: -6px;

}

#patent1Img:hover {
  /* 
    background: url("./assets/watch2.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* background-position: right; */

  transition: 0.2s;

  /* outline: 3px dotted rgb(0, 0, 0); */
  outline-offset: -6px;

}


/* 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 {
  width: 100%;
  /* padding: 55px;
    background: url("./assets/jp.jpg");
    background-repeat: no-repeat;
    background-size: cover; */
  /* max-width: 850px;
      height: 100px;*/

  transition: 0.2s;

}

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


  transition: 0.2s;

}

/* 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 {
  width: 100%;

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

  /* outline-offset: -6px; */

  /* outline: 3px dotted rgba(255, 255, 255, 0); */

}

#quiverImg:hover {
  width: 100%;

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

  /* transition: 0.2s; */

  /* outline: 3px dotted rgb(255, 255, 255); */
  /* outline-offset: -6px; */

}

/* 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: 60px;
  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: 975px) {

  div#titleImage {
    visibility: hidden;

  }

}

/* #content:fullscreen {
    max-width: 500px;
  }  */

/* 
  @media screen and (min-width: 1300px) {
    .desTextR {
      font-size: 1.9em;
    }
    .desTextR-invert {
      font-size: 1.9em;
  
    }
  } */

@media screen and (min-width: 2560px) {

  /* .desTextR {
      font-size: 2.35em;
  
    }
  
    .desTextR-invert {
      font-size: 2.35em;
  
    } */

  div#content {
    max-width: 100%;
    background-color: transparent;
  }

  div#main_content_tiled {
    visibility: visible;
  }

  .container-column {
    display: initial;
  }

  .container-column-r {
    display: initial;

  }

  .container-column-empty {

    display: initial;
  }

  div#main_content {
    display: none;
  }

}

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

  /*   
    div#titleImage {
      left: 500px;
    }
    
  } */

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

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

    }


    div#fillerTransparentWhite {
      height: 120px
    }

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

    div#cheader {
      height: 120px
    }

    /* fix gradient gap by shifting main_content*/
    /* div#content {
      top: 70px;
    } */

    div#main_content {
      top: 120px;
    }

    div#about_content {
      top: 155px;
    }

    div#id_content {
      top: 155px;
    }
  }

}

/* div#lissajous {} */
.hover-6 {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 2px 10px 2px 10px;
  color: #000000;
  /* bottom: 0; */
  left: 0;
  right: 0;
  /* width: 100%; */
  /* height: 30px; */
  /* transform: scaleY(0); */

}

.hover-6:hover {
  /* transform: scaleY(1); */
  color: #FFFFFF;
  transition: 0.1s;
  padding: 2px 10px 2px 10px;

  background-color: #000;
  /* padding-left: 5px; */
}