@charset "UTF-8";


/* article
logo
body
.menuimg:hover {
 */
.topBar .MLG{
	display: inline !important;
}
.slide_text{
    display: -webkit-inline-box;
    position: relative;
    left: 2.8vw;
    font-size: 2vw;
    font-family: Avenir-Light, Futura-Medium, monospace;

}
.ENGBOX_ {
    font-size: 2vw;
}
.SLG{
  display: none !important;
}
.slide_text{
    display: -webkit-inline-box;
    position: relative;
    left: 2.8vw;
    font-size: 2vw;
    font-family: Avenir-Light, Futura-Medium, monospace;

  }
.mobile_slide{
  display: inline;
}
.small_font{
  font-size: 2vw;
}
.fa-desktop{
  padding-top: 1%;
}
.choice{
      font-size: 3vw;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 8%;
}
.choice_{
    font-size: 2vw;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 0%;
}
.topBar{
  z-index: 6000;
}
.topBar div, .topBar a{
    display: flex;
    right: -8vw;
    font-size: 8vw;
    padding-left: 1vw !important;
    margin-bottom: 1vw !important;
    width: 17%;
    border-radius: 1vw;
    position: relative !important;
    background-color: rgba(13,89,123,.5);
}
.topBar div:hover{

    background-color: rgb(9, 83, 116);
    transition: all .3s linear;
}

.topBar_ {
  top: 7%;
}
.topBar_ a{
    padding-left: 7%;

    color: white;
}
.topBar_ a:hover{
    color: white;
}
.topBar_ div, .topBar_ a{
    display: flex;
    right: -13.5vw !important;
    padding-bottom: 1vw !important; 
    padding-top: 1vw !important; 
    font-size: 3vw !important;
    margin-bottom: 2vw !important;
    height: 3vw;
    background-color: rgba(13,89,123,.5);
    transition: all .3s linear;
}
.topBar_ div:hover, .topBar_ a:hover{
  right: 0% !important;
  background-color: rgba(0,0,0,.6) !important;
  transition: all .3s linear;
}
.desktop_ {

}
.fa-mobile{

}
.fa-mobile:before {
    font-size: 5vw !important;
    top: -1vw !important;
    position: inherit;
}
.topBar_ .fa-envelope h5{
    font-size: 2.5vw !important;
    padding: 0vw !important;
}
.fa-phone{
    padding: 0% !important;

}
.topBar .fa-phone a{
      padding: 4vw;
    position: absolute;
}
.topBar_ .fa-phone a{
      padding: 0vw;
      padding-left: 1.2vw;
}
.hide{
  display: none !important;
}
.show{
  display: inline !important; 
}









.glow{
	-webkit-filter: drop-shadow(0px 0px 0px DeepSkyBlue);
	-moz-filter: drop-shadow(0px 0px 0px DeepSkyBlue);
	filter: drop-shadow(0px 0px 0px DeepSkyBlue); 
}
button{
	/*
    border-radius: 6.5px;
    border-width: .6vw;
    border-color: white;
    background-color: rgba(3, 40, 66, 0.15);
 	font-size: 7vw;
 	padding: 2%;
 	*/
 	font-family: Avenir-Light, Futura-Medium, monospace;
 	color: white;
 }
button:hover{

    background-color: rgba(0, 21, 36, 0.8);
}  	    
.galImg{
 	max-width: 300px;
 	height: auto;
 }
 .galImg_large{
 	max-width: 100%;
    height: auto;
    position: absolute;
    background-color: black;
    top: 20%;
    left: 0%;
    z-index: 10000;
 }
.mkt_box{
 	display: flex;

 }
 .horImg{

    vertical-align: middle;
    word-wrap: no-wrap;
    height: auto;
    width: 99%;
    border: .2vw;
    border-style: groove;
    border-radius: 6.25px;
    padding: 0%;
    margin: .5%;
    background-color: rgba(1, 41, 59, .6);
}
.largeImg{

	max-width: calc(100%);
}

ul {
	text-decoration: none;
}
.points{

	list-style-type: none;
}
.float_left{
	float: left;
}
 .inline{
 	display: inline;
 }
 #desktopview{
 	position: fixed;
	top: 10%;
	right: 0;
 }
 .desktop h1{
 	font-size: 4vw;
 }
