* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html{
	width:100%;
	height:100%;
	
}

body {

  color: white;
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  font-size: 30px;
  background-image:url('https://i.pinimg.com/originals/09/08/c3/0908c3f80ef7f977278c501b9cb2de6e.jpg');
  background-size: cover;

  font-family: 'Oswald', sans-serif;
  text-align: center;
}


#Layer_1{
  width:275px;
  margin:0 auto;
  position: absolute;
  top:29%;
  left: 0;
  right: 0
}

.wrapper{
  /* background: rgba(138, 28, 244, 0.9); */
  background: rgba(0, 0, 0, 0.8);
  background-repeat: repeat-x;
  width: 100%;
  height: 100vh;
font-size:14px;

}
.st0 {
  animation: glitch 2s infinite forwards
}
.st1{
  animation: glitchTwo 1.5s infinite forwards
}
.st3{
  animation: glitchThree 1s infinite forwards
}

@keyframes glitch {
  0% {
    transform: translate(0, 0);
    clip-path: polygon(19% 74%, 75% 84%, 75% 100%, 0% 100%);
  }
  5% {
    transform: translate(10px, 0);
    clip-path: polygon(100% 0%, 100% 0%, 5% 50%, 0% 10%);
  }
  10% {
    transform: translate(0, 0);
    clip-path: polygon(3% 100%, 100% 53%, 12% 12%, 0% 3%);
  }
  15% {
    transform: translate(10px, 10px);
    clip-path: polygon(39% 43%, 50% 19%, 15% 22%, 20% 40%);
  }
  20% {
    transform: translate(-10px, -10px);
    clip-path: polygon(100% 54%, 22% 25%, 33% 54%, 34% 97%);
  }
  25% {
    transform: translate(0, 0);
    clip-path: polygon(19% 74%, 75% 84%, 75% 100%, 0% 100%);
  }
}

@keyframes glitchTwo {
  0% {
    transform: translate(20px, 0);
    clip-path: polygon(22% 0%, 0% 84%, 0% 50%, 0% 0%);
  }
  3% {
    transform: translate(0, 10px);
    clip-path: polygon(0% 10%, 50% 32%, 54% 2%, 10% 100%);
  }
  8% {
    transform: translate(0, 0);
    clip-path: polygon(73% 0%, 54% 53%, 0% 12%, 0% 30%);
  }
  12% {
    transform: translate(-10px, 10px);
    clip-path: polygon(0% 23%, 50% 0%, 15% 22%, 0% 40%);
  }
  18% {
    transform: translate(-10px, 10px);
    clip-path: polygon(0% 0%, 19% 25%, 22% 54%, 0% 97%);
  }
  30% {
    transform: translate(0, 0);
    clip-path: polygon(22% 0%, 0% 84%, 0% 50%, 0% 0%);
  }
}

@keyframes glitchThree {
  0% {
    transform: translate(20px, 0);
    clip-path: polygon(11% 23%, 22% 50%, 10% 30%, 10% 3%);
  }
  10% {
    transform: translate(0, 0);
    clip-path: polygon(0% 0%, 0% 10%, 25% 20%, 20% 22%);
  }
  12% {
    transform: translate(-20px, 0);
    clip-path: polygon(3% 0%, 100% 23%, 32% 42%, 10% 32%);
  }
  18% {
    transform: translate(0, 0);
    clip-path: polygon(29% 0%, 40% 0%, 15% 22%, 0% 100%);
  }
  22% {
    transform: translate(0, 10px);
    clip-path: polygon(0% 14%, 22% 0%, 23% 10%, 80% 0%);
  }
  28% {
    transform: translate(0, 0);
    clip-path: polygon(11% 23%, 22% 50%, 10% 30%, 10% 3%);
  }
}


/*******form********/

.formwrap{
  display: none;

}
.subcribe h2{
  font-family: 'Raleway', sans-serif;
  letter-spacing:5;
  font-weight: bolder;
  text-align:center;
  text-transform:uppercase;
  font-size:14px;
  color:#FFF;
}

#subscribe-result{
padding-top: 7%;
  font-size:12px;
  text-transform:uppercase;
}

.box{
  text-align:center;
 position:absolute !important;
  left:0;
  width: 100%;
  max-width: auto;
  top:58%;
  right:0;
  margin:0 auto;
}

input[type="email"] {
  
  padding:2%;
  appearance: none;
  max-width:300px;
  width:100%;
  height:auto;
  font-size:12px;
  letter-spacing:4px;
  background:transparent;
  text-transform:uppercase;
  outline:none;
   border:none;

  border:solid 3px #fff9e6;
  text-align:center;
  transition: border-color 0.6s ease;
 color:#fff9e6;
}



::-webkit-input-placeholder {
   color:#fff9e6;
   transition: color 0.3s ease;
}

:focus::-webkit-input-placeholder {
   color: transparent;
   transition: color 0.3s ease;
}


input[type="email"]:focus {
   outline:none;
   border:none;

  border:solid 3px #fff9e6;;
  transition: border-color 1s ease;
}

input[type="submit"] {
padding: 2%;
  max-width:300px;
  width:100%;
  height:auto;
  font-size:12px;
  background:transparent;
  color:#fff9e6;;
  border:none;
  text-align:center;
  letter-spacing:0.15em;
  text-transform:uppercase;
  transition: color 0.5s ease;
  outline:none;
   border:none;
}

input[type="submit"]:hover {
 
  cursor:pointer;
  transition: color 0.5s ease;
  color:#000;
   -webkit-box-shadow: inset 500px 0 0 0 #fff9e6;
  -moz-box-shadow: inset 500px 0 0 0 #fff9e6;
  -ms-box-shadow: inset 500px 0 0 0 #fff9e6;
  -o-box-shadow: inset 500px 0 0 0 #fff9e6;
  box-shadow: inset 500px 0 0 0 #fff9e6;
  -webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;
  -moz-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;
  -o-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;
  transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;
  -webkit-transform: none;
  transform: none;
}


ul {
  position:absolute;
  top:90%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  width:35px;
  height:35px;
  line-height:100px;
  font-size:20px;
  text-align:center;
  text-decoration:none;
  color:#fff9e6;;
  margin: 0 7px;
  transition:.5s;
}
ul li a span {
  position:absolute;
  transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:yellow;
}
ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:red;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}
ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color:white;
}
.facebook:hover span { 
  background: #3b5998;
}
.twitter:hover {
  color: #1da1f2;
}
.twitter:hover span { 
  background: #1da1f2;
}
.instagram:hover {
  color: white;
}
.instagram:hover span { 
  background: #c32aa3;
}
.google:hover {
  color: #dd4b39;
}
.google:hover span { 
  background: #dd4b39;
}
ul li a .twitter {
  color: #1da1f2;
}
ul li a:hover:nth-child(3) {
  color: #c32aa3;
}
ul li a:hover:nth-child(4) {
  color: #dd4b39;
}