/* Base settings */

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
          box-sizing: border-box !important;
 -webkit-backface-visibility: hidden;
}

html{
  font-size:100%;
  line-height:130%;
  font-family: 'Lato', sans-serif;
}
body{
  padding: 0 10px 0 10px;
}


/* page setup */
.wrapper{
  width:100%;
  max-width:1000px;
  margin: 30px auto;
}
section.row{
  margin:0 0 30px 0;
}
.row{
  width: 100%;
  display: block;
  clear: both;
}

/* Actual content */
.container-item{
  position: relative;
  margin-top:30px;
  float:left;
  margin-right:50px;
}

.item{
  width:260px;
  height:260px;
  position: relative;
  top:0;
  left:0;
  z-index:5;
  overflow: hidden;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
          box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.item-img{
  z-index: -99999;
}

.item-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */

  -webkit-transition: background-color 0.3s ease-in-out;
     -moz-transition: background-color 0.3s ease-in-out;
      -ms-transition: background-color 0.3s ease-in-out;
       -o-transition: background-color 0.3s ease-in-out;
          transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay{
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
  background-color: rgba(0,0,0,0.4);
}
.item-content{
  position: absolute;
  width:100%;
  bottom: 0;
  -webkit-transform: translate(0,100%);
     -moz-transform: translate(0,100%);
      -ms-transform: translate(0,100%);
       -o-transform: translate(0,100%);
          transform: translate(0,100%);
  
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  
}
.item:hover .item-content{
  -webkit-transform: translate(0,0);
     -moz-transform: translate(0,0);
      -ms-transform: translate(0,0);
       -o-transform: translate(0,0);
          transform: translate(0,0);
      
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

.item-top-content{
  position: relative;
}
.item-top-content-inner{
  position: absolute;
  bottom: 0;
  padding:10px 15px 10px 15px;
  background: rgba(255,255,255,.85);
  width:100%;
}
.item-add-content{
  padding:0 15px 15px 15px;
  opacity:0;
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
  opacity:1
}
.item-add-content-inner{
  border:0px solid #dadada;
  border-top-width:1px;
  padding-top:10px;
}



/* Buttons */
.item-button{
  border-radius:3px;
  width:30px;
  height:30px;
}
.item-button.info{
  background-color:#40c781;
  position: absolute;
  top: 15px;
  left: 15px;
  opacity:0;
  color:#fff;
  padding:5px 0 0 12px;
  
}
.item-button.info:hover{
  background-color:#34a46c;
  }
.container-item:hover .item-button.info{
  opacity:1;
}

.item-button.share{
  background-color:#4f4f4f;
  position: absolute;
  top: 50px;
  left: 15px;
  opacity:0;
  color:#fff;
  padding:5px 0 0 7px;
}
.item-button.share:hover{
  background-color:#333333;
  cursor:pointer;
  }
.container-item:hover .item-button.share{
  opacity:1;
}
.btn.buy{
  background-color: #40c781;
  text-align:center;
  line-height:42px;
  font-weight:700;
  color:#fff;
  border-radius:3px;
  text-decoration:none;
  opacity:1;
  border:0px solid #35a76e;
  border-bottom-width:2px;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
  background-color:#34a46c;
}
.expand{
  display:block;
}

/* Tags */
.sale-tag{
  width: 50px;
  height: 100px;
  background: #40c781;
  position: absolute;
  top:-45px;
  right:-10px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.sale-tag span{
  position:absolute;
  top:48px;
  left:2px;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  font-size:11px;
  color:#fff;
}

/* content */

.item-product{
  width:70%;
  float:left;
}
.item-product-price{
  width:30%;
  float:right;
  text-align: right;
}
/* Style / Theming */

body{
  /* IE10 Consumer Preview */ 
  background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Opera */ 
  background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #E3E3E3 100%);
}

/*Prduct title*/
h2{
  font-size:1em;
  font-weight:400;
  color:#222;
}

.subdescription{
  font-family: 'helvetica neue';
  font-size:0.8em;
  font-weight:400;
  color:#7d7d7d;
}

/*product price*/
.item-product-price{
  color:#40c781;
  font-size:1em;
  font-weight:700;
  position:relative;
  font-family:'helvetica neue'
}
.item-product-price .subdescription{
  color:#7d7d7d;
}
.old-price{
  border:0 solid #7d7d7d;
  border-bottom-width:1px;
  margin-top:-11px;
  width:30px;
  position:absolute;
  right:-2px;
  bottom:10px;
  -webkit-transform: rotate(-30deg);
     -moz-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
       -o-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.item-content{
  background: rgba(255,255,255,.85);
}
.item-add-content{
  font-family: 'Lato', sans-serif;
  font-weight:400;
  color:#7d7d7d;
}
.item-add-content .section{
  margin-bottom:5px;
}
.item-add-content .section:last-of-type{
  margin-bottom:0;
}
.item-add-content h4{
  font-weight:600;
  color:#222;
  font-size:0.8em;
}
.item-add-content p{
  font-size:0.8em;
}


/* Item menu */
.item-menu{
  position: absolute;
  top:3px;
  left:30px;
  height:254px;
  width:50px;
  border-radius:3px 0 0 3px;
  background:#4f4f4f;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
          box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  -webkit-transform: translate(0,0);
     -moz-transform: translate(0,0);
      -ms-transform: translate(0,0);
       -o-transform: translate(0,0);
          transform: translate(0,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;  
}
.item-menu.visible{
  -webkit-transform: translate(-70px,0);
     -moz-transform: translate(-70px,0);
      -ms-transform: translate(-70px,0);
       -o-transform: translate(-70px,0);
          transform: translate(-70px,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
.item-menu:hover{
  -webkit-transform: translate(-70px,0);
     -moz-transform: translate(-70px,0);
      -ms-transform: translate(-70px,0);
       -o-transform: translate(-70px,0);
          transform: translate(-70px,0);
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
    
}
/*List*/
.popout-menu ul{
  list-style-type:none;
}
.popout-menu ul li{
  -webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.1);
          box-shadow: inset 0px 1px rgba(255,255,255,0.1);
  border-bottom:1px solid #434343;
}
.popout-menu ul li:first-of-type{
  -webkit-border-radius: 3px 0;
          border-radius: 3px 0;
}
.popout-menu ul li:last-of-type{
  border-bottom-width:0px;
}
.popout-menu ul li:hover{
  background:#434343;
}
.popout-menu ul li a{
  color:#eaeaea;
  font-weight:600;
  font-size:0.8em;
  text-decoration:none;
  line-height: 36px;
  padding:0 15px;
  display:block;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  cursor:pointer;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
/***************************************************************/
/*************** Footer Bar Style ******************************/
/***************************************************************/
.footer-bar
{
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #111;
    border-top: 1px solid #E62600;
    position: fixed;
    bottom: 0;
    left: 0;
}
.footer-bar .article-wrapper{
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #888;
    float: left;
    margin-left: 10%;
}
.footer-bar .article-link a, .footer-bar .article-link a:visited{
    text-decoration: none;
    color: #fff;
}
.site-link a, .site-link a:visited{
    color: #888;
    font-size: 14px;
    font-family: arial, sans-serif;
    float: right;
    margin-right: 10%;
    text-decoration: none;
}
.site-link a:hover{
    color: #E62600;
}