*, *: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 {
  display:inline-block;
  text-align: left;
}

.product-text   {
  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: 2.5rem 1rem;
}

.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;
  z-index:0;
}


.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*/
.index-block-content-container{

  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%;
  padding: 1rem 1rem;
}

/*form*/

.content{
  margin: 2.5rem 2rem;
}

.login-content {

/* margin: 2.5rem 5rem; */
  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-top:2rem;

}

.log-in{
  flex-basis:100%;
  margin:1rem 1.5rem;
}

.apply-for-account{
  flex-basis:100%;
  margin:1rem 1.5rem;
}

/*NAV BAR*/
.container{

  display: block;
  margin: 0;
  /* 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%;
}

/* NEWS & UPDATES PAGE CONTENT */
.post {
  -ms-flex-grow: 1;
  flex-grow: 1;
}

/* TESTIMONIALS ON ABOUT PAGE */
.testimonial {
  -ms-flex-grow: 1;
  flex-grow: 1;
}

.testimonial-text {
  text-align: left;
  max-width: 100%;
}

/*BANNER*/
.banner-text{
  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;

}

#apply-account-paragraph{
  max-width:90%;
}


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

  .index-block-content-container{
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

    margin:1rem 2rem;
  }

  .block {
    flex-basis:40%;
  }


}

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

  .index-block-content-container{
    /* -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around; */

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

    margin:1rem 4rem;
  }

  .block {
    padding: 1rem 1rem;
    flex-basis:40%;
  }

}

@media(min-width: 56.25em){

  .index-block-content-container{
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;

    margin:1rem 6rem;
  }

  .block {
    padding: 0.5rem 0.5rem;
    flex-basis:23%;
  }


}

@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;

  }
}

/*banner text*/
@media(min-width: 62.5em){

  .banner {
    position: relative;
  }

  .banner-text{
    position: absolute;
    bottom: 2.5rem;
    right: 0;
    left: 9rem;
    -webkit-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

    max-width:50%;

  }

  .banner-title {
    padding:0 2rem;
  }

  .banner-description{
    padding:0 2rem;
    padding-bottom:1rem;
  }

  .product-content{
    margin: 2.5rem 5rem;
  }

}

/*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;
  }

  .product-content h1 {
    margin-left:3rem;
  }

}

@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;
  }

  .product-content h1 {
    margin-left:6rem;
  }

}

@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;
  }

  /*RESPONSIVE FORM*/
  input[type= text] {
    max-width: 70%;
  }
  input[type=password] {
    width: 70%;
  }


  #apply-account-paragraph{
    max-width:90%;
  }

}

@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;
  }

  /*RESPONSIVE FORM*/
  input[type= text] {
    width: 40%;
  }
  input[type=password] {
    width: 40%;
  }

  #apply-account-paragraph{
    max-width:60%;
  }
}

.post-text{
  max-width:100%;
}

/* RESPONSIVE FORM*/
@media(min-width:56.25em){

  /*RESPONSIVE FORM*/
  input[type= text] {
    width: 40%;
  }
  input[type=password] {
    width: 40%;
  }

}

/* NEWS & UPDATES RESPONSIVE QUERIES */
@media(min-width: 50em){

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

    margin: 1rem 11rem;
  }

  .update-image {
    display: block;
    max-width: 50%;
    height: 50%;
    margin-left: 0;
    margin-right: 0;
  }

  .update-content h1 {
    display: inline-block;
    text-align: left;
    margin-bottom: 0;
  }

  .post {
    display: inline-flex;
  }

  .post-text {
    text-align: left;
    max-width: 60%;
    margin: 0;
  }

  .post-text h2 {
    margin: 0;
  }
}

/* ABOUT RESPONSIVE QUERIES */
@media(min-width: 50em){

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

    margin: 1rem 11rem;
  }

  .about-content h1 {
    display: inline-block;
    text-align: left;
  }

  .about-section {
    display: inline;
    text-align: left;
    width: 60%;
    margin: 0;
  }

  .about-section h2 {
    text-align: left;
    width: 60%;
    margin: 1rem 0;
  }

  .go-apply {
    display: inline;
    text-align: left;
    width: 60%;
    margin: 0;
  }

  .go-apply h2 {
    text-align: left;
    width: 60%;
    margin: 1rem 0;
  }
}


/* TESTIMONIALS MEDIA QUERIES */
@media(min-width: 50em){

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

    margin: 1rem 11rem;
    text-align: left;
  }

  .feedback h1 {
    text-align: left;
  }

  .testimonial {
    display: inline-flex;
    margin: 1rem 0;
  }

  .testimonial-text {
    text-align: left;
    width: 40%;
  }

  .testimonial-text h2 {
    margin: 0;
  }
}


/*APPLY/ LOGIN PAGE CONTAINER*/
@media(min-width:37.5em){

.log-in{
  flex-basis: 40%;
}

.apply-for-account{
  flex-basis: 40%;
}

.content{
  margin:2.5rem 10.5rem;
}

}