html, body { padding: 0; margin: 0; background: #000; font-family: "Verdana", "Arial", "Helvetica"; overflow: hidden; }
.hidden { display: none !important; }
.invisible { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); opacity: 0; display: block !important; }
.invisible-2 { visibility: hidden; }
.clear { clear: both; }

#parallax { width: 100%; height: 100%; }
#viewport, #overlay, #overlay-background { position: absolute; width: 100%; height: 100%; }
#background, #sun, #orbit-inner, #asteroid-belt, #orbit-outer, #clouds, #kuiper-inner, #kuiper-outer, #comet, #voyager { position: absolute; }
#background { width: 3000px; height: 2000px; z-index: 1; }
#asteroid-belt { width: 1216px; height: 527px; z-index: 2; }
#orbit-outer { width: 2286px; height: 1000px; z-index: 4; }
#sun { width: 475px; height: 475px; z-index: 5; }
#clouds { width: 2792px; height: 1611px; z-index: 6; }
#kuiper-inner { width: 2866px; height: 1972px; z-index: 7; }
#kuiper-outer { width: 3192px; height: 1841px; z-index: 8; }
#comet { width: 349px; height: 196px; z-index: 9; }
#voyager { width: 442px; height: 473px; z-index: 10; }
#orbit-inner { width: 839px; height: 361px; z-index: 15; }

#kuiper-inner.mobile img { width: 1433px; height: 1972px; float: left; margin: 0; padding: 0; border: 0; }
#kuiper-outer.mobile img { width: 1596px; height: 1841px; float: left; margin: 0; padding: 0; border: 0; }
#clouds.mobile img { width: 1396px; height: 1611px; float: left; margin: 0; padding: 0; border: 0; }

#overlay-background {
  display: none;
  background: #000;
  opacity: 0.25;
  z-index: 14;
}
#cursor-tooltip-target,
#cursor-tooltip-cursor {
  position: absolute;
  display: none;
  padding: 3px 8px;
  color: #53a3b2;
  border: 1px solid #53a3b2;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -ms-border-top-left-radius: 10px;
  -o-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  background: transparent url('../images/interface/navigation-color.png') repeat;
}
#cursor-tooltip-target {
  top: 190px;
  left: 190px;
}

#overlay { z-index: 20; }
#overlay .overlay-object {
  position: absolute !important;
  overflow: visible !important;
  width: 0 !important;
  height: 0 !important;
}
#cursor {
  position: absolute;
  z-index: 15;
  width: 222px;
  height: 222px;
  margin-top: -111px;
  margin-left: -111px;
}
#cursor-layer-1 {
  position: absolute;
  opacity: 0.62;
  width: 222px;
  height: 222px;
  top: 0;
  left: 0;
}
#cursor-layer-2 {
  position: absolute;
  opacity: 0.28;
  width: 222px;
  height: 222px;
  top: 0;
  left: 0;
}
.cursor-active #cursor-layer-1 {
  opacity: 1 !important;
}
.cursor-active #cursor-layer-2 {
  opacity: 0.7 !important;
}

#nasa-link,
#sse-home-link,
#sse-ss101-link,
#sse-help-link,
#sse-feedback-link {
  float: left;
  background: transparent url('../images/link-sprite.png') no-repeat;
}
#sse-home-link,
#sse-ss101-link,
#sse-help-link,
#sse-feedback-link {
  display: none;
}
#nasa-link {
  background-position: -24px -56px;
  height: 41px;
  width: 49px;
}
#sse-ss101-link {
  background-position: 0 0;
  height: 18px;
  width: 183px;
  position: absolute;
  right: 5px;
  top: 5px;
}
a#sse-ss101-link:hover,
a#sse-ss101-link:active {
  background-position: 0 -18px;
}
#sse-help-link {
  background-position: 0px -56px;
  height: 41px;
  width: 12px;
  position: absolute;
  left: 3px;
  top: 140px;
}
a#sse-help-link:hover,
a#sse-help-link:active {
  background-position: -12px -56px;
}
#sse-feedback-link {
  background-position: 0 -113px;
  height: 88px;
  width: 12px;
  position: absolute;
  left: 3px;
  top: 197px;
}
a#sse-feedback-link:hover,
a#sse-feedback-link:active {
  background-position: -12px -113px;
}
#sse-home-link {
  background-position: 0 -36px;
  height: 10px;
  width: 300px;
  position: absolute;
  left: 10px;
  top: 4px;
}
a#sse-home-link:hover,
a#sse-home-link:active {
  background-position: 0 -46px;
}

