body {
  background: #d2d3d5;
  font-family: 'Roboto', sans-serif;
  background:   url(../img/Wpf.jpeg) fixed center center;
 
  height: 100%;
  width: 100%;
  
}


body {
  background: linear-gradient(215deg, rgba(156, 156, 156, 0.03) 0%, rgba(156, 156, 156, 0.03) 50%,rgba(20, 20, 20, 0.03) 50%, rgba(20, 20, 20, 0.03) 100%),linear-gradient(107deg, rgba(179, 179, 179, 0.03) 0%, rgba(179, 179, 179, 0.03) 50%,rgba(7, 7, 7, 0.03) 50%, rgba(7, 7, 7, 0.03) 100%),linear-gradient(25deg, rgba(30, 30, 30, 0.01) 0%, rgba(30, 30, 30, 0.01) 50%,rgba(165, 165, 165, 0.01) 50%, rgba(165, 165, 165, 0.01) 100%),linear-gradient(146deg, rgba(54, 54, 54, 0.03) 0%, rgba(54, 54, 54, 0.03) 50%,rgba(246, 246, 246, 0.03) 50%, rgba(246, 246, 246, 0.03) 100%),linear-gradient(225deg, rgba(8, 8, 8, 0.01) 0%, rgba(8, 8, 8, 0.01) 50%,rgba(133, 133, 133, 0.01) 50%, rgba(133, 133, 133, 0.01) 100%),linear-gradient(38deg, rgba(57, 57, 57, 0.02) 0%, rgba(57, 57, 57, 0.02) 50%,rgba(196, 196, 196, 0.02) 50%, rgba(196, 196, 196, 0.02) 100%),linear-gradient(122deg, rgba(115, 115, 115, 0.02) 0%, rgba(115, 115, 115, 0.02) 50%,rgba(101, 101, 101, 0.02) 50%, rgba(101, 101, 101, 0.02) 100%),linear-gradient(154deg, rgba(217, 217, 217, 0.01) 0%, rgba(217, 217, 217, 0.01) 50%,rgba(126, 126, 126, 0.01) 50%, rgba(126, 126, 126, 0.01) 100%),linear-gradient(144deg, rgba(204, 204, 204, 0.01) 0%, rgba(204, 204, 204, 0.01) 50%,rgba(139, 139, 139, 0.01) 50%, rgba(139, 139, 139, 0.01) 100%),linear-gradient(90deg, rgb(0, 2, 29),rgb(4, 150, 89));
  
  color: #fff;
  font-weight: bold;
  height: 100vh;
}

 
body::before {
  content: '0011 1010 0101 1 01110 00110 110011 0100 100 010 00101 110011 1 0101 110011 1 010010 00100 1 00 1100 000 1011 1010100 110 10 1010 10 10 110 110111 1 11 10 101 10111 00001 111 1111 11 11010 10100 10 00100 1 00 1100 000 10111 01010 0110 10 1010 10 10 110 110111 1 11 10 101 10111 00001 111 1111 11 11010 101 1101 1 11 11101 101 0011 1010 0101 1 01110 00110 110011 010 0100 010 001 1101 1 11 11101 101 ';
  display: block;
  position: fixed;
  width: 0;
  top: 0;
  left: 0;
  color: #2E7D32;
  opacity: .5;
  
  animation: matrix .25s infinite linear;
}

body::after {
  content: '0011 1010 0101 1 01110 00110 0 1011 1010 1001 10 10 1010 10 10 110 110111 1 11 10 101 10111 00001 111 11110 101 1101 1 11 11101 101 0011 1010 0101 1 01110 00110 110011 0100100 01000101 110011 1 010010 00100 1  11 11010 101 1101 1 11 11101 101 110 011 01 00100 01000101 110011 1 010010 00100 1 00 1100 000 1011 10101 00110 10 1010 10 10 110 110111 1 11 10 101 101 11 00001 111 1111 11 110100 1100 00';
  display: block;
  position: fixed;
  width: 0;
  top: 5px;
  left: 0;
  color: #2E7D32;
  opacity: .5;
  
  animation: matrix2 .25s infinite linear;
}

