* {
    box-sizing: border-box;
}
sup{font-size:0.5em}
html,
body {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fff;
    font-family: Arial, Helvetica, Verdana;
    font-size: 16px;
    line-height: 22px;
    color: #666;

    -webkit-text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 1em 0;
    font-size: 22px;
}
p {
    margin: 1em 0;
}
a,
a:link,
a:active,
a:visited,
a:hover {
    color: inherit;
}
.button a{
    text-decoration: none;    
}
nav:not(.mm-menu) {
    display: none;
}

#header {
    position: sticky;
    height: 60px;
    padding: 0 10px;
    top: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 44px;
    text-align: center;
    background: #444466;
    z-index:10000
}
#header a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 50px;
    padding: 15px 25px;
}
#header a:before,
#header a:after {
    content: "";
    display: block;
    background: #fff;
    height: 2px;
}
#header a span {
    background: #fff;
    display: block;
    height: 2px;
    margin: 7px 0;
}

#content {
    padding: 10px 20px 10px 20px;
    text-align: left;
}
.centerContainer{
    position: relative;
    z-index: -1;
}
.centerTarget{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  line-height:2.5vw
}
.tech {
    width: 50vw;
    height: 50vw;
    position: relative;
    background: #fff;
    z-index: -1;
}
.techTubes {
    position: absolute;
    left: 23%;
    top: 25%;
    width: 58%;
}
.techDNA {
    position: absolute;
    left: 32%;
    top: -1%;
    width: 40%;
    border-radius:15vw;
    border: 0.5vw hidden black;
    -webkit-filter: drop-shadow(1vw 1vw 1vw #aaa);
    filter: drop-shadow(1vw 1vw 1vw #aaa);
    cursor: pointer;
}
.techDNA:hover{
    border-radius:15vw;
    border: 0.5vw solid gray;
    -webkit-transition: all 0.20s;
    transition: all 0.20s;    
}
.techQ {
    position: absolute;
    left: -2%;
    top: 48%;
    width: 40%;
    border-radius:15vw;
    border: 0.5vw hidden black;
    -webkit-filter: drop-shadow(1vw 1vw 1vw #aaa);
    filter: drop-shadow(1vw 1vw 1vw #aaa);
    cursor: pointer;
}
.techQ:hover{
    border-radius:15vw;
    border: 0.5vw solid gray;
    -webkit-transition: all 0.20s;
    transition: all 0.20s;    
}
.techBC {
    position: absolute;
    left: 64%;
    top: 48%;
    width: 40%;
    -webkit-filter: drop-shadow(1vw 1vw 1vw #aaa);
    filter: drop-shadow(1vw 1vw 1vw #aaa);
    border-radius:15vw;
    border: 0.5vw hidden black;
    cursor: pointer;
}
.techBC:hover{
    border-radius:15vw;
    border: 0.5vw solid gray;
    -webkit-transition: all 0.20s;
    transition: all 0.20s;    
}
span {
    font-family: arial, Helvetica;
    color: #4763E1;
    margin-top: 1vw
}
div#content ul li {
    font-family: arial, Helvetica;
    color: #222;
    font-size: 1.9vw;
    margin: 1vw 10vw 0 12vw;
    line-height:1.8vw
}
div#content ol li {
    font-family: arial, Helvetica;
    color: #222;
    font-size: 1.9vw;
    margin: 1vw 10vw 0 12vw;
    line-height:1.8vw
}
p {
    font-family: arial, Helvetica;
    color: #222;
    font-size: 1.8vw;
    margin: 1vw 5vw 0 10vw;
    line-height:2.2vw
}
h1 {
    font-family: arial, Helvetica;
    color: #222;
    font-size: 2.4vw;
    margin: 2vw 6vw 0 8vw
}
h2 {
    font-family: arial, Helvetica;
    color: #444;
    font-size: 2.1vw;
    margin: 2vw 6vw 0 9.2vw
}
span {
    font-family: arial, Helvetica;
    color: #4763E1;
    margin-top: 1vw
}
footer{
    font-family: arial, Helvetica;
    color: #222;
    font-size: 1.4vw;
    margin: 2vw 6vw 0 8vw;
    line-height:1.3vw;
    text-align:center;
    color:#888899;background:#eeeeef;
    padding:1vw;
    border-radius:2vw
 }

.hamburger{text-align:left;vertical-align:middle}
#logo{height:12vw;vertical-align:middle;margin:1vw}
#top{background:#eeeeef;border-radius:2vw}
#title{vertical-align:middle;float:right;display:inline-block;font-size:6vw;margin:6vw 3vw 1vw 1vw}
#ft{padding: 13px 0 0 0}
#portalz{float:right;width:290px;margin-top:-12px}

#title {
    vertical-align: middle;
    float: right;
    display: inline-block;
    font-size: 6vw;
    margin: 6vw 3vw 1vw 1vw
}
.data table{
     font-family: arial, Helvetica;
    color: #222;
    font-size: 1.8vw;
    /*margin: 1vw 5vw 0 10vw*/   
}
.data th{
    background:#4763E1;
    color:#fff;
    padding:1vw;
    font-size: 2vw;
    text-align:center
}
.data td{
    padding:1vw;
    vertical-align:top;
    text-align:center
}
.data td:first-child { 
    text-align: left; 
    background:#eeeeff;
}

.toc{
     font-family: arial, Helvetica;
    color: #222;
    font-size: 1.8vw;
    margin: 2vw 6vw 0 8vw;
}
.toc th{
    background:#eeeeff;
    color:#000;
    padding:0.5vw;
    font-size: 2vw;
    text-align:center
}
.toc tr{
    cursor:pointer
}
.toc tr:hover td{
  background-color: lightyellow;
}
.toc td{
    vertical-align:middle;
    padding:0 0.4vw 0 0.4vw;
    background:#efefef;
    line-height:2vw
}
.toc td:first-child { 
    text-align: left; 
    background:#eeeeef;
    white-space:nowrap
}
.eye{
    width:2.2vw;
    vertical-align:middle;
    margin:1vw
}
#bag{
    position:absolute;
    left:15px;
    top:3px;
}
#licensing {
    position:absolute;
    top:6px;
    width:178px;
    height:44px;
    left:30vw;
    -moz-border-radius:22px;  
    border-radius: 22px;  
    -webkit-border-radius: 22px; 
    background-color:#444466;
    font-size:24px;
    font-weight:bold;
    color:#ffffff !important;
    vertical-align:top;
    padding:2px 10px 2px 48px;
    text-decoration: none;
   -webkit-box-shadow: 2px 2px 4px 0 rgba(76, 50, 50, 0.75);
   -moz-box-shadow:    2px 2px 4px 0 rgba(76, 50, 50, 0.75);
   box-shadow:         2px 2px 4px 0 rgba(76, 50, 50, 0.75);
   outline: none; 
   vertical-align:middle;
   cursor:pointer;
}
#shop:hover {
    background-color:#555577;
}
#scrollTop{
  position: fixed; 
  display: none; 
  bottom: 0;
  right: 0; 
  z-index: 99; 
  cursor: pointer; 
  margin: 1vw; 
  width:5vw;
}