.desktop{
    position: fixed;
    display: inline;
    top: 0px;
    right: 0px;
    width: 100%;
    max-height: 100%;
    overflow: scroll;
    z-index: 3000;
    border: inset;
    border-color: rgba(1, 41, 59, .6);
    border-width: thick;
    /* background-image: url(../imgs/SMBG.png); */
    background-position: center;
    background-color: rgba(1, 41, 59, .6);
    background-size: cover;
    /* margin-top: 6.25%; */
    z-index: 2000;
    /* font-size: 0vw; */
}
.logIn{
	background-color: rgba(1, 41, 59, .8);
	font-family: Avenir-Light, Futura-Medium, monospace;
}
.logIn a{
	font-size: 9vw;
}
#wine{
	top: 13%;
}
#beer{
	top: 10%;
}
.opac{

	opacity: .8;
}
body{
	font-family: Avenir-Light, Futura-Medium, copperplate;
	 
	font-size: 12px;
	color: #FFF;
	background-image:url(../imgs/BG.jpg);
	background-position:top;
	background-attachment: fixed;
	background-size: cover;
	background-color: black;
	padding: 0;
	margin: 0;
	width: 100%;
	height: inherit;

}
.container{


	width: inherit;
	height: inherit;
	padding: 0;
	margin: 0;
	text-align: center;	
}
.phoneOpt{
	display: none;
	position: absolute;
	background-color: rgba(0, 0, 0, .85);
	right: 0;


}
#contact{

	margin-top: 10%; 
}
.tab{



	display: none;

}
.tab-Opt{

	margin-right: 2.125%;
}
.hTab{

	background-color: rgba(0,0,0, .5);
	display: block;
	
}
.tab-btn{



}
.tab-btn:hover{


}
.tabRow{

	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	display: table-cell;
	white-space: wrap;
	text-align: center;
}
#tab-1{

}
#tab-2{


}
#tab-3{

}
#tab-4{
/*    margin: 0% 0% 10% 10%; */

}
#t4{
	width: 100%;
	position: absolute;
	margin: 0% 0% 0% 0%;
    padding: 5% 0% 0% 0%;

}
.news{


}
.heightImg{
	height: 60%;
}
.MLG {

}

.hide{
	display: none;
}

.ENGBOX{

}
.CHIBOX{


}
.menuCategory p {

		display: inline;
		font-size: 3vw;
}
.menuCategory h5 {

		
		font-size: 3.5vw;
}
.menuCategory h2 {

		
		font-size: 8vw;
}
.price{

	float: right;
	margin-top: -4.25%;
}
.header {

	background-size:contain;
	background-position: center;
	width: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0% 0% 0% 0%;
	margin: 0% 0% 0% 0%;
	

}
.HPheader{
	
	width:auto;
}
.row-1{
	position: relative;
	background-color: rgba(13, 89, 123, .2);
	padding: 0% 0% 0% 0%;
	margin: 10% 5% 0% 5%;
}
.row-2{
	position: relative;
	background-color: rgba(0, 0, 0, .7);
	padding: 0% 0% 0% 0%;
	margin: 0% 5% 0% 5%;
}
a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    
    color: white;
    text-decoration: none;
}


a:hover {
    
   
   color: black;
    
}


a:active {
    color: white;
}


@-webkit-keyframes scrollBackground {
  from {
    background-position: 50% 0px;
  }
  to {
    background-position: 50% 1000px;
  }
}

