@charset "utf-8";
/* CSS Document */
body {margin:0 auto; overflow-x:hidden; background-color:#fafafa}
.flex {display:flex; flex-wrap:wrap;}
ul {list-style:none; margin:0; padding:0;}
a:hover {text-decoration:none !important; cursor:pointer;}
.layer {display:none;}
.fix {height:20px;}
.fix2 {height:10px;}
.brand2 {position:fixed; bottom:0; padding:10px; width:100%; text-align:center; background-color:#ffffff; box-shadow:0px 0px 58px 0px rgba(0, 0, 0, 0.3);}
.ing {padding:6px 12px !important;}

/*////////////HEADER//////////////*/
header {width:83%; background-color:#EDEDED; border-bottom:1px solid #D9DEE4; margin-bottom:10px; right:0; position:fixed; padding:13px 15px 1px; z-index:99;}
header h3 {margin:0; color:#73879c !important; cursor:pointer; display:inline-block;}
header .right {float:right;}
header .right p {padding:3px 10px 3px 15px; cursor:pointer;}

/*////////////SIDE-NAV//////////////*/
#nav {background-color:#202121; width:17%; position:fixed; overflow-y:auto; top:0; height:100%; z-index:999;}
#nav .side {padding:10px 0;}
#nav .logo {height:50px;}
#nav .logo {margin:0 0 0 15px;}
#nav img {height:85%;}
#nav a, #nav h4 {color:#E7E7E7; font-weight:500; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; margin:0;}
#nav .flex-box {padding-left:15px;}
#nav .side ul li {position:relative;}
#nav .side ul li a {padding:14px 20px; display:block;}
#nav .side ul i {color:#E7E7E7; font-size:18px; width:30px; text-align:center;}
#nav .side ul li a i:nth-child(2) {float:right;}
#nav ul li .active {box-shadow:rgba(0,0,0,0.25) 0 1px 0, inset rgba(255,255,255,0.16) 0 1px 0;}
#nav .sub {padding:5px 0 !important; position:absolute; left:100%; width:80%; top:0; background-color:#333; display:none;}
#nav .sub li a {font-size:12px !important; padding:12px 12px 12px 20px !important;}
#nav .sub li:hover {background-color:#ffffff0f;}
.brand {position:fixed; bottom:0; padding:10px; width:17%; z-index:99; background-color:#3a3a3a;}
.brand img, .brand2 img {height:25px !important;}
.brand a, #panel .mail p {font-size:12px;}

/*///////SIDE-PANEL////////*/
#panel {width:300px; background-color:#000000c7; height:100%; position:fixed; overflow-y:auto; top:0; right:-300px; z-index:99;}
#panel p, #panel a, #panel i {color:#fff; margin:0;}
#panel h4 {color:#fff; margin:0; text-align:right;}
#panel h4 i {position:absolute; padding:17px 20px; top:0; left:0; cursor:pointer;}
#panel .panel {padding:15px; background-color:#3480c2; border-radius:0; margin-bottom:0;}
#panel .panel-bottom {width:100%; padding:1px; position:absolute; bottom:0;}
#panel .panel-bottom div {float:none; width:20%;}
#panel .panel-bottom a {padding:15px 20px; font-size:18px; margin:1px; display:block; background-color:#000; color:#fff; transition:all ease-in-out 0.5s;}
#panel .panel-bottom a:hover, #panel .mail a:hover {background-color:#3480c2;}

#panel .mail {display:none;}
#panel .mail img {width:100%; padding:4px;}
#panel .mail i {font-size:10px; float:right;}
#panel .mail a {display:block; padding:5px; margin:4px 0; background-color:#000; transition:all ease-in-out 0.5s;}
.paneltoggle {right:0 !important;}
.paneltoggle .panel-bottom div {float:left !important;}
.toggle {right:-240px !important;}

/*///////LOGIN////////*/
#login {position:fixed; width:480px; top:50%; left:50%; transform:translate(-50%,-54%); background-color:#fff; box-shadow:0px 0px 58px 0px rgba(0, 0, 0, 0.3);}
#login .login input, #login .login select, #login .login button {padding:10px; border-radius:5px;}
#login .login div {padding:10px 15px;}
#login .login div input[type="checkbox"] {width:25px; position:relative; top:2px;}
#login .box {height:150px; overflow:hidden; background-color:#2b2b31; position:relative;}
#login .layer2 {display:block; height:100%; width:100%; background-color:#00000094; position:absolute; z-index:9; text-align:center; padding:15px;}
#login .box .layer2 img {height:50px; position:absolute; left:0; top:20px; margin: auto;}
#login .box .layer2 h3 {color:#fff; padding:30px 0;}
#login .box img {height:100%; position: absolute; right:0;}

/*///////WORK-AREA////////*/
#work_area {width:83%; right:0; position:absolute; padding:0; margin-top:60px; display:flex;}
#work_area button {padding:6px 50px;}

/*/////////////////ACCORDING To CLIENTS' NEEDS/////////////*/
#show_img {height:206px; text-align:center; overflow:hidden; background:#fff; border:1px solid #ccc; border-radius:4px; position:relative;}
#show_img img {height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.upload {height:45px; text-align:center; background-color:#202121;}
#bx input[type="file"] {height:45px; width:100%; position:relative; z-index:10; opacity:0; bottom:0; cursor:pointer;}
.upload p {position:relative; bottom:38px; color:#fff; padding:5px; display:block;}

/*/////////////GALLERY-VIEw///////////////////*/
#gallery {}
#gallery img {height:100px;}
table {width:100%;}
table td {padding:10px 0}
table tr {padding:50px 0; border-bottom:1px solid #ccc;}

/*///....@media....///*/
@media only screen and (max-width:991px) {
	#nav, .brand {width:22%;}
	header, #work_area {width:78%;}
}

@media only screen and (max-width:767px) {
	#nav, .brand {width:80%; left:-80%;}
	header, #work_area,	#login {width:100%;}
	.layer {position:fixed; height:100%; width:100%; top:0; background-color:#00000040; z-index:99;}
	#login {height:100%; transform:translate(-50%,-50%)}
}

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

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