@media all and (orientation:portrait) {
/* Phone vertical */
	div#content ul li {
	    font-size: 1.9vw;
	    margin: 1vw 10vw 0 6vw;
	    line-height:1.8vw
	}
	div#content ol li {
	    font-size: 1.9vw;
	    margin: 1vw 10vw 0 6vw;
	    line-height:1.8vw
	}
	p {
	    font-size: 2.5vw;
	    margin: 1vw 5vw 0 4vw;
	    line-height:2.9vw
	}
	h1 {
	
	    font-size: 2.9vw;
	    margin: 2vw 6vw 0 2vw
	}
	#shop {left:20vw;}
}

.button {
    -moz-border-radius:2vw;  
    border-radius: 2vw;  
    -webkit-border-radius: 2vw; 
    background-color:#444466;
    font-size:2vw;
    color:#ffffff !important;
    vertical-align:top;
    padding:0.5vw 2vw 0.5vw 2vw;

    text-decoration: none;
   -webkit-box-shadow: 0.5vw 0.5vw 1vw 0 rgba(76, 50, 50, 0.75);
   -moz-box-shadow:    0.5vw 0.5vw 1vw 0 rgba(76, 50, 50, 0.75);
   box-shadow:         0.5vw 0.5vw 1vw 0 rgba(76, 50, 50, 0.75);
   outline: none; 

}
.c{
  text-align:center;  
}
.imageContainer {
    height: 12vw;
    border-radius:6vw;
    border-width:0.3vw;
    border-color:#000;
    vertical-align:middle;
    margin:1vw;
    width: 12vw;
    overflow: hidden !important;
    display:inline-block;
}

.imageContent{
    background: url('../image/Mandelbrot_sequence.gif') no-repeat center center;
    background-size: 100%;
  width: 16vw;
  height: 12vw;
  padding-top: 3%;
    padding-bottom: 3%;
    min-width: 12vw;
    overflow: hidden !important;
}