@import url('https://fonts.googleapis.com/css?family=Lato|Special+Elite');

html {
background:#ededeb url('/static/images/atlantis.jpg') repeat-x 0 0;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
overflow:hidden;
   //-moz-box-shadow:    inset -4px -4px 42px 6px #003;
   //-webkit-box-shadow: inset -4px -4px 42px 6px #003;
   //box-shadow:         inset -4px -4px 42px 6px #003;
}
body {
margin:0;
}
body.dev {
border-width:4px;
border-image:url('images/this_divback.jpg') 30 30 stretch;
background:#fff;
font-size:12px;
margin:0 auto;
height:100%;
width:500px;
position:relative;
resize:both;
padding:0;
}
h1,h2,h3,h4,h5,p,div,a,li {
font-family: 'Special Elite', arial, sans-serif;font-weight:normal;
}
h1 {position:absolute;}
a {
text-decoration:none;
color:#119;
}
a:hover {
color:#11c;
}
h1 {
color:#111;
font-size:64px;
margin:0 auto;
}
.panel.bottom .control span {
display:inline-block;
margin:0 40px;
}
.panel {
width:90px;
height:100%;
position:absolute;
top:0;
left:0;
}
.top {
background:#fff;
background-size:auto 100%;
width:100%;
height:290px;
position:relative;
top:0;
left:0;
margin:0;
padding:0;
}
.panel.bottom {
width:100%;
height:90px;
position:absolute;
top:auto;
bottom:0;
left:-10px;
}
.panel .control {
position:absolute;
left:-140px;
text-shadow: 1px 0 3px #000;
font-weight:500;
color:#f4f4f4;
background-color:rgba(0, 0, 42, 0.5);
border-radius:8px;
padding:4px 8px 0 40px;
}
.top .control {
position:relative;
font-weight:500;
text-shadow:none;
background:#fff;
color:#003;
width:300px;
margin:0 auto;
background:url(@logonly.png) no-repeat 0 0;
background-size:90px;
padding:40px 74px;
border:60px solid #fff;
}
.panel.bottom .control {
left:auto;
bottom:-200px;
font-weight:500;
text-shadow:none;
background:#000 url('images/ert-3d-goggles-8x6.jpg') no-repeat 12px 0;
background-size:auto 100%;
height:90px;
padding:0 0 0 100px;
color:#fff;
width:100%;
margin:0;
vertical-align:middle;
line-height:90px
}
.panel:hover .control {
position:absolute;
left:-24px;
  -webkit-animation: slidein 1.6s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
  z-index:99;
}
.panel.top:hover .control {
top:10px;
left:0;
  -webkit-animation: slidedn 1.6s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
  z-index:99;
}
.panel.bottom:hover .control {
left:auto;
bottom:0px;
  -webkit-animation: slideup 1.6s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
  z-index:99;
}
@-webkit-keyframes slidein {
  0% {left:-140px;}
  21% {left:-34px;}
  25% {left:-42px;}
  29% {left:-26px;}
  31% {left:-34px;}
}
@-webkit-keyframes slidedn {
  0% {top:-200px;}
  21% {top:14px;}
  25% {top:10px;}
  29% {top:16px;}
  31% {top:10px;}
}
@-webkit-keyframes slideup {
  0% {bottom:-200px;}
  21% {bottom:-4px;}
  25% {bottom:0px;}
  29% {bottom:-6px;}
  31% {bottom:0px;}
}
.fullscreen {
width:100%;
height:100%;
}
.zoom {
opacity:0;
width:100%;
height:30px;
position:absolute;
top:48%;
left:0;
overflow:hidden;
margin:auto;
  -webkit-animation: fadeout 0.24s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.zoom:hover {
height:94%;
top:30px;
opacity:1;
overflow:auto;
/*border-radius:100%;*/
  -webkit-animation: fadein 0.7s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes fadein {
  0% {opacity:0;}
  2% {opacity:0.2;}
  4% {opacity:0.05;}
  100% {opacity:1;}
}
@-webkit-keyframes fadeout {
  0% {opacity:1;}
  70% {opacity:0.6;}
  74% {opacity:0;}
  78% {opacity:0.8;}
  82% {opacity:0.3;}
  88% {opacity:0.9;}
  92% {opacity:0.2;}
  100% {opacity:0;}
}
.swim.left {
position:absolute;
bottom:0;
left:80%;
  -webkit-animation: swimleft 54.7s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease-in-out;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
background-position:0 50px;
background-repeat:no-repeat;
}
@-webkit-keyframes swimleft {
  0% {left:80%;}
  100% {left:-300px;}
}
.copydate {
font-size:16px;
bottom:24px;
}
.zoom .dot {
opacity:0;
}
.zoom:hover .dot {
position:absolute;
width:80%;
top:36%;
left:8%;;
opacity:1;
border-radius: 4em 4em 4em / 1.5em 3em;
background:#eee;
  -webkit-animation: fadein 0.7s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-in-out;
text-align:center;
padding:20px 0;
}
.zoom:hover .dot h2 {
display:inline-block;
width:340px;
text-align:center;
padding:0 40px 4px;
}
.control a {
color:#ffffff;
text-decoration:none;
font-weight:700;
}
.footer {
background:#000;
border-radius:none;
}