@keyframes matrix {
  0%{
    top: 50px;
    opacity: 0;
  }
  
}

@keyframes matrix2 {
  50%{
    top: 0;
    opacity: 0;
  }
  
}







body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  
}

.animation-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 20%;
}

.animation-container span {
  color: rgb(12, 110, 18);
  display: block;
  font-size: 18px;
  font-family: 'Helvetica';
  text-shadow: 0 0 1px rgb(15, 112, 20);
  position: absolute;
  user-select: none;
  pointer-events: none;
  cursor: default;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-timing-function: ease-out;
  animation-name: move;
}

@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}



.card {
  position: absolute;
  top: 28%;
  left: 41%;
  margin: -198px 0 0 -350px;
  height: 510px;
  width: 890px;
  background: #f8f8fa;
  background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/radar-love-searc.gif) fixed  center;
  box-shadow: 1px 1px 10px -2px rgba(151, 128, 128, 0.7);
  overflow: hidden;


  box-shadow: 2px 4px 4px 4px rgba(5, 207, 243, 0.904), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
 
 
}
 

#back .top {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: skewx(45deg);
  height: 50px;
  width: 100%;
}

#back .top:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  width: 80%;
  height: 55%;
  background: #0978ad;
  opacity: .8;
  z-index: 3
}

#back .top:after {
  content: " ";
  position: absolute;
  top: 0;
  right: -10px;
  height: 100%;
  width: 60%;
  background: #1bac52;
  z-index: 1;
}

#back .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 90%;
  background: ;
  transform-origin: bottom right;
  transform: skewx(45deg);
  
}

#back .bottom .inner-div {
  width: 100%;
  height: 100%;
  background: #0978ad;
  opacity: .8;
  z-index: 3;
}

#back .bottom:before {
  content: " ";
  position: absolute;
  top: -30px;
  left: 0;
  height: 90%;
  width: 70%;
  background: #D2D3D5;
}

#back .bottom:after {
  z-index: -1;
  position: absolute;
  content: " ";
  bottom: 0;
  right: -80px;
  width: 60%;
  height: 50px;
  background: #1bac52;
  opacity: .8;
}

#back .mid {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
}

#back .mid .inner-div {
  position: absolute;
  z-index: 1;
  width: 460px;
}

#back .typography {
  text-indent: 20px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #308d44;
}

#back .designer {
  margin-top: 30px;
  color: #eef3f5;
  font-size: 24px; background-color:#428f5b;
  width: 90%;
}

#back .designer span {
  font-weight: 600;
}

#back .title {
  font-size: 20px;
  color: #faf8f8;
  background-color: #25a5ac;
  width: 80%;
  margin-bottom: 141px;   
}

#back .icons {
  margin-top: 55px;
  padding-left: 30px;
}



#back .icons .icon {
  position: relative;
  height: 28px;
  width: 28px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  text-align: center;
  padding-left: 1px;
}

#back .icons .icon i {
  display: inline-block;
  color: #104980;
}

.icon i{
    line-height: 26px;
}

.icon:nth-child(3) i{
    line-height: 28px;
}

.icon span {
  text-align: left;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 40px;
  width: 300px;
  font-size: .5em;
  transform: translateY(-55%);
}

.icon:nth-child(n+2) span {
  color:#fff;
}

 



button {
	padding: 5px 20px;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	font-size: 17px; margin-left: -27px; font-weight: bold; 
}
 
#shadow {
	border-radius: 5px;
	border: 1px solid #000;
	box-shadow: 10px 10px;
  background: #1bac52;
  color: #fff;
	transition: box-shadow 300ms ease, transform 500ms ease;transform: skewx(deg);
}

#shadow:hover    :before {
    top: -150%;
  }
  
  #shadow:hover {
    background: #b9c0c0;
    color: rgb(20, 20, 20);
  }