p {

	font-size: 2.5vw;
}
article{
	font-family: Avenir-Light, Futura-Medium, monospace;
	position: absolute;
	overflow: scroll;
	font-size: 3.25vw;
	width: 100%;
	max-height: 100%;
	background-color: rgba(0, 35, 51, 0.74);
	-webkit-overflow-scrolling:touch;
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;
}
article p{
	    font-family: Avenir-Light, Futura-Medium, monospace;
	    font-size: 4.25vw;
}
textarea{
    width: 89%;
    height: 51vw;
    font-size: 4vw;
    margin-bottom: 3%;
    -webkit-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
	-moz-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
	filter: drop-shadow(0px 0px 1px DeepSkyBlue); 
    border-radius: 6.25px;
    border-width: .6vw;
    border-color: rgba(225, 237, 244, 0.04);
    background-color: rgba(1, 39, 55, 0.05);
 	font-family: Avenir-Light, Futura-Medium, monospace;
 	color: white;
}
input{
    width: 60%;
    height: 10vw;
    font-size: 4vw;
    font-family: Avenir-Light, Futura-Medium, monospace;
    border-radius: 6.25px;
    /*
    -webkit-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
	-moz-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
	filter: drop-shadow(0px 0px 1px DeepSkyBlue); 
    border-width: .6vw;
    border-color: white;
    border-color: rgba(255, 255, 255, 0.09);
    background-color: rgba(1, 39, 55, 0.05);
 	margin-bottom: 3%;
    */
 	color: white;
 	text-align: center;
 	z-index: 5;
}
input:hover, textarea:hover{
	/*
  	background-color: rgba(0, 164, 217, 0.07);
  	*/
}
input:focus, textarea:focus{
	/*
	-webkit-filter: drop-shadow(0px 0px 3px DeepSkyBlue);
	-moz-filter: drop-shadow(0px 0px 3px DeepSkyBlue);
	filter: drop-shadow(0px 0px 3px DeepSkyBlue); 
  	background-color: rgba(3, 20, 27, 0.3);
	*/
}

input #id_email{color:black !important;}
#id_email{color:black !important;}

.infoBody{
	
	width: auto;
	z-index: 100;
	height: 100%;
	background:rgba(0,0,0, .85);
}


#HPlogo{

	padding: 2%;
}

#logo{
	margin-top: 6.25%;
	font-size: 10vw;
	font-family: Avenir-Light, Futura-Medium, monospace;
	color: white;
	position: relative;
}
.logo {
	
	max-height: 25%;
	max-width: 25%;
	height: auto;
	width: auto;
	position:fixed;
	font-size: 3vw;
	top: 0;
	left: 0;
	z-index:5002;
	}
#Logo {
	
	z-index:7001;
	margin-top: 6.25%;


	
}
#testLogo {
	
	z-index:7001;
	margin-top: 6.25%;
	font-size: 10vw;
	font-family: Avenir-Light, Futura-Medium, monospace;
	color: white;	
}
.width{
    width: 50%;

}
.SMI{
	padding: 5px;
	 -webkit-filter: drop-shadow(0px 0px 5px white);
	 -moz-drop-shadow(0px 0px 5px white);
	 filter: drop-shadow(0px 0px 5px white);
	 
	}
.SMI:hover{
	
	  -webkit-filter: drop-shadow(0px 0px 10px white);
	  -moz-filter: drop-shadow(0px 0px 10px white);
	  filter: drop-shadow(0px 0px 10px white);
	
	}
.HPImage{
	max-width: 100%;
	height:auto;
	
	
}
.storeThumb{

	max-width: 100%;
	height:auto;


}

.menuimg:focus{
  	background-color: rgba(25, 189, 255, .3);
}

.menuOpts{
	position: absolute;
	right: 100;
	display: table-cell;
}


.menuItem{
    vertical-align: middle;
    display: table-cell;
    max-width: 100%;
    height: auto;
}

.menuCategory{
	font-size: 3vw;
	vertical-align: middle;
    display: block;
	
	height: auto;
    background-color: rgba(0,0,0, .5);
    /*z-index: 5000;*/
}

.menuContainer{
	width: 70%;
	height: inherit;	
	font-size: 3vw;
	overflow: scroll;
	position: absolute;
	right: 0;
	-webkit-overflow-scrolling:touch;
}