/** --- INTERFACE ELEMENTS --- **/
#loading-text {
  color: #fff;
  width: 300px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -150px;
  font-size: 14px;
  letter-spacing: 5px;
}
#loading-overlay {
  background: #000;
  position: absolute;
  z-index: 30;
  height: 100%;
  width: 100%;
}
#sse-beta {
  color: #7bebff;
  font-size: 9px;
  position: absolute;
  top: 18px;
  left: 10px;
  display: none;
}
#top-left-1,
#top-left-2,
#bottom-right-1,
#bottom-right-2,
#top-left-navigation-container,
#top-right {
  z-index: 40;
}
#top-left {
  position: absolute;
  overflow: visible;
  top: -30px;
  left: 10px;
  height: 0;
  width: 0;
}
#top-left-1 {
  position: absolute;
  overflow: hidden;
  width: 220px;
  height: 29px;
  top: 0px;
  right: -237px;
}
#top-left-2 {
  position: absolute;
  overflow: hidden;
  width: 18px;
  height: 0px;
  top: 18px;
  left: 0px;
}
#top-left-image-1 {
  position: absolute;
  right: 0;
  opacity: 0.5;
}
#top-left-image-2 {
  position: absolute;
  opacity: 0.5;
}
#top-right {
  position: absolute;
  top: 10px;
  right: 10px;
}
#bottom-right {
  position: absolute;
  overflow: visible;
  bottom: 90px;
  right: -1px;
  height: 0;
  width: 0;
}
#bottom-right-1 {
  position: absolute;
  overflow: hidden;
  width: 29px;
  height: 66px;
  right: -384px;
}
#bottom-right-2 {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 18px;
  bottom: -81px;
  right: -367px;
}
#bottom-right-image-1 {
  position: absolute;
  left: 0;
  opacity: 0.5;
}
#bottom-right-image-2 {
  position: absolute;
  right: 0;
  opacity: 0.5;
}
#bottom-right-loading {
  position: absolute;
  top: 3px;
  left: 3px;
  border: none;
}
#bottom-left {
  position: absolute;
  z-index: 50;
  left: 9px;
  bottom: 9px;
  width: 98px;
  height: 30px;
  cursor: pointer;
}
#bottom-left-image,
#sound-state,
#sound-on,
#sound-off {
  position: absolute;
}
#sound-on,
#sound-off {
  font-size: 11px;
  letter-spacing: 2px;
  top: 14px;
}
#sound-on {
  left: 35px;
  color: #6cd0e5;
}
#sound-off {
  left: 65px;
  color: #000;
}
#sound-state {
  top: 7px;
  left: 5px;
}
.sound-off #sound-state {
  opacity: 0.5;
}
.sound-off #sound-on {
  color: #000;
}
.sound-off #sound-off {
  color: #6cd0e5;
}
.bottom-right-loading-active,
#bottom-right-loading:hover {
  -webkit-animation-duration: 750ms;
  -webkit-animation-name: counterclock-spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 750ms;
  -moz-animation-name: counterclock-spin;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -o-animation-duration: 750ms;
  -o-animation-name: counterclock-spin;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  animation-duration: 750ms;
  animation-name: counterclock-spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/** --- END INTERFACE ELEMENTS --- **/

/** --- TOP LEFT NAVIGATION --- **/
#top-left-navigation-container {
  position: absolute;
  visibility: hidden;
  top: 10px;
  left: 260px;
  z-index: 40;
  border: 1px solid #264145;
  background: transparent url('../images/interface/navigation-color.png') repeat;
  opacity: 0.9;
}
.sse-navigation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sse-navigation-item {
  font-size: 11px;
  line-height: 18px;
}
.sse-navigation-title {
  font-size: 11px;
  margin-top: -1px;
  height: 27px;
  letter-spacing: 1px;
  border: 1px solid transparent;
  cursor: pointer;
}
.sse-navigation-title-text {
  margin-left: 10px;
}
.sse-navigation-item .sse-navigation-title-link {
  float: left;
  padding: 5px 10px;
}
.sse-navigation-active .sse-navigation-title-link,
.sse-navigation-selected .sse-navigation-title-link {
  color: #fff !important;
}
.sse-navigation-title .blue-arrow {
  position: absolute;
  margin-top: 4px;
  margin-right: 5px;
  border-left: 5px solid #53a3b2;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: none;
  font-size: 0px; 
  line-height: 0%; 
  width: 0px;
}
.sse-navigation-active .blue-arrow,
.sse-navigation-selected .blue-arrow {
  border-left-color: #fff;
}
.sse-navigation-item-link,
.sse-navigation-title-link {
  color: #53a3b2;
  font-weight: normal;
  text-decoration: none;
}
#top-left-navigation .sse-navigation-list {
  display: none;
  padding: 0 20px 10px 20px;
}
#top-left-navigation .sse-navigation-item {
  color: #53a3b2;
  font-weight: normal;
}

