/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
#is-modal-login {
  background: #ffffff;
  padding: 20px 30px 30px;
  text-align: left;
  max-width: 370px;
  margin: 40px auto;
  position: relative;
  color: #ff9900;
}

#is-modal-login .mfp-close {
  color: #82868e;
}

#is-modal-login .logo {
  margin: 0 auto 20px;
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: 0px 0px;
  width: 105px;
  height: 120px;
}

#is-modal-login .text-center {
  text-align: center;
}

#is-modal-login .title {
  font-size: 18px;
  font-weight: 700;
}

#is-modal-login .subtitle {
  margin-bottom: 40px;
  font-size: 12px;
}

#is-modal-login .is-form-control {
  display: none;
}

#is-modal-login .is-form-control.active {
  display: block;
}

#is-modal-login .is-form-control .user, #is-modal-login .is-form-control .email, #is-modal-login .is-form-control .password {
  position: relative;
}

#is-modal-login .is-form-control .user:before, #is-modal-login .is-form-control .email:before, #is-modal-login .is-form-control .password:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
}

#is-modal-login .is-form-control .user:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -123px -15px;
  width: 15px;
  height: 15px;
}

#is-modal-login .is-form-control .password:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px -82px;
  width: 15px;
  height: 15px;
}

#is-modal-login .is-form-control .email:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px -52px;
  width: 15px;
  height: 15px;
}

#is-modal-login .is-form-control .login:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -123px 0px;
  width: 15px;
  height: 15px;
}

#is-modal-login .is-form-control .input-text {
  background: transparent;
  width: 100%;
  border: 2px solid #18a096;
  padding: 10px 10px 10px 40px;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 20px;
}

#is-modal-login .is-form-control .input-button {
  background: #18a096;
  color: #fff;
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

#is-modal-login .is-form-control .input-button:hover {
  background: #118078;
}

#is-modal-login .is-form-control .input-checkbox {
  color: #a4a9b4;
  display: block;
}

#is-modal-login .is-form-control .input-checkbox input[type="checkbox"] {
  display: none;
}

#is-modal-login .is-form-control .input-checkbox input[type="checkbox"]:checked + .icon-checkbox {
  background-position: -105px -18px;
}

#is-modal-login .is-form-control .input-checkbox .icon-checkbox {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px 0px;
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

#is-modal-login .list-action {
  list-style: none;
  padding: 0;
  margin: 50px 0 0;
}

#is-modal-login .list-action.column-2 li {
  display: inline-block;
  width: 49%;
}

#is-modal-login .list-action li {
  margin-bottom: 10px;
}

#is-modal-login .list-action a {
	color: #18a096;
	font-weight: bolder;
}

#is-modal-login .list-action a:hover {
	color: #ff9900;
	font-weight: bolder;
}

#is-modal-login .list-action a:before {
  display: inline-block;
  content: "";
  position: relative;
  top: 2px;
  margin-right: 10px;
}

#is-modal-login .list-action a.register:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px -97px;
  width: 15px;
  height: 15px;
}

#is-modal-login .list-action a.help:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px -67px;
  width: 15px;
  height: 15px;
}

#is-modal-login .list-action a.forgot-password:before {
  background-image: url(images/sprites.png?v=1469181746065);
  background-position: -105px -36px;
  width: 16px;
  height: 16px;
}

.mfp-zoom-in {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.8);
}

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-zoom-out {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-zoom-out .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3);
}

.mfp-zoom-out.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.mfp-zoom-out.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}

.mfp-zoom-out.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-zoom-out.mfp-removing .mfp-with-anim {
  transform: scale(1.3);
  opacity: 0;
}

.mfp-zoom-out.mfp-removing.mfp-bg {
  opacity: 0;
}