@charset "utf-8";
@import "font-awesome.min.css";

@font-face {
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/Raleway-VariableFont_wght.ttf');
  }

body {
  /*background: #D5D8DC;
  color: #606468;
  font: 87.5%/1.5em 'Open Sans', sans-serif;*/
  margin: 0;
  padding: 0;
}

html{
  background: #e1dcc6 url("images/gb-bg.jpg") repeat 0 0 ;
  background-size: 100%;

}

@media (pointer:none), (pointer:coarse) {
  html{
    background: grey;
  }
}

.logo{
  float: left;
  margin-top: -1px;
  margin-left: 30px;
}

#header .logo img{
  width:163px; margin-top:2px; margin-left:100px;
}

@media (pointer:none), (pointer:coarse) {
  #header .logo img{
      width:330px;
      margin-left: 33px;
  }
}

.logo a {
  font-size: 1.3em;
  color: #fff;
}



.logo a span {
  font-weight: 300;
}

*{
  font-family: ''Work Sans', sans-serif' !important;
  font-style: normal;
}


#top { background: #1898d6; height: 50px; border-bottom: 5px solid white;}

@media (pointer:none), (pointer:coarse) {
  #top {
    height: 100px;
  }
}

.caption{
  margin-left: 20px;
}
.caption h1{
  vertical-align: middle;
  margin-top: 15%;
  margin-left: 7%;
  font-size: 35px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  color: #25aae1;
  text-shadow: 2px 2px #ffffff;
}

@media (pointer:none), (pointer:coarse) {
  .caption, .caption h1 {
    text-align: center;
    margin-left: 0s;
    margin-left: 0;
  }
}

.login {
  position:relative;
  margin: 20px auto;
  float:right;
  margin-top:10%;
  margin-right:10%;
  vertical-align: middle;
  width: 307px;
  padding: 10px;
  border-radius: 10px;
  border: 7px solid rgba(254, 254, 254, 0.6);
  -webkit-box-shadow: 3px 4px 22px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 4px 22px 0px rgba(0,0,0,0.75);
  box-shadow: 3px 4px 22px 0px rgba(0,0,0,0.75);
  /* @media screen and (max-width: 900px) {
    width: 507px;
  } */


}
@media (pointer:none), (pointer:coarse) {
  .login {
    margin-top:300px;
    margin-bottom:200px;
    width: 760px;
  }
}


.login p.submit {
  text-align: right;
  margin-right: -2px;
  padding-top: 5px

}

@media (pointer:none), (pointer:coarse) {
  .login p.submit {
    font-size: 30px;
    font-family: 'Work Sans', sans-serif;
  }
}

.login h1 {
  margin: -10px -10px 0 -10px;
  line-height: 40px;
  font-size: 18px;
  font-weight: normal;
  font-family: 'Work Sans', sans-serif;
  color: #fff;
  text-align: center;
  /*text-shadow: 0 1px white;*/
  background: grey;
  border-bottom: 1px solid #cfcfcf;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.05) inset;
  box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.05) inset;
}

@media (pointer:none), (pointer:coarse) {
  .login h1 {
    font-size: 60px;
    line-height: 80px;
  }
}

.login form{
  padding: 10px 10px 10px 10px;
  margin: 0 -10px -10px -10px;
  border-bottom-right-radius:3px;
  border-bottom-left-radius: 3px;
  background-color: #f9f9f9;
  /*-webkit-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.15) inset;*/
  -moz-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.15) inset;
  /*box-shadow:0 1px 6px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.15) inset;*/
}

@media (pointer:none), (pointer:coarse) {
  .login form{
  width:100%;
  height: 340px;
  }
}

.login p {
  margin: 10px 0 0;
}
.login p.remember_me {
  float: left;
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  margin-top: 20px;
  color: red;
  cursor: pointer;
}

@media (pointer:none), (pointer:coarse) {
  .login p.remember_me {
    font-size: 30px;
    font-family: 'Work Sans', sans-serif;
    margin-left: 20px;
  }
}

