/* ************************** basic ***************************** */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}


img {
  border: 0;
}


a:active,
a:hover {
  outline: 0;
}


b,
strong {
  font-weight: bold;
}

footer,
header,
menu {
  display: block;
}


/* ************************** BODY ***************************** */

body {
    color: #444;
    font-family: 'Lato';
    font-size: 14px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* ************************** Header ***************************** */

#header {
    width: 100%;
    border-bottom: 1px solid #848484;
    background: #fff;
}

#header .width {
    width: 1160px;
    margin: 0px auto 0px;
}

.logo {
  height: 140px;
  width: auto;
  padding: 10px;
  display: inline-block;
}


    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        #header .width {
            width: 500px;
            margin: 0px auto 0px;
        }

        .logo {
            padding-left: 20%;
        }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        #header .width {
            width: 670px;
            margin: 0px auto 0px;
        }
        .logo {
            padding-left: 25%;
        }        
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        #header .width {
            width: 1038px;
            margin: 0px auto 0px;
        }
        .logo {
            padding-left: 28%;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        #header .width {
            width: 932px;
            margin: 0px auto 0px;
        }
        .logo {
            padding: 10px;
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        #header .width {
            width: 1140px;
            margin: 0px auto 0px;
        }

         .logo {
            padding: 10px;
        }
    }


#menu {
  width: 70%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  padding: 40px 0px 0px 0px;
}

#menu li {
  list-style: none;
  display: inline-block;
  height: 65px;
}

#menu li span {
  background: url('images/menu.png') no-repeat #848484;
    height: 40px;
    display: block;
}

#menu li:hover a {
  color: #385c9d;
}

#menu li:hover span {
  background-color: #385c9d;
}

#menu li.about span {
  background-position: 0px 0px;
  width: 30px;
  margin: 0px 0px 6px 32px;
}

#menu li.incense span {
  background-position: -35px 0px;
  width: 60px;
  margin: 0px 0px 6px 18px;
}

#menu li.holders span {
  background-position: -95px 0px;
  width: 69px;
  margin: 0px 0px 6px 15px;
}

#menu li.candles span {
  background-position: -162px 0px;
  width: 46px;
  margin: 0px 0px 6px 30px;
}

#menu li.oil span {
  background-position: -208px 0px;
  width: 43px;
  margin: 0px 0px 6px 25px;
}

#menu li.others span {
  background-position: -251px 0px;
  width: 55px;
  margin: 0px 0px 6px 21px;
}

#menu a {
  font: normal 14px 'Poiret One';
  color: #656565;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width: 90px;
  text-align: center;
}

/* *********** menu color pages **************** */

#about #menu li.about span, 
#about #menu li.about span:hover {
  background-color:  #385c9d;
}

#about #menu li.about a {
  color:  #385c9d;
}


#incense #menu li.incense span, 
#incense #menu li.incense span:hover {
  background-color:  #f27421;
}

#incense #menu li.incense a {
  color:  #f27421;
}

#holders #menu li.holders span, 
#holders #menu li.holders span:hover {
  background-color:  #e23325;
}

#holders #menu li.holders a {
  color:  #e23325;
}


#candles #menu li.candles span, 
#candles #menu li.candles span:hover {
  background-color:  #f27421;
}

#candles #menu li.candles a {
  color:  #f27421;
}

#oil #menu li.oil span, 
#oil #menu li.oil span:hover {
  background-color:  #3fa547;
}

#oil #menu li.oil a {
  color:  #3fa547;
}

#others #menu li.others span, 
#others #menu li.others span:hover {
  background-color:  #385c9d;
}

#others #menu li.others a {
  color:  #385c9d;
}


/* ************************** slide ***************************** */

#slide {
  width: auto;
  max-width: 100%;
  height: auto;
  position: relative;
  border-bottom: 2px solid #848484;
}

#slide ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#slide li {
      list-style: none;
      display: none;
}
#slide li:first-child {
      display: block;
}

#slide a {
  width: auto;
  max-width: 100%;
  height: auto;
  z-index: 154;
  display: block;
}

#slide a img {
  width: auto;
  max-width: 100%;
  height: auto;
}

#slide span {
  background: rgba(56,92,157,0.8);
  padding: 10px;
  color: #fff;
  font: normal 40px 'Poiret One';
  z-index: 155;
  position: absolute;
  bottom: 10%;
  left: 20%;
}
#slide #buttons {
  width: 70%;
  margin: 0 auto;
  position: relative;
  top: -100px;
}

#slide button#prev {
  background: url('images/prev.png') no-repeat center center transparent;
  border: none;
  color: transparent;
  height: 42px;
  width: 42px;
  /*position: relative;*/
  /*top: -50px;*/
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  float: left;
}