#shadow:active {
	transform: scale(0.9);
}
 
 
* {margin: 0; padding: 0}
body {background: #000;}
canvas {display: block;}
@media only screen and (min-width: 202px) and (max-width: 411px){
 
  .card {
    position: absolute;
    top: 50%;
     left: 80%;
     margin: -150px 0 0 -262px;
    height: 564px;
    width: 344px;
     
    background: #f8f8fa;
     
    box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);
    overflow: hidden;
  
   
  box-shadow: 2px 4px 4px 4px rgba(5, 207, 243, 0.904), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
 
  
}
  
  
#back .top {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: skewx(45deg);
  height: 50px;
  width: 100%;
}

#back .top:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  width: 80%;
  height: 55%;
  background: #0978ad;
  opacity: .8;
  z-index: 3
}

#back .top:after {
  content: " ";
  position: absolute;
  top: 0;
  right: -10px;
  height: 100%;
  width: 60%;
  background: #D2D3D5;
  z-index: 1;
}

#back .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 90%;
  background: ;
  transform-origin: bottom right;
  transform: skewx(45deg);
  
}

#back .bottom .inner-div {
  width: 100%;
  height: 100%;
  background: #0978ad;
  opacity: .8;
  z-index: 3;
}


#back .bottom:before {
  content: " ";
  position: absolute;
  top: -30px;
  left: 0;
  height: 90%;
  width: 70%;
  background: #D2D3D5;
}

#back .bottom:after {
  z-index: -1;
  position: absolute;
  content: " ";
  bottom: 0;
  right: -80px;
  width: 60%;
  height: 20px;
  background: #1bac52;
  opacity: .8;
}



#back .mid {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
}

#back .mid .inner-div {
  position: absolute;
  z-index: 1;
  width: 310px;
}

#back .typography {
  text-indent: 20px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #308d44;
   
}

 

#back .icons {
  margin-top: 55px;
  padding-left: 30px;
}




#back .designer {
  margin-top: 30px;
  color: #eef3f5;
  font-size: 18px; background-color:#428f5b;
  width: 110%;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

#back .designer span {
  font-weight: 600;
}


#back .title {
  font-size: 16px;
  color: #faf8f8;
  background-color: #25a5ac;
  width: 110%;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 214px; 
}
#back .icons .icon {
  position: relative;
  height: 28px;
  width: 28px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  text-align: center;
  padding-left: 1px;
}

#back .icons .icon i {
  display: inline-block;
  color: #104980;
}

.icon i{
    line-height: 26px;
}

.icon:nth-child(3) i{
    line-height: 28px;
}

.icon span {
  text-align: left;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 40px;
  width: 300px;
  font-size: .5em;
  transform: translateY(-55%);

}

.icon:nth-child(n+2) span {
  color:#fff;
}



button {
	padding: 5px 20px;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	font-size: 16px; margin-left: -27px; font-weight: bold; 
   
   
   
}
 
#shadow {
	border-radius: 5px;
	border: 1px solid #000;
	box-shadow: 10px 10px;
  background: #1bac52;
  color: #fff;
	transition: box-shadow 300ms ease, transform 500ms ease;transform: skewx(deg);
}

#shadow:hover    :before {
    top: -150%;
  }
  
  #shadow:hover {
    background: #b9c0c0;
    color: rgb(20, 20, 20);
  }

#shadow:active {
	transform: scale(0.9);
}



.fullscreen-centered #content {
  background: transparent;
  position: fixed;
  top: 30%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 80%;
  }
  

  .animation-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 10%;
  } 

  .animation-container span {
    color: rgb(26, 148, 34);
    display: block;
    font-size: 14px;
    font-family: 'Helvetica';
    text-shadow: 0 0 1px rgb(15, 112, 20);
    position: absolute;
    user-select: none;
    pointer-events: none;
    cursor: default;
    z-index: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-out;
    animation-name: move;
  }

}

@media only screen and (min-width: 412px) and (max-width: 514px){
  
  
  .card {
    position: absolute;
    top: 50%;
     left: 80%;
     margin: -150px 0 0 -290px;
    height: 564px;
    width: 380px;
     
    background: #f8f8fa;
     
    box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);
    overflow: hidden;
  
  
    
  box-shadow: 2px 4px 4px 4px rgba(5, 207, 243, 0.904), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
 
}
  
  
#back .top {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: skewx(45deg);
  height: 50px;
  width: 100%;
}

