@font-face {
 font-family: Open sans;
 src: url(OpenSans-Regular.ttf);
}

/* Base DOM element for all the social login popup stuff. */
#magestore-popup {
	width:90%;
	z-index:99999; /* barf */
	max-width: 500px;
	overflow: auto;
	margin: auto;
	padding:0;
}

#magestore-popup {
	font-family: Open sans;
	font-size: 16px;
	line-height:1.6em;
}
#sociallogin_button button ,
#magestore-popup .social-button button {
	font-family: Open sans;
	padding:0;
	margin:0;
	border: 0;
}

#sociallogin_button .button {
	padding: 0;
	margin: 0;
	border: 0;
	display: inline-block;
}

#magestore-popup h1 ,
#magestore-popup h2 ,
#magestore-popup h3 ,
#magestore-popup h4 {
	padding:0;
	margin:0;
	font-size:1.5em;
}

#magestore-popup li ,
#magestore-popup ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

ul.magestore-login-social li {
	border:none;
	padding:0;
}

.clear{
 width:100%;
 height:0px;
 clear:both;
 font-size:0px;
 line-height:0px;
}

/* ******************************************************* */
/* ******************************************************* */
/* A couple repetitions for the different login providers. */
#sociallogin_button #bt-loginfb span, #bt-loginfb-popup span{
    height:35px;
    background: url("sociallogin/fb.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginfb span span, #bt-loginfb-popup span span{background: none repeat scroll 0 0 #2d78bd;}
#sociallogin_button #bt-loginamazon span, #bt-loginamazon-popup span{
    height:35px;
    background: url("sociallogin/bt_amazon.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginamazon span span, #bt-loginamazon-popup span span{background: none repeat scroll 0 0 #fe9900;}
#sociallogin_button #bt-loginins span, #bt-loginins-popup span{
    height:35px;
    background: url("sociallogin/bt_intagram.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginins span span, #bt-loginins-popup span span{background: none repeat scroll 0 0 #42729a;}
#sociallogin_button #bt-logingo span, #bt-logingo-popup span{
    height: 35px;
    background: url("sociallogin/google.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-logingo span span, #bt-logingo-popup span span{background: none repeat scroll 0 0 #dd4b39;}
#magestore-popup  .input-box{width:100%;}
#sociallogin_button #bt-loginvk span, #bt-loginvk-popup span{
    height: 35px;
    background: url("sociallogin/vk.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginvk span span, #bt-loginvk-popup span span{background: none repeat scroll 0 0 #44678d;}
#sociallogin_button #bt-loginper span, #bt-loginper-popup span{
    height: 35px;
    background: url("sociallogin/persional.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginper span span, #bt-loginper-popup span span{background: none repeat scroll 0 0 #ffc823;}
#bt-logintw-popup span{
    height: 35px;
    background: url("sociallogin/twit.png") no-repeat;
    background-color: #28BCEB;
    display: block;
}
#bt-logintw-popup span span { 	background-image: none; }
#sociallogin_button #bt-loginse span, #bt-loginse-popup span{
    height: 35px;
    background: url("sociallogin/stack.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginse span span, #bt-loginse-popup span  span{background: none repeat scroll 0 0 #3170c3;}

#sociallogin_button #bt-logintw span, #bt-loginaol-popup span{
    height: 35px;
	background: url("sociallogin/twit.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-logintw span span, #bt-loginaol-popup span span{background: none repeat scroll 0 0 #28bceb;}
#sociallogin_button #bt-loginwp span, #bt-loginwp-popup span{   
	background: url("sociallogin/wpress.png") no-repeat;  
}
#sociallogin_button #bt-loginwp span span, #bt-loginwp-popup span span{background: none repeat scroll 0 0 #555555;}
#sociallogin_button #bt-loginya span, #bt-loginya-popup span{
    height: 35px;
	background: url("sociallogin/yh.png") no-repeat;
    display: block;
}
#sociallogin_button #bt-loginya span span, #bt-loginya-popup span span{background: none repeat scroll 0 0 #6f2b90;}
#sociallogin_button #bt-loginaol span, #bt-loginaol-popup span{    
	background: url("sociallogin/aol.png") no-repeat;  
}
#sociallogin_button #bt-loginaol span span, #bt-loginaol-popup span span{background: none repeat scroll 0 0 #ffc923;}
#sociallogin_button #bt-loginwp span, #bt-loginwp-popup span{   
	background: url("sociallogin/wpress.png") no-repeat;  
}
#sociallogin_button #bt-loginwp span span, #bt-loginwp-popup span span{background: none repeat scroll 0 0 #555555;}
#sociallogin_button #bt-logincal span, #bt-logincal-popup span{    
	background: url("sociallogin/clavid.png") no-repeat;    
}
#sociallogin_button #bt-logincal span span, #bt-logincal-popup span span{ background: none repeat scroll 0 0 #12396b;}
#sociallogin_button #bt-loginorg span, #bt-loginorg-popup span{    
	background: url("sociallogin/orange.png") no-repeat;    
}
#sociallogin_button #bt-loginorg span span, #bt-loginorg-popup span span{background: none repeat scroll 0 0 #ff6501;}
#sociallogin_button #bt-loginmp span, #bt-loginmp-popup span{    
	background: url("sociallogin/mysp.png") no-repeat;    
}
#sociallogin_button #bt-loginmp span span, #bt-loginmp-popup span span{background: none repeat scroll 0 0 #ff6501;}
#sociallogin_button #bt-loginlive span, #bt-loginlive-popup span{    
	background: url("sociallogin/live.png") no-repeat;
}
#sociallogin_button #bt-loginlive span span, #bt-loginlive-popup span span{  background: none repeat scroll 0 0 #30a8e4;}
#sociallogin_button #bt-loginfq span, #bt-loginfq-popup span{    
	background: url("sociallogin/fq.png") no-repeat;   
}
#sociallogin_button #bt-loginfq span span, #bt-loginfq-popup span span{	background: none repeat scroll 0 0 #099eba;}

