@import 'reset.css';
/*
    _  _   _____   ____   _____ _______ __  __  ____  _____  ______ __  __ 
  _| || |_|  __ \ / __ \ / ____|__   __|  \/  |/ __ \|  __ \|  ____|  \/  |
 |_  __  _| |__) | |  | | (___    | |  | \  / | |  | | |  | | |__  | \  / |
  _| || |_|  ___/| |  | |\___ \   | |  | |\/| | |  | | |  | |  __| | |\/| |
 |_  __  _| |    | |__| |____) |  | |  | |  | | |__| | |__| | |____| |  | |
   |_||_| |_|     \____/|_____/   |_|  |_|  |_|\____/|_____/|______|_|  |_|

*/
.contained {
  max-width: 100%;
  height: auto;
}
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 25px;
  color: #ffffff;
  background-color: #000000;
  overflow: hidden;
}
.im {
  display: block;
  position: absolute;
  height: auto;
}
p {
  margin-bottom: 1em;
}
p > span {
  display: inline-block;
  padding: 4px 6px;
  background-color: rgba(0, 171, 236, 0.9);
}
p a {
  color: #ffffff;
}
nav {
  display: none;
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  width: 36px;
  height: 100%;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
}
nav a {
  position: absolute;
  display: none;
  width: 36px;
  height: 36px;
  left: 0;
  color: #fff200;
  text-decoration: none;
}
nav a:hover {
  color: #ffffff;
}
nav a.prev {
  top: 36px;
}
nav a.next {
  bottom: 36px;
}
.loader {
  z-index: 1001;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff url(../img/loading.gif) center center no-repeat;
}
.panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1024px;
  background-size: 100% 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  opacity: 0;
}
.panel .inner {
  position: relative;
  margin: 36px;
}
.panel .col1,
.panel .col2,
.panel .col3 {
  position: absolute;
  top: 0;
  z-index: 1000;
}
.panel .col1 p,
.panel .col2 p,
.panel .col3 p,
.panel .col1 h2,
.panel .col2 h2,
.panel .col3 h2 {
  padding-right: 16px;
}
.panel .col1 {
  width: 33.333%;
}
.panel .col2 {
  width: 66.666%;
}
.panel .col3 {
  width: 99.999%;
}
.panel .left {
  left: 0;
}
.panel .center {
  left: 50%;
  margin-left: -16.666%;
}
.panel .right {
  right: 0;
}
.panel p > span,
.panel li > span {
  display: inline-block;
  padding: 6px;
  background-color: rgba(0, 171, 236, 0.9);
}
.panel:nth-child(2n+0) p > span,
.panel:nth-child(2n+0) li > span {
  background-color: rgba(255, 0, 0, 0.9);
}
.panel:nth-child(3n+0) p > span,
.panel:nth-child(3n+0) li > span {
  background-color: rgba(113, 191, 72, 0.9);
}
.panel.login {
  display: none;
  background-image: url(../img/webblinky.gif);
}
.panel.no1 {
  background-image: url(../img/mayer_jillian_test_cloud_gif.gif);
}
.panel.no1 .i1 {
  z-index: 1;
  width: 1000px;
  height: 654px;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top: -327px;
}
.panel.no1 h1 {
  z-index: 2;
  top: 50%;
  left: 50%;
  margin-left: -457.5px;
  margin-top: -61.5px;
}
.panel.no2 {
  background-image: url(../img/06-zawada-money-problems_900_905-u1246.png);
}
.panel.no2 h2 {
  margin-left: -10px;
}
.panel.no2 .i1 {
  width: 318px;
  top: 50px;
  right: 36px;
}
.panel.no2 .i2 {
  width: 500px;
  height: 500px;
  bottom: 20px;
  left: 10px;
}
.panel.no3 {
  background-image: url(../img/bgno3.gif);
}
.panel.no3 h2 {
  margin-left: -12px;
}
.panel.no3 .i1 {
  z-index: 1;
  width: 455px;
  top: -117px;
  left: 0;
}
.panel.no3 .i2 {
  z-index: 2;
  width: 543px;
  top: -125px;
  left: 263px;
}
.panel.no4 {
  background-image: url(../img/tumblr_meda8dzyvp1rlu5p2o1_500.gif);
}
.panel.no4 .i1 {
  z-index: 1;
  width: 500px;
  top: 72px;
  left: 0;
}
.panel.no4 .i2 {
  z-index: 2;
  width: 836px;
  bottom: -318px;
  left: 309px;
}
.panel.no4 .i3 {
  z-index: 3;
  width: 690px;
  top: 200px;
  left: 642px;
}
.panel.no4 h2 {
  margin-left: -130px;
}
.panel.no4 h2 img {
  width: 623px;
}
.panel.no4 h2 + p {
  margin-top: -20px;
}
.panel.no5 {
  background-image: url(../img/016-set-design-street-city-theredlist.jpg);
}
.panel.no5 .i1 {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -250px;
}
.panel.no5 h2 img {
  width: 180px;
}
.panel.no6 {
  background-color: #ffffff;
}
.panel.no6 .ipad {
  z-index: 1;
  width: 980px;
  height: 767px;
  background-image: url(../img/ipad.jpg);
  background-size: 100% auto;
  top: 50%;
  left: 50%;
  margin-left: -494px;
  margin-top: -370px;
}
.panel.no6 .video {
  z-index: 2;
  width: 602px;
  height: 367px;
  top: 50%;
  left: 50%;
  margin-left: -301px;
  margin-top: -203px;
}
.panel.no7 {
  background-image: url(../img/set2.gif);
}
.panel.no7 .i1,
.panel.no7 .i2 {
  width: 214px;
  height: 214px;
  bottom: 72px;
}
.panel.no7 .i1 {
  left: 36px;
}
.panel.no7 .i2 {
  right: 36px;
}
.panel.no8 {
  background-image: url(../img/bgno8.gif);
}
.panel.no9 {
  background-image: url(../img/your-atmospheric-colour-atlas-2009oe.jpg);
}
.panel.no9 .i1 {
  width: 423px;
  height: 423px;
  bottom: 36px;
  right: 36px;
}
.panel.no10 .i1,
.panel.no10 .i2 {
  width: 100%;
  height: 50%;
  left: 0;
}
.panel.no10 .i1 {
  top: 0;
}
.panel.no10 .i2 {
  bottom: 0;
}
.panel.no11 {
  background-image: url(../img/cool_dinosaur_gif__animation_by_obgamer-d3ln7pe.gif);
}
.panel.no11 .i1 {
  width: 445px;
  height: 445px;
  top: 50%;
  right: 0;
  margin-top: -223px;
}
.panel.no12 {
  background-image: url(../img/kayladance.gif);
}
.panel.no12 .i1 {
  width: 33.333%;
  top: 0;
  left: 66.666%;
  margin-left: -36px;
}
.panel.no13 {
  background-image: url(../img/holopop.gif);
}
.panel.no13 .i1 {
  width: 475px;
  height: 475px;
  top: 50%;
  left: 50%;
  margin-left: -237.5px;
  margin-top: -237.5px;
}
.panel.no14 {
  background-image: url(../img/pmmad.gif);
}
.panel.no14 .i1 {
  width: 33.333%;
  top: 18px;
  left: 33.333%;
}
.panel.no15 {
  background-image: url(../img/bgno15.gif);
  background-size: 200% auto;
}
.panel.no15 .i1 {
  width: 1204px;
  left: -331px;
  bottom: -52px;
}
.panel.no16 .i1,
.panel.no16 .i2 {
  z-index: 1;
  top: 0;
  height: 100%;
}
.panel.no16 .i1 {
  right: 0;
  width: 70%;
}
.panel.no16 .i2 {
  left: 0;
  width: 30%;
}
.panel.no16 .i3 {
  z-index: 2;
  width: 420px;
  height: 420px;
  left: 22.221999999999998%;
  top: 50%;
  margin-top: -210px;
}
.panel.no17 {
  background-image: url(../img/bgno17.gif);
}
.panel.no17 .i1 {
  top: 0;
  left: 0;
  width: 66.666%;
  height: 264px;
}
.panel.no18 {
  background-image: url(../img/6be94ab6840370d4d502d0ccec5a2cc0.gif);
}
.panel.no18 .i1 {
  width: 751px;
  height: 751px;
  top: 50%;
  left: 50%;
  margin-left: -375.5px;
  margin-top: -375.5px;
}
.panel.no19 h2 {
  margin-left: -12px;
}
.panel.no19 .i1,
.panel.no19 .i2 {
  top: 0;
}
.panel.no19 .i1 {
  width: 33.333%;
  left: 0;
  height: 100%;
}
.panel.no19 .i2 {
  width: 66.666%;
  right: 0;
  height: 120%;
}
.panel.no20 {
  background-image: url(../img/hd_8e30fb6911daeaa1602d57e5b21bca82_905.jpg);
}
.panel.no20 h2 {
  width: 334px;
  margin-top: -25px;
  margin-left: -96px;
}
.panel.no20 .i1 {
  z-index: 1;
  width: 455px;
  height: 480px;
  top: 10px;
  left: 33.333%;
  margin-left: -30px;
}
.panel.no20 .i2 {
  z-index: 2;
  width: 300px;
  height: 225px;
  top: 268px;
  right: 36px;
}
.panel.no20 .i3 {
  z-index: 3;
  width: 334px;
  top: 408px;
  right: 178px;
}
.panel.no21 {
  background-image: url(../img/bgno21.gif);
}
.panel.no21 .i1 {
  width: 544px;
  height: 89px;
  top: 0;
  right: 0;
}
.panel.no21 .col1 {
  margin-top: 53px;
}
.panel.no22 .i1,
.panel.no22 .i2 {
  width: 50%;
  height: 100%;
  top: 0;
}
.panel.no22 .i1 {
  left: 0;
}
.panel.no22 .i2 {
  right: 0;
}
.panel.no22 .i3 {
  width: 500px;
  height: 316px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -158px;
}
.panel.no23 {
  background-image: url(../img/original-2.gif);
}
.panel.no23 .i1 {
  z-index: 1;
  width: 646px;
  height: 364px;
  top: 50%;
  left: 50%;
  margin-left: -323px;
  margin-top: -182px;
}
.panel.no23 .i2 {
  z-index: 2;
  width: 967px;
  height: 86px;
  top: 50%;
  left: 50%;
  margin-left: -483.5px;
  margin-top: -43px;
}
.panel.no24 {
  background-image: url(../img/galaxy.jpg);
}
.panel.no24 .i1 {
  z-index: 1;
  width: 405px;
  height: 470px;
  top: 260px;
  left: 33.333%;
}
.panel.no24 .i2 {
  z-index: 2;
  width: 576px;
  height: 324px;
  top: 324px;
  left: -34px;
}
.panel.no24 .i3 {
  z-index: 3;
  width: 251px;
  height: 163px;
  top: 180px;
  left: 36px;
}
.panel.no25 {
  background-image: url(../img/kaylaforehead.gif);
}
.panel.no25 .i1 {
  width: 934px;
  height: 500px;
  top: 50%;
  left: 50%;
  margin-left: -467px;
  margin-top: -250px;
}
.panel.no26 {
  background-color: #e4afdb;
  background-image: url(../img/bgno26.png);
  background-size: 100% auto;
  background-position: bottom center;
}
.panel.no27 {
  background-image: url(../img/bgno27.gif);
}
.panel.no28 {
  background-image: url(../img/hd_48a0df3435bc2aa2c3f70bc330a40bc9_905-1.jpg);
}
.panel.no28 .i1 {
  width: 387px;
  height: 508px;
  top: 50%;
  left: 50%;
  margin-left: -193.5px;
  margin-top: -254px;
}
.panel.no29 {
  background-image: url(../img/semantic.png);
}
.panel.no29 .i1 {
  width: 423px;
  top: 0;
  left: 0;
}
.panel.no29 .i2 {
  width: 182px;
  bottom: 238px;
  right: 36px;
}
.panel.no29 .i3 {
  left: 320px;
  bottom: 36px;
}
.panel.no30 {
  background-image: url(../img/032-set-design-night-sky-theredlist1.jpg);
}
.panel.no30 .i1 {
  top: -10px;
  left: 36px;
  margin-left: -12px;
}
.panel.no30 .col1 {
  margin-top: 50px;
}
.panel.no31 {
  background-image: url(../img/olafur.gif);
}
.panel.no32 {
  background-image: url(../img/original-1_1.gif);
}
#main,
#main a:hover {
  cursor: url(../img/cursor.gif), progress !important;
}
.login {
  z-index: 3;
  display: block;
  position: absolute;
  height: auto;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -120px;
}
#popup {
  display: none;
  z-index: 4;
  position: absolute;
  top: 10%;
  right: 5%;
  width: 329px;
  height: 270px;
  background: url(../img/window.png) no-repeat 0 0;
}
#popup .video {
  width: 300px;
  height: 200px;
  margin-top: 47px;
  margin-left: 7px;
}
#popup .exit {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 43px;
  height: 43px;
}
#ahahah #popup {
  display: block;
  top: auto;
  right: auto;
  bottom: 10%;
  left: 5%;
}