/* Existing Site Styles */

.wasserstrom-homepage-section-headline {
    border-bottom: 1px solid #d5d5d5;
    margin: 0 15px 20px 15px;
}

#wasserstrom-homepage-container h3 {
    color: #327D96;
}

#wasserstrom-homepage-container h3 {
    text-transform: none;
    font-family: 'Hind';
}

#wasserstrom-homepage-popular-categories a {
    text-decoration: none;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700);
/* VARIABLES */
/* IMPORT */
/* COMMON IMPORTS */
/*start common body styles */
html {
  font-size: 62.5%; }

body {
  font-family: "Open Sans", Arial;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: .04rem; }

html {
  -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8); }

div.content_wrapper {
  background: #eeeeee; }

div.content_wrapper > div.content_left_shadow > div.content_right_shadow > div.main_content {
  background: #eeeeee;
  max-width: 1400px; }


h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", Arial;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 1em; }

h1 {
  font-size: 4rem; }

/*error messaging store encountered an error*/
h1[role^='main'] {
  font-size: 3rem;
  color: #B43A4C; }

h2 {
  font-size: 3rem; }

h3 {
  font-size: 2.4rem; }

.inputField,
.input_field {
  border-radius: 0; }

  #wasserstrom-homepage-container h3 {
    color: #307991;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 21px;
    margin: 0 0 10px 0;
    text-align: center;
    text-transform: uppercase;
}

#wasserstrom-homepage-blog h3 {
    display: block;
    font-size: 21px;
    letter-spacing: 0;
    margin: 0 0 10px 0;
    max-width: 600px;
    text-align: left;
}

  #wasserstrom-homepage-container {
    margin: 40px auto 0 auto;
  }
  
  #wasserstrom-homepage-container h2 {
    color: #222;
    display: inline-block;
    font-family: 'Hind';
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
  }
  
  #wasserstrom-homepage-newsletter-subscribe h2 {
    color: #fff !important;
    display: block !important;
    text-align: center !important;
  }
  
  #wasserstrom-homepage-whats-hot-new {
      clear: both;
      margin: 0 auto 60px auto;
      max-width: 1400px;
      width: 100%;
  }
  
    #wasserstrom-homepage-whats-hot-new h3 {
      color: #222;
      font-family: 'Hind', sans-serif;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.2;
      margin: 0 0 3px 0;
      text-align: left;
      text-transform: none;
    }
  
    #wasserstrom-homepage-whats-hot-new span {
      color: #E42545;
    }
  
    #wasserstrom-homepage-whats-hot-new p {
      color: #222;
      font-family: 'Hind', sans-serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.2;
      text-align: left;
    }
  
  #wasserstrom-homepage-container h3 {
      text-transform: none;
      font-family: 'Hind';
  }
  
  #wasserstrom-homepage-popular-categories, #wasserstrom-homepage-sales, #wasserstrom-homepage-request-a-quote, #wasserstrom-homepage-featured-brand-stores, #wasserstrom-homepage-whats-hot {
      clear: both;
      margin: 0 auto 50px auto;
      max-width: 1400px;
      width: 100%;
  }
  
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 10px;
    row-gap: 1em;
 
  }

  .blog-preview{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 1em;
  }

  @media screen and (max-width: 1200px) {
    .grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (max-width: 768px) {
    .grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-preview{
        grid-template-columns: repeat(1, 1fr);
    }
  }

  .homepage-container{
    max-width:1400px;
    margin: 0 auto
  }

  .grid-element img{
    width:100%
  }

  .post-container img{
    max-width:100%;
  }

  .post-image {
    background-size: cover;
    background-position: center;
    width: 100%;  /* Take up full width of the container */
    padding-bottom: 100%;  /* Makes the div square */
    margin-bottom:10px;
}


  .card {
  
    display: grid;
    grid-template-columns: 75% 1fr;
    grid-auto-rows: 1fr;  /* New property */
    min-height:350px
}

.text-section {
    background-color: lightgray;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-section {
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(211,211,211,1)), url(images/person.png);
    background-size: cover;
    background-position: center;
}

.image-section img {
    width:100%
}

/* Responsive styles */
@media (max-width: 768px) {
    .card {
        grid-template-columns: 1fr 1fr;
    }
}

.card-text{
    max-width:600px;
    margin:auto;
    font-size: 20px;
}


.card button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #307991, #1a6985);
    background-image: -moz-linear-gradient(top, #307991, #1a6985);
    background-image: -ms-linear-gradient(top, #307991, #1a6985);
    background-image: -o-linear-gradient(top, #307991, #1a6985);
    background-image: linear-gradient(to bottom, #307991, #1a6985);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    margin-top:15px;
    margin-bottom:15px;

  }
  
  .card button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #307991, #bee0ec);
    background-image: -moz-linear-gradient(top, #307991, #bee0ec);
    background-image: -ms-linear-gradient(top, #307991, #bee0ec);
    background-image: -o-linear-gradient(top, #307991, #bee0ec);
    background-image: linear-gradient(to bottom, #307991, #bee0ec);
    text-decoration: none;
  }

  .color-pop {
    color: #307991; 
}