/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 14, 2016, 9:51:13 AM
    Author     : john.kyalo
*/
/****************************************************************************
  *-*-*-* SLIDER *-*-*-*
****************************************************************************/
.slider { position: relative; height: 373px; margin-bottom: 30px; }
.slider-slides { width: 100%; height: 373px; }
.slider a  { height: 373px; display: block;}
.slides  { height: 373px !important; width: 100% !important;}
.slider a img {width: 100%; height: 100%;  }
.slider .overlay { text-align: center; width: 358px; position: absolute;/* background: rgba(21,16,14,0.7);*/ top: 50%; left: 50%; margin-left: -165px; z-index: 999; margin-top: -70px; }
.slider .overlay h1 { display: inline-block; color: #000000; font-weight: bold;padding-bottom: 5px; border-bottom: 1px solid #000000; margin-bottom: 5px; }
.slider .overlay p { font:28px 'Open Sans' sans-serif; color: black; }
.slider .overlay p span { font-weight: 700; color: black }

.slider > a { width: 60px; height: 60px; display: block; position: absolute; top: 50%; margin-top: -30px; z-index: 9999; }
.slider > a.next { background: url("../maxshopimages/left.png") no-repeat; }
.slider > a.prev { background: url("../maxshopimages/right.png") no-repeat; right: 0px; }

.slider .slider-btn { z-index: 9999; position: absolute; right: 10px; bottom:20px; }
.slider .slider-btn a{ font-size: 0px; display: inline-block; height: 15px; width: 15px; margin: 0px 7px; border: 1px solid #c6c2bf; background: #585553;  }
.slider .slider-btn .activeSlide { background: #f71919; }
.slider .slider-btn a:hover { background: #f71919; }


.offers { margin-bottom: 30px; }
.offers figure a{ width: 270px; height: 171px;  display: block; }
.offers figure a img{ width: 100%; height: 100%;  }

.offers figure  { position: relative; }
.offers figure .overlay { position: absolute; bottom: 0px; left: 0px; width: 270px; background: rgba(21,16,14,0.7); display: none;}
.offers figure .overlay h1 { color: #ffffff; font-size: 27px; line-height: 31px; padding: 6px 10px; }
.offers figure .overlay h1 span {font:700 19px 'Open Sans' sans-serif; }
.offers figure .overlay h1 small {font:700 19px 'Quattrocento' sans-serif; color: #ffffff;}
.heading { border-bottom: 1px solid #e9e9e9; margin-bottom: 18px; }
.heading h2 { border-bottom:1px solid #e9e9e9; background: #474747; position: relative; padding: 10px 20px; color: #ffffff; display: inline-block;  }


.product { margin-bottom: 30px;-webkit-transition:  0.5s; -moz-transition:  0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; }
.product figure { position: relative;width: 270px; height: 186px;}
.product figure > a { width: 270px; height: 186px; }
.product figure > a > img { width: 100%; height: 100%; }

.product figure .overlay { display: none; padding: 20px 0px; margin-left: -64px; margin-top: -42px;  width: 128px; text-align: center; position: absolute; top: 50%; left: 50%;  background: rgba(237,60,60,0.7); }
.product figure .overlay a { width: 41px; height: 41px;  display: inline-block; background-position: 0px 0px; }
.product figure .overlay a.zoom { background: url("../maxshopimages/zoom.png") no-repeat; }
.product figure .overlay a.link { background: url("../maxshopimages/link.png") no-repeat; }

.detail { background: #f9f9f9;text-align: center; border: 1px solid #dfdfdf; border-top: 0px; padding: 10px 0px;;-webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; -ms-transition: background-color 0.5s; }
.detail span {font:700 16px 'Arial' sans-serif; color: #f71919; margin-bottom: 5px;}
.detail h4 { margin-bottom: 5px;}

.detail .icon a { width: 42px; height: 42px; display: inline-block; background-position: 0 0;  }
.detail .icon a.one { background: url("../maxshopimages/icon3.png") no-repeat; }
.detail .icon a.two { background: url("../maxshopimages/icon2.png") no-repeat; }
.detail .icon a.three { background: url("../maxshopimages/icon.png") no-repeat; }

.product:hover {  box-shadow: 1px 1px 20px #e1dfdf; }
.product:hover .detail {  background: #ffffff; }
.product:hover figure { opacity: 0.8; }

.pagination {  border-top: 1px solid #dfdfdf; margin-top: 0px;margin-left: 27px; }
.pagination p {margin-top: 22px;font:13px 'Arial' sans-serif; color: #848484; display: inline-block;}

.pagination {margin: 20px 0px 40px;}
.pagination ul {margin-top: 12px; float: right; border-radius: 0px !important; box-shadow: none !important; background: none !important; }
.pagination li { margin-left: 5px !important; border: 1px solid #dfdfdf;float: left;}
.pagination li a { font: 13px 'arial' sans-serif; color: #848484; float: none; padding: 6px 13px !important;-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition:  0.5s; }
.pagination li a:hover {background: #f5f5f5;}


/****************************************************************************
    *-*-*-* CLIENTS*-*-*-*
****************************************************************************/
.clients { position: relative ; border: 1px solid #e2e2e2; margin-bottom: 30px; height: 92px;}
.clients ul li {  display: inline-block;  padding: 32px 24px;}
.clients ul li a {}
.clients ul li img { vertical-align: middle; }
.clients .caroufredsel_wrapper { height: 92px !important;; position: static !important;; }

.categories { margin-bottom: 30px; }
.categories figure { width:100%; height: 133px; position: relative;     border-right: 1px dotted black; padding-right: 5px;}
.categories figure img { width: 100%; height: 100% }
.categories figure .cate-overlay { width: 100%; text-align: center;/* background: rgba(246,69,68,0.7)*/; line-height: 133px; position: absolute; top: 0px; left: 0px; }
.categories figure .cate-overlay a { text-transform: uppercase; font:17px 'Oswald' sans-serif; padding: 10px 15px; border: 1px solid #ffffff; color: #ffffff; }

/****************************************************************************
    *-*-*-* BUTTONS *-*-*-*
****************************************************************************/
.button {-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition:  0.5s; background: #ffffff; border-radius: 10px;font:700 16px 'Open Sans' sans-serif; padding: 10px 21px; text-transform: uppercase; color: #f71919; }
.button:hover { background: #f0f0f0; }

.red-button {-webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition:  0.5s; font: 14px 'Arial' sans-serif; color: #ffffff; padding: 20px 15px 20px 38px; margin: 18px; display: inline-block; background: #f71919 url("../maxshopimages/shopping-cart.png") 15px center no-repeat;  }
.red-button:hover  {background: #cc2828 url("../maxshopimages/shopping-cart.png") 15px center no-repeat;}
.red-button.black { background: #4d4d4d url("../maxshopimages/update.png") 15px center no-repeat;}
.red-button.black:hover  { background: #262626 url("../maxshopimages/update.png") 15px center no-repeat;}

.big-button { font: 11px 'arial' sans-serif;padding: 14px 14px 15px 30px;margin-right: 6px;border: 1px solid #dfdfdf; background: #f2f2f2; display: inline-block; }
.big-button:hover {background:#fcfcfc}