body {
  background-color: black;
}
#page{
  height:100vh;
}
#banner {
  position: relative;
  width: 100%;
  height: 150px;
  margin-left: auto;
  margin-right: auto;

  background-image: url(banner.jpg);
  background-repeat: no-repeat;

  background-position: 50% 0%;
}
#supercont {
  position: relative;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  height:calc(100vh - 260px);
  overflow-x:hidden;
  overflow-y:hidden;
  
}
@media only screen and (max-width: 500px) {
  #supercont {
    overflow-x: hidden;
  }
}
#catcopy{
  position:absolute;
  top:155px;

  width:100%;
  font-size:12px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  
}
@media only screen and (max-width: 500px) {
  #catcopy {
    visibility: hidden;
  }
}
#catcopymob{
  position:absolute;
  top:14px;
  left:0px;
  width:70%;
  font-size:12px;
  font-weight:bold;
  color:#fff;
  text-align:center;
}
@media only screen and (min-width: 500px) {
  #catcopymob {
    visibility: hidden;
  }
}

.moblab{
  position:absolute;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  background-color:#00000088;
  height:30px;
  width:100%;
padding-top:5px;
  text-align:center;
}

#leftarr{
  position:absolute;
  left:10px;
  top:150px;
  color:#fff;
  cursor:pointer;
  opacity:0.3;
  z-index:2000;
  /*background-color: #797979;*/
  padding-top:2px;
  border-radius: 20px;
  width:30px;
  height:30px;
  visibility:hidden;
}
#rightarr{
  position:absolute;
  right:10px;
  bottom:150px;
  color:#fff;
  cursor:pointer;
  z-index:2000;
  /*background-color: #292929;*/
  padding-top:2px;
  border-radius: 20px;
  width:30px;
  height:30px;
  visibility:hidden;
}
#leftarr span{
  margin-left: 2px;
  margin-top: 1px;
}
#rightarr span{
  margin-left: 4px;
  margin-top: 1px;
}
#maincont {
  position: absolute;
  width: 100%;
  overflow:hidden;
  top: 0px;
  left: 0px;
  height: 100%;
 

}
#catdivider{
  position:absolute;
  width:100%;
  left:0px;
  top:0px;
  height:2px;
  border-bottom-style:solid;
  border-bottom-width: 1px;
  border-bottom-color: #666;
}
#impcatcont{
  position:absolute;
  height:80px;
  width:600px;
  top:0px;
  left:0px;
}
.impcat{
  cursor:pointer;
}
.impactcontainer {
  position: absolute;
  left: 0px;
  top: 0px;
  cursor:pointer;
  transform-style: preserve-3d;
}
.impdim {
  opacity: 0;
}

.entitycontainer {
  border-radius: 0.2em;
  /*overflow:hidden;*/

  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}