/** NARROW **/
.sse-navigation-narrow .sse-navigation-in-submenu > .sse-navigation-item {
  display: none;
}
.sse-navigation-narrow .sse-navigation-in-submenu .sse-navigation-active,
.sse-navigation-narrow .sse-navigation-in-submenu .sse-navigation-selected,
.sse-navigation-narrow .sse-navigation-in-submenu .sse-navigation-list {
  display: block !important;
}
.sse-navigation-narrow .sse-navigation-in-submenu .blue-arrow {
  border-right: 5px solid #53a3b2 !important;
  border-left: 0 solid transparent !important;
}
.sse-navigation-narrow .sse-navigation-in-submenu .blue-arrow {
  border-right-color: #fff !important;
}
/** END NARROW **/

/** WIDE **/
#top-left-navigation-container.sse-navigation-wide {
  height: 27px;
}
.sse-navigation-wide .sse-navigation-item,
.sse-navigation-wide .sse-navigation-title {
  position: relative;
  float: left;
}
.sse-navigation-wide .sse-navigation-active,
.sse-navigation-wide .sse-navigation-active .sse-navigation-list {
  display: block !important;
  background: transparent url('../images/interface/navigation-color.png') repeat;
}
.sse-navigation-wide .sse-navigation-active .sse-navigation-list,
.sse-navigation-wide .sse-navigation-active .sse-navigation-item {
  display: block !important;
  float: none;
}
.sse-navigation-wide .sse-navigation-active a {
  color: #53a3b2;
  font-weight: normal;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.sse-navigation-wide .sse-navigation-active .sse-navigation-list,
.sse-navigation-wide .sse-navigation-selected .sse-navigation-list {
  position: absolute;
  padding: 10px 20px !important;
  top: 100%;
  margin-top: -1px;
  border: 1px solid #53a3b2;
}
.sse-navigation-wide .sse-navigation-active .sse-navigation-title,
.sse-navigation-wide .sse-navigation-selected .sse-navigation-title {
  height: 27px !important;
  border: 1px solid #53a3b2 !important;
}
.sse-navigation-wide .sse-navigation-two-column {
  width: 280px;
  padding: 10px 10px 10px 20px !important;
}
.sse-navigation-wide .sse-navigation-two-column a {
  white-space: normal;
}
.sse-navigation-wide .sse-navigation-two-column .sse-navigation-item {
  width: 130px;
  margin-right: 10px;
  float: left;
}
/** END WIDE **/
/** --- END TOP LEFT NAVIGATION --- **/


/** --- ORBIT INNER WINDOW --- **/
#orbit-inner-window {
  position: absolute; 
  visibility: hidden;
  width: 294px; 
  height: 194px;
  left: 0;
  bottom: 0;
  margin-left: 50px;
  margin-bottom: 50px;
  border: 1px solid #82ecff;
  background: #000;
  overflow: hidden;
}
#orbit-inner-window,
#orbit-inner-window-content {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
}
#orbit-inner-window-content {
  display: none;
  width: 294px; 
  height: 194px;
  background: #000 url('../images/inner-window.png') no-repeat 0 0;
}
#orbit-inner-title {
  color: #5dc1d3;
  background: #1a2f33;
  text-transform: uppercase;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 2px;
  -webkit-border-top-left-radius: 14px;
  -moz-border-top-left-radius: 14px;
  -ms-border-top-left-radius: 14px;
  -o-border-top-left-radius: 14px;
  border-top-left-radius: 14px;
  -webkit-border-top-right-radius: 14px;
  -moz-border-top-right-radius: 14px;
  -ms-border-top-right-radius: 14px;
  -o-border-top-right-radius: 14px;
  border-top-right-radius: 14px;
}
#orbit-inner-close {
  background: transparent url('../images/frame-close.png') no-repeat 0 0;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 5px;
  right: 5px;
}
/** --- END ORBIT INNER WINDOW --- **/
  
  
/** --- FRAME ELEMENTS --- **/
.frame {
  display: none;
  position: absolute;
  overflow: hidden;
  border: 1px solid #82ecff;
  z-index: 40;
  background: #000;
  top: 50%;
  left: 50%;
  height: 650px;
  width: 900px;
  margin-top: -325px;
  margin-left: -450px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  padding: 4px;
  background: transparent url('../images/transparent-black-0.5.png') repeat 0 0;
}
.frame-close {
  background: transparent url('../images/frame-close.png') no-repeat 0 0;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 8px;
  right: 8px;
}
.frame iframe {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
/** --- END FRAME ELEMENTS --- **/


/** --- OVERLAY OBJECTS --- **/
#panel-transition {
  position: absolute;
  z-index: 50;
  border: 1px solid #82ecff;
  overflow: hidden;
  background: transparent url('../images/transparent-black-0.25.png') repeat 0 0;
}
.panel-trigger {
  background: transparent url('../images/space.png') repeat;
  border: 1px solid #82ecff;
  opacity: 0.85;
  cursor: pointer;
}
.panel-trigger.parallax-target {
  border: 1px solid #fff;
}
#inner-window {
  position: absolute;
  border: 2px solid #82ecff;
  height: 58px;
  width: 58px;
  top: 210px;
  left: 440px;
  -webkit-border-radius: 29px;
  -moz-border-radius: 29px;
  -ms-border-radius: 29px;
  -o-border-radius: 29px;
  border-radius: 30px;
}
#inner-window.parallax-target {
  border: 2px solid #fff;
}
a#beyond {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 395px;
  left: 1365px;
  -webkit-border-radius: 65px;
  -moz-border-radius: 65px;
  -ms-border-radius: 65px;
  -o-border-radius: 65px;
  border-radius: 65px;
  border-width: 2px;
}
a#sun {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 221px;
  left: 221px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;
  border-width: 2px;
}
a#mercury {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 32px;
  left: 92px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
}
a#venus {
  position: absolute;
  width: 43px;
  height: 43px;
  top: 72px;
  left: 67px;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  -ms-border-radius: 22px;
  -o-border-radius: 22px;
  border-radius: 22px;
}
a#earth {
  position: absolute;
  width: 45px;
  height: 45px;
  top: 128px;
  left: 32px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  -ms-border-radius: 23px;
  -o-border-radius: 23px;
  border-radius: 23px;
}
a#mars {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 135px;
  left: 167px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -ms-border-radius: 18px;
  -o-border-radius: 18px;
  border-radius: 18px;
}
a#belt {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 221px;
  left: 221px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
}
a#jupiter {
  position: absolute;
  height: 130px;
  width: 130px;
  top: 290px;
  left: 1560px;
  -webkit-border-radius: 65px;
  -moz-border-radius: 65px;
  -ms-border-radius: 65px;
  -o-border-radius: 65px;
  border-radius: 65px;
}
a#saturn {
  position: absolute;
  height: 118px;
  width: 118px;
  top: 622px;
  left: 961px;
  -webkit-border-radius: 59px;
  -moz-border-radius: 59px;
  -ms-border-radius: 59px;
  -o-border-radius: 59px;
  border-radius: 59px;
}
a#uranus {
  position: absolute;
  height: 90px;
  width: 90px;
  top: 175px;
  left: 2013px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  -ms-border-radius: 45px;
  -o-border-radius: 45px;
  border-radius: 45px;
}
a#neptune {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 580px;
  left: 1473px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
}
a#dwarf {
  position: absolute;
  width: 134px;
  height: 134px;
  top: 829px;
  left: 2107px;
  -webkit-border-radius: 67px;
  -moz-border-radius: 67px;
  -ms-border-radius: 67px;
  -o-border-radius: 67px;
  border-radius: 67px;
  border-width: 2px;
}
a#kbos {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 1035px;
  left: 1508px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  border-width: 2px;
}
a#comets {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 169px;
  left: 0px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  border-radius: 14px;
  border-width: 1px;
}
a#voyager {
  position: absolute;
  width: 230px;
  height: 230px;
  top: 180px;
  left: 140px;
  -webkit-border-radius: 115px;
  -moz-border-radius: 115px;
  -ms-border-radius: 115px;
  -o-border-radius: 115px;
  border-radius: 115px;
  border-width: 1px;
}
/** --- END OVERLAY OBJECTS --- **/
  