#back .top:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  width: 80%;
  height: 55%;
  background: #0978ad;
  opacity: .8;
  z-index: 3
}

#back .top:after {
  content: " ";
  position: absolute;
  top: 0;
  right: -10px;
  height: 100%;
  width: 60%;
  background: #D2D3D5;
  z-index: 1;
}

#back .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 90%;
  background: ;
  transform-origin: bottom right;
  transform: skewx(45deg);
  
}

#back .bottom .inner-div {
  width: 100%;
  height: 100%;
  background: #0978ad;
  opacity: .8;
  z-index: 3;
}


#back .bottom:before {
  content: " ";
  position: absolute;
  top: -30px;
  left: 0;
  height: 90%;
  width: 70%;
  background: #D2D3D5;
}

#back .bottom:after {
  z-index: -1;
  position: absolute;
  content: " ";
  bottom: 0;
  right: -80px;
  width: 60%;
  height: 20px;
  background: #1bac52;
  opacity: .8;
}



#back .mid {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
}

#back .mid .inner-div {
  position: absolute;
  z-index: 1;
  width: 310px;
}

#back .typography {
  text-indent: 20px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #308d44;
}

 

#back .icons {
  margin-top: 55px;
  padding-left: 30px;
}




#back .designer {
  margin-top: 30px;
  color: #eef3f5;
  font-size: 18px; background-color:#428f5b;
  width: 100%;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

#back .designer span {
  font-weight: 600;
}


#back .title {
  font-size: 16px;
  color: #faf8f8;
  background-color: #25a5ac;
  width: 100%;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 214px; 
}
#back .icons .icon {
  position: relative;
  height: 28px;
  width: 28px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  text-align: center;
  padding-left: 1px;
}

#back .icons .icon i {
  display: inline-block;
  color: #104980;
}

.icon i{
    line-height: 26px;
}

.icon:nth-child(3) i{
    line-height: 28px;
}

.icon span {
  text-align: left;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 40px;
  width: 300px;
  font-size: .5em;
  transform: translateY(-55%);

}

.icon:nth-child(n+2) span {
  color:#fff;
}



button {
	padding: 5px 20px;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	font-size: 16px; margin-left: -27px; font-weight: bold; 
   
   
   
}
 
#shadow {
	border-radius: 5px;
	border: 1px solid #000;
	box-shadow: 10px 10px;
  background: #1bac52;
  color: #fff;
	transition: box-shadow 300ms ease, transform 500ms ease;transform: skewx(deg);
}

#shadow:hover    :before {
    top: -150%;
  }
  
  #shadow:hover {
    background: #b9c0c0;
    color: rgb(20, 20, 20);
  }

#shadow:active {
	transform: scale(0.9);
}



.fullscreen-centered #content {
  background: transparent;
  position: fixed;
  top: 30%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 80%;
  }
  

}



@media only screen and (min-width: 515px) and (max-width: 771px){
  
  
  .card {
    position: absolute;
    top: 29%;
     left: 52%;
     margin: -150px 0 0 -250px;
    height: 564px;
    width: 470px;
     
    background: #f8f8fa;
     
    box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);
    overflow: hidden;
  
    
  box-shadow: 2px 4px 4px 4px rgba(5, 207, 243, 0.904), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
 
  }

  #back .mid .inner-div {
    position: absolute;
    z-index: 1;
    width: 410px;
  }
  
#back .title {
  font-size: 16px;
  color: #faf8f8;
  background-color: #25a5ac;
  width: 100%;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 224px; 

}

}

