/* 

    Created on : 24-set-2015, 14.56.27

    Author     : Julien Mehl Vettori | info@lillibel.com

*/

/*@import url(http://fonts.googleapis.com/css?family=Quicksand);*/

/*@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Roboto);*/

@font-face {

  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 400;

  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(/fonts/Quicksand.woff2) format('woff2');

}

/*@import "reset.less";*/

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}

a {

  text-decoration: none;

  color: white;

}

/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}

body {

  line-height: 1;

}

ol,

ul {

  list-style: none;

}

blockquote,

q {

  quotes: none;

}

blockquote:before,

blockquote:after,

q:before,

q:after {

  content: '';

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

body {

  background-color: #141414;

  background-image: url('/images/background/login.jpg?v=7591ec6b1c1fc1943516038202845e01');

  background-size: cover;

  font-family: 'Quicksand', sans-serif;

}

#login {

  font-size: 1.2em;

  width: 19em;

  padding-top: calc(50vh - 4em);

  padding-bottom: calc(50vh - 11em);

  margin: 0 auto;

  background-color: rgba(0, 0, 0, 0.1);

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.3+0,0.27+51,0+100 */

  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 51%, rgba(255, 255, 255, 0) 100%);

  /* FF3.6-15 */

  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 51%, rgba(255, 255, 255, 0) 100%);

  /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.27) 51%, rgba(255, 255, 255, 0) 100%);

  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dffffff', endColorstr='#00ffffff', GradientType=0);

  /* IE6-9 */

}

#login #logincontent {

  height: 8em;

}

#login #logincontent .forgot_password_image {

  animation-duration: 0.5s;

  animation-name: forgot_password_image;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-name: forgot_password_image;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards;

  -o-animation-duration: 0.5s;

  -o-animation-name: forgot_password_image;

  -o-animation-iteration-count: 1;

  -o-animation-fill-mode: forwards;

  -moz-animation-duration: 0.5s;

  -moz-animation-name: forgot_password_image;

  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode: forwards;

}

#login #logincontent .forgot_password_emailsent {

  background-position: -20em -30em;

  animation-duration: 0.5s;

  animation-name: forgot_password_emailsent;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-name: forgot_password_emailsent;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards;

  -o-animation-duration: 0.5s;

  -o-animation-name: forgot_password_emailsent;

  -o-animation-iteration-count: 1;

  -o-animation-fill-mode: forwards;

  -moz-animation-duration: 0.5s;

  -moz-animation-name: forgot_password_emailsent;

  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode: forwards;

}

#login #logincontent .password_change {

  background-position: -20em -20em;

}

#login #logincontent .password_change.pass_changed {

  background-position: -20em -20em;

  animation-duration: 0.5s;

  animation-name: password_changed;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

  -webkit-animation-duration: 0.5s;

  -webkit-animation-name: password_changed;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards;

  -o-animation-duration: 0.5s;

  -o-animation-name: password_changed;

  -o-animation-iteration-count: 1;

  -o-animation-fill-mode: forwards;

  -moz-animation-duration: 0.5s;

  -moz-animation-name: password_changed;

  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode: forwards;

}

#login #logincontent .password_change.request_cancelled {

  background-position: -30em -20em;

}

#login #logincontent #checkyouremail {

  margin-top: 2em;

  color: white;

  text-align: center;

}

#login #logincontent #loginresult {

  width: calc(100% - 3em);

  padding: 0.5em;

  margin: 0 auto;

  text-align: right;

  background-color: transparent;

  background-image: url('/images/adm/inputs.svg?v=b9346e6237e67a5894ab35fc3652f053');

  background-size: 2em 40em;

  background-position: 0% -34em;

  -webkit-background-position: 0% -34em;

  background-repeat: no-repeat;

}

#login #logincontent input {

  font-family: 'Quicksand', sans-serif;

  display: block;

  width: calc(100% - 4em);

  font-size: 1em;

  color: #141414;

  border: none;

  margin: 0.5em auto;

  padding: 0.5em;

  -webkit-border-radius: 0.5em;

  -moz-border-radius: 0.5em;

  border-radius: 0.5em;

  transition-delay: 0.1s;

  transition-duration: 0.2s;

  box-shadow: 0 0 0 1px #323232;

  background-color: transparent;

  background-image: url('/images/adm/inputs.svg?v=b9346e6237e67a5894ab35fc3652f053');

  background-size: 2.2em 44em;

  background-repeat: no-repeat;

}

#login #logincontent input#useremail {

  background-position: 95% -39.6em;

  -webkit-background-position: 95% -39.6em;

}