#sociallogin_button #bt-loginlinked span, #bt-loginlinked-popup span{    
	background: url("sociallogin/linked.png") no-repeat;   
}
#sociallogin_button #bt-loginlinked span span, #bt-loginlinked-popup span span{background: none repeat scroll 0 0 #017fb2;}
#sociallogin_button #bt-loginopen span, #bt-loginopen-popup span{    
	background: url("sociallogin/myop.png") no-repeat;
}
#sociallogin_button #bt-loginopen span span, #bt-loginopen-popup span span{background: none repeat scroll 0 0 #74bc52;}
#sociallogin_button #bt-loginlj span, #bt-loginlj-popup span{    
	background: url("sociallogin/liveJ.png") no-repeat;   
}
#sociallogin_button #bt-loginlj span span, #bt-loginlj-popup span span{background: none repeat scroll 0 0 #143ea9;}

/* End of the repetitions of the different providers.      */
/* ******************************************************* */
/* ******************************************************* */


button.bt-login-social {
	background:none;
	border:none;
	cursor: pointer;
}
button.bt-login-social span{
	height:35px;
	line-height: 35px;
	color:#fff;
	padding-left: 35px;
}

button.bt-login-social span span {
	background-position:100% 0;
	padding-left:10px;
	text-align: left;
	min-width: 110px;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: regular;
	text-transform:none;
	min-width: 134px;
}


#magestore-popup {
	padding: 20px; /* See the callout */
	position: fixed;
	z-index: 9990;
	background: #fff;
	min-width: 200px;
	max-height: 90%;
}

#bg_fade {
    background-color: #000000;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
	opacity: 0.6;
}

#sociallogin-close{
	cursor: pointer;
	height: 33px;
	position: absolute;
	right: -20px;
	top: -16px;
	z-index: 9999;
	right: 0;
	top: 0;
	height: 34px;
	width: 33px;
	background:url("sociallogin/close.png") no-repeat;
}
#sociallogin-close:hover{
	text-decoration: underline;
}

