<div id="st-container" class="st-container">
      <!--  
        example menus 
        these menus will be on top of the push wrapper
      -->    
       
      <nav class="st-menu st-effect-9" id="menu-9">
        <h2>Login</h2>
          <form method="post" name="loginform" onsubmit="return false;">
            <ul>          
                <li><a href="#" onclick="return false;">
                  <input   id="login_input_username" class="main-form login_input" type="text" name="user_name" placeholder="Username..."/>
                </a></li>
                <li><a href="#" onclick="return false;">
                  <input   id="login_input_pass" class="login_input login_input_password main-form" type="password" name="user_password" placeholder="password"/>
                </a></li>
                <button  type="submit" id="sub" name="login">Sign in</button>
                 <footer>
              <input class="yolo" name="rememberMe"  value="on" type="checkbox"/><span id="rememberme">Remember me</span>
              <a id="register_acc" href="#"><span>Register new account</span></a>
              <div class="status"></div>
            </footer>     
              
        </ul>
        </form>
      </nav>
     
      <!-- content push wrapper -->
      <div class="st-pusher">
        <!--  
          example menus 
          these menus will be under the push wrapper -->
       
         
        <div class="st-content"><!-- this is the wrapper for the content -->
          <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
            <!-- Top Navigation -->
             
            <header class="codrops-header">
              <h1>Awesome login page <span>Lorem ipsum dolor est cetera</span></h1>
              <iframe style="margin: 0 auto;" width="900" height="415" src="//www.youtube.com/embed/TPh5Xewfd" frameborder="0" allowfullscreen></iframe>

            </header>
           
            <div class="main clearfix">
              <div id="st-trigger-effects" class="column">                 
                <button data-effect="st-effect-9">Do login!</button>                 
              </div>           
            </div><!-- /main -->
          </div><!-- /st-content-inner -->
        </div><!-- /st-content -->
      </div><!-- /st-pusher -->
    </div><!-- /st-container -->

.wrapper {
  text-align:center;
  width:100%;
  
}

.st-menu  h1 {
  color:#fff;
  text-shadow:1px 1px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:20px;  
}

.st-menu  section {
  margin:0 auto;
  width:300px;
  padding:20px;
  text-align:center;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
   -webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
      -moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
          box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
}
.st-menu form {
  width: 300px;
} 
.st-menu  .main-form {
  display:block;
  width:280px;
  height: 50px;
  margin-bottom:15px;
  padding:0px;
  outline:none;
  border:none;
  background:rgba(225, 225, 225, 0.1);
  font:0.7em 'Ubuntu';
  color:#fff;
  font-size: 14px;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.st-menu  .main-form:focus {
  background:#414141;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  color:#777;
}

.st-menu  button {
    border: none;
  padding: 0.6em 1.2em;
  background: #DC4B4B;
  color: #fff;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 0 20px;
  border-radius: 2px;
  text-align; center; 
  }

.st-menu  button:active {
  box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.3);
}

.st-menu  footer {
  padding-top:20px;
  text-align:right;
  width:330px;
  margin:0 auto;
}

.st-menu   .yolo {
    -webkit-appearance: none;
    background:rgba(0, 0, 0, 0.4);
    padding: 9px;
    display: inline-block;
    position: relative;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    float: left;
}

.st-menu   .yolo:checked {
    background-color: #fff;
    color: #fff;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

 

.st-menu  .yolo:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #000;
}

.st-menu  #rememberme {
  display:inline-block;
  position:relative;
  bottom: 0;
  left: 6px;
  color:#fff; 
  font-weight:300;
   font-size: 12px;
  text-shadow:1px 1px 0px rgba(0, 0, 0 ,0.6);
  float: left;
}

.st-menu  #register_acc  {
      font-size: 12px;
      margin-right: 35px;
      position: relative;
      top: -4px;
      text-decoration: none;
      color: #fff;
      clear: both; 

}
.status {
  color: #DC4B4B;
}
.status p {
  float: left;
}

/* css*/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'codropsicons';
  src:url('../fonts/codropsicons/codropsicons.eot');
  src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/codropsicons/codropsicons.woff') format('woff'),
    url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
    url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

body {
  background: #444;
  color: #48a770;
  font-weight: 300;
  font-family: 'Lato', Calibri, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: #48a770;
  outline: none;
}

a:hover, a:focus {
  color: #2c774b;
  outline: none;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.codrops-header,
.codrops-top {
  font-family: 'Lato', Arial, sans-serif;
}

.codrops-header {
  margin: 0 auto 3em;
  padding: 3em;
  text-align: center;
}

.codrops-header h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.625em;
  line-height: 1.3;
  color: #DC4B4B;
}

.codrops-header span {
  display: block;
  padding: 0 0 0.6em 0.1em;
  font-size: 60%;
  color: #aca89a;
}

/* To Navigation Style */
.codrops-top {
  width: 100%;
  text-transform: uppercase;
  font-size: 0.69em;
  line-height: 2.2;
  font-weight: 400;
  background: rgba(255,255,255,0.3);
}