/* Text Inputs */
input[type="text"]{
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  width: 300px;
  color: #3e3e3e;
  display:block;
  margin-top: 5px;
  border: 1px solid #c3c3c3;
  height: 25px;
  border-radius:3px;
  padding-left: 5px;
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

@media (pointer:none), (pointer:coarse) {
  input[type="text"]{
    font-size: 40px;
    font-family: 'Work Sans', sans-serif;
    width: 680px;
    height: auto;
    padding-left: 15px;
    margin: 20px;
  }
}

input[type="text"]:focus
{
  border: 1px solid black;
}
/* Password Text Box Styling */
input[type="password"]{
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
  width: 300px;
  color: #3e3e3e;
  display:block;
  margin-top: 5px;
  border: 1px solid #c3c3c3;
  height: 25px;
  border-radius:3px;
  padding-left: 5px;
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

@media (pointer:none), (pointer:coarse) {
  input[type="password"]{
    font-size: 40px;
    font-family: 'Work Sans', sans-serif;
    width: 680px;
    height: auto;
    padding-left: 15px;
    margin: 20px;
  }
}
input[type="password"]:focus{
  border: 1px solid black;
}
/* Button Styling */
button,
input[type="submit"]{
  display:inline;
  margin-top: 0;
  border: 1px solid #999;
  height: 30px;
  line-height: 25px;
  background: #f0f0f0; /* Old browsers */
  background: -moz-linear-gradient(top,  #f0f0f0 0%, #e7e7e7 47%, #dfdfdf 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(47%,#e7e7e7), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f0f0f0 0%,#e7e7e7 47%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f0f0f0 0%,#e7e7e7 47%,#dfdfdf 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f0f0f0 0%,#e7e7e7 47%,#dfdfdf 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f0f0f0 0%,#e7e7e7 47%,#dfdfdf 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
  color: black;
  border-radius:3px;

}

@media (pointer:none), (pointer:coarse) {
  button,
  input[type="submit"]{
    font-size: 45px;line-height: 65px;
    font-family: 'Work Sans', sans-serif;
    width: 200px;
    height: auto;
    margin: 20px 25px ;
  }
}
button:hover,
input[type="submit"]:hover
{
  background: #f5f5f5; /* Old browsers */
  background: -moz-linear-gradient(top,  #f5f5f5 0%, #ececec 47%, #e4e4e4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(47%,#ececec), color-stop(100%,#e4e4e4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f5f5f5 0%,#ececec 47%,#e4e4e4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f5f5f5 0%,#ececec 47%,#e4e4e4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f5f5f5 0%,#ececec 47%,#e4e4e4 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f5f5f5 0%,#ececec 47%,#e4e4e4 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
  color: black;
}
/* CheckBox Styling */
input[type="checkbox"]
{
  display: none; /* hide original checkbox */
}
/* checked style for checkbox */
input[type="checkbox"]:checked + label .box
{
  position: relative;
}
/* check */
input[type="checkbox"]:checked + label .box:after
{
  content: '';
  width: 8px;
  height: 4px;
  position: absolute;
  left: 3px;
  top: 2px;
  border: 1px solid #414141;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* unckecked style for checkbox */
.box{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #c3c3c3;
  float: left;
  margin-right: 7px;
  margin-top: 1px;
  background-image: -moz-linear-gradient(top, #fff, #efefef);
  background-image: -webkit-linear-gradient(top, #fff, #efefef);
  background-image: -ms-linear-gradient(top, #fff, #efefef);
  background-image: linear-gradient(top, #fff, #efefef);
}

#login-footer{
  background: #1a719e url(images/footer-bg-admin.png) repeat-x 0 0; padding: 24px 0 0 0;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: 'Work Sans', sans-serif;
}
#login-footer .copy { margin-top:-15px; margin-left: 15%; float: left; display: inline; padding: 24px 0 0 0;  color: #fff; }
#login-footer .copy a { color: orange; }
#login-footer a.logo {margin-right: 7%;  float: right; display: inline; }