@import url('https://fonts.googleapis.com/css?family=Courgette');
@import url('https://fonts.googleapis.com/css?family=Convergence');
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:"Open Sans",sans-serif;color:#243040;background-color:#fff} 
.login{ background: url(../img/login-bg.jpg) no-repeat; background-attachment: fixed; background-size: cover;}
.bgcolor{ background-color: rgba(0,0,0,.041);}
.loginmain-box {  display: flex;  justify-content: center;  align-items: center;    position: absolute;    bottom: 0;    top: 0;    left: 0;    right: 0;}
.loginbox{ width: 1000px;    border-radius: .5rem;    }
.login-left{width: 47%; height: 250px; line-height: 250px; float: left; overflow: hidden; margin-top: 75px; text-align: center; background-color: #fff;} 
.login-right{width: 3%; height: 250px; line-height: 250px; float: left; overflow: hidden; margin-top: 75px; text-align: center; background-color: #fff;} 
.login-mid{width: 50%; height: 400px; line-height: 400px;  box-shadow: 0 4px 25px 0 rgba(0,0,0,.1); background-color: #eff2f7; float: left; position: relative; border: #c2c2c2 1px solid;}
.modal-login { width: 80%; margin:80px auto;}
.modal-login  h3{ font-size: 20px; font-weight:bold; text-align: left; color: #f58739;;}
.modal-login  .form-group {  position: relative;}
.modal-login i {  position: absolute;    left: 13px;   top: 16px;  color:  #1c1f8c;   font-size: 18px;}
.modal-login .form-control {   padding-left: 40px;}
.modal-login .form-control:focus {    border-color: #00ce81;}
.modal-login .form-control, .modal-login .btn {    min-height: 50px;    border-radius: 3px; } 
.modal-login .btn {    background: #1c1f4c;    border: none;    line-height: normal; width: 100px !important; float: left; } 
.modal-login .btn:hover, .modal-login .btn:focus {     background: #1c1f8c; }
.login-mid::before{content: '';  position: absolute;  top: 0px;  left: -20px;  width: 0;  height: 0;  border-bottom: 75px solid #1c1e4e;  border-left: 20px solid transparent;}
.login-mid::after{content: '';  position: absolute;  bottom: 0px;  left: -20px;  width: 0;  height: 0;  border-top: 75px solid #1c1e4e;  border-left: 20px solid transparent;}
.navbar-dashboard{ background-color: #1c1f4c; margin-top: 15px;}
.img-logo{ position: absolute; top: -15px; border: 1px solid #1c1f8c;; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background-color: #f58739; color: #fff;}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{ background-color: #f58739; color: #fff;}
.navbar-default .navbar-nav>li>a{color: #fff; text-transform: uppercase;}
.dropdown-menu>li>a{text-transform: uppercase; background-color:#1c1f4c; color: #fff; line-height: 25px;}
.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  width: 100%;   margin: auto;   text-align: center; padding-bottom: 20px}
.profile{ margin: 100px 0px}
.profile h1{ background: #243040; color: #fff; margin: 0px; padding: 20px 0px }
.title {  color: #000;   font-size: 18px; text-align: left; padding: 10px; margin: 10px 0px}
.title span{ display: table; font-size:14px; line-height: 15px; color: #f58739}
.listnav{ margin:200px 0px 0px; padding:0px; list-style: none}
.listnav li{ float: left; background: #fff; margin:0px 20px; }
.listnav li a{ width: 300px; height: 300px; display: block; position: relative; text-align: center;  border: 3px solid #f58739;   }
.listnav li .count{ width: 50px; height:50px; position: absolute; top:-25px; right: -25px; background:red; color:#fff; line-height: 50px; font-size: 20px}
.listnav li a .imgbox { height: 220px; line-height: 220px;}
.listnav li a .imgbox img{ height: 170px}
.listnav li a .text-box{ width: 100%; height: 74px; text-align: center; line-height: 70px; font-size: 30px;     background-color: #1c1f4c;  text-decoration: none; color:#fff; font-family: 'Courgette', cursive; }
.listnav li a:hover {text-decoration: none; border: 3px solid #1c1f4c; }
.listnav li a:hover .text-box{ background: #f58739}

.product-list-view{ margin:30px 0px; padding:0px; list-style:none; clear:both;  width:100%; text-align: center;}
.product-list-view li{ width:31.03%; position:relative; margin:10px 1% 10px; background:#fff; border:1px solid rgba(0,0,0,0.1); height:auto; min-height:360px; display: inline-block; padding:20px 0 0 0 ;}
.product-list-view li:hover:after, .product-list-view li:hover:before{z-index:-1;position:absolute;content:"";bottom:15px;left:10px;width:50%;top:80%;max-width:300px;background:#777;-webkit-box-shadow:0 15px 10px #777;-moz-box-shadow:0 15px 10px #777;box-shadow:0 15px 10px #777;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg)}
.product-list-view li:hover:after{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg);transform:rotate(3deg);right:10px;left:auto}
.product-list-view li .imgbox{ width:100%; height:250px; line-height:250px; text-align:center}
.product-list-view li .imgbox img{ height:220px; max-width:100%; -webkit-box-shadow: 0 8px 6px -6px black;  -moz-box-shadow: 0 8px 6px -6px black;          box-shadow: 0 8px 6px -6px black;}
.product-list-view li .product-info{ width:100%;  height:100px; }
.product-list-view li .product-info .prodcut-header{ height:70px;width:100%;   font-size:16px; text-align:center; line-height:20px; padding:10px;}
.product-list-view li a, .product-list-view li a:hover{ text-decoration: none; color: #000000}


.bookdetails{ width: 100%; margin: 30px 0px; position: relative; height: 230px; padding: 10px 0px 10px 190px;}
.bookdetails .imgbox{ width: 170px; height: auto; padding: 10px; border:1px  solid #000; display: inline; float: left; position: absolute; top:0px; left: 0px}
.bookdetails .imgbox img{ width: 150px; height: auto}
.bookdetails h1{text-transform: uppercase;    font-size: 36px; line-height: 46px;    font-family: 'Convergence', sans-serif;      font-weight: bold;  margin: 0px 0px 20px ;   }

.resultbox{ margin:0px; padding:0px; list-style:none; text-align:center;}
.resultbox li{ display:inline-block; width:31%; overflow:hidden; margin:10px 1% }
.resultbox li a{   min-height:300px; width:100%; text-align:center; display:block; position: relative; text-decoration: none; overflow:hidden;  }
.resultbox li a .imgbox{ height:220px; min-width:100%; overflow: hidden;}
.resultbox li a .imgbox img{ width: 100%; min-height: 220px;} 
.resultbox li a .content-boxmenu{ width:95%;  background-color:rgba(255, 255, 255, 0.87); position: absolute; top: 180px; border-radius: 1px; left:2.5%; right: 2.5%; padding: 10px; box-shadow:         1px 0px 6px 1px rgba(26,30,77,0.47)}
.resultbox li a h4{color: #000;  font-family: 'Convergence', sans-serif;    text-align:left; padding:5px ; height:50px; overflow:hidden; line-height:24px; margin:0px 0 10px 0}
.resultbox li a .postdate{color: #959595;  font-family: 'Convergence', sans-serif; font-size:12px;    text-align:left; padding:5px ;}