.box {
  position: relative;
  
  border-radius: 5%;
  background: linear-gradient(45deg, transparent, transparent 40%, rgb(0, 60, 255)),
    linear-gradient(#262626, #141414);
  animation: rotate 10.5s linear infinite;
}

.box:before,
.box:after {
  content: " ";
  position: absolute;
  inset: 8px;
  
  border-radius: inherit;
}

.box:before {
  background: linear-gradient(45deg, transparent, transparent 40%, rgb(0, 102, 255));
  filter: blur(31px);
}

@keyframes rotate {
  100% {
    transform: rotate(0deg);
 
    filter: hue-rotate(360deg);
  }
}

 /*------------------------------------------- login -------------------------------------------*/
  
  
 .login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 44px;
  padding: 0;
  color: #F1EEE6;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  color: #F1EEE6;
margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #F1EEE6;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 10px 0;
  font-size: 14px;
  color: #F1EEE6;
  pointer-events: none;
  transition: .5s;
}

.card .user-box input:focus ~ label, .card .user-box input:valid ~ label {
  top: -20px; 
  left: 0px; 
  color: #03E9F4;
  font-size: 14px;
}

.card form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03E9F4;
  font-size: 14px;
  text-decoration: none;
  
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
}

.card a:hover {
  background: #03E9F4;
  color: #F1EEE6;
  border-radius: 5px;
  box-shadow: 0 0 5px #03E9F4,
               0 0 25px #03E9F4,
               0 0 50px #03E9F4,
               0 0 100px #03E9F4;
}

.card a span {
  position: absolute;
  display: block;
}




.card a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 8s linear infinite;
}

@keyframes btn-anim1 {
0% {
  left: -100%;
}
50%,100% {
  left: 100%;
}
}

 

.card span:nth-child(3){
  bottom: 0;
  tight: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03E9F4);
  animation: btn-anim3 10s linear infinite;
  animation-delay: .5s;
}

@keyframes btn-anim3 {
  0%{
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.card span:nth-child(4) {
  bottom: -100%;
  left: 0;
   
  height: 100%;width: 2px;
  background: linear-gradient(360deg, transparent, #30E9F4);
  animation: btn-anim4 10s linear infinite;
  animation-dealy: 1.75s;
}

@keyframes btn-anim4 {
0% {
  bottom: -100%;
}
50%,100% {
  bottom: 100%;
}
}

/*- login ----------------------------->*/

#background-wrapper {
background-color: #000000;
background-position: left top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding-bottom: 0;
border-bottom: 1px solid #21e5ff;


 
  outline: 1px solid #19F6E8;
  display: inline-block;

}
.benches {
background-image: url(../img/47_2.jpg);
}
.boots {
background-image: url(../img/eth-20.jpg);
}

a.btn-hh-trigger {
display: block;
font-size: 0 !important;
line-height: 31px;
width: 30px;
height: 34px;
background: #21f0ff;
text-align: center;
color: #ffffff;
padding: 0;
margin: 0 0 0 10px;
text-decoration: none;
position: relative;
top: -11px;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
border: none;
}
a.btn-hh-trigger:before,
a.btn-hh-trigger:after {
content: "\f067";
font-family: 'FontAwesome';
font-size: 18px;
font-style: normal;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
padding: 0;
margin: 0;
position: absolute;
line-height: 30px;
width: 30px;
height: 30px;
top: 2px;
bottom: 0;
left: -1px;
right: 0;
opacity: 1;
filter: alpha(opacity=100);
}
a.btn-hh-trigger:after {
content: "\f068";
opacity: 0;
filter: alpha(opacity=0);
}
a.btn-hh-trigger.target-open:before {
opacity: 0;
filter: alpha(opacity=0);
}
a.btn-hh-trigger.target-open:after {
opacity: 1;
filter: alpha(opacity=100);

}
#content > .block:first-child {
margin-top: -20px;
}
#footer {
min-height: 400px;
color: #999;
}
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer strong {
color: #ffffff;
}
#footer a:not(.btn) {
color: #0bee44;
}
#footer .subfooter {
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 1em;
padding-top: 1em;

}
.fullscreen-centered #background-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;

}
 
   
@media only screen and (min-width: 680px){
	
 
.fullscreen-centered #content {
  background: transparent;
  position: fixed;
  top: 40%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 80%;
  }
  

}