body { background:#46a; font-family:sans-serif; margin:0px; padding:0px; overflow:auto;}
#header { position:relative; height:70px;  }
#logo { height:80%; margin: 12px 0 0 20px; background-size:auto auto; top:0; left:0;}
#tagline { color:#ff0; font-size:14px; position:absolute; top:34px; left:90px; font-style:italic; letter-spacing:.05em; text-shadow:0px 0px 5px black;}
#xref { position:absolute; right:10px; top:25px; color:#fff;}

#intro_wrapper { width:100%; display:inline-block; position:relative;  font-size:4.5vw; border-top: black solid 3px;
  border-bottom: black solid 3px;
}
#intro_wrapper:after { padding-top:46.5%; display:block; content:'';}
#intro.show {
  background:#fff;
  position: absolute; top:0; bottom:0; right:0; left:0;
  width:100%;
  overflow:hidden;
}

#rightbar { position:absolute; right:0px; top:0px; width:25%; text-align:center;
  background-image:url(/img/swoop.png); 
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
  z-index:100;
  color:#fff;
  font-size:1.65vw;
}
#rightbar_text { position:absolute; top:34%; right:14%; bottom:5%; width:100%; overflow:hidden;}
#markets.show {   position:relative; width:100%; height:30px; overflow:hidden; }