#slide button#next {
  background: url('images/next.png') no-repeat center center transparent;
  border: none;
  color: transparent;
  height: 42px;
  width: 42px;
  /*position: relative;*/
  /*top: -50px;*/
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  float: right;
}




    @media only screen and (min-width : 320px) {
      #slide span {
        font-size: 20px;
        }
    }

    @media only screen and (min-width : 768px) {
      #slide span {
        font-size: 25px;
        }
    }

    @media only screen and (min-width : 992px) {
      #slide span {
        font-size: 30px;
        }
    }

    @media only screen and (min-width : 1200px) {
      #slide span {
        font-size: 40px;
        }

    }




/* ************************** content ***************************** */


#content {
    max-width: 1160px;
    margin: 0px auto 0px;
}


    @media only screen and (min-width : 320px) {
      #content {
        max-width: 310px;
        }
    }

    @media only screen and (min-width : 768px) {
      #content {
        max-width: 758px;
        }
    }

    @media only screen and (min-width : 992px) {
      #content {
        max-width: 982px;
        }
    }

    @media only screen and (min-width : 1200px) {
      #content {
        max-width: 1160px;
        }

    }

/* **************** Home galery ********************* */

#home-products {
    margin: 40px auto;
}

#home-products ul {
  padding: 0px;
  margin: 0;
  width: 100%;
}


#home-products li {
  display: inline-block;
}

#home-products a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  font: normal 18px 'Lato';
  font-weight: 300;
  margin: 0;
  padding: 0;
}

#home-products h4 {
  font: normal 28px 'Poiret One';
  color: #ffffff;
  text-transform: uppercase;
  margin: 0px 0px 0px 0px;
  text-align: center;
  padding: 70px 0px 0px 0px;
}

#home-products p {
  text-align: center;
}


#home-products .item img {
  display: inline-block;
  width: 290px;
  padding: 0;
  margin: 0;
  border: 0;
}


#home-products li .color {
  display: inline-block;
  width: 250px;
  height: 247px;
  vertical-align: top;
  padding: 20px;
}

#home-products li .item.one .color {
  background-color: #e23325; 
}


#home-products li .item.two .color {
  background-color: #f27421; 
}

#home-products li .item.three .color {
  background-color: #3fa547; 
}

#home-products li .item.four .color {
  background-color: #385c9d; 
}

#home-products li a:hover {
  opacity: 0.8; 
}

#home-products .plus {
  font-size: 35px;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 35px;
  text-align: center;
  margin: 0 auto 0px;
  padding: 0;
  line-height: 35px;
  position: relative;
  bottom: -26px;
}




/* ************************** footer ***************************** */


#footer {
    width: 100%;
    margin: 0px auto 0px;
    border-top: 1px solid #848484;
}

#footer .width {
    width: 1160px;
    margin: 20px auto 20px;
    font: normal 14px 'Lato';
    text-transform: uppercase;
    color: #898989; 
}

#footer a {
    text-decoration: none;
    color: #898989;
    display: block;
}

#footer a:hover {
  color: #385c9d;
}

    @media only screen and (min-width : 320px) {
      #footer .width {
        max-width: 310px;
        }
    }

    @media only screen and (min-width : 768px) {
      #footer .width {
        max-width: 758px;
        }
    }

    @media only screen and (min-width : 992px) {
      #footer .width {
        max-width: 982px;
        }
    }

    @media only screen and (min-width : 1200px) {
      #footer .width {
        max-width: 1160px;
        }

    }


#menu-footer {
  display: inline-block;;
}

#menu-footer ul {
  padding: 0;
  margin: 0;
}

#menu-footer li {
  list-style: none;
  display: inline-block;
}

#menu-footer a {
  margin: 0;
  padding: 0px 30px 0px 0px;
}


#copyright {
  display: inline-block;
  text-align: right;
  max-width: 64%;
}

#copyright a {
  display: inline;
}


/* ************************** About us text ***************************** */

#about-text h2 {
  font: normal 38px 'Poiret One';
  color: #444;
}

#about-text p {
  font: normal 16px 'Lato';
  color: #444;
  line-height: 24px;
  text-align: justify;
}

#about-text img {
  float: right;
  margin: 0px 0px 20px 20px;
  display: block;
}


    @media only screen and (min-width : 320px) {
      #about-text img  {
        max-width: 310px;
        }
    }

    @media only screen and (min-width : 768px) {
      #about-text img  {
        max-width: 758px;
        }
    }

    @media only screen and (min-width : 992px) {
      #about-text img  {
        max-width: 982px;
        }
    }

    @media only screen and (min-width : 1200px) {
      #about-text img  {
        max-width: 1160px;
        }

    }



