/**Any script needed needed specifically per site should be here **/
/* 
(c) 2018 Masterweb Solutions 
Written by Ekene Onuorah
masterweb.com.ng
For Masterweb Stores
*/

/**Body and title**/
body{background:url(bg.png);margin:0px; font-family: 'PT Sans Narrow', calibri;font-size:18px;}
.title-font{font-family:'Oswald',calibri;}
.title{font-size:20px;font-weight:bold;display:inline;}


/**Header of site**/

@media (min-width: 560px) {
.header-box{width:100%;min-height:70px;background:#581845;border-bottom:1px solid #CCC;box-shadow: 0px 2px 5px #999;margin-bottom:5px;}
.header-holder{max-width:1000px;margin:0px auto 0px auto;padding:5px;}

.logo-box{font-weight:bold;font-size:30px;display:inline-block;vertical-align:middle;margin-right:10px;}
.logo-box a{color:#063;text-decoration:none;display:block;}
.logo-box a:hover{color:#777;}
.logo-box a img{height:50px;vertical-align:middle;}

.header-home{display:inline-block;vertical-align:middle;margin-right:10px;font-size:16px;}
.header-home a{color:#fff;text-decoration:none;}

.header-search{display:inline-block;vertical-align:middle;margin-right:10px;font-size:16px;color:#fff;text-decoration:none;cursor:pointer;}

.header-second-fix{display:inline-block;vertical-align:middle;width:1px;height:50px;}
.header-notif{display:inline-block;vertical-align:middle;margin-right:10px;font-size:16px;color:#fff;text-decoration:none;cursor:pointer;}

.header-profile{display:inline-block;vertical-align:middle;cursor:pointer;}
.header-profile .holder{width:30px;height:30px;overflow:hidden;border-radius:15px;background:#999;text-align:center;display:inline-block;vertical-align:top;}
.header-profile .holder img{height:100%;max-width:1000px;}
.header-profile .drop-down{color:#fff;display:inline-block;vertical-align:bottom;cursor:pointer;}

.header-reg{display:inline-block;vertical-align:middle;margin-right:10px;font-size:16px;}
.header-reg a{color:#fff;text-decoration:none;}

.header-log{display:inline-block;vertical-align:middle;margin-right:10px;font-size:16px;}
.header-log a{color:#fff;text-decoration:none;}

.header-first{display:inline-block;}
.header-second{display:inline-block;float:right;}

.header-fly-right{position:absolute;top:50px;right:0px;width:350px;background:#fff;min-height:300px;
border:1px solid #999;box-shadow: 0px 2px 5px #999;padding:10px;z-index:910;display:none;}
.header-fly-left{position:absolute;top:50px;left:0px;width:500px;background:#fff;min-height:300px;
border:1px solid #999;box-shadow: 0px 2px 5px #999;padding:10px;z-index:910;display:none;}




	.header-name-sticker{color:#FF6;font-weight:bold;width:100%;position:absolute;top:0px;text-align:center;display:none;}
	.menu{background:linear-gradient(to right, #006, #06F);font-family:'Oswald',calibri;display:block;text-align:center;}
	.menu-mobile{display:none;color:#FFF;cursor:pointer;padding:10px;background:#000;}
	.menu-item{display:inline-block;position:relative;text-transform:uppercase;}
	.menu-item-button{cursor:pointer;color:#fff;padding:10px;display:block;}
	.menu-item-button:hover{color:#fff;background:#000;}
	.menu-active{background:#fff;color:#000;}

.logo2{position:fixed;top:0px;left:0px;display:block;width:80px;z-index:99;}

} @media (max-width: 559px) {
	
.header-box{width:100%;min-height:50px;background:#fff;border-bottom:1px solid #CCC;}
.header-holder{max-width:1000px;margin:0px auto 0px auto;}

.logo-box{font-weight:bold;font-size:25px;display:inline-block;vertical-align:top;width:60%;}
.logo-box a{color:#fff;text-decoration:none;display:block;}
.logo-box a:hover{color:#CCC;}
.logo-box a img{max-width:100%;}

.header-home{display:none;}

.header-search{display:inline-block;vertical-align:top;font-size:15px;color:#fff;text-decoration:none;cursor:pointer;float:right;width:20%;}

.header-second-fix{display:inline-block;vertical-align:middle;width:1px;height:1px;}
.header-notif{display:inline-block;vertical-align:middle;margin-right:10px;font-size:18px;color:#777;text-decoration:none;cursor:pointer;}

.header-profile{display:inline-block;vertical-align:middle;float:right;position:relative;top:-2px;cursor:pointer;}
.header-profile .holder{width:30px;height:30px;overflow:hidden;border-radius:15px;background:#999;text-align:center;display:inline-block;vertical-align:top;}
.header-profile .holder img{height:100%;max-width:1000px;}
.header-profile .drop-down{color:#333;display:inline-block;vertical-align:bottom;cursor:pointer;}

.header-reg{display:inline-block;vertical-align:middle;margin-right:10px;font-size:18px;}
.header-reg a{color:#777;text-decoration:none;}

.header-log{display:inline-block;vertical-align:middle;margin-right:10px;font-size:18px;float:right;}
.header-log a{color:#777;text-decoration:none;}

.header-first{display:block;background:#581845;padding:5px;}
.header-second{display:block;padding:5px;}

.header-fly-right{position:absolute;top:80px;right:0px;background:#fff;min-height:50px;
border-bottom:1px solid #999;box-shadow: 0px 2px 5px #999;z-index:910;display:none;width:100%;}
.header-fly-left{position:absolute;top:40px;left:0px;background:#fff;min-height:50px;
border-bottom:1px solid #999;box-shadow: 0px 2px 5px #999;z-index:910;display:none;width:100%;}



	.header-name-sticker{color:#FF6;font-weight:bold;width:100%;position:absolute;top:180px;text-align:center;display:none;}
	.menu-mobile{display:block;color:#FFF;cursor:pointer;position:absolute;right:0px;top:30px;padding:10px;background:#000;}
	.menu{background:linear-gradient(to right, #006, #06F);font-family:'Oswald',calibri;position:absolute;right:0px;top:50px;display:none;z-index:1000;}
	.menu-item{display:block;position:relative;text-transform:uppercase;}
	.menu-item-button{cursor:pointer;color:#fff;padding:10px;display:block;}
	.menu-item-button:hover{color:#fff;background:#000;}
	.menu-active{background:#fff;color:#000;}
	
.logo2{position:fixed;top:0px;left:0px;display:block;width:80px;z-index:99;}
}


@media (max-width: 1132px){
	.logo-box a img{max-width:100%;visibility:hidden;}
	}




/**Layout of site**/
/*All layouts could be given a white background if the body background has photos that may interfere with visibility*/

@media (min-width: 1100px){
.layout-holder{text-align:center;width:100%;max-width:1400px;margin:0px auto 0px auto;display:block;min-height:500px;}
.layout-main{width:70%;max-width:800px;min-height:500px;display:inline-block;vertical-align:top;text-align:left;background:#fff;}
.layout-sub{width:30%;max-width:300px;min-height:500px;display:inline-block;vertical-align:top;text-align:left;background:#fff;}
.layout-sub-btn{display:none;}
.layout-sub-closer{display:none;}


} @media (min-width: 600px) and (max-width: 1099px) {
.layout-holder{text-align:center;width:100%;display:block;min-height:500px;}
.layout-main{width:60%;max-width:580px;min-height:500px;display:inline-block;vertical-align:top;text-align:left;float:left;background:#fff;}
.layout-sub{width:40%;max-width:350px;min-height:500px;display:inline-block;vertical-align:top;text-align:left;float:right;background:#fff;}
.layout-sub-btn{display:none;}
.layout-sub-closer{display:none;}


} @media (max-width: 599px) {
.layout-holder{text-align:center;width:100%;display:block;min-height:500px;}
.layout-main{width:100%;min-height:500px;display:block;vertical-align:top;text-align:left;background:#fff;margin-top:25px;position:relative;}
.layout-sub{display:none;padding:5px;position:absolute;top:130px;right:0px;background:#fff;max-width:300px;width:100%;border-bottom:1px solid #000;
box-shadow: 0px 2px 5px #999;min-height:200px;z-index:901;text-align:left;}
.layout-sub-btn{position:absolute;top:-25px;right:0px;width:150px;background:#E8E8E8;display:block;text-align:left;color:#999;
border-bottom:1px solid #CCC;box-shadow: 0px 2px 5px #999;margin-bottom:5px;font-size:0.9em;text-align:center;cursor:pointer;z-index:900;}
.layout-sub-closer{color:#F00;font-size:14px;font-weight:bold;cursor:pointer;padding-top:10px;text-align:right;padding-right:5px;}
}
.layout-close-all-btn{color:#F00;font-size:14px;font-weight:bold;cursor:pointer;padding-top:10px;text-align:right;padding-right:5px;}


/*Quick Layouts that we can use anywhere inside... comes with natural padding*/
.layout-full{padding:10px;text-align:left;}
.layout-800{max-width:800px;padding:10px;text-align:left;margin:0px auto 0px auto;}
.layout-600{max-width:600px;padding:10px;text-align:left;margin:0px auto 0px auto;}
.layout-400{max-width:400px;padding:10px;text-align:left;margin:0px auto 0px auto;}
.layout-admin-dash{display:block;margin-bottom:5px;padding:5px;vertical-align:top;}



/**footer **/
@media (min-width: 500px){
.footer{width:100%;border-top:1px solid #999;padding-top:20px;background:#e8e8e8;margin-top:30px;}
.footer-holder{max-width:1000px;padding:10px;margin:0px auto 0px auto;}
.footer-box{width:45%;display:inline-block;margin-bottom:20px;padding:0px 10px 0px 0px;vertical-align:top;}
.footer-box .title{display:block;padding-bottom:7px;color:#333;width:100%;font-weight:bold;}
.footer-box .link{display:inline-block;margin-right:8px;color:#555;font-size:0.85em;}
} @media (max-width: 499px) {
.footer{width:100%;border-top:1px solid #999;padding-top:20px;background:#e8e8e8;margin-top:30px;}
.footer-holder{max-width:1000px;padding:10px;margin:0px auto 0px auto;}
.footer-box{display:block;margin-bottom:20px;vertical-align:top;}
.footer-box .title{display:block;padding-bottom:7px;color:#333;width:100%;font-weight:bold;}
.footer-box .link{display:inline-block;margin-right:8px;color:#555;font-size:0.85em;}
}

.footest{width:100%;padding:5px 0px 5px 0px;background:#333;}
.footest-holder{max-width:1000px;padding:0px 10px 0px 10px;margin:0px auto 0px auto;}
.footest-holder .link{display:inline-block;margin-right:8px;color:#777;font-size:0.85em;}











/**boxes and tabs... white-box used in review**/
.white-box{background:#fff;border:1px solid #ccc;border-radius:3px;min-height:20px;padding:10px;}
.white-box .profile{width:30px;height:30px;display:inline-block;border-radius:15px;overflow:hidden;background:#999;margin-right:5px;vertical-align:top;}
.white-box .profile img{height:100%;max-width:1000px;}
.white-box .name-area{display:inline-block;max-width:75%;vertical-align:top;}
.white-box .name-area .name{display:block;text-decoration:none;font-size:0.95em;}
.white-box .name-area .time{display:block;text-decoration:none;font-size:0.85em;}
.white-box .short-desc{max-height:100px;overflow:hidden; 
 font-family:q_serif, Georgia, Times, "Times New Roman", "Hiragino Kaku Gothic Pro", Meiryo, serif; font-size: 15px;}
.white-box .full-desc{font-family:q_serif, Georgia, Times, "Times New Roman", "Hiragino Kaku Gothic Pro", Meiryo, serif; font-size: 15px;color:#000;}
.white-box .photo-preview{max-width:95%;border:0px;}
.white-box .read-more{display:block;text-decoration:none;color:#039;}
.white-box .meta{font-size:0.85em;}
.tab{padding:5px;border:1px solid #ddd;color:#777;background:#eee;cursor:pointer;display:block;}
.tab:hover{border:1px solid #090;}
.tab-active{color:#000;border:1px solid #fff;background:#fff;}
.level-2-comment{padding-left:20px;border-left:dashed 2px #900;}





/*Gallery display*/
.gallery-type-icon{color:#999;font-size:0.8em;}
.gallery-type-title{color:#333;font-weight:bold;font-size:1.1em;padding:5px 0px 1px 0px;text-align:left;}
.gallery-type-doc{max-width:98%;min-height:300px;}
.gallery-type-img{max-width:98%;}
.gallery-type-vid{max-width:98%;}
.gallery-type-aud{max-width:90%;}



/*Main profile*/
.main-profile{padding-bottom:10px;}
.main-profile .photo-holder{width:100%;display:block;vertical-align:top;bakground:#000;
background:linear-gradient(to right, #999, #000);text-align:center;max-height:450px;overflow:hidden;}
.main-profile .photo-holder img{max-width:100%;}
.main-profile .content-holder{display:block;vertical-align:top;max-width:100%;}
.main-profile .content-holder .bio{color:#777;padding-bottom:10px;}
.main-profile .content-holder .about{color:#000;padding-bottom:10px;font-family:q_serif, Georgia, Times, "Times New Roman", "Hiragino Kaku Gothic Pro", Meiryo, serif; font-size: 15px;}



/*Misc*/
#shopping-cart a{display:block;color:#fff;background:#036;font-size:18px;padding:5px 5px 5px 5px;text-align:center;}
.item-analysis span{border:1px solid #555;background:#444;color:#fff;margin:3px 3px 3px 1px; padding:3px;display:inline-block;}
.real-price{font-weight:bold;font-size:1.1em;}
.promo-details{background:#C03;color:#FFF;font-size:13px;display:inline-block;padding:1px 3px 1px 3px;vertical-align:baseline;}
.old-price{color:#999;font-size:0.9em;}
.cart-now-active{color:#F00;max-width:80px;}
.cart-now{color:#999;max-width:80px;}
.buy-now{color:#FFF;text-align:center;display:inline-block;background-color:#581845;
		background:linear-gradient(to right, #581845, #000);max-width:80px;font-size:14px;border-radius:5px;padding:1px 3px 1px 3px;}
.like{font-weight:bold;font-size:1.2em;color:#999;}
.liked{color:red;font-weight:bold;font-size:1.2em;}
.whatsapp{font-weight:bold;font-size:1.2em;color:#999;}
.post-page{padding:5px 0px 5px 0px;}
.flash-box{display:block;margin:3px 0px 3px 0px;padding:10px;background:#000;color:#FFF;text-align:center;}


/*Item mini that isn't grid*/
.item-mini{display:block;width:100%;max-width:800px;position:relative;overflow:hidden;background:#fff;margin:0px auto 5px auto;
			border-bottom:1px solid #ccc;padding-bottom:5px;vertical-align:top;text-align:left;}
.item-mini .title-area{text-align:left;display:inline-block;max-width:55%;padding-bottom:20px;}
.item-mini .title{color:#555;font-weight:lighter;font-size:1.1em;display:block;padding-bottom:3px;}
.item-mini .meta{font-weight:normal;font-size:0.9em;}
.item-mini .cover{width:40%;max-width:200px;overflow:hidden;text-align:left;display:inline-block;vertical-align:top;}
.item-mini .cover img{width:80%;}
.item-mini:hover .cover img{width:80%;height:auto;}
.item-mini a:hover{opacity:1;}
.item-mini .action-area{position:absolute;bottom:0px;right:0px;width:100%;max-width:300px;text-align:center;background:url(light-white-bg.png);}
.item-mini .action-area a{display:inline-block;vertical-align:middle;width:20%;text-align:center;}
.item-mini .action-area .inline-cart{display:inline-block;vertical-align:middle;width:50%;text-align:center;white-space:nowrap;}
.item-mini .action-area .inline-cart a{width:48%;display:inline-block;vertical-align:middle;}
.item-mini .delivery-data{display:none;display:inline-block;padding-right:10px;}
.item-mini .epay-data{display:none;display:inline-block;}


/*Item mini that is grid*/
.item-mini-grid{display:inline-block;max-width:300px;width:100%;position:relative;overflow:hidden;background:#fff;margin-bottom:3px;
			border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding-bottom:5px;vertical-align:top;height:315px;text-align:left;}
.item-mini-grid .cover{width:90%;overflow:hidden;text-align:center;height:200px;}
.item-mini-grid .cover img{height:100%;max-width:2000px;}
.item-mini-grid:hover .cover img{width:100%;height:auto;}
.item-mini-grid .title-area{text-align:left;display:block;padding:3px 5px 5px 5px;}
.item-mini-grid .title{color:#555;font-weight:lighter;font-size:17px;display:block;padding-bottom:3px;height:40px;overflow:hidden;}
.item-mini-grid .meta{font-weight:normal;font-size:0.9em;}
.item-mini-grid a:hover{opacity:1;}
.item-mini-grid .action-area{position:absolute;top:0px;right:0px;width:100%;max-width:300px;text-align:center;background:url(light-white-bg.png);}
.item-mini-grid .action-area a{display:inline-block;vertical-align:middle;width:20%;text-align:center;}
.item-mini-grid .action-area .inline-cart{display:inline-block;vertical-align:middle;width:50%;text-align:center;white-space:nowrap;}
.item-mini-grid .action-area .inline-cart a{width:48%;display:inline-block;vertical-align:middle;}
.item-mini-grid .delivery-data{display:none;}
.item-mini-grid .epay-data{display:none;}

@media (max-width: 699px) {
.item-mini-grid{display:inline-block;max-width:300px;width:45%;height:265px;text-align:left;}
.item-mini-grid .cover{height:150px;}
.item-mini-grid .title-area{text-align:center;}
.item-mini-grid .meta{text-align:center;}
}





/*Item page*/
.item-main{display:block;width:100%;max-width:800px;position:relative;margin:0px auto 5px auto;text-align:left;}
.item-main .photo{width:100%;}
.item-main .thumbs-area{display:inline-block;vertical-align:top;width:10%;}
.item-main .photo-main-area{display:inline-block;vertical-align:top;width:85%;margin-left:10px;}
.item-main #item-main-photo-title{font-size:0.8em;color:#555;text-align:left;}
.item-main #item-main-photo{max-width:100%;}
.item-main .item-sub-photo{max-width:100%;max-height:50px;cursor:pointer;}
.item-main .action-area .sharing-area{display:inline-block;vertical-align:middle;padding-left:10px;}
.item-main .inline-cart{display:block;white-space:nowrap;padding:5px;border:1px solid #333;}
.item-main .inline-cart a{display:inline-block;vertical-align:middle;}
.item-main .inline-cart .buy-now{font-size:20px;min-width:80px;}
.item-main .inline-cart .cart-now{font-size:25px;}
.item-main .inline-cart .cart-now-active{font-size:25px;}
.item-main #order-qty-box{max-width:80px;}
.item-main .gallery-area-others{max-width:400px;}



/*Category and brand*/
.category-box{max-width:300px;display:inline-block;margin:10px;height:250px;overflow:hidden;width:95%;text-align:center;}
.category-box .photo{width:95%;margin:0px auto 0px auto;height:200px;overflow:hidden;border-radius:10px;}
.category-box .photo img{height:100%;max-width:1000px;border-radius:10px;}
.category-box .title{padding-top:5px;color:#581845;font-size:20px;font-weight:bold;}

@media (max-width: 699px) {
.category-box{display:inline-block;max-width:300px;width:40%;height:200px;}
.category-box .photo{height:150px;}
}





/*Icon packs for menu*/
.icon-pack-area{background:#fff;text-align:center;}
.icon-pack-menu{display:inline-block;vertical-align:top;text-align:center;height:50px;max-width:100px;min-width:60px;
 padding:3px 0px 2px 0px;background:#fff;overflow:hidden;}
.icon-pack-menu .icon{width:27px;height:26px;border-radius:17px;background:#000;color:#fff;text-align:center;display:block;padding:3px;margin:0px auto 0px auto;}
.icon-pack-menu .name{color:#000;text-align:center;display:block;font-size:0.6em;}

