/*------------------------------------*\
    RESET
\*------------------------------------*/
/* https://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

    
    /* HTML5 display-role reset for older browsers */
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section{
        display:block;
    }
    body{
        line-height:1;
    }
    ol,ul{
        list-style:none;
    }
    blockquote,q{
        quotes:none;
    }
    blockquote:before,blockquote:after,
    q:before,q:after{
        content:’’;
        content:none;
    }
    /* remember to define visible focus styles! 
    :focus{
        outline:?????;
    } */
    
    /* remember to highlight inserts somehow! */
    ins{
        text-decoration:none;
    }
    del{
        text-decoration:line-through;
    }
    
    table{
        border-collapse:collapse;
        border-spacing:0;
    }
    
    /*------------------------------------*\
        $MAIN
    \*------------------------------------*/
    
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
    
    
    
    /* Typography */
    
    h1 {
      margin: 100px;
      font-size: 28px;
      font-weight: 300;
      flex: 1;
    }
    
    h5 {
      font-weight: 500;
      line-height: 1.7em;
    }
    
    h6 {
      color: #666;
      font-size: 14px;
    }

  
    
    /* Product Layout */
    
    .product-filter {
      padding: 30px 0;
    }
    .product-filter #list {
      border-radius: 20px;
    }

    .product-filter h1{
      margin-left: 5px;
    }
    
    .collection-sort {
      margin: 30px 30px 0 30px;
    }

    
    label {
      color: #666;
      font-size: 10px;
      font-weight: 500;
      line-height: 2em;
      text-transform: uppercase;
    }
    
    .products {
      display: flex;
      flex-wrap: wrap;
    }
    
    .products .product-card #item-description{
      border: 1px solid rgb(255, 254, 254);
      display: none;
      font-size: 10px;
      margin-top: 10px;
      padding: 5px;
      text-transform: capitalize;
      

    }

    .product-image:hover #item-description {
      display: block;
      background-color: #C1CDC4;
      border-radius: 10px;
    }

  
    .product-card {
      display: flex;
      flex-direction: column;
      margin: 10px;
      
      padding: 2%;
      flex: 1 16%;
      
      background-color: white;
      box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);  
      width: 250px;
      border-radius: 10px;
    }
    
    .product-image img{
      border-radius: 15px;
      max-height: 230px;
      max-width: 220px;
      align-items: center;
      background: transparent;
    }

    
    .product-info {
      margin-top: 10px;
    }

    .product-info .com-list {   /*product description list */
      font-size: 10px;
    }
    .product-info .com-list li:before {  
      content:"• ";
    }

    .product-card:hover {
      -moz-box-shadow: 3px 3px 4px #000; 
      -webkit-box-shadow: 3px 3px 4px #000; 
      box-shadow: 3px 3px 4px #000; 
      border-radius: 5px;
      opacity: 0.9 ;
      border: 0.5px solid;
      filter:  blur(40%)
    }

    
    .btn-grad-learnmore {background-image: linear-gradient(to right, #ee0979 0%, #ff6a00  51%, #ee0979  100%)}
    .btn-grad-learnmore {
       margin-left: 230px;
       padding: 2px 5px;
       text-align: center;
       font-size: 13px;
       text-transform: uppercase;
       transition: 0.5s;
       background-size: 200% auto;
       color: white;            
       border-radius: 10px;
       display: block;
       cursor: pointer;
     }

     .btn-grad:hover {
       background-position: right center; /* change the direction of the change here */
       color: #fff;
       text-decoration: none;
     }


.grid-dvr {
  padding: 5px;
  margin: 10px;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: white;
  width: 400px;
}


.grid-dvr .grid-image {
  margin-right: 20px;
  padding: 5px;
  max-width: 150px;
  height: 70px;
  border-style: ridge;
  border-radius: 30px;
  float: right;
  
}
.grid-dvr .dvr-des ul{
  background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
  border-radius: 10px;
  list-style-position: inside;
  padding: 20px;
}
.grid-dvr .dvr-des .com-list li:before {  
  content:"• ";
}

.grid-dvr .dvr-head{
  max-width: 250px;
  height: 70px;
}

.grid-box-heading {
  margin: 10px;
}

.grid-box-description {
  margin: 10px;
  font-size: 12px;
}

.title h2 span {
  color: #03509e; 
}
.title h1 span {
  color: #03509e; 
}

@media screen and( max-width: 767px ) {
  .product-filter .collection-sort {
    background-color: brown;
  }
}