.show > .sequence-canvas { height: 100%;  width: 100%; margin:0px; padding:0px;}
.show > .sequence-canvas li > * {  /* required */
    position: absolute;
}
.show > .sequence-canvas > li { /* required */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#oldboxes {   width:100%; height:100%; background:#090; background-image:url(boxes.png); background-size:100% 100%; }


#markets li {     list-style-type:none; display:block; text-align:right; line-height:180%; }



.show li.object  {
    list-style-type:none;
    display:block;
    overflow:hidden;
    visibility:hidden;
}
#intro.show li.object {
    font-size:4.5vw;
    color:#009;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

.show li.object.animate-in {
    visibility:visible;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
li.object.animate-out {
    visibility:hidden;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

.show li br,.static { position:relative !important; }

.show .element { opacity:0; -webkit-transition-property:opacity; }
.show .animate-in .element {     opacity:1;
    -webkit-transition-duration: .5s !important;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s !important;

}
.show .animate-out .element {     opacity:0;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
}
.show li.element { list-style-type:none; }


.show .animate-in .delay0 {
    -webkit-animation-delay: 0s !important; 
    animation-delay: 0s !important;
    transition-delay:0s !important;
}
.show .animate-in .delay1 {
    -webkit-animation-delay: 1s !important; 
    animation-delay: 1s !important;
    transition-delay:1s !important;
}
.show .animate-in .delay2 {
    -webkit-animation-delay: 2s !important; 
    animation-delay: 2s !important;
    transition-delay:2s !important;
}
.show .animate-in .delay3 {
    -webkit-animation-delay: 3s !important; 
    animation-delay: 3s !important;
    transition-delay:3s !important;
}

.show .animate-in .delay4 {
    -webkit-animation-delay: 4s !important; 
    animation-delay: 4s !important;
    transition-delay:4s !important;
}

.show .animate-in .delay5 {
    -webkit-animation-delay: 5s !important; 
    animation-delay: 5s !important;
    transition-delay:5s !important;
}

.show .animate-in .delay6 {
    -webkit-animation-delay: 6s !important; 
    animation-delay: 6s !important;
    transition-delay:6s !important;
}

.show .animate-in .delay7 {
    -webkit-animation-delay: 7s !important; 
    animation-delay: 7s !important;
    transition-delay:7s !important;
}

.show .animate-in .delay8 {
    -webkit-animation-delay: 8s !important; 
    animation-delay: 8s !important;
    transition-delay:8s !important;
}
.show .animate-in .delay9 {
    -webkit-animation-delay: 9s !important; 
    animation-delay: 9s !important;
    transition-delay:9s !important;
}

.element { top:0%; left:0%; right:0%; bottom:0%;}
.x1,.x2,.x3,.x4,.x5,.x6,.x7,.x8,.x9 { position:absolute; }

.x0 { left:0%; } 
.x1 { left:10%; } 
.x2 { left:20%; } 
.x3 { left:30%; } 
.x4 { left:40%; } 
.x5 { left:50%; } 
.x6 { left:60%; } 
.x7 { left:70%; } 
.x8 { left:80%; } 
.x9 { left:90%; } 

.y0 { top:0%; } 
.y1 { top:10%; } 
.y2 { top:20%; } 
.y3 { top:30%; } 
.y4 { top:40%; } 
.y5 { top:50%; } 
.y6 { top:60%; } 
.y7 { top:70%; } 
.y8 { top:80%; } 
.y9 { top:90%; } 

.r0 { right:0%; } 
.r1 { right:10%; } 
.r2 { right:20%; } 
.r3 { right:30%; } 
.r4 { right:40%; } 
.r5 { right:50%; } 
.r6 { right:60%; } 
.r7 { right:70%; } 
.r8 { right:80%; } 
.r9 { right:90%; } 

.b0 { bottom:0%; } 
.b1 { bottom:10%; } 
.b2 { bottom:20%; } 
.b3 { bottom:30%; } 
.b4 { bottom:40%; } 
.b5 { bottom:50%; } 
.b6 { bottom:60%; } 
.b7 { bottom:70%; } 
.b8 { bottom:80%; } 
.b9 { bottom:90%; } 

.oldbox { border:2px solid black; border-radius:1em; width:10%; height:30%;
}
.box {
  width:30%; height:10%;
  display: block;
  border-radius: 10px;
  text-align:center;   
  background:#f9f6f2 ;
  background: linear-gradient(top, #fff 0%,rgba(255,255,255,0.1) 3%),linear-gradient(bottom, #e9e4e0 0%,rgba(255,255,255,0.1) 3%), linear-gradient(top, #e5e0d8 0%,#f9f6f1 100%);
  box-shadow:  0px -2px 0px 10px #f9f6f2, 0px 0px 0px 11px #f0ebe7, 0px -2px 0px 11px #f0ebe7, 0px 0px 0px 20px #f9f6f2, 0px 4px 1px 20px #e4e1dc, 0px -4px 0px 20px #fdfcfb, 0px 4px 20px 20px #000;
  font-size:2vw; text-transform:uppercase; color:#999;
}
.box .inset {    color:#e9e6e2; font-weight:bold; font-size:8vw; text-transform:none;}



.alignR { text-align:right;}
.alignL { text-align:left;}
.alignC { text-align:center;}

.inset {
    text-shadow: -1px -1px 0 #a9a6a2, 1px 1px 0 #fff;
}

#circles { position:relative; top:-0%; padding: 0 2.5%; z-index:100;}
#circles a {text-decoration:none; }
#circle_card .circle_image{ background-image:url(/img/carddeck.png); background-size:cover}
#circle_app .circle_image{ background-image:url(/img/app.png); background-size:cover}
#circle_train .circle_image{ background-image:url(/img/class.jpg); background-size:cover}
#circle_cloud .circle_image{ background-image:url(/img/cloud.jpg); background-size:cover}
.circle { 
  display:inline-block; 
  text-align:center;
  margin:-8% 3% 0;
  width:20%;
  position:relative;
}
.circle:after { padding-top:100%; display:block; content:'';}
.circle_image { 
  background:black;
  position:absolute; top:0; left:0; bottom:0; right:0;
  border:.3em solid white; border-radius:10em;
  box-shadow: 0px 0px 1em .2em black;
  -webkit-transition:all .2s;
  transition:all .2s;
}
.circle:hover .circle_image { background:#009; -webkit-transform:scale(1.1); transform:scale(1.1); }
.circle_text {
  position:absolute; top:100%;
  width:100%;
  color:#fff;
  font-size:2.5vw;
  margin:.5em 0;
  transition: top .5s;
}

.text_white { color:#fff; text-shadow: 0px 0px .2em black,.05em .05em .2em black;}

.animate_none {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
  transition-duration:0s !important;
}
.animate_slow2 {
  -webkit-animation-duration: 2s !important;
  animation-duration: 2s !important;
}
.animate_slow3 {
  -webkit-animation-duration: 3s !important;
  animation-duration: 3s !important;
}
.animate_slow4 {
  -webkit-animation-duration: 4s !important;
  animation-duration: 4s !important;
}
.animate_slow5 {
  -webkit-animation-duration: 5s !important;
  animation-duration: 5s !important;
  transition-duration: 6s !important;
}

#controls { position:absolute; right:0; top:7%; height:5em; width:5em; z-index:101; text-align:center; 
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
.sequence-next,
.sequence-prev,
.sequence-pause { cursor:pointer; position:relative; display:inline-block; background-position:center center; background-repeat:no-repeat; background-size:75% 75%; vertical-align:middle; border-radius:2em;
 background-color:#333;
border:2px solid black;
z-index:102;
}

.sequence-prev { width:20%; height:20%;  background-image:url(/img/prev.png); }
.sequence-pause { width:50%; height:50%; background-image:url(/img/pause.png); margin:0 -6%; z-index:101; }
.sequence-next { width:20%; height:20%; background-image:url(/img/next.png); }

.sequence-prev:hover,
.sequence-next:hover,
.sequence-pause:hover {
  box-shadow:  0px 0px .25em 0px white;
}

.sequence-pause.paused { background-image:url(/img/play.png);}

input { margin:0px; padding:.5em; outline:0px; border:1px solid #333;  }
#xref input[type=text] {   border-radius:.6em 0 0 .6em; border-right:0px;}
#xref input[type=submit] { background:#555;  border-radius:0 .6em .6em 0; color:#fff; border-left:0px; }
#xref input[type=submit]:hover { background:#666;  }

.big {font-size:90%; }
b.static {  font-weight:bold; }

#progress { display:block; position:absolute; color:#aaa; font-size:35%; top:-10%; left:0; right:0; text-align:center; }

#access {
  position:absolute;  right:5%;  top:25%;
  z-index:201;
  text-align:center;
}
#access a {
  font-size:140%;
  text-decoration:none;
  color:#000;
  background:#6ee082;
  text-align:center;
  border-radius:1em;
  font-weight:bold;
  padding:.1em 1em;
  border:.1em solid white;
  box-shadow:0px 0px .3em .1em black;
  transition: all .2s;
  display:block;
}
#access a:hover {   transform:scale(1.05);}

#login { position:absolute; right:3%; top:13%; width:15%; }
#login input { width:100%; }
#login input:first-child { border-radius:.6em .6em 0 0; }
#login input[type=submit] {  background:#555; color:#fff; border-radius:0 0 .6em .6em; }
#login input[type=submit]:hover {  background:#666; }

#homepage #content {
margin:8em auto;
background:#fff;
max-width:40em;
box-shadow:0px 0px 10px 1px black;  
padding:2em;
border-radius:1em;
}
span.click { font-size:60%; color:#ccc; color:rgba(255,255,255,.3); }
span.reflect {  background:url(/img/logo_black.svg) no-repeat; display:inline-block; background-size:auto 100%;
background-position:center center;}
span.reflect::after { 
  content:' ';
  position:absolute;
  top:100%;
  width:100%;
  height:100%;
  top:100%; left:0;
  background:url(/img/logo_black.svg) no-repeat;
  background-position:center center;

-moz-transform: scaleY(-1);  
    -o-transform: scaleY(-1);  
    -webkit-transform: scaleY(-1);  
    -ms-transform: scaleY(-1);    
    transform: scaleY(-1);  

 box-shadow:inset 0 1.8em 1em -0.5em #000; 
}

@media only screen and (max-width : 800px) {
  #header { max-height:35px;  }
  #logo { margin:5px;  background-size:auto 100%;  }
  #tagline { display:none; }
  #access { max-width:33%; font-size:50%; top:25%; }
  #homepage #content { margin-top:4em; }
}
@media only screen and (max-width : 450px) {
  #login { position:relative; width:auto; max-width:auto; top:2em; right:auto; }
  #access { top:10%; }
}