/** --- LINK ICONS --- **/
.overlay-link-container {
  position: absolute;
}
.overlay-link-title {
  font-size: 10px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.overlay-link-items {
  width: 160px;
  height: 160px;
  padding-top: 10px;
  padding-left: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.overlay-link-icon {
  background: transparent url('../images/link-icons.png') no-repeat 0 0;
  width: 70px;
  height: 69px; /* need to fix */
  margin-right: 10px;
  margin-bottom: 11px;
  float: left;
  cursor: pointer;
}
.empty-overlay-link { background-image: none !important; cursor: auto !important; }
#homework-help-container { top: 200px; left: 550px; color: #58abb6; }
#at-nasa-container { top: 250px; left: 250px; color: #2185e8; }
#k-4-kids-container { top: -50px; left: 300px; color: #a467c3; }
#do-it-yourself-container { top: 50px; left: 750px; color: #b3a156; }
#games-container { top: -220px;  left: 620px; color: #ef7a42; }
#homework-help-container .overlay-link-items {
  border-color: #58abb6;
  width: 80px;
  height: 80px;
}
#at-nasa-container .overlay-link-items { border-color: #2185e8; }
#k-4-kids-container .overlay-link-items { border-color: #a467c3; }
#do-it-yourself-container .overlay-link-items { border-color: #b3a156; }
#games-container .overlay-link-items { border-color: #ef7a42; }

#homework-help-link-1 { background-position: 0 0; }
#homework-help-link-1.parallax-target { background-position: 0 -70px; }
#at-nasa-link-1 { background-position: -70px 0; }
#at-nasa-link-1.parallax-target { background-position: -70px -70px; }
#at-nasa-link-2 { background-position: -140px 0; }
#at-nasa-link-2.parallax-target { background-position: -140px -70px; }
#at-nasa-link-3 { background-position: -210px 0; }
#at-nasa-link-3.parallax-target { background-position: -210px -70px; }
#at-nasa-link-4 { background-position: -280px 0; }
#at-nasa-link-4.parallax-target { background-position: -280px -70px; }
#k-4-kids-link-1 { background-position: -350px 0; }
#k-4-kids-link-1.parallax-target { background-position: -350px -70px; }
#k-4-kids-link-2 { background-position: -420px 0; }
#k-4-kids-link-2.parallax-target { background-position: -420px -70px; }
#k-4-kids-link-3 { background-position: -490px 0; }
#k-4-kids-link-3.parallax-target { background-position: -490px -70px; }
#do-it-yourself-link-1 { background-position: -560px 0; }
#do-it-yourself-link-1.parallax-target { background-position: -560px -70px; }
#do-it-yourself-link-2 { background-position: -630px 0; }
#do-it-yourself-link-2.parallax-target { background-position: -630px -70px; }
#do-it-yourself-link-3 { background-position: -700px 0; }
#do-it-yourself-link-3.parallax-target { background-position: -700px -70px; }
#do-it-yourself-link-4 { background-position: -770px 0; }
#do-it-yourself-link-4.parallax-target { background-position: -770px -70px; }
#games-link-1 { background-position: -840px 0; }
#games-link-1.parallax-target { background-position: -840px -70px; }
#games-link-2 { background-position: -910px 0; }
#games-link-2.parallax-target { background-position: -910px -70px; }
#games-link-3 { background-position: -980px 0; }
#games-link-3.parallax-target { background-position: -980px -70px; }
/** --- END LINK ICONS --- **/


/** --- ANIMATION KEY FRAMES --- **/
@-webkit-keyframes counterclock-spin {
  from { -webkit-transform: rotate(0); }
  to { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes counterclock-spin {
  from { -moz-transform: rotate(0); }
  to { -moz-transform: rotate(-360deg); }
}
@-o-keyframes counterclock-spin {
  from { -o-transform: rotate(0); }
  to { -o-transform: rotate(-360deg); }
}
@keyframes counterclock-spin {
  from { -moz-transform: rotate(0); }
  to { -moz-transform: rotate(-360deg); }
}

@-webkit-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-o-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-o-keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
/** --- END ANIMATION KEY FRAMES --- **/