body,html{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #022930;
  color: white;
}

.container{
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 80%;
  min-width: 400px;
  max-width: 1000px;
  z-index: 0;
  /* position the div in center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glitch-img{
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 0;
}

#links {
	width: 680px;
	height: 120px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	top: 5px;
	float: center;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	text-wrap: avoid;
	padding: 0px;
	z-index: 5;
}

#navbar {
	position: fixed;
	height: 100%;
	z-index: 4;
}

.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../image/noise.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: 0.6;
  visibility: visible;
  z-index: 2;
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0,0,0,0.7) inset;
  z-index: 3;
}

.tab {
	position: relative;
	padding-top: 150px;
	z-index: 3;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}


figure.snip1205 {
  position: relative;
  overflow: hidden;
  margin: 0px;
  min-width: 100px;
  max-width: 384px;
  width: 100%;
  background: #bd0078;
  text-align: center;

}
figure.snip1205 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1205 img {
  max-width: 100%;
  vertical-align: top;
}
figure.snip1205 i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  font-size: 50px;
  color: #ff28b0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip1205 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1205:hover img,
figure.snip1205.hover img {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.snip1205:hover i,
figure.snip1205.hover i {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.link {
  box-shadow: inset 0 0 0 0 #ffffff;
  color: #ffffff;
  padding: 0 .25rem;
  margin: 0 -.25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.link:hover {
  color: #ff28b0;
  box-shadow: inset 200px 0 0 0 #ffffff;;
}

/* Presentational styles */
.link {
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 100;
  line-height: 1.5;
  text-decoration: none;
}

.title {
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  padding-bottom: 20px;
}

.text {
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  text-decoration: none;
  max-width: 800px;
  width: 100%;
}

#photo {
  float: right;    
  margin: 0 0 0 15px;
}


.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.glitch {
   position: relative;
   font-size: 20px;
   font-weight: bold;
   color: #FFFFFF;
   letter-spacing: 3px;
   animation: shift 4s ease-in-out infinite alternate;
   transform: skewX(0deg);
   z-index: 1;
}

@keyframes shift {
   0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
      transform: skewX(0deg);
   }
   41% {
      transform: skewX(10deg);
   }
   42% {
      transform: skewX(-10deg);
   }
   59% {
      transform: skewX(35deg) skewY(10deg);
   }
   60% {
      transform: skewX(-35deg) skewY(-10deg);
   }
   63% {
      transform: skewX(10deg) skewY(-5deg);
   }
   70% {
      transform: skewX(-30deg) skewY(-20deg);
   }
   71% {
      transform: skewX(10deg) skewY(-10deg);
   }
}

.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.bt_menu {
	display:flex;
	vertical-align: bottom;
	padding: 0px;
    margin: 0px;
	
}