.menuButtons {


	width: 29%;

	font-size: 3.5vw;
	height: 100%;
	font-weight: bolder;	
	position: absolute;

}
.menuButton{
	
	display: block;
	border: thick;
	border-style: groove;


	background-color: rgba(0,0,0, .25);
	color: white;
	vertical-align: text-bottom;
	background-image: url(../tBar.jpg);
	background-position:bottom;
	background-size: cover;

}
.menuButton p{





}
.menuButton:hover{

	  -webkit-filter: drop-shadow(0px 0px 10px black);
	  -moz-filter: drop-shadow(0px 0px 10px black);
	  filter: drop-shadow(0px 0px 10px black);
	background-color: rgba(0,0,0, .5);
}
.menuButton:focus{

	  -webkit-filter: drop-shadow(0px 0px 10px black);
	  -moz-filter: drop-shadow(0px 0px 10px black);
	  filter: drop-shadow(0px 0px 10px black);
	background-color: rgba(0,0,0, .5);
}
.pageBody{


	background-color: rgba(0,0,0, .5);

}
#Logo2:hover{
	
  -webkit-filter: drop-shadow(0px 0px 5px white);
  -moz-box-shadow: 0px 0px 5px white;
	
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.beer2{
	
	display: none;

}
.menuBox{
	position: relative;
	background-color: rgba(0,0,0, .7);
}
.menuBox:hover{

	background-color: rgba(0,0,0, .5);
}
.menuBox:focus{

	background-color: rgba(0,0,0, .5);
}

.infoBox{
	
	position: relative;	
	display:inline-block;
	vertical-align: bottom;
	width: 100%;
}

.infoText{

	position: relative;
	padding: 6.25%;
	vertical-align: baseline;


}

.foodMenu{
	
	background-image:url(../Assets/brandedassets/4.jpg);
	background-size: cover;
	
	
}

.HM{
	display: block;
	position: relative;


}
.blue{
		background-color: rgba(6, 43, 75, .87);
}
.nameInfo2{
	
	

}
.nameInfo2:hover{

}
.nameInfo h3{
		
}
.row-1 h3{
	font-family: Avenir-Light, Futura-Medium, monospace;
	font-size: 4vw;
	margin: -2.5% 0% 0% 0%;
	padding: 0% 0% 0% 0%;

	color: white;
}
.beer2{	
	display: none;
	
}
/*h3{
	font-family: Avenir-Light, Futura-Medium, monospace;
	font-size: 4vw;
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;

	color: white;
}*/
h3{
	font-family: Avenir-Light, Futura-Medium, monospace;
	font-size: 4vw;
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;

	color: white;
}

h1{

	
	font-size: 6.5vw;



	

}
h4{
	
	/*z-index: 5000;*/
	font-size: 4vw;
	margin: 0;
	
}

h5{
	
	/*z-index: 5000;*/
	font-size: 2vw;
	margin: 0% 0% 0% 0%;
	padding: 0% 0% 0% 0%;


	
}

.left{ 
	float: left;
	width: 30%;
}
.right{
	position: absolute;
	right: 0;
}
#map{

	width: 20vw;
	height: 20vw;
}

.storeBox{

	width:auto;
	color: white;
	
	padding-left: 5%;
	padding-right: 5%;
	
	

}
.storeBoxIMG{
	display:table-cell;	
}

.storeBox img{
	max-width: 30%;
}
.infoBox{
	

	width:auto;
	color: white;
	
	padding-left: 5%;
	padding-right: 5%;
	
	
	

}
.infoBox h2, p{
	
	margin: 0%; 

}
.infoBox:hover{

/*	background: rgba(0,0,0,0.47);
	opacity: .8;
	z-index: 14;
	
	*/

	
}

.infoBoxIMG {

}
.infoBoxIMG img{
	
		width: 60%;
		/*z-index: 5000;*/
		float: left;
		padding: 1%;
	
}
	
.infobox2{
	
	font-size: 3vw;
	posistion: relative;
	
	width: 100%;
	
	height:auto;
	
}
.infobox2:hover{

	/*
	background:rgba(0,0,90, .25);
	
	z-index: 14;
	*/

	
}
.infobox2 img{
	
	height:auto;
	max-width: 100%;
	
	}
#category1IB{
	
	
	
	/*
	background-image:url(../mainIgms/boards.jpg);
	background-size:cover;
	background-position: center;
	*/
}

#category2IB{
	
	background-color: rgba(39,48,69, .5);
	
	
}

form {
	
	padding: 0;
	margin: 0;
	font-family: Avenir-Light, Futura-Medium, monospace;
	font-size: 5vw;	
}