.codrops-top a {
  display: inline-block;
  padding: 0 1em;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.codrops-top a:hover {
  background: rgba(255,255,255,0.4);
  color: #333;
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  display: block;
  float: left;
}

.codrops-icon:before {
  margin: 0 4px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'codropsicons';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}

.main {
  max-width: 69em;
  margin: 0 auto;
}

.column {
  float: left;
  width: 50%;
  padding: 0 2em;
  min-height: 300px;
  position: relative;
  text-align: right;
}

.column:nth-child(2) {
  box-shadow: -1px 0 0 rgba(0,0,0,0.1);
  text-align: left;
}

.column p {
  font-weight: 300;
  font-size: 2em;
  padding: 0 0 0.5em;
  margin: 0;
  line-height: 1.5;
}

button {
  border: none;
  padding: 0.6em 1.2em;
  background: #DC4B4B;
  color: #fff;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 3px -100px;
  border-radius: 2px;
  text-align; center;
 
}

button:hover {
  background: #DC4B4B;
}

.info {
  text-align: center;
  font-size: 1.5em;
  margin-top: 3em;
  clear: both;
  padding: 3em 0;
  opacity: 0.7;
  color: #aca89a;
}

.info a {
  font-weight: 700;
  font-size: 0.9em;
}

@media screen and (max-width: 46.0625em) {
  .column {
    width: 100%;
    min-width: auto;
    min-height: auto;
    padding: 2em; 
    text-align: center;
  }

  .column p {
    font-size: 1.5em;
  }

  .column:nth-child(2) {
    text-align: center;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
  }
}

@media screen and (max-width: 25em) {

  .codrops-header {
    font-size: 80%;
  }

  .codrops-top {
    font-size: 120%;
  }

  .codrops-icon span {
    display: none;
  }

}

/*component*/
*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
.st-container,
.st-pusher,
.st-content {
  height: 100%;
}

.st-content {
  overflow-y: scroll;
  background: #f3efe0;
}

.st-content,
.st-content-inner {
  position: relative;
}

.st-container {
  position: relative;
  overflow: hidden;
}

.st-pusher {
  position: relative;
  left: 0;
  z-index: 99;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.st-pusher::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  width: 300px;
  height: 100%;
   background: rgba(0,0,0,0.4);
  transition: all 0.5s;
}

.st-menu::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

/* content style */

.st-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-menu h2 {
  margin: 0;
  padding: 1em;
  color: #DC4B4B;
  font-weight: 300;
  font-size: 2em;
}

.st-menu ul li a {
  display: block;
  padding: 1em 1em 1em 1.2em;
  outline: none;
  box-shadow: inset 0 -1px rgba(0,0,0,0.2);
  color: #f3efe0;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(255,255,255,0.1);
  letter-spacing: 1px;
  font-weight: 400;
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}

.st-menu ul li:first-child a {
  box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.st-menu ul li a:hover {
  background: rgba(0,0,0,0.2);
  box-shadow: inset 0 -1px rgba(0,0,0,0);
  color: #fff;
}

/* Individual effects */

/* Effect 9: Scale down pusher */

.st-effect-9.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.st-effect-9 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.st-effect-9.st-menu-open .st-pusher {
  -webkit-transform: translate3d(0, 0, -300px);
  transform: translate3d(0, 0, -300px);
}

.st-effect-9.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.st-effect-9.st-menu-open .st-effect-9.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.st-effect-9.st-menu::after {
  display: none;
}



/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
  padding-left: 300px;
}

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );










/**
 * sidebarEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * https://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
 var SidebarMenuEffects = (function() {

  function hasParentClass( e, classname ) {
    if(e === document) return false;
    if( classie.has( e, classname ) ) {
      return true;
    }
    return e.parentNode && hasParentClass( e.parentNode, classname );
  }

  // http://coveroverflow.com/a/11381730/989439
  function mobilecheck() {
    var check = false;
    (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
  }

  function init() {

    var container = document.getElementById( 'st-container' ),
      buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
      // event type (if mobile use touch events)
      eventtype = mobilecheck() ? 'touchstart' : 'click',
      resetMenu = function() {
        classie.remove( container, 'st-menu-open' );
      },
      bodyClickFn = function(evt) {
        if( !hasParentClass( evt.target, 'st-menu' ) ) {
          resetMenu();
          document.removeEventListener( eventtype, bodyClickFn );
        }
      };

    buttons.forEach( function( el, i ) {
      var effect = el.getAttribute( 'data-effect' );

      el.addEventListener( eventtype, function( ev ) {
        ev.stopPropagation();
        ev.preventDefault();
        container.className = 'st-container'; // clear
        classie.add( container, effect );
        setTimeout( function() {
          classie.add( container, 'st-menu-open' );
        }, 25 );
        document.addEventListener( eventtype, bodyClickFn );
      });
    } );

  }

  init();

})();