.products-title{
 height: 130px;
 background: #000;
 color: #fff;
 vertical-align: bottom;
}

.products{
 overflow: auto;
 padding: 20px;
 direction: rtl;
 font-size: 0;
 text-align: center;
}

.products > a{
 display: inline-block;
 vertical-align: top;
 position: relative;
 padding: 20px 0;
 text-decoration: none;
 color: #000;
}
.products > a > div , .products > div > a > div{
 padding: 0 20px;
}
.products > a > div > img , .products > div > a > div > img{
 display: block;
 width: 100%;
 max-width: 200px;
 margin: 0 auto;
}
.products > a > h2 , .products > div > a > h2{
 display: block;
 margin: 0;
 height: 50px;
 font: 17pt 'Nassim';
 line-height: 50px;
 text-align: center;
}



.products > a > span , .products > div > a > span{
 display: block;
 width: 200px;
 padding: 10px 0;
 margin: 0 auto;
 font-size: 0;
 text-align: center;
 direction: rtl;
 background: #fc0;
 color: #000;
 border-radius: 3px;
}
.products > a span i , .products > div > a span i{
 display: inline-block;
 vertical-align: top;
 width: 20px;
 height: 20px;
 margin: 0 10px;
 font: 14pt 'Listicons';
 line-height: 20px;
}
.products > a span b , .products > div > a span b{
 display: inline-block;
 vertical-align: top;
 height: 20px;
 font: 12pt 'Nassim';
 font-weight: 100;
 line-height: 20px;
}

.product{
 display: block;
 font-size: 0;
 padding: 0 60px 40px 60px;
 background: #eee;
 padding-top: 60px;
}
.product > div{
 display: inline-block;
 vertical-align: top;
 font: 10pt tahoma;
}
.product .product-details{
 width: 40%;
}
.product .product-details > h1{
 display: block;
 padding: 60px 20px 10px 20px;
 margin: 0;
 font: 30pt 'Nassim'; 
}
.product .product-details > h2{
  display: table;
  padding: 0 30px;
  height: 60px;
  margin: 0 20px 20px 20px;
  font: 24pt 'Nassim';
  background: #000;
  border-radius: 3px;
  color: #fff;
  line-height: 60px;
}

.product .product-details > span{
 position: relative;
 display: block;
 padding: 10px 20px;
 font: 15pt 'Nassim'
}
.product .product-details > span:first-child{
 padding-top: 20px;
}

.product .product-details > span > i{
 display: block;
 width: 40px;
 height: 40px;
 font: 20pt 'Listicons';
 color: #fc0;
}
.product .product-details > span > span{
 display: block;
 font: 15pt 'Nassim';
}

.product .product-image{
 position: relative;
 width: 60%;
}
.product .product-image > img{
 display: block;
 width: 100%;
 max-width: 810px;
}


.product .product-image > div{
 padding: 0 20px;
}
.product .product-image #regular-image{
 padding: 40px;
}
.product .product-image #regular-image > img{
 display: block;
 margin: auto;
 width: 100%;
 max-width: 600px;
 height: auto;
}

#magnifier{
 display: none;
 position: absolute;
 width: 140px;
 height: 140px;
 top: 0;
 cursor: none;
 border: 5px #fff solid;
 border-radius: 100%;
 box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.8), inset 0 0 40px 0px rgba(255, 255, 255, 0.7), inset 0 0 5px -1px rgba(0, 0, 0, 0.7);
 background-color: #fff !important;
 background-repeat: no-repeat !important;
}

.product-articles{
 background: #000;
 border-top: 1px #eee solid;
 padding: 30px 0;
}
.product-articles > h2{
 display: block;
 padding: 20px 40px;
 margin: 0;
 font: 30pt 'Nassim';
}
.product-articles > div{
 font-size: 0;
 text-align: center;
}
.product-articles > div > a{
 display: inline-block;
 width: 300px;
 height: 60px;
 margin: 10px;
 border: 1px #fc0 solid;
 border-radius: 3px;
 background: #fc0;
 color: #000;
 text-align: center;
 text-decoration: none;
 cursor: pointer;
 transition: background-color 0.5s ease;
 transition: color 0.5s ease;
}
.product-articles > div > a > *{
 display: inline-block;
 vertical-align: top;
}
.product-articles > div > a > span{
 font: 20pt 'Nassim';
 line-height: 60px;
}
.product-articles > div > a > i{
 height: 16px;
 margin: 20px 5px 0 5px;
 font: 9pt Tahoma;
 line-height: 16px;
 padding: 0 4px;
 border: 1px #000 solid;
 border-radius: 3px;
}
.product-articles > div > a:hover{
 background: #fff;
 color: #fc0;
}
.product-articles > div > a:hover *{
 border-color: #fc0;
}



.product-gallery{
}
.product-gallery > span{
 display: block;
 font: 30pt 'Nassim';
 padding: 20px 80px 0 80px;
}
.product-gallery > div{
 padding: 10px 35px 35px 35px;
 font-size: 0;
 text-align: center;
}
.product-gallery > div > img{
 display: inline-block;
 margin: 5px;
 border: 5px #555 solid;
 height: 120px;
 transition: border-color 0.5s ease;
 border-radius: 3px;
}
.product-gallery > div > img:hover{
 border-color: #fc0;
}


/*
  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  Products : Pole
  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
*/
.pole{
 height: 440px;
}

