html, body {
            width: 100%;
            height: 100%;
            margin: 0; 
            padding: 0;
        }

@media only screen and (min-width: 1025px) {
	body
{
    background: #2a2730;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
.logo{
	padding: 1% 2%;
	background-color: #2a2730;
	margin-bottom: 80px;
}
	
}
@media only screen and (max-width: 1024px) {
	body
{
    background:  #2a2730;
    background-position:center auto;
    background-repeat:no-repeat;
        background-size:cover;
}
.logo{
	padding: 3% 2%;
	background-color: #2a2730;
	margin-bottom: 20px;
}
	
}


.navbar-inverse {
	background-color: #088;
	border-color: #0cc
}

.navbar-inverse .navbar-brand {
	color: #f0f7e2
}

.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover {
	color: #fff;
	background-color: #19a6ae
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-text {
	color: #f0f7e2
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
	color: #fff;
	background-color: #19a6ae
}

.navbar-inverse .navbar-nav>.disabled>a,
.navbar-inverse .navbar-nav>.disabled>a:focus,
.navbar-inverse .navbar-nav>.disabled>a:hover {
	color: #eee;
	background-color: #dcdddf
}

.navbar-inverse .navbar-toggle {
	border-color: #0cc
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
	background-color: #088;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #d3e0e9
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: #007575
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
	background-color: #19a6ae;
	color: #fff
}

@media (max-width:767px) {
	.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
		border-color: #0cc
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
		background-color: #0cc
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
		color: #f0f7e2
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
		color: #fff;
		background-color: #19a6ae
	}
	.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
	.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,
	.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover {
		color: #eee;
		background-color: #dcdddf
	}
}

.navbar-inverse .navbar-link {
	color: #f0f7e2
}

.navbar-inverse .navbar-link:hover {
	color: #fff
}

.navbar-inverse .btn-link {
	color: #f0f7e2
}

.navbar-inverse .btn-link:focus,
.navbar-inverse .btn-link:hover {
	color: #fff
}

.navbar-inverse .btn-link[disabled]:focus,
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:focus,
fieldset[disabled] .navbar-inverse .btn-link:hover {
	color: #eee
}

@media (min-width:768px) {
	.pic-b {
		width: 100%;
	}
	.pic-s {
		display: none;
	}

}

@media (max-width:767px) {
	.pic-b {
		display: none;
	}
	.pic-s {
		width: 100%;
	}
}

.btn-primary {
	color: #fff;
	background-color: #009999;
	border-color: #008888
}
.btn-primary:hover {
	color: #fff;
	background-color: #007777;
	border-color: #008888
}
.btn-primary:focus,.btn-primary.focus {
	color: #fff;
	background-color: #008888;
	border-color: #008888
}
.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary {
	color: #fff;
	background-color: #088;
	border-color: #088
}
.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus {
	color: #fff;
	background-color: #088;
	border-color: #088
}
.vertical-center {
	top:50%;
	transform: translateY(-50%);
	
}

			table {
				border: 1px solid #ccc;
				width: 100%;
				margin: 0;
				padding: 0;
				border-collapse: collapse;
				border-spacing: 0;
				margin: 0 auto;
			}
			
			table tr {
				border: 1px solid #ddd;
				padding: 5px;
			}
			
			table th,
			table td {
				padding: 10px;
				text-align: center;
			}
			
			table th {
				text-transform: uppercase;
				font-size: 12px;
				letter-spacing: 1px;
			}
			
			@media screen and (max-width: 1024px) {
				table {
					border: 0;
				}
				table thead {
					display: none;
				}
				table tr {
					margin-bottom: 10px;
					display: block;
					border-bottom: 2px solid #ddd;
				}
				table td {
					display: block;
					text-align: right;
					font-size: 12px;
					border-bottom: 1px dotted #ccc;
				}
				table td:last-child {
					border-bottom: 0;
				}
				table td:before {
					content: attr(data-label);
					float: left;
					text-transform: uppercase;
					font-weight: bold;
				}
			}
			
			footer {

				bottom: 0;
				clear: both;
				display: block;
				padding: 5px;
				position: fixed;
				z-index: 999;
				width: 100%;
				color: #99979c;
				background-color: #2a2730;
				text-align: center;
			}
			
@media only screen and (min-width: 768px)  {
	.df{
		text-align: center;
		 width: 250px;
         float: left;
         margin-top: 10px;
	}
	
}
@media only screen and (max-width: 767px)  {
	.df{
 		margin-top: 5px;
	}
	
}

.login_btn {
  display: inline-block;
  background: url(../img/login.png) no-repeat;
  height: 34px;
  width: 84px;
  color: #fff;
  padding-left: 30px;
  line-height: 34px;
  text-decoration: none;
}
.login_btn:hover {
  color: #fff;
  background: url(../img/login_hover.png) no-repeat;
  text-decoration: none;
}