body {
    background-color:black;
    width:100vw;
    height:120vh;
    position:relative;
}
.ani {
    
}
.notransition * { 
  transition: none !important; 
} 
.stopit {
  /*CSS transitions*/
 transition-property: none !important;
 /*CSS transforms*/
 transform: none !important;
 /*CSS animations*/
 animation: none !important;
}

.combo {
    position: fixed;
  top: 0;
  left: 0;
  height:100vh;
  width:100vw;
    pointer-events: auto;

}
.holder {
    position:absolute;
    top:0;
    left:0;
    display:flex;
      align-items: center;
  justify-content: center;
  height:100vh;
  width:100vw;
    
}

.main {
  display:block;
margin:auto;
  --s: 200px;  /* size  */
  --m: 4px;    /* margin */
  pointer-events: none;
}

.container {
  font-size: 0; /*disable white space between inline block element */
     /**/
   -webkit-animation:spin 30s linear infinite;
    -moz-animation:spin 30s linear infinite;
    animation:spin 30s linear infinite;
     transform-origin: 50% 50%;
    pointer-events: auto;
    position:relative;
    transform-origin: 50% 50%;
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); 
  display: inline-block;
  font-size:initial;
  clip-path: circle(100px);
  margin-bottom: calc(var(--m) - var(--s)*0.2885);
  cursor: pointer;
}

.cenb {
       -webkit-animation:spinr 25s linear infinite;
    -moz-animation:spinr 25s linear infinite;
    animation:spinr 25s linear infinite;

}

@keyframes spin { 
    50% { 
        -webkit-transform: rotate(180deg); 
        -moz-transform: rotate(180deg);
        transform: rotate(180deg); 
    }
    100% { 
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg);
        transform: rotate(360deg); 
    } 
}

@-moz-keyframes spinr { 
    100% { -moz-transform: rotate(-360deg); } 
}
@-webkit-keyframes spinr { 
    100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spinr { 
    100% { 
        -webkit-transform: rotate(-360deg); 
        transform:rotate(-360deg); 
    } 
}

.scale {
    animation: scale 6s ease-in-out;
}



.spacer{
    width:250px;
    height:250px;
    display:block;
    position:relative;
    top:0;
    margin:auto;
}
.cb1{
    background-image: url("img/money.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    
    animation-iteration-count: infinite;
    cursor: pointer;
   position:relative;
}

.cb2{
    background-image: url("img/social.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    
    animation-iteration-count: infinite;
    animation-delay: -1s;
    position:relative;
    
}
.cb3{
    background-image: url("img/music.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
    animation-iteration-count: infinite;
    animation-delay: -5s;
    position:relative;
     
}
.cb4{
    background-image: url("img/sun.jpg");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   animation-iteration-count: infinite;
 
}
.cb5{
    background-image: url("img/contact.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   
    animation-iteration-count: infinite;
    animation-delay: -2s;
    position:relative;
      
}
.cb6{
    background-image: url("img/king.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   
    animation-iteration-count: infinite;
    animation-delay: -4s;
    position:relative;
      
}
.cb7{
  background-image: url("img/work.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color:white;
   
    animation-iteration-count: infinite;
    animation-delay: -3s;
    position:relative;
}
 img {
  
 }
  
@keyframes scale {
  0% {
    transform: scale(0.05);
  }
  50% {
    transform: scale(1.1);
   
}
  100% {
    transform: scale(0.05);
   
  }
}

@-webkit-keyframes scale {
  0% {
    transform: scale(0.05);
  }
  50% {
    transform: scale(1.1);
   
}
  100% {
    transform: scale(0.05);
   
  }
}
.footwrap{
    width:100%;
     text-align:center;
     position:fixed;
    display:flex;
    justify-content:center;
    align-content:center;
    align-items:center;
    
    bottom:0;
}
.footer{
    width:80vw;
    height:125px;
   display:flex;
    background-color:black;
    z-index:2;
    border-style: double;
  border-width:10px;
  border-color:white;
  border-radius: 20px;
}
.aplpa{
    background-image: url("img/aplpa.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    width:100px;
    height:100px;
    display:inline-block;
    margin:auto;
    border-style: double;
  border-width:5px;
  border-color:white;
  border-radius: 50%;
   
}
.quest{
    background-image: url("img/aquest.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    width:100px;
    height:100px;
    display:inline-block;
    margin:auto;
    border-style: double;
  border-width:5px;
  border-color:white;
  border-radius: 50%;
   
}
.info{
    background-image: url("img/ainfo.png");
background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
    width:100px;
    height:100px;
    display:inline-block;
    margin:auto;
   border-style: double;
  border-width:5px;
  border-color:white;
  border-radius: 50%;
}

input[type=range] {
    -webkit-appearance: none;
    line-height:100px;
    width:300px;
    display:inline-block;
    margin:auto;
}
                            /***** Track Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
  background: black;
  height: 2rem;
   border-style: double;
  border-width:5px;
  border-color:white;
  border-radius: 10px;
}

/******** Firefox ********/
input[type="range"]::-moz-range-track {
  background: black;
  height: 1rem;
}
/***** Thumb Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -1.25rem; /* Centers thumb on the track */
   background-color: gold;
   height: 4rem;
   width: 2rem;    
}
/***** Thumb Styles *****/
/***** Firefox *****/
input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
     background-color: gold;
   height: 4rem;
   width: 2rem;    
}