*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*PAGE CONTENT*/
/*Code for mobile version 1st*/

.product-content h1 {
  text-align: center;
}

.product-text h2  {
  text-align: left;
}

.tools-header {
  text-align: center;
}

.product-content{
  flex-direction: column;

  display: -webkit-flex;
  display: -ms-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;

  margin: 0rem 1.5rem;
  margin-bottom: 2rem;
}

.product-small-item-container {

  display: -webkit-flex;
  display: -ms-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;

  margin: 0rem 0.5rem;
  margin-bottom: 2rem;
}

.product {
  position:relative;
  display: inline-block;
  flex-basis: 100%;
  text-align:center;
  overflow:hidden;
}

.product:before {
  position:absolute;
  display: block;
  content: ' ';
  opacity:0.3;
  z-index:-1;
  background-image: url("../image/product-img.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
}

.product-description{
  max-width:85%;
  text-align: left;
  margin: 0.8rem 1.5rem;
}

.product-small-item{
  display: inline-block;
  flex-basis:100%;
}


/*IN MOBLIE VERSION*/
/*BOX-CONTENT*/
.box-content{

  display: -webkit-flex;
  display: -ms-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;

  margin:1rem 1.3rem;
}

/*BLOCKS*/
.block {
  display: inline-block;
  flex-basis:100%;
  /*width: 33%*/
}

.content {
  margin: 2.5rem 5rem;
}

/*NAV BAR*/
.container{

  display:block;
  /* display: -webkit-flex;
  display: -ms-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start; */

}

.nav-item{
  flex-basis:100%;
}

/*media queries */
/*MAIN PAGE*/
@media(min-width:25em) and (max-width:42.5em){

  .box-content{
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

    margin:1rem 1.3rem;
  }

  .block {
    flex-basis:40%;
  }

}

@media(min-width:42.5em){

  .box-content{
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;

    margin:1rem 1.3rem;
  }

  .block {
    flex-basis:20%;
  }

}

@media(min-width:49.375em){

  .container{

    display: -webkit-flex;
    display: -ms-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

  }

}

/*PRODUCTS*/
@media(min-width:43.75em) and (max-width: 56.25em){

  .product {
    display: inline-block;
    margin: 0.5rem 2rem;
    text-align:center;
  }

  .product-description{
    max-width:85%;
    margin: 0 6rem;
    text-align:left;
    margin-bottom:1.5rem;
  }


}

@media(min-width:56.25em){

  .product {
    margin: 0.5rem 6rem;
    text-align:right;
  }

  .product-text{
    max-width:70%;
    text-align:left;
    margin-left: 3rem;
  }

  .product-description{
    max-width:85%;
    margin: 0 6rem;
    text-align:left;
    margin-bottom:2rem;
  }


  .normal-button{
    margin-right:3rem;
  }

}

@media(min-width:34.375em) and (max-width:56.25em){

  .product-small-item{
    flex-basis:45%;
    margin: 0 0.5rem;
  }

  .product-in-text{
    margin-left:0;
  }

}

@media(min-width:56.25em){

  .product-small-item-container {

    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;

    margin:0 5rem;
  }

  .product-small-item{
    flex-basis:30%;
    margin: 0 0.3rem;
  }

  .product-in-text{
    margin-left:0;
  }

}