#sidebar {
    background: #2b2b2b;
	overflow: hidden;
}

.wrapper.style1-alt {
    background-color: #333333;
}

.wrapper.style1 {
    background-color: #222222;
}

.wrapper.style2 {
    background-color: #b2b2b2;
}

.wrapper.style3 {
    background-color: #232323;
}

}

#footer > .inner.menu {
    margin-left: 28% !important;
}

ul.menu {
    list-style: none;
    padding: 0;
    margin-left: 28%;
}

.pointer{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,50%);
	width: 20px;
	height: 20px;
	background: #ff000a;
	border: 3px solid #ffffff;
	border-radius: 50%;
	pointer-events: none;
	box-sizing: border-box;
	transition: 0.05s;
}

.pointer2{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,50%);
	width: 20px;
	height: 20px;
	background: transparent;
	border: 3px solid #ffffff;
	border-radius: 50%;
	pointer-events: none;
	box-sizing: border-box;
	transition: 0.05s;
}


@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.letterin { 
  animation: showup 7s infinite;
  display:inline-block;
}

.letterout {
  width:0px;
  animation: reveal 7s infinite;
  display:inline-block;  
}

.letterout span {
  margin-left:-1200px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-1800px; }
    20% { margin-left:-1800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);

.smoke_text {
  overflow: hidden;
  font: 35px "Finger Paint";
  text-align: left;
  color: transparent;
  backface-visibility: hidden;
}

.smoke {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

.smoke:nth-child(even){
  animation-name: smoky-mirror;
  display: inline-block;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
}