@charset "utf-8";
/* CSS Document */
.modal.left.fade .modal-dialog{
left: -290px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	 -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{left: 0;}      

.modal.left .modal-dialog {
	position: fixed;
	margin: auto;
	width: 290px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}
.modal-content {
    background: #000 url(../images/bg.jpg)no-repeat center;
    box-shadow: inset 0px 0px 20px 10px rgb(0, 0, 0);
}
.modal.left .modal-content {
	height: 100%;
	overflow-y: auto;
}
.modal.left.fade .modal-dialog {
	left: -320px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;
	transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.show .modal-dialog {
	left: 0;
}
.modal.left .modal-body {
	padding: 0;
    text-align: center;
    background: #000 url(../images/bg.jpg)no-repeat center;
}
.modal-content.modal-menu {
    border-radius: 0;
    border: 0;
    background: #373737;
}
.modal-header.logo-menu {
    text-align: center;
    background: #000;
    padding: 6px;
    border-radius: 0;
    border: none;
	height: 60px;
}
.modal-header.logo-menu img {
    max-width: 140px;
	margin: auto;
}
button.btn.btn-close-menu {
    color: #cacaca;
    font-size: 20px;
    position: absolute;
    right: 0px;
    top: 10px;
}
.rm-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px;
	grid-gap: 10px;
}
.rm-login-btn {
    background: #006cc0;
    color: #fff;
    border-radius: 3px;
    padding: 8px 5px;
}
.rm-login-btn:hover {
	color: #171717;
	filter: brightness(1.15);
}
.rm-reg-btn {
    background: #b0b0b0;
    color: #000;
    padding: 8px 5px;
    border-radius: 3px;
}
.rm-reg-btn:hover {
	color: #fff;
	filter: brightness(1.15);
}
.slide-menu-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 5px;
    padding: 0 10px;
}
.menu-item img {
    max-width: 35px;
    display: block;
    margin: auto;
    margin-bottom: 4px;
	filter: contrast(1) brightness(0.8);
}
.menu-item a {
    color: #ccc;
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px 0 6px;
}
.menu-item a:hover {
    background: linear-gradient(to bottom, rgba(247, 229, 131, 1) 0%, rgba(204, 165, 67, 1) 100%);
	color: #000;
}
.menu-item a:hover img {
	filter: invert(1);
}
.quick-wrapper {
	display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 4px;
    padding: 0 10px
}
.quick-box a {
    color: #ccc;
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px 0 6px;
	font-size: 12px;
}
.quick-box img {
    max-width: 28px;
    display: block;
    margin: auto;
    margin-bottom: 4px;
	filter: contrast(1) brightness(0.8);
}
.quick-box a:hover {
	background: linear-gradient(to bottom, rgba(247,229,131,1) 0%,rgba(204,165,67,1) 100%);
	color: #747474;
}
.quick-box a:hover img {
	filter: contrast(1) brightness(0.4);
}
.quick-link {
	padding: 10px 10px;
}
.quick-link h4 {
    color: #ccc;
    font-size: 13px;
	margin-bottom: 0;
	position: relative;
}
.quick-link h4:before {
    content: '';
    position: absolute;
    width: 30%;
    border: 0.5px solid #ccc;
    left: 0;
    top: 8px;
}
.quick-link h4:after {
    content: '';
    position: absolute;
    width: 30%;
    border: 0.5px solid #ccc;
    right: 0;
    top: 8px;
}

.user-wrapper {
	display: grid;
	grid-template-columns: 45px auto;
	grid-gap: 10px;
}
.modal-header.logo-menu .userbox-img img {
	max-width: 45px;
	filter: contrast(0);
}
.userbox {
	display: grid;
	align-self: center;
    font-weight: 500
}

div#modal-login {
    top: 18%;
}
.logo-login {
    text-align: center;
    margin-top: 15px;
    padding-bottom: 5px;
}
.logo-login img {
    max-width: 200px;
}
.login-wrapper {
    padding: 10px 25px 30px;
}
.lg_box {
    position: relative;
    margin-bottom: 13px;
}
span.lg-icon {
    position: absolute;
    font-size: 22px;
    color: #fff;
    left: 9px;
    top: 3px;
}
.lg_box input {
    background: #efefef00;
    border: 1px solid #5e5e5e;
    font-size: 15px;
    padding: 6px 10px 6px 45px;
}
.lg_box input:focus {
	outline: none;
	border: 1px solid #fefe98;
}
.forgot-password {
    color: #fefe98;
}




@media (max-width:600px) {
.modal.userlogin .modal-dialog {
    margin: 16px;
}	
}