.storeItemTextOff{
	
	position:absolute;
	top:50px;
	left: 200px;
	display: none;

	
	
}

.storeItemTextOn{
	
	display:block;
	top: 10;
}
.storeItemText{
	
	position:absolute;
	top:200px;
	
}
.topBar{

	height: 6.25%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	font-family: Avenir-Light, Futura-Medium, monospace;
	z-index: 2900;
}
.topBar img{
	
	height:auto;
	max-width: 50%;


}
.bottomBar{


	height: 8.25%;
	position: fixed;
	bottom: 0;
	width: 100%;
	margin-left: -2%;
	margin-right: -1%;

}
.responsiveWrapper {
	position: relative;



}
.responsiveWrapper ol li img {

	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 57vw;


	background-color: black;



}
.responsiveWrapper ol {
	
	height: inherit;
	width: inherit;

	list-style: none;
}
.responsiveWrapper ol li {
	position: absolute;
	background-color: black;
	width: 100%;
	margin: 0% 0% 0% 0%;
	padding: 2.5% 0% 2.5% 0%;
	left: 0;



}
.responsiveWrapper ol li p img{

	
	position: relative;
	
	z-index: 2;





}
.responsiveWrapper ol li p{

	
	position: absolute;
	bottom: 20%;
	font-size: 3vw;
	padding: 5%;



}
.responsiveWrapper a.control_prev, a.control_next {
  position: absolute;
  
  z-index: 999;
  display: block;

  padding: 10% 0% 10% 0%;
  margin: 5% 0% 5% 0%;
  width: 10%;
  background: #2a2a2a;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: .9;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;

  -webkit-transition: all 0.2s ease;
}

a.control_prev {


  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

a.control_prevH, a.control_nextH {
  position: absolute;
  top: 0;
  z-index: 999;
  display: block;
  padding: 10% 3% 10% 5%;

  width: 5%;
  height: 40%;
  background: #2a2a2a;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: .5;
  cursor: pointer;
}

a.control_prevH:hover, a.control_nextH:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prevH {
	left: 0;
	float: left;
  border-radius: 0 2px 2px 0;
}

a.control_nextH {
  right: 0;
  float: right;
  border-radius: 2px 0 0 2px;
}
.hpSliderImg {

	padding: 10% 0% 10% 0%;
}
div#loadScreen{

	background-color: black;
	opacity: 1;
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
}
div#loadScreen > div#loading{

	color: white;
	width: 150px;
	height: 24px;
	margin: 300px auto;
}

/* BEERSLIDER */
body ul{
	  
	   overflow-y: hidden;	
	   overflow-x: scroll;
	   
  -webkit-overflow-scrolling:touch;	
	
	}
body ul li{
	  



}
body ul li{
	  

	max-height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	


	}


body ul img{

	max-height: calc(50%);

	-webkit-transform: translate3d(0,0,0);

}
#CIPA{
	
   filter:  hue-rotate(340deg);
  -webkit-filter: hue-rotate(340deg);
   z-index: -1;
	

	
}
#WWIPA{
	
	

  z-index: -1;
  
	
	
	
}
#CW{
  filter: hue-rotate(3600deg) brightness(2);
  -webkit-filter: hue-rotate(3600deg) brightness(2);
  z-index: -1;


	}
#MS{
	filter: hue-rotate(295deg) brightness(.2);
  -webkit-filter: hue-rotate(295deg) brightness(.2);
    z-index: -1;

	
	}
#TXAPA{
	
	filter: hue-rotate(340deg) brightness(.85);
  -webkit-filter: hue-rotate(340deg) brightness(.85);
    z-index: -1;


}

#AA{


   filter: hue-rotate(325deg) brightness(.8) saturate(1.9);
  -webkit-filter: hue-rotate(325deg) brightness(.8) saturate(1.9);
   z-index: -1;

}
#PRT{

  filter: hue-rotate(320deg) brightness(.5) saturate(1) contrast(200%);
  -webkit-filter: hue-rotate(315deg) brightness(.3) saturate(.8) contrast(120%);
  z-index: -1;
  position: 
  top: 0;
  

}
#RWIPA{
	
  filter: hue-rotate(320deg) brightness(.5) saturate(1.3);
  -webkit-filter: hue-rotate(315deg) brightness(.5) saturate(1.6);
  z-index: -1;

}

