body{
    background-color: black;
}
#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:1000px;
  margin-left:auto;
  margin-right:auto;

 

}
#maincont{
    position: absolute;
    width:100%;
  
    top:0px;
    left:0px;
    height:1000px;
  

}
.impactcontainer{
    position:absolute;
    left:0px;
    top:0px;
    
    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: 1s;
    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;
    


  }
  .flip{

    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;
 
  }
  .flipr{

    animation-name: flip-scale-2-ver-right;
    animation-duration: 2s;
    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;
  }

  .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;
  }


  @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%) drop-shadow(30px 30px 2.75rem black);;
  
    }
    100% {
      -webkit-transform: translateZ(-30px);
              transform: translateZ(-30px);
              
              filter:brightness(30%) drop-shadow(30px 30px 2.75rem black);;
   
    }
  }
  @keyframes pushback_ret{
    
   
    0% {
      -webkit-transform: translateZ(-30px);
              transform: translateZ(-30px);
              
              filter:brightness(30%) drop-shadow(30px 30px 2.75rem black);;
   
    }
    100% {
      -webkit-transform: translateZ(1);
              transform: translateZ(1);
              
              filter:brightness(100%) drop-shadow(30px 30px 2.75rem black);;
  
    }
  }

  @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%;

  }