/**
 * Thank you to:
 *  http://demo.designsave.com/dark-batman-login-form/
 * for the base style.
 */

* { box-sizing: border-box; padding:0; margin: 0; }

html {
  overflow: -moz-scrollbars-vertical;
  overflow: scroll;
  background: #142c36;
}

body {
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  color:#e1ffff;
  font-size:12px;
}

header {
  font-size:12px;
  line-height:1.0em;
}

header.central {
  left: 0;
  line-height: 200px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  letter-spacing: 2px;
}

a {
  color:#afc3db;
}

/** Navigation **/
nav {
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size:12px;
  line-height:1.0em;
}

nav > a {
  font-family: "Droid Sans Mono",sans-serif;
  font-size:11px;
  letter-spacing:1px;
  text-decoration: none;
}

/** Styles for User Entry **/
.box form {
  background:#191d1e;
  width:500px;
  margin:30px auto;
  border-radius:0.4em;
  border:1px solid #214457;
  overflow:hidden;
  position:relative;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}

.box form.login {
  width:300px;
}

.box form:before {
  content:"";
  display:block;
  position:absolute;
  height:5px;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 0 6px 4px #afc3db;
}

.box form.contact:before {
  width:340px;
  left:10%;
}

.box form.login:before {
  width:95px;
  left:22%;
}

.box form:after {
  content:"";
  display:block;
  position:absolute;
  height:1px;
  width:100px;
  left:20%;
  /* #afc3db */
  background:linear-gradient(left, rgba( 175, 195, 219, 0.05) );
  top:0;
}

.box .inset {
  padding:20px;
  border-top:1px solid #19191a;
}

.box form h1 {
  color:#afc3db;
  font-size:18px;
  text-shadow:0 1px 0 black;
  text-align:center;
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,1);
  position:relative;
}

.box form h1:after {
  content:"";
  display:block;
  position:absolute;
  pointer-events:none;
  /* #b0c6dd : 176, 198, 221 */
  /* #b3b9cf : 179, 185, 207 */
  background:linear-gradient(50deg, rgba(179,185,207,0.15), rgba(0,0,0,0));
  background-image: -webkit-linear-gradient(50deg, rgba(179,185,207,0.05), rgba(0,0,0,0)); /* For Safari */
}

.box form.login h1:after {
  transform:rotate(70deg);
  -webkit-transform: rotate(70deg);
  width:250px;
  height:100px;
  top:0;
  left:10px;
}

.box form.contact h1:after {
  transform:rotate(135deg);
  -webkit-transform: rotate(135deg);
  width:260px;
  height:350px;
  top:-150px;
  left:130px;
}

.box label {
  color:#777;
  display:block;
  padding-bottom:9px;
}

.box textarea,
.box input[type=text],
.box input[type=password] {
  width:100%;
  padding:8px 5px;
  background:linear-gradient(#1f2124, #27292c);
  border:1px solid #222;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1);
  border-radius:0.3em;
  margin-bottom:20px;
}

.box textarea,
.box input[type=text] {
  color:#999;
}

.box label[for=remember]{
  color:white;
  display:inline-block;
  padding-bottom:0;
  padding-top:5px;
}

.box input[type=checkbox] {
  display:inline-block;
  vertical-align:top;
}

.box textarea {
  height:100px;
  padding:5px 0 0 5px;
}

.box .p-container {
  padding:0 20px 20px 20px;
}

.box .p-container:after {
  clear:both;
  display:table;
  content:"";
}

.box .p-container span {
  display:block;
  float:left;
  color:#0d93ff;
  padding-top:8px;
}

.box .p-container a {
  color:#afc3db;
  text-decoration:none;
}

.box .inset img {
  display:block;
  margin:auto;
}

.box .g-recaptcha {
  display: block;
  margin: auto;
  padding: 0 0 10px 100px;
}

.box input[type=submit] {
  padding:5px 20px;
  border:1px solid rgba(0,0,0,0.4);
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 10px 10px rgba(255,255,255,0.1);
  border-radius:0.3em;
  background:#0184ff;
  color:white;
  float:right;
  font-weight:bold;
  cursor:pointer;
  font-size:13px;
}

.box input[type=submit]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -10px 10px rgba(255,255,255,0.1);
}

.box textarea:hover,
.box input[type=text]:hover,
.box input[type=password]:hover,
.box label:hover ~ input[type=text],
.box label:hover ~ input[type=password] {
 	background:#27292c;
}

/** Error Message Display **/
section.flashed {
  padding:0 5px 0 20px;
  width:250px;
  margin:0 auto;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size:13px;
}

section.flashed.errors {
  width: 366px;
}

section.flashed ul {
  display:inline-block;
  list-style:none;
}

section.flashed ul.errors {
  color: #a6f;
  font-size: 13px;
  display:inline-block;
  list-style:none;
}

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

  .box form {
    width: 375px;
  }

  .box .g-recaptcha
  {
    padding: 0 0 10px 10px;
  }

}

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

  header.central {
    line-height: 150px;
  }

  section.flashed {
    margin-left: 31px;
  }

  section.flashed.errors {
    width: 320px;
    margin-left: -19px;
  }

  .box form {
    width: 320px;
  }

  .box .g-recaptcha
  {
    padding: 0;
    margin-left: -12px;
  }

}

/* Fontello */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?94847443');
  src: url('../font/fontello.eot?94847443#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?94847443') format('woff2'),
       url('../font/fontello.woff?94847443') format('woff'),
       url('../font/fontello.ttf?94847443') format('truetype'),
       url('../font/fontello.svg?94847443#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?94847443#fontello') format('svg');
  }
}
*/

.fontello {
  font-family: "fontello";
  font-size: 16px;
  line-height: 24px;
}

.fontello > div {
  display: inline-block;
}

.socicon {
  width: 24px;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-mixcloud:before { content: '\f289'; } /* '' */
.icon-github:before { content: '\f300'; } /* '' */
.icon-flickr:before { content: '\f303'; } /* '' */
.icon-vimeo:before { content: '\f306'; } /* '' */
.icon-instagram:before { content: '\f32d'; } /* '' */
.icon-soundcloud:before { content: '\f348'; } /* '' */