#slider {
   
	
	position: relative;
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 0%;
	margin-bottom: 0%;


}

#slider img{
		
	}

#slider ul {

   
}

#slider ul li {


	position: relative;
  	display: table-cell;
	vertical-align: middle;
 
}


.beerbox{


	
	z-index: 500;

	

	
}

.beerbox img{
	

	max-height: 100%;


}

	
	
	
	
	

.beer1{


}
.beer1 img{}
.beer2{
	display: none;
	-webkit-filter: drop-shadow(0px 0px 10px black);
	-moz-filter: drop-shadow(0px 0px 10px black);
	filter: drop-shadow(0px 0px 10px black); 
}

.beerinfo{}

.beerslide{}
.beerInfo{
	/*z-index: 5000;*/
	position: absolute;
	top: 15%;
	width: 100%;
	-webkit-transform: translate3d(0,0,0);
	z-index: 1300;
}
.nameInfo{}
/*
.nameInfo{
	
	
	position: relative;
	
	background-color: rgba(0,0,0, .5);
	border-color: rgba(30,30,30,1.00);
	border-style:groove;
	border-width: 1.5vw;
}
.nameInfo{
	position: absolute;
	top: 10%;
	width: 100%;
	background-color: rgba(0,0,0, .5);
	border-color: rgba(30,30,30,1.00);
	border-style:groove;
	border-width: 1.5vw;
	-webkit-transform: translate3d(0,0,0);
	z-index: 1300;
}
*/
.nameInfo img{


}
#loadScreen{

	background-color: black;
	position: absolute;
	top: 0;
	width: 100%;
	height: inherit;
	z-index: 7001;

}
.loading{

  padding: 5%;
  animation: load 5.5s cubic-bezier(.46,.03,.52,.96) 1.5s infinite;
  -webkit-animation: load 5.5s cubic-bezier(.46,.03,.52,.96) 1.5s infinite;
  border: 6vw inset DarkGoldenRod;
  border-radius: 0%;
  display: inline-block;
  height: 1vw;
  margin-top: 25%;
  margin-bottom: 25%;
  width: 1vw;
  z-index: 7000;
  -webkit-filter: drop-shadow(0px 0px 10px #CC9900);
  -moz-filter: drop-shadow(0px 0px 10px #CC9900);
  filter: drop-shadow(0px 0px 10px #CC9900); 
}
.menu {
    position: fixed;
    display: none;
    width: 1.5vw;
    margin: 2.5vw;
    left: 0%;
    top: 0%;
    z-index: 8000;
}
.menu a {
	height: 100%;
}
.menu span {
	margin: 0 auto;
	position: relative;
	top: 12px;
	z-index: 8000;
}
.menu span:before, .menu span:after {
	position: absolute;
	content: '';
}
.menu span, .menu span:before, .menu span:after {
	width: 30px;
	height: 6px;
	background-color: white;
	display: block;
}
.menu span:before {
	margin-top: -12px;
}
.menu span:after {
	margin-top: 12px;
}
.example9 span {
	-webkit-transition-property: margin, width; transition-property: margin, width;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.example9:hover span {
	margin-top: 6px;
	width: 20px;
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.example9 span:after {
  left: 0;
	-webkit-transition-property: margin, left; transition-property: margin, left;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.example9:hover span:after {
	margin-top: 6px;
	left: -5px;
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.example9 span:before {
  left: 0;
	-webkit-transition-property: margin, width, left; transition-property: margin, width, left;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s, 0s; transition-delay: 0.2s, 0s, 0s;
}
.example9:hover span:before {
	margin-top: -6px;
	width: 10px;
	left: 5px;
	-webkit-transition-delay: 0s, 0.2s, 0.2s; transition-delay: 0s, 0.2s, 0.2s;
}


label #id_email{
	text-align: left !important;
	width: 97% !important;
	color: white !important;
}
form.password_reset label{
	text-align: left !important;
	width: 97% !important;
	color: white !important;
}