/* ************************** Product Galery ***************************** */

#galery {
  text-align: right;
  margin: 50px auto 20px;
  width: 100%;
}

          @media only screen and (min-width : 320px) {
            #galery  {
              text-align: center;
              }
          }

          @media only screen and (min-width : 768px) {
            #galery  {
              text-align: center;
              }
          }

          @media only screen and (min-width : 992px) {
            #galery  {
              text-align: center;
              width: 60%;
              }
          }

          @media only screen and (min-width : 1200px) {
            #galery  {
              text-align: right;
              width: 100%;
              }

          }

#galery .title {
  font: normal 38px 'Poiret One';
  color: #444;
  width: 200px;
  vertical-align: top;
  padding: 0;
  margin: 10px 20px 0px 0px;
  text-align: left;
  display: inline-block;
}

#galery-prod {
  display: inline-block;
  width: 896px;
  overflow: hidden;
  height: 170px;
}

#galery-prod ul {
  padding: 0;
  margin: 0;
  position: relative;
  width: 5000px;
  text-align: left;
}

#galery-prod li {
list-style: none;
display: inline-block;
}

#galery-prod li:hover{
  opacity: 0.8;
} 

#galery-prod li img {
border: 1px solid #ccc;
margin: 0px 10px 0px 0px;
}

#galery-prod a {
    text-decoration: none;
    color: #898989;
    display: block;
}

#galery-buttons {
  width: 81%;
  position: relative;
  top: -100px;
  float: right;
  margin: 0px -23px 0px 0px;
}


#galery-buttons button#prev {
  background: url('images/prev.png') no-repeat center center transparent;
  border: none;
  color: transparent;
  height: 42px;
  width: 42px;
  /* position: relative; */
  /* top: -50px; */
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  float: left;
  border: 1px solid #ccc;
  opacity: 0.7;
}

#galery-buttons button#next {
  background: url('images/next.png') no-repeat center center transparent;
  border: none;
  color: transparent;
  height: 42px;
  width: 42px;
  /* position: relative; */
  /* top: -50px; */
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  float: right;
  border: 1px solid #ccc;
  opacity: 0.7;
}


/* ************************** Product page text ***************************** */

#content .back a {
  text-decoration: none;
  font: normal 12px 'Lato';
  padding: 10px;
  margin: 10px 0px;
  background: #f27421;
  color: #fff;
  text-transform: uppercase;
  border-radius: 4px;
  display: inline-block;
}

#content .back a span {
  background: url('images/arrows.png') no-repeat -44px 0 transparent;
  padding: 11px 37px 10px 0px;
  margin: 0px -1px 0px 0px;
}



#product-text h2 {
  font: normal 38px 'Poiret One';
  color: #444;
}

#product-text p {
  font: normal 16px 'Lato';
  color: #444;
  line-height: 24px;
  text-align: justify;
}

#product-text img {
  float: right;
  margin: 0px 0px 20px 20px;
  display: block;
  border: 1px solid #848484;
}

      @media only screen and (min-width : 320px) {
            #product-text img  {
              max-width: 310px;
              }
          }

          @media only screen and (min-width : 768px) {
            #product-text img  {
              max-width: 758px;
              }
          }

          @media only screen and (min-width : 992px) {
            #product-text img {
              max-width: 982px;
              }
          }

          @media only screen and (min-width : 1200px) {
            #product-text img  {
              max-width: 1160px;
              }

          }

#product-text h3 {
  font: normal 27px 'Poiret One';
  color: #444;
}

#product-text #ingredients p , 
#product-text #instructions p {
  color: #fff;
}

#product-text #ingredients, 
#product-text #instructions {
  display: inline-block;
  width: 45.5%;
  margin: 0px 10px 0px 0px;
  padding: 20px;
}

@media only screen and (min-width : 320px) {
      #product-text #ingredients, 
      #product-text #instructions   {
          display: block;
          width: 80%;
        }
    }

    @media only screen and (min-width : 768px) {
      #product-text #ingredients, 
      #product-text #instructions   {
        display: block;
        width: 90%;
        }
    }

    @media only screen and (min-width : 992px) {
      #product-text #ingredients, 
      #product-text #instructions  {
        display: inline-block;
        width: 90%;
        }
    }

    @media only screen and (min-width : 1200px) {
      #product-text #ingredients, 
      #product-text #instructions   {
        display: inline-block;
        width: 45.5%;
        }

    }