#login #logincontent input[type='password'] {

  background-position: 95% -41.8em;

  -webkit-background-position: 95% -41.8em;

}

#login #logincontent input.tryagain {

  animation-duration: 0.3s;

  animation-name: tryagain;

  animation-iteration-count: 1;

  animation-fill-mode: forwards;

  -webkit-animation-duration: 0.3s;

  -webkit-animation-name: tryagain;

  -webkit-animation-iteration-count: 1;

  -webkit-animation-fill-mode: forwards;

  -o-animation-duration: 0.3s;

  -o-animation-name: tryagain;

  -o-animation-iteration-count: 1;

  -o-animation-fill-mode: forwards;

  -moz-animation-duration: 0.3s;

  -moz-animation-name: tryagain;

  -moz-animation-iteration-count: 1;

  -moz-animation-fill-mode: forwards;

}

#login #logincontent input[type='submit'] {

  width: calc(100% - 3em);

  margin: 0.5em auto;

  background: transparent;

  cursor: pointer;

  box-shadow: inset 0 0 0em 0em #191919;

}

#login #logincontent input[type='submit']:active {

  background-color: rgba(255, 255, 255, 0.2);

}

#login #logincontent input:hover,

#login #logincontent input:focus {

  background-color: rgba(255, 255, 255, 0.5);

}

@media only screen and (max-width: 500px) {

  #login {

    font-size: 1em;

    width: 100%;

  }

}

@media only screen and (max-height: 300px) {

  #login {

    padding-top: 0em;

  }

}

@keyframes forgot_password_image {

  0% {

    background-position: -10em -30em;

  }

  100% {

    background-position: -20em -30em;

  }

}

@-webkit-keyframes forgot_password_image {

  0% {

    background-position: -10em -30em;

  }

  100% {

    background-position: -20em -30em;

  }

}

@-moz-keyframes forgot_password_image {

  0% {

    background-position: -10em -30em;

  }

  100% {

    background-position: -20em -30em;

  }

}

@-o-keyframes forgot_password_image {

  0% {

    background-position: -10em -30em;

  }

  100% {

    background-position: -20em -30em;

  }

}

@keyframes forgot_password_emailsent {

  0% {

    background-position: -20em -30em;

  }

  100% {

    background-position: -30em -30em;

  }

}

@-webkit-keyframes forgot_password_emailsent {

  0% {

    background-position: -20em -30em;

  }

  100% {

    background-position: -30em -30em;

  }

}

@-moz-keyframes forgot_password_emailsent {

  0% {

    background-position: -20em -30em;

  }

  100% {

    background-position: -30em -30em;

  }

}

@-o-keyframes forgot_password_emailsent {

  0% {

    background-position: -20em -30em;

  }

  100% {

    background-position: -30em -30em;

  }

}

@keyframes password_changed {

  0% {

    background-position: -20em -20em;

  }

  100% {

    background-position: -30em -20em;

  }

}

@-webkit-keyframes password_changed {

  0% {

    background-position: -20em -20em;

  }

  100% {

    background-position: -30em -20em;

  }

}

@-moz-keyframes password_changed {

  0% {

    background-position: -20em -20em;

  }

  100% {

    background-position: -30em -20em;

  }

}

@-o-keyframes password_changed {

  0% {

    background-position: -20em -20em;

  }

  100% {

    background-position: -30em -20em;

  }

}

@keyframes tryagain {

  0% {

    margin: 0.5em 1.5em;

  }

  25% {

    margin: 0.5em 1em 0.5em 2em;

  }

  75% {

    margin: 0.5em 2em 0.5em 1em;

  }

  100% {

    margin: 0.5em 1.5em;

  }

}

@-webkit-keyframes tryagain {

  0% {

    margin: 0.5em 1.5em;

  }

  25% {

    margin: 0.5em 1em 0.5em 2em;

  }

  75% {

    margin: 0.5em 2em 0.5em 1em;

  }

  100% {

    margin: 0.5em 1.5em;

  }

}

@-moz-keyframes tryagain {

  0% {

    margin: 0.5em 1.5em;

  }

  25% {

    margin: 0.5em 1em 0.5em 2em;

  }

  75% {

    margin: 0.5em 2em 0.5em 1em;

  }

  100% {

    margin: 0.5em 1.5em;

  }

}

@-o-keyframes tryagain {

  0% {

    margin: 0.5em 1.5em;

  }

  25% {

    margin: 0.5em 1em 0.5em 2em;

  }

  75% {

    margin: 0.5em 2em 0.5em 1em;

  }

  100% {

    margin: 0.5em 1.5em;

  }

}