.sociallogin-forgot-content {
	display: block;
	margin: 20px 0;
}

.customer-account-login .wrapper.panel,
.customer-account-forgotpassword .wrapper.panel,
.customer-account-create .wrapper.panel {
	background-color: whitesmoke;
}

.customer-account-create .peak-login .back-link, 
.customer-account-forgotpassword  .peak-login .back-link {
	max-width: 600px;
    margin: auto;
    padding-bottom: 20px;
}

.peak-login .account-login, 
.peak-login .account-login-forgot, 
.peak-login .account-create {
    background: white;
    max-width: 600px;
    padding: 12px 32px 12px 32px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px #ddd;
    margin: auto;
}

.peak-login .field,
.magestore-login-input-box{
	margin-bottom: 10px;
}

.peak-login .validation-advice {
	font-size: 12px;
	color: red;
}

.peak-login h1 {
	/* text-align: center; */
	font-size: 24px;
}
.peak-login .fieldset {
	margin:0;
	padding:0;
	width: auto;
}

.peak-login .login-button ,
.peak-login .popup_click_btn {
	margin:0;
	width: 100%;
	display: inline-block;
	color: #000;
	background: transparent;
	border: 2px solid #c4122f;
	padding: 10px 25px;
	font-family: "Oswald", "Helvetica", sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	transition: .14s;
	outline:0;
	cursor:  pointer;
	letter-spacing: 1px;
	min-width: 120px;
	text-align: center;
	line-height: normal;
}


.peak-login .ajax-login-image{
	background: url("../../images/assets/global/ajax_load.gif") no-repeat scroll center 70% transparent;
	background-color:rgba(200,200,200,0.5);
	width: 100%;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}



/*
  Peak additions.
 */

.peak-login #magestore-forgot-password {
	font-size: 0.85em;
	margin-top: 5px;
	display: block;
}

.peak-login .login-callout {
	text-align: center;
}
#magestore-popup.peak-login .login-callout {
	border-top: 1px solid black;
	margin-top: 5px;
	margin: -20px; /* See #magestore-popup  */
	margin-top: 20px;
	padding:0 14px;
}
body.onestepcheckout-index-index .peak-login .login-callout a#magestore-sociallogin-create-new-customer {
	/* Because of the JS used, !important has to be used. */
	display: none !important;
}
.peak-login .login-callout a {
	display: block;
	padding-top:10px;
	padding-bottom:14px;
}
.peak-login .login-callout em {
	font-weight: 600;
	padding-left:4px;
	font-style: normal;
}

#magestore-popup .magestore-login-social {
	display: block;
	margin: 20px 0;
	font-size:0;
}
#magestore-popup .magestore-login-social li {
	display:inline-block;
	width: 48%;
	margin-right:2%;
}
#magestore-popup .magestore-login-social li:last-child {
	margin-right:0;
}
.peak-login button ,
#magestore-popup .magestore-login-social li button {
	display: block;
	width: 100%;
}

@media (max-width:620px) {
	#magestore-popup .magestore-login-social li {
		display:block;
		width: auto;
		margin: auto;
		margin-bottom:8px;
	}
}

.peak-login label ,
#magestore-popup label {
	font-size:18px;
	font-weight:400;
	color:#aaa;
	font-family: Oswald, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	padding-top: 15px;
	display: block;
}

.peak-login form p.required ,
#magestore-popup form p.required {
	display: none;
}

.peak-login form .form-instructions ,
#magestore-popup form .form-instructions {
	font-style: normal;
	color:#666;
	font-size: 1em;
	margin: 1.2em 0;
	padding:0;
}

.peak-login input ,
#magestore-popup input {
	width: 100%;
	height:50px;
}

.peak-login .magestore-info-message {
	display: none;
    margin-top: 16px;
    padding: 4px 8px;
    background-color: #F9F9F9;
	color: #999;
    font-weight: 600;
    font-size: 14px;
}