#product-text #ingredients {
  background: #35a16d;
}

#product-text #instructions {
  background: #4975b9;
  margin: 0px 0px 0px 10px;
}

@media only screen and (min-width : 320px) { 
      #product-text #instructions   {
        margin: 10px 0px 0px 0px;
        }
    }

    @media only screen and (min-width : 768px) {
        #product-text #instructions   {
        margin: 10px 0px 0px 0px;
        }
    }

    @media only screen and (min-width : 992px) {
      #product-text #instructions {
        margin: 10px 0px 0px 0px;
      }
    }

    @media only screen and (min-width : 1200px) {
      #product-text #instructions {
        margin: 0px 0px 0px 10px;
      }
    }


#product-text ul {
  padding: 0;
  margin: 0;
}

#product-text span {
  background: url('images/p-icons.png') no-repeat transparent;
  height: 30px;
  display: inline-block;
  margin: 0px 10px 0px 0px;
  font: normal 27px 'Poiret One';
  color: #444;
  padding: 0px 0px 0px 35px
}

#product-text #description span {
  background-position: 0px -1px;
  width: 30px;
}

#product-text #ingredients span {
  background-position: -30px -2px;
  width: 0px;
  height: 31px;
  margin: 0px 9px 0px 0px;
  color: #fff;
  padding: 0px 0px 0px 25px;
}

#product-text #instructions span {
  background-position: -53px -1px;
  width: 0;
  height: 31px;
  margin: 0px 6px 0px 0px;
  color: #fff;
}



/* **************** Products list ********************* */

#products-list {
    margin: 40px auto;
}

#products-list ul {
  padding: 0px;
  margin: 0;
  width: 100%;
}


#products-list li {
  display: inline-block;
  margin: 0px 0px 20px 0px;
}

#products-list a {
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  font: normal 18px 'Lato';
  font-weight: 300;
  margin: 0px 20px 0px 0px;
  padding: 0;
  max-width: 540px;
}


#products-list .item img {
  display: block;
  width: 540px;
  padding: 0;
  margin: 0;
  border: 0;
}


#products-list li .color {
  display: block;
  width: 92.6%;
  height: auto;
  vertical-align: top;
  padding: 20px;
}

          @media only screen and (min-width : 320px) {
            #products-list li {
              display: block;
              margin: 10px 0px 0px 0px;
              max-width: 98%;
            }
            #products-list li .color {
              width: 86.6%;
            }

            #products-list a,
            #products-list .item img   {
              max-width: 100%;
              display: block;
              margin: 10px 0px 0px 0px;
              }
          }

          @media only screen and (min-width : 768px) {
            #products-list li {
              display: block;
              margin: 10px 0px 0px 0px;
              max-width: 578px;
            }
            #products-list li .color {
              width: 86.6%;
            }

            #products-list a,
            #products-list .item img   {
              max-width: 100%;
              display: block;
              margin: 10px 0px 0px 0px;
              }
          }

          @media only screen and (min-width : 992px) {            
            #products-list li {
              display: block;
              margin: 10px 0px 0px 0px;
              max-width: 98%;
            }
            #products-list li .color {
              width: 86.6%;
            }

            #products-list a, 
            #products-list .item img   {
              width: 872px;
              display: inline;
              margin: 10px 0px 0px 0px;
              }
          }

          @media only screen and (min-width : 1200px) {
            #products-list li {
              max-width: 540px;
              display: inline-block;
              margin: 0px 0px 20px 0px;
            }
            #products-list li .color {
              width: 92.6%;
            }

            #products-list a,
            #products-list .item img   {
              max-width: 540px;
              display: inline-block;
              margin: 0px 20px 0px 0px;
              }

          }



#products-list h4 {
  font: normal 28px 'Poiret One';
  color: #ffffff;
  text-transform: uppercase;
  margin: 0px 0px 0px 0px;
  text-align: left;
  padding: 0px 0px 0px 0px;
}

#products-list p {
  text-align: left;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}




#oil #products-list li .item .color {
  background-color: #3fa547; 
}

#incense #products-list li .item .color {
  background-color: #f27421; 
}

#candles #products-list li .item .color {
  background-color: #f27421; 
}

#holders #products-list li .item .color {
  background-color: #e23325; 
}

#others #products-list li .item .color {
  background-color: #385c9d; 
}

#products-list li a:hover {
  opacity: 0.8; 
}

#products-list .plus {
  font-size: 35px;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 35px;
  text-align: center;
  margin: 0 auto 0px;
  padding: 0;
  line-height: 35px;
  /* position: relative; */
  margin: -53px 0px 0px 0px;
  float: right;
}