/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}
html {
  font-size: 1em;
  line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #333333 url(/img/bg.jpg) no-repeat center bottom fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
	margin: 0;
}
.login-form {
  margin: 50px auto;
  background: white;
  padding: 30px 0;
  position: relative;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  height: 400px;
}
.login-form #form-loading {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 1000;
  background: #555555;
}
.login-form #form-loading i {
  font-size: 100px;
}
.login-form #form-message {
  text-align: center;
  color: #555555;
}
.login-form .h1 {
  font-size: 30px;
  color: #4a7a9e;
  padding: 15px 15px 35px 15px;
  text-transform: uppercase;
  text-align: center;
}
.login-form .logo {
  height: auto;
  max-width: 100%;
}
.login-form .group {
  *zoom: 1;
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
  border-left: 4px solid #fff;
  padding: 10px 0;
}
.login-form .group:before,
.login-form .group:after {
  content: " ";
  display: table;
}
.login-form .group:after {
  clear: both;
}
.login-form .group > label {
  padding-left: 15px;
  padding-top: 5px;
  color: #555555;
  font-size: 16px;
  display: block;
}
.login-form .group > label.empty {
  display: block;
  height: 1px;
  padding: 0;
  margin: 0;
}
.login-form .group > div {
  padding: 0 15px;
}
.login-form .group > div.addon-right {
  position: relative;
  padding-right: 50px;
}
.login-form .group > div.addon-right > i {
  position: absolute;
  right: 25px;
  top: 9px;
  z-index: 999;
  color: #555555;
}
.login-form .group > div .error-message {
  font-size: 12px;
  color: red;
  margin-top: 5px;
}
.login-form .group.active {
  background: #F6F6F6;
  border-left-color: #40C2FF;
  -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
}
.login-form input[type=submit] {
  border: none;
  background: #4a7a9e;
  color: white;
  font-family: 'Roboto', sans-serif;
  padding: 5px 20px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: background ease-in-out .15s;
  transition: background ease-in-out .15s;
  cursor:pointer;
}
.login-form input[type=submit]:hover {
  background: #33668c;
}
.login-form {
  width: 320px;
}
.container {
  margin: 10px auto;
  background: white;
  padding: 10px 0;
  position: relative;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.125);
  height: 100%;
}
.container .group {
  *zoom: 1;
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
  border-left: 4px solid #fff;
  padding: 10px 0;
}
.container .group:before,
.container .group:after {
  content: " ";
  display: table;
}
.container .group:after {
  clear: both;
}
.container .group > label {
  padding-left: 15px;
  padding-top: 5px;
  color: #555555;
  font-size: 16px;
  display: block;
}
.container .group > label.empty {
  display: block;
  height: 1px;
  padding: 0;
  margin: 0;
}
.container .group > div {
  padding: 0 15px;
}
.container .group > div.addon-right {
  position: relative;
  padding-right: 50px;
}
.container .group > div.addon-right > i {
  position: absolute;
  right: 25px;
  top: 9px;
  z-index: 999;
  color: #555555;
}
.container .group > div .error-message {
  font-size: 12px;
  color: red;
  margin-top: 5px;
}
.container .group.active {
  background: #F6F6F6;
  border-left-color: #40C2FF;
  -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
}
.container .h1 {
  font-size: 30px;
  color: #4a7a9e;
  padding: 15px 15px 15px 15px;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 550px) {
  .login-form {
    width: 520px;
  }
  .login-form .group > label {
    float: left;
    width: 180px;
  }
  .login-form .group > div {
    margin-left: 180px;
    padding-left: 0;
  }
	.container {
		width: 1600px;
	}
	.container .group > label {
		float: left;
		width: 180px;
	}
	.container .group > div {
		margin-left: 180px;
		padding-left: 0;
	}
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  font-family: 'Roboto', sans-serif;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
  opacity: 1;
}
textarea.form-control {
  height: auto;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.one-line {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.arrow-up {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-style: none;
}
.arrow-down {
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-style: none;
}
.arrow-right {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-style: none;
}
.arrow-left {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-style: none;
}
.arrow {
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: middle;
  border-color: white;
  border-width: 5px;
  border-style: solid;
}
.arrow.up {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-style: none;
}
.arrow.down {
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-style: none;
}
.arrow.right {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-style: none;
}
.arrow.left {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-style: none;
}



label.err {
    color: red;
    display: block;
    margin: 0;
    width: auto;
}
em {
    display: block;
    margin: 5px 0 0px 180px;
    font-style: inherit;
}
.welcome{
	line-height: 50px;
	padding-left:30px;
	color: #555555;
}	

/* Add a black background color to the top navigation */
.topnav {
    background-color: #FFFFFF;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #4a7a9e;
    color: black;
}

/* Add an active class to highlight the current page */
.activepg {
	font-weight: bold;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button_popup {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button_popup:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 400px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
  .container {
		width: 90%;
	}
}