.product-description{
 display: block;
 background: #000;
 color: #fff;
 font: 17pt 'Nassim';
 padding: 40px;
}

.products-pole > a{
 display: block;
 width: 250px;
 height: 40px;
 margin: 10px 20px;
 border: 1px #fc0 solid;
 border-radius: 3px;
 background: #fc0;
 color: #000;
 text-align: center;
 text-decoration: none;
}
.products-pole > a > *{
 display: inline-block;
 vertical-align: top;
}
.products-pole > a > span{
 font: 14pt 'Nassim';
 line-height: 40px;
}
.products-pole > a > i{
 height: 16px;
 margin: 10px 5px 0 5px;
 font: 9pt Tahoma;
 line-height: 16px;
 padding: 0 4px;
 border: 1px #000 solid;
 border-radius: 3px;
}
.products-pole > a:hover{
 background: #fff;
 color: #fc0;
}
.products-pole > a:hover *{
 border-color: #fc0;
}



.gallery{
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 z-index: 999;
 background: rgba(255, 255, 255, 0.7)
}
.gallery > div{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 overflow: scroll;
}
.gallery > div > div{
 display: inline-block;
 max-width: 600px;
 background: #fff;
 box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.9);
}
.gallery > div > div > span{
 position: relative;
 display: block;
 height: 40px;
}
.gallery > div > div > span > i{
 position: absolute;
 top: 10px;
 left: 10px;
 display: block;
 width: 20px;
 height: 20px;
 background-image: url(/statics/img/ioc.png);
 z-index: 2;
}
.gallery > div > div > span > i:hover{
 background-position: -20px 0;
 cursor: pointer;
}

.gallery > div > div > span > b{
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 40px;
 font: 12pt 'Nassim';
 line-height: 40px;
 text-align: center;
 z-index: 1;
}
.gallery > div > div > ol{
 display: block;
 list-style: none;
 padding: 5px;
 margin: 0;
 font-size: 0;
}
.gallery > div > div > ol > li{
 position: relative;
 display: inline-block;
 margin: 3px;
 padding: 1px;
 border: 1px #fff solid;
}
.gallery > div > div > ol > li > img{
 display: block;
 height: 60px;
}
.gallery > div > div > ol > li.selected{
 border-color: #000;
 border-radius: 3px;
}

.gallery > div > div > div{
 position: relative;
}
.gallery > div > div > div > img{
 display: block;
 width: 100%;
 max-width: 800px;
 border: 0;
}
.gallery > div > div > div > span{
 position: absolute;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.gallery > div > div > div > span > i, .gallery > div > div > div > span > b{
 display: block;
 position: absolute;
 width: 50%;
 height: 100%;
}
.gallery > div > div > div > span > i{
 left: 0;
}
.gallery > div > div > div > span > b{
 right: 0;
}



/*
  languages compatibility
  right to left
*/
.content-rtl .list > a{
}

.content-rtl .products , .content-rtl .product-description{
 direction: rtl;
}
.content-rtl .products > a span , .content-rtl .products > div > a span{
 direction: rtl;
}
.content-rtl .products > a span i , .content-rtl .products > div > a span i{
 margin-left: 10px;
}

.content-rtl .product{
 direction: rtl;
}
.content-rtl .product-articles > h2 , .content-rtl .product-articles > div{
 direction: rtl;
}

.content-rtl .product .product-details > span > i{
 float: right;
}
.content-rtl .product .product-details > span > span{
 padding-right: 40px;
 direction: rtl;
}

.content-rtl .product-gallery > span{
 direction: rtl;
}

/*
  languages compatibility
  left to right
*/
.content-ltr .list > a{
}

.content-ltr .products , .content-ltr .product-description{
 direction: ltr;
}
.content-ltr .products > a span , .content-ltr .products > div > a span{
 direction: ltr;
}
.content-ltr .products > a span i , .content-ltr .products > div > a span i{
 margin-right: 10px;
}

.content-ltr .product{
 direction: ltr;
}
.content-ltr .product-articles > h2 , .content-ltr .product-articles > div{
 direction: ltr;
}

.content-ltr .product .product-details > span > i{
 float: left;
}
.content-ltr .product .product-details > span > span{
 padding-left: 40px;
 direction: ltr;
}

.content-ltr .product-gallery > span{
 direction: ltr;
}

/*
  Responsivity
*/
@media all and (min-width: 1200px)
{
 .list > a ,  .list > div > a{
  width: 40%;
 }
}

@media all and (max-width: 1200px)
{
 .list > a ,  .list > div > a{
  width: 40%;
 }

 .list > div > a:first-child{
  display: none;
 }
}

@media all and (max-width: 1000px)
{
 .list > a ,  .list > div > a{
  width: 40%;
 }

 .list > div > a:first-child +a{
  display: none;
 }
}

@media all and (max-width: 800px)
{
 .list > a ,  .list > div > a{
  width: 50%;
 }

 .list > div > a:first-child +a +a{
  display: none;
 }

 .product > div{
  width: 100% !important;
 }
}

@media all and (max-width: 500px)
{
 .list > div{
  display: block;
 }
 .list > a ,  .list > div > a{
  width: 100%;
  display: block;
 }

 .list > div > a:first-child +a +a{
  display: none;
 }

 .product #regular-image{
  padding: 40px 0 0 0 !important;
 }
 .product #magnifier{
  display: none !important;
 }
}