.dshad {
  /*filter: drop-shadow(30px 30px 2.75rem black);*/
}
.slitvert {
  animation-name: slit-in-vertical;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slithorz {
  animation-name: slit-in-horizontal;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.puffcenter {
  animation-name: puff-in-center;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.kenburns {
  animation-name: kenburns-right;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.kenburns_r {
  animation-name: kenburns-right-ret;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.kenburns_lft {
  animation-name: kenburns-left;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.kenburns_lftr {
  animation-name: kenburns-left-ret;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.kenburns_rtlft {
  animation-name: kenburns-right-left;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.kenburns_lftrt {
  animation-name: kenburns-left-right;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.swingleft {
  animation-name: swing-out-left-bck;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.rot90 {
  animation-name: slide-out-fwd-center;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.flipan {
  animation-name: flip-scale-2-ver-left;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier();
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.flipanr {
  animation-name: flip-scale-2-ver-right;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier();
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.flipb {
  animation-name: flip-scale-2-hor-bottom;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier();
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.forw {
  animation-name: comeforward;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.pushback {
  animation-name: pushback;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.forw_r {
  animation-name: comeforward_ret;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.pushback_r {
  animation-name: pushback_ret;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.slidebottom {
  animation-name: slide-in-bottom;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slidetop {
  animation-name: slide-in-top;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slitout {
  animation-name: slit-out-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slitin {
  animation-name: slit-in-vertical;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.slidefwd {
  animation-name: slide-out-fwd-center;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.scintr{
  animation-name: scale-in-tr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .05s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.scoutbl{
  animation-name: scale-out-bl;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .08s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.scintl{
  animation-name: scale-in-tl;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .05s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.scoutbr{
  animation-name: scale-out-br;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .08s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.scin{
  animation-name: scale-in-center;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .05s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.scout{
  animation-name: scale-out-center;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: .08s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes bluranim {
  0% {
    filter: grayscale(0%);
  }
  100% {
    filter: grayscale(100%);
  }
}

@keyframes comeforward {
  0% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(30px);
    transform: translateZ(30px);
    opacity: 1;
  }
}
@keyframes comeforward_ret {
  0% {
    -webkit-transform: translateZ(30px);
    transform: translateZ(30px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    opacity: 0;
  }
}
@keyframes pushback {
  0% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);

    /*filter: brightness(100%);*/
  }
  100% {
    -webkit-transform: translateZ(-30px);
    transform: translateZ(-30px);

    /*filter: brightness(30%);*/
  }
}
@keyframes pushback_ret {
  0% {
    -webkit-transform: translateZ(-30px);
    transform: translateZ(-30px);

    /*filter: brightness(30%);*/
  }
  100% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);

    /*filter: brightness(100%);*/
  }
}

@keyframes whitein {
  0% {
    filter: brightness(100%);
  }
  100% {
    filter: brightness(300%);
  }
}

@keyframes whiteout {
  0% {
    filter: brightness(300%);
  }
  100% {
    filter: brightness(100%);
  }
}

#superwebcont,
.swebcont {
  position: absolute;
  border-radius: 0.2em;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  overflow: hidden;
  opacity: 0;
  z-index: 20;
}

#webcont,
.wcont {
  width: 800px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: auto;
  margin-right: auto;
}

#webmaincont,
.wmaincont {
  position: relative;
  width: 2000px;
  height: 2000px;
  background-color: lightgray;
}
.backinvis {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#wlog {
  width: 100%;
  height: 100px;
  background-image: url(latestcontent/cain/forweb/Cainlogo.png);

  background-size: 25%;

  background-repeat: no-repeat;
  background-position: 50% 50%;
}

#imbanner {
  width: 100%;
  height: 200px;
  background-image: url(latestcontent/cain/forweb/privpool.jpg);

  background-size: 120%;
  background-repeat: no repeat;
  background-position: 50% 50%;
}
/*
var grppanel1 = $("<div class='gpanel'></div>");
var grppanel2 = $("<div class='gpanel'></div>");
var grptext = $("<div class='gtext'></div>");
grptext.html(this.grpname.toUpperCase());

this.grouplayer = $("<div class='grplayer'></div>");
*/
.grplayer{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.gpanel{
  position:absolute;
  opacity:.7;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  z-index:30;
}
.gtext{
  position:absolute;
  width:100%;
  top:47%;
  margin:auto;
  color:#fff;
  font-size:16px;
  font-weight: 600;
  text-align: center;
  z-index:32;


}

.clipout{
  animation-name: clipout;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/*clip-path: inset(10% 20% 30% 40% round 25%);*/

@keyframes clipout {
  0% {
    clip-path: inset(80% 80% 80% 80% round 1%);
  }
  100% {
    clip-path: inset(0% 0% 0% 0% round 1%);
  }
}


#pind{
  position:absolute;
  visibility: hidden;
  z-index:3000;
  left:100px;
  top:100px;
}

.circular{
  animation: rotate 2s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
 }
 
 
 .path {
   stroke-dasharray: 1,200;
   stroke-dashoffset: 0;
   animation:
    dash 1.5s ease-in-out infinite
   ;
   stroke-linecap: round;
   stroke: #666;
 }
 
 @keyframes rotate{
  100%{
   transform: rotate(360deg);
  }
 }
 @keyframes dash{
  0%{
   stroke-dasharray: 1,200;
   stroke-dashoffset: 0;
  }
  50%{
   stroke-dasharray: 89,200;
   stroke-dashoffset: -35;
  }
  100%{
   stroke-dasharray: 89,200;
   stroke-dashoffset: -124;
  }
 }
 @keyframes color{
   100%, 0%{
     stroke: #d62d20;
   }
   40%{
     stroke: #0057e7;
   }
   66%{
     stroke: #008744;
   }
   80%, 90%{
     stroke: #ffa700;
   }
 }

 #supercont::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#supercont::-webkit-scrollbar-track {
  background: #222;
}

#supercont::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 20px;
  
}